:root{--paper: #fff8ef;--paper-raised: #fffdf9;--paper-sunk: #f5eadb;--line: #ecdcc6;--stroke: #2e2433;--ink: #2e2433;--ink-muted: #6b5c69;--sakura: #f7a8bc;--sakura-soft: #fde4ea;--sakura-ink: #b0305a;--matcha: #9ccf8a;--matcha-soft: #e3f2da;--matcha-ink: #2f6b2c;--yuzu: #ffd66b;--yuzu-soft: #fff1c4;--yuzu-ink: #7a5200;--ramune: #a7d8ea;--ramune-soft: #def1f8;--ramune-ink: #1d6582;--kaki: #f4a26b;--kaki-soft: #fde6d5;--kaki-ink: #a3400f;--shu: #d8432e;--on-pastel: #2e2433;--focus: var(--ramune-ink);--font-ui: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui, sans-serif;--font-study: "Klee One", "Yu Kyokasho", "Hiragino Mincho ProN", serif;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 22px;--radius-pill: 999px;--shadow-sticker: 2px 3px 0 #2e2433;--shadow-sticker-hover: 3px 5px 0 #2e2433;--shadow-soft: 0 8px 24px rgba(46, 36, 51, .1);--ease-pop: cubic-bezier(.3, 1.6, .5, 1)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-weight:500;-webkit-font-smoothing:antialiased}a{color:var(--sakura-ink)}a:hover{color:var(--ink)}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button{font-family:inherit}h1,h2,h3,p,ol,ul,dl,dd{margin:0}ol,ul{padding:0;list-style:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.jp{font-family:var(--font-study);font-weight:600}.muted{color:var(--ink-muted)}.label{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.02em}.caption{font-size:12px;line-height:16px;color:var(--ink-muted)}.body-sm{font-size:14px;line-height:22px}.stk{transition:transform .12s var(--ease-pop),box-shadow .12s var(--ease-pop);cursor:pointer}.stk:hover:not(:disabled){transform:translate(-1px,-2px);box-shadow:var(--shadow-sticker-hover)!important}.stk:active:not(:disabled){transform:translate(2px,3px);box-shadow:none!important}.btn{height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;border-radius:var(--radius-pill);background:var(--paper-raised);color:var(--ink);border:2px solid var(--stroke);box-shadow:var(--shadow-sticker);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}.btn:hover{color:var(--ink)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--sakura);color:var(--on-pastel)}.btn--info{background:var(--ramune-soft);color:var(--ramune-ink)}.btn--info:hover{color:var(--ramune-ink)}.btn--ok{background:var(--matcha-soft);color:var(--matcha-ink)}.btn--ok:hover{color:var(--matcha-ink)}.btn--bad{background:var(--kaki-soft);color:var(--kaki-ink)}.btn--bad:hover{color:var(--kaki-ink)}.btn--pressed{background:var(--yuzu-soft)}.btn--sm{height:36px;padding:0 12px;font-size:13px}.btn--lg{height:52px;font-size:16px;font-weight:800}.btn--xl{height:56px;font-size:17px;font-weight:800}.btn--hero{height:60px;padding:0 40px;gap:10px;font-size:18px;font-weight:800}.btn--icon{width:44px;padding:0;flex-shrink:0}.site-header{background:var(--paper-raised);border-bottom:2px solid var(--stroke)}.site-header__inner{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:20px;line-height:28px;font-weight:800;background:none;border:0;padding:0;cursor:pointer}.brand:hover{color:var(--ink)}.nav{flex-grow:1}.nav ul{display:flex;flex-wrap:wrap;gap:4px}.nav-link{display:flex;align-items:center;height:44px;padding:0 16px;border-radius:var(--radius-pill);border:0;background:transparent;color:var(--ink);text-decoration:none;font-size:15px;font-weight:700;cursor:pointer;transition:background .12s}.nav-link:hover{background:var(--paper-sunk);color:var(--ink)}.nav-link[aria-current=page]{background:var(--ink);color:var(--paper)}.nav-link:disabled{color:var(--ink-muted);cursor:not-allowed;background:transparent}.run-header__inner{gap:12px 20px}.run-title{display:flex;flex-direction:column}.run-title strong{font-size:16px;line-height:22px;font-weight:800}.track{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:6px}.track__bar{position:relative;height:14px;border-radius:var(--radius-pill);background:var(--paper-sunk);border:2px solid var(--stroke)}.track__fill{position:absolute;left:0;top:0;bottom:0;background:var(--sakura);border-radius:var(--radius-pill);transition:width .3s var(--ease-pop)}.track__record{position:absolute;top:-7px;width:2px;height:24px;background:var(--stroke)}.track__legend{display:flex;justify-content:space-between;font-size:12px;line-height:16px;color:var(--ink-muted)}.score{display:flex;align-items:baseline;gap:6px}.score strong{font-size:32px;line-height:40px;font-weight:800}.score span{font-size:14px;font-weight:700;color:var(--ink-muted)}.page{min-height:100vh;background:var(--paper)}.container{max-width:1200px;margin:0 auto;padding:24px}.run-main{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}.run-main__stage{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:12px}.panel{flex:1 1 340px;min-width:0;background:var(--paper-raised);border:2px solid var(--stroke);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:16px}.card{background:var(--paper-raised);border:2px solid var(--line);border-radius:var(--radius-lg);padding:20px 24px}.tile{background:var(--paper-sunk);border-radius:var(--radius-md);padding:10px 16px;display:flex;flex-direction:column;justify-content:center}.tile__label{font-size:12px;line-height:16px;color:var(--ink-muted)}.tile__value{font-size:18px;line-height:26px;font-weight:800}.tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;letter-spacing:.02em}.tag--yuzu{background:var(--yuzu-soft);color:var(--yuzu-ink)}.tag--sakura{background:var(--sakura-soft);color:var(--sakura-ink)}.note{border-radius:var(--radius-md);padding:12px 16px;font-size:14px;line-height:22px}.note--info{background:var(--ramune-soft)}.note--info strong{color:var(--ramune-ink)}.note--warn{background:var(--yuzu-soft)}.note--warn strong{color:var(--yuzu-ink)}.divider-top{padding-top:12px;border-top:2px dashed var(--line)}.status{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md)}.status--ok{background:var(--matcha-soft);color:var(--matcha-ink)}.status--bad{background:var(--kaki-soft);align-items:flex-start}.status__badge{width:48px;height:48px;flex-shrink:0;border-radius:var(--radius-pill);border:2px solid var(--stroke);color:var(--on-pastel);display:flex;align-items:center;justify-content:center}.status__title{font-size:26px;line-height:32px;font-weight:800}.listening{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:var(--radius-pill);background:var(--ramune-soft);color:var(--ramune-ink);font-size:14px;font-weight:700}.listening--off{background:var(--paper-sunk);color:var(--ink-muted)}.bars{display:flex;align-items:center;gap:3px;height:16px}.bars span{display:block;width:3px;border-radius:2px;background:currentColor;animation:eq .9s ease-in-out infinite}.bars span:nth-child(2){animation-delay:-.3s}.bars span:nth-child(3){animation-delay:-.6s}.bars span:nth-child(4){animation-delay:-.15s}@keyframes eq{0%,to{height:4px}50%{height:14px}}.timer__bar{position:relative;height:14px;border-radius:var(--radius-pill);background:var(--paper-sunk);border:2px solid var(--stroke);overflow:hidden}.timer__fill{position:absolute;left:0;top:0;bottom:0}.scene{position:relative;aspect-ratio:12 / 7;border:2px solid var(--stroke);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper)}.scene__bg{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.plate{position:absolute;left:50%;top:34%;transform:translate(-50%);min-width:240px;padding:6px 28px 16px;background:var(--paper-raised);border:2px solid var(--stroke);border-radius:var(--radius-lg);box-shadow:var(--shadow-sticker);display:flex;flex-direction:column;align-items:center}.plate--ok{background:var(--matcha-soft);border-color:var(--matcha-ink);box-shadow:none}.plate--bad{background:var(--kaki-soft);border-color:var(--kaki-ink);box-shadow:none}.plate__word{font-family:var(--font-study);font-size:clamp(44px,6vw,72px);line-height:1.33;font-weight:600;white-space:nowrap}.plate__word rt{font-size:16px;line-height:18px;font-weight:600;color:var(--ink-muted)}.plate--ok .plate__word rt{color:var(--matcha-ink)}.plate--bad .plate__word rt{color:var(--kaki-ink)}.countdown-bubble{position:absolute;left:50%;top:44%;width:140px;height:140px;margin-left:-70px;margin-top:-70px;border-radius:var(--radius-pill);background:var(--sakura);color:var(--on-pastel);border:2px solid var(--stroke);box-shadow:var(--shadow-sticker);display:flex;align-items:center;justify-content:center;font-size:80px;line-height:1;font-weight:800}.plus-one{position:absolute;left:50%;top:26%;margin-left:130px;transform:rotate(8deg);display:flex;align-items:center;height:40px;padding:0 14px;border-radius:var(--radius-pill);background:var(--matcha);color:var(--on-pastel);border:2px solid var(--stroke);font-size:20px;font-weight:800;animation:pop .4s var(--ease-pop)}@keyframes pop{0%{transform:rotate(8deg) scale(.4);opacity:0}}.shortcuts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:13px;line-height:20px;color:var(--ink-muted)}.shortcuts>span{display:flex;align-items:center;gap:6px}kbd{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;background:var(--paper-raised);border:2px solid var(--line);border-bottom-width:3px;font-family:inherit;font-size:12px;font-weight:700;color:var(--ink)}.illus{display:block;flex-shrink:0;border-radius:var(--radius-md)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#2e243373;display:flex;align-items:center;justify-content:center;padding:24px;z-index:10;overflow-y:auto}.dialog{width:100%;max-width:760px;background:var(--paper-raised);border:2px solid var(--stroke);border-radius:var(--radius-lg);box-shadow:4px 6px 0 var(--stroke);padding:24px 28px 28px;display:flex;flex-direction:column;gap:20px}.mora-grid{display:grid;gap:8px;align-items:center}.mora{position:relative;height:64px;border:2px solid var(--line);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-family:var(--font-study);font-size:34px;font-weight:600}.mora--focus{background:var(--yuzu-soft)}.mora--ok{border-color:var(--matcha-ink);background:var(--matcha-soft)}.mora--bad{border:2px dashed var(--kaki-ink);background:var(--kaki-soft);color:var(--kaki-ink)}.mora--missing{font-family:var(--font-ui);font-size:13px;font-weight:700}.mora__mark{position:absolute;right:4px;top:4px}@media (prefers-reduced-motion: reduce){.stk,.nav-link,.track__fill{transition:none}.bars span{animation:none;height:10px}.plus-one{animation:none}}.plate__romaji{margin-top:-4px;font-size:16px;line-height:22px;font-weight:700;color:var(--ink-muted)}.seg{display:flex;gap:4px;padding:4px;background:var(--paper-sunk);border:2px solid var(--stroke);border-radius:var(--radius-pill)}.seg button{flex:1 1 0;height:40px;padding:0 12px;border-radius:var(--radius-pill);border:2px solid transparent;background:transparent;color:var(--ink);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}.seg button[aria-pressed=true]{border-color:var(--stroke);background:var(--sakura);font-weight:800}.seg button:disabled{color:var(--ink-muted);cursor:not-allowed}.sw{-moz-appearance:none;appearance:none;-webkit-appearance:none;margin:0;width:52px;height:32px;border-radius:var(--radius-pill);border:2px solid var(--stroke);background:var(--paper-sunk);position:relative;cursor:pointer;flex-shrink:0;transition:background .12s}.sw:after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--paper-raised);border:2px solid var(--stroke);transition:transform .12s var(--ease-pop)}.sw:checked{background:var(--matcha)}.sw:checked:after{transform:translate(20px)}.side-link{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--radius-md);color:var(--ink);text-decoration:none;font-size:15px;font-weight:700;transition:background .12s}.side-link:hover{background:var(--paper-sunk);color:var(--ink)}.section-title{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.02em}.settings-nav{position:sticky;top:16px}.lb-row{display:grid;grid-template-columns:64px minmax(0,1fr) 120px 140px;align-items:center;gap:12px;padding:8px 20px}.lb-rank{width:36px;height:36px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}@media (prefers-reduced-motion: reduce){.sw,.sw:after,.side-link{transition:none}}
