:root{color-scheme:dark;--bg:#05070c;--panel:#0d131d;--line:#26354a;--ink:#edf5ff;--muted:#96a9bf;--cyan:#39e7d6;--amber:#ffd166;--violet:#a987ff;--good:#68ef9d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(circle at 20% -5%,rgba(57,231,214,.14),transparent 35rem),radial-gradient(circle at 90% 10%,rgba(169,135,255,.12),transparent 30rem),linear-gradient(180deg,#080b12,var(--bg));color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit}.header{position:sticky;top:0;z-index:20;background:rgba(5,7,12,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(150,169,191,.16)}.header-inner{width:min(1220px,calc(100% - 32px));margin:auto;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none}.mark{width:47px;height:47px;display:grid;place-items:center;border:1px solid var(--cyan);border-radius:13px;color:var(--cyan);font:900 12px ui-monospace,monospace;box-shadow:0 0 28px rgba(57,231,214,.1)}.brand strong{display:block}.brand span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.version{border:1px solid var(--line);border-radius:999px;padding:8px 11px;color:var(--muted);font:700 11px ui-monospace,monospace}.wrap{width:min(1220px,calc(100% - 32px));margin:auto;padding:58px 0 70px}.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(290px,.6fr);gap:24px;align-items:stretch}.hero-copy,.hero-side,.system-card,.panel{border:1px solid rgba(150,169,191,.17);background:linear-gradient(145deg,rgba(18,26,38,.96),rgba(8,13,20,.96));border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.4)}.hero-copy{padding:clamp(28px,6vw,65px);position:relative;overflow:hidden}.hero-copy:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;border:1px solid rgba(57,231,214,.15);right:-150px;top:-160px;box-shadow:0 0 0 35px rgba(57,231,214,.025),0 0 0 70px rgba(57,231,214,.015)}.eyebrow{font:800 12px/1.2 ui-monospace,monospace;letter-spacing:.18em;color:var(--cyan);text-transform:uppercase}.hero h1{font-size:clamp(40px,6vw,78px);line-height:.96;margin:15px 0 18px;max-width:850px}.hero p{font-size:clamp(17px,2vw,22px);line-height:1.55;color:#c2d2e5;max-width:790px}.hero-side{padding:24px;display:grid;align-content:center;gap:13px}.hero-side .flow{border:1px solid rgba(150,169,191,.14);border-radius:13px;background:#080d15;padding:14px}.flow b{display:block;color:var(--cyan);font:800 11px ui-monospace,monospace;margin-bottom:6px}.flow span{color:var(--muted);font-size:13px;line-height:1.45}.arrow{color:var(--amber);text-align:center;font-size:20px}.section{margin-top:32px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:16px}.section-head h2{margin:0;font-size:clamp(28px,4vw,45px)}.section-head p{margin:0;color:var(--muted);line-height:1.5;max-width:560px}.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.system-card{padding:20px;display:flex;flex-direction:column;min-height:380px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}.system-card:hover{transform:translateY(-4px);border-color:rgba(57,231,214,.5)}.system-card:before{content:"";height:4px;background:var(--card-accent,var(--cyan));position:absolute;left:0;right:0;top:0}.system-code{font:900 12px ui-monospace,monospace;color:var(--card-accent,var(--cyan));letter-spacing:.12em}.era{font:700 11px ui-monospace,monospace;color:var(--muted);margin-top:6px}.system-card h3{font-size:26px;line-height:1;margin:23px 0 8px}.game-name{font-weight:800;color:#fff}.system-card p{color:var(--muted);line-height:1.5;font-size:14px}.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 18px}.chip{border:1px solid rgba(150,169,191,.19);border-radius:999px;padding:6px 8px;font:700 9px ui-monospace,monospace;color:#b6c5d7}.open{margin-top:auto;text-decoration:none;border:1px solid var(--card-accent,var(--cyan));border-radius:10px;padding:12px;text-align:center;font:900 11px ui-monospace,monospace;color:var(--card-accent,var(--cyan));background:rgba(0,0,0,.18)}.open:hover{background:rgba(57,231,214,.08)}.panel{padding:clamp(20px,4vw,40px)}.comparison{width:100%;border-collapse:collapse;font-size:14px}.comparison th,.comparison td{text-align:left;padding:13px 10px;border-bottom:1px solid rgba(150,169,191,.14);vertical-align:top}.comparison th{color:var(--muted);font:800 10px ui-monospace,monospace}.comparison td:first-child{color:var(--cyan);font-weight:800}.manifest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.manifest article{border:1px solid rgba(150,169,191,.14);background:#080d15;border-radius:13px;padding:17px}.manifest b{display:block;color:var(--amber);font:800 11px ui-monospace,monospace;margin-bottom:8px}.manifest p{margin:0;color:var(--muted);line-height:1.5;font-size:14px}.note{border-left:3px solid var(--amber);background:rgba(255,209,102,.06);padding:15px 18px;border-radius:0 12px 12px 0;color:#d7e2ef;line-height:1.6}.footer{margin-top:40px;padding-top:25px;border-top:1px solid rgba(150,169,191,.16);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px}
@media(max-width:1080px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline .system-card:last-child{grid-column:span 2}.hero{grid-template-columns:1fr}.manifest{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.header-inner,.wrap{width:calc(100% - 20px)}.wrap{padding-top:28px}.timeline{grid-template-columns:1fr}.timeline .system-card:last-child{grid-column:auto}.manifest{grid-template-columns:1fr}.section-head{display:block}.section-head p{margin-top:8px}.comparison{font-size:11px}.comparison th,.comparison td{padding:9px 5px}.version{display:none}}
.skip-link{position:fixed;z-index:100;top:10px;left:10px;min-height:44px;padding:10px 14px;display:flex;align-items:center;border-radius:8px;background:var(--cyan);color:var(--bg);font-weight:900;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.open{min-height:44px;display:flex;align-items:center;justify-content:center}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.system-card{transition:none}}