:root{--bg:#0f0d24;--bg2:#141231;--card:#1c1a3f;--line:#2f2c5c;--line2:#3d3977;--chip:#262346;--fg:#f3f1ff;--muted:#b9b5d9;--lime:#c7f464;--violet:#7c5cff;--pink:#ff6b9d;--gold:#ffcc33;--cyan:#4ff0e8;--orange:#ff9f43;--display:'Fredoka','Arial Rounded MT Bold',sans-serif;--body:'Nunito','Trebuchet MS',sans-serif}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:700 16px/1.4 var(--body)}
a{color:var(--lime)}
button{font-family:var(--body);font-weight:700;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
input:focus,input:focus-visible{outline:none}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance}
.hidden{display:none!important}

/* top bar */
.top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:14px 32px;border-bottom:1px solid var(--chip);background:var(--bg2)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg);font-family:var(--display);font-size:24px;letter-spacing:1px}
.logo i{width:42px;height:42px;border-radius:14px;background:var(--lime);display:grid;place-items:center}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{padding:10px 18px;border-radius:999px;color:var(--muted);text-decoration:none}
.nav a.on{background:var(--chip);color:var(--fg);box-shadow:inset 0 -3px 0 var(--lime)}
.nav a.own{padding:10px 14px}@media (max-width:1400px){.nav a.own span{display:none}}   /* owner pages: icon only on laptops so the bar never wraps */
.nav a.arc{color:var(--gold)}.nav a.arc.on{background:var(--gold);color:var(--bg);box-shadow:none}
.spacer{flex:1 1 20px}
.pill{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--chip);font-size:15px;white-space:nowrap}
.me{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--violet);display:grid;place-items:center;font-family:var(--display);font-size:20px;flex:none}
.me small{display:block;color:var(--muted);font-size:13px;line-height:1.1}

.wrap{width:100%;max-width:1360px;margin:0 auto;padding-block:32px 60px;padding-inline:32px;display:flex;flex-direction:column;gap:36px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border:0;border-radius:14px;background:var(--lime);color:var(--bg);font:700 18px var(--display);letter-spacing:.5px;text-decoration:none}
.btn.violet{background:var(--violet);color:#fff}
.btn.ghost{background:var(--chip);color:var(--fg);font:700 15px var(--body)}
.btn.outline{background:transparent;border:2px solid var(--line2);color:var(--fg);font:700 15px var(--body)}
.btn.sm{padding:10px 14px}
.btn:disabled{opacity:.5;cursor:wait}

/* hero */
.hero{position:relative;overflow:hidden;border-radius:28px;background:var(--card);border:1px solid var(--line);padding:40px 44px;display:flex;flex-direction:column;gap:24px}
.hero .blob{position:absolute;border-radius:50%;pointer-events:none}
.hero .eyebrow{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--lime)}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.05;max-width:18ch}
.hero p{margin:0;font-size:18px;color:var(--muted);max-width:56ch}
.ideabox{position:relative;display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;background:var(--bg);border:2px solid var(--line2);border-radius:20px;padding:8px 8px 8px 20px}
.ideabox input{flex:1 1 280px;min-width:0;background:transparent;border:0;color:var(--fg);font:700 19px var(--body);padding:12px 0}
.ideabox input::placeholder{color:#6f6a99}
.kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kind{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:14px;border-radius:18px;border:2px solid var(--line);background:var(--bg2);color:var(--fg);text-align:left;min-height:104px}
.kind:hover{border-color:var(--violet)}
.kind i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font:700 18px var(--display);color:var(--bg);font-style:normal}
.kind.on{border-color:var(--lime)}.kind span small{display:block;font-size:13px;color:var(--muted);font-weight:700;margin-top:2px}.kind em{font-style:normal;font-size:12px;color:var(--muted);padding:3px 8px;border-radius:999px;border:1px solid var(--line2)}.kind.soon{opacity:.6}

/* columns */
.cols{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:18px}
.side{flex:1 1 300px;min-width:0;max-width:400px;display:flex;flex-direction:column;gap:18px}
.sechead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.sechead h2{font-size:28px}
.sechead span{color:var(--muted);font-size:15px}
.card{border-radius:22px;background:var(--card);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:12px}
.card h2{font-size:22px}

/* game cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.game{display:flex;flex-direction:column;border-radius:22px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.thumb{height:150px;position:relative;overflow:hidden;background:var(--chip)}
.thumb iframe{width:200%;height:200%;border:0;transform:scale(.5);transform-origin:0 0;pointer-events:none}
.thumb .tag{position:absolute;top:12px;left:12px;padding:5px 12px;border-radius:999px;background:var(--bg);font-size:13px;color:var(--lime)}
.thumb .draft{position:absolute;top:12px;right:12px;padding:5px 12px;border-radius:999px;background:var(--violet);font-size:13px;color:#fff}
.thumb .badge{position:absolute;top:12px;right:12px;padding:5px 12px;border-radius:999px;font-size:13px;background:var(--lime);color:var(--bg)}.thumb .badge.nom{background:var(--violet);color:#fff}.thumb .badge.arc{background:var(--gold);color:var(--bg)}
.game .prog{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.game .prog .xp{flex:1;height:8px}
.game .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.game h3{font-size:21px;font-weight:600;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.game h3 small{font:700 13px var(--body);color:var(--muted);white-space:nowrap}
.stats{display:flex;gap:14px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.stats span{display:flex;align-items:center;gap:5px}
.actions{display:flex;gap:8px}
.actions .btn{flex:1;padding:10px 0;font:700 15px var(--body);border-radius:12px}
.continue{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:16px;border-radius:22px;background:var(--card);border:2px dashed var(--violet);text-decoration:none;color:var(--fg)}
.continue .thumb{width:150px;height:100px;border-radius:14px;flex:none}
.continue .txt{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:4px}
.continue .txt b{font-family:var(--display);font-size:22px;font-weight:600}
.continue .txt small{color:var(--muted);font-size:14px}
.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--violet)}
.empty{padding:36px;border-radius:22px;border:2px dashed var(--line2);text-align:center;color:var(--muted)}

/* side widgets */
.xp{height:14px;border-radius:999px;background:var(--bg);overflow:hidden}.xp i{display:block;height:100%;background:var(--lime);border-radius:999px}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;font-size:12px;color:var(--muted)}
.badges i{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 6px;border-radius:50%;font:700 20px var(--display);color:var(--bg)}
.badges .off i{opacity:.3}
.hot{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--bg2);text-decoration:none;color:var(--fg)}
.hot b{width:26px;font-family:var(--display);font-size:20px;color:var(--lime)}
.hot .sw{width:42px;height:42px;border-radius:12px;flex:none}
.hot .t{flex:1;min-width:0;line-height:1.2}.hot .t span{display:block;font-size:13px;color:var(--muted)}
.hot .t em{display:block;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.react{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.react i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--display);color:var(--bg);flex:none}
.react span{display:inline-block;margin-top:4px;padding:4px 12px;border-radius:999px;background:var(--chip);color:var(--lime);font-size:14px}
.banner{background:var(--pink);color:var(--bg)}.banner .eyebrow{color:var(--bg)}.banner h2{font-size:22px;line-height:1.1}.banner p{margin:0;font-size:15px}

/* builder */
.build{display:flex;flex-direction:column;height:100%;position:relative}
.split{flex:1;display:flex;flex-wrap:wrap;min-height:0}
.chat{flex:1 1 360px;min-width:0;max-width:520px;display:flex;flex-direction:column;border-right:1px solid var(--chip);background:var(--bg2);min-height:60vh}
.chat .head{padding:14px 20px;border-bottom:1px solid var(--chip);display:flex;align-items:center;gap:12px}
.chat .head small{display:block;color:var(--lime);font-size:13px}
.msgs{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.m{max-width:88%;padding:11px 15px;border-radius:18px;font-size:16px;line-height:1.35;white-space:pre-wrap}
.m.me{align-self:flex-end;background:var(--violet);color:#fff;border-bottom-right-radius:4px}
.m.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.built{align-self:flex-start;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:13px;color:var(--lime)}
.typing{align-self:flex-start;display:flex;gap:6px;padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:b 1s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes b{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.compose{padding:12px 20px 18px;border-top:1px solid var(--chip);display:flex;flex-direction:column;gap:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 13px;border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--fg);font-size:14px}
.chip:hover{border-color:var(--lime)}
.say{display:flex;gap:8px;align-items:center;background:var(--bg);border:2px solid var(--line2);border-radius:16px;padding:6px 6px 6px 14px}
.say input{flex:1;min-width:0;background:transparent;border:0;color:var(--fg);font:700 16px var(--body);padding:10px 0}
.say input::placeholder{color:#6f6a99}
.icon{width:44px;height:44px;border-radius:12px;border:0;background:var(--chip);display:grid;place-items:center;flex:none}
.icon.go{background:var(--lime)}
.stage{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:14px;padding:20px 26px 26px}
.stagebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.live{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--lime)}.live i{width:10px;height:10px;border-radius:50%;background:var(--lime)}
.live.busy{color:var(--gold)}.live.busy i{background:var(--gold);animation:b 1s infinite}
.seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.seg button{padding:8px 14px;border-radius:9px;border:0;background:transparent;color:var(--muted);font-size:14px}.seg button.on{background:var(--lime);color:var(--bg)}
.frame{flex:1;min-height:480px;border-radius:22px;border:6px solid var(--line2);background:#000;position:relative;overflow:hidden;display:flex;justify-content:center}
.frame iframe{width:100%;height:100%;border:0;background:#000}
.frame.phone iframe{width:390px;max-width:100%}
.frame .wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(15,13,36,.92);text-align:center;padding:20px}
.frame .wait h2{font-size:30px;color:var(--lime)}.frame .wait p{margin:0;color:var(--muted)}
.spin{width:54px;height:54px;border-radius:50%;border:6px solid var(--chip);border-top-color:var(--lime);animation:s 1s linear infinite}@keyframes s{to{transform:rotate(360deg)}}
.versions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.versions small{color:var(--muted);font-size:13px;margin-right:4px}
.v{width:30px;height:30px;border-radius:50%;border:2px solid var(--line2);background:var(--card);color:var(--muted);font-size:13px}
.v.on{background:var(--lime);border-color:var(--lime);color:var(--bg)}
.foot{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.foot span{display:flex;align-items:center;gap:6px}
.title-edit{font:700 22px var(--display);background:transparent;border:0;color:var(--fg);min-width:0;width:260px;border-bottom:2px dashed transparent}
.title-edit:hover,.title-edit:focus{border-bottom-color:var(--line2);outline:0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:12px 20px;border-radius:14px;background:var(--lime);color:var(--bg);font:700 16px var(--body);box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:9}

/* play page */
.playwrap{max-width:none;display:flex;flex-direction:row;gap:24px;align-items:stretch;height:calc(100vh - 76px);box-sizing:border-box;padding:20px 24px}
.playhead{display:flex;flex-direction:column;gap:4px}
.playhead h1{font-size:clamp(22px,2.2vw,30px);line-height:1.1}
.playframe{flex:1;min-width:0;border-radius:22px;border:6px solid var(--line2);background:#000;overflow:hidden}
.playside{flex:0 0 340px;display:flex;flex-direction:column;gap:14px;overflow:auto;min-height:0}
.playside .card{padding:16px;gap:10px}
.playactions{display:flex;gap:8px;align-items:center}.playactions .btn{flex:1}
@media (max-width:900px){.playwrap{flex-direction:column;height:auto}.playframe{aspect-ratio:4/3;max-height:75vh}.playside{flex:none}}
.playframe iframe{width:100%;height:100%;border:0}
.reactions{display:flex;gap:8px;flex-wrap:wrap}
.share{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 14px;font-size:14px;color:var(--muted)}
.share code{color:var(--fg);font:700 14px var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
@media (max-width:700px){.wrap{padding-inline:16px}.hero{padding:26px 20px}.top{padding:12px 16px}.chat{max-width:none;border-right:0;border-bottom:1px solid var(--chip)}.stage{padding:16px}}

/* build screen */
.frame .wait{background:var(--bg);align-items:center;justify-content:center;padding:24px}
.wait-card{width:100%;max-width:520px;display:flex;flex-direction:column;gap:18px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px;animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.wait-top{display:flex;align-items:center;gap:14px}
.wait-top h2{font-size:30px;color:var(--lime);line-height:1}
.wait-card p{margin:0;font-size:17px;color:var(--fg);line-height:1.4}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--muted);transition:color .3s}
.steps li i{width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);flex:none;display:grid;place-items:center;transition:all .3s}
.steps li.now{color:var(--fg)}.steps li.now i{border-color:var(--gold);border-top-color:transparent;animation:s .9s linear infinite}
.steps li.done{color:var(--fg)}.steps li.done i{background:var(--lime);border-color:var(--lime)}
.steps li.done i::after{content:'';width:6px;height:11px;border:solid var(--bg);border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.steps b{color:var(--lime);font-variant-numeric:tabular-nums}
.bar{height:12px;border-radius:999px;background:var(--bg);overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--lime));border-radius:999px;transition:width .6s ease}
.wait-foot{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.steps li.now i,.wait-card{animation:none}}

/* stop + code panel */
.stagebody{flex:1;display:flex;gap:14px;min-height:0;align-items:stretch}
.stagebody .frame{flex:1 1 0;min-width:0}
.stagebody.with-code .frame{flex:1 1 55%}
.stopped{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);color:var(--muted)}
.codepanel{flex:1 1 45%;min-width:0;display:flex;flex-direction:column;border-radius:22px;border:6px solid var(--line2);background:#0a0818;overflow:hidden;min-height:480px}
.codehead{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--chip);font-size:14px;background:var(--bg2)}
.codehead span{color:var(--muted);flex:1;font-size:13px}
.codepanel pre{flex:1;margin:0;overflow:auto;padding:12px 0;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#d6d3f0;tab-size:2}
.codepanel code{display:block;white-space:pre;min-width:max-content}
.ln{display:inline-block;width:3.2em;padding-right:1em;text-align:right;color:#55507a;user-select:none;border-right:1px solid var(--chip);margin-right:1em;position:sticky;left:0;background:#0a0818}
@media (max-width:1100px){.stagebody{flex-direction:column}.codepanel{min-height:320px}}

/* keep builder to one screen: chat, game and code panel each scroll inside */
@media (min-width:1101px){
  .build{height:100vh}
  .split{height:calc(100vh - 73px);flex-wrap:nowrap;overflow:hidden}
  .chat{min-height:0;height:100%}
  .stage{min-height:0;height:100%}
  .stagebody{min-height:0;flex:1 1 auto}
  .stagebody .frame{min-height:0;height:100%}
  .codepanel{min-height:0;height:100%}
}

/* live code */
.cl{display:block;transition:background .6s}
.cl.hit{background:rgba(199,244,100,.22);transition:none}
.vars{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--chip);background:var(--bg);min-height:40px}
.varhint,.evt{font-size:12px;color:var(--muted)}
.var{display:flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line);font:600 12px ui-monospace,Menlo,monospace;color:var(--muted);transition:border-color .5s}
.var b{color:var(--lime);font-variant-numeric:tabular-nums}
.var.chg{border-color:var(--lime);transition:none}
.evt{padding:6px 12px;border-bottom:1px solid var(--chip);background:var(--bg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* idea cards + mic */
.ideas{align-self:flex-start;display:flex;flex-direction:column;gap:6px;max-width:92%}
.ideas span{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin:4px 0 2px}
.idea{display:flex;align-items:center;gap:8px;text-align:left;padding:10px 14px;border-radius:14px;border:2px solid var(--violet);background:var(--card);color:var(--fg);font-size:15px}
.idea svg{flex:none;stroke:var(--lime)}
.idea:hover{background:var(--violet);color:#fff}
.icon{color:var(--fg)}
.icon.listening{background:var(--pink);color:var(--bg);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,157,.6)}50%{box-shadow:0 0 0 10px rgba(255,107,157,0)}}

/* characters / levels galleries */
.tabs button b{margin-left:4px;color:var(--lime);font-weight:800}
.tabs button.on b{color:var(--bg)}
.gallery{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;align-content:start;padding:4px}
.gallery-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--fg)}
.gallery-empty span{color:var(--muted);font-size:15px;max-width:40ch}
.pcard{display:flex;flex-direction:column;border-radius:18px;background:var(--card);border:2px solid var(--line);overflow:hidden;text-align:left}
.pcard.sel{border-color:var(--lime)}
.pcard.add{align-items:center;justify-content:center;border-style:dashed;color:var(--muted);font:700 17px var(--display);min-height:220px;cursor:pointer}
.pcard.add:hover{color:var(--lime);border-color:var(--lime)}
.pframe{height:200px;background:#000;flex:none}
.pframe iframe{width:100%;height:100%;border:0;pointer-events:none}
.pbody{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
.pbody b{font-family:var(--display);font-size:18px;font-weight:600}
.role{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.role.r-hero{color:var(--lime)}.role.r-enemy,.role.r-boss{color:var(--pink)}
.pbody .btn{margin-top:4px;font:700 14px var(--body);border-radius:10px;padding:9px 12px}
.row2{display:flex;gap:6px}.row2 .btn{flex:1;margin-top:4px}
.scope{display:flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 8px 6px 12px;border-radius:999px;background:var(--violet);color:#fff;font-size:14px}
.scope button{border:0;background:rgba(0,0,0,.25);color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer}
.m.me small{display:block;font-size:11px;opacity:.8;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px}

/* "type here" guidance */
.scope-ask{display:flex;flex-direction:column;gap:10px;align-self:flex-start;max-width:92%}
.point{align-self:flex-start;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--lime);letter-spacing:1px;text-transform:uppercase}
.point span{display:inline-block;animation:bounce .9s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.say.glow{border-color:var(--lime);box-shadow:0 0 0 4px rgba(199,244,100,.25);animation:glow 1.4s infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 4px rgba(199,244,100,.25)}50%{box-shadow:0 0 0 10px rgba(199,244,100,0)}}
@media (prefers-reduced-motion:reduce){.point span,.say.glow{animation:none}}

/* undo, before/after, explain, art */
.builtrow{display:flex;gap:8px;align-items:center;align-self:flex-start;flex-wrap:wrap}
.undo{padding:7px 12px;border-radius:12px;border:1px solid var(--line2);background:transparent;color:var(--muted);font-size:13px;cursor:pointer}
.undo:hover{color:var(--fg);border-color:var(--fg)}
.cl{cursor:pointer}.cl:hover{background:rgba(124,92,255,.18)}
.explain{display:flex;gap:8px;align-items:flex-start;margin:4px 12px 8px 4.4em;padding:8px 12px;border-radius:12px;background:var(--card);border:1px solid var(--violet);font:600 13px/1.4 var(--body);color:var(--fg);white-space:normal;max-width:52ch}
.artpreview{display:block;width:120px;height:120px;object-fit:contain;margin:0 auto 8px;border-radius:16px;background:repeating-conic-gradient(#2a2650 0 25%,#1c1a3f 0 50%) 0 0/16px 16px}
.gallery{grid-auto-rows:max-content;align-items:start}
.pcard{overflow:visible;height:auto}
.pframe{border-radius:16px 16px 0 0;overflow:hidden}

/* character picker */
.picker{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;border-radius:22px;border:2px solid var(--line2);background:var(--bg2);padding:14px;overflow:hidden}
.pickhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.pickhead b{font-family:var(--display);font-size:22px}
.pickfilters{display:flex;gap:8px;flex-wrap:wrap}.chip.on{background:var(--lime);color:var(--bg);border-color:var(--lime)}
.pickgrid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;align-content:start}
.pick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.pick img{width:96px;height:96px;object-fit:contain}.pick b{font-size:14px}
.pick:hover{border-color:var(--lime);transform:translateY(-2px)}
.pickpaint{display:flex;flex-direction:column;gap:10px;max-width:520px}.pickpaint p{margin:0;color:var(--muted)}
.pickpaint .say input{font-size:17px}


/* design mode */
.build.designing .chat{display:none}
.design{flex:1;min-height:0;display:flex;flex-direction:column;gap:20px;border-radius:22px;border:6px solid var(--line2);background:var(--bg2);padding:24px 28px;overflow:auto}
.dsteps{display:flex;gap:8px;flex-wrap:wrap}
.dstep{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:14px;color:var(--muted);max-width:260px}
.dstep i{width:24px;height:24px;border-radius:50%;background:var(--chip);display:grid;place-items:center;font-style:normal;font-size:12px;flex:none}
.dstep.core{border-color:var(--line2)}
.dstep.done{color:var(--fg);border-color:var(--lime)}.dstep.done i{background:var(--lime);color:var(--bg)}
.dstep small{color:var(--lime);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbody{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:760px;width:100%;margin:0 auto}
.dask{display:flex;gap:16px;align-items:flex-start}
.dq{font:600 clamp(22px,2.6vw,30px)/1.3 var(--display);background:var(--card);border:1px solid var(--line);border-radius:22px 22px 22px 4px;padding:18px 22px}
.dopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.dopt{display:flex;align-items:center;gap:10px;text-align:left;padding:14px 16px;border-radius:16px;border:2px solid var(--violet);background:var(--card);color:var(--fg);font-size:17px;cursor:pointer}
.dopt svg{flex:none;stroke:var(--lime)}.dopt:hover{background:var(--violet);color:#fff}
.dsay{border-color:var(--lime);box-shadow:0 0 0 4px rgba(199,244,100,.2)}.dsay input{font-size:19px;padding:14px 0}
.dskip{align-self:flex-end;background:none;border:0;color:var(--muted);font-size:14px;cursor:pointer;text-decoration:underline}
.dskip:hover{color:var(--fg)}
.build.designing #ph,.build.designing #code,.build.designing #full,.build.designing .fctl,.build.designing .foot{display:none}

.design.busy .dopts,.design.busy .dsay,.design.busy .dskip{display:none}
.dprog{display:flex;flex-direction:column;gap:12px}
.dme{align-self:flex-end;max-width:70%;padding:12px 18px;border-radius:20px 20px 4px 20px;background:var(--violet);color:#fff;font-size:18px;line-height:1.35}
.dthink{display:flex;align-items:flex-end;gap:10px;align-self:flex-start}
.dthinkb{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:18px 18px 18px 4px;background:var(--card);border:1px solid var(--line);font-size:15px;color:var(--muted)}
.dthinkb b{color:var(--fg);font-weight:700}
.delapsed{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}

.controw{display:flex;gap:8px;justify-content:flex-end;margin-top:-8px}

/* phone play: game only */
.fab,.sheet,.sheetclose{display:none}
body.phone{overflow:hidden;background:#000}
body.phone .top,body.phone .playwrap>*:not(#pf){display:none}
body.phone .playwrap{height:auto}
body.phone .playwrap{padding:0;max-width:none;gap:0}
body.phone #pf{position:fixed;inset:0;width:100vw;height:100dvh;max-height:none;aspect-ratio:auto;border:0;border-radius:0}
body.phone .fab{display:grid;place-items:center;position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(15,13,36,.7);color:#fff;font-size:22px;line-height:1;z-index:5;backdrop-filter:blur(6px)}
body.phone .sheet{display:flex;flex-direction:column;gap:14px;position:fixed;inset:0;z-index:6;background:var(--bg);overflow:auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 32px}
body.phone .sheet.hidden{display:none}
body.phone .sheet>*{display:flex}
body.phone .sheetclose{display:block;align-self:flex-start;padding:10px 16px;border-radius:12px;border:0;background:var(--lime);color:var(--bg);font:700 16px var(--display)}
body.phone .sheet .cols{flex-direction:column}

.tipbar{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:7;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--lime);color:var(--bg);font-size:14px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.tipbar.hidden{display:none}.tipbar span{flex:1}.tipbar button{border:0;background:rgba(0,0,0,.15);width:28px;height:28px;border-radius:50%;font-weight:700}
.installtip{gap:6px}.installtip span{color:var(--muted);font-size:15px}

.trashbox{color:var(--muted);font-size:13px}
.trashbox summary{cursor:pointer}.trashlist{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.trashlist span{display:flex;align-items:center;gap:8px;color:var(--fg)}

/* the lesson: you said -> how to ask */
.brief{display:flex;flex-direction:column;gap:12px}
.bscore{font-family:var(--display);font-size:24px}
.bgot{display:flex;flex-wrap:wrap;gap:8px}
.bgotchip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(199,244,100,.14);border:1px solid var(--lime);color:var(--lime);font-size:14px}.bgotchip em{font-style:normal;color:var(--fg);font-weight:700}
.bneed{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:16px;border:1px solid var(--gold);background:var(--card)}
.bneedrow{display:flex;align-items:center;gap:10px;font-size:15px}.bneedrow i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--chip);color:var(--gold);display:grid;place-items:center;font-style:normal;font-size:13px}.bneedrow b{flex:none}.bneedrow span{color:var(--muted);font-size:14px}
.bimpr{border-radius:14px;border:1px solid var(--line);padding:10px 14px;color:var(--muted);font-size:14px}.bimpr summary{cursor:pointer;color:var(--lime)}.bimpr p{margin:8px 0 0;color:var(--fg);font-size:15px;line-height:1.45}
.bcol{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 18px;display:flex;flex-direction:column;gap:6px}
.bcol.good{border-color:var(--lime);box-shadow:0 0 0 3px rgba(199,244,100,.15)}
.bcol p{margin:0;font-size:17px;line-height:1.4}
.barrow{display:grid;place-items:center;font-size:32px;color:var(--lime)}
.bactions{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:15px}


/* skills + builder cards */
.skillbar{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.sk{display:inline-flex;align-items:center;gap:2px;font-size:14px;opacity:.35}.sk.on{opacity:1}.sk b{font-size:12px;color:var(--lime)}
.skillbar small{margin-left:6px;color:var(--muted);font-size:12px;white-space:nowrap}
.skillbar.flash{animation:skf .6s}@keyframes skf{0%{box-shadow:0 0 0 0 rgba(199,244,100,.8)}100%{box-shadow:0 0 0 14px rgba(199,244,100,0)}}
.skillpop{align-self:flex-start;color:var(--gold);border-color:var(--gold)}
#collect.ready{border-color:var(--gold);color:var(--gold);animation:glow 1.4s infinite}
.cardveil{position:fixed;inset:0;z-index:20;background:rgba(10,6,24,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;perspective:1400px}
.cardveil.hidden{display:none}
.cardflip{position:relative;width:min(360px,88vw);aspect-ratio:5/7;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.8,.2,1);cursor:pointer;animation:cardin .7s ease-out}
.cardflip.flipped{transform:rotateY(180deg)}
@keyframes cardin{from{transform:translateY(60px) scale(.8) rotateY(-30deg);opacity:0}to{transform:none;opacity:1}}
.cardface{position:absolute;inset:0;border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:10px;backface-visibility:hidden;background:var(--card);border:6px solid var(--line2);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.cardface.back{transform:rotateY(180deg)}
.cardflip:has(.cf-rarity.gold) .cardface{border-color:#ffcc33;background:linear-gradient(160deg,#2a2410,#1c1a3f)}
.cardflip:has(.cf-rarity.silver) .cardface{border-color:#cfd6e6}
.cardflip:has(.cf-rarity.bronze) .cardface{border-color:#c47a3a}
.cf-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.cf-rarity{padding:3px 8px;border-radius:999px;font-weight:800;font-size:11px;letter-spacing:1px}
.cf-rarity.gold{background:#ffcc33;color:#1b1410}.cf-rarity.silver{background:#cfd6e6;color:#1b1410}.cf-rarity.bronze{background:#c47a3a;color:#fff}
.cf-skill{color:var(--lime)}
.cf-art{flex:1;border-radius:14px;overflow:hidden;background:#000}.cf-art iframe{width:200%;height:200%;border:0;transform:scale(.5);transform-origin:0 0;pointer-events:none}
.cf-title{font:700 24px var(--display)}.cf-kid{color:var(--muted);font-size:13px}
.cf-proof{margin:6px 0 0;font-size:17px;line-height:1.45;flex:1}
.cf-stat{align-self:flex-start;padding:6px 12px;border-radius:999px;background:var(--bg);color:var(--lime);font-size:14px;font-variant-numeric:tabular-nums}
.cf-next{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--bg);font-size:14px}.cf-next span{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.binder{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.mini{display:flex;flex-direction:column;border-radius:18px;border:3px solid var(--line2);background:var(--card);overflow:hidden}
.mini.gold{border-color:#ffcc33}.mini.silver{border-color:#cfd6e6}.mini.bronze{border-color:#c47a3a}
.mini-art{height:110px;background:#000;overflow:hidden}.mini-art iframe{width:200%;height:200%;border:0;transform:scale(.5);transform-origin:0 0;pointer-events:none}
.mini-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px}.mini-body b{font-family:var(--display);font-size:17px;font-weight:600}.mini-body small{color:var(--muted);font-size:13px}
.mini-body p{margin:4px 0 0;font-size:13px;color:var(--fg);line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.skrow{display:flex;align-items:center;gap:10px;font-size:14px}.skrow>span{width:130px;flex:none}.skrow b{width:24px;text-align:right;color:var(--lime);font-variant-numeric:tabular-nums}
@media (max-width:1100px){.skillbar small{display:none}}

/* play pass */
.pass{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13px;white-space:nowrap}
.pass-lv{color:var(--muted)}.pass-bar{width:70px;height:8px;border-radius:999px;background:var(--bg);overflow:hidden}.pass-bar i{display:block;height:100%;background:var(--lime);transition:width 1s linear}
.pass b{font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.pass.low{border-color:var(--gold)}.pass.low .pass-bar i{background:var(--gold)}.pass.low b{color:var(--gold)}
#ship.ready{animation:glow 1.4s infinite}
.passover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,13,36,.94);padding:20px}
.passcard{width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px;background:var(--card);border:2px solid var(--gold);border-radius:22px;padding:24px}
.passcard h2{font-size:28px}.passcard p{margin:0;color:var(--muted);line-height:1.4}
.passcard .ideas{max-width:none}
.po-levels{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:4px}
.po-levels span{padding:3px 8px;border-radius:999px;border:1px solid var(--line)}.po-levels span.done{background:var(--lime);color:var(--bg);border-color:var(--lime)}.po-levels span.nextlv{border-color:var(--gold);color:var(--gold)}
.po-levels i{font-style:normal;opacity:.5}
.levelup{align-self:flex-start;color:var(--gold);border-color:var(--gold)}
.game.shipped{border-color:var(--lime)}
#ship:not(.ready){background:transparent;border:2px solid var(--line2);color:var(--muted);font:700 15px var(--body)}

/* teasers for empty shelf / binder */
.teaser{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 22px;border-radius:22px;background:linear-gradient(135deg,var(--card),var(--bg2));border:1px solid var(--line)}
.teaser-art{width:72px;height:72px;border-radius:20px;background:var(--bg);display:grid;place-items:center;font-size:34px;flex:none}
.teaser-art.cards{position:relative}.teaser-art.cards .mc{position:absolute;width:30px;height:42px;border-radius:6px;border:2px solid;background:var(--card)}
.mc.bronze{border-color:#c47a3a;transform:rotate(-14deg) translateX(-14px)}.mc.silver{border-color:#cfd6e6;transform:translateY(-3px)}.mc.gold{border-color:#ffcc33;transform:rotate(14deg) translateX(14px)}
.teaser-txt{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:4px}.teaser-txt b{font-family:var(--display);font-size:19px;font-weight:600}.teaser-txt span{color:var(--muted);font-size:14px;line-height:1.4}.teaser-txt em{font-style:normal;color:var(--lime)}
.teaser-track{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:11px;color:var(--muted);flex-basis:100%}
.teaser-track span{padding:3px 8px;border-radius:999px;border:1px solid var(--line)}.teaser-track span.done{background:var(--lime);color:var(--bg);border-color:var(--lime)}.teaser-track i{font-style:normal;opacity:.5}

/* side shelf + binder */
.sideshelf{display:flex;flex-direction:column;gap:8px}
.srow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--bg2);text-decoration:none;color:var(--fg)}
.srow .sw{width:36px;height:36px;border-radius:10px;flex:none}.srow .t{flex:1;min-width:0;line-height:1.2}.srow .t em{display:block;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.srow .t span{font-size:12px;color:var(--muted)}
.sidebinder{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.mcard{flex:0 0 108px;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:12px;border:2px solid var(--line2);background:var(--bg2)}
.mcard.gold{border-color:#ffcc33}.mcard.silver{border-color:#cfd6e6}.mcard.bronze{border-color:#c47a3a}
.mcard-art{height:64px;border-radius:8px;overflow:hidden;background:#000}.mcard-art iframe{width:200%;height:200%;border:0;transform:scale(.5);transform-origin:0 0;pointer-events:none}
.mcard .cf-rarity{align-self:flex-start;font-size:9px;padding:2px 6px}.mcard b{font-size:12px;line-height:1.2}.mcard small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sideempty{display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--muted);line-height:1.4}.sideempty em{font-style:normal;color:var(--lime)}
.sideempty .track{display:flex;flex-wrap:wrap;gap:4px}.sideempty .track span{padding:2px 7px;border-radius:999px;border:1px solid var(--line);font-size:11px}.sideempty .track span.done{background:var(--lime);color:var(--bg);border-color:var(--lime)}
.sideempty .fan{position:relative;height:48px;width:90px}.sideempty .fan .mc{position:absolute;left:30px;top:2px;width:26px;height:38px;border-radius:5px;border:2px solid;background:var(--card)}

/* simplified builder chrome */
.build .top{position:relative}
.menu{position:absolute;right:24px;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px;border-radius:18px;background:var(--card);border:2px solid var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.45);min-width:260px}
.menu .btn{justify-content:center}
.menu .versions{padding:4px 0}
.fctl{position:absolute;top:10px;right:10px;z-index:5;display:flex;gap:2px;padding:3px;border-radius:12px;background:rgba(15,13,36,.78);backdrop-filter:blur(4px)}
.fctl button{width:36px;height:36px;border-radius:9px;border:0;background:transparent;color:var(--fg);font-size:15px;display:grid;place-items:center}
.fctl button:hover{background:var(--chip)}
#ph.on{background:var(--lime);color:var(--bg)}
.stagebar .icon{background:var(--card);border:1px solid var(--line)}

#ship small{font-size:12px;color:var(--muted);margin-left:4px}

.questpanel{background:var(--card);border-color:var(--gold)}
.qsteps{list-style:none;margin:0;padding:14px;display:flex;flex-direction:column;gap:10px;overflow:auto;flex:1}
.qsteps li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--bg2);border:2px solid var(--line);opacity:.75}
.qsteps li i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--display);font-style:normal;background:var(--chip);color:var(--muted)}
.qsteps li div{display:flex;flex-direction:column;gap:4px;font-size:15px;min-width:0}.qsteps li b{font-family:var(--display);font-size:17px}.qsteps li span{color:var(--muted);font-size:14px}
.qsteps li.done{opacity:1}.qsteps li.done i{background:var(--lime);color:var(--bg)}.qsteps li.done span{color:var(--lime)}
.qsteps li.cur{opacity:1;border-color:var(--gold);background:var(--card)}.qsteps li.cur i{background:var(--gold);color:var(--bg)}.qsteps li.cur span{color:var(--fg)}
.qtry{margin-top:6px;align-self:flex-start;background:var(--gold);color:var(--bg);font-size:14px;text-align:left;white-space:normal}
.qgo{margin-top:6px;color:var(--gold)!important;font-size:15px!important}
.qfoot{padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);text-align:center}

.kind.big{min-height:170px;padding:20px;gap:14px;cursor:pointer}.kind.big i{width:52px;height:52px;font-size:26px;border-radius:16px}.kind.big span{font-size:20px;font-family:var(--display)}.kind.big span small{font-family:var(--body);font-size:14px;margin-top:4px}
.kind.big .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--lime);color:var(--bg);font-size:14px}.kind.big .go svg{width:16px;height:16px}
.kind.big .steamrow{display:flex;gap:6px;flex-wrap:wrap;font-family:var(--body)}.kind .steam{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--muted);padding:3px 9px 3px 3px;border-radius:999px;border:1px solid var(--line2);background:var(--bg)}.kind .steam i{width:18px;height:18px;border-radius:50%;background:var(--sc);color:var(--bg);font:800 11px var(--display);display:grid;place-items:center}
.kind.big:hover{border-color:var(--lime);transform:translateY(-2px);transition:.15s}.kind.soon:hover{border-color:var(--line);transform:none}
/* illustrate */
.illus{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.ihead{display:flex;align-items:center;gap:10px}.ihead b{font-family:var(--display);font-size:18px}
.ibody{flex:1;min-height:0;display:flex;border-radius:22px;border:6px solid var(--line2);overflow:hidden;background:#1a1838}
.ipic{flex:1;min-width:0;position:relative;background:#24305a}.ipic iframe{width:100%;height:100%;border:0}.ipic img{width:100%;height:100%;object-fit:cover;display:block}
.itag{position:absolute;top:10px;left:10px;padding:5px 10px;border-radius:999px;background:rgba(15,13,36,.8);font-size:12px;color:var(--muted)}
.itext{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding:24px;background:#fff7e6;color:#1f1d2b;overflow:auto}
.itext .eyebrow{color:#5b586a}.itext p{margin:0;font:600 22px/1.35 var(--display)}
.itext textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:14px;border:2px solid var(--lime);background:#fff;color:#1f1d2b;font:700 16px/1.4 var(--body);resize:vertical}
.iacts{display:flex;gap:8px;flex-wrap:wrap}.iacts .btn.ghost{background:#fff;color:#1f1d2b;border-color:#d8d3c6}.iacts .btn.ghost svg{stroke:#1f1d2b}
.ifoot{display:flex;align-items:center;gap:8px}
.istrip{flex:1;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.ist.wide{width:auto;padding:0 10px}
.ist{width:30px;height:30px;border-radius:8px;border:2px solid transparent;background:var(--chip);color:var(--muted);font:800 12px var(--body);cursor:pointer}.ist.done{background:var(--lime);color:var(--bg)}.ist.cur{border-color:var(--gold);color:var(--gold)}.ist.done.cur{color:var(--bg)}
.cam{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(15,13,36,.8)}
.camcard{width:min(92vw,520px);display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:22px;background:var(--card);border:2px solid var(--line2)}
.camhead{display:flex;align-items:center;gap:10px}.camhead b{font-family:var(--display);font-size:20px}
.camview{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#000;display:grid;place-items:center}.camview video,.camview canvas{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camcount{position:absolute;inset:0;display:grid;place-items:center;font:700 120px var(--display);color:var(--lime);text-shadow:0 4px 30px rgba(0,0,0,.6)}
.camqr{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;text-align:center;color:var(--muted);font-size:14px;background:var(--bg2);width:100%;height:100%;justify-content:center;box-sizing:border-box}
.camacts{display:flex;gap:8px;justify-content:center}.camrule{display:flex;align-items:center;gap:8px;font-size:13px}

.ctip{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-radius:14px;background:rgba(199,244,100,.1);border:1px solid var(--lime);font-size:14px}
.pframe img{width:100%;height:100%;object-fit:cover;display:block}.pframe{position:relative}
.cdesc{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;border:2px solid var(--lime);background:var(--bg);color:var(--fg);font:700 14px/1.4 var(--body);resize:vertical;margin:6px 0}

.isteps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.istep{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:18px;border:3px solid var(--line2);background:var(--card);color:var(--fg);text-align:left;cursor:pointer}
.istep i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:24px;font-style:normal;flex:none}
.istep span{display:flex;flex-direction:column;min-width:0}.istep b{font-family:var(--display);font-size:17px}.istep small{font-size:13px;color:var(--muted)}
.istep.on{border-color:var(--gold)}.istep.done{border-color:var(--lime)}.istep.done b::after{content:" ✓";color:var(--lime)}
#ichars{flex:1}
.ist.stale{background:var(--gold);color:var(--bg)}

/* ---- Experiments: results notebook ---- */
.notes{flex:1;min-height:0;overflow:auto;padding:4px 2px 12px}
body.lab #evt,body.lab #varhint,body.lab #fctl{display:none}
.rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.rhead b{font:600 20px var(--display)}
.rcard{display:grid;grid-template-columns:220px 1fr;gap:14px;background:var(--card);border:2px solid var(--line2);border-radius:18px;overflow:hidden;margin-bottom:12px}
.rcard img,.rcard .rph{width:220px;height:140px;object-fit:cover;background:#07061a}
.rcard .rbody{padding:12px 14px 12px 0;display:flex;flex-direction:column;gap:6px;min-width:0}.rcard .rbody>b{font:600 17px var(--display)}
.rrow{font-size:13px;line-height:1.45}.rrow span{display:inline-block;min-width:84px;color:var(--muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase}.rrow.sp{color:var(--lime)}
@media (max-width:720px){.rcard{grid-template-columns:1fr}.rcard img,.rcard .rph{width:100%;height:160px}.rcard .rbody{padding:0 12px 12px}}