:root{
  --bg:#0d0c14; --surface:#171520; --surface2:#211e2d; --line:#2c2839;
  --ink:#f3efe7; --muted:#a29db2; --on-gel:#0d0c14;
  --bar:84px; --gap:12px; --pad:16px;
  --display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-theme="light"]{
  --bg:#edf0f6; --surface:#ffffff; --surface2:#e4e8f1; --line:#cfd5e2;
  --ink:#15131c; --muted:#5a566a; --on-gel:#0d0c14;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --bg:#0d0c14;
  }
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font:500 17px/1.45 var(--body);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,a.btn{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid #8bc0ff;outline-offset:2px}
.muted{color:var(--muted)}
.app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}

/* ---- stage ---- */
.stage{flex:1;min-height:0;display:block;position:relative}
.col-main{height:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y proximity;padding:0 var(--pad) calc(var(--bar) + 20px);-webkit-overflow-scrolling:touch}
.col-fleet{display:none}
body[data-view="fleet"] .col-main{display:none}
body[data-view="fleet"] .col-fleet{display:flex}
.col-fleet{height:100%;flex-direction:column;padding:var(--pad) var(--pad) calc(var(--bar) + 16px);gap:8px;min-width:0}

/* ---- hero ---- */
.hero{padding:calc(env(safe-area-inset-top) + 20px) 0 14px;scroll-snap-align:start}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
h1{font:800 clamp(34px,8.4vw,60px)/0.98 var(--display);letter-spacing:-0.025em;font-variation-settings:"opsz" 96}
.hero-sub{margin:10px 0 14px;color:var(--muted);max-width:34ch}
.icon-btn{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:var(--surface);flex:none;display:grid;place-items:center}
.sun{width:22px;height:22px;border-radius:50%;background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border:2px solid var(--ink)}
.numbers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.numbers div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 8px 7px;min-width:0}
.numbers dd{font:800 clamp(22px,5.6vw,34px)/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.numbers dt{order:2;font-size:12px;line-height:1.15;color:var(--muted);margin-top:3px;overflow-wrap:normal;word-break:normal}
.numbers div{display:flex;flex-direction:column}

/* ---- tiles: one per half-screen, a cue per tile ---- */
.tiles{list-style:none;padding:0;display:grid;grid-template-columns:1fr;gap:var(--gap)}
.tile{--gel:#35d0e0;position:relative;overflow:hidden;scroll-snap-align:start;scroll-margin-top:8px;
  min-height:calc((100dvh - var(--bar) - var(--gap) * 3) / 2);
  display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:18px 18px 16px;
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb,var(--gel) 26%,transparent), transparent 62%),
    var(--surface);
  border:1px solid var(--line);border-radius:26px}
.tile::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:6px;border-radius:0 6px 6px 0;background:var(--gel)}
.tile h2{font:800 clamp(28px,6.6vw,40px)/1 var(--display);letter-spacing:-0.02em;padding-left:6px}
.tile .hook{font-size:clamp(17px,3.6vw,20px);padding-left:6px;max-width:30ch;align-self:start}
.tile .badge{display:inline-block;margin:8px 0 0 6px;font-size:14px;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:4px 9px;max-width:34ch}
.tile-act{display:flex;gap:10px;align-items:stretch}
.run-btn{flex:1;min-height:64px;border:0;border-radius:18px;background:var(--gel);color:var(--on-gel);font:800 24px/1 var(--display);letter-spacing:-0.01em;transition:transform .12s}
.run-btn:active{transform:scale(.97)}
.qr-btn{flex:none;width:64px;min-height:64px;padding:5px;border:0;border-radius:14px;background:#fff;display:grid;place-items:center}
.qr-btn svg,.qr-btn img{width:100%;height:100%;display:block}
.say{flex:none;width:64px;min-height:64px;border-radius:18px;border:1px solid var(--line);background:var(--surface2);display:grid;place-items:center}

.foot{padding:26px 0 8px;display:grid;gap:2px;font-weight:600}
.foot .muted{font-weight:500;font-size:15px}

@media (max-height:899px){.tile .blurb{display:none}}
.tile .blurb{padding-left:6px;margin-top:10px;color:var(--muted);font-size:17px;max-width:44ch;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* ---- bottom bar (thumb reach) ---- */
.bar{position:fixed;left:0;right:0;bottom:0;height:calc(var(--bar) + env(safe-area-inset-bottom));padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;z-index:30;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.bar button{min-height:56px;border:1px solid var(--line);border-radius:20px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 15px/1 var(--body)}
.bar button[aria-pressed="true"],.bar button.live{background:#ff4f8b;color:#0d0c14;border-color:transparent}
.bar button:active{transform:scale(.97)}
.ic{width:24px;height:24px;display:block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic-mic{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a4 4 0 0 0 4-4V6a4 4 0 0 0-8 0v5a4 4 0 0 0 4 4zm6-4a6 6 0 0 1-12 0H4a8 8 0 0 0 7 7.9V22h2v-3.1A8 8 0 0 0 20 11z'/%3E%3C/svg%3E")}
.ic-spk{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E")}
.ic-fleet{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a3 3 0 1 0-3-3 3 3 0 0 0 3 3zM5 22a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm14 0a3 3 0 1 0-3-3 3 3 0 0 0 3 3zM11 7.5 5.6 16.2l1.7 1L12 9.8l4.7 7.4 1.7-1L13 7.5z'/%3E%3C/svg%3E")}
.ic-qr{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zm2 2v4h4V5zm8-2h8v8h-8zm2 2v4h4V5zM3 13h8v8H3zm2 2v4h4v-4zm8-2h3v3h-3zm5 0h3v3h-3zm-5 5h3v3h-3zm5 0h3v3h-3z'/%3E%3C/svg%3E")}

/* ---- run overlay ---- */
.run{position:fixed;inset:0 0 calc(var(--bar) + env(safe-area-inset-bottom)) 0;z-index:20;background:var(--bg);display:flex;flex-direction:column}
.run[hidden],.sheet-wrap[hidden]{display:none}
.run-bar{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;border-bottom:1px solid var(--line)}
.run-bar strong{flex:1;font:800 20px/1.1 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.run-bar .small,.run-bar .back{min-height:56px;min-width:56px;padding:0 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);display:inline-grid;place-items:center;text-decoration:none;font-weight:600}
.run-body{flex:1;min-height:0;position:relative;overflow:auto}
.run-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.panel{padding:18px var(--pad) 24px;display:grid;gap:14px;max-width:760px}
.panel h3{font:800 28px/1.1 var(--display)}
.panel audio{width:100%;min-height:56px}
.stories{list-style:none;padding:0;display:grid;gap:10px}
.stories li{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.stories b{display:block;font:700 19px/1.2 var(--display);margin-bottom:4px}
.stories span{font-size:15.5px;color:var(--muted)}
.stories .cat{color:var(--ink);font-weight:600;font-size:14px}
.cta,a.cta{color:var(--bg)!important;min-height:56px;border:0;border-radius:16px;background:var(--ink);font:700 18px var(--display);padding:0 22px}

/* ---- sheet (QR / About) ---- */
.sheet-wrap{position:fixed;inset:0;z-index:40;background:rgba(5,4,10,.66);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:min(560px,100%);max-height:92dvh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:28px 28px 0 0;padding:20px var(--pad) calc(24px + env(safe-area-inset-bottom));position:relative}
.sheet-x{position:absolute;right:12px;top:12px;min-height:56px;padding:0 18px;border-radius:16px;border:1px solid var(--line);background:var(--surface2);font-weight:600}
.sheet h3{font:800 30px/1.05 var(--display);padding-right:96px}
.bigqr{background:#fff;border-radius:20px;padding:14px;width:min(78vw,340px);margin:16px auto 8px}
.bigqr svg{display:block;width:100%;height:auto}
.url{display:block;text-align:center;word-break:break-all;color:var(--ink);font-weight:600}
.about-lines{margin:12px 0 16px;display:grid;gap:4px;font:600 20px/1.25 var(--display)}
.about-qrs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.about-qrs figure{display:grid;gap:6px;text-align:center;font-size:15px}
.about-qrs .bigqr{width:100%;margin:0;padding:10px}

/* ---- fleet graph ---- */
.fleet-head h2{font:800 28px/1 var(--display)}
.graph{flex:1;min-height:0;position:relative;border:1px solid var(--line);border-radius:22px;background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,#8b7bff 14%,transparent),transparent 70%),var(--surface);overflow:hidden;touch-action:none}
.graph svg{width:100%;height:100%;display:block}
.graph text{font:600 13px var(--body);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px;pointer-events:none}
.graph .agent-label{font:800 17px var(--display)}
.legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:baseline}
.fleet-stamp{font-size:14px}
.toast{position:fixed;left:50%;bottom:calc(var(--bar) + 18px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:60;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:16px;font-weight:600;max-width:calc(100vw - 32px);text-align:center;transition:.2s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.listening-ring{box-shadow:0 0 0 4px rgba(255,79,139,.4)}

/* ---- unfolded: tablet, tiles left, fleet persistent right ---- */
@media (min-width:960px), (min-width:700px) and (orientation:landscape){
  :root{--bar:80px;--pad:22px}
  .stage{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr)}
  .col-main{scroll-snap-type:none;padding-bottom:calc(var(--bar) + 20px)}
  .col-fleet{display:flex;border-left:1px solid var(--line)}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile{min-height:236px;aspect-ratio:auto;padding:16px 14px 14px;border-radius:22px}
  .tile h2{font-size:clamp(22px,2.2vw,30px)}
  .tile .hook{font-size:16px}
  .tile .blurb{display:none}
  .run-btn{font-size:21px}
  .qr-btn,.say{width:56px;min-height:56px}
  .run-btn{min-height:56px}
  .numbers dd{font-size:clamp(22px,2.4vw,34px)}
  h1{font-size:clamp(34px,4vw,56px)}
  /* the fleet button opens the graph full width */
  body[data-view="fleet"] .stage{grid-template-columns:1fr}
  body[data-view="fleet"] .col-fleet{border-left:0}
  .run{right:0}
  body:not([data-view="fleet"]) .run{left:0}
}
@media (min-width:1500px){ .tiles{grid-template-columns:repeat(3,minmax(0,1fr))} .tile{min-height:260px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.foot a{color:var(--ink)}