:root{color-scheme:dark;--ink:#f1e7d5;--muted:#a3a1b7;--gold:#efbb79;--line:#d5d2ed1b;--bg:#191a2c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);min-width:280px;overflow:hidden}button,input,select{font:inherit}button,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}.night{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 0,#35324e88,transparent 65%),radial-gradient(circle at 9% 20%,#dacba077 0 1px,transparent 1.5px),radial-gradient(circle at 93% 70%,#dacba077 0 1px,transparent 1.5px)}.app{width:min(1220px,calc(100% - 52px));height:100dvh;max-height:100dvh;display:flex;flex-direction:column;margin:auto;padding-bottom:12px}.topbar{height:96px;min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:15px}.identity{display:flex;align-items:center;gap:15px}.identity img{width:39px;height:39px}.eyebrow{font-size:8px;letter-spacing:2px;color:#b8a4bf;font-weight:600;margin:0 0 7px}h1{font:normal 34px/1.05 Georgia,serif;letter-spacing:-1px;margin:0}h1 em{font-weight:400;color:var(--gold)}.top-actions{display:flex;gap:7px}.top-actions button{border:1px solid #c7c5de28;background:#ffffff04;border-radius:30px;height:33px;min-width:33px;padding:0 12px;color:#d0c9db;font-size:11px}.top-actions button:first-child{font:18px Georgia}.top-actions #sound{font-size:19px;padding:0 9px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 267px;gap:20px;min-height:0;flex:1}.stage{display:flex;flex-direction:column;min-height:0;background:#202237;border:1px solid #c8c2e025;border-radius:20px;overflow:hidden;box-shadow:0 22px 75px #08081533}.stage-heading{height:45px;min-height:45px;display:flex;align-items:center;gap:12px;padding:0 19px;border-bottom:1px solid var(--line)}.stage-heading select{min-width:0;max-width:56%;color:#e2d9c9;font-size:11px;background:#26293e;border:0;outline-offset:1px;padding:7px 19px 7px 0}.stage-heading select option{background:#282a40}.stage-heading button{background:#ffffff05;color:#b8b4cb;border:1px solid #d0cbe02b;border-radius:20px;font-size:9px;padding:6px 10px;white-space:nowrap}.stage-heading button[aria-pressed=true]{background:#c8acd81c;border-color:#b39dcb77;color:#d5bde6}#state-badge{font-size:6px;color:#9294ae;letter-spacing:1.5px;margin-left:auto;white-space:nowrap}.score-strip{display:flex;align-items:center;gap:34px;min-height:62px;padding:11px 22px;background:#202235}.score-strip>div{display:flex;flex-direction:column;gap:5px}.score-strip span{font-size:6px;letter-spacing:1.2px;color:#878ba8}.score-strip strong{font:22px/1 Georgia,serif;color:#e8d4b3}.score-strip .clock{margin-left:auto;text-align:right;gap:6px}.score-strip .clock strong{font:10px ui-sans-serif,system-ui;color:#aeb3c7;font-variant-numeric:tabular-nums}.score-strip .clock span{font-size:6px;letter-spacing:1.3px}.playfield{flex:1;position:relative;min-height:0;overflow:hidden;background:#24273d;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.center-message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px;pointer-events:none;background:linear-gradient(transparent,#24273d44 30%,#24273d55 70%,transparent);transition:opacity .2s}.center-message .tiny-star{color:#f0c88c;font-size:21px;margin-bottom:12px}.center-message h2{font:normal clamp(23px,3vw,37px)/1.2 Georgia,serif;color:#e8dac5;margin:0 0 12px;letter-spacing:-.7px;text-shadow:0 3px 30px #161729}.center-message p{font-size:10px;color:#aaaec2;line-height:1.9;margin:0}.center-message.quiet{opacity:0}.judgement{position:absolute;top:39%;left:50%;transform:translate(-50%,-10px);font:22px Georgia,serif;color:#ffe3b4;opacity:0;pointer-events:none;text-shadow:0 0 20px #edc78a66;transition:opacity .15s,transform .15s;white-space:nowrap}.judgement.show{opacity:1;transform:translate(-50%,0)}.judgement.miss{color:#a9aac0;font-size:17px}.fever{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:7px;font-weight:700;letter-spacing:2px;color:#eec68a;background:#4b3b3d80;border:1px solid #f5cb6533;padding:6px 12px;border-radius:20px;white-space:nowrap}.track-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff04}.track-progress i{display:block;height:100%;width:0;background:#f1c083;box-shadow:0 0 8px #eac38e77}.lanes{display:grid;grid-template-columns:repeat(4,1fr);height:82px;min-height:82px;background:#1c2033;border-top:1px solid #d8c89522;padding:4px 14px 6px;gap:7px}.lane{position:relative;min-width:0;touch-action:none;user-select:none;border:1px solid #bdc1e014;border-radius:12px;background:#ffffff02;color:#c3bbcc;padding:3px 0;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .08s,border-color .08s,transform .08s}.lane svg{height:55px;width:51px;filter:drop-shadow(0 6px 8px #0c0f2144);pointer-events:none}.lane .key{font:13px Georgia;border:1px solid #ffffff18;border-radius:5px;width:21px;line-height:23px;height:25px;background:#ffffff04;pointer-events:none}.lane .lane-name{font-size:7px;position:absolute;bottom:4px;color:#9c9caf;display:none;pointer-events:none}.lane:active,.lane.active{background:#e9c19b16;border-color:#efc17f66;transform:translateY(1px)}.lane.active svg{filter:drop-shadow(0 0 13px #f8cc7955)}.journal{border:1px solid #d9c5df20;border-radius:19px;background:linear-gradient(150deg,#303049,#29283c);padding:23px;display:flex;flex-direction:column;min-height:0;overflow:hidden}.journal-top{display:flex;justify-content:space-between;align-items:center;font-size:7px;letter-spacing:1.5px;color:#b5a2c6}.journal-top>span:last-child{font-size:19px;color:#d6ba86}.journal h2{font:27px/1.18 Georgia,serif;color:#eadac2;margin:17px 0 10px;letter-spacing:-.6px}.parade-art{height:116px;min-height:116px;margin:5px -10px 0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#b6a4d414,transparent 68%)}.parade-art svg{width:69px;height:97px;margin:0 -5px;transform:rotate(-8deg)}.parade-art svg:nth-child(2){transform:translateY(-12px) rotate(2deg);z-index:1}.parade-art svg:nth-child(3){transform:rotate(12deg)}.journal>p{font-size:10px;color:#aaa9bf;line-height:1.9;margin:6px 0 17px}.song-facts{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid #d9d2ed17;border-bottom:1px solid #d9d2ed17}.song-facts>div{display:flex;flex-direction:column;gap:8px}.song-facts span,.best-record>span{font-size:6px;color:#8d8ba6;letter-spacing:1px}.song-facts strong{font-size:11px;color:#d1b78c;font-weight:500}.best-record{margin-top:17px;display:flex;flex-direction:column;gap:9px}.best-record strong{font-size:10px;font-weight:400;color:#bdb6ca;line-height:1.7}.journal .journal-tip{font-size:8px;color:#87879f;line-height:1.8;margin:auto 0 0;padding-top:18px}.transport{display:flex;align-items:center;gap:10px;min-height:67px;padding-top:12px}.primary{background:#eebc7c;color:#302736;border:1px solid #ffdcac;border-radius:10px;padding:12px 23px;min-height:43px;font-size:11px;font-weight:700;box-shadow:0 5px 18px #edbd7010}.primary:hover{background:#ffd49c}.primary span{margin-left:17px}.secondary{border:1px solid #cdc4e02d;background:#ffffff03;color:#beb8cc;border-radius:10px;min-height:41px;padding:10px 15px;font-size:11px}.secondary:hover{background:#ffffff08}.transport .footer-hint{font-size:9px;color:#7b7f99;flex:1;text-align:center}.settings-button{font-size:17px;padding:7px 12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{background:radial-gradient(ellipse at 50% 0,#454056,#29283e 70%);color:var(--ink);border:1px solid #e6cfab4b;border-radius:22px;width:min(480px,calc(100% - 28px));max-height:92dvh;overflow:auto;text-align:center;padding:32px 30px;box-shadow:0 30px 120px #03041288}dialog::backdrop{background:#0d1022d9;backdrop-filter:blur(5px)}dialog h2{font:normal 33px/1.2 Georgia,serif;color:#eedac0;letter-spacing:-.6px;margin:8px 0 15px}dialog p{font-size:11px;line-height:1.8;color:#b2a9c1}dialog .close{position:absolute;top:9px;right:12px;border:0;background:transparent;color:#c2b8ce;font-size:24px;padding:3px 7px}#help-copy{text-align:left;margin:15px 0 23px}#help-copy p{border-top:1px solid #e1d6ef13;padding-top:13px;margin:13px 0}#help-copy b{color:#dfc99f;font-weight:600}#help-copy .keys{display:flex;justify-content:center;gap:10px}.keys i{font-style:normal;padding:8px 13px;border:1px solid #e1d6ef35;border-radius:7px;background:#ffffff03;color:#ecd4b0}.offset-control{display:flex;align-items:center;gap:15px;margin:17px 0 10px}.offset-control input{flex:1;min-width:0;accent-color:var(--gold)}.offset-control output{width:62px;font-size:12px;color:#e2c7a3}#offset-label{display:block;text-align:left;font-size:10px;margin-top:20px;color:#d2bdcd}dialog .fineprint{font-size:9px;color:#8e88a1;line-height:1.8}.result-grade{font:80px/1 Georgia;color:#f1c68c;text-shadow:0 0 35px #efbc5633;margin:15px 0 10px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:23px 0 18px;padding:17px 0;border-top:1px solid #c9b9d726;border-bottom:1px solid #c9b9d726;gap:10px}.result-stats b{display:block;font:23px Georgia;color:#ecd5af}.result-stats span{font-size:7px;color:#9d95ad;display:block;margin-top:8px}.result-breakdown{display:flex;justify-content:space-between;gap:8px;font-size:8px;color:#b9abc6;margin-bottom:22px}.dialog-buttons{display:flex;justify-content:center;gap:10px}.dialog-buttons .primary,.dialog-buttons .secondary{flex:1;padding:11px}#share-link{display:block;width:100%;margin:20px 0;background:#191c30;border:1px solid #bab1ce33;border-radius:9px;padding:13px;color:#c9c4df;font-size:11px}#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,15px);max-width:90vw;border:1px solid #ffe7bb;background:#e5d1ae;color:#322c3d;border-radius:9px;padding:11px 18px;opacity:0;pointer-events:none;font-size:11px;text-align:center;transition:.2s;z-index:30}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.game-layout{grid-template-columns:1fr}.journal{display:none}.app{width:calc(100% - 30px)}.topbar{height:78px;min-height:78px}.identity img{width:32px;height:32px}h1{font-size:29px}.transport .footer-hint{font-size:8px}.stage{border-radius:17px}}
@media(max-width:540px){.app{width:calc(100% - 14px);padding-bottom:7px}.topbar{height:65px;min-height:65px;padding:0 5px;gap:7px}.identity{gap:8px}.identity img{width:28px;height:28px}.identity .eyebrow{font-size:5px;letter-spacing:1.2px;margin-bottom:5px}h1{font-size:23px;letter-spacing:-.5px}.top-actions{gap:4px}.top-actions button{height:28px;min-width:28px;font-size:9px;padding:0 8px}.top-actions #sound{font-size:17px;padding:0 7px}.top-actions button:first-child{font-size:16px}.stage-heading{height:40px;min-height:40px;padding:0 11px;gap:7px}.stage-heading select{font-size:10px;max-width:57%;padding-right:0}.stage-heading button{font-size:8px;padding:6px 8px}#state-badge{font-size:5px;letter-spacing:.5px}.score-strip{padding:11px 15px;gap:21px;min-height:62px}.score-strip strong{font-size:21px}.score-strip span{font-size:5px;letter-spacing:1px}.score-strip .clock strong{font-size:8px}.score-strip .clock span{font-size:5px}.lanes{min-height:76px;height:76px;gap:4px;padding:3px 6px 6px}.lane{gap:4px;border-radius:10px}.lane svg{width:40px;height:48px}.lane .key{font-size:11px;width:17px;height:22px;line-height:20px}.transport{min-height:61px;padding-top:8px;gap:6px}.transport .primary{flex:1;padding:10px 12px;font-size:10px;min-height:42px}.primary span{margin-left:7px}.transport .secondary{font-size:11px;padding:10px 11px;min-height:40px}.transport .secondary span{display:none}.transport .footer-hint{display:none}.transport .settings-button{font-size:17px;padding:7px 10px}.center-message h2{font-size:27px;max-width:240px}.center-message p{font-size:9px}.fever{font-size:6px;letter-spacing:1.5px}.judgement{font-size:22px}dialog{padding:28px 21px}dialog h2{font-size:29px}.result-stats b{font-size:21px}.result-breakdown{font-size:7px}}
@media(max-height:560px){.app{width:calc(100% - 20px);padding-bottom:5px}.topbar{height:48px;min-height:48px}.identity{gap:9px}.identity img{width:28px;height:28px}.identity .eyebrow{font-size:5px;letter-spacing:1.4px;margin-bottom:3px}h1{font-size:22px;letter-spacing:-.5px}.top-actions button{height:28px;min-width:28px;font-size:9px}.game-layout{grid-template-columns:1fr}.journal{display:none}.stage-heading{height:33px;min-height:33px}.stage-heading select{font-size:10px}.stage-heading button{font-size:8px;padding:4px 9px}.score-strip{height:44px;min-height:44px;padding:6px 20px;gap:32px}.score-strip>div{gap:4px}.score-strip strong{font-size:18px}.score-strip span{font-size:5px}.score-strip .clock strong{font-size:8px}.lanes{height:53px;min-height:53px;padding:3px 11px 4px;gap:7px}.lane svg{width:36px;height:39px}.lane .key{font-size:11px;height:22px;line-height:20px}.transport{min-height:49px;padding-top:6px;gap:8px}.transport .primary{min-height:36px;padding:8px 18px;font-size:10px}.transport .secondary{min-height:34px;padding:7px 13px;font-size:10px}.transport .settings-button{font-size:16px}.transport .footer-hint{font-size:8px}.center-message{padding:6px}.center-message .tiny-star{display:none}.center-message h2{font-size:24px;margin-bottom:7px;max-width:none}.center-message p{font-size:8px;line-height:1.6}.judgement{font-size:20px;top:34%}.fever{top:7px;padding:4px 9px;font-size:5px}.stage{border-radius:13px}dialog{max-height:94dvh;padding:19px 24px}dialog h2{font-size:26px;margin:5px 0 10px}dialog p{font-size:10px;line-height:1.7}.result-grade{font-size:48px;margin:5px 0}.result-stats{margin:13px 0 11px;padding:12px 0}.result-breakdown{margin-bottom:14px}.result-stats b{font-size:20px}#help-copy{margin:12px 0 16px}#help-copy p{padding-top:8px;margin:8px 0}#help-copy .keys{display:none}}
@media(max-height:360px){.topbar{height:39px;min-height:39px}.identity .eyebrow{display:none}.identity img{width:25px;height:25px}h1{font-size:21px}.stage-heading{min-height:29px;height:29px}.score-strip{min-height:35px;height:35px;padding:5px 19px}.score-strip strong{font-size:16px}.score-strip span{font-size:4px}.lanes{height:45px;min-height:45px}.lane svg{height:32px;width:29px}.lane .key{font-size:10px;height:21px;line-height:19px}.transport{min-height:45px;padding-top:5px}.transport .primary{min-height:33px}.transport .secondary{min-height:31px}.center-message h2{font-size:21px}.center-message p{font-size:7px}.fever{display:none!important}.result-stats{margin:9px 0}.result-grade{font-size:38px}.result-breakdown{margin-bottom:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}