/* ============================================================
   EION — interface styles

   Two layers, deliberately different materials:

   1. The shell. White, near-black ink, 1.6px round-cap icons,
      pill composer. Quiet on purpose — it is a workspace.
   2. EION live. The cold film palette from the Aura build:
      deep field, azure and cyan light, violet accent. It only
      appears when EION is actually doing something.

   The beam around the composer is the seam between them, and the
   one place any colour is spent in the shell.

   Signature: --beam (#2185FA) traces the composer and brightens
   with EION's state. --key (#6A4BE0) marks terms EION emphasises.
   ============================================================ */

:root{
  --bg:#ffffff;
  --panel:#f9f9f9;
  --ink:#0d0d0d;
  --ink-2:#5d5d5d;
  --ink-3:#9b9b9b;
  --line:#ececec;
  --line-2:#e3e3e3;
  --bubble:#f4f4f4;
  --hover:#f0f0f0;

  /* live layer */
  --field:#04060D;
  --field-2:#0A1129;
  --live-ink:#E2F4FF;
  --beam:#2185FA;
  --beam-2:#29BDFF;
  --beam-3:#14D8D0;
  --key:#6A4BE0;

  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-pill:999px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --panel-w: min(82vw, 320px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,textarea,input{font:inherit;letter-spacing:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}

svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;display:block}

.icon-btn{
  width:40px;height:40px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--ink);
  transition:background .15s;
}
.icon-btn:hover{background:var(--hover)}
.icon-btn.sm{width:32px;height:32px}
.icon-btn.sm svg{width:18px;height:18px}

/* ======================= Boot sequence ====================== */
.boot{
  position:fixed;inset:0;z-index:200;background:#04060D;
  opacity:1;transition:opacity .7s ease;
}
.boot.gone{opacity:0;pointer-events:none}
.boot canvas,.boot .boot-video{
  position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
}
.boot-skip{
  position:absolute;left:50%;bottom:calc(28px + var(--safe-b));transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(226,244,255,.42);
}
body.booting .app,body.booting .panel{opacity:0}
.app,.panel{transition:opacity .5s ease .1s}

/* ======================= Aura mark ========================== */
/* The one coloured object in a monochrome shell. A lensed disc:
   dark core, cold film ring, cool bloom. Same material as the orb. */
