:root{--bg:#07090d;--ink:#eef0f4;--muted:#9aa0ad;--line:#ffffff1f;--accent:#b18cff}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
.stage{position:fixed;inset:0;overflow:hidden;isolation:isolate}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#aurora{z-index:-1;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.06) 6%,rgba(0,0,0,.18) 14%,rgba(0,0,0,.36) 22%,rgba(0,0,0,.58) 30%,rgba(0,0,0,.78) 38%,rgba(0,0,0,.92) 46%,#000 55%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.06) 6%,rgba(0,0,0,.18) 14%,rgba(0,0,0,.36) 22%,rgba(0,0,0,.58) 30%,rgba(0,0,0,.78) 38%,rgba(0,0,0,.92) 46%,#000 55%)}
#plate{z-index:0}#fx{z-index:2}
/* The real type is invisible: it only provides layout. The canvas draws the letters. */
.mega{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);margin:0;text-align:center;white-space:nowrap;color:transparent;user-select:none;font-synthesis:none;line-height:1;font-size:120px}
.mega span{display:inline-block}
/* Optional overlay line (?cap=Line one|Line two&capfrom=ms), used for video end cards */
.caption{position:absolute;left:0;right:0;bottom:7%;z-index:3;text-align:center;font:600 clamp(14px,2.4vw,40px)/1.4 "Outfit",system-ui,sans-serif;color:#f1e9ff;letter-spacing:.02em;text-shadow:0 2px 18px #000,0 0 30px #7c4dff88;opacity:0;pointer-events:none;white-space:pre-line}
.caption b{display:block;font-weight:800;color:#fff}

.panel{position:fixed;left:16px;top:16px;z-index:10;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 96px);overflow:auto;padding:14px;border:1px solid var(--line);border-radius:16px;
 background:#0c0f16d9;backdrop-filter:blur(14px);box-shadow:0 20px 60px -20px #000;scrollbar-width:thin;scrollbar-color:#ffffff30 transparent;transition:opacity .3s,transform .25s}
.panel::-webkit-scrollbar{width:6px}.panel::-webkit-scrollbar-thumb{background:#ffffff30;border-radius:6px}
.panel .top{display:flex;align-items:center;gap:10px}
.panel h1{font-size:17px;margin:0;letter-spacing:.01em;flex:1}
.sub0{margin:0 0 6px;color:var(--accent);font-size:13px}
.panel p.hint{margin:0 0 12px;color:var(--muted);font-size:13px}
.sub{font-size:14px;margin:16px 0 4px;color:#cfd3dc;font-weight:600}
.field{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.field input[type=text]{font:600 16px/1.2 system-ui,sans-serif;color:var(--ink);background:#ffffff0d;border:1px solid var(--line);border-radius:10px;padding:8px 10px;width:100%}
.field input:focus,.pick:focus-visible{outline:2px solid #8a5cff88;outline-offset:1px}
.variants{display:grid;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.variants button{all:unset;cursor:pointer;box-sizing:border-box;width:100%;padding:7px 11px;border-radius:11px;border:1px solid transparent;transition:background .2s,border-color .2s;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px}
.variants button:hover{background:#ffffff0d}
.variants button:focus-visible{outline:2px solid #8a5cff88}
.variants button[aria-pressed=true]{background:#8a5cff22;border-color:#8a5cff66}
.variants b{grid-column:1;grid-row:1;font-size:15px;font-weight:600}
.variants kbd{grid-column:2;grid-row:1;color:var(--muted);font:600 12px/1.6 system-ui;border:1px solid var(--line);border-radius:6px;padding:0 6px}
.variants small{grid-column:1/-1;display:none;color:var(--muted);font-size:13px;line-height:1.35;margin-top:2px}
.variants button[aria-pressed=true] small{display:block}
.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.row label{display:inline-flex;gap:6px;align-items:center;font-size:14px;color:#cfd3dc;cursor:pointer;padding:4px 8px;border:1px solid var(--line);border-radius:999px}
.row input{accent-color:#8a5cff}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px}
.seg.wrap{flex-wrap:wrap;border-radius:14px}
.seg button{all:unset;cursor:pointer;font-size:14px;padding:4px 10px;border-radius:999px;color:#cfd3dc}
.seg button:focus-visible{outline:2px solid #8a5cff88}
.seg button[aria-pressed=true]{background:#ffffff1a;color:#fff}
.sliders{display:grid;gap:6px;margin-top:8px}
.slider{display:grid;grid-template-columns:1fr 104px 46px;gap:8px;align-items:center;font-size:14px;color:#cfd3dc}
.slider input{accent-color:#b18cff;width:100%}.slider output{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}
.mini{all:unset;cursor:pointer;font-size:14px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:#e6e2f2}
.mini:hover{background:#ffffff12}.mini:focus-visible{outline:2px solid #8a5cff88}
.pick{font:14px/1.2 system-ui;color:#e6e2f2;background:#ffffff0d;border:1px solid var(--line);border-radius:10px;padding:6px 8px;max-width:100%}
.pick option{background:#12151d}
.colors{font-size:14px;color:#cfd3dc}
#look-colors{display:inline-flex;gap:6px}
#look-colors input{width:30px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.hide{all:unset;cursor:pointer;font:600 12px/1.6 system-ui;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 7px}
.fab{position:fixed;left:16px;top:16px;z-index:11;display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#0c0f16d9;color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(14px)}
.bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:10;display:flex;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:#0c0f16d9;backdrop-filter:blur(14px);transition:opacity .3s}
.bar button{all:unset;cursor:pointer;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#3b2f8a,#7a2f8c);color:#fff;font-size:15px;flex:none}
.bar button:focus-visible{outline:2px solid #fff8}
.bar input[type=range]{flex:1;accent-color:#b18cff;min-width:0}
.bar output{font:600 14px/1 system-ui;color:#cfd3dc;min-width:118px;text-align:right;font-variant-numeric:tabular-nums}
.phase{font-size:14px;color:var(--accent);min-width:150px}
body.bare .panel,body.bare .bar,body.bare .fab{opacity:0;pointer-events:none}
body.record .panel,body.record .bar,body.record .fab{display:none}
@media (max-width:700px){
 .fab{display:block}
 .panel{top:64px;max-height:calc(100vh - 150px)}
 .panel.collapsed{opacity:0;pointer-events:none;transform:translateY(-8px)}
 .bar{padding:8px 10px;gap:8px}.phase{display:none}.bar output{min-width:84px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.panel,.bar{transition:none}}