:root{
  --bg:#000000;
  --panel:#000000;
  --elev:#0C0C0C;
  --elev-2:#141414;
  --hover:#161616;
  --stroke:#1C1C1C;
  --stroke-2:#242424;
  --text:#FFFFFF;
  --text-2:#B4B4B4;
  --text-3:#6E6E6E;
  --accent:#5B6BFF;
  --a:#E6E6E6;   /* seat colours, deliberately flat */
  --b:#C97A54;
  --c:#4FA98C;
  --d:#5B6BFF;
}
[data-theme="light"]{
  --bg:#FFFFFF;
  --panel:#FAFAFA;
  --elev:#FFFFFF;
  --elev-2:#F2F2F2;
  --hover:#F0F0F0;
  --stroke:#E6E6E6;
  --stroke-2:#DADADA;
  --text:#000000;
  --text-2:#454545;
  --text-3:#8A8A8A;
  --a:#1A1A1A;
  --b:#B4643F;
  --c:#2F8A6E;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;-webkit-font-smoothing:antialiased;overflow:hidden;
  letter-spacing:-.005em;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:#242424;border-radius:8px}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:#DDD}
::-webkit-scrollbar-track{background:transparent}

.app{display:flex;height:100vh;width:100vw}

/* ---------------- sidebar ---------------- */
.side{
  width:260px;flex:0 0 260px;height:100%;background:var(--panel);
  border-right:1px solid var(--stroke);
  display:flex;flex-direction:column;padding:12px 10px 0;
  transition:width .2s ease,flex-basis .2s ease,padding .2s ease;
  overflow:hidden;
}
.side.mini{width:64px;flex-basis:64px;padding-left:12px;padding-right:12px}
.side-top{display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 6px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.collapse{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.collapse:hover{background:var(--hover);color:var(--text)}
.side.mini .collapse{display:none}

.nav{display:flex;flex-direction:column;gap:1px}
.nav a{
  display:flex;align-items:center;gap:13px;height:42px;padding:0 12px;border-radius:10px;
  color:var(--text);text-decoration:none;font-size:14.5px;font-weight:500;
  white-space:nowrap;transition:background .12s;
}
.nav a:hover{background:var(--hover)}
.nav a.on{background:var(--elev-2)}
.nav a svg{flex:0 0 19px;opacity:.95}
.nav .lbl{transition:opacity .15s}
.side.mini .lbl,.side.mini .grp,.side.mini .dot-new{opacity:0;pointer-events:none}
.dot-new{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:auto}

.grp{margin-top:20px;display:flex;flex-direction:column;gap:1px}
.grp button{
  display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:10px;
  font-size:14.5px;font-weight:600;color:var(--text);white-space:nowrap;
}
.grp button:hover{background:var(--hover)}
.grp svg{color:var(--text-3)}

.side-foot{margin-top:auto;border-top:1px solid var(--stroke);padding:12px 4px;display:flex;align-items:center;gap:11px}
.avatar{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--stroke-2);flex:0 0 28px;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;color:var(--text-2);
  background:var(--elev-2);
}
.side-foot .nm{font-size:14px;font-weight:500;white-space:nowrap}

/* ---------------- main ---------------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.top{height:56px;flex:0 0 56px;display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:0 22px}
.top button{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 11px;border-radius:9px;
  color:var(--text-2);font-size:14px;font-weight:500;transition:.12s;
}
.top button:hover{background:var(--hover);color:var(--text)}

.stage{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center}

/* hero */
.hero{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px 130px;gap:36px}
.hero.off{display:none}
/* one line: mark, wordmark, "by elva", all sitting on the same baseline */
.mark{display:flex;align-items:baseline;gap:11px;user-select:none}
.mark svg{align-self:center;flex:0 0 auto}
.mark h1{font-size:52px;font-weight:700;letter-spacing:-2.2px;line-height:1}

.byline{display:flex;align-items:baseline;gap:6px}
.byline .by{font-size:14px;color:var(--text-3);letter-spacing:.2px}
.byline .elva{
  font-size:13px;letter-spacing:3px;text-transform:uppercase;font-weight:600;
  color:var(--text-2);display:inline-flex;align-items:baseline;
}
/* when public/brand/elva.svg exists it is swapped in here */
.byline .elva img,.byline .elva svg{height:17px;width:auto;display:block;opacity:.9}
[data-theme="light"] .byline .elva img{filter:invert(1)}

/* composer */
.cw{width:100%;max-width:840px}
.bar{
  display:flex;align-items:center;gap:4px;background:var(--elev);
  border:1px solid var(--stroke);border-radius:999px;padding:7px 8px 7px 10px;
  transition:border-color .15s;
}
.bar:focus-within{border-color:var(--stroke-2)}
.ib{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-2);flex:0 0 36px;transition:.12s}
.ib:hover{background:var(--hover);color:var(--text)}
textarea{
  flex:1;background:none;border:none;outline:none;resize:none;font-family:inherit;
  color:var(--text);font-size:16px;line-height:1.45;padding:8px 6px;max-height:170px;
}
textarea::placeholder{color:var(--text-3)}
.seats{
  display:flex;align-items:center;gap:6px;height:34px;padding:0 8px 0 11px;border-radius:9px;
  font-size:14.5px;font-weight:500;color:var(--text);flex:0 0 auto;transition:.12s;
}
.seats:hover{background:var(--hover)}
.go{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;background:var(--text);color:var(--bg);
  display:flex;align-items:center;justify-content:center;transition:.12s;
}
.go:hover{opacity:.85}
.go:disabled{opacity:.4;cursor:default}

/* seat sheet */
/* fixed, not absolute: it is placed from getBoundingClientRect(), which is
   viewport-relative. Absolute would offset it by the sidebar width. */
.sheet{
  position:fixed;z-index:60;background:var(--elev);border:1px solid var(--stroke-2);
  border-radius:14px;padding:6px;width:320px;max-width:calc(100vw - 24px);display:none;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.9);
}
.opt .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
[data-theme="light"] .sheet{box-shadow:0 20px 44px -14px rgba(0,0,0,.18)}
.sheet.open{display:block}
.sheet .hd{font-size:12px;color:var(--text-3);padding:9px 11px 7px;font-weight:500}
.opt{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:14px;width:100%;text-align:left;transition:.12s}
.opt:hover{background:var(--hover)}
.sq{width:7px;height:7px;border-radius:2px;flex:0 0 7px}
.opt .sub{margin-left:auto;font-size:12px;color:var(--text-3)}
.tick{width:15px;height:15px;flex:0 0 15px;opacity:0;color:var(--text)}
.opt.on .tick{opacity:1}
.rng{padding:6px 11px 12px}
.rng input{width:100%;accent-color:var(--text)}
.rng div{font-size:12.5px;color:var(--text-3);margin-top:8px}

