/* Shared learning controls: page-local tokens keep both themes intact. */
.library-icon{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border-radius:6px;color:var(--tile);background:color-mix(in srgb,var(--tile) 14%,transparent);border:1px solid color-mix(in srgb,var(--tile) 35%,transparent)}
.tone-blue{--tile:var(--icon-blue)}.tone-amber{--tile:var(--icon-amber)}.tone-emerald{--tile:var(--icon-emerald)}.tone-gold{--tile:var(--icon-gold)}.tone-cyan{--tile:var(--icon-cyan)}.tone-purple{--tile:var(--icon-purple)}.tone-rose{--tile:var(--icon-rose)}.tone-teal{--tile:var(--icon-teal)}.tone-silver{--tile:var(--icon-silver)}
.sitenav{position:sticky;top:0;z-index:40;margin:0 -20px var(--space-5);padding:6px var(--space-5);background:var(--bg);border-bottom:1px solid var(--line)}.sitenav-in{max-width:1080px;margin:auto;display:flex;align-items:center;gap:14px}.sitenav a{display:flex;align-items:center;gap:var(--space-2);min-height:44px;text-decoration:none;color:var(--fg-dim);font:500 13px var(--font-body);border-radius:6px}.sitenav a:hover,.sitenav a:focus-visible{color:var(--fg);background:var(--surface-2)}.sitenav .home{margin-right:auto;color:var(--brass)}.sitenav-links{display:flex;gap:14px}.sitenav-menu,.mobile-label{display:none}.sitenav-menu{margin:0;padding:0;border:0;position:relative;background:transparent}.sitenav-menu summary{display:grid;place-items:center;width:44px;height:44px}.sitenav-menu>div{position:absolute;right:0;top:48px;min-width:230px;background:var(--surface);border:1px solid var(--line);padding:var(--space-2);display:grid;gap:var(--space-1)}.sitenav-menu a{padding:var(--space-1) var(--space-2)}
body[data-game]{padding-top:0}.map,.track-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:var(--space-4)}.world{border:1px solid var(--line);border-radius:8px;padding:var(--space-4);background:var(--surface);min-width:0}.world-head{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-4);min-height:56px}.world-disc{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,var(--bg) 0 2px,var(--surface-2) 2px 4px);border:1px solid var(--brass);color:var(--brass);font-family:var(--font-mono)}.world-title{font:600 16px/1.3 var(--font-body);margin:0;flex:1}.dots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}.level-dot{padding:var(--space-1) 0;display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:0;min-width:0;cursor:pointer;color:var(--fg)}.level-dot .circle{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font:14px var(--font-mono)}.level-dot.current .circle,.level-dot[aria-pressed=true] .circle{border-color:var(--brass);background:var(--surface-2)}.level-dot.cleared .circle{border-color:var(--ok);color:var(--ok)}.level-dot small{font:10px var(--font-mono);color:var(--brass);height:15px}.level-dot:disabled{opacity:.4;cursor:not-allowed}.kitchen-note{display:flex;gap:var(--space-2);align-items:center;font:12px/1.5 var(--font-body);color:var(--fg-dim);margin:var(--space-3) 0}.kitchen-note svg{width:22px;height:22px;flex:none;color:var(--petrol)}.kitchen-card{margin-top:var(--space-3);border:1px solid var(--line);border-radius:6px;padding:var(--space-2) 10px;background:var(--surface)}.kitchen-card summary{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;color:var(--petrol);font:600 12px var(--font-body)}.kitchen-card summary svg{width:20px;height:20px}.game-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin:var(--space-3) 0}.game-stats dt{font:10px var(--font-mono);color:var(--fg-dim)}.game-stats dd{margin:0;color:var(--brass);font:600 16px var(--font-mono)}.game-advance{display:grid;gap:var(--space-2);margin:14px 0}.game-advance .rankname{font:600 14px var(--font-body)}.game-advance .lvlbar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}.game-advance .lvlbar i{display:block;height:100%;background:var(--brass)}.game-adv-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;font:12px var(--font-mono);color:var(--fg-dim)}.game-adv-row svg{width:34px;height:34px}.card,.stage{padding:var(--space-4);border-radius:8px}.wrap{gap:var(--space-6)}button,.btn,select{font:600 14px var(--font-body);border-radius:6px}h1,h2,h3,.q{font-family:var(--font-body);letter-spacing:0}.eyebrow,.tag{letter-spacing:0}
@media(max-width:820px){.map,.track-map{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.sitenav{margin:0 -12px var(--space-4);padding:6px var(--space-3)}.sitenav-links,.desktop-label{display:none}.sitenav-menu,.mobile-label{display:block}}@media(max-width:480px){.map,.track-map{grid-template-columns:minmax(0,1fr)}}

:root{--icon-blue:#60a5fa;--icon-amber:#dba65c;--icon-emerald:#69c69b;--icon-gold:#dfc65c;--icon-cyan:#69cada;--icon-purple:#b897dd;--icon-rose:#dd90ad;--icon-teal:#73c9bd;--icon-silver:#a9b4c6}
:root[data-theme="light"]{--icon-blue:#2869a8;--icon-amber:#966218;--icon-emerald:#25774d;--icon-gold:#82681a;--icon-cyan:#227c8c;--icon-purple:#8055a8;--icon-rose:#a24c6b;--icon-teal:#237b6e;--icon-silver:#59677a}
#album.card{border:0;background:transparent;padding:0}.deck:has(#gameCard[hidden]):has(#finishCard[hidden]){grid-template-columns:minmax(0,1fr)}.sitenav summary{border:0;padding:0}.sitenav details>div{top:48px;gap:var(--space-1)}.sitenav .sitenav-menu summary{list-style:none}.sitenav .sitenav-menu>div{display:grid}.sitenav .sitenav-menu a{white-space:nowrap}

.rankname,.daily b,.shelf summary{font-family:var(--font-body)}.sitenav-menu summary:hover{color:var(--brass)}
/* Keyboard shortcuts */
[data-kbd]::after{content:attr(data-kbd);margin-left:var(--space-2);padding:1px 5px;border:1px solid var(--line);border-radius:4px;font:500 11px var(--font-mono,ui-monospace,monospace);opacity:.75}
html[data-os=touch] [data-kbd]::after,html[data-os=touch] .gk-btn{display:none}
.gk-modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:var(--space-4);background:color-mix(in srgb,var(--bg) 70%,transparent)}.gk-modal[hidden]{display:none}
.gk-card{width:min(420px,100%);max-height:90vh;overflow:auto;padding:var(--space-4);border:1px solid var(--brass);border-radius:10px;background:var(--surface);color:var(--fg);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.gk-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.gk-head h2{margin:0;font-size:18px}.gk-os{margin-right:auto;font-size:12px;color:var(--fg-dim)}
.gk-close{min-width:36px;min-height:36px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--fg);cursor:pointer}
.gk-row{display:flex;justify-content:space-between;gap:var(--space-3);padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}.gk-keys{color:var(--fg-dim);font-size:12px;text-align:right}
.gk-card kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--surface-2);color:var(--fg);font:500 12px var(--font-mono,ui-monospace,monospace)}
.gk-toggle{margin-top:var(--space-3);min-height:36px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--brass);cursor:pointer}
/* Alex — the kitchen sous-chef */
.alex{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);max-width:calc(100vw - 32px);pointer-events:none}
.alex>*{pointer-events:auto}
.alex-avatar{position:relative;width:58px;height:58px;padding:var(--space-1);border:1px solid var(--brass);border-radius:50%;background:var(--surface);color:var(--fg);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.alex-avatar:focus-visible,.alex-act:focus-visible,.alex-x:focus-visible,.gk-close:focus-visible,.gk-toggle:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.alex-face{width:100%;height:100%}.alex-hat{fill:var(--surface-2);stroke:currentColor;stroke-width:1.5}.alex-skin{fill:color-mix(in srgb,var(--brass) 30%,var(--surface));stroke:currentColor;stroke-width:1.5}.alex-coat{fill:var(--surface-2);stroke:currentColor;stroke-width:1.5}
.alex-tag{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);padding:0 6px;border-radius:4px;background:var(--brass);color:var(--bg);font:700 10px/16px var(--font-body);letter-spacing:.06em;white-space:nowrap}
.alex.muted .alex-avatar{width:44px;height:44px;opacity:.7}
.alex-bubble{position:relative;width:min(320px,calc(100vw - 32px));padding:var(--space-3) 14px;border:1px solid var(--brass);border-radius:12px 12px 4px 12px;background:var(--surface);color:var(--fg);font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.alex.open .alex-bubble{animation:alexIn .28s ease-out}@keyframes alexIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
.alex-msg{margin:0 22px 0 0}.alex-code{margin:var(--space-2) 0 0;padding:var(--space-2);border-radius:6px;background:var(--surface-2);font:12px/1.4 var(--font-mono,ui-monospace,monospace);white-space:pre-wrap;overflow-x:auto}
.alex-x{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;background:transparent;color:var(--fg-dim);cursor:pointer;font-size:18px}
.alex-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.alex-acts:empty{display:none}
.alex-act{min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--fg);font:500 13px var(--font-body);cursor:pointer}.alex-act.primary{border-color:var(--brass);background:var(--brass);color:var(--bg)}
.alex-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.alex-frame{margin:var(--space-2) 0 0;padding:var(--space-2);border-radius:6px;background:var(--surface-2);font:13px/1.45 var(--font-mono,ui-monospace,monospace);white-space:pre-wrap}
@media (prefers-reduced-motion:reduce){.alex.open .alex-bubble{animation:none}}
@media (max-width:560px){.alex{right:10px;bottom:10px}.alex-avatar{width:48px;height:48px}}

/* Learning glass: shared presentation only. Blur is reserved for parent planes,
   never repeated nodes, badges, tiles or table rows. */
:is(body[data-game],body:has(.progress-page)) {
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-12:48px;
  --glass-bg:hsl(35 15% 13% / .78);
  --glass-text-bg:hsl(35 15% 13% / .92);
  --glass-solid:hsl(35 15% 13%);
  --glass-border:hsl(0 0% 100% / .12);
  --glass-blur:blur(20px) saturate(160%);
  --glass-shadow:inset 0 1px 0 hsl(0 0% 100% / .09),0 4px 8px hsl(0 0% 0% / .08),0 20px 48px hsl(0 0% 0% / .18);
  --glass-highlight:linear-gradient(180deg,hsl(0 0% 100% / .07),transparent 48px);
  --glass-radius:24px;--glass-code:hsl(35 15% 9% / .97);
  --glass-open:color-mix(in srgb,var(--brass) 16%,var(--glass-solid));
  --glass-done:color-mix(in srgb,var(--ok) 18%,var(--glass-solid));
  --glass-locked:color-mix(in srgb,var(--line) 60%,var(--glass-solid));
  --glass-aura-a:hsl(175 50% 45% / .16);
  --glass-aura-b:hsl(38 70% 55% / .12);
  --glass-aura-c:hsl(210 60% 55% / .12);
  isolation:isolate;
}
@media(prefers-color-scheme:light) {
  :is(body[data-game],body:has(.progress-page)) {
    --glass-bg:hsl(40 50% 98% / .76);--glass-text-bg:hsl(40 50% 98% / .94);
    --glass-solid:hsl(40 50% 98%);--glass-code:hsl(40 30% 96% / .98);
    --glass-border:hsl(0 0% 100% / .35);
    --glass-highlight:linear-gradient(180deg,hsl(0 0% 100% / .7),transparent 48px);
    --glass-shadow:inset 0 1px 0 hsl(0 0% 100% / .8),0 3px 8px hsl(35 30% 30% / .04),0 20px 48px hsl(35 30% 30% / .09);
  }
}
html[data-theme=light] body[data-game] {
  --glass-bg:hsl(40 50% 98% / .76);--glass-text-bg:hsl(40 50% 98% / .94);
  --glass-solid:hsl(40 50% 98%);--glass-code:hsl(40 30% 96% / .98);
  --glass-border:hsl(0 0% 100% / .35);
  --glass-highlight:linear-gradient(180deg,hsl(0 0% 100% / .7),transparent 48px);
  --glass-shadow:inset 0 1px 0 hsl(0 0% 100% / .8),0 3px 8px hsl(35 30% 30% / .04),0 20px 48px hsl(35 30% 30% / .09);
}
html[data-theme=dark] body[data-game] {
  --glass-bg:hsl(35 15% 13% / .78);--glass-text-bg:hsl(35 15% 13% / .92);
  --glass-solid:hsl(35 15% 13%);--glass-code:hsl(35 15% 9% / .97);
  --glass-border:hsl(0 0% 100% / .12);
  --glass-highlight:linear-gradient(180deg,hsl(0 0% 100% / .07),transparent 48px);
  --glass-shadow:inset 0 1px 0 hsl(0 0% 100% / .09),0 4px 8px hsl(0 0% 0% / .08),0 20px 48px hsl(0 0% 0% / .18);
}
:is(body[data-game],body:has(.progress-page))::before {
  content:"";position:fixed;inset:-12%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 12% 20%,var(--glass-aura-a),transparent 52%),radial-gradient(ellipse at 85% 40%,var(--glass-aura-b),transparent 50%),radial-gradient(ellipse at 40% 90%,var(--glass-aura-c),transparent 55%);
  animation:learning-drift 36s ease-in-out infinite alternate;
}
@keyframes learning-drift {to{transform:translate3d(3%,-3%,0) scale(1.04)}}
body[data-game]{padding:0 var(--space-8) 400px;line-height:1.6}
body[data-game] .wrap{max-width:1100px;gap:var(--space-8)}
body[data-game] .wrap>header{padding-top:var(--space-2)}
body[data-game] .sitenav{margin:0 calc(-1 * var(--space-8)) var(--space-8);padding:var(--space-4) var(--space-8);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
body[data-game] .sitenav-in{max-width:1100px;gap:var(--space-6)}
body[data-game] .sitenav-links{gap:var(--space-6)}
body[data-game] .sitenav-menu>div{top:56px;padding:var(--space-3);border-radius:20px;background:var(--glass-text-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
body[data-game] :is(.card,.stage,.topbar),
body:has(.progress-page) :is(.progress-card,.progress-signin,.progress-account,.progress-alex,.learning-nav),
:is(body[data-game],body:has(.progress-page)) :is(.gk-card,.gs-pop,.alex-bubble,.toast){
  background:var(--glass-highlight),var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);box-shadow:var(--glass-shadow);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
}
body[data-game] :is(.card,.stage),.progress-page .progress-card{padding:var(--space-7)}
body[data-game] :is(#gameCard,.stage),.progress-page :is(.progress-card,.progress-signin){background-color:var(--glass-text-bg)}
body[data-game] .topbar{padding:var(--space-4) var(--space-6);gap:var(--space-4);overflow:visible}
body[data-game] :is(.row,.settings,.album-head,.track-choice,.album-tools,.play-head){gap:var(--space-3) var(--space-4)}
body[data-game] :is(.deck,.stack,.play-layout){gap:var(--space-8)}
body[data-game] :is(.track-map,.map){gap:var(--space-6);margin-top:var(--space-6)}
body[data-game] .world{padding:var(--space-6);border-radius:24px;background:var(--glass-highlight),var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
/* One refracting plane beneath the map's many cards. */
body[data-game] :is(.track-map,.map){backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:24px}
body[data-game] .world-head{gap:var(--space-4);margin-bottom:var(--space-6);min-height:56px}
body[data-game] .world-title{line-height:1.55}
body[data-game] .dots,.progress-page .progress-node-row{gap:var(--space-3)}
body[data-game] .level-dot{padding:0;gap:var(--space-2);background:transparent;border-radius:0}
body[data-game] .level-dot .circle,.progress-page .progress-node span{
  width:44px;height:44px;flex:none;background:var(--glass-open);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-border);font-size:14px;
}
body[data-game] .level-dot.cleared .circle,.progress-page .progress-node.cleared span{
  background:var(--glass-done);border-color:var(--ok);box-shadow:0 0 0 2px var(--glass-done),inset 0 1px 0 var(--glass-border);
}
body[data-game] .level-dot.cleared .circle::after,.progress-page .progress-node.cleared span::after{content:"✓";position:absolute;right:-3px;bottom:-2px;font-size:10px;border-radius:50%;background:var(--ok);color:var(--bg);width:16px;height:16px;display:grid;place-items:center}
body[data-game] .level-dot .circle,.progress-page .progress-node span{position:relative}
body[data-game] .level-dot:disabled,.progress-page .progress-node.locked{opacity:.65}
body[data-game] .level-dot:disabled .circle,.progress-page .progress-node.locked span{background:var(--glass-locked);border-style:dashed}
body[data-game] :is(.kitchen-card,.shelf,.daily,.ingredients,.answer-result){margin-top:var(--space-6);padding:var(--space-4) var(--space-5);border-radius:20px;border:1px solid var(--glass-border);background:var(--glass-highlight),var(--glass-text-bg)}
body[data-game] #album{padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
body[data-game] .daily{margin:var(--space-6) 0;border-color:color-mix(in srgb,var(--brass) 45%,var(--glass-border));gap:var(--space-4)}
body[data-game] :is(.game-stats,.game-advance){gap:var(--space-4);margin:var(--space-6) 0}
body[data-game] :is(.kitchen-note,.note,.lede){line-height:1.6}
body[data-game] .kitchen-card summary{font-size:13px;min-height:44px}
body[data-game] .shelf-grid{gap:var(--space-4);margin-top:var(--space-6)}
body[data-game] .badge{padding:var(--space-4);border-radius:16px;background:var(--glass-bg);border:1px solid var(--glass-border)}
body[data-game] :is(button,.btn,select),.progress-page :is(button,.progress-btn),
:is(body[data-game],body:has(.progress-page)) :is(.gk-close,.gk-toggle,.gk-btn,.alex-act,.alex-x,.gs-btn){min-height:44px;border-radius:999px;line-height:1.55}
body[data-game] :is(button,.btn,select),.progress-page :is(button,.progress-btn){padding:10px var(--space-4)}
body[data-game] .level-dot{padding:0}
body[data-game] .tag,body[data-game] .ingredient-chip{padding:6px var(--space-3);border-radius:999px;line-height:1.6;background:var(--glass-open)}
body[data-game] .needs{gap:var(--space-3);margin:var(--space-6) 0}
body[data-game] .needs-row{gap:var(--space-2)}
body[data-game] :is(.q,#goal){line-height:1.55;margin-bottom:var(--space-4)}
body[data-game] :is(textarea,input[type=text],input[type=email]),
:is(body[data-game],body:has(.progress-page)) :is(.gk-pal input,.gs-pop input[type=email]),.progress-page .progress-row input{
  background:var(--glass-code);color:var(--fg);border:1px solid var(--line);border-radius:16px;padding:var(--space-4);line-height:1.65;max-width:100%;
}
body[data-game] textarea{margin:var(--space-3) 0 var(--space-4);min-height:240px}
body[data-game] .coding textarea{min-height:320px}
body[data-game] :is(.console,pre.schema,pre.example,pre.reference,pre.data,pre.skeleton,.tbl,.tryout){background:var(--glass-code);border-radius:16px;padding:var(--space-4);margin-top:var(--space-6);line-height:1.65}
body[data-game] .tbl{max-width:100%;overflow-x:auto}
body[data-game] .tbl :is(th,td){padding:var(--space-3) var(--space-4)}
body[data-game] .board{margin:var(--space-6) 0;border-radius:16px}
body[data-game] .play-head{margin-bottom:var(--space-6)}
body[data-game] .coding>.row{margin-top:var(--space-4)}
body[data-game] details:not(.sitenav-menu){border-radius:20px}
body[data-game] details:not(.sitenav-menu)>summary{min-height:44px;align-content:center;line-height:1.6}
:is(body[data-game],body:has(.progress-page)) :is(.gk-card,.gs-pop){padding:var(--space-6);line-height:1.6;background-color:var(--glass-text-bg)}
:is(body[data-game],body:has(.progress-page)) .gk-card{max-height:80dvh}
:is(body[data-game],body:has(.progress-page)) .gk-row{padding:var(--space-3) 0;gap:var(--space-4)}
:is(body[data-game],body:has(.progress-page)) .gk-pal li{min-height:48px;padding:var(--space-3);border-radius:12px}
:is(body[data-game],body:has(.progress-page)) .gk-fast{padding:var(--space-4);margin:var(--space-4) 0;border-radius:16px;line-height:1.6}
:is(body[data-game],body:has(.progress-page)) .gs-pop{width:min(340px,calc(100vw - 32px));gap:var(--space-4);z-index:65}
body[data-game] .gs-pop .gs-gdpr{line-height:1.6}
body[data-game] .gs-consent{line-height:1.6}
body[data-game] .gs-consent input{padding:0}
body[data-game] .alex{right:24px;bottom:24px;gap:var(--space-3)}
body[data-game] .alex-bubble{padding:var(--space-5);line-height:1.6;background-color:var(--glass-text-bg);max-height:calc(100dvh - 120px);overflow:auto}
body[data-game] .alex-msg{margin-right:36px}
body[data-game] :is(.alex-code,.alex-frame){padding:var(--space-4);line-height:1.65;background:var(--glass-code);border-radius:12px}
body[data-game] .alex-acts{gap:var(--space-3);margin-top:var(--space-4)}
body[data-game] .alex-x{width:44px;top:4px;right:4px}
body[data-game] .toast{bottom:120px;line-height:1.6;padding:var(--space-4) var(--space-6)}
/* The React route inherits the same palette without touching portfolio tokens. */
.progress-page{
  --bg:hsl(35 15% 8%);--surface:var(--glass-solid);--surface-2:hsl(35 15% 16%);
  --fg:hsl(40 35% 93%);--fg-dim:hsl(40 18% 68%);--brass:hsl(38 55% 59%);
  --petrol:hsl(166 30% 65%);--line:hsl(35 15% 25%);--ok:hsl(112 32% 65%);
  --font-body:'Instrument Sans',system-ui,sans-serif;--font-mono:'JetBrains Mono',ui-monospace,monospace;
  --pg-brass:38 55% 59%;--pg-line:35 15% 25%;--pg-surface:35 15% 13%;
  background:transparent;color:var(--fg);line-height:1.6;
}
body:has(.progress-page){background:hsl(35 15% 8%)}
.progress-page .progress-wrap{max-width:1148px;padding:110px var(--space-6) 160px;color:var(--fg);line-height:1.6}
.progress-page .progress-grid{gap:var(--space-8);align-items:start}
.progress-page .progress-head{margin:var(--space-6) 0;gap:var(--space-4)}
.progress-page .learning-nav{padding:var(--space-4) var(--space-6);gap:var(--space-3) var(--space-6);margin-bottom:var(--space-8)}
.progress-page .learning-nav a{color:var(--fg-dim)}
.progress-page .progress-signin,.progress-page .progress-account{padding:var(--space-6);margin-bottom:var(--space-8)}
.progress-page :is(.progress-note,.progress-kitchen,.progress-adv-row,.progress-stats dt,.h-mode){color:var(--fg-dim);line-height:1.6}
.progress-page :is(.progress-rank,.progress-note,.progress-kitchen){margin:var(--space-3) 0}
.progress-page :is(.progress-wrap h1,.progress-wrap h2){line-height:1.4;color:var(--fg)}
.progress-page .progress-stats{gap:var(--space-4);margin:var(--space-6) 0}
.progress-page .progress-stats dd{margin:var(--space-1) 0 0}
.progress-page .progress-advance{gap:var(--space-4);margin:var(--space-6) 0 var(--space-8)}
.progress-page .progress-badges{gap:var(--space-3)}
.progress-page .progress-badges>span{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--glass-open);border:1px solid var(--glass-border)}
.progress-page .progress-badges>.locked{opacity:.6;background:var(--glass-locked);border-style:dashed}
.progress-page .progress-tabs{gap:var(--space-2);margin:var(--space-6) 0}
.progress-page .progress-tabs button{flex:1;padding:10px;color:var(--fg-dim)}
.progress-page .progress-tabs button.active{background:var(--glass-open);color:var(--brass)}
.progress-page .progress-sql-worlds{grid-template-columns:minmax(0,1fr);gap:var(--space-6);margin-bottom:var(--space-8)}
.progress-page .progress-sql-world{padding-bottom:var(--space-6);border-bottom:1px solid var(--glass-border)}
.progress-page .progress-sql-world b{font-size:14px;line-height:1.6;min-height:0;margin-bottom:var(--space-4)}
.progress-page .progress-node{gap:var(--space-2);min-height:68px;color:var(--brass)}
.progress-page .progress-node small{font-size:11px}
.progress-page .progress-discs{gap:var(--space-2);margin:var(--space-6) 0}
.progress-page .progress-worlds{grid-template-columns:minmax(0,1fr);gap:var(--space-6);margin:var(--space-8) 0}
.progress-page .progress-world{gap:var(--space-4)}
.progress-page .progress-world>small{width:20px;font-size:12px}
.progress-page .progress-dot{width:44px;height:44px;flex:none;font-size:13px;background:var(--glass-open);border-color:var(--glass-border)}
.progress-page .progress-dot.locked{opacity:.65;border-style:dashed;background:var(--glass-locked)}
.progress-page .progress-dot.done{background:var(--glass-done);border-color:var(--ok)}
.progress-page .progress-row{gap:var(--space-4);margin-top:var(--space-4)}
.progress-page .progress-consent{gap:var(--space-3);min-height:44px;line-height:1.6;margin:var(--space-4) 0}
.progress-page .progress-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:var(--space-6)}
.progress-page .progress-alex{padding:var(--space-6);gap:var(--space-4);margin:var(--space-8) 0}
.progress-page .progress-alex .progress-btn{margin:0}
.progress-page .progress-next{margin-top:var(--space-12)}
.progress-page .progress-next li{padding:var(--space-2) 0;line-height:1.6}
.progress-page .progress-history{margin-top:var(--space-8)}
.progress-page .progress-history li{grid-template-columns:minmax(0,1fr) auto auto auto;padding:var(--space-4) 0;gap:var(--space-3);line-height:1.6}
.progress-page .progress-history .h-date{grid-column:1/-1;color:var(--fg-dim)}
.progress-page .progress-history .h-track{white-space:normal;overflow:visible}
.progress-page .progress-history .h-mode{grid-column:1;grid-row:auto;display:block}
.progress-page .h-pill{padding:var(--space-1) var(--space-2);line-height:1.6}
.progress-page .h-pill.easy{color:var(--ok)}
.progress-page .h-pill.medium{color:var(--brass)}
.progress-page .progress-keys{gap:var(--space-3)}
.progress-page .progress-keys .gk-btn{color:var(--fg);background:var(--glass-bg);border:1px solid var(--glass-border)}
@media(prefers-color-scheme:light){
  body:has(.progress-page){background:hsl(40 40% 95%)}
  .progress-page{--bg:hsl(40 40% 95%);--surface-2:hsl(40 30% 91%);--fg:hsl(35 25% 12%);--fg-dim:hsl(35 18% 35%);--brass:hsl(40 70% 30%);--petrol:hsl(166 35% 28%);--line:hsl(35 20% 78%);--ok:hsl(112 40% 32%);--pg-brass:40 70% 30%;--pg-line:35 20% 78%;--pg-surface:40 50% 98%}
}
/* Portalled shortcuts read body tokens as well as the route's tokens. */
body:has(.progress-page){--bg:hsl(35 15% 8%);--fg:hsl(40 35% 93%);--fg-dim:hsl(40 18% 68%);--brass:hsl(38 55% 59%);--petrol:hsl(166 30% 65%);--line:hsl(35 15% 25%);--surface:var(--glass-solid);--surface-2:var(--glass-code)}
@media(prefers-color-scheme:light){body:has(.progress-page){--bg:hsl(40 40% 95%);--fg:hsl(35 25% 12%);--fg-dim:hsl(35 18% 35%);--brass:hsl(40 70% 30%);--petrol:hsl(166 35% 28%);--line:hsl(35 20% 78%)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  body[data-game] :is(button,.btn,.level-dot .circle),.progress-page :is(button,.progress-btn,.progress-node span){transition:transform .18s ease,box-shadow .18s ease}
  body[data-game] :is(button,.btn):not(:disabled):hover,.progress-page :is(button,.progress-btn):not(:disabled):hover{transform:translateY(-2px)}
  body[data-game] :is(button,.btn):not(:disabled):active,.progress-page :is(button,.progress-btn):not(:disabled):active{transform:scale(.98)}
}
@media(max-width:820px){body[data-game] :is(.map,.track-map){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  body[data-game]{padding-inline:var(--space-4);padding-bottom:440px}
  body[data-game] .wrap{gap:var(--space-6)}
  body[data-game] .sitenav{margin:0 -16px var(--space-6);padding:var(--space-3) var(--space-4)}
  body[data-game] :is(.map,.track-map){grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  body[data-game] :is(.card,.stage,.world){padding:var(--space-5)}
  body[data-game] .topbar{padding:var(--space-4);gap:var(--space-3)}
  body[data-game] .settings{margin-left:0;flex-wrap:wrap}
  body[data-game] :is(.deck,.stack,.play-layout){gap:var(--space-6)}
  body[data-game] :is(.kitchen-card,.daily,.shelf,.ingredients,.answer-result){padding:var(--space-4)}
  body[data-game] .dots{gap:var(--space-3)}
  body[data-game] .alex{right:16px;bottom:16px}
  body[data-game] .alex-bubble{width:min(320px,calc(100vw - 32px));padding:var(--space-4)}
  body[data-game] .gs-pop{position:fixed;top:96px;left:16px;right:16px;max-height:calc(100dvh - 120px);overflow:auto}
  .progress-page .progress-wrap{padding:100px var(--space-4) 160px}
  .progress-page .progress-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .progress-page :is(.progress-card,.progress-signin,.progress-account,.progress-alex){padding:var(--space-5)}
  .progress-page .learning-nav{padding:var(--space-4);gap:var(--space-3) var(--space-4)}
  .progress-page .progress-node-row{gap:var(--space-3)}
  .progress-page .progress-world{gap:var(--space-3)}
  .progress-page .progress-alex{flex-wrap:wrap}
  .progress-page .progress-alex>div{flex-basis:calc(100% - 64px)}
  .progress-page .progress-alex .progress-btn{margin-left:auto}
  .progress-page .progress-history li{gap:var(--space-2)}
  .progress-page .progress-discs{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
  .progress-page .progress-stats{gap:var(--space-3)}
  :is(body[data-game],body:has(.progress-page)) .gk-card{padding:var(--space-5)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :is(body[data-game],body:has(.progress-page)){--glass-bg:var(--glass-solid);--glass-text-bg:var(--glass-solid)}
}
@media(prefers-reduced-motion:reduce){
  :is(body[data-game],body:has(.progress-page))::before{animation:none;transform:none}
  body[data-game] :is(button,.btn,.alex-bubble,.toast),.progress-page :is(button,.progress-btn){transition:none;animation:none}
}
@media(prefers-reduced-transparency:reduce),(forced-colors:active){
  :is(body[data-game],body:has(.progress-page)){--glass-bg:var(--glass-solid);--glass-text-bg:var(--glass-solid);--glass-blur:none;--glass-highlight:none;--glass-shadow:none;--glass-border:var(--line)}
  :is(body[data-game],body:has(.progress-page))::before{display:none}
}
@media(forced-colors:active){
  :is(body[data-game],body:has(.progress-page)){--glass-solid:Canvas;--glass-code:Canvas;--glass-open:Canvas;--glass-done:Canvas;--glass-locked:Canvas;--fg:CanvasText;--fg-dim:CanvasText;--line:CanvasText;--brass:LinkText;--ok:LinkText}
}
/* The SQL HUD's toolbar must wrap as a group, rather than shrink its labels. */
body[data-game] .difficulty{display:flex;flex-wrap:wrap;gap:var(--space-3);min-width:0;max-width:100%;align-items:center}
body[data-game] .difficulty :is(button,select,.gs-chip){flex-shrink:0}
:is(body[data-game],body:has(.progress-page)) [data-kbd]::after{white-space:nowrap}
body[data-game] .difficulty :is(.gk-btn,.gs-btn){white-space:nowrap}
body[data-game] .topbar .rankbox{min-width:0}
.progress-page .progress-lvlbar{background:var(--line)}
.progress-page .progress-lvlbar i{background:var(--brass)}
@media(max-width:600px){body[data-game] .difficulty{flex-basis:100%;margin-left:0}body[data-game] .difficulty .gs-chip{max-width:100%}}
/* Shortcut portals must use the same theme even when the portfolio's dark
   variables are scoped on the modal by the existing keyboard controller. */
body:has(.progress-page) .gk-card{color:var(--fg)}
body:has(.progress-page) .gk-pal li{color:var(--fg)}
@media(prefers-color-scheme:light){
  body:has(.progress-page) .gk-modal{--fg:hsl(35 25% 12%);--fg-dim:hsl(35 18% 35%);--brass:hsl(40 70% 30%);--petrol:hsl(166 35% 28%);--line:hsl(35 20% 78%);--surface-2:var(--glass-code)}
}
@media(prefers-color-scheme:dark){
  body:has(.progress-page) .gk-modal{--fg:hsl(40 35% 93%);--fg-dim:hsl(40 18% 68%);--brass:hsl(38 55% 59%);--petrol:hsl(166 30% 65%);--line:hsl(35 15% 25%);--surface-2:var(--glass-code)}
}
/* Refined edge lighting and calm translucent controls. Shared tokens keep
   per-game colour choices intact and eliminate nested refracting layers. */
:is(body[data-game],body:has(.progress-page)){
  --glass-sheen:linear-gradient(135deg,var(--glass-border),transparent 72%);
  --glass-hover:color-mix(in srgb,var(--brass) 12%,var(--glass-solid));
  --glass-border-low:color-mix(in srgb,var(--glass-border) 40%,transparent);
}
body[data-game] :is(.card,.stage,.world,.topbar,.alex-bubble,.daily,.shelf),
.progress-page :is(.progress-card,.progress-alex,.progress-signin){
  border-top-color:var(--glass-border);border-left-color:var(--glass-border);
  border-bottom-color:var(--glass-border-low);border-right-color:var(--glass-border-low);
}
body[data-game] :is(.kitchen-card,.shelf,.daily){margin-block:var(--space-8)}
body[data-game] .track-choice{margin-block:var(--space-8)}
body[data-game] .album-tools{padding-block:var(--space-6);gap:var(--space-6)}
body[data-game] :is(.needs,.ingredients){margin-block:var(--space-6)}
body[data-game] #editorUI{padding-top:var(--space-6);margin-top:var(--space-6);border-top:1px solid var(--glass-border)}
body[data-game] :is(button,.btn,select):not(.primary):not(.level-dot),
.progress-page :is(.progress-ghost,.progress-tabs button),
:is(body[data-game],body:has(.progress-page)) :is(.gk-close,.gk-toggle){
  background-image:var(--glass-highlight);box-shadow:inset 0 1px 0 var(--glass-border);
}
body[data-game] :is(.btn.ghost,button:not(.primary):not(.level-dot):not(.alex-act.primary)),
.progress-page .progress-ghost{background-color:var(--glass-bg)}
body[data-game] :is(.alex-msg,.alex-code,.alex-frame){line-height:1.65}
body[data-game] .alex-avatar{background:var(--glass-highlight),var(--glass-text-bg);box-shadow:var(--glass-shadow)}
body[data-game] :is(.card,.stage,.topbar) :is(.map,.track-map,.card,.stage),
.progress-page .progress-card :is(.progress-sql-worlds,.progress-advance){backdrop-filter:none;-webkit-backdrop-filter:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  body[data-game] .level-dot:not(:disabled):hover .circle,.progress-page .progress-node:not(.locked):hover span{transform:scale(1.04);background:var(--glass-hover)}
  body[data-game] :is(button,.btn):not(:disabled):hover,.progress-page :is(button,.progress-btn):not(:disabled):hover{box-shadow:inset 0 2px 0 var(--glass-border),var(--glass-shadow)}
}
@media(max-width:600px){
  body[data-game]{padding-inline:var(--space-4)}
  body[data-game] .sitenav{margin-inline:calc(-1 * var(--space-4));padding-inline:var(--space-4)}
  body[data-game] #editorUI{padding-top:var(--space-5);margin-top:var(--space-5)}
}
@media(prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce){
  :is(body[data-game],body:has(.progress-page)){--glass-bg:var(--glass-solid);--glass-text-bg:var(--glass-solid);--glass-blur:none;--glass-highlight:none}
  :is(body[data-game],body:has(.progress-page))::before{display:none}
}
/* Filled game commands retain their contrasting brass fill. */
body[data-game] :is(.btn:not(.ghost),button.primary,.alex-act.primary){background-color:var(--brass);color:var(--bg)}
body[data-game] .daily.done .btn{background-color:var(--glass-bg);color:var(--ok)}
body[data-game] button.btn:not(.ghost):not(.alex-act){background-color:var(--brass);color:var(--bg)}
body[data-game] #submitBtn{background:var(--glass-highlight),var(--brass);color:var(--bg)}
/* Contrast roles are deliberately distinct from decorative glass highlights.
   Filled commands need a light label in light mode, not the dark canvas colour. */
:is(body[data-game],body:has(.progress-page)){
  --control-label:var(--bg);--control-edge:hsl(40 15% 60%);--focus-edge:hsl(175 65% 72%);
}
@media(prefers-color-scheme:light){
  :is(body[data-game],body:has(.progress-page)){--control-label:hsl(40 50% 98%);--control-edge:hsl(35 15% 42%);--focus-edge:hsl(170 65% 26%)}
}
html[data-theme=light] body[data-game]{--control-label:hsl(40 50% 98%);--control-edge:hsl(35 15% 42%);--focus-edge:hsl(170 65% 26%)}
html[data-theme=dark] body[data-game]{--control-label:var(--bg);--control-edge:hsl(40 15% 60%);--focus-edge:hsl(175 65% 72%)}
body[data-game] :is(.btn:not(.ghost),button.primary,.alex-act.primary,#submitBtn),
.progress-page .progress-btn:not(.progress-ghost),
:is(body[data-game],body:has(.progress-page)) .alex-tag{color:var(--control-label);background-image:none}
body[data-game] :is(.level-dot:disabled,.badge.locked),
.progress-page :is(.progress-node.locked,.progress-dot.locked,.progress-badges>.locked){opacity:1}
:is(body[data-game],body:has(.progress-page)) [data-kbd]::after{opacity:1}
:is(body[data-game],body:has(.progress-page)) :is(input,textarea,select){border-color:var(--control-edge)}
:is(body[data-game],body:has(.progress-page)) :is(input,textarea)::placeholder{color:var(--fg-dim);opacity:1}
:is(body[data-game],body:has(.progress-page)) :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus-edge);outline-offset:3px;
}
@media(forced-colors:active){
  :is(body[data-game],body:has(.progress-page)){--control-label:ButtonText;--control-edge:ButtonBorder;--focus-edge:Highlight}
}
/* Higher-specificity roles win over the original page-local controls. */
body[data-game] button.btn:not(.ghost):not(.alex-act),
body[data-game] button.primary,body[data-game] .alex-act.primary,
.progress-page .progress-row button,.progress-page .progress-btn{
  background:var(--brass)!important;color:var(--control-label)!important;
}
body[data-game] :is(input[type=text],input[type=email],textarea,select),
body:has(.progress-page) :is(.gk-pal input,.progress-row input),
body[data-game] .gk-pal input{border-color:var(--control-edge)!important}
body[data-game] button:disabled,.progress-page button:disabled,
.progress-page .progress-disc.locked{opacity:1}
.progress-page :is(.progress-alex small,.progress-chart,.progress-ghost){color:var(--fg-dim)}
.progress-page :is(.progress-chart figcaption span,.h-pill.hard){color:var(--fg-dim)!important}
body[data-game] .level-dot:disabled small{color:var(--fg-dim)}
@media(prefers-color-scheme:light){
  :is(body[data-game],body:has(.progress-page)),.progress-page{
    --brass:hsl(38 76% 25%);--fg-dim:hsl(35 18% 29%);--pg-brass:38 76% 25%;
  }
}
html[data-theme=light] body[data-game]{--brass:hsl(38 76% 25%);--fg-dim:hsl(35 18% 29%)}
html[data-theme=dark] body[data-game]{--brass:hsl(38 55% 59%);--fg-dim:hsl(40 18% 72%)}
body[data-game] :is(button:not(.level-dot),.level-dot .circle),
.progress-page :is(button,.progress-ghost,.progress-node span),
:is(body[data-game],body:has(.progress-page)) :is(.gk-close,.gk-toggle){border-color:var(--control-edge)}
.progress-page .progress-keys .gk-btn{border-color:var(--control-edge)}

/* Recommended next node + Resume (shared by both games). */
body[data-game] .album-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
body[data-game] .resume-btn{min-height:44px}
body[data-game] .level-dot{position:relative}
body[data-game] .level-dot.next .circle{box-shadow:0 0 0 3px var(--focus-edge);animation:next-pulse 1.8s ease-in-out infinite}
body[data-game] .level-dot .next-tag{font:600 11px/1 var(--font-mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:999px;background:var(--brass);color:var(--control-label)}
@keyframes next-pulse{0%,100%{box-shadow:0 0 0 3px var(--focus-edge)}50%{box-shadow:0 0 0 7px transparent}}
@media(prefers-reduced-motion:reduce){body[data-game] .level-dot.next .circle{animation:none}}