:root{
  --ink:#11171b; --ink2:#0d1216; --panel:#161d22; --panel2:#1b242a;
  --line:#26333a; --line2:#33444c;
  --paper:#ece8df; --muted:#8b989c; --faint:#5d6b70;
  --teal:#57b8ac; --sage:#86c79b; --rust:#d97468; --amber:#d8b25a;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Helvetica Neue","Arial Narrow",var(--sans);
  --maxw:1080px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ink);color:var(--paper);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100vh;position:relative;overflow-x:hidden;
}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{
  background-image:
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.022) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.022) 39px 40px);
  background-size:40px 40px;animation:drift 90s linear infinite;
}
body::after{
  background:radial-gradient(120% 90% at 78% -10%,rgba(87,184,172,.10),transparent 55%),
             radial-gradient(100% 80% at 0% 110%,rgba(217,116,104,.06),transparent 60%);
  animation:breathe 11s ease-in-out infinite;
}
@keyframes drift{from{background-position:0 0,0 0}to{background-position:400px 400px,-400px 400px}}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
.site-head,.shell,.foot{position:relative;z-index:1}
.site-head{max-width:var(--maxw);margin:0 auto;padding:26px 28px 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.brand{text-decoration:none;color:inherit}
.wordmark{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--paper)}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--teal);
  text-transform:uppercase;border:1px solid var(--line2);padding:5px 10px;border-radius:3px;white-space:nowrap}
.caret{display:inline-block;width:7px;height:12px;background:var(--teal);margin-left:7px;
  vertical-align:-1px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.shell{max-width:var(--maxw);margin:0 auto;padding:48px 28px 80px}
.grid-2{display:grid;grid-template-columns:1.5fr .9fr;gap:56px;align-items:start}
@media(max-width:860px){.grid-2{grid-template-columns:1fr;gap:40px}}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--faint);
  text-transform:uppercase;margin:0 0 18px}
h1{font-family:var(--display);font-weight:800;line-height:.98;letter-spacing:-.02em;
  text-transform:uppercase;margin:0 0 22px;font-size:clamp(38px,7vw,76px);position:relative}
h1::after{content:"";display:block;width:0;height:3px;background:var(--teal);margin-top:22px;
  animation:rule 1s .25s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rule{to{width:84px}}
.lede{color:var(--muted);font-size:18px;max-width:46ch;margin:0 0 30px}
.narrow h1{font-size:clamp(30px,5vw,52px)}
.narrow .lede{margin-bottom:8px}
.site-head{animation:rise .6s both}
.intro{animation:rise .6s .06s both}
.panel,.field,.btn,.spec{animation:rise .6s .14s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cta-list{display:flex;flex-direction:column;gap:2px;margin-top:8px;max-width:520px}
.cta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  text-decoration:none;color:var(--paper);padding:20px 6px;border-top:1px solid var(--line);
  transition:padding-left .25s ease,background .25s ease}
.cta:last-child{border-bottom:1px solid var(--line)}
.cta-n{font-family:var(--mono);font-size:12px;color:var(--faint)}
.cta-t{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.01em;text-transform:uppercase}
.cta-arrow{color:var(--teal);font-size:22px;transition:transform .25s ease}
.cta:hover{padding-left:16px;background:linear-gradient(90deg,rgba(87,184,172,.06),transparent)}
.cta:hover .cta-arrow{transform:translateX(6px)}
.spec-h{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin:6px 0 16px}
.spec-list{margin:0;border-top:1px solid var(--line)}
.spec-list>div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.spec-list dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);
  text-transform:uppercase;margin:0;padding-top:2px}
.spec-list dd{margin:0;font-family:var(--mono);font-size:13px;color:var(--paper)}
.spec-note{color:var(--muted);font-size:13px;margin:18px 0 0;border-left:2px solid var(--rust);padding-left:12px}
.spec-note em{color:var(--paper);font-style:normal}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px}
.dz{padding:42px 24px;text-align:center;cursor:pointer;outline:none;
  transition:border-color .2s ease,background .2s ease,transform .12s ease;margin-bottom:22px}