/* thread */
.thread{width:100%;max-width:800px;padding:10px 24px 210px;display:none;flex-direction:column;gap:30px}
.thread.on{display:flex}
.q{align-self:flex-end;max-width:80%;background:var(--elev-2);padding:11px 16px;border-radius:20px;font-size:15.5px;line-height:1.5}
.step{display:flex;flex-direction:column;gap:13px;animation:up .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lab{font-size:13px;color:var(--text-3);font-weight:500;display:flex;align-items:center;gap:9px}
.lab i{flex:1;height:1px;background:var(--stroke);font-style:normal}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:10px}
.cards[data-n="4"]{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.cards,.cards[data-n="4"]{grid-template-columns:1fr}}
.card{background:var(--elev);border:1px solid var(--stroke);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:158px}
.card .hd{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.card .hd .sq{background:var(--k)}
.card .hd .v{margin-left:auto;font-size:11.5px;color:var(--text-3);font-weight:400}
.card .tx{font-size:13.5px;line-height:1.65;color:var(--text-2)}
.card .tx b{color:var(--text);font-weight:600}
.card .ft{margin-top:auto;padding-top:10px;border-top:1px solid var(--stroke);font-size:11.5px;color:var(--text-3)}
.cur{display:inline-block;width:6px;height:13px;background:var(--text-3);vertical-align:-2px;animation:bl .9s steps(2) infinite}
@keyframes bl{50%{opacity:0}}

.row{background:var(--elev);border:1px solid var(--stroke);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.6;color:var(--text-2);display:flex;gap:12px;animation:up .3s both}
.row .fr{font-size:12px;color:var(--text-3);white-space:nowrap;font-weight:500;padding-top:1px}

.ans{background:var(--elev);border:1px solid var(--stroke-2);border-radius:18px;padding:20px 22px}
.ans .tx{font-size:15.5px;line-height:1.7}
.ans .tx p{margin-bottom:13px}
.ans .tx p:last-child{margin-bottom:0}
.ans .tx b{font-weight:600}
.meter{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--stroke);flex-wrap:wrap;font-size:12.5px;color:var(--text-3)}
.track{flex:1;min-width:150px;height:4px;border-radius:4px;background:var(--elev-2);overflow:hidden}
.track span{display:block;height:100%;width:0;background:var(--text-2);transition:width 1s ease}
.tags{display:flex;gap:5px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2);border:1px solid var(--stroke);border-radius:7px;padding:4px 8px}
.acts{display:flex;gap:2px;margin-top:14px}
.acts button{font-size:13px;color:var(--text-3);padding:7px 10px;border-radius:8px;transition:.12s}
.acts button:hover{background:var(--hover);color:var(--text)}

