/* Below-the-hero showcase: widget units, terminal cells, code frames. */
:root{
 --line-s:rgba(170,160,235,.16);--line-a:rgba(170,160,235,.32);--code:#0a0d1c;--code-head:#0d1126;
 --t-bg:#171c34;--t-bar:#262c4c;--t-fld:#20264a;--t-ln:#6c759c;--t-fg:#d6dcf5;--t-dim:#8c94b8;
 --t-a:#f2cf7e;--t-ok:#86d6c6;--t-warn:#f7a25e;--t-fail:#ff7a8c;--t-focus:#c9bcff;--syn-m:#86d6c6;
 --tmono:"JetBrains Mono","JetBrainsMono NFM",ui-monospace,Menlo,monospace;
}

/* ---------- section scaffolding ---------- */
.band{padding:120px 0 0}
.band+.band{padding-top:128px}
.band-h{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:40px}
.band-h>div{max-width:640px}
.band-h h2{font:600 clamp(34px,4vw,46px)/1.05 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.band-h p{margin-top:14px;color:var(--ink2);font-size:17px;line-height:1.6;max-width:60ch;text-wrap:pretty}
.band-link{flex:none;display:inline-flex;align-items:center;min-height:44px;color:var(--lav);font:500 15px var(--sans);text-underline-offset:4px}

/* ---------- terminal cells ---------- */
.term{margin:0;font-family:var(--tmono);font-weight:400;line-height:1.32;line-height:round(down,1.32em,1px);color:var(--t-fg);white-space:pre;
 font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;tab-size:1;
 font-size:clamp(10px,calc((100cqi - var(--pad,40px)) / (var(--cols) * .6)),var(--max,13px))}
.term .a{color:var(--t-a)}.term .o{color:var(--t-ok)}.term .w{color:var(--t-warn)}.term .f{color:var(--t-fail)}
.term .fc,.term .fr{color:var(--t-focus)}.term .d{color:var(--t-dim)}.term .ln{color:var(--t-ln)}.term .fg{color:var(--t-fg)}
.term .b{font-weight:600}
.term .sel,.term .fld,.term .trk,.term .bg,.term .eb,.term .el,.term .ht,.term .hb{display:inline-block;vertical-align:top}
.term .bg{background-color:currentColor}
.term .eb{background-image:linear-gradient(to top,currentColor calc(var(--e) * 12.5%),transparent 0)}
.term .el{background-image:linear-gradient(to right,currentColor calc(var(--e) * 12.5%),transparent 0)}
.term .ht{background-image:linear-gradient(to bottom,currentColor 50%,transparent 0)}
.term .hb{background-image:linear-gradient(to top,currentColor 50%,transparent 0)}
.term .e1{--e:1}.term .e2{--e:2}.term .e3{--e:3}.term .e4{--e:4}.term .e5{--e:5}.term .e6{--e:6}.term .e7{--e:7}
.stage-body .term.narrow{display:none}
.term .sel{background-color:var(--t-bar)}.term .fld{background-color:var(--t-fld)}.term .trk{background-color:var(--t-bar)}

/* ---------- showcase console ---------- */
.stage{border:1px solid var(--line-s);border-radius:16px;overflow:hidden;background:var(--t-bg)}
.stage-bar .narrow{display:none}
.stage-bar{display:flex;justify-content:space-between;gap:16px;padding:11px 18px;border-bottom:1px solid rgba(205,214,244,.07);background:#191927;color:var(--t-dim);font:12.5px/1.4 var(--tmono)}
.stage-body{container-type:inline-size;padding:20px 24px 22px;overflow-x:auto}
.stage-body .term{--pad:48px;--max:15px;width:max-content;margin:0 auto}
.built{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:18px;color:var(--ink2);font-size:14px}
.built a{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid var(--line-s);border-radius:6px;color:var(--ink);font:13px var(--tmono);text-decoration:none}
.built a:hover{border-color:var(--line-a);color:#fff}

/* ---------- widget units (preview + code in one frame) ---------- */
.units{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:64px 28px;margin-top:96px}
.unit{grid-column:span 3;min-width:0;display:flex;flex-direction:column;scroll-margin-top:24px}
.unit.w4{grid-column:span 4}.unit.w2{grid-column:span 2}
.unit h3{font:600 17px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.unit h3 code{font:500 14px var(--tmono);color:var(--ink2);margin-left:8px}
.unit>p{color:var(--ink2);font-size:14.5px;line-height:1.55;margin:4px 0 14px;max-width:54ch;min-height:3.1em;text-wrap:pretty}
.frame{flex:1;display:flex;flex-direction:column;border:1px solid var(--line-s);border-radius:14px;overflow:hidden;background:var(--code)}
.preview{flex:1;min-height:248px;display:grid;place-items:center;padding:28px 20px;background:var(--t-bg);container-type:inline-size;overflow-x:auto}
.preview .term{--pad:40px}

/* code block (shared by units, install and templates) */
.code{position:relative;border-top:1px solid var(--line-s);background:var(--code)}
.code pre{margin:0;padding:14px 0;overflow:hidden;max-height:calc(var(--peek,4) * 1.65em + 28px);font:13px/1.65 var(--tmono);color:#c9cde0;white-space:pre}
.code pre code{font:inherit;display:block;min-width:max-content;counter-reset:ln}
.code .l{display:block;padding-right:20px}
.code .l::before{counter-increment:ln;content:counter(ln);display:inline-block;width:3.4em;padding-right:1.3em;text-align:right;color:#4a5070;user-select:none}
.code.open pre{max-height:min(560px,70vh);overflow:auto}
.code .more{position:absolute;left:0;right:0;bottom:0;height:76px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;background:linear-gradient(rgba(10,13,28,0),var(--code) 72%)}
.code.open .more{position:static;height:auto;background:none;padding:6px 0 14px}
.code.short .more{display:none}
.btn-ghost{min-height:36px;padding:0 14px;border:1px solid var(--line-a);border-radius:8px;background:#12173a;color:var(--ink);font:500 13.5px var(--sans);cursor:pointer}
.btn-ghost:hover{background:#1a2050}
.copy-btn{position:absolute;top:8px;right:8px;z-index:1;display:grid;place-items:center;width:36px;height:36px;border:1px solid transparent;border-radius:8px;background:rgba(10,13,28,.85);color:var(--ink2);cursor:pointer}
.copy-btn:hover{border-color:var(--line-s);color:var(--ink)}
.copy-btn svg{width:16px;height:16px}
.unit .code{border-top-color:rgba(205,214,244,.08)}

/* syntax (moonlit) */
.tk-k{color:#b9a7f0}.tk-t{color:#8fa8ff}.tk-s{color:#f3e2b0}.tk-n,.tk-m{color:#9be3a8}.tk-c{color:#6b7194;font-style:normal}

/* ---------- speed (restyled flat, same content) ---------- */
#speed .speed{display:grid;grid-template-columns:1fr 240px;gap:32px;align-items:center;padding:32px 36px;border:1px solid var(--line-s);border-radius:14px;background:none;box-shadow:none}
#speed .speed-cap{font:500 14px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink2);margin-bottom:12px}
#speed .track{background:var(--t-bar);border:0;border-radius:3px;height:14px}
#speed .fill{background:var(--t-a);box-shadow:none;border-radius:3px}
#speed .badge strong{font:600 34px var(--serif);color:var(--moon)}
#speed .badge span{letter-spacing:0;text-transform:none;font-size:14px}

/* ---------- technical (six items, open columns) ---------- */
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.specs article{padding:26px 0 30px;border-top:1px solid var(--line-s)}
.specs h3{font:600 17px/1.3 var(--sans);letter-spacing:-.01em;margin-bottom:10px}
.specs ul{list-style:none;color:var(--ink2);font-size:14.5px}
.specs li{padding:3px 0;text-wrap:pretty}
.specs .source{color:var(--lav);font:13px var(--tmono)}

/* ---------- docs CTA ---------- */
.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 0;border-top:1px solid var(--line-s);border-bottom:1px solid var(--line-s)}
.cta h2{font:600 clamp(30px,3.4vw,38px)/1.1 var(--serif)}
.cta p{color:var(--ink2);margin-top:6px}
.cta .btn-lav{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:10px;background:var(--lav);color:#16123a;font:600 15px var(--sans);text-decoration:none;white-space:nowrap}
#maker{margin-top:128px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
 .units{grid-template-columns:repeat(2,minmax(0,1fr))}
 .unit,.unit.w2{grid-column:span 1}.unit.w4{grid-column:span 2}
 .specs{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
 .band{padding-top:72px}.band+.band{padding-top:80px}
 .band-h{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:28px}
 .band-h p{font-size:16px}
 .stage{border-radius:12px;margin:0 -8px}
 .stage-bar{padding:9px 14px;font-size:11.5px}
 .stage-bar .narrow{display:inline}
 .stage-body{padding:14px 12px}
 .stage-body .term{--pad:24px;margin:0 auto}
 .stage-body .term.wide{display:none}
 .stage-body .term.narrow{display:block}
 .stage-bar .wide{display:none}
 .units{grid-template-columns:1fr;gap:48px;margin-top:64px}
 .unit,.unit.w2,.unit.w4{grid-column:auto}
 .preview{min-height:0;padding:20px 12px}
 .unit>p{min-height:0}
 .preview .term{--pad:24px}
 .code pre{font-size:12.5px}
 .btn-ghost{min-height:44px}
 .copy-btn{width:44px;height:44px;top:4px;right:4px}
 #speed .speed{grid-template-columns:1fr;padding:22px 18px}
 .specs{grid-template-columns:1fr}
 .cta{flex-direction:column;align-items:flex-start}
 .cta .btn-lav{width:100%;justify-content:center}
 #maker{margin-top:80px}
}
@media (prefers-reduced-motion:reduce){.code pre{scroll-behavior:auto}}

.stage-bar,.tpl-run{background:#131830}