.aura-mark{
  position:relative;width:22px;height:22px;border-radius:50%;flex:none;
  background:
    radial-gradient(circle at 50% 50%, #040D22 0 38%, transparent 39%),
    conic-gradient(from 210deg,
      #14D8D0, #29BDFF, #2475FF, #3D4DF5, #6A4BE0, #E86AB8, #7E1F3F, #E8CA5E, #14607A, #14D8D0);
  box-shadow:0 0 0 1px rgba(33,133,250,.28), 0 0 12px rgba(33,133,250,.30);
}
.aura-mark::after{
  content:"";position:absolute;inset:34%;border-radius:50%;
  background:radial-gradient(circle,#0A2B7A,#040D22 78%);
}
.aura-mark.sm{width:16px;height:16px}
.aura-mark.lg{width:28px;height:28px}
.aura-mark.spin{animation:mark-spin 7s linear infinite}
@keyframes mark-spin{to{transform:rotate(360deg)}}

/* ============================ Side panel ==================== */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:40;
       animation:fade .18s ease}
@keyframes fade{from{opacity:0}}

.panel{
  position:fixed;inset:0 auto 0 0;width:var(--panel-w);
  background:var(--panel);z-index:50;
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .24s cubic-bezier(.32,.72,0,1),opacity .5s ease;
  padding-bottom:var(--safe-b);
}
.panel.open{transform:none}

.panel-top{display:flex;justify-content:space-between;padding:10px 10px 4px}
.panel-nav,.panel-section{padding:4px 10px}
.row{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:10px;border-radius:var(--r-sm);
  font-size:15px;text-align:left;transition:background .15s;
}
.row:hover{background:var(--hover)}
.row span:not(.count):not(.pill):not(.aura-mark){flex:1}
.row-live .aura-mark{margin:0 1px}
.row-live .count{
  color:var(--beam);border-color:rgba(33,133,250,.35);
  background:rgba(33,133,250,.06);
}

.panel-label{
  padding:16px 10px 6px;font-size:12px;font-weight:500;
  color:var(--ink-3);letter-spacing:0;
  display:flex;align-items:center;justify-content:space-between;
}
.panel-section{flex:1;overflow-y:auto;min-height:0}

.panel-foot{border-top:1px solid var(--line-2);padding:8px 10px}
.pill{
  font-size:12px;color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:2px 9px;
}
#incognito-toggle[aria-pressed="true"]{background:var(--ink);color:#fff}
#incognito-toggle[aria-pressed="true"] .pill{background:transparent;border-color:#555;color:#fff}

.identity{display:flex;align-items:center;gap:10px;padding:10px}
.avatar{
  width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:600;
}
.identity-name{font-size:14.5px}

.search{
  display:flex;align-items:center;gap:8px;margin:2px 10px 6px;
  padding:8px 10px;background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--r-sm);
}
.search svg{width:18px;height:18px;color:var(--ink-3);flex:none}
.search input{flex:1;border:0;background:transparent;font-size:14.5px;min-width:0}
.search input:focus{outline:none}
.search input::placeholder{color:var(--ink-3)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}

.count{
  font-size:12px;color:var(--ink-3);background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:1px 8px;flex:none;
}
.count.muted{border-style:dashed}
.row.is-off{opacity:.5;cursor:default}
.row.is-off:hover{background:none}

.mini{
  width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--ink-3);transition:background .15s,color .15s;
}
.mini:hover{background:var(--hover);color:var(--ink)}
.mini svg{width:17px;height:17px}

.empty-note{margin:0;padding:4px 10px 8px;font-size:13px;color:var(--ink-3);line-height:1.45}

.thread-item,.project-item{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:var(--r-sm);font-size:14.5px;
  text-align:left;transition:background .15s;
}
.thread-item:hover,.project-item:hover{background:var(--hover)}
.thread-item.active,.project-item.active{background:var(--hover);font-weight:500}
.thread-item .label,.project-item .label{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}
.project-item svg{width:17px;height:17px;color:var(--ink-3);flex:none}
.thread-item .kill{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  color:var(--ink-3);opacity:0;flex:none;
}
.thread-item:hover .kill{opacity:1}
.thread-item .kill:hover{background:var(--line-2);color:var(--ink)}
.thread-item .kill svg{width:15px;height:15px}

/* ============================ App shell ===================== */
.app{height:100%;display:flex;flex-direction:column;position:relative}

.topbar{
  display:flex;align-items:center;gap:2px;
  padding:6px 8px;background:var(--bg);
}
.wordmark{
  flex:1;text-align:center;font-size:17px;font-weight:600;letter-spacing:.14em;
  border-radius:var(--r-pill);padding:6px 12px;background:transparent;border:1px solid transparent;
}
.wordmark:hover{background:var(--hover)}
.wordmark-badge{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:8px;font-size:10px;letter-spacing:.12em;
  padding:2px 7px;border-radius:999px;border:1px solid rgba(33,133,250,.38);
  color:var(--beam);background:rgba(33,133,250,.06);
}

/* ============================ Thread ======================== */
.thread{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 0 12px}

.welcome{
  height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:24px;
}
.welcome-mark{
  font-size:13px;font-weight:600;letter-spacing:.44em;text-indent:.44em;
  color:var(--ink-3);
}
.welcome h1{margin:0;font-size:25px;font-weight:600;letter-spacing:-0.02em;text-align:center}
.starters{display:flex;flex-direction:column;gap:8px;width:100%;max-width:340px}
.starter{
  border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:11px 14px;font-size:14.5px;color:var(--ink-2);text-align:left;
  transition:background .15s,color .15s;
}
.starter:hover{background:var(--hover);color:var(--ink)}