.dock{position:absolute;left:0;right:0;bottom:0;padding:14px 24px 22px;display:none;justify-content:center;background:linear-gradient(to top,var(--bg) 60%,transparent)}
.dock.on{display:flex}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:70;display:none}
.scrim.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:392px;max-width:92vw;z-index:80;background:var(--panel);border-left:1px solid var(--stroke);transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer header{padding:20px 22px 15px;display:flex;align-items:center;border-bottom:1px solid var(--stroke)}
.drawer header h2{font-size:15.5px;font-weight:600}
.drawer .body{flex:1;overflow-y:auto;padding:20px 22px 40px;display:flex;flex-direction:column;gap:24px}
.ttl{font-size:12.5px;color:var(--text-3);font-weight:500;margin-bottom:12px}
.f{margin-bottom:13px}
.f label{display:block;font-size:13px;color:var(--text-2);margin-bottom:7px}
.f input{width:100%;background:var(--elev-2);border:1px solid var(--stroke);border-radius:9px;padding:10px 12px;color:var(--text);font-size:13px;outline:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.f input:focus{border-color:var(--stroke-2)}
.note{font-size:12.5px;color:var(--text-3);line-height:1.55;margin-top:8px}
.sr{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--stroke)}
.sr:last-child{border-bottom:none}
.sr .t{font-size:14px}
.sr .d{font-size:12.5px;color:var(--text-3);margin-top:3px;line-height:1.45}
.sw{margin-left:auto;width:38px;height:22px;border-radius:99px;background:var(--elev-2);border:1px solid var(--stroke-2);position:relative;flex:0 0 38px;transition:.18s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-3);transition:.18s}
.sw.on{background:var(--text)}
.sw.on::after{left:18px;background:var(--bg)}

.toast{position:fixed;bottom:104px;left:50%;transform:translate(-50%,14px);opacity:0;background:var(--elev-2);border:1px solid var(--stroke-2);padding:10px 15px;border-radius:10px;font-size:13.5px;z-index:120;pointer-events:none;transition:.24s}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:760px){.side{display:none}.mark h1{font-size:38px}.thread{padding-left:14px;padding-right:14px}}

