:root{--bg:#0d1310;--text:#eef5ea;--accent:#ff8fb1;--primary:#ffc857;--cream:#f6ecd9;--surface:#17211b;--muted:#a9b9a6;--edge:#2c3d33;--field:#111a15;--fh:'Red Hat Display',system-ui,sans-serif;--fb:'DM Sans',system-ui,sans-serif;--rw:56px;--glow:0 0 18px rgba(255,143,177,.45)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--fb);padding-left:var(--rw);min-height:100vh;display:flex;flex-direction:column}
body.home{padding-left:0}
main{flex:1}
img,svg{max-width:100%}
a{color:var(--primary);text-underline-offset:3px}
a:hover{color:var(--accent)}
h1,h2,h3{font-family:var(--fh);line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.5vw,4rem);font-weight:900}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}
.lead{font-size:1.2rem;color:var(--text);max-width:62ch}
.muted{color:var(--muted)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--primary);color:var(--bg);padding:8px 14px;border-radius:8px;z-index:100;font-weight:700}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ruler (non-home pages) */
.ruler{position:fixed;left:0;top:0;bottom:0;width:var(--rw);background:var(--bg);border-right:1px solid var(--edge);z-index:40;pointer-events:none}
body.home .ruler{display:none}
.ruler::before{content:"";position:absolute;right:0;top:0;bottom:0;width:16px;background:repeating-linear-gradient(to bottom,var(--edge) 0 1px,transparent 1px calc(100%/24))}
.ruler::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--accent),var(--primary),var(--accent));box-shadow:var(--glow)}
.ruler b{position:absolute;left:6px;font:700 11px var(--fh);color:var(--muted)}
.ruler b:nth-of-type(1){top:72px}.ruler b:nth-of-type(2){top:25%}.ruler b:nth-of-type(3){top:50%}.ruler b:nth-of-type(4){top:75%}.ruler b:nth-of-type(5){bottom:8px}
.ruler i{position:absolute;right:-5px;width:13px;height:13px;border-radius:50%;background:var(--primary);top:0}
.ruler i.d1{animation:pulse 2.6s 3}.ruler i.d2{background:var(--accent)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,143,177,.55)}70%{box-shadow:0 0 0 14px rgba(255,143,177,0)}100%{box-shadow:0 0 0 0 rgba(255,143,177,0)}}