.msg{max-width:720px;margin:0 auto;padding:6px 16px;animation:rise .22s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}

.msg.user{display:flex;justify-content:flex-end}
.msg.user .body{
  background:var(--bubble);border-radius:var(--r-lg);
  padding:10px 15px;max-width:85%;white-space:pre-wrap;
}
.msg.eion .body{white-space:pre-wrap}
.msg.eion .who{
  font-size:12px;font-weight:600;color:var(--ink-3);
  letter-spacing:.1em;margin-bottom:5px;
}

/* keywords EION emphasises */
.key{
  font-style:normal;font-weight:600;color:var(--key);
  background:rgba(106,75,224,.07);border-radius:4px;padding:0 3px;margin:0 -1px;
}
.body code{
  font-family:var(--mono);font-size:.88em;color:var(--key);
  background:rgba(106,75,224,.08);border-radius:5px;padding:1px 5px;
}

/* an action EION cannot take on its own — one tap hands it back */
.act{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  border:1px solid rgba(33,133,250,.38);border-radius:var(--r-pill);
  padding:7px 14px;font-size:14px;color:var(--beam);
  background:rgba(33,133,250,.05);transition:background .15s;
}
.act:hover{background:rgba(33,133,250,.12)}
.act svg{width:16px;height:16px}

.thinking{display:flex;gap:5px;padding:10px 16px;max-width:720px;margin:0 auto}
.thinking i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.thinking i:nth-child(2){animation-delay:.18s}
.thinking i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

.notice{max-width:720px;margin:6px auto;padding:10px 16px;font-size:14px;color:var(--ink-2)}
.notice b{color:var(--ink);font-weight:600}

/* ============================ Composer ====================== */
.composer-wrap{position:relative;padding:6px 12px calc(10px + var(--safe-b));background:var(--bg)}

.slash-menu{
  position:absolute;left:50%;bottom:calc(92px + var(--safe-b));transform:translateX(-50%);
  width:min(720px, calc(100% - 24px));max-height:220px;overflow:auto;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg);
  box-shadow:0 18px 42px rgba(4,12,34,.12);padding:4px;z-index:12;
}
.slash-item{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:8px;text-align:left;
}
.slash-item:hover{background:var(--hover)}
.slash-title{font-weight:600}
.slash-meta{font-size:12px;color:var(--ink-3)}

/* the beam: a light-blue seam that tightens as EION engages */
.beam{
  position:relative;max-width:720px;margin:0 auto;border-radius:27px;
  padding:1px;
  background:linear-gradient(180deg,var(--line-2),var(--line-2));
  transition:background .3s ease;
}
.beam::before{
  content:"";position:absolute;inset:-7px;border-radius:34px;z-index:-1;
  background:radial-gradient(60% 120% at 50% 50%, rgba(33,133,250,.34), rgba(41,189,255,.12) 55%, transparent 74%);
  opacity:0;transition:opacity .35s ease;
}
.beam .composer{
  display:flex;align-items:flex-end;gap:6px;
  background:var(--bg);border-radius:26px;padding:5px 6px 5px 5px;
}
.beam[data-state="ready"],
.beam:focus-within{
  background:linear-gradient(96deg,var(--beam),var(--beam-2) 45%,var(--beam-3) 72%,var(--beam));
  background-size:280% 100%;
  animation:beam-run 7s linear infinite;
}
.beam[data-state="ready"]::before,
.beam:focus-within::before{opacity:.55}
.beam[data-state="listening"]{
  background:linear-gradient(96deg,var(--beam-2),#E2F4FF 40%,var(--beam-3) 70%,var(--beam-2));
  background-size:280% 100%;animation:beam-run 2.6s linear infinite;
}
.beam[data-state="listening"]::before{opacity:.9}
.beam[data-state="thinking"]{
  background:linear-gradient(96deg,var(--beam),var(--key) 30%,var(--beam-2) 62%,var(--beam));
  background-size:280% 100%;animation:beam-run 1.5s linear infinite;
}
.beam[data-state="thinking"]::before{opacity:.8;animation:beam-breathe 1.6s ease-in-out infinite}
@keyframes beam-run{to{background-position:280% 0}}
@keyframes beam-breathe{50%{opacity:.35}}

.composer textarea{
  flex:1;border:0;resize:none;background:transparent;
  padding:9px 4px;max-height:170px;font-size:16px;line-height:1.45;
}
.composer textarea:focus{outline:none}
.composer textarea::placeholder{color:var(--ink-3)}
.composer-btn{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-2);flex:none;transition:background .15s,color .15s;
}
.composer-btn:hover{background:var(--hover);color:var(--ink)}
.composer-btn.on{background:var(--ink);color:#fff}

.aura-btn{
  width:36px;height:36px;border-radius:50%;flex:none;
  display:grid;place-items:center;transition:transform .15s,background .15s;
}
.aura-btn:hover{background:var(--hover)}
.aura-btn:active{transform:scale(.92)}

.send{
  width:36px;height:36px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--ink);color:#fff;
  transition:opacity .15s,transform .15s;
}
.send:disabled{opacity:.22;cursor:default}
.send:not(:disabled):active{transform:scale(.94)}

