:root { color-scheme:dark; --bg:#000; --panel:#101010; --text:#fff; --muted:#c7c7c7; --accent:#00c8ff; --border:#1a1a1a; --mono:"JetBrains Mono",ui-monospace,monospace; } * { box-sizing:border-box; } html { background:var(--bg); } body { min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at 75% -10%,rgb(0 200 255 / 11%),transparent 35rem),radial-gradient(circle at 8% 45%,rgb(68 76 105 / 10%),transparent 32rem),var(--bg); font:400 16px/1.6 Inter,-apple-system,BlinkMacSystemFont,sans-serif; } a { color:inherit; }
nav { position:sticky; top:0; z-index:10; padding:20px 0; border-bottom:1px solid var(--border); background:rgb(0 0 0 / 80%); backdrop-filter:blur(10px); } .nav-content { display:flex; max-width:1100px; margin:auto; padding:0 40px; align-items:center; justify-content:space-between; gap:18px; } .nav-brand { color:var(--text); font-size:1.1rem; font-weight:900; text-decoration:none; text-transform:uppercase; } .nav-actions { display:flex; align-items:center; gap:14px; } .nav-icon-link { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgb(255 255 255 / 14%); border-radius:999px; background:rgb(255 255 255 / 4%); color:#fff; text-decoration:none; font:700 .66rem/1 var(--mono); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .linkedin-icon span { font-size:1rem; } .nav-icon-link:hover,.nav-icon-link:focus-visible { outline:0; transform:translateY(-2px); border-color:var(--accent); box-shadow:0 0 18px rgb(0 200 255 / 22%); }
.projects-menu { position:relative; } .projects-menu summary { list-style:none; cursor:pointer; } .projects-menu summary::-webkit-details-marker { display:none; } .projects-icon { position:relative; } .projects-icon::before { width:16px; height:11px; content:""; display:block; border:3px solid #fff; border-radius:4px 4px 2px 2px; } .projects-icon::after { position:absolute; bottom:7px; left:50%; width:22px; height:6px; content:""; border-radius:2px; background:#fff; transform:translateX(-50%); } .projects-menu[open] .projects-icon { border-color:var(--accent); box-shadow:0 0 22px rgb(0 200 255 / 28%); } .projects-menu-panel { position:absolute; top:calc(100% + 14px); right:0; width:min(88vw,390px); max-height:min(72vh,560px); overflow-y:auto; padding:12px; border:1px solid rgb(0 200 255 / 28%); border-radius:12px; background:rgb(8 10 13 / 96%); box-shadow:0 24px 70px rgb(0 0 0 / 60%),0 0 32px rgb(0 200 255 / 14%); } .projects-menu-title { display:block; padding:6px 8px 10px; color:var(--accent); font:700 .7rem/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; } .project-link { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:10px 12px; border:1px solid transparent; border-radius:8px; color:var(--text); font-size:.88rem; font-weight:600; text-decoration:none; transition:background .18s ease,border-color .18s ease,transform .18s ease; } .project-link::after { content:"open"; color:var(--muted); font:700 .62rem/1 var(--mono); text-transform:uppercase; } .project-link:hover,.project-link:focus-visible { border-color:rgb(0 200 255 / 35%); outline:0; background:rgb(0 200 255 / 10%); transform:translateX(-2px); }
main { width:min(1440px,calc(100% - 48px)); min-height:calc(100vh - 75px); margin:auto; padding:clamp(24px,4vw,52px) 0; } .terminal { display:flex; min-height:calc(100vh - 180px); overflow:hidden; flex-direction:column; border:1px solid #303030; border-radius:8px; background:#101010; box-shadow:0 0 0 1px rgb(0 0 0 / 60%),0 20px 80px rgb(0 0 0 / 45%),0 0 30px rgb(0 200 255 / 8%); font-family:var(--mono); } .terminal-header { height:38px; display:flex; align-items:center; padding:0 10px; border-bottom:1px solid #333; background:#1a1a1a; color:#888; font-size:.75rem; user-select:none; } .header-left { display:flex; flex:1; align-items:center; gap:15px; } .terminal-mark { color:#bdeeff; font-weight:700; } .tab-strip { align-self:stretch; display:flex; gap:6px; align-items:stretch; } .terminal-tab { height:30px; margin-top:8px; padding:0 18px; border:1px solid rgb(255 255 255 / 8%); border-bottom:0; border-radius:7px 7px 0 0; background:rgb(35 35 35 / 50%); color:#b9b9b9; cursor:pointer; font:400 .75rem/1 var(--mono); transition:filter .15s ease,border-color .15s ease,box-shadow .15s ease; } .terminal-tab.blue { background:rgb(25 118 210 / 50%); color:#e3f2fd; } .terminal-tab.red { background:rgb(198 40 40 / 50%); color:#ffecec; } .terminal-tab.llm { background:rgb(76 0 130 / 40%); color:#f3e5f5; } .terminal-tab:hover,.terminal-tab:focus-visible { outline:0; filter:brightness(1.12); } .terminal-tab.active,.terminal-tab[aria-selected="true"] { border-color:rgb(255 255 255 / 30%); box-shadow:inset 0 0 0 1px rgb(255 255 255 / 15%),inset 0 2px 0 rgb(255 255 255 / 20%); } .terminal-title { position:absolute; left:50%; transform:translateX(-50%); } .terminal-dot { width:10px; height:10px; margin-left:auto; border-radius:50%; background:#333; } .terminal-panel { flex:1; min-height:0; } .kali-panel iframe { width:100%; height:100%; min-height:calc(100vh - 218px); border:0; background:#000; } .terminal-body { padding:clamp(16px,3vw,30px); } .terminal-intro,.terminal-footer { margin:0 0 14px; color:#aaa; font-size:.78rem; } .prompt { margin:0 0 18px; color:#eee; font-size:clamp(.78rem,1.2vw,.94rem); } .prompt span { color:#aaa; } .prompt b { padding:1px 7px; border-radius:2px; background:#0d9ed8; color:#000; }
.listing { display:grid; gap:8px; } .news-entry { border-left:2px solid transparent; } .news-entry:nth-child(even) .article-row { background:rgb(105 135 165 / 10%); } .article-row { position:relative; display:grid; grid-template-columns:10ch 2ch minmax(11ch,15ch) minmax(13ch,16ch) 2.3ch 8ch 12ch minmax(18rem,1fr); gap:12px; align-items:start; padding:12px 14px; border-radius:4px; color:var(--text); font-size:clamp(.72rem,1.1vw,.88rem); line-height:1.5; } .article-link { position:absolute; z-index:1; inset:0; } .article-link:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } .permissions,.links,.risk,time { color:#9a9a9a; white-space:nowrap; } .source { color:#d6d6d6; overflow-wrap:anywhere; } .category { width:max-content; max-width:100%; padding:1px 6px; border:1px solid currentColor; border-radius:3px; color:#89dcff; font-size:.76em; font-weight:700; letter-spacing:.03em; text-transform:uppercase; } .summary-toggle { z-index:2; width:1.8em; height:1.8em; padding:0; border:1px solid rgb(255 255 255 / 24%); border-radius:3px; color:#b8eefe; background:rgb(255 255 255 / 5%); cursor:pointer; font:700 .8rem/1 var(--mono); } .summary-toggle:hover,.summary-toggle:focus-visible { outline:0; border-color:var(--accent); color:var(--accent); background:rgb(0 200 255 / 12%); } .summary-toggle[aria-expanded="true"] span { display:block; transform:rotate(180deg); } .headline { display:flex; min-width:0; gap:.4em; font-weight:700; white-space:nowrap; } .headline-text { min-width:0; overflow:hidden; text-overflow:ellipsis; } .headline b { flex:none; color:var(--accent); font-weight:400; } .severity-critical .category { color:#ff8585; } .severity-high .category { color:#ffc276; } .article-row:hover { background:linear-gradient(90deg,rgb(0 200 255 / 10%),transparent); } .entry-summary { display:none; margin:0 14px 14px; padding:10px 12px; border-left:1px solid rgb(0 200 255 / 45%); color:#d8e3e8; background:rgb(255 255 255 / 3%); font-family:Inter,sans-serif; font-size:.88rem; line-height:1.55; } .summary-visible .entry-summary { display:block; } @keyframes entry-arrival { 0%,100% { box-shadow:none; background-color:transparent; } 50% { box-shadow:inset 0 0 18px rgb(0 200 255 / 14%); background-color:rgb(0 200 255 / 5%); } } .new-entry-glow .article-row { animation:entry-arrival .55s ease-out 3; }
@media (max-width:900px) { .article-row { grid-template-columns:10ch minmax(10ch,1fr) minmax(11ch,auto) 2.3ch 10ch; } .links,.risk { display:none; } .headline { grid-column:2 / -1; } } @media (max-width:620px) { nav { padding:14px 0; } .nav-content { padding:0 16px; } .nav-brand { max-width:calc(100% - 126px); font-size:.72rem; line-height:1.25; } .nav-actions { gap:7px; } .nav-icon-link { width:30px; height:30px; } .projects-menu-panel { position:fixed; top:62px; left:12px; right:12px; width:auto; max-height:calc(100vh - 78px); } main { width:calc(100% - 24px); min-height:0; padding:12px 0 24px; } .terminal { min-height:calc(100vh - 86px); border-radius:5px; } .terminal-title { display:none; } .terminal-tab { padding:0 12px; } .terminal-body { padding:16px 12px; } .kali-panel iframe { min-height:calc(100vh - 124px); } .article-row { grid-template-columns:minmax(8ch,1fr) auto 2.3ch; gap:5px 10px; padding:12px; } .permissions,.links,.risk { display:none; } .source { grid-column:1; } .category { grid-column:2; justify-self:end; } .summary-toggle { grid-column:3; } time { grid-column:1 / -1; } .headline { grid-column:1 / -1; } .entry-summary { margin:0 12px 14px; font-size:.84rem; } .terminal-footer { font-size:.68rem; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }