/* Dongle, scaled to the old UI face's x-height and re-centred vertically (see measure_font.html) */
/* latin-ext */
@font-face {
  font-family: 'Dongle HQ';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dongle/v16/sJoF3Ltdjt6VPkqWtO5OWh4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 170%;
  ascent-override: 57%;
  descent-override: 16%;
  line-gap-override: 0%;
}
/* latin */
@font-face {
  font-family: 'Dongle HQ';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dongle/v16/sJoF3Ltdjt6VPkqWuu5O.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 170%;
  ascent-override: 57%;
  descent-override: 16%;
  line-gap-override: 0%;
}
/* latin-ext */
@font-face {
  font-family: 'Dongle HQ';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dongle/v16/sJoG3Ltdjt6VPkqeActbaz-M_Xs.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 170%;
  ascent-override: 57%;
  descent-override: 16%;
  line-gap-override: 0%;
}
/* latin */
@font-face {
  font-family: 'Dongle HQ';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dongle/v16/sJoG3Ltdjt6VPkqeActbZT-M.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 170%;
  ascent-override: 57%;
  descent-override: 16%;
  line-gap-override: 0%;
}
:root{
  --shell:#E3E2DE; --panel:#FAFAF8; --panel-2:#F0EFEB; --line:#D4D2CC; --line-2:#BCB9B1; --rule:#E6E4DF;
  --ink:#1E2025; --ink-2:#555961; --ink-3:#7E8189;
  --bezel:#26282F; --bezel-2:#3A3D46;
  --amber:#F2A516; --amber-deep:#C98500; --amber-ink:#7A4E00;
  --ok:#2F8F5B; --bad:#C23B2A;
  --accent:#8fbf5a;
  --strong:#26282F; --on-strong:#FFFFFF; --strong-hover:#3A3D46;
  --device:#26282F; --device-edge:transparent;
  --screen-base:#F2F3EF; --screen-dot:rgba(30,32,37,.09);
  --dialog-bg:#FFFFFF; --dialog-edge:#26282F; --dialog-ink:#1E2025;
  --field:#FFFFFF; --track:#D6D4CE; --track-2:#E6E4DF; --track-3:#EEEDEA;
  --hover:rgba(0,0,0,.05); --hover-soft:rgba(255,255,255,.55); --stripe:rgba(0,0,0,.05);
  --amber-soft:#FFF4DC; --danger-line:#DDB3AB; --danger-soft:#F7E9E6;
  --scrim:rgba(24,25,30,.5); --toast-bg:#26282F; --mark-bg:#26282F; --sil:brightness(0) opacity(.22);
  --check-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
  --sans:"Dongle HQ",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --pixel:"Pixelify Sans","Martian Mono",ui-monospace,monospace;
  --r:10px; --r-sm:6px;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]){
  --shell:#131417; --panel:#1B1D21; --panel-2:#23252A; --line:#2C2F35; --line-2:#3D4149; --rule:#25282D;
  --ink:#ECEDEF; --ink-2:#B4B7BE; --ink-3:#8B8F98;
  --bezel:#0C0D10; --bezel-2:#2C2F35;
  --amber-deep:#E3A12A; --amber-ink:#F4BE52; --ok:#52B983; --bad:#E8664F;
  --strong:#ECEDEF; --on-strong:#131417; --strong-hover:#FFFFFF;
  --device:#0C0D10; --device-edge:#2C2F35;
  --screen-base:#1D2025; --screen-dot:rgba(255,255,255,.07);
  --dialog-bg:#131417; --dialog-edge:#D9DBDF; --dialog-ink:#ECEDEF;
  --field:#141518; --track:#30333A; --track-2:#282B31; --track-3:#212328;
  --hover:rgba(255,255,255,.06); --hover-soft:rgba(255,255,255,.04); --stripe:rgba(255,255,255,.05);
  --amber-soft:#2F250F; --danger-line:#5E3029; --danger-soft:#2B1714;
  --scrim:rgba(0,0,0,.62); --toast-bg:#2C2F35; --mark-bg:#2C2F35; --sil:brightness(0) invert(1) opacity(.13);
  --check-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23131417' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}
}
:root[data-theme=dark]{
  --shell:#131417; --panel:#1B1D21; --panel-2:#23252A; --line:#2C2F35; --line-2:#3D4149; --rule:#25282D;
  --ink:#ECEDEF; --ink-2:#B4B7BE; --ink-3:#8B8F98;
  --bezel:#0C0D10; --bezel-2:#2C2F35;
  --amber-deep:#E3A12A; --amber-ink:#F4BE52; --ok:#52B983; --bad:#E8664F;
  --strong:#ECEDEF; --on-strong:#131417; --strong-hover:#FFFFFF;
  --device:#0C0D10; --device-edge:#2C2F35;
  --screen-base:#1D2025; --screen-dot:rgba(255,255,255,.07);
  --dialog-bg:#131417; --dialog-edge:#D9DBDF; --dialog-ink:#ECEDEF;
  --field:#141518; --track:#30333A; --track-2:#282B31; --track-3:#212328;
  --hover:rgba(255,255,255,.06); --hover-soft:rgba(255,255,255,.04); --stripe:rgba(255,255,255,.05);
  --amber-soft:#2F250F; --danger-line:#5E3029; --danger-soft:#2B1714;
  --scrim:rgba(0,0,0,.62); --toast-bg:#2C2F35; --mark-bg:#2C2F35; --sil:brightness(0) invert(1) opacity(.13);
  --check-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23131417' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--shell);color:var(--ink);font:400 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd{margin:0}
button,input,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-48px;z-index:200;background:var(--bezel);color:#fff;padding:8px 12px;border-radius:var(--r-sm);text-decoration:none}
.skip:focus{top:12px}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:150}
.ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.muted{color:var(--ink-3);font-size:13px}
.mono{font-family:var(--mono)}
.fine{font-size:12px;color:var(--ink-3);margin-top:12px}
.eyebrow{font:500 12px/1.4 var(--mono);color:var(--ink-3);margin-bottom:6px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font:600 13px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{background:var(--panel-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn .ic{width:15px;height:15px}
.btn-primary{background:var(--strong);border-color:var(--strong);color:var(--on-strong)}
.btn-primary:hover{background:var(--strong-hover);border-color:var(--strong-hover)}
.btn-amber{background:var(--amber);border-color:var(--amber-deep);color:#2A1C00}
.btn-amber:hover{background:#F5B53D}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--hover)}
.btn-danger{color:var(--bad);border-color:var(--danger-line)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-sm{height:30px;padding:0 10px;font-size:12px}
.btn-icon{width:36px;padding:0}
.btn-icon .ic{width:18px;height:18px}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--field)}
.seg button{height:32px;min-width:40px;padding:0 10px;border:0;border-left:1px solid var(--line-2);background:transparent;font:500 12px var(--mono);color:var(--ink-2);cursor:pointer}
.seg button:first-child{border-left:0}
.seg button:hover{background:var(--panel-2)}
.seg button[aria-pressed=true]{background:var(--strong);color:var(--on-strong)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;padding:18px 18px 24px;display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.mark{width:30px;height:30px;flex:none}
.mark-bg{fill:var(--mark-bg)}
.brand b{display:block;font:700 15px/1.15 var(--sans);letter-spacing:-.01em}
.brand span{display:block;font:500 11px/1.3 var(--mono);color:var(--ink-3)}

/* the device */
.device{background:var(--device);border:1px solid var(--device-edge);border-radius:14px;padding:10px 10px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 30px -18px rgba(20,20,25,.7)}
.device-top{display:flex;align-items:center;gap:8px;padding:2px 4px 9px;color:#A9ADB6;font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.device-top .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.led{width:7px;height:7px;border-radius:50%;flex:none;background:var(--amber);box-shadow:0 0 6px rgba(242,165,22,.7)}
.led.off{background:#5A5F69;box-shadow:none}
.device-lv{font:700 15px/1 var(--pixel);color:#fff;letter-spacing:.02em;text-transform:none}
.screen{position:relative;display:block;overflow:hidden;border-radius:6px;-webkit-user-select:none;user-select:none;background-color:color-mix(in srgb,var(--accent) 16%,var(--screen-base));background-image:radial-gradient(var(--screen-dot) .7px,transparent .8px);background-size:4px 4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),inset 0 2px 6px rgba(0,0,0,.12)}
.creature-stage{height:212px;display:grid;place-items:end center;padding-bottom:2px;touch-action:none;-webkit-tap-highlight-color:transparent}
.creature-stage .creature{width:196px;height:196px;cursor:pointer}
.creature-stage.drop-ready{background:rgba(242,165,22,.2)}
.zzz{position:absolute;right:14px;top:10px;font:700 16px var(--pixel);color:var(--ink-2);pointer-events:none;animation:zzz 2.4s ease-in-out infinite}
.dialog{margin:0 6px 6px;min-height:60px;background:var(--dialog-bg);border:2px solid var(--dialog-edge);border-radius:4px;padding:8px 10px;font:500 13px/1.4 var(--sans);color:var(--dialog-ink)}
.dialog.yell{background:var(--bad);border-color:#7E2317;color:#fff;font-weight:700}
.device-foot{padding:11px 4px 0}
.xp-row{display:flex;justify-content:space-between;gap:8px;color:#AEB2BA;font:500 11px/1 var(--mono)}
.xp-row b{color:#fff;font-weight:600}
.xpbar{height:6px;margin-top:8px;border-radius:3px;background:#40434C;overflow:hidden}
.xpbar i{display:block;height:100%;width:0;border-radius:3px;background:var(--amber);transition:width .6s ease}
.device.quake{animation:quake .45s linear}

/* care */
.care{display:grid;gap:12px}
.meters{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:12px;color:var(--ink-2)}
.meter-head b{font:600 11px/1 var(--mono);color:var(--ink)}
.bar{height:6px;margin-top:6px;border-radius:3px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--ink);transition:width .6s ease}
.bond-bar i{background:var(--accent);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.pantry{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.snack{position:relative;height:40px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel);font:600 12px var(--mono);cursor:grab;touch-action:none}
.snack:hover{background:var(--panel-2)}
.snack .ic{width:18px;height:18px}
.snack.fav{border-color:var(--ink)}
.snack.fav::after{content:"Fav";position:absolute;top:-7px;right:6px;padding:2px 4px;border-radius:3px;background:var(--ink);color:var(--panel);font:600 9px/1 var(--mono)}
.snack.empty{color:var(--ink-3)}
.hint{font-size:12px;line-height:1.45;color:var(--ink-3)}
.drag-ghost{position:fixed;z-index:160;pointer-events:none;transform:translate(-50%,-50%);color:var(--ink)}
.drag-ghost .ic{width:32px;height:32px}

/* ---------- main + tabs ---------- */
.main{min-width:0;padding:0 32px 72px}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;margin:0 -32px 28px;padding:0 32px;background:var(--shell);border-bottom:1px solid var(--line)}
.tabs{flex:1;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;height:56px;display:flex;align-items:center;gap:6px;padding:0 12px;border:0;background:none;color:var(--ink-2);font:500 14px var(--sans);white-space:nowrap;cursor:pointer}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--ink);font-weight:600}
.tab[aria-selected=true]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--ink)}
.tab .count{font:500 11px var(--mono);color:var(--ink-3)}
.top-actions{display:flex;align-items:center;gap:2px}
.streak{display:flex;align-items:center;gap:6px;margin-right:10px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.streak b{font:600 13px var(--mono);color:var(--ink)}
.streak .ic{color:var(--amber-deep)}
.main-inner{max-width:1080px;margin:0 auto}

.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.view-head h1{font:700 30px/1.15 var(--sans);letter-spacing:-.02em}
.view-head h1.pixel-name{font-family:var(--pixel);letter-spacing:.01em}
.view-head .lede{max-width:64ch;margin-top:6px;color:var(--ink-2)}

/* ---------- cards ---------- */
.grid{display:grid;gap:16px}
.span-all{grid-column:1/-1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-title{font:600 13px/1.3 var(--sans);color:var(--ink-2)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--rule)}
.list li:first-child{border-top:0;padding-top:0}
.list .grow{flex:1;min-width:0}
.list b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* today */
.g-today{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.next-quest{max-width:36ch;font:600 22px/1.3 var(--sans);letter-spacing:-.01em}
.next-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 18px;font-size:13px;color:var(--ink-2)}
.next-meta span{display:inline-flex;align-items:center;gap:6px}
.tag-xp{font:600 12px var(--mono);color:var(--amber-ink)}
.timer-face{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.timer-time{font:700 48px/1 var(--pixel);letter-spacing:.02em}
.timer-bar{height:4px;margin:14px 0;border-radius:2px;background:var(--track-2);overflow:hidden}
.timer-bar i{display:block;height:100%;width:0;background:var(--ink)}
.timer-controls{display:flex;align-items:center;gap:8px}
.strip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.cell{min-width:0;display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.cell-box{position:relative;height:34px;border:1px solid var(--line);border-radius:4px;background:var(--panel-2);overflow:hidden}
.cell-box i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.cell:hover .cell-box{border-color:var(--ink-2)}
.cell.current .cell-box{border-color:var(--ink)}
.cell.current .cell-box i{background:var(--amber)}
.cell.locked .cell-box{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--stripe) 4px 5px),var(--panel-2)}
.cell-label{font:500 10px/1 var(--mono);color:var(--ink-3)}
.cell.current .cell-label{color:var(--ink);font-weight:600}
.facts-row{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.facts-row dt{font-size:12px;color:var(--ink-3)}
.facts-row dd{margin-top:2px;font:600 17px var(--mono)}
.evo-mini{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--ink-3)}
.evo-mini svg{width:68px;height:68px}
.distract{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.distract h2{font:600 14px var(--sans);color:var(--ink)}

/* roadmap */
.g-roadmap{grid-template-columns:260px minmax(0,1fr);align-items:start}
.phase-nav{position:sticky;top:76px}
.phase-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.phase-item{width:100%;display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:6px 8px;align-items:center;padding:8px 10px;border:1px solid transparent;border-radius:var(--r-sm);background:none;text-align:left;cursor:pointer}
.phase-item:hover{background:var(--hover-soft)}
.phase-item[aria-current=true]{background:var(--panel);border-color:var(--line)}
.pi-num{font:500 12px var(--mono);color:var(--ink-3)}
.pi-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-state{display:flex;font:500 11px var(--mono);color:var(--ink-3)}
.pi-bar{grid-column:2/4;height:3px;border-radius:2px;background:var(--track);overflow:hidden}
.pi-bar i{display:block;height:100%;background:var(--ink)}
.phase-item.current .pi-bar i{background:var(--amber)}
.phase-item.locked .pi-name{color:var(--ink-3)}
.phase-item.cleared .pi-state{color:var(--ok)}
.how{margin-top:16px}
.how ol{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
.phase-detail{padding:24px 26px}
.phase-detail h2{font:700 26px/1.2 var(--sans);letter-spacing:-.02em}
.phase-detail .note{max-width:64ch;margin-top:8px;color:var(--ink-2)}
.progress-line{display:flex;align-items:center;gap:12px;margin-top:16px}
.progress-line .bar{flex:1;margin:0}
.notice{display:flex;align-items:center;gap:10px;margin-top:18px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);font-size:13px;color:var(--ink-2)}
.notice.ok{color:var(--ok)}
.stage{margin-top:26px}
.stage-head{display:flex;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.stage-head h3{font:600 15px var(--sans)}
.stage-rule{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mono);color:var(--ink-3);text-align:right}
.stage-rule.proof{color:var(--amber-ink)}
.stage-lock{display:flex;align-items:center;gap:8px;padding:10px 4px 0;font-size:13px;color:var(--ink-3)}
.q{display:flex;align-items:center;gap:12px;min-height:46px;padding:9px 6px;border-bottom:1px solid var(--rule)}
label.q{cursor:pointer}
label.q:hover{background:var(--panel-2)}
.q-text{flex:1;min-width:0;font-size:14px}
.q.done .q-text{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line-2)}
.q-sub.done .q-text{text-decoration:none}
.q-tag{font:500 11px var(--mono);color:var(--ink-3);white-space:nowrap}
.q.disabled{opacity:.55}
label.q.disabled{cursor:default}
label.q.disabled:hover{background:none}
.q input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border:1.5px solid var(--line-2);border-radius:4px;background:var(--field);cursor:pointer}
.q input[type=checkbox]:checked{border-color:var(--ink);background:var(--ink) var(--check-img) center/14px no-repeat}
.q input[type=checkbox]:disabled{cursor:default}
.q-ico{width:18px;flex:none;display:grid;place-items:center;color:var(--amber-deep)}
.q-sub.done .q-ico{color:var(--ok)}
.q-ico.warn{color:var(--bad)}
.q-xp{font:600 12px var(--mono);color:var(--amber-ink);white-space:nowrap}
.q-sub.done .q-xp{color:var(--ok)}
.q-warn{display:block;margin-top:2px;font-size:12px;color:var(--bad)}
.flash{animation:flash 1.8s ease}

/* companion */
.g-comp{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
.stack{display:grid;gap:16px}
.specimen{padding:0;overflow:hidden}
.specimen .screen{border-radius:0;box-shadow:none;border-bottom:1px solid var(--line)}
.specimen .creature{display:block;width:100%;max-width:300px;height:auto;aspect-ratio:1;margin:0 auto;padding:18px}
.dl{display:grid;grid-template-columns:auto 1fr;padding:6px 20px 12px}
.dl dt,.dl dd{padding:9px 0;border-bottom:1px solid var(--rule);font-size:13px}
.dl dt{padding-right:16px;color:var(--ink-3)}
.dl dd{text-align:right;font-weight:500}
.dl dt:last-of-type,.dl dd:last-of-type{border-bottom:0}
.stat{display:grid;grid-template-columns:70px minmax(0,1fr) 40px;gap:12px;align-items:center;padding:5px 0}
.stat-name{font:500 12px var(--mono);color:var(--ink-2)}
.stat-name .up{color:var(--ok)}
.stat-name .down{color:var(--bad)}
.stat-bars{display:grid;gap:3px}
.stat-bars span{display:block;border-radius:2px;overflow:hidden}
.stat-bars .v{height:8px;background:var(--track-2)}
.stat-bars .e{height:3px;background:var(--track-3)}
.stat-bars i{display:block;height:100%}
.stat-bars .v i{background:var(--ink)}
.stat-bars .e i{background:var(--amber)}
.stat-val{font:600 14px var(--mono);text-align:right}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:12px;color:var(--ink-3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{display:inline-block;width:12px;height:6px;border-radius:2px;background:var(--ink)}
.swatch.e{height:3px;background:var(--amber)}
.evo-line{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.evo-step{padding:8px 6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--field);text-align:center}
.evo-step svg{display:block;width:100%;max-width:84px;height:auto;aspect-ratio:1;margin:0 auto}
.evo-step b{display:block;margin-top:4px;font-size:12px;font-weight:600}
.evo-step small{display:block;font:500 10px var(--mono);color:var(--ink-3)}
.evo-step.now{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.move{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-top:1px solid var(--rule)}
.move:first-child{border-top:0;padding-top:0}
.move b{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.move .pow{font:600 12px var(--mono);color:var(--ink-2)}
.move .desc{grid-column:1/-1;font-size:13px;color:var(--ink-3)}
.move.locked b{color:var(--ink-3)}

/* vault */
.table-wrap{overflow-x:auto}
.table{width:100%;min-width:640px;border-collapse:collapse;font-size:13px}
.table th{padding:0 12px 10px;border-bottom:1px solid var(--line);color:var(--ink-3);font-weight:500;text-align:left;white-space:nowrap}
.table td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table .num{text-align:right;font-family:var(--mono)}
.table b{font-weight:600}
.table a{display:inline-flex;align-items:center;gap:4px;margin-right:12px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.table a .ic{width:13px;height:13px}
.empty{padding:40px 24px;text-align:center}
.empty h2{font:600 18px var(--sans)}
.empty p{max-width:46ch;margin:6px auto 18px;color:var(--ink-2)}

/* trophies */
.g-trophies{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.trophy{display:flex;align-items:flex-start;gap:12px;padding:14px 16px}
.t-ico{width:36px;height:36px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--ink-3)}
.t-ico .ic{width:18px;height:18px}
.trophy.got .t-ico{background:var(--device);border-color:var(--device);color:var(--amber)}
.trophy b{display:block;font-size:14px;font-weight:600}
.trophy:not(.got) b{color:var(--ink-2)}
.trophy .desc{margin-top:2px;font-size:12px;color:var(--ink-3)}
.trophy small{display:block;margin-top:6px;font:500 11px var(--mono);color:var(--ok)}

/* settings */
.g-settings{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--rule)}
.setting-row:first-of-type{border-top:0;padding-top:0}
.setting-row b{font-weight:600}
.setting-row .desc{font-size:13px;color:var(--ink-3)}
.kbd-list{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;font-size:13px}
kbd{display:inline-block;min-width:24px;padding:2px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;background:var(--field);font:500 11px var(--mono);text-align:center}
.danger-zone{border-color:var(--danger-line)}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:var(--scrim);animation:fade .16s ease}
.modal-card{width:100%;max-width:460px;max-height:calc(100vh - 40px);overflow:auto;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);animation:rise .2s cubic-bezier(.2,.8,.3,1)}
.modal-card.wide{max-width:620px}
.modal-card h2{font:700 22px/1.25 var(--sans);letter-spacing:-.01em}
.modal-card > p{margin-top:8px;color:var(--ink-2)}
.modal-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:22px}
.modal-center{text-align:center}
.modal-center .modal-actions{justify-content:center}
.modal-center .creature{display:block;width:136px;height:136px;margin:0 auto 6px}
.modal-icon{width:44px;height:44px;margin:0 auto 12px;display:grid;place-items:center;border-radius:10px;background:var(--device);color:var(--amber)}
.modal-icon .ic{width:22px;height:22px}
.big-num{margin-top:4px;font:700 34px/1.1 var(--pixel)}
.levels{display:grid;grid-template-columns:auto 1fr auto;gap:6px 16px;max-width:260px;margin:18px auto 0;text-align:left;font:500 13px var(--mono)}
.levels .o{color:var(--ink-3)}
.levels .o b{color:var(--ink)}
.levels .d{color:var(--ok);text-align:right}

/* forms */
.field{display:block;margin-top:16px}
.field-label{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:13px;font-weight:600}
.field-label small{font-weight:400;color:var(--ink-3)}
.input{width:100%;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--field);font-size:14px}
textarea.input{height:auto;min-height:92px;padding:10px 12px;line-height:1.45;resize:vertical}
.input:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}
.input[aria-invalid=true]{border-color:var(--bad);outline-color:var(--bad)}
.count{margin-top:4px;font:500 11px var(--mono);color:var(--ink-3);text-align:right}
.count.ok{color:var(--ok)}
.check{display:flex;align-items:flex-start;gap:10px;margin-top:10px;font-size:13px;color:var(--ink-2);cursor:pointer}
.check input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--ink)}
.xp-preview{margin-top:18px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);font-size:13px;color:var(--ink-2)}
.xp-preview b{font:600 14px var(--mono);color:var(--ink)}
.xp-preview .bonus{color:var(--ok)}
.form-error{min-height:20px;margin-top:10px;font-size:13px;color:var(--bad)}
.scan{position:relative;height:3px;margin-top:14px;border-radius:2px;background:var(--line);overflow:hidden}
.scan i{position:absolute;top:0;bottom:0;width:30%;background:var(--ink);animation:scan 1s linear infinite}
.scan-log{min-height:18px;margin-top:8px;font:500 12px var(--mono);color:var(--ink-2)}

/* toasts + floaters */
#toasts{position:fixed;right:20px;bottom:20px;z-index:140;display:grid;justify-items:end;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;max-width:380px;padding:10px 14px;border-radius:8px;background:var(--toast-bg);color:#fff;font-size:13px;font-weight:500;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);animation:rise .2s ease}
.toast .ic{color:var(--amber)}
.toast.out{animation:sink .2s ease forwards}
.floater,.heart-pop{position:fixed;z-index:145;pointer-events:none;transform:translate(-50%,0);animation:floatUp 1.1s ease-out forwards}
.floater{padding:2px 6px;border:1px solid var(--amber);border-radius:4px;background:var(--amber-soft);color:var(--amber-ink);font:600 12px var(--mono);white-space:nowrap}
.heart-pop{color:var(--bad)}
.heart-pop .ic{width:18px;height:18px}
.heart-pop .snack-pop{display:flex;align-items:center;gap:3px;color:var(--ink);font:600 12px var(--mono)}

/* evolution */
.evo{position:fixed;inset:0;z-index:170;display:grid;place-items:center;overflow:hidden;background-color:#16171C;background-image:radial-gradient(rgba(255,255,255,.07) .7px,transparent .8px);background-size:4px 4px;animation:fade .4s ease}
.evo-stage{position:relative;width:min(320px,74vw);aspect-ratio:1;margin-bottom:12vh}
.evo-stage > div{position:absolute;inset:0;transition:opacity .06s}
.evo-stage svg{width:100%;height:100%}
.evo-text{position:absolute;left:0;right:0;bottom:9vh;padding:0 20px;text-align:center;color:#fff}
.evo-text h2{font:700 clamp(22px,4vw,30px)/1.2 var(--sans);letter-spacing:-.01em}
.evo-text p{margin-top:8px;color:#A9ADB6}
.evo-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.evo-flash.go{animation:whiteout 1s ease forwards}
.evo .px{position:absolute;width:6px;height:6px;background:var(--amber);pointer-events:none}

/* starter + hatch */
.starter{position:fixed;inset:0;z-index:120;overflow:auto;padding:28px 24px 64px;background:var(--shell);animation:fade .25s ease}
.starter-inner{max-width:1080px;margin:0 auto}
.starter-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:40px}
.starter h1{font:700 36px/1.1 var(--sans);letter-spacing:-.02em}
.starter .lede{max-width:58ch;margin-top:10px;font-size:15px;color:var(--ink-2)}
.species-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.species{display:block;width:100%;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);text-align:left;cursor:pointer;transition:border-color .15s}
.species:hover{border-color:var(--ink-2)}
.species[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.species .screen{border-radius:0;box-shadow:none;border-bottom:1px solid var(--line)}
.species .creature{display:block;width:132px;height:132px;margin:0 auto;padding-top:8px}
.species:hover .c-body{animation:bob 1.4s ease-in-out infinite}
.species-body{display:block;padding:12px 14px 14px}
.species-body b{font-size:15px;font-weight:600}
.species-body .type{margin-left:6px;font:500 11px var(--mono);color:var(--ink-3)}
.species-body .desc{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--ink-2)}
.pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:20px;padding:24px}
.pick h2{font:700 24px/1.2 var(--sans);letter-spacing:-.01em}
.hatch{position:fixed;inset:0;z-index:180;display:grid;place-items:center;background:#16171C;animation:fade .25s ease}
.hatch svg{display:block;width:180px;height:200px;margin:0 auto}
.hatch-egg.wobble{transform-origin:50% 90%;animation:eggWob .5s ease-in-out infinite}
.hatch p{margin-top:18px;text-align:center;font:500 14px var(--mono);color:#C9CCD2}

/* ---------- creature animation hooks ---------- */
.creature{display:block;overflow:visible;-webkit-tap-highlight-color:transparent}
.creature .c-body{transform-origin:100px 175px;transform-box:view-box}
.creature.bob .c-body{animation:bob 3.2s ease-in-out infinite}
.creature.floaty.bob .c-body{animation:floaty 3.6s ease-in-out infinite}
.creature.squish .c-body{animation:squish .38s cubic-bezier(.3,1.8,.5,1)}
.creature.shake .c-body{animation:gshake .45s linear}
.creature.hop .c-body{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
.creature.chomp .c-body{animation:chomp .5s ease}
.creature.purr .c-body{animation:purr .6s ease-in-out infinite}
.creature.hyper .c-body{animation:jitter .09s linear infinite!important}
.creature .eye-lid{transform-box:fill-box;transform-origin:center;transform:scaleY(0);transition:transform .07s}
.creature.blink .eye-lid{transform:scaleY(1)}
.creature.m-sleepy .eye-lid{transform:scaleY(.6)}
.creature .brow{transform-box:fill-box;transform-origin:center;transition:transform .25s}
.creature .blush{opacity:0;transition:opacity .3s}
.creature.m-happy .blush,.creature.m-party .blush{opacity:.7}
.creature.m-happy .brow-l{transform:translateY(-4px) rotate(-8deg)}
.creature.m-happy .brow-r{transform:translateY(-4px) rotate(8deg)}
.creature.m-angry .brow-l{transform:translateY(3px) rotate(18deg)}
.creature.m-angry .brow-r{transform:translateY(3px) rotate(-18deg)}
.creature.m-shock .brow-l{transform:translateY(-8px) rotate(-4deg)}
.creature.m-shock .brow-r{transform:translateY(-8px) rotate(4deg)}
.creature.m-focus .brow-l{transform:translateY(2px) rotate(10deg)}
.creature.m-focus .brow-r{transform:translateY(2px) rotate(-10deg)}
.creature .acc{opacity:0;transform:translateY(-10px);transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.creature.m-focus .acc-band,.creature.m-party .acc-hat,.creature.m-king .acc-crown{opacity:1;transform:none}
.creature.m-party{animation:hue 2s linear infinite}
.creature.m-angry{filter:saturate(1.6)}
.creature .rays{transform-box:view-box;transform-origin:100px 100px;animation:spinR 24s linear infinite}
.creature .orbit{transform-box:view-box;animation:spinR 7s linear infinite}
.creature .spk{transform-box:fill-box;transform-origin:center;animation:twinkle 1.8s ease-in-out infinite}
.creature .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flameF .35s ease-in-out infinite alternate}
.creature .glow{animation:glowP 1.6s ease-in-out infinite}
.creature .bulb{animation:glowP .9s steps(2) infinite}
.creature .gl-a{animation:glA 2.2s steps(1) infinite}
.creature .gl-b{animation:glB 2.2s steps(1) infinite}
.creature .drift{transform-box:fill-box;animation:driftUp 3s ease-in infinite}
.sil-white{filter:brightness(0) invert(1)!important}
.sil-dark{filter:var(--sil)!important}

@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-1.5deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes squish{0%{transform:scale(1,1)}30%{transform:scale(1.14,.84)}60%{transform:scale(.93,1.08)}100%{transform:scale(1,1)}}
@keyframes gshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px) rotate(-4deg)}40%{transform:translateX(7px) rotate(4deg)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes hop{0%{transform:translateY(0)}40%{transform:translateY(-24px) rotate(-6deg)}70%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}
@keyframes chomp{20%{transform:scale(1.1,.9)}40%{transform:scale(.95,1.06)}60%{transform:scale(1.08,.94)}80%{transform:scale(.98,1.02)}}
@keyframes purr{50%{transform:rotate(-3deg) scale(1.03,.97)}}
@keyframes jitter{0%{transform:translate(1px,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,0)}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes spinR{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{transform:scale(.3);opacity:.2}50%{transform:scale(1.1);opacity:1}}
@keyframes flameF{from{transform:scale(1,1) skewX(-4deg)}to{transform:scale(.9,1.15) skewX(5deg)}}
@keyframes glowP{50%{opacity:.45}}
@keyframes glA{0%{transform:translate(-3px,0)}30%{transform:translate(-6px,2px)}33%{transform:translate(-2px,0)}70%{transform:translate(-4px,-2px)}}
@keyframes glB{0%{transform:translate(3px,0)}30%{transform:translate(5px,-2px)}33%{transform:translate(2px,0)}70%{transform:translate(6px,1px)}}
@keyframes driftUp{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(-40px);opacity:0}}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes sink{to{opacity:0;transform:translateY(8px)}}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-42px)}}
@keyframes quake{0%,100%{transform:none}20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(3px,1px)}}
@keyframes scan{from{left:-30%}to{left:100%}}
@keyframes whiteout{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes zzz{0%{transform:translate(0,6px);opacity:0}40%{opacity:1}100%{transform:translate(10px,-18px);opacity:0}}
@keyframes eggWob{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes flash{0%,55%{background-color:rgba(242,165,22,.22)}100%{background-color:transparent}}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .g-roadmap{grid-template-columns:1fr}
  .phase-nav{position:static}
  .phase-list{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
  .phase-list li{flex:none;width:190px}
  .phase-item{background:var(--hover-soft)}
  .how{display:none}
}
@media (max-width:1100px){
  .g-today,.g-comp{grid-template-columns:1fr}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;overflow:visible;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;padding:16px;border-right:0;border-bottom:1px solid var(--line)}
  .brand{grid-column:1/-1}
  .main{padding:0 16px 56px}
  .topbar{margin:0 -16px 20px;padding:0 16px}
  .species-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pick{grid-template-columns:1fr}
  .g-settings{grid-template-columns:1fr}
}
@media (max-width:620px){
  .side{grid-template-columns:1fr}
  .creature-stage{height:184px}
  .creature-stage .creature{width:170px;height:170px}
  .streak .label{display:none}
  .view-head h1{font-size:25px}
  .next-quest{font-size:19px}
  .timer-time{font-size:40px}
  .q-tag{display:none}
  .q-sub{flex-wrap:wrap}
  .q-sub .q-text{flex-basis:calc(100% - 30px)}
  .q-sub .q-xp{margin-left:30px;margin-right:auto}
  .strip{gap:3px}
  .cell-box{height:28px}
  .phase-detail{padding:18px}
  .starter h1{font-size:28px}
  .species .creature{width:104px;height:104px}
  #toasts{left:16px;right:16px;justify-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* review-round fixes */
.grid > *{min-width:0}
.next-meta .mono{font-size:11px;color:var(--ink-2)}
@media (max-width:620px){
  .streak{display:none}
  .hint{display:none}
  .tabs{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
}
@media (max-width:620px){
  .table{min-width:0}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{padding:12px 0;border-bottom:1px solid var(--rule)}
  .table tr:last-child{border-bottom:0}
  .table td,.table tr:last-child td{padding:2px 0;border:0;text-align:left}
  .table td:nth-child(2),.table td:nth-child(3),.table td:nth-child(5),.table td:nth-child(6){display:inline-block;width:auto;margin-right:12px;font-size:12px;color:var(--ink-3)}
  .table td:nth-child(4){margin-top:6px}
  .table td:last-child{margin-top:8px}
}

/* ---------- boot loader ---------- */
.boot{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--shell);transition:opacity .4s ease,visibility .4s}
.boot.done{opacity:0;visibility:hidden}
.boot-inner{display:grid;justify-items:center;gap:16px}
.boot-mark{width:72px;height:72px;animation:bootIn .5s cubic-bezier(.2,.8,.3,1) both}
.boot-eyes{transform-box:fill-box;transform-origin:center;animation:bootBlink 2.6s steps(1) infinite}
.boot-name{font:700 20px/1 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.boot-bar{width:180px;height:3px;border-radius:2px;background:var(--track);overflow:hidden}
.boot-bar i{display:block;width:12%;height:100%;border-radius:2px;background:var(--ink);transition:width .35s ease}
.boot-note{min-height:16px;font:500 11px/1.4 var(--mono);color:var(--ink-3)}
@keyframes bootIn{from{opacity:0;transform:translateY(6px) scale(.94)}}
@keyframes bootBlink{0%,90%{transform:none}92%{transform:scaleY(.12)}95%,100%{transform:none}}

/* ---------- title screen ---------- */
.title{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;overflow:auto;background:var(--shell);animation:fade .35s ease}
.title.leaving{animation:titleOut .26s ease forwards}
.title-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px}
.title-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 24px 36px;text-align:center}
.title-name{font:700 clamp(44px,7.5vw,84px)/.95 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.title-lede{max-width:50ch;margin-top:16px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.title-device{width:min(720px,100%);margin-top:36px;text-align:left}
.title-screen{display:flex;flex-direction:column}
.title-stage{display:flex;align-items:flex-end;justify-content:center;min-height:170px;padding:14px 10px 4px}
.title-stage.lineup .creature{flex:1 1 0;min-width:0;max-width:96px;height:auto;aspect-ratio:1}
.title-stage.lineup .creature:nth-child(2n) .c-body{animation-delay:-1.1s}
.title-stage.lineup .creature:nth-child(3n) .c-body{animation-delay:-2.2s}
.title-stage.solo .creature{width:200px;height:200px}
.title-actions{display:flex;gap:10px;margin-top:28px}
.btn-lg{height:46px;min-width:160px;padding:0 24px;font-size:15px}
.title-hint{margin-top:12px;font-size:12px;color:var(--ink-3)}
.title-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:16px 28px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
@keyframes titleOut{to{opacity:0}}

/* ---------- companion: no box on click, keyboard focus shows on the screen ---------- */
.creature-stage .creature:focus{outline:none}
.screen:has(.creature:focus-visible){box-shadow:inset 0 0 0 2px var(--amber),inset 0 2px 6px rgba(0,0,0,.12)}

@media (max-width:620px){
  .title-top,.title-foot{padding-left:16px;padding-right:16px}
  .title-stage{flex-wrap:wrap;min-height:0}
  .title-stage.lineup .creature{flex:0 0 25%;max-width:25%}
  .title-stage.solo .creature{width:160px;height:160px}
  .title-lede{font-size:15px}
}

/* ---------- v7: numbers use the mono face (the pixel font made 5 look like S) ---------- */
.timer-time{font:600 44px/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.device-lv{font:600 12px/1 var(--mono);letter-spacing:.02em}
.big-num{font:600 30px/1.1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.modal-actions:empty{display:none}

/* ---------- quest rows: quiz + notes ---------- */
.q{flex-wrap:nowrap}
.q-main{flex:1;min-width:0}
.q-main .q-text{display:block}
.q-meta{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:2px;font:500 11px/1.5 var(--mono);color:var(--ink-3)}
.q-meta .ok{color:var(--ok)}
.q-meta .todo{color:var(--amber-ink)}
.q-state{width:18px;height:18px;flex:none;display:grid;place-items:center;border:1.5px solid var(--line-2);border-radius:4px;color:var(--on-strong)}
.q-state .ic{width:12px;height:12px;stroke-width:2.5}
.q.done .q-state{background:var(--ink);border-color:var(--ink)}
.q-state.part{border-color:var(--amber-deep);background:linear-gradient(to top,var(--amber-soft) var(--p,0%),transparent var(--p,0%))}
.q-actions{display:flex;align-items:center;gap:6px;flex:none}
.note-btn{position:relative;color:var(--ink-3)}
.note-btn.has{color:var(--ink)}
.note-btn.has::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.q .btn-icon.btn-sm{width:30px}

/* ---------- quiz ---------- */
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.quiz-steps{display:flex;gap:4px}
.quiz-steps i{width:26px;height:6px;border-radius:2px;background:var(--track)}
.quiz-steps i.pass{background:var(--ok)}
.quiz-steps i.miss{background:var(--bad)}
.quiz-steps i.now{background:var(--ink)}
.learn-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12px;color:var(--ink-3)}
.learn-links a{display:inline-flex;align-items:center;gap:3px;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.learn-links a .ic{width:12px;height:12px}
.quiz-q{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule)}
.quiz-q .num{font:500 12px var(--mono);color:var(--ink-3)}
.quiz-q h3{margin-top:4px;font:600 17px/1.4 var(--sans);white-space:pre-wrap}
.code{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);font:500 12.5px/1.55 var(--mono);white-space:pre;overflow-x:auto;color:var(--ink)}
.opts{display:grid;gap:8px;margin-top:14px}
.opt{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--field);text-align:left;font-size:14px;line-height:1.45;cursor:pointer}
.opt:hover{border-color:var(--ink-2)}
.opt .k{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line-2);border-radius:4px;font:600 12px var(--mono);color:var(--ink-2)}
.opt .code{margin:0;background:transparent;border:0;padding:0}
.opt[aria-checked=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt[aria-checked=true] .k{background:var(--ink);border-color:var(--ink);color:var(--on-strong)}
.opts.locked .opt{cursor:default}
.opts.locked .opt:not([aria-checked=true]){opacity:.55}
.opt.right{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.opt.right .k{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
.opt.wrong .k{background:var(--bad);border-color:var(--bad);color:#fff}
.verdict{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:10px 12px;border-radius:var(--r-sm);font-size:13px}
.verdict.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.verdict.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.verdict .ic{margin-top:1px}
.quiz-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px}
.quiz-bar .hint{font-size:12px}
.quiz-sum{margin-top:18px}
.quiz-sum li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--rule);font-size:13px}
.quiz-sum li:first-child{border-top:0}
.quiz-sum .ic{margin-top:2px}
.quiz-sum .pass{color:var(--ok)}
.quiz-sum .open{color:var(--ink-3)}
.quiz-score{font:600 30px/1.1 var(--mono);letter-spacing:-.02em}

/* ---------- notebook ---------- */
.g-notebook{grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start}
.search{position:relative}
.search .ic{position:absolute;left:12px;top:50%;margin-top:-8px;color:var(--ink-3);pointer-events:none}
.search .input{height:44px;padding-left:38px;font-size:15px}
.search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.nb-filter{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:12px 0 8px}
.nb-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:calc(100vh - 290px);overflow-y:auto}
.nb-item{width:100%;display:block;padding:10px 12px;border:1px solid transparent;border-radius:var(--r-sm);background:none;text-align:left;cursor:pointer}
.nb-item:hover{background:var(--hover-soft)}
.nb-item[aria-current=true]{background:var(--panel);border-color:var(--line)}
.nb-item b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.nb-item small{display:block;margin-top:2px;font:500 11px var(--mono);color:var(--ink-3)}
.nb-item .snip{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--ink-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
mark{background:var(--amber-soft);color:inherit;border-radius:2px;padding:0 1px}
.nb-empty{padding:18px 4px;font-size:13px;color:var(--ink-3)}
.editor h2{font:700 22px/1.25 var(--sans);letter-spacing:-.01em}
.editor .note-area{min-height:320px;margin-top:14px;font:400 14px/1.6 var(--sans)}
.editor-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-top:8px;font:500 11px var(--mono);color:var(--ink-3)}
.note-links{margin-top:16px}
.note-links ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.note-links a{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:13px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;overflow-wrap:anywhere}
.note-links a .ic{width:13px;height:13px;flex:none}
.modal-card .note-area{min-height:260px}

/* ---------- rules ---------- */
.rules{position:fixed;inset:0;z-index:255;overflow:auto;background:var(--shell);animation:fade .3s ease}
.rules-inner{max-width:760px;margin:0 auto;padding:18px 24px 48px}
.rules-head{margin:40px 0 24px}
.rules-head h1{font:700 clamp(30px,4.5vw,42px)/1.1 var(--sans);letter-spacing:-.03em}
.rules-head p{max-width:56ch;margin-top:10px;font-size:15px;color:var(--ink-2)}
.rule-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rule{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.rule .t-ico{width:40px;height:40px}
.rule b{display:block;font-size:16px;font-weight:600}
.rule p{margin-top:4px;color:var(--ink-2);line-height:1.55}
.rule.strong .t-ico{background:var(--device);border-color:var(--device);color:var(--amber)}
.rules-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:24px}
.rules-foot .check{margin:0;font-size:14px;color:var(--ink)}

@media (max-width:900px){
  .g-notebook{grid-template-columns:1fr}
  .nb-list{max-height:320px}
}
@media (max-width:620px){
  .q{flex-wrap:wrap}
  .q-main{flex-basis:calc(100% - 30px)}
  .q-actions{margin-left:30px}
  .quiz-steps i{width:18px}
  .opt{font-size:13px}
  .rules-foot{flex-direction:column;align-items:stretch}
}
.search input:not(:placeholder-shown)~kbd{display:none}
@media (max-width:1400px){ .streak .label{display:none} .tab{padding:0 9px} .top-actions .streak{margin-right:6px} }

/* ---------- v8: floating companion ---------- */
.pip-open{width:100%}
.device-away{display:grid;justify-items:center;gap:8px;padding:22px 16px;border:1px dashed var(--line-2);border-radius:14px;text-align:center;font-size:13px;color:var(--ink-2)}
.device-away .mark{width:34px;height:34px}
.device-away b{font-size:14px;color:var(--ink)}
body.pip{margin:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--device);color:#E7E9EC}
body.pip #pipSlot{flex:1;min-height:0;display:flex}
body.pip .device{flex:1;min-height:0;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none;padding:8px 8px 6px}
body.pip .screen{flex:1;min-height:0;display:flex;flex-direction:column}
body.pip .creature-stage{flex:1;min-height:110px;height:auto}
body.pip .creature-stage .creature{width:auto;height:100%;max-height:196px;aspect-ratio:1}
body.pip .dialog{min-height:52px}
.pip-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 10px;border-top:1px solid #33363E}
.pip-time{display:block;font:600 20px/1 var(--mono);color:#fff;font-variant-numeric:tabular-nums}
.pip-quip{display:block;margin-top:4px;font:500 10px/1 var(--mono);color:#9CA0A8}
.pip-actions{display:flex;gap:6px}
.pip-bar .btn{width:34px;height:34px;background:#2C2F36;border-color:#3D4149;color:#E7E9EC}
.pip-bar .btn:hover{background:#383B43}
.pip-bar .btn:disabled{opacity:.4}
.pip-bar .btn-danger{color:#F08A78;border-color:#5E3029}

/* ---------- v9: sticker art ---------- */
.screen,.specimen .screen,.species .screen{background-color:color-mix(in srgb,var(--accent) 30%,#FFFDF8);background-image:none;box-shadow:inset 0 0 0 2px rgba(46,42,64,.9)}
.species .screen,.specimen .screen{box-shadow:none;border-bottom:2px solid #2E2A40}
body.pip .screen{box-shadow:inset 0 0 0 2px rgba(46,42,64,.9)}
.evo-step{background:color-mix(in srgb,var(--accent) 16%,#FFFDF8);border-color:color-mix(in srgb,var(--accent) 40%,#2E2A40)}
.evo-step b{color:#2E2A40}
.evo-step small{color:#6B6880}
.evo-step.now{border-color:#2E2A40;box-shadow:inset 0 0 0 1px #2E2A40}
.creature .blush{opacity:.55}
.creature.m-happy .blush,.creature.m-party .blush{opacity:.95}
.creature .brow{opacity:0;transition:opacity .2s,transform .25s}
.creature.m-angry .brow,.creature.m-shock .brow,.creature.m-focus .brow{opacity:1}
.creature.m-angry{filter:saturate(1.25)}

/* ---------- v10: floating window performance ---------- */
/* Looping SVG animations repaint the whole creature each frame and fight video playback for the GPU.
   In the floating window everything is still except a transform on the <svg> itself (compositor only)
   and the short reactions to poking and feeding. */
body.pip *,body.pip *::before,body.pip *::after{animation:none!important;transition:none!important}
body.pip .creature-stage{contain:layout paint}
body.pip .creature-stage .creature{animation:pipBob 4s ease-in-out infinite!important;will-change:transform}
body.pip .creature.squish .c-body{animation:squish .38s cubic-bezier(.3,1.8,.5,1)!important}
body.pip .creature.shake .c-body{animation:gshake .45s linear!important}
body.pip .creature.hop .c-body{animation:hop .6s cubic-bezier(.3,1.6,.5,1)!important}
body.pip .creature.chomp .c-body{animation:chomp .5s ease!important}
@keyframes pipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------- v11: calm floating window ---------- */
body.pip .creature-stage .creature{animation:none!important;will-change:auto}
body.pip.awake .creature-stage .creature{animation:pipBob 4s ease-in-out infinite!important;will-change:transform}
body.pip .device{padding:6px 6px 4px}
body.pip .device-top{padding:0 2px 6px}
body.pip .dialog{min-height:0;margin:0 4px 4px;padding:6px 8px;font-size:12px}
body.pip .creature-stage{min-height:90px}
body.pip .creature-stage .creature{max-height:150px}
body.pip .device-foot{display:none}
.pip-bar{padding:6px 8px 8px}
.pip-time{font-size:17px}
.pip-bar .btn{width:30px;height:30px}

/* ---------- sign-in screen + sync banner ---------- */
#authRoot:empty{display:none}
.auth{position:fixed;inset:0;z-index:260;display:flex;flex-direction:column;overflow:auto;background:var(--shell);animation:fade .3s ease}
.auth-home{color:inherit;text-decoration:none}
.auth-card{width:min(420px,calc(100% - 32px));margin:auto;padding:28px 28px 24px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.auth-card h1{font:700 30px/1.1 var(--sans);letter-spacing:-.02em}
.auth-lede{margin-top:8px;color:var(--ink-2)}
.auth-google{width:100%;height:42px;margin-top:22px;font-size:14px}
.auth-or{display:flex;align-items:center;gap:12px;margin:20px 0 4px;font:500 11px/1 var(--mono);color:var(--ink-3)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-pw{position:relative;display:block}
.auth-pw .input{padding-right:64px}
.auth-pw .btn{position:absolute;right:4px;top:5px}
.auth-submit{width:100%;height:42px;margin-top:4px;font-size:14px}
.auth-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:13px;color:var(--ink-2)}
.auth-ok{color:var(--ok)}
.linkish{padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linkish:disabled{opacity:.5;cursor:default}
.auth .title-foot a{color:inherit}
.sync-banner{position:fixed;left:50%;bottom:16px;z-index:400;transform:translateX(-50%);width:min(640px,calc(100% - 32px));display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);box-shadow:0 20px 40px -16px rgba(0,0,0,.45);font-size:14px}
.sync-banner span{flex:1}
.noscript{padding:24px;text-align:center}
@media (max-width:620px){
  .auth-card{padding:22px 18px 18px}
  .auth .title-top{padding:14px 16px}
}

/* ---------- workshop: code editor + live preview ---------- */
:root{
  --code-bg:#FFFFFF; --code-line:#F6F5F1; --code-sel:rgba(242,165,22,.24);
  --syn-keyword:#9B3E8E; --syn-string:#2C7A4B; --syn-number:#B05A00; --syn-comment:#8B8F98; --syn-tag:#B4432D;
  --syn-attr:#86620A; --syn-fn:#2D5FA8; --syn-type:#7A4E00; --syn-var:#1E2025; --syn-punct:#7E8189;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]){
  --code-bg:#141518; --code-line:#1C1E23; --code-sel:rgba(242,165,22,.22);
  --syn-keyword:#E08BD3; --syn-string:#9AD676; --syn-number:#F4BE52; --syn-comment:#6F737C; --syn-tag:#FF8A5B;
  --syn-attr:#F2C46B; --syn-fn:#8FC3FF; --syn-type:#F4BE52; --syn-var:#ECEDEF; --syn-punct:#8B8F98;
}
}
:root[data-theme=dark]{
  --code-bg:#141518; --code-line:#1C1E23; --code-sel:rgba(242,165,22,.22);
  --syn-keyword:#E08BD3; --syn-string:#9AD676; --syn-number:#F4BE52; --syn-comment:#6F737C; --syn-tag:#FF8A5B;
  --syn-attr:#F2C46B; --syn-fn:#8FC3FF; --syn-type:#F4BE52; --syn-var:#ECEDEF; --syn-punct:#8B8F98;
}
.f-html{--fc:#E8664F} .f-css{--fc:#5B8DEF} .f-js{--fc:#F2A516}

/* the open editor uses the full width of the main column */
.main-inner:has(> #view-workshop:not([hidden]) .ws){max-width:none}
.main:has(#view-workshop:not([hidden]) .ws){padding-bottom:16px}

/* gallery */
.ws-section{margin:26px 0 10px;font:600 13px/1.3 var(--sans);color:var(--ink-2)}
.ws-starts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ws-start{display:flex;align-items:center;gap:14px;min-height:88px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.ws-start:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.ws-start small{display:block;margin-bottom:3px;font:500 11px/1.3 var(--mono);color:var(--ink-3)}
.ws-start b{display:block;font:600 15px/1.3 var(--sans)}
.ws-start-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--panel-2);color:var(--ink)}
.ws-start-ico .ic{width:20px;height:20px}
.ws-start.quest{background:var(--device);border-color:var(--device);color:#fff}
.ws-start.quest:hover{border-color:var(--amber)}
.ws-start.quest small{color:var(--amber)}
.ws-start.quest .ws-start-ico{background:var(--amber);color:#26282F}
.ws-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ws-card{height:100%;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.ws-card-open{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.ws-card-open:hover{background:var(--hover-soft)}
.ws-card-top b{display:block;font:600 16px/1.3 var(--sans)}
.ws-card-top small{display:block;margin-top:2px;font:500 11px var(--mono);color:var(--ink-3)}
.ws-card-quest{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mono);color:var(--amber-ink)}
.ws-card-quest .ic{width:14px;height:14px}
.ws-card-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.ws-card-files span{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:4px;background:var(--panel-2);font:500 11px var(--mono);color:var(--ink-2)}
.ws-card-files i,.ws-file i{width:7px;height:7px;flex:none;border-radius:2px;background:var(--fc)}
.ws-card-files em{font-style:normal;color:var(--ink-3)}
.ws-card-actions{display:flex;justify-content:flex-end;gap:2px;padding:6px 8px;border-top:1px solid var(--rule)}
.ws-empty{margin-top:0}
.ws-skeleton{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.ws-skeleton div{height:88px;border-radius:var(--r);background:linear-gradient(90deg,var(--panel-2),var(--panel),var(--panel-2));background-size:200% 100%;animation:wsShimmer 1.2s linear infinite}
@keyframes wsShimmer{to{background-position:-200% 0}}

/* editor layout */
.ws{display:flex;flex-direction:column;gap:12px;height:calc(100dvh - 101px);min-height:560px}
.ws-bar{display:flex;align-items:center;gap:8px 10px}
.ws-bar > *{flex:none}
.ws-bar > .ws-name{flex:0 1 auto}
.ws-name{min-width:8ch;max-width:420px;field-sizing:content;height:36px;padding:0 8px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;font:700 22px/1 var(--sans);letter-spacing:-.01em}
.ws-name:hover{border-color:var(--line)}
.ws-name:focus{outline:none;border-color:var(--ink);background:var(--field)}
.ws-bar > .ws-quest{flex:0 3 auto;min-width:0}
.ws-quest:empty{display:none}
.ws-quest-chip{display:inline-flex;align-items:center;gap:6px;max-width:min(320px,100%);height:28px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink-2);font:500 11px var(--mono);cursor:pointer}
.ws-quest-chip:hover{border-color:var(--ink-3);color:var(--ink)}
.ws-quest-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-quest-chip .ic{width:14px;height:14px;flex:none}
.ws-status{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mono);color:var(--ink-3)}
.ws-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.ws-status.busy::before{background:var(--amber)}
.ws-status.bad{color:var(--bad)}
.ws-status.bad::before{background:var(--bad)}
.ws-bar-gap{flex:1}
.ws-auto{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.ws-auto input{width:15px;height:15px;margin:0;accent-color:var(--ink)}
.ws-panes{display:none}
.ws-body{flex:1;min-height:0;display:grid;grid-template-columns:var(--ws-left,50%) 14px minmax(0,1fr)}
.ws-code{min-width:0;display:flex;flex-direction:column;overflow:hidden;container-type:inline-size;border:1px solid var(--line);border-radius:var(--r);background:var(--code-bg)}
.ws-files{display:flex;align-items:flex-end;gap:2px;padding:6px 6px 0;border-bottom:1px solid var(--line);background:var(--panel-2)}
.ws-file{display:flex;align-items:center;gap:7px;height:32px;margin-bottom:-1px;padding:0 12px;border:1px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;background:none;color:var(--ink-3);font:500 12px var(--mono);cursor:pointer}
.ws-file:hover{color:var(--ink)}
.ws-file[aria-selected=true]{border-color:var(--line);background:var(--code-bg);color:var(--ink)}
.ws-files-hint{margin:0 6px 8px auto;font:500 10px var(--mono);color:var(--ink-3);white-space:nowrap}
@container (max-width:600px){.ws-files-hint{display:none}}
.ws-files-hint kbd{padding:1px 4px;border:1px solid var(--line);border-radius:3px;font:inherit}
.ws-editor{flex:1;min-height:0}
.ws-editor .cm-editor{height:100%}
.ws-editor-wait{padding:16px;font:500 12px var(--mono);color:var(--ink-3)}
.ws-split{position:relative;cursor:col-resize;touch-action:none}
.ws-split::after{content:"";position:absolute;left:6px;top:calc(50% - 22px);width:2px;height:44px;border-radius:2px;background:var(--line-2);transition:background .15s}
.ws-split:hover::after,.ws-split:focus-visible::after,.dragging .ws-split::after{background:var(--ink-2)}
.ws-body.dragging{cursor:col-resize;user-select:none}
.ws-body.dragging iframe{pointer-events:none}

/* preview: the handheld device again, with a real browser page on its screen */
.ws-preview.device{min-width:0;display:flex;flex-direction:column;padding:8px 10px 10px}
.ws-preview .device-top{gap:8px}
.ws-preview .device-top .name{flex:1}
.ws-device.seg{border-color:#3A3D46;background:transparent}
.ws-device.seg button{height:22px;min-width:0;padding:0 8px;border-left-color:#3A3D46;color:#A9ADB6;font-size:10px}
.ws-device.seg button:hover{background:#2C2F35}
.ws-device.seg button[aria-pressed=true]{background:var(--amber);color:#2A1C00}
.ws-icon-btn{display:grid;place-items:center;width:26px;height:24px;padding:0;border:0;border-radius:4px;background:none;color:#A9ADB6;cursor:pointer}
.ws-icon-btn:hover{background:#2C2F35;color:#fff}
.led.busy{background:var(--amber);animation:wsLed .8s steps(2) infinite}
.led.ok{background:#52B983;box-shadow:0 0 6px rgba(82,185,131,.7)}
.led.bad{background:#E8664F;box-shadow:0 0 6px rgba(232,102,79,.7)}
@keyframes wsLed{50%{opacity:.35}}
.ws-stage.screen{position:relative;flex:1;min-height:0;display:flex;justify-content:center;--accent:#9EC3E6}
.ws-frame-wrap{width:100%;height:100%;background:#fff;transition:width .25s ease}
.ws-stage[data-device=tablet] .ws-frame-wrap{width:min(820px,calc(100% - 24px));height:calc(100% - 24px);margin:12px 0;border-radius:10px;overflow:hidden;box-shadow:0 0 0 2px #26282F,0 12px 30px -12px rgba(0,0,0,.4)}
.ws-stage[data-device=phone] .ws-frame-wrap{width:min(390px,calc(100% - 24px));height:calc(100% - 24px);margin:12px 0;border-radius:18px;overflow:hidden;box-shadow:0 0 0 3px #26282F,0 12px 30px -12px rgba(0,0,0,.4)}
.ws-frame-wrap iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.ws-stuck{position:absolute;inset:auto 16px 16px;display:grid;gap:4px;padding:12px 14px;border:2px solid #26282F;border-radius:6px;background:#fff;color:#1E2025;font-size:13px}
.ws-stuck b{color:#C23B2A}
.ws-stuck code{font:500 12px var(--mono)}
.ws-console{display:flex;flex-direction:column;height:168px;margin-top:10px;overflow:hidden;border-radius:6px;background:#1B1D21;color:#D9DBDF;font:400 12px/1.5 var(--mono)}
.ws-console.closed{height:auto}
.ws-console.closed .ws-logs{display:none}
.ws-console-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 4px 10px;border-bottom:1px solid #2C2F35}
.ws-console-toggle{display:flex;align-items:center;gap:7px;padding:0;border:0;background:none;color:#A9ADB6;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.ws-console-toggle .ic{width:14px;height:14px}
.ws-counts{display:inline-flex;gap:4px}
.ws-counts span{display:inline-grid;place-items:center;min-width:18px;height:16px;padding:0 5px;border-radius:8px;font:600 10px var(--mono);letter-spacing:0}
.c-err{background:#E8664F;color:#fff}
.c-warn{background:#F2A516;color:#2A1C00}
.ws-logs{flex:1;margin:0;padding:2px 0;overflow:auto;list-style:none}
.ws-logs li{display:flex;align-items:flex-start;gap:8px;padding:3px 10px;border-bottom:1px solid #22252A}
.ws-logs .ic{width:13px;height:13px;margin-top:3px;flex:none}
.ws-caret{flex:none;width:13px;color:#6F737C;text-align:center}
.ws-log-text{min-width:0;flex:1;white-space:pre-wrap;word-break:break-word}
.lv-error{background:rgba(232,102,79,.1);color:#FFA290}
.lv-warn{background:rgba(242,165,22,.08);color:#F4BE52}
.ws-line{flex:none;padding:0;border:0;background:none;color:#8FC3FF;font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ws-log-empty{color:#6F737C}

/* narrow screens: one pane at a time */
@media (max-width:1100px){
  .ws{height:auto;min-height:0}
  .ws-bar{flex-wrap:wrap}
  .ws-panes{display:inline-flex}
  .ws-body{grid-template-columns:minmax(0,1fr)}
  .ws-split{display:none}
  .ws-code,.ws-preview.device{height:calc(100dvh - 190px);min-height:460px}
  .ws[data-pane=code] .ws-preview{display:none}
  .ws[data-pane=preview] .ws-code{display:none}
  .ws-starts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .ws-hide-sm{display:none}
  .ws-name{max-width:60vw;font-size:18px}
  .ws-quest{display:none}
  .ws-device{display:none}
  .ws-skeleton{grid-template-columns:minmax(0,1fr)}
}