.tools{
  max-width:720px;margin:0 auto 8px;display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--line-2);border-radius:var(--r-md);padding:5px;
  animation:rise .18s ease both;
}
.tool{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);font-size:14.5px;text-align:left}
.tool:hover{background:var(--hover)}

.disclaimer{margin:8px auto 0;text-align:center;font-size:11.5px;color:var(--ink-3)}

/* ========================= EION live ======================== */
.live{
  position:absolute;left:12px;right:12px;z-index:35;
  bottom:calc(78px + var(--safe-b));
  height:230px;
  display:flex;flex-direction:column;
  background:var(--field);color:var(--live-ink);
  border:1px solid rgba(140,200,255,.18);border-radius:22px;overflow:hidden;
  box-shadow:0 18px 48px rgba(4,12,34,.34), 0 0 0 6px rgba(33,133,250,.07);
  font-family:var(--mono);
  animation:live-in .3s cubic-bezier(.32,.72,0,1) both;
  touch-action:none;
}
@keyframes live-in{from{opacity:0;transform:translateY(18px) scale(.97)}}
.live.sizing{transition:none}
.live:not(.sizing){transition:height .32s cubic-bezier(.32,.72,0,1),
                              bottom .32s cubic-bezier(.32,.72,0,1),
                              left .32s ease,right .32s ease,border-radius .32s ease}

.live[data-mode="tall"]{height:62vh}
.live[data-mode="full"]{
  height:100%;bottom:0;left:0;right:0;border-radius:0;border-width:0;
}

.live-grip{
  width:100%;padding:8px 0 2px;display:grid;place-items:center;cursor:grab;flex:none;
}
.live-grip:active{cursor:grabbing}
.live-grip span{width:38px;height:4px;border-radius:2px;background:rgba(140,200,255,.34)}

.live-head{display:flex;align-items:center;gap:10px;padding:4px 10px 8px 14px;flex:none}
.live-id{flex:1;min-width:0}
.live-name{font-size:13px;font-weight:500;letter-spacing:.2em}
.live-state{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(226,244,255,.44)}
.live .icon-btn{color:var(--live-ink);opacity:.72}
.live .icon-btn:hover{background:rgba(140,200,255,.12);opacity:1}
.live[data-mode="full"] #live-expand svg,
.live[data-mode="tall"] #live-expand svg{transform:rotate(180deg)}

.live-stage{flex:1;min-height:0;position:relative}
.live-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