/* top bar */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 24px;min-height:66px;background:rgba(13,19,16,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--edge)}
.logo{display:block;flex:none;line-height:0;background:#fff;border-radius:10px;padding:3px 8px}
.logo img{display:block;width:110px;height:auto}
#nav{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
#nav a{color:var(--text);text-decoration:none;font:600 .95rem var(--fh);padding:8px 12px;border-radius:999px}
#nav a:hover{background:var(--surface);color:var(--primary)}
#nav a[aria-current=page]{background:var(--primary);color:var(--bg)}
.navbtn{display:none;background:var(--surface);color:var(--text);border:1px solid var(--edge);border-radius:999px;padding:8px 16px;font:700 .95rem var(--fh);cursor:pointer}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:#0d1310;font:800 1.05rem var(--fh);padding:14px 26px;border-radius:16px;border:0;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 #b3496e;transition:transform .12s}
.btn:hover{color:#0d1310;transform:translateY(-1px);background:var(--cream)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b3496e}
.btn.ghost{background:transparent;color:var(--cream);border:2px solid var(--edge);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.btn.small{padding:8px 14px;font-size:.9rem;border-radius:12px;box-shadow:none}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}

/* layout */
.wrap{width:100%;max-width:1240px;padding:0 24px}
body:not(.home) main.wrap{padding-left:44px;padding-bottom:64px}
.pagehead{padding:44px 0 28px}
.stamp{display:inline-flex;align-items:center;gap:8px;font:700 .9rem var(--fh);letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin-bottom:10px}
.stamp::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.card{position:relative;background:var(--surface);border:1px solid var(--edge);border-radius:22px;padding:28px;margin-bottom:28px}
body:not(.home) .card.tool::before{content:"";position:absolute;left:-44px;top:42px;width:44px;height:3px;background:var(--primary);box-shadow:var(--glow)}
.card h2{font-size:1.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.grid .card{margin:0}
.tile{text-decoration:none;color:var(--text);display:block;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--primary);transform:translateY(-3px);color:var(--text)}
.tile h3{color:var(--primary)}
.tile p{color:var(--muted);margin:0}
.pill{display:inline-block;background:rgba(255,143,177,.16);color:var(--accent);border-radius:999px;padding:2px 12px;font:700 .8rem var(--fh)}

/* home story line */
.story{--pad:84px;--lx:30px;position:relative;padding-left:var(--pad);padding-right:24px;max-width:1240px;margin:0 auto;width:100%}
.story::before{content:"";position:absolute;left:var(--lx);top:0;bottom:0;width:3px;background:linear-gradient(var(--primary),var(--accent) 50%,var(--primary));box-shadow:var(--glow);border-radius:3px}
.stop{position:relative;padding:52px 0 20px}
.stop::before{content:"";position:absolute;left:calc(var(--lx) + 1.5px - 11px - var(--pad));top:60px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:4px solid var(--primary);box-shadow:var(--glow)}
.stop:nth-of-type(even)::before{border-color:var(--accent);box-shadow:0 0 14px var(--accent)}
.hero-img{border-radius:22px;border:1px solid var(--edge);display:block;width:100%;height:auto;aspect-ratio:21/8;object-fit:cover;max-height:340px;margin-top:12px}
@media (max-width:760px){.hero-img{aspect-ratio:16/9}}
.versus{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;border-radius:24px;overflow:hidden;border:1px solid var(--edge);margin-top:18px}
.versus>div{padding:28px}
.versus .bad{background:var(--field)}
.versus .good{background:var(--surface);border-left:4px solid var(--primary)}
.versus h3{margin-bottom:.4em}
.versus .bad h3{color:var(--accent)}
.versus .good h3{color:var(--primary)}
.versus img{display:block;width:100%;height:auto;border-radius:14px;margin-bottom:16px;background:var(--bg)}
.bignum{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;align-items:center;margin-top:22px;padding:22px 28px;border:1px dashed var(--primary);border-radius:20px}
.bignum strong{font:900 clamp(2.6rem,7vw,4.4rem)/1 var(--fh);color:var(--primary)}
.bignum p{margin:0;color:var(--muted)}
.steps{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;counter-reset:s}
.steps li{position:relative;counter-increment:s;background:var(--surface);border:1px solid var(--edge);border-radius:22px;padding:56px 24px 24px}
.steps li::before{content:counter(s);position:absolute;left:24px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#0d1310;font:800 1rem/32px var(--fh);text-align:center}
.steps h3{color:var(--primary)}
.steps p{margin:0;color:var(--muted)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
blockquote.script{margin:0 0 14px;padding:14px 18px;border-left:4px solid var(--accent);background:var(--field);border-radius:0 12px 12px 0;color:var(--text)}
ul.tick{padding-left:1.2em}
ul.tick li{margin-bottom:.4em}

/* forms */
label{display:block;font-weight:600;margin-bottom:6px}
input,textarea,select{width:100%;background:var(--field);color:var(--text);border:1.5px solid var(--edge);border-radius:12px;padding:11px 14px;font:inherit}
input[type=range]{padding:0;accent-color:var(--primary);height:28px}
input[type=checkbox]{width:auto;accent-color:var(--primary)}
input::placeholder,textarea::placeholder{color:#8fa08c}
textarea{min-height:140px;resize:vertical}
.field{margin-bottom:16px}
.status{min-height:1.5em;color:var(--muted);margin:10px 0 0}
.out{margin-top:16px;padding:18px 20px;background:var(--field);border:1.5px solid var(--edge);border-left:5px solid var(--accent);border-radius:14px;line-height:1.6}
.out[hidden]{display:none}
.out ol,.out ul{padding-left:1.4em;margin:0 0 .8em}
.out li{margin-bottom:.45em}
.out p{margin:0 0 .7em;white-space:pre-wrap}
.out p strong{color:var(--accent)}
.out.err{border-left-color:#ffb36b}
.examples{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.examples button{background:var(--field);color:var(--muted);border:1px dashed var(--edge);border-radius:999px;padding:6px 14px;font:inherit;font-size:.9rem;cursor:pointer;text-align:left}
.examples button:hover{color:var(--primary);border-color:var(--primary)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tabs button{background:var(--field);color:var(--text);border:2px solid var(--edge);border-radius:14px;padding:10px 18px;font:700 1rem var(--fh);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--primary);color:#0d1310;border-color:var(--primary)}
.panel[hidden]{display:none}

/* tools */
.b-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;align-items:end;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--edge)}
.b-row label{font-size:.8rem;color:var(--muted);margin-bottom:3px}
.boardwrap{overflow-x:auto;margin:18px 0}
.board-svg{display:block;width:100%;min-width:640px;height:auto;touch-action:pan-y}
.board-svg text{font-family:var(--fb);fill:var(--muted);font-size:12px}
.board-svg .rowname{fill:var(--text);font-weight:700;font-size:14px}
.board-svg .grid-l{stroke:var(--edge);stroke-width:1}
.board-svg .ovl{fill:var(--accent);opacity:.3}
.board-svg .gapb{fill:#ffffff;opacity:.04}
.board-svg .bar{fill:var(--primary);cursor:grab;touch-action:none}
.board-svg .bar:focus-visible{outline:none;stroke:var(--accent);stroke-width:3}
.board-svg.drag .bar{cursor:grabbing}
.board-svg .bt{fill:#0d1310;font-weight:700;pointer-events:none}
.board-svg .now{stroke:var(--accent);stroke-width:2;stroke-dasharray:4 4}
.board-svg .nowdot{fill:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:14px 0}
.stat{background:var(--field);border:1px solid var(--edge);border-radius:14px;padding:14px 16px}
.stat span{display:block;color:var(--muted);font-size:.85rem}
.stat strong{font:800 1.5rem var(--fh);color:var(--primary)}
.stat.pk strong{color:var(--accent)}
.b-hand{padding-left:1.2em}
.b-hand li{margin-bottom:.6em}
.legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.legend span::before{content:"";display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:6px;vertical-align:-2px;background:var(--primary)}
.legend span.p::before{background:var(--accent)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:860px}
table.narrow{min-width:0}
th{text-align:left;font:700 .8rem var(--fh);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:6px 6px}
td{padding:6px;vertical-align:middle}
td input,td select{padding:8px 10px;min-width:70px}
td.o{font-weight:700;color:var(--text);white-space:nowrap}
tfoot td{font:800 1.05rem var(--fh);color:var(--primary);border-top:2px solid var(--edge)}
.verdict{font-weight:700}
.chart{display:block;width:100%;height:auto}
.chart text{fill:var(--text);font-size:12px;font-family:var(--fb)}
.chart .tot{fill:none;stroke:var(--primary);stroke-width:1.5}
.chart .sv{fill:var(--primary)}
.chart .lb{fill:var(--accent);font-weight:700}
.prompter{position:relative;height:380px;overflow:hidden;background:#050806;border:2px solid var(--edge);border-radius:16px}
.prompter::before{content:"";position:absolute;left:0;right:0;top:140px;height:70px;background:rgba(255,143,177,.12);border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);z-index:2;pointer-events:none}
.prompter.mirror .pt{transform-origin:center top}
.prompter.mirror{transform:scaleX(-1)}
.prompter.manual{overflow-y:auto}
.pt{padding:140px 32px 240px;white-space:pre-wrap;font-family:var(--fh);font-weight:700;line-height:1.5;color:#fff}
.prompter:fullscreen{height:100vh;border-radius:0}
.prompter:fullscreen::before{top:35vh}
.ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:16px 0}

/* footer */
.foot{border-top:1px solid var(--edge);padding:26px 24px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;background:var(--bg)}
.foot p{margin:0;color:var(--muted);font-size:.95rem}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a{color:var(--text);text-decoration:none;font-weight:600}
.foot nav a:hover{color:var(--primary);text-decoration:underline}
.foot .logo img{width:100px;height:auto}
.fig{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--edge);background:var(--field)}
.fig img{display:block;width:100%;height:auto}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center}
.split.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:center}
.hero-split>*{min-width:0}
.hero-fig{margin:0;position:relative;z-index:0}
.hero-fig img{display:block;width:100%;height:auto;border:0;border-radius:18px}
.textlinks{display:flex;flex-wrap:wrap;gap:8px 24px;margin:16px 0;font:700 1.05rem var(--fh)}
@media (max-width:860px){.hero-split{gap:20px}}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}
.plan{background:var(--surface);border:1px solid var(--edge);border-radius:22px;padding:24px}
.plan.now{background:var(--cream);border-color:var(--cream);color:#0d1310}
.plan.now ul{color:#33402f}
.plan.now .price{color:#8a2c50}
.plan h3{margin-bottom:.2em}
.plan .price{font:800 1.6rem var(--fh);color:var(--primary);margin:0 0 .5em}
.vision-img{display:block;width:100%;height:auto;aspect-ratio:3/2;max-height:520px;object-fit:cover;object-position:center 20%;border-radius:22px;border:1px solid var(--edge);margin:22px 0 6px}
.stop.gap{padding-top:96px}
.stop.gap .stamp{margin-bottom:18px}
@media (max-width:760px){.vision-img{aspect-ratio:3/2}.stop.gap{padding-top:64px}}
.plan ul{padding-left:1.1em;margin:0;color:var(--muted)}
.rm{margin-top:1.6em}
.road{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.road li{background:var(--surface);border:1px solid var(--edge);border-left:4px solid var(--accent);border-radius:0 14px 14px 0;padding:12px 18px}
.road li.done{border-left-color:var(--primary)}
.join{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.join .field{flex:1 1 260px;margin:0}
@media (max-width:860px){.split,.split.rev,.hero-split{grid-template-columns:1fr}}
.prose{max-width:760px}
.prose h2{margin-top:1.6em;font-size:1.5rem}
.prose li{margin-bottom:.4em}

@media (max-width:760px){
 :root{--rw:16px}
 .ruler b{display:none}
 .ruler i{right:-5px}
 .top{padding:8px 14px;flex-wrap:wrap}
 .js .navbtn{display:inline-block}
 .js #nav{display:none;width:100%;flex-direction:column;align-items:stretch}
 .js #nav.open{display:flex}
 .story{--pad:46px;--lx:12px;padding-right:16px}
 .stop::before{width:18px;height:18px;left:calc(var(--lx) + 1.5px - 9px - var(--pad))}
 body:not(.home) main.wrap{padding-left:30px;padding-right:14px}
 body:not(.home) .card.tool::before{left:-30px;width:30px}
 .card{padding:20px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .ruler i{animation:none}
 .btn{transition:none}
 .tile{transition:none}
}