:root { --ink:#17222d; --muted:#5d6872; --paper:#f5f5ef; --panel:#fffefa; --line:#d3d9d2; --coral:#f05d5e; --mint:#55a88c; --blue:#4477a6; --yellow:#edc65b; --mono:"DM Mono",monospace; --sans:"Manrope",sans-serif; }
* { box-sizing:border-box; } html,body { min-height:100%; margin:0; } body { color:var(--ink); background:var(--paper); font-family:var(--sans); overflow:hidden; } body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:linear-gradient(rgba(23,34,45,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(23,34,45,.04) 1px,transparent 1px); background-size:42px 42px; }
button { font:inherit; } button:focus-visible,input:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }.progress-track { position:fixed; z-index:40; inset:0 0 auto; height:4px; background:#e7e9e3; }.progress-track div { width:0; height:100%; background:var(--coral); transition:width .25s ease; }
#deck-viewport { position:relative; z-index:1; height:100vh; overflow:auto; display:grid; place-items:center; padding:4.5rem 7rem 5rem; }.slide { width:min(1120px,100%); min-height:min(660px,calc(100vh - 9.5rem)); display:flex; flex-direction:column; justify-content:center; gap:2.2rem; animation:enter .35s ease both; }.eyebrow { font:500 .77rem var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mint); }.title { font-size:clamp(2.5rem,6vw,5.8rem); line-height:1; letter-spacing:0; max-width:13ch; margin:0; }.lead { color:var(--muted); font-size:clamp(1rem,1.8vw,1.35rem); line-height:1.65; max-width:60ch; margin:0; }.section-title { margin:0; font-size:clamp(2rem,4vw,3.7rem); line-height:1.08; }.section-copy { color:var(--muted); max-width:62ch; font-size:1.1rem; line-height:1.7; }
.cover-grid { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:3rem; }.signal-image { min-height:360px; position:relative; overflow:hidden; border:1px solid var(--line); background:#dae9df; }.signal-image::before,.signal-image::after { content:""; position:absolute; border:2px solid var(--ink); border-radius:50%; }.signal-image::before { width:260px; height:260px; left:18%; top:15%; box-shadow:95px 70px 0 -70px var(--coral),-42px 150px 0 -35px var(--yellow); }.signal-image::after { width:105%; height:70%; left:28%; top:45%; border-color:var(--mint); transform:rotate(-26deg); }.signal-stamp { position:absolute; right:1.4rem; top:1.4rem; background:var(--coral); color:white; padding:.55rem .7rem; font:500 .72rem var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.card,.matrix-cell,.step,.node { border:1px solid var(--line); background:rgba(255,254,250,.72); padding:1.25rem; }.card h3,.matrix-cell h3 { margin:0 0 .6rem; font-size:1rem; }.card p,.matrix-cell p { margin:0; color:var(--muted); line-height:1.55; }.tag { display:inline-block; font:500 .7rem var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:.25rem .45rem; background:#e8eee7; margin-bottom:.75rem; }.compare { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:stretch; }.versus { display:grid; place-items:center; font:700 1.2rem var(--mono); color:var(--coral); }.compare .card { min-height:235px; }.metric { font-size:2.6rem; font-weight:800; color:var(--blue); margin:.75rem 0 .2rem; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; counter-reset:step; }.step::before { counter-increment:step; content:"0" counter(step); display:block; color:var(--coral); font:500 .8rem var(--mono); margin-bottom:2rem; }.step strong { display:block; margin-bottom:.5rem; }.step span { color:var(--muted); font-size:.9rem; line-height:1.5; }.timeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:2px solid var(--ink); }.timeline-item { padding:1rem 1rem 0 0; position:relative; }.timeline-item::before { content:""; display:block; width:14px; height:14px; margin-top:-1.5rem; margin-bottom:1rem; border:2px solid var(--ink); background:var(--paper); border-radius:50%; }.timeline-item b { display:block; margin-bottom:.5rem; }.timeline-item span { color:var(--muted); font-size:.88rem; line-height:1.5; }
.chart { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; align-items:end; height:280px; padding:1rem; border-bottom:2px solid var(--ink); }.bar { background:var(--blue); min-height:16px; position:relative; }.bar span { position:absolute; bottom:calc(100% + .5rem); font:500 .75rem var(--mono); }.bar:nth-child(2){height:24%}.bar:nth-child(3){height:39%}.bar:nth-child(4){height:63%;background:var(--yellow)}.bar:nth-child(5){height:92%;background:var(--coral)}.architecture { display:grid; grid-template-columns:1fr 80px 1fr 80px 1fr; align-items:center; }.node { min-height:128px; display:flex; flex-direction:column; justify-content:center; }.node span { color:var(--muted); font-size:.9rem; }.arrow { height:2px; background:var(--ink); position:relative; }.arrow::after { content:""; position:absolute; right:0; top:-5px; border-width:6px 0 6px 9px; border-style:solid; border-color:transparent transparent transparent var(--ink); }.matrix { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }.matrix-cell { border:0; min-height:132px; }.matrix-cell.featured { background:#d8eee5; }.simulation { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }.signal-panel { min-height:260px; padding:1.5rem; border:1px solid var(--ink); background:var(--panel); }.signal-state { font:700 2rem var(--mono); color:var(--coral); margin:2rem 0; }.command { border:0; background:var(--ink); color:white; padding:.8rem 1rem; cursor:pointer; }.summary-list { display:grid; gap:1rem; max-width:800px; }.summary-item { display:grid; grid-template-columns:55px 1fr; gap:1rem; align-items:start; padding:1rem 0; border-top:1px solid var(--line); }.summary-item b { color:var(--coral); font:500 .8rem var(--mono); }
.navigation { position:fixed; z-index:30; bottom:1.25rem; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:.75rem; padding:.45rem; border:1px solid var(--line); background:rgba(255,254,250,.9); backdrop-filter:blur(10px); }.nav-button,.icon-button { display:grid; place-items:center; min-width:38px; height:38px; border:0; background:transparent; color:var(--ink); cursor:pointer; }.nav-button:hover,.icon-button:hover { background:#e9eee7; }.nav-button:disabled { opacity:.35; cursor:not-allowed; } #page-indicator { min-width:74px; text-align:center; font:500 .74rem var(--mono); }.toolbelt { position:fixed; z-index:30; left:1.2rem; top:50%; transform:translateY(-50%); display:grid; border:1px solid var(--line); background:rgba(255,254,250,.9); backdrop-filter:blur(10px); }.toolbelt > * { border-bottom:1px solid var(--line); }.toolbelt > *:last-child { border-bottom:0; }.color-control { display:grid; place-items:center; width:38px; height:38px; }.color-control input { width:21px; height:21px; padding:0; border:0; background:transparent; cursor:pointer; }
#side-menu { position:fixed; z-index:50; top:0; bottom:0; left:0; width:min(390px,90vw); padding:1.25rem; background:var(--panel); transform:translateX(-102%); transition:transform .25s ease; border-right:1px solid var(--line); overflow:auto; }#side-menu.open { transform:none; } #side-menu header { display:flex; justify-content:space-between; align-items:center; padding-bottom:1rem; border-bottom:1px solid var(--line); font-weight:700; }.menu-section { margin:1.25rem 0 .4rem; color:var(--mint); font:500 .72rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.menu-page { width:100%; text-align:left; padding:.7rem 0; border:0; background:transparent; color:var(--muted); cursor:pointer; }.menu-page.active { color:var(--ink); font-weight:700; }.menu-page span { color:var(--coral); font:500 .72rem var(--mono); margin-right:.65rem; }#menu-overlay { position:fixed; z-index:45; inset:0; border:0; background:rgba(23,34,45,.25); opacity:0; pointer-events:none; transition:opacity .25s; }#menu-overlay.visible { opacity:1; pointer-events:auto; }
#pen-canvas,#draw-canvas { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:60; } #draw-canvas.active,#pen-canvas.active { pointer-events:auto; } #draw-hint { position:fixed; z-index:70; bottom:5rem; left:50%; transform:translateX(-50%); padding:.5rem .75rem; margin:0; background:var(--ink); color:white; font:.72rem var(--mono); opacity:0; pointer-events:none; transition:opacity .2s; } #draw-hint.visible { opacity:1; }
@keyframes enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } } @media (max-width:760px) { #deck-viewport { padding:4rem 1.35rem 5.5rem 4.5rem; }.cover-grid,.simulation { grid-template-columns:1fr; }.signal-image { min-height:220px; }.card-grid,.steps { grid-template-columns:1fr; }.compare { grid-template-columns:1fr; }.versus { min-height:20px; }.timeline { grid-template-columns:1fr; gap:1.5rem; }.architecture { grid-template-columns:1fr; gap:.8rem; }.arrow { width:2px; height:28px; margin:auto; }.arrow::after { right:-5px; top:auto; bottom:0; border-width:9px 6px 0; border-color:var(--ink) transparent transparent; }.matrix { grid-template-columns:1fr; }.toolbelt { left:.5rem; }.title { font-size:clamp(2.3rem,14vw,4rem); }.slide { min-height:auto; padding:1.2rem 0; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }