/* Arcade — structure demo · Studio Subtract
   Cream ground, ink, warm grey, one accent (orange = action / live). */

@font-face{font-family:"Switzer"; src:url("fonts/Switzer-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:"Switzer"; src:url("fonts/Switzer-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:"Switzer"; src:url("fonts/Switzer-Semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:"Switzer"; src:url("fonts/Switzer-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:"Fragment Mono"; src:url("fonts/FragmentMono-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap;}

:root{
  --paper:#f4f1ec;
  --card:#fdfcfa;
  --ink:#141414;
  --grey:#8a857c;
  --line:#e2ddd3;
  --line-strong:#c9c3b6;
  --orange:#e8501f;
  --sans:"Switzer","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Fragment Mono",Menlo,Consolas,monospace;
  --dur:250ms;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --slide-dur:560ms;
  --dock-h:52px;
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.55; font-weight:500;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase;}
button{font-family:var(--sans); color:inherit; cursor:pointer;}
input,textarea,select{font-family:var(--sans); color:var(--ink);}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

/* ---------- chrome ---------- */
.top{
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 28px;
  background:linear-gradient(var(--paper) 62%, rgba(244,241,236,0));
}
.wordmark{font-weight:700; font-size:15px; letter-spacing:.02em; display:flex; align-items:baseline; gap:12px;}
.wm-note{font-size:9px; color:var(--grey);}
.top-note{font-size:9px; color:var(--grey);}

/* ---------- sliding stage ---------- */
.stage{
  display:flex; height:100vh; height:100dvh; width:600vw;
  transform:translateX(0);
  transition:transform var(--slide-dur) var(--ease);
  will-change:transform;
}
.panel{
  width:100vw; height:100vh; height:100dvh; flex:none;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:120px 28px 120px;
}
.inner{max-width:1060px; margin:0 auto;}
.inner--narrow{max-width:840px;}

/* ---------- type ---------- */
.panel-head{margin-bottom:30px; display:flex; flex-direction:column; align-items:flex-start; gap:13px;}
.eyebrow{font-size:10px; color:var(--orange);}
h1{font-size:clamp(29px,4.4vw,44px); font-weight:600; letter-spacing:-.025em; line-height:1.04; text-wrap:balance;}
.sub{color:var(--grey); font-size:15px; max-width:54ch;}
.group-label{font-size:9.5px; color:var(--grey); margin-bottom:12px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.group-label .cap{color:var(--line-strong);}
.footnote{font-size:9px; color:var(--grey); margin-top:16px; letter-spacing:.08em;}
.backlink{background:none; border:0; font-size:10px; color:var(--grey); padding:0;}
.backlink:hover{color:var(--ink);}

/* ---------- tabs (Transitions.dev sliding pill) ---------- */
.t-tabs{position:relative; display:inline-flex; align-items:center; gap:3px; padding:3px; border-radius:48px;}
.t-tab{position:relative; appearance:none; border:0; background:transparent; border-radius:48px; z-index:1; white-space:nowrap; transition:color var(--dur) var(--ease);}
.t-tabs-pill{
  position:absolute; top:3px; left:0; width:0; border-radius:48px; transform:translateX(0);
  transition:transform var(--dur) var(--ease), width var(--dur) var(--ease);
  will-change:transform,width; z-index:0; pointer-events:none;
}

.t-tabs--mini{background:#e9e4da; margin-top:4px; max-width:100%; overflow-x:auto; scrollbar-width:none;}
.t-tabs--mini::-webkit-scrollbar{display:none;}
.t-tabs--mini .t-tab{height:32px; padding:4px 15px; font-size:12.5px; font-weight:600; color:rgba(20,20,20,.55);}
.t-tabs--mini .t-tab[aria-selected="true"],
.t-tabs--mini .t-tab:not([aria-selected="true"]):hover{color:var(--ink);}
.t-tabs--mini .t-tabs-pill{height:32px; background:var(--card); box-shadow:0 1px 2px rgba(20,20,20,.08);}

.t-tabs--mode{background:#e9e4da; max-width:100%; overflow-x:auto; scrollbar-width:none;}
.t-tabs--mode::-webkit-scrollbar{display:none;}
.t-tabs--mode .t-tab{height:28px; padding:4px 14px; font-size:11.5px; font-weight:600; color:rgba(20,20,20,.55);}
.t-tabs--mode .t-tab[aria-pressed="true"],
.t-tabs--mode .t-tab:not([aria-pressed="true"]):hover{color:var(--ink);}
.t-tabs--mode .t-tabs-pill{height:28px; background:var(--card); box-shadow:0 1px 2px rgba(20,20,20,.08);}

.dock{
  position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%); z-index:30; max-width:calc(100vw - 20px);
  transition:opacity var(--dur) var(--ease);
}
.dock.is-hidden{opacity:0; pointer-events:none; visibility:hidden;}
.t-tabs--dock{
  background:var(--ink); height:var(--dock-h);
  box-shadow:0 14px 40px rgba(20,20,20,.28);
  max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.t-tabs--dock::-webkit-scrollbar{display:none;}
.t-tabs--dock .t-tab{
  height:calc(var(--dock-h) - 6px); padding:4px 18px;
  display:inline-flex; align-items:center;
  font-size:13px; font-weight:600; color:rgba(244,241,236,.62);
}
.t-tabs--dock .t-tab[aria-selected="true"]{color:var(--ink);}
.t-tabs--dock .t-tab:not([aria-selected="true"]):hover{color:var(--paper);}
.t-tabs--dock .t-tab:focus-visible{outline-color:var(--paper);}
.t-tabs--dock .t-tabs-pill{height:calc(var(--dock-h) - 6px); background:var(--paper);}

/* ---------- shared components ---------- */
.btn{
  appearance:none; border:1px solid var(--line-strong); background:transparent;
  padding:9px 18px; border-radius:48px; font-size:12.5px; font-weight:600;
  text-decoration:none; color:inherit; display:inline-block;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover{border-color:var(--ink);}
.btn--primary{background:var(--orange); border-color:var(--orange); color:#fff; margin-left:auto;}
.btn--primary:hover{background:#d4470f; border-color:#d4470f;}
.btn--primary[disabled]{opacity:.55; cursor:default;}
.btn--small{padding:6px 14px; font-size:11.5px;}

.pill{font-size:8.5px; border:1px solid var(--line-strong); border-radius:48px; padding:4px 11px; color:var(--grey); white-space:nowrap; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase;}
.pill--live{border-color:var(--orange); color:var(--orange);}

.card{background:var(--card); border:1px solid var(--line); border-radius:14px;}

.rows{border-top:1px solid var(--line);}
.row{
  display:flex; align-items:center; gap:16px;
  padding:15px 4px; border-bottom:1px solid var(--line);
  color:inherit; text-decoration:none; text-align:left; width:100%;
  background:none; border-left:0; border-right:0; border-top:0;
  transition:background var(--dur) var(--ease);
}
button.row{border-bottom:1px solid var(--line);}
.row:hover{background:rgba(253,252,250,.9);}
.row-name{font-weight:600; font-size:15px; flex:1; min-width:0;}
.row-meta{font-size:9px; color:var(--grey); width:210px; flex:none;}
.row-act{font-size:12px; color:var(--grey); margin-left:auto; flex:none; background:none; border:0; padding:0; text-decoration:none;}
.row:hover .row-act, .row-act:hover{color:var(--ink);}
.row-act--strong{color:var(--orange); font-weight:600;}
.list-tools{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.count{font-size:9.5px; color:var(--grey);}

.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px;}
.chip{
  font-size:8px; color:var(--grey); border:1px solid var(--line); background:transparent;
  border-radius:48px; padding:5px 12px; letter-spacing:.08em;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip.is-on{border-color:var(--ink); color:var(--ink);}
.chip--ghost{border-style:dashed;}
button.chip:hover{border-color:var(--ink); color:var(--ink);}

.search{
  width:100%; border:1px solid var(--line); background:var(--card); border-radius:48px;
  padding:10px 18px; font-size:16px; color:var(--ink);
}
.search::placeholder{color:var(--grey);}
.search-line{display:flex; gap:10px; align-items:center; margin-bottom:4px;}
.search-line .search{flex:1;}
.select{
  width:100%; border:1px solid var(--line); background:var(--card); border-radius:12px;
  padding:10px 14px; font-size:16px; appearance:auto;
}
.prompt{
  width:100%; border:1px solid var(--line); background:var(--card); border-radius:12px;
  padding:12px 14px; font-size:16px; resize:vertical; min-height:74px;
}
.prompt::placeholder{color:var(--grey);}
.dropzone{
  border:1px dashed var(--line-strong); border-radius:12px; padding:22px;
  text-align:center; font-size:9px; color:var(--grey); margin-bottom:14px;
}

/* thumbs — flat, no photography */
.thumb{background:var(--line); border-radius:8px;}
.thumb--row{width:56px; height:36px; flex:none;}
.th-night{background:linear-gradient(135deg,#2b211c,#c96a3a);}
.th-evergreen{background:linear-gradient(135deg,#22392a,#7fa06a);}
.th-hours{background:linear-gradient(135deg,#151b2e,#31437a);}
.th-station{background:linear-gradient(135deg,#3a3128,#a08d6a);}
.th-courier{background:linear-gradient(135deg,#20242e,#5d6b8a);}
.th-case{background:linear-gradient(135deg,#6a6f78,#c7ccd4);}
.th-bottle{background:linear-gradient(135deg,#8a6a2e,#e8b84a);}
.th-face1{background:linear-gradient(135deg,#2e2a3a,#8a7a9e);}
.th-face2{background:linear-gradient(135deg,#3a2a2a,#b08a7a);}
.th-face3{background:linear-gradient(135deg,#2a3a36,#7aa89a);}
.th-dune{background:linear-gradient(135deg,#7a5a34,#d8b07a);}

/* ---------- create: director lane ---------- */
.workcols{display:flex; gap:22px; align-items:flex-start;}
.convo{width:320px; flex:none; display:flex; flex-direction:column; overflow:hidden;}
.convo-head{padding:15px 18px 13px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:2px;}
.role-tag{font-size:8.5px; color:var(--orange);}
.convo-head strong{font-size:16px; font-weight:600;}
.convo-sub{font-size:11.5px; color:var(--grey);}
.msgs{padding:16px 18px; display:flex; flex-direction:column; gap:12px; max-height:430px; overflow-y:auto;}
.msg{font-size:12.5px; line-height:1.5; color:#3a3833;}
.msg .who{display:block; font-size:8px; color:var(--grey); margin-bottom:4px;}
.msg--user{align-self:flex-end; background:#efeae1; border-radius:10px; padding:9px 12px; max-width:88%;}
.msg--outcome{border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--grey);}
.msg--typing{color:var(--grey); font-size:11px;}
.convo-input{border-top:1px solid var(--line); padding:11px 14px; display:flex; align-items:center; gap:10px;}
.chat-input{flex:1; border:0; background:transparent; font-size:16px; min-width:0;}
.chat-input:focus{outline:none;}
.chat-input::placeholder{color:var(--grey);}

/* plan card (in chat) */
.plan-card{border:1px solid var(--ink); border-radius:12px; padding:13px 14px; display:flex; flex-direction:column; gap:9px;}
.plan-card .plan-eyebrow{font-size:8px; color:var(--orange);}
.plan-card .plan-stats{display:flex; gap:12px; font-size:9px; color:var(--grey); font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; flex-wrap:wrap;}
.plan-card .plan-models{font-size:10.5px; color:var(--grey);}
.plan-card .plan-actions{display:flex; gap:8px; align-items:center;}
.plan-card .plan-progress{height:5px; background:var(--line); border-radius:48px; overflow:hidden;}
.plan-card .plan-progress i{display:block; height:100%; width:0; background:var(--orange); border-radius:48px; transition:width 600ms var(--ease);}
.plan-card .plan-note{font-size:8px; color:var(--grey); font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase;}

.workmain{flex:1; min-width:0;}
.workstack{display:flex; flex-direction:column; gap:26px;}
.group{display:flex; flex-direction:column;}

.elems{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.elem{
  appearance:none; background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; text-align:left; display:flex; flex-direction:column; gap:2px;
  transition:border-color var(--dur) var(--ease);
}
.elem b{font-size:13px; font-weight:600;}
.elem span{font-size:8px; color:var(--grey);}
.elem.is-on{border-color:var(--ink);}
.elem--add{background:transparent; border-style:dashed;}
.elem--add b{color:var(--grey); font-weight:500;}
.elem:hover{border-color:var(--ink);}

.crew{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.crew-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 13px; display:flex; flex-direction:column; gap:1px;}
.crew-card b{font-size:12.5px; font-weight:600;}
.crew-card span{font-size:11px; color:var(--grey);}
.crew-card i{font-style:normal; font-size:7.5px; color:var(--grey); margin-top:5px;}
.crew-card i.is-hot{color:var(--orange);}
.crew-card--lead{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.crew-card--lead span{color:rgba(244,241,236,.6);}
.crew-card--lead i{color:var(--paper);}

.results{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.result{background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.result .thumb{height:88px; border-radius:0;}
.result .thumb.is-rendering{background:linear-gradient(100deg,var(--line) 40%,#efe9dd 50%,var(--line) 60%); background-size:200% 100%; animation:shimmer 1.2s linear infinite;}
@keyframes shimmer{to{background-position:-200% 0;}}
.result-meta{padding:10px 13px; display:flex; flex-direction:column; gap:2px;}
.result-meta b{font-size:12.5px; font-weight:600;}
.result-meta span{font-size:7.5px; color:var(--grey); cursor:pointer;}
.result:hover .result-meta span{color:var(--ink);}

.pipeline{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:18px;
  font-size:9px; color:var(--grey);
}
.pipeline i{font-style:normal; color:var(--line-strong);}
.pipe-note{margin-left:auto; font-size:8px; letter-spacing:.08em;}

/* generate lane */
.gen-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.intent-row{display:flex; gap:8px;}
.intent{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; text-align:left; display:flex; flex-direction:column; gap:2px;
  transition:border-color var(--dur) var(--ease);
}
.intent b{font-size:13px; font-weight:600;}
.intent span{font-size:11px; color:var(--grey);}
.intent.is-on{border-color:var(--ink);}

/* prompts lane */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.cards--prompts{grid-template-columns:repeat(3,1fr);}
.cards--pages{grid-template-columns:repeat(3,1fr);}
.lib-card{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color var(--dur) var(--ease);}
.lib-card:hover{border-color:var(--line-strong);}
.lib-card .thumb{height:110px; border-radius:0; display:flex; align-items:center; justify-content:center;}
.lib-card .thumb span{font-size:22px; color:var(--grey); font-weight:400;}
.lib-meta{padding:11px 14px; display:flex; flex-direction:column; gap:2px;}
.lib-meta span{font-size:7.5px; color:var(--grey);}
.lib-meta b{font-size:13.5px; font-weight:600;}
.lib-meta .ok{color:var(--orange);}
.lib-meta .dim{color:var(--line-strong);}
.lib-card--add{background:transparent; border-style:dashed;}
.lib-card--add .thumb{background:transparent;}
.linkbtn{background:none; border:0; padding:0; font-size:7.5px; color:var(--grey); text-align:left; letter-spacing:.08em; text-transform:uppercase;}
.linkbtn:hover{color:var(--ink);}

.prompt-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 15px;
  display:flex; flex-direction:column; gap:6px; text-align:left;
  transition:border-color var(--dur) var(--ease);
}
.prompt-card:hover{border-color:var(--ink);}
.prompt-card .pnum{font-size:9px; color:var(--grey); display:flex; justify-content:space-between;}
.prompt-card b{font-size:14px; font-weight:600;}
.prompt-card p{font-size:11.5px; color:var(--grey); line-height:1.45;}
.prompt-card .pcrew{font-size:7.5px; color:var(--orange); letter-spacing:.1em; text-transform:uppercase; font-family:var(--mono);}

/* projects binder */
.binder{display:flex; gap:26px; align-items:flex-start;}
.binder-rail{width:230px; flex:none;}
.binder-rail .rail-item{
  display:flex; justify-content:space-between; gap:10px; width:100%;
  padding:9px 2px; border:0; border-bottom:1px solid var(--line); background:none;
  font-size:12.5px; font-weight:600; text-align:left;
}
.binder-rail .rail-item span{color:var(--grey); font-size:9px;}
.binder-main{flex:1; min-width:0;}
.page-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 13px; display:flex; flex-direction:column; gap:3px;}
.page-card span{font-size:7.5px; color:var(--grey); font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase;}
.page-card b{font-size:12.5px; font-weight:600;}
.binder-actions{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap;}

/* channel */
.channel-hero{border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:16px; background:var(--card);}
.channel-banner{height:110px;}
.channel-id{padding:14px 18px; display:flex; flex-direction:column; gap:2px;}
.channel-id span.mono{font-size:8px; color:var(--orange);}
.channel-id b{font-size:18px; font-weight:600;}
.channel-id .dim{font-size:12px; color:var(--grey);}

/* settings */
.set-group{margin-bottom:26px;}
.fields{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.fields--single{grid-template-columns:1fr; margin-top:10px;}
.field{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:3px;}
.field--row{flex-direction:row; align-items:center; justify-content:space-between; gap:14px;}
.field--row > div{display:flex; flex-direction:column; gap:3px;}
.field span{font-size:7.5px; color:var(--grey);}
.field b{font-size:13.5px; font-weight:600;}
.field b.is-ph{color:var(--grey); font-weight:500;}
.meter{height:5px; background:var(--line); border-radius:48px; margin-top:8px; overflow:hidden;}
.meter i{display:block; height:100%; background:var(--orange); border-radius:48px;}
.switch{
  width:44px; height:26px; border-radius:48px; border:1px solid var(--line-strong);
  background:var(--line); position:relative; flex:none;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.switch i{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--card); transition:transform var(--dur) var(--ease);
}
.switch[aria-checked="true"]{background:var(--orange); border-color:var(--orange);}
.switch[aria-checked="true"] i{transform:translateX(18px);}

/* watch mode */
.watch{
  position:fixed; inset:0; z-index:15; background:var(--paper);
  overflow-y:auto; padding:92px 28px 60px;
}
.watch .inner{max-width:1060px; margin:0 auto;}
.watch-card{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; text-align:left; padding:0; transition:border-color var(--dur) var(--ease);}
.watch-card:hover{border-color:var(--ink);}
.watch-card .thumb{height:120px; border-radius:0; position:relative;}
.watch-card .badge{
  position:absolute; top:8px; left:8px; font-size:7.5px; letter-spacing:.12em;
  background:rgba(20,20,20,.72); color:var(--paper); border-radius:48px; padding:3px 9px;
  font-family:var(--mono); text-transform:uppercase;
}

/* ---------- gooey menu (mobile) — Transitions.dev gooey plus, pills with full words ---------- */
.gooey{
  --goo-out:560ms; --goo-in:380ms;
  --goo-ease-out:cubic-bezier(0.31,1.4,0.5,1);
  --goo-ease-in:cubic-bezier(0.5,0,0.7,0.4);
  --goo-stagger:36ms;
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  width:240px; height:486px; z-index:30;
  display:none; pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.gooey.is-hidden{opacity:0; visibility:hidden;}
.gooey.is-hidden .gooey-launcher,
.gooey.is-hidden .gooey-item{pointer-events:none;}
.gooey-goo{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;}
.goo-blob{
  fill:var(--ink); transform:translate(0,0); transform-box:fill-box;
  transition:transform var(--goo-in) var(--goo-ease-in);
  transition-delay:calc((5 - var(--i, 0)) * var(--goo-stagger));
  will-change:transform;
}
.goo-blob--base{transition:none;}
.gooey[data-open="true"] .goo-blob{
  transform:translate(0, var(--fy, 0px));
  transition:transform var(--goo-out) var(--goo-ease-out);
  transition-delay:calc(var(--i, 0) * var(--goo-stagger));
}
.gooey-item{
  position:absolute; left:42px; bottom:8px; width:156px; height:48px;
  border:0; border-radius:48px; background:transparent; color:var(--paper);
  font-size:14px; font-weight:600; text-align:center;
  pointer-events:none; transform:translate(0,0);
  transition:transform var(--goo-in) var(--goo-ease-in),
             opacity 140ms ease, filter 140ms ease;
  transition-delay:calc((5 - var(--i, 0)) * var(--goo-stagger)), 0ms, 0ms;
  will-change:transform;
}
.gooey-item span.now{color:var(--orange);}
.gooey[data-open="true"] .gooey-item{
  pointer-events:auto;
  transform:translate(0, var(--fy, 0px));
  transition:transform var(--goo-out) var(--goo-ease-out);
  transition-delay:calc(var(--i, 0) * var(--goo-stagger));
}
.gooey-item{opacity:0; filter:blur(2px);}
.gooey[data-open="true"] .gooey-item{
  opacity:1; filter:blur(0);
  transition:transform var(--goo-out) var(--goo-ease-out),
             opacity 200ms ease, filter 200ms ease;
  transition-delay:calc(var(--i, 0) * var(--goo-stagger)),
                   calc(var(--i, 0) * var(--goo-stagger) + 120ms),
                   calc(var(--i, 0) * var(--goo-stagger) + 120ms);
}
.gooey-item.is-now{color:var(--orange);}
.gooey-launcher{
  position:absolute; left:42px; bottom:8px; width:156px; height:48px;
  border:0; border-radius:48px; background:transparent; color:var(--paper);
  font-size:14px; font-weight:600; pointer-events:auto;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.gooey-launcher:focus-visible{outline-color:var(--paper);}
.gooey-x{
  display:inline-block; font-size:18px; font-weight:500; line-height:1;
  transform:rotate(0deg); transition:transform 320ms var(--ease);
}
.gooey[data-open="true"] .gooey-x{transform:rotate(45deg);}

/* toast */
.toast{
  position:fixed; left:50%; bottom:calc(var(--dock-h) + 34px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:var(--paper); font-size:9px; letter-spacing:.08em;
  border-radius:48px; padding:9px 18px; opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index:40; max-width:calc(100vw - 32px); text-align:center;
}
.toast.is-on{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .cards{grid-template-columns:repeat(3,1fr);}
  .cards--prompts{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:840px){
  .workcols{flex-direction:column;}
  .convo{width:100%;}
  .msgs{max-height:300px;}
  .elems,.crew{grid-template-columns:repeat(2,1fr);}
  .gen-grid{grid-template-columns:1fr;}
  .binder{flex-direction:column;}
  .binder-rail{width:100%;}
  .fields{grid-template-columns:1fr;}
  .row-meta{width:auto;}
}
@media (max-width:640px){
  .panel{padding:84px 16px calc(76px + env(safe-area-inset-bottom, 0px));}
  .watch{padding:84px 16px 60px;}
  .top{padding:12px 16px;}
  .top-note{display:none;}
  .cards{grid-template-columns:repeat(2,1fr);}
  .cards--pages{grid-template-columns:1fr 1fr;}
  .cards--prompts{grid-template-columns:1fr;}
  .results{grid-template-columns:1fr 1fr;}
  .row{flex-wrap:wrap; row-gap:6px;}
  .row-meta{order:3; width:100%;}
  .panel-head{margin-bottom:22px;}
  .dock{display:none;}
  .gooey{display:block;}
}

@media (prefers-reduced-motion: reduce){
  .stage,.t-tabs-pill,.t-tab,.btn,.row,.elem,.lib-card,.switch i,.toast,.plan-card .plan-progress i,.goo-blob,.gooey-item,.gooey-x{transition:none !important;}
  .result .thumb.is-rendering{animation:none;}
}