/* ---------------- activity trace ---------------- */
.trace{display:flex;flex-direction:column;margin:-6px 0 2px}
.trh{display:flex;align-items:center;gap:11px;cursor:pointer;padding:4px 0;user-select:none}
.trh .gr{width:18px;flex:0 0 18px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
/* the mark is the spinner: the arcs turn, a faint ring breathes behind them,
   and both stop dead the moment the run finishes */
.am{overflow:visible}
.am .arcs{transform-origin:16px 16px;animation:turn 1.5s linear infinite}
.am .halo{
  transform-origin:16px 16px;opacity:.18;
  stroke-dasharray:5 9;animation:turn 4.5s linear infinite reverse;
}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.trace.done .trh .gr .am .arcs,
.trace.done .trh .gr .am .halo{animation:none}
.trace.done .trh .gr .am{opacity:.45}
.trace.done .trh .gr .am .halo{display:none}
@media (prefers-reduced-motion:reduce){
  .am .arcs,.am .halo{animation:none}
}
.trh .tt{font-size:14.5px;color:var(--text-3)}
.trh .cv{margin-left:2px;color:var(--text-3);transition:transform .2s;display:flex}
.trace.shut .cv{transform:rotate(-90deg)}

.steps{display:flex;flex-direction:column;overflow:hidden;transition:max-height .28s ease,opacity .2s ease;max-height:600px;opacity:1}
.trace.shut .steps{max-height:0;opacity:0}
.tr{display:flex;gap:12px;align-items:flex-start;position:relative;padding:5px 0;animation:trin .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes trin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.tr .ic{width:18px;flex:0 0 18px;display:flex;justify-content:center;color:var(--text-3);padding-top:1px}
.tr .tl{font-size:14.5px;line-height:1.45;color:var(--text-3)}
.tr .stem{position:absolute;left:8.5px;top:25px;height:calc(100% - 20px);width:1px;background:var(--stroke-2)}
.tr:last-child .stem{display:none}
.tr.live .tl{
  background:linear-gradient(90deg,var(--text-3) 0%,var(--text) 20%,var(--text-3) 40%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep 2s linear infinite;
}
@keyframes sweep{from{background-position:110% 0}to{background-position:-110% 0}}

/* drawer extras */
.statlist{display:flex;flex-direction:column;gap:1px;margin-bottom:12px}
.stat{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--stroke);font-size:14px}
.stat:last-child{border-bottom:none}
.stat .sub{margin-left:auto;font-size:12px;color:var(--text-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.count{margin-left:auto;font-size:15px;font-weight:600}
.dl{display:flex;gap:8px;margin-top:14px}
.dl button{flex:1;border:1px solid var(--stroke-2);border-radius:9px;padding:9px 10px;font-size:13px;color:var(--text-2);transition:.12s}
.dl button:hover{background:var(--hover);color:var(--text)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--elev-2);padding:1px 5px;border-radius:4px}

/* ---------------- history ---------------- */
.hist{display:none;flex-direction:column;gap:2px;margin-top:8px;overflow-y:auto;flex:1;min-height:0}
.hist.on{display:flex}
.side.mini .hist{display:none}
.hist input{
  background:var(--elev-2);border:1px solid var(--stroke);border-radius:9px;
  padding:8px 11px;color:var(--text);font-size:13.5px;outline:none;margin-bottom:6px;font-family:inherit;
}
.hist input:focus{border-color:var(--stroke-2)}
.hitem{
  display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:9px;
  font-size:13.5px;color:var(--text-2);cursor:pointer;transition:.12s;
}
.hitem:hover{background:var(--hover);color:var(--text)}
.hitem.on{background:var(--elev-2);color:var(--text)}
.hitem .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hitem .x{opacity:0;color:var(--text-3);display:flex;padding:2px;border-radius:5px}
.hitem:hover .x{opacity:1}
.hitem .x:hover{background:var(--stroke-2);color:var(--text)}
.hempty{font-size:12.5px;color:var(--text-3);padding:10px 11px;line-height:1.5}

/* ---------------- top bar ---------------- */
.top .spacer{flex:1}
.top .menu{display:none}
.top button.menu{padding:0 9px}

/* ---------------- stop button ---------------- */
.go.stop{background:var(--elev-2);color:var(--text);border:1px solid var(--stroke-2)}
.go.stop:hover{opacity:1;background:var(--hover)}

/* ---------------- answer editor ---------------- */
.edit{
  width:100%;background:var(--elev-2);border:1px solid var(--stroke-2);border-radius:12px;
  padding:14px 15px;color:var(--text);font-size:15.5px;line-height:1.7;font-family:inherit;
  outline:none;resize:vertical;min-height:180px;
}
.edit:focus{border-color:var(--text-3)}
.editbar{display:flex;gap:8px;align-items:center;margin-top:10px}
.editbar .hint{font-size:12.5px;color:var(--text-3);margin-left:auto;text-align:right;line-height:1.4}
.btn{border:1px solid var(--stroke-2);border-radius:999px;padding:9px 16px;font-size:13.5px;
  color:var(--text-2);transition:.14s;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;line-height:1}
.btn:hover{background:var(--hover);color:var(--text)}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.primary:hover{opacity:.85;background:var(--text);color:var(--bg)}

/* ---------------- drawer extras ---------------- */
.stat .dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:0 0 7px}
.stat .off{background:var(--stroke-2)}

@media(max-width:760px){
  .side{
    display:flex;position:fixed;top:0;bottom:0;left:0;z-index:90;
    transform:translateX(-100%);transition:transform .22s ease;
  }
  .side.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.7)}
  .top .menu{display:flex}
}