.live-line{
  margin:0;padding:0 18px 8px;text-align:center;flex:none;
  font-size:13.5px;line-height:1.5;color:var(--live-ink);opacity:.92;
  transition:opacity .35s ease;text-wrap:balance;
}
.live-line.fading{opacity:0}

.live-log{display:none;flex:1;overflow-y:auto;padding:4px 14px 8px;min-height:0}
.live[data-mode="tall"] .live-log,
.live[data-mode="full"] .live-log{display:block}
.live[data-mode="tall"] .live-stage{flex:0 0 34%}
.live[data-mode="full"] .live-stage{flex:0 0 38%}
.live-log .msg{padding:5px 0;font-size:13.5px}
.live-log .msg.user .body{background:rgba(140,200,255,.12);color:var(--live-ink)}
.live-log .msg.eion .who{color:rgba(226,244,255,.42)}
.live-log .key{color:#C9B6FF;background:rgba(106,75,224,.18)}

.live-bar{
  flex:none;display:flex;align-items:center;gap:8px;
  margin:0 12px 12px;padding:6px 6px 6px 16px;
  background:rgba(8,14,28,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(140,200,255,.16);border-radius:var(--r-pill);
}
.live-bar input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;
  font-family:var(--mono);font-size:13.5px;color:var(--live-ink);padding:7px 0;
}
.live-bar input::placeholder{color:rgba(226,244,255,.34)}
.live-btn{
  flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(140,200,255,.16);color:var(--live-ink);opacity:.9;
  display:grid;place-items:center;transition:background .2s,border-color .2s;
}
.live-btn:hover{border-color:rgba(140,200,255,.4)}
.live-btn.on{background:rgba(33,133,250,.26);border-color:rgba(140,200,255,.46)}
.live-btn svg{width:17px;height:17px;stroke-width:1.5}

/* background chip */
.live-chip{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(84px + var(--safe-b));z-index:34;
  display:flex;align-items:center;gap:9px;
  padding:7px 8px 7px 12px;border-radius:var(--r-pill);
  background:var(--field);color:var(--live-ink);
  border:1px solid rgba(140,200,255,.22);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  box-shadow:0 8px 24px rgba(4,12,34,.3);
  animation:rise .2s ease both;
}
.live-chip-x{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(140,200,255,.14);font-size:13px;line-height:1;
}

/* ---- sheets ---- */
.sheet{
  position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.32);
  display:grid;place-items:end center;animation:fade .18s ease;
}
.sheet-card{
  width:100%;max-width:560px;max-height:86vh;background:var(--bg);
  border-radius:20px 20px 0 0;display:flex;flex-direction:column;
  padding-bottom:var(--safe-b);animation:sheet .24s cubic-bezier(.32,.72,0,1) both;
}
.paywall-frame{
  width:100%;background:linear-gradient(135deg,#050505,#111111 58%,#0f0f0f 100%);
  color:#fff;border-radius:18px;border:1px solid rgba(212,175,55,.62);
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 14px 40px rgba(0,0,0,.36);
  padding:18px;
}
.paywall-card{
  border:1px solid rgba(212,175,55,.42);border-radius:16px;
  padding:18px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.04));
}
.paywall-kicker{font-size:11px;letter-spacing:.24em;color:#D4AF37;font-weight:700;margin-bottom:8px}
.paywall-card h3{margin:0 0 8px;font-size:24px;line-height:1.15;color:#fff}
.paywall-card p{margin:0 0 14px;color:#f2f2f2;line-height:1.55}
.paywall-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.paywall-note{font-size:12.5px;color:#d5d5d5}
@keyframes sheet{from{transform:translateY(14px);opacity:0}}
.sheet-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 10px 10px 18px;border-bottom:1px solid var(--line);
}
.sheet-top h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-0.01em}
.sheet-body{flex:1;overflow-y:auto;padding:12px 18px}
.sheet-foot:not(:empty){padding:10px 18px 16px;border-top:1px solid var(--line)}

.field{width:100%;border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:10px 12px;font-size:15px;background:var(--bg);resize:vertical}
.field:focus{outline:none;border-color:var(--beam)}
.field + .field{margin-top:8px}
.field-hint{margin:6px 0 14px;font-size:12.5px;color:var(--ink-3);line-height:1.5}

.ops-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:12px}
.ops-card{border:1px solid var(--line-2);border-radius:var(--r-md);padding:12px;background:var(--bubble)}
.ops-title{font-size:14px;font-weight:600;margin-bottom:4px}
.ops-pill-row{display:flex;flex-wrap:wrap;gap:8px}
.ops-pill{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink-2)}