.dz:hover,.dz:focus-visible{border-color:var(--line2);background:var(--panel2)}
.dz.drag{border-color:var(--teal);background:rgba(87,184,172,.06)}
.dz.has{border-color:var(--sage)}
.dz-glyph{display:inline-block;font-family:var(--display);font-weight:800;font-size:40px;
  color:var(--teal);line-height:1;transition:transform .2s ease}
.dz:hover .dz-glyph{transform:scale(1.08) rotate(90deg)}
.dz-text{margin:14px 0 4px;font-size:16px}
.dz.has .dz-text{font-family:var(--mono);color:var(--sage);word-break:break-all}
.dz-sub{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}
.field{display:block;margin:0 0 18px}
.field-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field-label em{color:var(--faint);font-style:normal;text-transform:none;letter-spacing:0}
input[type=text],input[type=password]{width:100%;background:var(--ink2);border:1px solid var(--line);
  border-radius:3px;color:var(--paper);font-family:var(--mono);font-size:13px;padding:13px 14px;outline:none;
  transition:border-color .2s ease}
input[type=text]:focus,input[type=password]:focus{border-color:var(--teal)}
.linkrow{display:flex;gap:8px}
.linkrow input{flex:1;min-width:0}
.btn{appearance:none;cursor:pointer;border:1px solid var(--teal);background:transparent;color:var(--teal);
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 26px;border-radius:3px;position:relative;overflow:hidden;
  transition:color .25s ease,transform .12s ease,border-color .25s ease;
  background-image:linear-gradient(var(--teal),var(--teal));
  background-size:0% 100%;background-repeat:no-repeat;background-position:left center}
.btn:hover{color:var(--ink);background-size:100% 100%}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;background-size:0% 100%;color:var(--teal)}
.btn.ghost{padding:13px 18px;font-size:12px}
.btn.ghost.copied{border-color:var(--sage);color:var(--sage);background-size:0% 100%}
.meter{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin:6px 0 14px}
.meter-fill{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--sage));
  transition:width .25s ease;position:relative}
.meter-fill::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-100%);animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.line{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;color:var(--muted);min-height:18px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.line.work .dot{background:var(--teal);animation:pulse 1s ease-in-out infinite}
.line.ok .dot{background:var(--sage)}
.line.bad .dot{background:var(--rust)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(87,184,172,.5)}50%{box-shadow:0 0 0 6px rgba(87,184,172,0)}}
.out{margin-top:30px;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.out.show{opacity:1;transform:none}
.warn{margin:14px 0 0;font-family:var(--mono);font-size:12px;color:var(--rust);line-height:1.7}
.player{margin:8px 0 22px}
.player video,.player audio{width:100%;border-radius:4px;background:#000;outline:none}
.player .nomedia{font-family:var(--mono);font-size:13px;color:var(--muted);
  border:1px dashed var(--line);border-radius:4px;padding:22px}
.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.err{font-family:var(--mono);font-size:12px;color:var(--rust);white-space:pre-wrap;margin:18px 0 0}
.inline{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--line2)}
.inline:hover{border-color:var(--teal)}
.foot{max-width:var(--maxw);margin:0 auto;padding:24px 28px 40px;display:flex;flex-wrap:wrap;gap:8px 24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  border-top:1px solid var(--line)}
.cmd{font-family:var(--mono);font-size:12px;background:var(--ink2);border:1px solid var(--line);
  border-radius:3px;padding:12px 14px;color:var(--sage);white-space:pre-wrap;word-break:break-all;margin:12px 0 0}
.steps{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:14px}
.steps li{margin:6px 0}
.steps code{font-family:var(--mono);color:var(--paper);background:var(--ink2);padding:1px 6px;border-radius:3px;font-size:12px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}h1::after{width:84px}}