:root { --paper:#f7f5ef; --ink:#0a0a0a; --muted:#6e706a; --lime:#d8ff43; --pink:#ff5b6e; --line:rgba(10,10,10,.14); --mono:"DM Mono",monospace; --sans:Satoshi,Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 14% 5%,rgba(216,255,67,.45),transparent 26rem),radial-gradient(circle at 85% 32%,rgba(255,91,110,.18),transparent 32rem),var(--paper); font-family:var(--sans); }
.page { overflow-x:hidden; width:100%; max-width:100%; }
.shell { width:min(1200px,calc(100% - 48px)); margin:0 auto; }
.nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px; position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:9px; color:inherit; text-decoration:none; font-size:18px; font-weight:900; letter-spacing:0; }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:var(--ink); color:var(--lime); font-family:var(--mono); }
.nav-links { display:flex; gap:24px; font-size:14px; }
.nav a { color:inherit; text-decoration:none; }
.nav-cta { background:var(--ink); color:#fff!important; padding:10px 15px; border-radius:4px; font-size:14px; font-weight:700; }
.hero { padding:94px 0 140px; text-align:center; }
.eyebrow { margin:0 0 17px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:1120px; margin:0 auto; font-size:clamp(48px,7vw,100px); line-height:.94; letter-spacing:0; font-weight:900; }
.inline-spark { display:inline-block; width:.9em; height:.38em; margin:0 .08em; border-radius:999px; vertical-align:middle; background:linear-gradient(90deg,var(--pink),var(--lime)); transform:rotate(-4deg); }
.hero-copy { max-width:600px; margin:27px auto 0; font-size:18px; line-height:1.5; color:#34352f; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:32px 0 62px; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; border:1px solid var(--ink); border-radius:4px; font:700 15px var(--sans); cursor:pointer; text-decoration:none; transition:transform .25s ease,box-shadow .25s ease,background .25s ease; }
.button:hover { transform:translateY(-3px); box-shadow:5px 5px 0 var(--ink); }
.button-dark { background:var(--ink); color:white; }
.button-quiet { background:transparent; color:var(--ink); }
.button-signal { background:var(--lime); color:var(--ink); }
.button-light { background:var(--paper); color:var(--ink); }
.hero-frame { position:relative; overflow:hidden; border:1px solid var(--ink); border-radius:6px; background:#121312; box-shadow:12px 12px 0 var(--pink); }
.hero-frame canvas { display:block; width:100%; height:auto; min-height:260px; }
.frame-caption { position:absolute; inset:auto 18px 15px; color:#e8e9df; font:11px var(--mono); display:flex; justify-content:space-between; }
.lab-section { padding:132px 0; background:var(--ink); color:var(--paper); }
.section-intro { max-width:860px; margin-bottom:44px; }
h2 { font-size:clamp(35px,5vw,64px); line-height:.98; letter-spacing:0; font-weight:900; }
.lab-section .eyebrow { color:#a8a9a1; }
.lab-grid { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.7fr); gap:18px; align-items:start; }
.controls-panel,.workbench { border:1px solid rgba(247,245,239,.25); border-radius:6px; background:#161816; }
.controls-panel { padding:23px; position:sticky; top:12px; }
.panel-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.panel-heading h3 { margin:0; font-size:24px; }
.text-button { border:0; background:transparent; color:var(--lime); font:500 13px var(--mono); cursor:pointer; text-decoration:underline; }
label { display:block; margin:16px 0 7px; font-size:12px; font-weight:700; color:#d6d7ce; }
input,textarea,select { width:100%; border:1px solid #555851; border-radius:3px; background:#0d0e0d; color:#f7f5ef; padding:10px; font:13px var(--mono); }
textarea { resize:vertical; line-height:1.5; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.status { min-height:20px; margin:18px 0 10px; font:12px var(--mono); color:#bfc0b8; }
.status.error { color:#ff9ba5; }
.control-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.control-actions .button { min-width:0; padding:0 8px; }
.download { width:100%; margin-top:10px; padding:12px; border:1px solid var(--lime); border-radius:3px; background:transparent; color:var(--lime); font:700 12px var(--mono); cursor:pointer; }
.download:hover { background:var(--lime); color:var(--ink); }
.workbench { padding:18px; min-width:0; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.metrics div,.gradient-readout div { padding:13px; background:#0d0e0d; border-radius:3px; }
.metrics span,.gradient-readout span { display:block; color:#a9aaa2; font:10px var(--mono); text-transform:uppercase; letter-spacing:.05em; }
.metrics strong { display:block; margin-top:8px; font:700 19px var(--mono); color:var(--lime); overflow:hidden; text-overflow:ellipsis; }
.chart-wrap { overflow:hidden; border:1px solid #3d403b; border-radius:4px; background:#0d0e0d; }
.chart-wrap canvas { display:block; width:100%; height:auto; min-height:260px; }
.gradient-readout { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:8px; margin-top:14px; }
.gradient-readout strong { display:block; margin-top:8px; font:500 15px var(--mono); }
#equation { margin:0; display:flex; align-items:center; justify-content:center; padding:13px; border:1px solid #3d403b; border-radius:3px; font:14px var(--mono); color:#fff; }
.bento-section { padding:156px 0; }
.bento { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-flow:dense; gap:14px; }
.bento-card { min-height:270px; padding:28px; border:1px solid var(--ink); border-radius:6px; overflow:hidden; transition:transform .5s ease,box-shadow .5s ease; }
.bento-card:hover { transform:scale(1.02); box-shadow:8px 8px 0 var(--ink); }
.bento-copy { grid-column:span 5; background:#ece9df; }
.bento-visual { grid-column:span 7; background:var(--ink); color:var(--paper); padding:0; display:flex; flex-direction:column; }
.bento-visual canvas { width:100%; height:auto; min-height:220px; }
.bento-visual p { margin:0; padding:12px 18px 18px; color:#bbbbb2; font:12px var(--mono); }
.bento-card.accent { grid-column:span 7; background:var(--lime); }
.card-kicker { display:block; margin-bottom:50px; font:11px var(--mono); }
.bento-card h3 { max-width:360px; margin-bottom:15px; font-size:31px; line-height:1; }
.bento-card p { max-width:440px; line-height:1.55; color:#383a34; }
.bento-card code { font-family:var(--mono); font-size:.9em; }
.story-section { padding:120px 0; background:#e3e0d5; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:10%; }
.story-title { position:relative; }
.story-copy { max-width:510px; font-size:20px; line-height:1.48; }
.story-copy p + p { margin-top:30px; color:#585b52; }
.action { margin:126px auto; padding:74px clamp(28px,8vw,110px); border-radius:6px; background:var(--pink); color:var(--ink); }
.action h2 { max-width:700px; margin-bottom:30px; }
.footer { display:flex; justify-content:space-between; gap:24px; padding:26px 0 34px; border-top:1px solid var(--line); font-size:13px; color:#50524c; }
@media (max-width:780px) { .shell{width:min(100% - 32px,1200px)} .nav-links{display:none} .hero{padding:55px 0 90px} h1{font-size:clamp(44px,13vw,74px)} .lab-section{padding:86px 0}.lab-grid,.story-grid{grid-template-columns:1fr}.controls-panel{position:relative;top:auto}.metrics{grid-template-columns:1fr 1fr}.gradient-readout{grid-template-columns:1fr 1fr}.gradient-readout #equation{grid-column:span 2}.bento{grid-template-columns:1fr}.bento-copy,.bento-visual,.bento-card.accent{grid-column:span 1}.bento-card{min-height:auto}.story-section{padding:90px 0}.footer{display:block}.footer span{display:block;margin-bottom:8px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.button,.bento-card{transition:none}.button:hover,.bento-card:hover{transform:none;box-shadow:none} }