/* Vesper, as the panel uses it: tokens from Jvne's design system (wisteria scheme, set once
   on <html>), its three faces bundled locally, and its components as classes. Components
   never name a colour: they inherit the band they are drawn in. Radius is zero everywhere. */

@font-face{font-family:"Exo 2";font-weight:100 900;font-style:normal;font-display:block;src:url(fonts/Exo2-Variable.ttf) format("truetype-variations")}
@font-face{font-family:"Exo 2";font-weight:100 900;font-style:italic;font-display:block;src:url(fonts/Exo2-Variable-Italic.ttf) format("truetype-variations")}
@font-face{font-family:"Audiowide";font-weight:400;font-style:normal;font-display:block;src:url(fonts/Audiowide-Regular.ttf) format("truetype")}
@font-face{font-family:"Doto";font-weight:100 900;font-style:normal;font-display:block;src:url(fonts/Doto-Variable.ttf) format("truetype-variations")}

:root{
  --vsp-alarm:#F25F77;
  /* wisteria */
  --band-1-bg:#5A5088; --band-1-fg:#EDE6FF; --band-1-quiet:rgba(237,230,255,.8);
  --band-2-bg:#E2DCF2; --band-2-fg:#262135; --band-2-quiet:#4E447A;
  --band-3-bg:#16132A; --band-3-fg:#EDE6FF; --band-3-quiet:#A9A2C4;
  --band-failed-bg:var(--vsp-alarm); --band-failed-fg:#16132A; --band-failed-quiet:rgba(22,19,42,.85);
  --accent-haze:#8E85BF; --accent-slate:#4E5266;

  --font-display:"Audiowide",system-ui,sans-serif;
  --font-body:"Exo 2",system-ui,-apple-system,sans-serif;
  --font-mono:"Doto","Exo 2",monospace;
  --display-tracking:.05em;

  --gutter:clamp(28px,5vw,72px);
  --bar-y:clamp(26px,4vh,44px);
  --bar-size:clamp(15px,1.5vw,19px);
  --row-y:clamp(9px,1.5vh,16px);
  --row-gap:clamp(10px,1.4vw,20px);
  --stack-gap:clamp(30px,5.5vw,84px);
  --hover-shift:16px;

  --ease-out:cubic-bezier(.1,.9,.2,1);
  --dur-rail:420ms; --dur-hover:160ms; --dur-opacity:300ms; --dur-cascade:460ms; --dur-letter:500ms;

  /* the seam: driven frame by frame from JS, never transitioned */
  --s1:88; --s2:100; --k1:1;
}

*{box-sizing:border-box;border-radius:0}
html,body{margin:0;height:100%;background:var(--band-3-bg)}
body{font-family:var(--font-body);font-size:15px;font-weight:350;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:left}
::selection{background:currentColor}

/* ---- seam ------------------------------------------------------------------------------ */
.seam{position:fixed;inset:0;overflow:hidden}
.layer{position:absolute;inset:0;overflow:hidden}
.layer.b1{background:var(--band-1-bg);color:var(--band-1-fg);--quiet:var(--band-1-quiet);clip-path:inset(0 0 calc(100% - var(--s1) * 1%) 0)}
.layer.b2{background:var(--band-2-bg);color:var(--band-2-fg);--quiet:var(--band-2-quiet);clip-path:inset(calc(var(--s1) * 1%) 0 calc(100% - var(--s2) * 1%) 0)}
.layer.b3{background:var(--band-3-bg);color:var(--band-3-fg);--quiet:var(--band-3-quiet);clip-path:inset(calc(var(--s2) * 1%) 0 0 0)}
.seam.failed .layer.b2{background:var(--band-failed-bg);color:var(--band-failed-fg);--quiet:var(--band-failed-quiet)}

/* the one ambient effect, top band only */
.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;width:46vmax;height:46vmax;filter:blur(90px);mix-blend-mode:screen;opacity:.28;background:var(--accent-haze);animation:drift 28s ease-in-out infinite alternate}
.ambient i:nth-child(2){background:var(--accent-slate);animation-duration:35s;animation-delay:-9s}
@keyframes drift{from{transform:translate(-20vmax,-24vmax)}to{transform:translate(60vw,10vh)}}

/* ---- bar, foot ------------------------------------------------------------------------- */
.bar{position:absolute;left:var(--gutter);right:var(--gutter);top:var(--bar-y);z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:clamp(16px,2.2vw,30px)}
.wordmark{font-family:var(--font-display);text-transform:lowercase;letter-spacing:var(--display-tracking);font-size:var(--bar-size);justify-self:start}
.code{justify-self:end;font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.26em;opacity:.65;white-space:nowrap}
.foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(20px,3vh,36px);z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.plus{font-family:var(--font-display);font-size:clamp(24px,2.8vw,40px);line-height:.7;min-width:44px;min-height:44px;display:flex;align-items:flex-end;justify-content:flex-end}
.plus span{display:inline-block;transition:transform 760ms var(--ease-out)}
.plus.deep span{transform:rotate(90deg)}

/* ---- rail ------------------------------------------------------------------------------ */
.rail{display:flex;gap:clamp(14px,2vw,28px);align-items:baseline;justify-content:center;position:relative}
.rail button{font-family:var(--font-display);text-transform:lowercase;letter-spacing:var(--display-tracking);font-size:var(--bar-size);line-height:1;padding:8px 0;transition:opacity var(--dur-hover) var(--ease-out)}
.rail button:hover{opacity:.78}
.rail .mark{position:absolute;bottom:2px;height:2px;background:currentColor;pointer-events:none;transition:left var(--dur-rail) var(--ease-out),width var(--dur-rail) var(--ease-out)}

/* ---- titles: anchored at seam - .60em so the split lands mid-letterform ---------------- */
.ttl{position:absolute;left:calc(var(--gutter) - .06em);right:var(--gutter);margin:0;white-space:nowrap;overflow:visible;font-family:var(--font-display);font-weight:400;text-transform:lowercase;letter-spacing:var(--display-tracking);line-height:1}
.ttl.t1{top:calc(var(--s1) * 1% - .60em);font-size:calc(clamp(46px,9vw,132px) * var(--k1))}
.ttl.t2{top:calc(var(--s2) * 1% - .60em);font-size:clamp(34px,6vw,88px)}
.ttl b{display:inline-block;font-weight:400;white-space:pre}
.ttl.rise b{animation:letter-rise var(--dur-letter) var(--ease-out) backwards;animation-delay:calc(var(--i) * 36ms)}
.ttl button{font:inherit;letter-spacing:inherit;line-height:inherit}
@keyframes letter-rise{from{opacity:0;transform:translateY(.22em) scaleY(.86)}}

/* ---- panes: positioned from the seam in the same frame, never transitioned ------------- */
.pane{position:absolute;left:var(--gutter);right:var(--gutter);overflow:hidden auto;scrollbar-width:none;padding-bottom:110px}
.pane::-webkit-scrollbar{display:none}
.pane.p-menu{top:46%;bottom:0}
.pane.p1{top:calc(var(--s1) * 1% + var(--k1) * 10vh);bottom:calc(100% - var(--s2) * 1%)}
.pane.p2{top:calc(var(--s2) * 1% + 6vh);bottom:0}
.pane.shallow{overflow:hidden;padding-bottom:0}

/* ---- rows ------------------------------------------------------------------------------ */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:baseline;gap:var(--row-gap);width:100%;padding:var(--row-y) 0;position:relative;transition:padding-left var(--dur-hover) var(--ease-out)}
.row + .row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.3}
button.row:hover{padding-left:var(--hover-shift)}
.row .name{font-family:var(--font-display);text-transform:lowercase;letter-spacing:var(--display-tracking);font-size:clamp(17px,1.9vw,26px);line-height:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .mid,.label{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.16em;opacity:.6}
.row .mid{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .right{margin-left:auto;white-space:nowrap;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.row.active .name{text-decoration:underline;text-underline-offset:.22em}
.cascade > *{animation:cascade var(--dur-cascade) var(--ease-out) backwards;animation-delay:calc(var(--i, 0) * 60ms)}
@keyframes cascade{from{opacity:0;transform:translateY(12px)}}

/* ---- readouts -------------------------------------------------------------------------- */
.readouts{display:flex;gap:var(--stack-gap);flex-wrap:wrap}
.readout p{margin:0}
.readout .value{margin-top:8px;font-family:var(--font-display);font-size:clamp(38px,5vw,72px);line-height:1;letter-spacing:.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.readouts.md .readout .value{font-size:clamp(30px,3.6vw,50px)}
.readout .unit{font-size:.4em}
.readout .none{opacity:.4}
.readout .bar{display:inline-block;height:.62em;width:1.8em;background:currentColor;opacity:.17;animation:breathe 1.9s var(--ease-out) infinite}
@keyframes breathe{50%{opacity:.3}}

/* ---- text ------------------------------------------------------------------------------ */
.quiet{color:var(--quiet)}
.lead{margin:0 0 clamp(16px,2.6vh,28px);max-width:52ch}
.fault{margin:0 0 clamp(16px,2.6vh,28px);max-width:52ch}
.gap{margin-top:clamp(22px,3.6vh,48px)}
.gap-s{margin-top:clamp(14px,2.2vh,26px)}
.msg-title{margin:0;font-family:var(--font-display);text-transform:lowercase;letter-spacing:var(--display-tracking);font-size:clamp(24px,2.8vw,36px);line-height:1}
.msg-title.loading{font-style:italic}
.mono-id{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.26em}
.link-out{word-break:break-all;font-size:14px;user-select:all}
em{font-style:italic}

/* ---- controls -------------------------------------------------------------------------- */
.fields{display:flex;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 190px;max-width:420px}
.field .label{opacity:.7}
.field input{font-size:clamp(15px,1.6vw,19px);background:none;border:0;border-bottom:1px solid rgba(127,127,127,.45);padding:9px 2px;width:100%;outline:none;border-radius:0;transition:border-color var(--dur-hover) var(--ease-out)}
.field input:focus{border-bottom-color:currentColor}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid currentColor;padding:11px 24px;min-height:44px;position:relative;font-weight:600;font-size:14px;letter-spacing:.03em;transition:background var(--dur-opacity) var(--ease-out),color var(--dur-opacity) var(--ease-out)}
.btn::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.6}
.b1 .btn:hover,.b1 .btn:active{background:var(--band-1-fg);color:var(--band-1-bg)}
.b2 .btn:hover,.b2 .btn:active{background:var(--band-2-fg);color:var(--band-2-bg)}
.b3 .btn:hover,.b3 .btn:active{background:var(--band-3-fg);color:var(--band-3-bg)}
.seam.failed .b2 .btn:hover,.seam.failed .b2 .btn:active{background:var(--band-failed-fg);color:var(--band-failed-bg)}
.btn.armed:active{background:var(--band-3-fg);color:var(--band-3-bg)}
.btn[disabled]{opacity:.5;cursor:default}
.toggle{display:inline-flex;align-items:center;gap:12px;font-size:14px;min-height:44px}
.toggle .track{width:46px;height:16px;border:1px solid currentColor;position:relative;flex:0 0 auto;display:inline-block;opacity:.75}
.toggle .track i{position:absolute;top:1px;left:1px;width:12px;height:12px;background:currentColor;display:block;transition:transform var(--dur-opacity) var(--ease-out)}
.toggle.on .track{opacity:1}
.toggle.on .track i{transform:translateX(30px)}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}

@media (max-width:560px){
  .bar{grid-template-columns:auto 1fr;grid-template-rows:auto auto;row-gap:10px}
  .bar .rail{grid-column:1 / -1;grid-row:2;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .bar .code{grid-column:2;grid-row:1}
}

@media (prefers-reduced-motion:reduce){
  .ttl.rise b,.cascade > *,.ambient i{animation:none}
  .cascade > *{animation:fade var(--dur-opacity) linear backwards}
  .plus span,.rail .mark{transition:none}
  @keyframes fade{from{opacity:0}}
}

/* ---- public page ---------------------------------------------------------------------- */
.motd{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--bar-y) + clamp(56px,9vh,96px));margin:0;max-width:42ch;font-size:clamp(15px,1.6vw,19px)}
.code-big{margin:8px 0 14px;font-family:var(--font-display);font-size:clamp(20px,4.2vw,44px);line-height:1.15;letter-spacing:.03em;word-break:break-all;user-select:all}
.ttl.italic{font-style:italic}
.ttl .loading-word{font-style:italic;opacity:.7}
/* a small set of exclusive choices: words, the current one underlined (a mark, not a colour) */
.choice{display:flex;gap:clamp(14px,2vw,24px);align-items:baseline;flex-wrap:wrap;min-height:44px}
.choice button{font-family:var(--font-display);text-transform:lowercase;letter-spacing:var(--display-tracking);font-size:clamp(15px,1.6vw,19px);padding:8px 0;text-underline-offset:.3em;transition:opacity var(--dur-hover) var(--ease-out)}
.choice button:hover{opacity:.78}
.choice button[aria-pressed="true"]{text-decoration:underline;text-decoration-thickness:2px}

/* ---- phase 5 -------------------------------------------------------------------------- */
.field.wide{max-width:none;flex-basis:100%}
.field textarea{font-family:var(--font-body);font-size:14px;line-height:1.45;background:none;border:0;border-bottom:1px solid rgba(127,127,127,.45);padding:9px 2px;width:100%;outline:none;resize:vertical;border-radius:0;color:inherit;transition:border-color var(--dur-hover) var(--ease-out)}
.field textarea:focus{border-bottom-color:currentColor}
.btn.file{display:inline-flex;align-items:center;cursor:pointer}
.btn.file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.log{font-size:13px;line-height:1.45;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.log div{padding:1px 0;white-space:pre-wrap}
.log .t{opacity:.55;margin-right:.6em}
.log .more{opacity:.75}
.pane.console{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.pane.console .log{flex:1 1 auto;overflow:hidden auto;scrollbar-width:none;padding-bottom:12px}
.pane.console .log::-webkit-scrollbar{display:none}
.pane.console .send{flex:0 0 auto;padding:10px 0 calc(clamp(20px,3vh,36px) + 44px)}
.group-title{margin:clamp(22px,3.6vh,40px) 0 4px}
.setting{display:flex;flex-direction:column;gap:2px;padding:10px 0;position:relative}
.setting + .setting::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.18}
.setting .note{font-size:13px}
.setting .fixed{font-family:var(--font-display);letter-spacing:var(--display-tracking);text-transform:lowercase}

/* ---- settings rows: name and note on the left, the control on the right --------------- */
.layer.b1{--band-bg:var(--band-1-bg)} .layer.b2{--band-bg:var(--band-2-bg)} .layer.b3{--band-bg:var(--band-3-bg)}
.seam.failed .layer.b2{--band-bg:var(--band-failed-bg)}
.srow{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,1.5fr);gap:6px clamp(18px,3vw,40px);align-items:center;padding:13px 0;position:relative}
.srow + .srow::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.16}
.srow .what{display:flex;flex-direction:column;gap:2px;min-width:0}
.srow .what .name{font-size:15px;font-weight:500}
.srow .what .note{font-size:13px;line-height:1.4;color:var(--quiet)}
.srow .control{min-width:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.srow .control input,.srow .control textarea{font:inherit;font-size:16px;background:none;border:0;border-bottom:1px solid rgba(127,127,127,.45);padding:7px 2px;width:100%;max-width:420px;outline:none;border-radius:0;color:inherit}
.srow .control textarea{font-size:14px;line-height:1.45;max-width:none;resize:vertical}
.srow .control input:focus,.srow .control textarea:focus{border-bottom-color:currentColor}
.srow .control .fixed{font-size:16px;opacity:.85}
.srow .control .toggle{min-height:32px}
.srow.changed .what .name::after{content:" •";opacity:.7}
.sgroup{margin:clamp(26px,4vh,44px) 0 2px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.16em;opacity:.7}
.swatch{display:inline-block;width:22px;height:22px;flex:0 0 auto;outline:1px solid currentColor;outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px 16px}
.chips button{font-size:14px;padding:6px 0;opacity:.55;text-underline-offset:.3em;transition:opacity var(--dur-hover) var(--ease-out)}
.chips button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-decoration-thickness:2px}
.savebar{position:sticky;bottom:calc(clamp(20px,3vh,36px) + 50px);margin-top:clamp(18px,3vh,32px);padding:14px 0;background:var(--band-bg);display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;z-index:3}
.savebar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.3}
.savebar[hidden]{display:none}
.savebar .count{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.savebar .plan{flex-basis:100%;margin:0;max-width:60ch}
@media (max-width:640px){.srow{grid-template-columns:1fr;gap:6px}}