*{box-sizing:border-box} :root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#0c1720;color:#e9eee9}body{margin:0;background:radial-gradient(ellipse at 50% 50%,#18302d 0,transparent 65%)}button,select{font:inherit;color:inherit;background:#172a32;border:1px solid #385059;border-radius:9px;min-height:44px;padding:0 15px}button{cursor:pointer}button:hover{border-color:#cbef90}button:focus-visible,select:focus-visible{outline:3px solid #c7ef8d;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.host-space{height:64px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0d;font-size:9px;letter-spacing:.16em;color:#82968e}#app{max-width:800px;margin:auto;padding:22px 24px 12px;height:calc(100svh - 64px);min-height:480px;max-height:960px;display:flex;flex-direction:column;gap:12px}header{display:flex;align-items:center;justify-content:space-between;gap:10px}.eyebrow{font-size:9px;letter-spacing:.17em;color:#a6bd9e;margin:0 0 6px}h1{font-size:36px;letter-spacing:-1.8px;font-weight:500;margin:0}h1 span{color:#c7ef8d;margin-left:12px}h2{font-weight:500;letter-spacing:-1px}.prompt{display:flex;align-items:center;justify-content:space-between;gap:8px}.prompt>div{display:flex;align-items:center;gap:12px}#tonic{font-size:26px;color:#ceef9f}#family-name{font-size:14px}#mode-label{font-size:10px;color:#a4b2ad;text-align:right}.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid #35453f;padding:10px 0}.stats>div{display:flex;flex-direction:column;gap:3px;border-right:1px solid #35453f;padding-left:18px}.stats>div:first-child{padding-left:0}.stats>div:last-child{border:0}small{font-size:8px;letter-spacing:.15em;color:#91a69d}b{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}#lives{color:#c7ef8d;font-size:18px}.board-meta{display:flex;justify-content:space-between;font-size:10px;color:#a6b8ac;gap:8px}#anchor{color:#d5e9c0}#board{flex:1;min-height:180px;position:relative;overflow:hidden;border:1px solid #40554b;border-radius:14px;background:radial-gradient(ellipse at top,#243c37,#101e26 80%);touch-action:none}#surface{position:absolute;inset:0;overflow:hidden}.fret{position:absolute;width:180px;left:calc(50% - 90px);border:0;border-bottom:3px solid #b7aa8b;border-radius:0;background:linear-gradient(90deg,#432e27,#65452f 45%,#3c2924);padding:0;min-height:0;color:#e5d0b9}.fret:before{content:'';position:absolute;top:0;bottom:-3px;left:50%;width:3px;background:repeating-linear-gradient(0deg,#e5c994 0 1px,#887653 1px 3px);box-shadow:0 0 4px #000}.dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;background:#c9ee98;color:#192b22;font-size:17px;font-weight:700;box-shadow:0 0 0 4px #b8ed9533}.guide .dot{background:#f0db9c;box-shadow:0 0 0 4px #edcc9033}.wrong{background:#753b3c!important}.wrong .dot{background:#d87572;color:#fff;box-shadow:none}.key{position:absolute;border-radius:0 0 7px 7px;padding:0;min-height:0;border:1px solid #7e827c;background:linear-gradient(90deg,#c6c9bd,#f2f0df 30%,#e2e4d5);color:#172021}.key.black{z-index:2;background:linear-gradient(90deg,#10191c,#354044 65%,#111c21);border-color:#081317}.key .dot{top:auto;bottom:22px;transform:translateX(-50%);width:31px;height:31px;font-size:14px}.key.black .dot{bottom:16px}.exit{position:absolute;bottom:17px;left:12px;right:12px;border-top:1px dashed #cee79688;pointer-events:none;text-align:right}.exit span{font-size:7px;letter-spacing:.13em;color:#b3c19b}.piano .exit{top:12px;bottom:12px;left:16px;right:auto;border:0;border-left:1px dashed #cee79688;width:1px;z-index:3}.piano .exit span{display:none}#overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0c1922dc;text-align:center;padding:20px;backdrop-filter:blur(3px)}#overlay[hidden]{display:none}#overlay-tag{font-size:8px;letter-spacing:.22em;color:#cce99f}#overlay h2{font-size:32px;margin:10px 0}#overlay p{font-size:12px;line-height:1.6;max-width:290px;color:#adbbb6;margin:0 0 18px}.primary,#play{background:#c7ed96;color:#1c2b22;border-color:#c7ed96;font-weight:650}#play{min-width:185px}.feedback{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px;font-size:12px;color:#c5d7bb}#audio-status{font-size:9px;color:#93a99f}footer{display:flex;gap:8px}footer button:first-child{flex:1}.hint{font-size:10px;color:#8fa398;margin:0;text-align:center;line-height:1.4}dialog{width:min(460px,calc(100vw - 24px));max-height:90svh;overflow:auto;background:#14252c;color:#e9eee9;border:1px solid #52665b;border-radius:16px;padding:22px}dialog::backdrop{background:#050e17c9}dialog h2{margin:0;font-size:26px}dialog p{font-size:12px;color:#a5b9af;line-height:1.6}.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.fields label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#c0d1c5}.fields select{min-width:0;width:100%;padding:0 8px;font-size:12px}.wide{grid-column:1/-1}#apply{width:100%;margin-top:20px}.fine{font-size:10px!important} [hidden]{display:none!important}@media(max-width:600px){.host-space{padding:0 15px;height:64px;font-size:8px}#app{padding:12px 14px 10px;gap:9px}h1{font-size:29px}.eyebrow{font-size:7px}#family-name{font-size:12px}.stats{padding:8px 0}b{font-size:20px}.stats>div{padding-left:12px}.board-meta{font-size:9px}.hint{font-size:9px}footer button{padding:0 11px;font-size:12px}#overlay h2{font-size:28px}.fret{width:158px;left:calc(50% - 79px)}}@media(max-height:680px){#app{gap:7px;padding-top:9px}h1{font-size:26px}.eyebrow{display:none}.stats{padding:5px 0}#tonic{font-size:22px}.hint{display:none}#overlay p{margin-bottom:10px}#overlay h2{margin:5px 0}}body.bh-hosted .host-space{display:none}

@media(max-width:600px){footer:has(#step:not([hidden])){display:grid;grid-template-columns:1fr 1fr}footer:has(#step:not([hidden])) #step{font-size:10px;padding:0 6px}}

/* The higher frets enter below/right; the instrument travels away from the player. */
#board:not(.horizontal) .exit{top:17px;bottom:auto}
#board:not(.horizontal) .exit span{position:relative;top:-15px}
#board.horizontal .exit{top:12px;bottom:12px;left:16px;right:auto;width:1px;border:0;border-left:1px dashed #cee79688;z-index:3}
#board.horizontal .exit span{display:none}
#board.horizontal .fret{border-bottom:0;border-right:3px solid #b7aa8b;background:linear-gradient(#432e27,#65452f 45%,#3c2924)}
#board.horizontal .fret:before{left:0;right:-3px;top:50%;bottom:auto;width:auto;height:3px;background:repeating-linear-gradient(90deg,#e5c994 0 1px,#887653 1px 3px)}

/* Arcade feedback stays outside hit testing and leaves interval dots readable. */
#board.danger{border-color:#ff986e;animation:deadline-glow .8s ease-in-out infinite alternate}
#board.danger .exit{border-color:#ffad7c;filter:drop-shadow(0 0 5px #fa764b)}
.board-meta:has(+ #board.danger) #anchor{color:#ffb38b;font-weight:700}
.spark-layer{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.spark-layer i{position:absolute;width:6px;height:9px;border-radius:2px;background:var(--color);animation:root-spark .85s ease-out forwards}
.root-toast{position:absolute;right:12px;bottom:12px;z-index:4;pointer-events:none;background:#18392eed;border:1px solid #d9f79d;border-radius:20px;color:#e5ffb6;padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.04em;animation:root-toast-in .25s ease-out}
#board.root-party{box-shadow:inset 0 0 25px #cef79c25;border-color:#c9ee98}
#board.timeout-impact{animation:timeout-bump .5s ease-out;border-color:#ff957c;box-shadow:inset 0 0 50px #ff774c55}
#board.timeout-impact #overlay{background:#301e22df}
@keyframes deadline-glow{from{box-shadow:inset 0 0 10px #ff793b10}to{box-shadow:inset 0 0 28px #ff793b44}}
@keyframes root-spark{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--turn)) scale(.25)}}
@keyframes root-toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes timeout-bump{0%,100%{transform:translateX(0)}18%{transform:translateX(-5px)}38%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(1px)}}
@media(prefers-reduced-motion:reduce){#board.danger,#board.timeout-impact,.root-toast,.spark-layer i{animation:none}#board.danger{box-shadow:inset 0 0 20px #ff793b33}.spark-layer{display:none}}

body.bh-hosted #app{height:calc(100svh - var(--runner-header-height,110px));min-height:0}body.bh-hosted .host-space{display:none}#app>header{flex-wrap:wrap}#app>header>div:first-child{flex:1}#app .bh-setup-sharing{margin:0}#save-score{margin-top:10px}#score-entry{display:flex;align-items:end;gap:12px}#score-entry label{font-size:12px}#score-name{display:block;width:110px;margin-top:6px;padding:8px;font:700 25px monospace;letter-spacing:.14em;background:#0c1720;border:1px solid #7f9776;border-radius:8px;color:#d8f7b0}#score-list{padding-left:25px}#score-list li{padding:10px 0;font:20px monospace}#score-list strong{float:right;color:#c9ee98}#score-status{color:#c9ee98}#scores-scope{font-size:12px;color:#b3c6ab}#score-entry[hidden]{display:none}body.bh-hosted #app h1{font-size:26px}body.bh-hosted #app .eyebrow{display:none}@media(max-width:600px){#app footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}#app footer button{padding:0 5px}#app footer:has(#step:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr))}body.bh-hosted #app footer{grid-template-columns:repeat(3,minmax(0,1fr))}body.bh-hosted #app #board{min-height:140px}body.bh-hosted #app{gap:6px;padding-top:8px}}