/* White building blocks. Mint = selection/success; pink = touch/reward. */
:root{--ink:#222;--muted:#747474;--line:#e3e3e3;--soft:#f7f7f7;--paper:#fff;--mint:#a7e8d1;--mint-pale:#e7f8f1;--mint-ink:#256851;--pink:#ff9fc5;--pink-pale:#fff0f6;--pink-ink:#873955;--gold:#222;--radius:0;--shadow:4px 4px 0 #e5e5e5}
body{background:#fff;color:#222}
body :is(button,.button,.account-link,.score-item,.score-icon,.unit-heading,.level-pill,.level-tag,.brandmark,.practice-settings,.score-card,.tuner,.target-card,.metronome-panel,.control-options,.note-feedback,.report,.account-box,.auth-message,.auth-logo,.search-box,.empty-state,.admin-gate,.admin-section,.metric-grid article,.streak-badge,.growth-icon,.growth-strip,dialog,select,input:not([type=range]),.companion-start,.switch-track,.switch-track:after,.page-nav button){border-radius:0}
body :is(button,a,input,select,summary):focus-visible{outline:3px solid var(--mint-ink);outline-offset:4px;box-shadow:4px 4px 0 var(--pink)}
body :is(.button,.primary,.secondary,.account-link,.step-button,.companion-start){border:2px solid #222;box-shadow:3px 4px 0 #dedede;transition:background .12s,box-shadow .12s,transform .12s;color:#222;background:white}
body :is(.button.dark,.primary){background:#222;color:white;box-shadow:4px 4px 0 #bcbcbc}
body button:disabled{cursor:default;opacity:.4}
@media(hover:hover){body :is(button,.button,.account-link,.companion-start):not(:disabled):hover{background:var(--mint-pale);color:#222;border-color:#222;box-shadow:4px 4px 0 var(--mint)}body a:not(.button,.account-link,.companion-start):hover{color:var(--mint-ink)}}
body :is(button,.button,.account-link,.companion-start):not(:disabled):active{background:var(--pink-pale);color:#222;box-shadow:1px 1px 0 var(--pink);transform:translate(2px,2px)}
body input[type=checkbox]{accent-color:var(--mint-ink)}
body input[type=range]{appearance:none;background:#e9e9e9;height:6px;accent-color:var(--mint-ink);border-radius:0}
body input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;background:white;border:2px solid #222;border-radius:0;box-shadow:2px 2px 0 #aaa}
body input[type=range]::-moz-range-thumb{width:13px;height:13px;background:white;border:2px solid #222;border-radius:0;box-shadow:2px 2px 0 #aaa}
body input[type=range]:active::-webkit-slider-thumb{background:var(--pink);box-shadow:2px 2px 0 var(--mint-ink)}
body input[type=range]:active::-moz-range-thumb{background:var(--pink)}
body :is(input:not([type=range],[type=checkbox]),select){background:white;border-color:#cfcfcf}
body :is(input:not([type=range],[type=checkbox]),select):focus{background:var(--mint-pale);border-color:var(--mint-ink)}
/* Navigation and library. */
.home-page .club-header{border-right:2px solid #222}
.home-page .club-header nav{background:white;border-radius:0}
.home-page .club-header nav button{border-radius:0;border:2px solid transparent;font-weight:650}
.home-page .club-header nav button.selected{background:var(--mint-pale);border-color:#222;box-shadow:4px 4px 0 var(--mint)}
.home-page .club-header nav button:not(:disabled):active{background:var(--pink-pale);box-shadow:2px 2px 0 var(--pink)}
.home-page .account-link{border-color:#222;border-radius:0}
.home-page .journey-stats{border-color:#222;font-variant-numeric:tabular-nums}
.home-page .journey-stats #pathStars{color:#222;display:flex;gap:6px;align-items:center}
.home-page .journey-welcome h1{font-weight:800;letter-spacing:-1px}
.home-page .unit-heading{border:2px solid #222;border-radius:0;box-shadow:5px 5px 0 #dedede;padding:16px 21px;background:#fff}
.home-page .unit-heading>span{font-family:ui-monospace,monospace;letter-spacing:2px}
.home-page .score-item{border-radius:0;border:2px solid #222;background:white;box-shadow:5px 5px 0 #e8e8e8;padding:21px;transition:background .15s,box-shadow .15s}
.home-page .score-icon{border:1px solid #222;border-radius:0;background:#f5f5f5;box-shadow:3px 3px 0 #ddd}
.home-page .score-item:hover{transform:none;background:var(--mint-pale);border-color:#222;box-shadow:5px 5px 0 var(--mint)}
.home-page .score-item:hover .score-icon{background:var(--pink-pale);box-shadow:3px 3px 0 var(--pink)}
.home-page .score-item:active{background:var(--pink-pale);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--pink)}
.home-page .library-filters{gap:14px;border-bottom:2px solid #e8e8e8;padding-bottom:12px}
.home-page .library-filters button{border:2px solid transparent;padding:8px 15px;margin:0;border-radius:0}
.home-page .library-filters button.selected{border-color:#222;background:var(--mint-pale);box-shadow:3px 3px 0 var(--mint)}
.home-page .button{border:2px solid #222;border-radius:0}
/* Platforms and a right-angle stepping path. */
.home-page .challenge-map{background:none;padding-top:105px;gap:26px}
.home-page .path-step{background:transparent;z-index:1;min-height:170px}
.home-page .path-node{width:82px;height:67px;border:2px solid #c9c9c9;border-radius:0;background:#f7f7f7;box-shadow:6px 7px 0 #dedede;color:#a0a0a0;margin-bottom:24px}
.home-page .path-step.current .path-node{background:#222;border-color:#222;color:#fff;box-shadow:6px 7px 0 #aaa}
.home-page .path-step.complete .path-node{background:#fff;border-color:#222;color:#222;box-shadow:6px 7px 0 #dedede}
.home-page .path-step.chosen .path-node{background:var(--mint);border-color:#222;color:#222;box-shadow:6px 7px 0 var(--pink)}
.home-page .path-node:not(:disabled):hover{background:var(--mint-pale);border-color:#222;color:#222;box-shadow:6px 7px 0 var(--mint)}
.home-page .path-node:not(:disabled):active{background:var(--pink);box-shadow:2px 3px 0 var(--mint);transform:translate(3px,3px)}
.home-page .path-node svg{stroke-linejoin:miter;stroke-linecap:square}
.home-page .path-step strong,.home-page .path-song,.home-page .level-stars{background:#fff;padding-left:6px;padding-right:6px}
.home-page .level-stars{display:flex;gap:5px;color:#bcbcbc;padding-top:5px}
.block-icon{width:22px;height:22px;display:inline-block;vertical-align:middle;flex-shrink:0;fill:currentColor;shape-rendering:crispEdges}
.level-stars .block-icon{width:13px;height:13px}.level-stars .earned{color:var(--mint-ink)}
.block-road{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.block-road path{fill:none;stroke:#ebebeb;stroke-width:7;stroke-dasharray:7 10;stroke-linecap:butt;stroke-linejoin:miter}
.home-page .companion-start{border:2px solid #222;border-radius:0;box-shadow:3px 4px 0 #ddd;font-size:11px}
.home-page .companion-start:hover{background:var(--mint-pale);box-shadow:3px 4px 0 var(--mint)}
.home-page .companion-start:active{background:var(--pink-pale);box-shadow:1px 1px 0 var(--pink)}
.companion-stars{color:var(--pink-ink)}.companion-stars:before,.companion-stars:after{content:'';display:inline-block;width:9px;height:9px;background:var(--mint);margin:0 5px;box-shadow:2px 2px 0 var(--pink)}
.companion-message{color:var(--pink-ink);background:white}
/* Practice: keep notation geometry intact. */
.room-page .brandmark{border-radius:0;box-shadow:3px 3px 0 #ddd}
.room-page .practice-settings{background:#fff;border:1px solid #ccc;border-radius:0}
.room-page .practice-settings[open]{border-color:#222;box-shadow:4px 4px 0 var(--mint-pale)}
.room-page .mode{border:2px solid #ddd;border-radius:0;background:#fff}
.room-page .mode.active{background:var(--mint-pale);border-color:#222;box-shadow:3px 3px 0 var(--mint);color:#222}
.room-page .mode.active small{color:#505a56}
.room-page .score-card{border:2px solid #222;border-radius:0;box-shadow:5px 5px 0 #eee}
.room-page .score-toolbar{background:#fafafa;border-bottom:1px solid #e3e3e3}
.room-page .progress{height:6px;background:#eee}.room-page .progress>div{background:var(--mint)}
.room-page .tuner,.room-page .target-card{border:1px solid #ccc;background:white;border-radius:0}
.room-page .note-feedback{border-left:4px solid #ccc;background:#f7f7f7;border-radius:0}
.room-page .note-feedback.passed{background:var(--mint-pale);color:var(--mint-ink);border-left-color:var(--mint-ink)}
.room-page .score-note.current .halo{fill:var(--mint-pale)}
.room-page .score-note.current.preview .head{fill:var(--mint-ink);stroke:var(--mint-ink)}
.room-page .score-note.good .notation .head,.room-page .score-note.good .notation .stem{fill:var(--mint-ink)!important;stroke:var(--mint-ink)!important}
.room-page .score-note.good .halo{fill:var(--mint-pale)}.room-page .success-ring{stroke:var(--pink)}
.room-page .beat-dots i{border-radius:0;background:#e4e4e4}.room-page .beat-dots i.on{background:var(--mint);box-shadow:2px 2px 0 var(--pink)}
.room-page .tuning-scale>div{border-radius:0;background:#eaeaea}.room-page .tuning-scale b{background:var(--mint-ink)}.room-page .tuning-scale i{border-radius:0;background:#222}
.room-page .metronome-panel{border:2px solid #222;border-radius:0;background:white;box-shadow:4px 4px 0 #e5e5e5}
.room-page .tempo-number strong{font-family:ui-monospace,monospace;font-weight:750;color:#222;letter-spacing:0}
.room-page .step-button{border-radius:0;border:2px solid #222;box-shadow:2px 2px 0 #ddd;width:32px;height:30px}
.room-page .switch-track{border:1px solid #222;border-radius:0;background:#eee;width:30px;height:18px}
.room-page .switch-track:after{border-radius:0;box-shadow:1px 1px 0 #888;width:11px;height:12px;margin:2px;background:#fff}
.room-page .met-heading input:checked+.switch-track{background:var(--mint);border-color:#222}
.room-page .met-heading input:checked+.switch-track:after{background:#222;box-shadow:1px 1px 0 var(--pink)}
.room-page #mechanicalMetronome.ticking .met-case{fill:var(--mint-pale)}
.room-page #mechanicalMetronome.ticking #metWeight>rect{fill:var(--pink);stroke:#222;stroke-width:2}
.room-page .piece-stars,.room-page .song-stars,.room-page .star-icon{color:#555!important}
.room-page .reward-stars .earned{color:var(--pink-ink);filter:none;text-shadow:3px 3px 0 var(--pink-pale)}
.room-page .reward-result{background:var(--mint-pale);padding:18px;border-bottom:3px solid var(--mint)}
.room-page .report,.room-page dialog{border-radius:0;box-shadow:6px 6px 0 #ddd}
.room-page .report .next-level{border-radius:0;background:#222;border:2px solid #222;box-shadow:4px 4px 0 var(--mint);color:white}
.room-page .report .next-level:hover{background:var(--mint-pale);color:#222;box-shadow:4px 4px 0 var(--pink)}
.room-page .xp-track{border-radius:0;height:6px}.room-page .xp-track i{background:var(--mint)}
.room-page .week-day i{border-radius:0}.room-page .week-day.done i{background:var(--mint);color:#222}.room-page .week-day.today i{outline-color:var(--pink)}
.room-page .streak-badge.unlocked{background:var(--mint-pale);border-color:#222;box-shadow:3px 3px 0 var(--pink)}
.room-page .count-in-overlay strong{font-family:ui-monospace,monospace;color:#222;text-shadow:5px 5px 0 var(--mint),9px 9px 0 var(--pink)}
/* Accounts and the owner's desk share the same components. */
.auth-logo{color:#222}.auth-tabs button{border-radius:0;background:white;border:2px solid #ddd}
.auth-tabs button.selected{background:var(--mint-pale);border:2px solid #222;box-shadow:3px 3px 0 var(--mint)}
.auth-form input{border-radius:0;border:2px solid #ccc;background:white}
.auth-message{border-left:4px solid var(--mint-ink);background:var(--mint-pale);color:var(--mint-ink)}
.auth-message.error{border-color:var(--pink-ink);background:var(--pink-pale);color:var(--pink-ink)}
.account-box,.admin-gate,.admin-section,.metric-grid article{border-radius:0;background:white;border:1px solid #ccc;box-shadow:4px 4px 0 #eee}
.chart-bar{border-radius:0;background:#333}.chart-bar:hover{background:var(--mint)}
.chart-bar.empty{background:#eee}
.block-tap{position:fixed;z-index:1000;width:7px;height:7px;background:var(--mint);pointer-events:none;box-shadow:10px -8px 0 var(--pink),-8px -4px 0 var(--mint);animation:block-tap .38s steps(5,end) forwards}
@keyframes block-tap{to{opacity:0;transform:translateY(-20px)}}
@media(max-width:760px){.home-page .club-header{border-right:0;border-bottom:2px solid #222}.home-page .club-header nav{border-top:2px solid #222;padding-bottom:max(14px,env(safe-area-inset-bottom));gap:28px}.home-page .club-header nav button.selected{box-shadow:3px 3px 0 var(--mint)}.home-page .path-step{width:190px}.home-page .companion-start{padding:7px}.home-page .score-item{padding:18px 14px}.home-page .score-item strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.block-tap{display:none}body :is(button,a){transition:none}}
.room-page .piece-stars>span:has(.block-icon){display:inline-flex;vertical-align:middle;margin-right:5px;color:#bbb}.room-page .piece-stars>span.earned{color:var(--mint-ink)}.room-page .piece-stars .block-icon{width:17px;height:17px}.room-page .reward-stars .block-icon{width:38px;height:38px}.room-page .reward-stars>span{display:inline-flex;margin:0 5px}.room-page .reward-stars>span:not(.earned){color:#c5d7cf}
/* Foreground character: feet overlap the platform without being obscured. */
.home-page .path-step.chosen{z-index:2}
.home-page .path-companion{mix-blend-mode:normal;z-index:30;pointer-events:none}
.home-page .challenge-map{padding-top:135px}
.home-page .path-step{min-height:224px}

/* Ground contact and two alternating fading footprints, above page components. */
.path-companion .companion-shadow{position:absolute;left:27px;top:85px;width:40px;height:9px;background:rgba(32,32,32,.24);border-radius:50%;transform:skewX(-16deg);pointer-events:none}
.path-companion img{position:relative;z-index:1}
.path-companion.walking .companion-shadow{animation:companion-shadow-hop .52s ease-in-out}
.companion-footprint{position:absolute;z-index:29;width:9px;height:6px;border-radius:2px;background:#b2bdba;pointer-events:none;animation:companion-footprint-fade .9s ease-out forwards;transform:rotate(-14deg)}
.companion-footprint.right{transform:rotate(14deg)}
@keyframes companion-footprint-fade{0%,15%{opacity:.6}100%{opacity:0}}
@keyframes companion-shadow-hop{0%,100%{transform:scale(1) skewX(-16deg)}70%{transform:scale(.7) skewX(-16deg);opacity:.55}}
@media(prefers-reduced-motion:reduce){.companion-footprint{display:none}.path-companion .companion-shadow{animation:none!important}}