.capability-hub{display:flex;flex-direction:column;gap:12px}
.capability-hero{
  border:1px solid rgba(212,175,55,.42);border-radius:16px;padding:14px;
  background:linear-gradient(135deg,#090909,#151515 56%,#111111 100%);
  color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.24);
}
.capability-hero h3{margin:0 0 8px;font-size:22px;line-height:1.14}
.capability-hero p{margin:0;color:#f0f0f0;line-height:1.55}
.capability-kicker{font-size:11px;letter-spacing:.22em;color:#d4af37;font-weight:700;margin-bottom:8px}
.capability-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.capability-card{border:1px solid var(--line-2);border-radius:var(--r-md);padding:12px;background:linear-gradient(180deg,#fff,#f7f7f7)}
.capability-matrix{display:flex;flex-wrap:wrap;gap:8px}
.capability-chip{font-size:12px;padding:5px 9px;border-radius:999px;border:1px solid rgba(33,133,250,.34);background:rgba(33,133,250,.06);color:var(--beam)}

.btn{border-radius:var(--r-pill);padding:10px 18px;font-size:14.5px;font-weight:500;background:var(--ink);color:#fff}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.btn:active{transform:scale(.98)}

/* settings */
.set-group{margin-bottom:20px}
.set-group h3{
  margin:0 0 8px;font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.theme-block{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.theme-column h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}
.theme-card{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:1px solid var(--line-2);border-radius:var(--r-md);padding:10px 12px;background:var(--bg);margin-bottom:8px}
.theme-card:hover{background:var(--hover)}
.theme-name{font-size:14px;font-weight:600}
.theme-desc{font-size:12px;color:var(--ink-3)}
.set-row{
  display:flex;align-items:baseline;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;
}
.set-row:last-child{border-bottom:0}
.set-row dt{flex:0 0 40%;color:var(--ink-2);margin:0}
.set-row dd{flex:1;margin:0;word-break:break-word}
.set-row dd.mono{font-family:var(--mono);font-size:12.5px}
.set-note{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.55}
.dot-state{display:inline-flex;align-items:center;gap:7px}
.dot-state i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.dot-state.up i{background:#19c37d}
.dot-state.down i{background:#e5484d}

.artifact{border:1px solid var(--line-2);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden}
.artifact-head{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2);
}
.artifact-head .lang{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;flex:1}
.artifact pre{
  margin:0;padding:12px;overflow-x:auto;background:var(--bubble);
  font-family:var(--mono);font-size:12.5px;line-height:1.55;
}

/* ============================ Desktop ======================= */
@media (min-width:900px){
  .panel{transform:none;box-shadow:none;border-right:1px solid var(--line-2)}
  .scrim{display:none}
  .app{margin-left:var(--panel-w)}
  #panel-open,#panel-close{display:none}
  .wordmark{text-align:left;padding-left:6px}
  .welcome h1{font-size:30px}
  .starters{flex-direction:row;max-width:640px;flex-wrap:wrap;justify-content:center}
  .starter{flex:1 1 190px}
  .live{left:auto;right:22px;width:392px;bottom:calc(90px + var(--safe-b))}
  .live[data-mode="tall"]{height:70vh}
  .live[data-mode="full"]{left:0;right:0;width:auto}
  .sheet{place-items:center}
  .sheet-card{border-radius:20px;max-height:78vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}