.side-foot .out{
  margin-left:auto;width:28px;height:28px;border-radius:8px;color:var(--text-3);
  display:flex;align-items:center;justify-content:center;transition:.12s;flex:0 0 28px;
}
.side-foot .out:hover{background:var(--hover);color:var(--text)}
.side.mini .side-foot .out{display:none}

/* everything that happened before the answer lives under the trace header */
/* the answers and the pushback, folded away behind one line while the run
   is happening. The step list above is the only thing on screen by default */
.detail{display:flex;flex-direction:column}
.detail .dtog{
  display:none;align-items:center;gap:8px;align-self:flex-start;
  font-size:13.5px;color:var(--text-3);padding:5px 9px 5px 6px;border-radius:9px;
  margin-left:-6px;transition:background .12s,color .12s;
}
.detail.has .dtog{display:inline-flex}
.detail .dtog:hover{background:var(--hover);color:var(--text-2)}
.detail .dtog .cv{display:flex;transform:rotate(-90deg);transition:transform .2s}
.detail.open .dtog .cv{transform:none}
.detail .dbody{display:none;flex-direction:column;gap:26px;padding-top:16px}
.detail.open .dbody{display:flex}

.workbody{display:flex;flex-direction:column;gap:18px;padding-top:2px}
.trace.shut .workbody{display:none}
.trace .steps{gap:0}
.trh{border-radius:9px;padding:5px 8px;margin-left:-8px;transition:background .12s}
.trh:hover{background:var(--hover)}

/* ---------------- plan tag + paywall ---------------- */
.side-foot .plan-tag{
  margin-left:auto;font-size:11.5px;color:var(--text-3);border:1px solid var(--stroke);
  border-radius:999px;padding:3px 9px;transition:.12s;white-space:nowrap;
}
.side-foot .plan-tag:hover{color:var(--text);border-color:var(--text-3)}
.side-foot .plan-tag.warn{color:#E0A05A;border-color:#4a3520}
.side.mini .plan-tag{display:none}
.side-foot .out{margin-left:8px}

.wall{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;transition:opacity .18s ease}
.wall.on{opacity:1}
.wallbox{background:var(--elev);border:1px solid var(--stroke-2);border-radius:24px;
  padding:30px;max-width:400px;width:100%;text-align:center;
  transform:translateY(10px) scale(.985);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.wall.on .wallbox{transform:none}
.wallmark{color:var(--text);margin-bottom:16px}
.wallbox h2{font-size:18px;font-weight:600;letter-spacing:-.3px;line-height:1.35}
.wallbox p{font-size:14px;color:var(--text-2);line-height:1.65;margin-top:10px}
.wallrow{display:flex;gap:9px;margin-top:22px}
.wallrow .btn{flex:1;justify-content:center;text-align:center}
.wallnote{font-size:12.5px;color:var(--text-3);margin-top:14px;line-height:1.6}
.wallnote a{color:var(--text-2)}