@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root { --bg:#07080b; --surface:#101217; --surface-raised:#151922; --line:#2a2e38; --text:#f2f4f8; --muted:#9ca4b2; --acid:#caff46; --blue:#2095d6; --max:1180px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:var(--bg); font:16px/1.6 Inter,Arial,sans-serif; } body::before { position:fixed; z-index:-1; inset:0; opacity:.32; content:""; background-image:linear-gradient(rgba(202,255,70,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(202,255,70,.028) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(ellipse at 50% 0%,black 0%,transparent 70%); } a { color:inherit; } .shell { width:min(var(--max),calc(100% - 48px)); margin-inline:auto; }
.site-header { position:sticky; z-index:20; top:0; border-bottom:1px solid var(--line); background:rgba(7,8,11,.96); backdrop-filter:blur(12px); }.nav { display:flex; align-items:center; gap:28px; min-height:64px; }.brand,h1,h2 { font-family:"Chakra Petch",Arial,sans-serif; font-weight:700; }.brand { font-size:20px; letter-spacing:-.5px; text-decoration:none; }.nav nav { display:flex; gap:22px; margin-left:auto; }.nav nav a,.breadcrumbs,.category,.meta,.contents p { font:700 10px/1.2 "JetBrains Mono",monospace; letter-spacing:.08em; }.nav nav a { color:var(--muted); text-decoration:none; }.nav nav a:hover,.nav nav a:focus-visible { color:var(--acid); outline:none; }
.top-banner-area { display:flex; justify-content:center; min-height:135px; padding:28px 16px 16px; border-bottom:1px solid #181b22; }.ad-slot { position:relative; display:grid; overflow:hidden; flex:0 0 auto; place-items:center; color:#aeb7c4; border:1px solid var(--line); background:linear-gradient(135deg,rgba(32,149,214,.1),transparent 42%),var(--surface); text-align:center; }.ad-slot::before { position:absolute; inset:7px; pointer-events:none; content:""; border:1px dashed rgba(202,255,70,.24); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }.ad-slot::after { position:absolute; inset:0; pointer-events:none; content:""; background:linear-gradient(90deg,var(--acid),transparent 35%) 0 0 / 64px 2px no-repeat,linear-gradient(0deg,var(--acid),transparent 36%) 0 0 / 2px 64px no-repeat,linear-gradient(270deg,var(--acid),transparent 35%) 100% 100% / 64px 2px no-repeat; opacity:.8; }.ad-slot > span { position:relative; z-index:1; display:grid; gap:4px; padding:14px; font:700 10px/1.3 "JetBrains Mono",monospace; letter-spacing:.09em; }.ad-slot b { color:var(--acid); font-size:16px; }.ad-slot small { color:var(--muted); font-size:8px; }.leaderboard { width:728px; height:90px; }.square { width:300px; height:300px; }.rectangle { width:300px; height:250px; }.skyscraper { width:160px; height:600px; justify-self:center; }.inline-leaderboard { width:min(728px,100%); margin:30px auto; aspect-ratio:728 / 90; }
.breadcrumbs { margin:34px 0 0; color:var(--muted); }.breadcrumbs span,.meta span { padding-inline:8px; color:var(--acid); }.article-header { display:grid; grid-template-columns:minmax(0,720px) 300px; justify-content:space-between; gap:48px; padding:30px 0 42px; border-bottom:1px solid var(--line); }.category { display:inline-block; padding:7px 9px; color:#e0f2ff; background:var(--blue); }h1 { max-width:720px; margin:18px 0 16px; font-size:clamp(30px,3.6vw,46px); line-height:1.06; letter-spacing:-.5px; }.dek { max-width:720px; color:#c5cbd5; font-size:21px; line-height:1.5; }.meta { padding-top:16px; color:var(--muted); border-top:1px solid var(--line); }
.article-layout { display:grid; grid-template-columns:minmax(0,720px) 300px; justify-content:space-between; gap:48px; padding:46px 0 86px; }.hero-slot,.content-image { width:100%; aspect-ratio:16 / 9; margin:0 0 24px; }.content-image { margin-top:26px; }.article-image { position:relative; overflow:hidden; border:1px solid var(--line); background:var(--surface); }.article-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }.article-content { min-width:0; }.article-content section { scroll-margin-top:92px; }.article-content h2 { margin:48px 0 18px; font-size:33px; line-height:1.08; text-transform:uppercase; }.article-content h2::before { color:var(--acid); content:"// "; font:14px monospace; }.article-content h3 { margin:28px 0 8px; font:700 23px/1.15 "Chakra Petch",Arial,sans-serif; }.article-content p,.article-content li { color:#c6ccd6; font-size:18px; }.article-content li + li { margin-top:8px; }.article-content .lead { color:#e3e6eb; font-size:18px; }.article-content a { color:var(--acid); font-weight:600; text-underline-offset:3px; }.article-content a:hover,.article-content a:focus-visible { color:#e2ff99; outline:none; }.table-wrap { overflow-x:auto; margin:25px 0; border:1px solid var(--line); }table { width:100%; min-width:560px; border-collapse:collapse; }th,td { padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; }th { color:var(--acid); background:#141820; font:700 10px "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }td { color:#c6ccd6; font-size:14px; }.note { color:var(--muted)!important; font-size:14px!important; }.callout { margin:28px 0; padding:18px 20px; color:#d9dee6; border-left:3px solid var(--acid); background:var(--surface-raised); font-size:15px; }.callout strong { color:var(--acid); }.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0; }.choice-grid > div { padding:21px; border:1px solid var(--line); background:var(--surface); }.choice-grid h3 { margin:0 0 13px; }.choice-grid ul { margin:0; padding-left:20px; }.choice-grid li { font-size:15px; }
.sidebar { position:sticky; top:90px; align-self:start; display:grid; gap:22px; }.contents { border:1px solid var(--line); background:var(--surface); }.contents p { margin:0; padding:15px; color:var(--acid); border-bottom:1px solid var(--line); }.contents a { display:block; padding:12px 15px; color:#c0c6d0; border-bottom:1px solid var(--line); font-size:13px; text-decoration:none; }.contents a:last-child { border-bottom:0; }.contents a:hover,.contents a:focus-visible,.contents a.active { color:var(--acid); background:#171b22; outline:none; }.sources { padding-top:18px; border-top:1px solid var(--line); }.sources ul { padding-left:20px; }
@media (max-width:860px) { .article-header,.article-layout { grid-template-columns:1fr; }.article-header { gap:28px; }.article-header .square,.sidebar { display:none; } } @media (max-width:760px) { .shell { width:min(100% - 30px,var(--max)); }.nav nav { display:none; }.top-banner-area { display:none; } h1 { font-size:34px; }.dek,.article-content p,.article-content li { font-size:16px; }.article-layout { padding-top:32px; }.article-content h2 { font-size:27px; }.inline-leaderboard { margin-block:24px; }.choice-grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.image-placeholder { display:grid; place-items:center; min-height:0; color:var(--acid); background:linear-gradient(135deg,rgba(32,149,214,.1),transparent 42%),var(--surface); text-align:center; }.image-placeholder::before { position:absolute; inset:12px; content:""; border:1px dashed rgba(202,255,70,.24); clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); }.image-placeholder span { position:relative; z-index:1; font:700 13px/1.5 "JetBrains Mono",monospace; letter-spacing:.1em; }.image-placeholder small { color:var(--muted); font-size:10px; }.bottom-anchor { position:fixed; right:0; bottom:0; left:0; z-index:30; display:none; flex-direction:column; align-items:center; padding:7px 12px 8px; border-top:1px solid var(--line); background:#07080bf7; }.bottom-anchor.is-visible { display:flex; }.bottom-anchor .leaderboard { width:728px; height:90px; }.bottom-anchor #close-anchor { position:absolute; top:2px; right:max(12px,calc((100vw - 728px) / 2 + 2px)); z-index:2; display:grid; width:22px; height:22px; place-items:center; margin:0; padding:0; border:1px solid #3b424e; border-radius:50%; color:#d7dce5; background:#10131ad9; font:20px/1 Arial,sans-serif; cursor:pointer; }.bottom-anchor #close-anchor:hover,.bottom-anchor #close-anchor:focus-visible { border-color:var(--acid); color:var(--acid); outline:none; }@media (max-width:760px) { .bottom-anchor { display:none!important; } } @media (prefers-reduced-motion:reduce) { .bottom-anchor { transition:none; } }