/* One look for the whole app, taken from the session deck: near-black, tiles with an area color
   stripe, mono uppercase labels, heavy lowercase headings, pink only for the main action.
   Live's device panels (--dev*) are untouched. Loaded after app.css. */
:root{
  --bg:#0b0b0b;--tile:#1a1a1a;--tile2:#222;--tileh:#262626;--ink:#f1efea;--ink2:#b9b6b0;--mute:#8a8780;--rule:#2a2a2a;--hair:#232323;
  --pink:#ff2b8a;--pinkdeep:#ff5ca5;
  --panel:transparent;--panel2:var(--tile);--line:var(--rule);--text:var(--ink);--dim:var(--mute);
  --amber:var(--ink);--teal:#3fd4a8;--red:#ff4d6d;
  --display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
/* area colors, muted like Live's clip palette */
.d-eq{--areac:#ff2b8a}.d-syn{--areac:#8f7cff}.d-snd{--areac:#4fb7ff}.d-dyn{--areac:#ffb020}.d-spc{--areac:#3fd4a8}.d-rhy{--areac:#e8e15a}
.d-rtg{--areac:#ff7a45}.d-aud{--areac:#b0e04a}.d-live{--areac:#aaaaaa}.d-arr{--areac:#ff5f5f}.d-mix{--areac:#f0f0f0}.d-vox{--areac:#d58cff}.d-pro{--areac:#e6c27a}

html,body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;letter-spacing:-.005em}
::selection{background:var(--pink);color:#fff}
a{color:inherit}

/* header + nav: part of the same dark surface */
header{background:var(--bg);border-bottom:1px solid var(--rule);padding:16px 28px 12px;gap:24px}
header h1{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
header h1 span{color:var(--ink)}
header h1::before{content:"";display:inline-block;width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23ff2b8a'%3E%3Crect x='8' y='8' width='16' height='16'/%3E%3Cpolygon points='15,8 19,8 10,1'/%3E%3Cpolygon points='8,11 11,8 0.5,0.5'/%3E%3Cpolygon points='8,15 8,19 1,10'/%3E%3C/g%3E%3C/svg%3E") center bottom/contain no-repeat;margin-right:10px;vertical-align:baseline}
.stats{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);gap:22px}
.stats b{color:var(--ink);font-weight:600}
nav{background:var(--bg);border-bottom:1px solid var(--rule);padding:0 28px;gap:0}
nav button{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border:0;border-radius:0;padding:12px 18px 11px;border-bottom:2px solid transparent}
nav button:first-child{padding-left:0}
nav button:hover{color:var(--ink)}
nav button.on{background:none;color:var(--ink);border-bottom-color:var(--pink)}

main{max-width:1180px;padding:24px 28px 80px}

/* type */
h2{font-family:var(--display);font-weight:800;font-size:46px;line-height:.92;letter-spacing:-.055em;text-transform:lowercase;margin:0 0 12px}
h3{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.sub{color:var(--ink2);font-size:15.5px;max-width:720px}
.big{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.05em}
.dim{color:var(--mute)}
.acc{color:var(--pinkdeep)}

/* surfaces */
.card{background:transparent;border:0;border-radius:0;padding:4px 0 18px;margin-bottom:14px}
.brief{background:var(--tile);border:0;border-left:4px solid var(--pink);border-radius:0;color:var(--ink);font-size:17px;padding:14px 18px}
.note{background:var(--tile);border:0;border-left:4px solid var(--pink);border-radius:0;color:var(--ink2)}
.note a{color:var(--ink);text-decoration:underline;text-decoration-color:#555}
.check{border-color:var(--hair)}

/* controls */
.btn{background:transparent;border:1px solid #3a3a3a;border-radius:0;color:var(--ink);padding:8px 16px;font-weight:600}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.pri{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:700}
.btn.pri:hover{background:var(--pink);border-color:var(--pink);color:#fff;filter:none}
.btn.pri .kbd{color:#77746e;border-color:#b9b6b0}
.btn.big-btn{background:var(--pink);border-color:var(--pink);color:#fff;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.03em;padding:13px 24px}
.btn.big-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.big-btn .kbd{color:#ffd0e5;border-color:#ff8cc0}
.btn.sel{background:var(--pink);border-color:var(--pink);color:#fff}
.btn.ghost{border-color:#3a3a3a}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn.danger:hover{background:var(--red);color:#fff}
.kbd{border-color:#3a3a3a;color:var(--mute);border-radius:0}
.seg{border:1px solid #3a3a3a;border-radius:0}
.seg button{background:transparent;color:var(--ink2);border-right:1px solid #3a3a3a;font-weight:600}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:var(--bg)}
.seg button.on .kbd{color:#77746e;border-color:#b9b6b0}
.tag{background:transparent;border:1px solid #333;border-radius:0;color:var(--ink2);font-size:10px;text-transform:uppercase;letter-spacing:.07em}
.tag.prac{border-color:var(--pink);color:var(--pinkdeep)}
input[type=range]{accent-color:var(--pink)}

/* meters & levels */
.meter{background:#2c2c2c;height:3px;border-radius:0}
.meter i{background:var(--areac,var(--pink))}
.lvl{font-family:var(--mono);font-size:11px;font-weight:600;background:var(--ink);color:var(--bg);border:0;border-radius:0;padding:2px 7px}
.lvl small{color:#6c6963;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.lvl.new{background:transparent;color:var(--mute);border:1px solid #3a3a3a}
.move{font-weight:600}.move.up{color:var(--teal)}.move.down{color:var(--red)}
.ok{color:var(--teal)}.no{color:var(--red)}
.kind{border-radius:0;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;background:transparent;color:var(--mute);border-color:#333}
.k-ear,.k-hands,.k-mind,.k-soon{color:var(--mute);border-color:#333}

/* the shared tile: dark block, area stripe on the left */
.slot,.prof-row,.quick-item,.skill{position:relative;background:var(--tile);color:var(--ink);border:0;border-radius:0;transition:background .12s}
.slot::before,.prof-row::before,.quick-item::before,.skill::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--areac,#666)}
.slot:hover,.prof-row:hover,.quick-item:hover,.skill:hover{background:var(--tileh)}

/* home: the deck */
.deck{background:transparent;color:var(--ink);padding:6px 0 4px;margin:0 0 30px}
.deck-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.deck-label{font-family:var(--display);font-weight:800;font-size:56px;letter-spacing:-.06em;text-transform:lowercase;line-height:.95}
.deck-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.scope{display:block;width:100%;height:110px;margin:14px 0 16px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:4px}
.slot{display:flex;flex-direction:column;gap:3px;min-height:100px;padding:11px 11px 10px 15px}
.slot.next{box-shadow:inset 0 -3px 0 var(--pink)}
.slot.done .slot-name{color:var(--ink2)}
.slot-area{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-name{font-weight:700;font-size:16px;letter-spacing:-.025em;line-height:1.15;height:2.3em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:auto}
.slot-foot{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:8px}
.chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid #3a3a3a;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;box-sizing:border-box}
.chip.est{color:var(--mute);border-style:dashed}.chip.done{color:var(--teal);border-color:rgba(63,212,168,.45)}
.chip.upnext{position:absolute;top:8px;right:8px;height:18px;padding:0 6px;background:var(--pink);border-color:var(--pink);color:#fff}.slot.next .slot-area{padding-right:44px}
.deck-bottom{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.launch{display:inline-flex;align-items:center;gap:12px;background:var(--pink);color:#fff;border:0;border-radius:0;padding:14px 26px 14px 20px;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.03em;cursor:pointer;transition:.12s}
.launch:hover{background:var(--ink);color:var(--bg)}
.launch-tri{width:0;height:0;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.deck-note{flex-basis:100%;margin:6px 0 0;color:var(--ink2);font-size:14.5px;max-width:640px}

/* home: below the deck */
.grid.g2{gap:0 28px;align-items:start}
.profile{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:10px}
.prof-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px 11px 15px;font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.prof-row span:first-child{display:block;padding-right:34px}
.prof-bar{height:3px;background:#2c2c2c;border-radius:0}.prof-bar i{background:var(--areac)}
.prof-lv{position:absolute;top:10px;right:12px;font-family:var(--mono);font-size:11px;color:var(--ink2)}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:10px;border:0}
.quick-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 12px 13px 15px}
.quick-item b{font-weight:700;letter-spacing:-.02em;font-size:14.5px}

/* map */
.dom{margin:30px 0}
.dom-head{border:0;padding:0;margin-bottom:10px;align-items:baseline}
.dom-head h3{font-family:var(--display);font-weight:800;font-size:32px;letter-spacing:-.05em;text-transform:lowercase;color:var(--ink);margin:0;display:flex;align-items:center;gap:10px}
.dom-head h3::before{content:"";width:12px;height:12px;background:var(--areac);display:inline-block}
.dom-head .dim{color:var(--ink2)}
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px;border:0;margin:0}
.skill{display:flex;flex-direction:column;gap:6px;padding:13px 14px 14px 17px;margin:0}
.skill:hover{transform:none}
.skill-top b{font-size:17px;letter-spacing:-.03em;font-weight:800}
.skill-about{color:var(--ink2);font-size:13px}
.skill.locked{opacity:.5;filter:none}
.skill.locked:hover{opacity:.85}
.skill.locked::before{background:#444}
.lockline{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--pinkdeep)}

/* skill page */
.crumbs{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.crumbs a:hover{color:var(--ink)}
.bigl{position:relative;background:var(--tile);color:var(--ink);border:0;border-radius:0;min-width:220px;padding:16px 18px 16px 22px;text-align:left}
.bigl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--areac)}
.bigl-n{font-family:var(--display);font-weight:800;font-size:92px;letter-spacing:-.07em;line-height:.8;color:var(--ink)}
.bigl-t{color:var(--mute);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:8px}
.bigl .meter{background:#2c2c2c}.bigl .meter i{background:var(--areac)}
.ladder-row{border-color:var(--hair);padding:10px 8px}
.ladder-row.here{background:var(--tile);outline:0;box-shadow:inset 4px 0 0 var(--pink)}
.ladder-row.past .ladder-lv,.ladder-row.here .ladder-lv{color:var(--ink)}
.ladder-lv{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.05em;color:#55524d}
.ladder-tier{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ladder-what{color:var(--ink2)}
.spark i{border-radius:0}.spark .g{background:var(--ink)}.spark .m{background:#6c6963}.spark .b{background:var(--pink)}

/* runner */
.lvchip{background:var(--tile);border:0;border-radius:0}
.lvchip-top b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.05em;color:var(--ink)}
.lvchip-top em{color:var(--pinkdeep);font-style:normal;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.drillhead h2{font-size:42px}
.fb{border-radius:0;background:var(--tile)!important;border:0!important;border-left:4px solid!important;color:var(--ink)}
.fb.good{border-left-color:var(--teal)!important}.fb.mid{border-left-color:#8a8780!important}.fb.bad{border-left-color:var(--red)!important}
.fbfoot{border-color:#333}
.answers{gap:4px}
.ans{background:var(--tile);border:0;border-radius:0;color:var(--ink);font-weight:600}
.ans:hover:not(:disabled){background:var(--tileh)}
.ans.right{background:var(--teal);color:#06231a}
.ans.wrong{background:var(--red);color:#fff}
.ans small{color:var(--mute)}
.ans.right small{color:#0d4a37}.ans.wrong small{color:#ffe0e6}
.quiz .qtext{font-size:22px;font-weight:700;letter-spacing:-.025em;line-height:1.35}
.numin{background:var(--tile);border:1px solid #3a3a3a;border-radius:0;color:var(--ink)}
.numin:focus{border-color:var(--pink)}
.center-card{background:var(--tile)!important;border:0!important}
.center-card h2{font-size:60px}
.sum-row{background:var(--tile2);border-radius:0}
.toast{background:var(--ink);color:var(--bg);border-radius:0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;box-shadow:inset 4px 0 0 var(--pink)}
.prose p{color:var(--ink2)}
.mixer,.ldev{border-radius:0}

@media (max-width:760px){
  header{padding:10px 16px;flex-wrap:nowrap}
  header .stats{display:none}
  header h1{font-size:22px}
  header h1::before{width:24px;height:24px;margin-right:8px}
  nav{padding:0 16px}
  nav button{padding:11px 12px 10px}
  main{padding:18px 16px 60px}
  h2{font-size:38px}
  .deck-label{font-size:40px}
  .slots{grid-template-columns:1fr 1fr}
  .slot{min-height:88px}
  .drillhead h2{font-size:32px}
  .bigl-n{font-size:72px}
  .dom-head h3{font-size:26px}
  .profile,.quick{grid-template-columns:1fr 1fr}
}
.prof-row{align-items:stretch;text-align:left}.prof-row span:first-child{text-align:left;align-self:flex-start}

/* home: the 12 areas, one row of tiles under the deck */
.areas-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.areas-head h3{margin:0}
.areas-overall{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.areas-overall b{color:var(--ink)}
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px}
.area{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:76px;padding:11px 12px 11px 15px;background:var(--tile);color:var(--ink);transition:background .12s}
.area::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--areac)}
.area:hover{background:var(--tileh)}
.area-name{font-weight:700;font-size:15px;letter-spacing:-.02em;line-height:1.15}
.area-lv{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px}
.area-lv .meter{flex:1;margin:0}.area-lv .meter i{background:var(--areac)}
@media (max-width:760px){.areas{grid-template-columns:1fr 1fr}}

/* account button + sign-in sheet */
header{position:relative}
.acct{margin-left:auto;background:transparent;border:1px solid #3a3a3a;color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.acct:hover{background:var(--ink);color:var(--bg)}
.acct-dot{width:20px;height:20px;display:inline-grid;place-items:center;background:var(--pink);color:#fff;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:0}
.stats{margin-left:0}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;z-index:50;padding:16px}
.sheet{position:relative;width:100%;max-width:420px;background:var(--tile);box-shadow:inset 4px 0 0 var(--pink);padding:26px 26px 22px 30px}
.sheet h2{font-size:40px}
.sheet-x{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--mute);font-size:24px;cursor:pointer}
.sheet-google{width:100%;justify-content:center;display:flex;align-items:center;gap:10px;padding:12px;background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:700}
.sheet-google:hover{background:#fff}
.sheet-or{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:var(--mute);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.sheet-or::before,.sheet-or::after{content:"";flex:1;height:1px;background:#333}
.sheet-email{flex:1;min-width:0;width:auto;font-size:15px;font-family:var(--body)}
.sheet-msg{min-height:1.4em;font-size:13.5px;margin:10px 0 0}
.sndline{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}

/* daily minimum on the deck */
.minbar{display:grid;grid-template-columns:1fr minmax(120px,240px) auto;gap:12px;align-items:center;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.minbar .meter{margin:0;height:4px}.minbar .meter i{background:var(--pink)}
.minbar.done{color:var(--teal)}.minbar.done .meter i{background:var(--teal)}
.minbar-n{color:var(--ink)}

/* stats */
.statrow{margin:4px 0 28px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px}
.stat{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--tile);padding:12px 14px 13px}
.stat-l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.stat-v{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.04em;line-height:1}
.stat-s{font-size:12px;color:var(--mute)}
.bars{position:relative;display:grid;grid-template-columns:repeat(30,1fr);gap:3px;align-items:end;height:120px;margin-top:10px;border-bottom:1px solid var(--rule)}
.bar{height:100%;display:flex;align-items:flex-end}.bar i{display:block;width:100%;background:#3a3a3a;min-height:1px}
.bar.done i{background:var(--pink)}
.minline{position:absolute;left:0;right:0;bottom:var(--minline);border-top:1px dashed #555;pointer-events:none}
.minline em{position:absolute;right:0;top:-16px;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.skilltable{display:flex;flex-direction:column;gap:3px}
.st-head,.st-row{display:grid;grid-template-columns:minmax(150px,2fr) 56px 56px 76px 76px 56px 100px;gap:10px;align-items:center;padding:9px 12px 9px 16px}
.st-head{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-top:0;padding-bottom:4px}
.st-row{position:relative;background:var(--tile)}.st-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--areac)}
.st-row:hover{background:var(--tileh)}
.st-name{font-weight:700;letter-spacing:-.02em}.st-name small{display:block;font-weight:400;color:var(--mute);font-size:11.5px}
.st-trend{color:var(--areac)}
.st-row .u{display:none;color:var(--mute);font-size:11px}
@media (max-width:760px){
  .st-head{display:none}
  .st-row{grid-template-columns:1fr auto auto;row-gap:2px}
  .st-row span:nth-child(5),.st-row span:nth-child(6){display:none}
  .st-trend{grid-column:1/-1}
  .st-row .u{display:inline}
  .minbar{grid-template-columns:1fr auto}.minbar .meter{grid-column:1/-1;order:3}
}

/* area page */
.areahead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.areahead h2{display:flex;align-items:center;gap:12px}
.areahead h2::before{content:"";width:16px;height:16px;background:var(--areac);flex:none}
.dom-head h3 a:hover{color:var(--areac)}
.bigl-n.est{color:#55524d}

/* header, menu and page content share one centered column on wide screens */
@media (min-width:761px){
  header,nav{padding-left:max(28px,calc((100vw - 1180px) / 2 + 28px));padding-right:max(28px,calc((100vw - 1180px) / 2 + 28px))}
  nav button:first-child{padding-left:0}
}

/* in-game level box: a small version of the skill page's level card */
.lvchip{position:relative;background:var(--tile);border:0;border-radius:0;min-width:170px;padding:10px 14px 11px 18px;text-align:left}
.lvchip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--areac)}
.lvchip-n{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.06em;line-height:.85;color:var(--ink)}
.lvchip-t{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.lvchip .meter{background:#2c2c2c;margin-top:8px}.lvchip .meter i{background:var(--areac)}
.st-head.st-4,.st-row.st-4{grid-template-columns:minmax(150px,2fr) 80px 90px 80px}
@media (max-width:760px){.st-row.st-4{grid-template-columns:1fr auto auto auto;column-gap:10px}.st-row.st-4 .u{display:none}}
.skill.locked .skill-top b::before{content:'';display:inline-block;width:11px;height:14px;margin-right:8px;vertical-align:-1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M3.2 7V4.6a2.8 2.8 0 0 1 5.6 0V7' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='0.8' y='6.6' width='10.4' height='8' rx='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M3.2 7V4.6a2.8 2.8 0 0 1 5.6 0V7' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='0.8' y='6.6' width='10.4' height='8' rx='1.3'/%3E%3C/svg%3E") center/contain no-repeat}
.streaknote{font-size:13px;margin:10px 0 0}

/* beginner intro card on each game */
.introq{width:26px;height:26px;border:1px solid #3a3a3a;background:transparent;color:var(--mute);font-family:var(--mono);font-size:12px;cursor:pointer;margin-left:-4px}
.introq:hover{background:var(--ink);color:var(--bg)}
.intro{position:relative;display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:start;background:var(--tile);box-shadow:inset 4px 0 0 var(--ink);padding:14px 16px 14px 20px;margin:4px 0 16px}
.intro p{margin:4px 0 0;color:var(--ink2);font-size:14.5px;line-height:1.5}.intro b{color:var(--ink)}
.intro-l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
@media (max-width:760px){.intro{grid-template-columns:1fr}}

/* back links: one clear way up from every page below the menu */
.back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);border:1px solid #3a3a3a;padding:8px 13px 8px 11px;margin:0 0 18px;transition:.12s}
.back:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.back span{font-size:14px;line-height:1}

/* level menu in the game's top bar */
.gs-levels{position:relative}
.gs-levels summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);border:1px solid #3a3a3a;padding:9px 13px;white-space:nowrap}
.gs-levels summary::-webkit-details-marker{display:none}
.gs-levels summary:hover,.gs-levels[open] summary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gs-lvlist{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(620px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;background:var(--tile);box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 3px 0 var(--areac,var(--pink));padding:12px 12px 8px}
.gs-lvnote{font-size:12.5px;margin:4px 6px 8px}
.gs-rated{margin:2px 6px 6px}
.skill.locked{cursor:default}

/* game cards: cover art on top */
.skill .cover{display:block;margin:-13px -14px 6px -17px;height:108px;background:#121212;border-bottom:1px solid var(--hair)}
.cover svg{display:block;width:100%;height:100%;padding:12px 0;box-sizing:border-box;fill:none;stroke:var(--areac,#888);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.cover .cv-g{stroke:#2e2e2e;stroke-width:1.5}
.cover .cv-f{fill:var(--areac,#888)}
.cover text{fill:var(--areac,#888);stroke:none;font:700 22px var(--mono);text-anchor:middle}
.cover .cv-t{fill:#121212}
.skill:hover .cover{background:#161616}
.skill.locked .cover svg{stroke:#555}.skill.locked .cover .cv-f,.skill.locked .cover text{fill:#555}
.skill.locked .cover [style*=areac]{stroke:#555!important}
@media (max-width:760px){
  .gs-levels[open]{flex-basis:100%}.gs-levels[open] summary{display:inline-block}
  .gs-lvlist{position:static;width:auto;margin-top:6px;max-height:60vh}
  .skill .cover{height:88px}
  .areahead{gap:12px}.areahead .bigl{display:flex;align-items:baseline;gap:12px;min-width:0;width:100%;padding:10px 14px 10px 18px}.areahead .bigl-n{font-size:40px}.areahead .bigl-t{margin:0}.areahead .bigl .meter{flex:1}
}

/* piano roll + loop lane (more.js) */
.proll{display:grid;grid-template-columns:56px repeat(var(--steps),minmax(0,1fr));gap:2px;background:var(--dev);padding:8px;margin-bottom:14px;overflow-x:auto}
.pr-key{font-family:var(--mono);font-size:10px;color:#cfd3d4;background:#3a3e40;display:flex;align-items:center;padding:0 6px;height:24px}
.pr-key.blk{background:#1f2122;color:#8a9194}
.pr-cell{height:24px;background:#232526;cursor:pointer;border-left:1px solid transparent}
.pr-cell.bar{border-left-color:#4a4f52}
.pr-cell:hover{background:#2f3335}
.pr-cell.on{background:var(--devacc)}
.pr-cell.tgt{outline:2px solid #9aa1a4;outline-offset:-2px}
.pr-cell.ok{background:var(--teal)}
.looplane{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:46px;background:#181a1b;margin-bottom:6px}
.ll-bar{border-left:1px solid #3b3f41;font-family:var(--mono);font-size:10px;color:#8a9194;padding:2px 4px}
.ll-brace{position:absolute;top:22px;height:8px;background:var(--devacc)}
.ll-brace.tgt{top:34px;background:transparent;outline:2px solid var(--teal)}


/* Today: one minimum unit, a compact deck, a clear journey line. Everything fits on one screen. */
.deck-top{align-items:flex-end}
.minunit{display:flex;flex-direction:column;gap:7px}
.mu-top{display:flex;justify-content:flex-end;align-items:baseline;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.mu-top b{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;text-transform:none;color:var(--ink)}.mu-top b::after{content:'·';margin-left:10px;color:var(--mute);font-weight:400}
.minunit .meter{margin:0;height:4px;background:#2c2c2c}.minunit .meter i{background:var(--pink)}
.minunit.done .meter i{background:var(--teal)}.minunit.done .mu-top b{color:var(--teal)}
.deck .slot{min-height:84px}
.deck{margin-bottom:18px}
main:has(.journey){padding-bottom:0}
@media (max-width:760px){.minunit{min-width:0;width:100%}.mu-top{justify-content:flex-start}.deck-top{flex-direction:column;align-items:stretch;gap:10px}}
/* Today on desktop: the session's slots sit in one row so the journey gets the rest of the screen. */
@media (min-width:900px){.deck .slots{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none}.deck .slot-name{font-size:15px}}
@media (min-width:761px) and (max-height:860px){.deck-label{font-size:44px}.deck .slot{min-height:70px}.deck-bottom{margin-top:10px}.deck{margin-bottom:12px}}


/* Journey: your level as a road of tiers, then one meter per area. */
.journey{display:flex;flex-direction:column;gap:18px;padding:18px 26px 18px;background:var(--tile);color:var(--ink);margin:0;overflow:hidden;min-height:210px}
.j-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.j-now{display:flex;flex-direction:column;gap:3px}.j-now small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.j-now b{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.035em;color:var(--ink);line-height:1}
.j-tk.next i{white-space:normal;width:64px;text-align:center;line-height:1.25}
.j-all{padding:7px 14px;font-size:13px}
.j-map{position:relative;height:64px;margin:0 8px 0 6px;flex:none}
.j-tk{position:absolute;top:19px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px}
.j-tk b{width:2px;height:10px;background:#444}.j-tk.hit b{background:var(--pink)}
.j-tk span{font-family:var(--mono);font-size:10px;color:#56534e}.j-tk.hit span{color:var(--ink2)}.j-tk.cur span,.j-tk.next span{color:var(--ink)}
.j-tk i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:#4a4845;white-space:nowrap;margin-top:-2px}
.j-tk.hit i{color:var(--mute)}.j-tk.cur i,.j-tk.next i{color:var(--ink)}.j-tk.next b{width:14px;height:14px;margin:-2px 0 -2px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--ink),0 0 0 6px rgba(255,43,138,.25)}
.j-tk.next span{font-weight:700}.j-tk.next i{font-weight:700;letter-spacing:.08em}
.j-inf{position:absolute;right:0;top:15px;width:18px;text-align:left;font-size:18px;line-height:18px;color:#5d5a55}
.j-rail{position:absolute;left:0;right:22px;top:22px;height:4px;background:#2c2c2c}.j-rail i{display:block;height:100%;background:var(--pink)}
.j-me{position:absolute;top:2px;transform:translateX(-50%);display:flex;line-height:0}
.j-me svg path{fill:var(--pink)}.j-me svg circle{fill:var(--bg)}
.j-mix{flex:1;min-height:70px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;padding-top:8px;border-top:1px solid #2a2a2a}
.j-ch{min-height:0;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--mute)}
.j-ch:hover{color:var(--ink)}.j-ch:hover .j-m{box-shadow:0 0 0 1px #444}
.j-lv{font-family:var(--mono);font-size:11px;color:var(--ink);height:13px;line-height:13px}.j-ch.off .j-lv{color:#4a4a4a}
.j-m{position:relative;flex:1;min-height:0;width:16px;background:repeating-linear-gradient(to top,#2a2a2a 0 4px,transparent 4px 7px)}
.j-m i{position:absolute;left:0;right:0;bottom:0;background:repeating-linear-gradient(to top,var(--areac) 0 4px,transparent 4px 7px)}
.j-cn{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;height:12px;line-height:12px}
.j-ch:not(.off) .j-cn{color:var(--ink2)}
@media (min-width:761px) and (max-height:860px){.journey{gap:12px;padding:14px 22px 14px}.j-now b{font-size:21px}}
@media (max-width:760px){.j-tk i{display:none}.j-tk.next i{display:block}.journey{height:auto!important;padding:16px}.j-head{flex-wrap:nowrap}.j-now b{font-size:20px}.j-mix{height:180px;flex:none}.j-cn{font-size:8px;letter-spacing:0}.j-sn{font-size:8.5px;letter-spacing:.02em}.j-next{order:3;flex-basis:100%}.j-map{margin:0 12px 0 6px}.j-tk:not(.cur):not(.next) i{display:none}}

/* Capstones: a strip of steps above the current game */
.cap-head{padding:12px 16px}.cap-steps{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.cap-st.on{color:var(--ink)}.cap-st.done{color:var(--teal);text-decoration:line-through;text-decoration-color:#3a3a3a}
.cap-title{margin:18px 0 8px;font-size:15px;color:var(--ink2)}

/* First visit: one question that sets where the games start */
.startq{flex-basis:100%;display:flex;flex-direction:column;gap:10px;margin-top:14px;padding:16px 18px;background:var(--tile);border-left:4px solid var(--pink)}
.startq-l{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.startq-b{display:flex;flex-wrap:wrap;gap:8px}.startq-n{font-size:13px}