@font-face{font-family:Orbitron;font-style:normal;font-display:swap;font-weight:900;src:url(/assets/orbitron-latin-900-normal-DrIi7unX.woff2) format("woff2"),url(/assets/orbitron-latin-900-normal-BbJatbhp.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--base03: #002b36;--base02: #073642;--base01: #586e75;--base00: #657b83;--base0: #839496;--base1: #93a1a1;--base2: #eee8d5;--base3: #fdf6e3;--yellow: #b58900;--orange: #cb4b16;--red: #dc322f;--magenta: #d33682;--violet: #6c71c4;--blue: #268bd2;--cyan: #2aa198;--green: #859900;--great-light: #f2fbff;--great-blue: #7fd3ff;color-scheme:dark;font:16px/1.5 system-ui,Segoe UI,Roboto,sans-serif;background:var(--base03);color:var(--base0)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--base03)}#root{height:100%;display:flex;flex-direction:column}button{font:inherit;cursor:pointer;padding:4px 12px;border:1px solid var(--base01);border-radius:4px;background:var(--base02);color:var(--base1)}select,input[type=number]{font:inherit;padding:2px 6px;border:1px solid var(--base01);border-radius:4px;background:var(--base03);color:var(--base1)}input[type=range],input[type=checkbox]{accent-color:var(--blue)}h1,h2,h3,h4{margin:0 0 8px}.app{display:flex;flex-direction:column;height:100%}.app__header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:6px 16px;border-bottom:1px solid var(--base02)}.app__fps{font-size:12px;font-variant-numeric:tabular-nums;color:var(--base01)}.app__header h1{font-size:16px;color:var(--base1);margin:0}.app__mode-switch{display:flex;gap:4px}.app__slider{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--base1)}.app__slider-value{min-width:3.5em;color:var(--base01);font-variant-numeric:tabular-nums}.app__menu-button{margin-left:auto;display:grid;place-items:center;width:36px;height:32px;padding:0}.app__menu-icon,.app__menu-icon:before,.app__menu-icon:after{display:block;width:18px;height:2px;border-radius:1px;background:var(--base1)}.app__menu-icon{position:relative}.app__menu-icon:before,.app__menu-icon:after{content:"";position:absolute;left:0}.app__menu-icon:before{top:-6px}.app__menu-icon:after{top:6px}.app__body{flex:1;min-height:0;display:flex}.app__body>.app__main{flex:1;min-width:0}.app__sidebar{flex-shrink:0;display:flex;flex-direction:column;gap:12px;width:300px;padding:14px 16px;overflow-y:auto;background:var(--base02);border-left:1px solid var(--base01)}@media(max-width:999px),(pointer:coarse)and (max-width:1099px){.app__sidebar{position:fixed;top:45px;right:0;bottom:0;z-index:20;width:min(300px,calc(100vw - 24px));box-shadow:-8px 0 24px #0006}}.app__toolbar{display:flex;flex-direction:column;gap:12px}.app__toolbar .app__slider{display:grid;grid-template-columns:7.5em minmax(0,1fr) 3.5em;align-items:center;column-gap:10px;white-space:nowrap}.app__toolbar .app__slider input[type=range]{width:100%}.app__toolbar .app__slider select{grid-column:2;width:100%}.app__toolbar .app__slider-value{text-align:right}.app__drills{margin:0;padding:0;border:none}.app__drills legend{display:flex;justify-content:space-between;width:100%;padding:0;margin-bottom:6px;font-size:13px;color:var(--base1)}.app__weak{margin-top:12px;font-size:12px}.app__weak-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:13px;color:var(--base1)}.app__weak-reset{padding:2px 8px;font-size:12px}.app__weak-empty{margin:0;color:var(--base01)}.app__weak-list{display:grid;gap:3px;margin:0;padding-left:1.6em}.app__weak-list li{display:flex;justify-content:space-between}.app__weak-shape{font-weight:700;color:var(--base1)}.app__weak-rate{color:var(--red);font-variant-numeric:tabular-nums}.app__drill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}.app__drill{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--base1)}.app__drill input{margin:0}.app__toolbar--section{padding-top:12px;border-top:1px solid var(--base01)}.app__menu-settings{align-self:flex-end}.app__share{font-size:12px}.app__share-header{margin-bottom:6px;font-size:13px;color:var(--base1)}.app__share-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.app__share-button{display:flex;align-items:center;justify-content:center;min-height:28px;padding:2px 6px;border:1px solid var(--base01);border-left-width:3px;border-radius:4px;background:var(--base02);color:var(--base1);font:inherit;text-decoration:none;white-space:nowrap;cursor:pointer}.app__share-button:hover{background:var(--base03)}.app__share-button--x{border-left-color:#e7e9ea}.app__share-button--line{border-left-color:#06c755}.app__share-button--facebook{border-left-color:#1877f2}.app__share-button--bluesky{border-left-color:#1185fe}.app__slider input{width:96px;accent-color:var(--blue)}.app__mode-switch button{padding:2px 12px;border:1px solid var(--base01);background:var(--base02);color:var(--base1);border-radius:4px}.app__mode-switch button.is-active{background:var(--blue);color:var(--base03);border-color:var(--blue)}.app__menu-button{border:1px solid var(--base01);background:var(--base02);color:var(--base1);border-radius:4px}.app__main{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 16px}@media(pointer:coarse){.app__main{padding-inline:4px}}.app__settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#002b36d9;display:flex;align-items:center;justify-content:center;z-index:10}.quiz-engine{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.quiz-engine__score{position:absolute;top:68px;left:18px;z-index:11;display:grid;gap:2px;margin:0;font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none}.quiz-engine__score div{display:flex;justify-content:space-between;gap:14px}.quiz-engine__score dt{color:var(--base01);letter-spacing:.06em}.quiz-engine__score dd{margin:0;min-width:4em;text-align:right;font-weight:700;color:var(--base1)}.quiz-engine__score div:first-child dd{font-size:18px;color:var(--cyan)}.quiz-engine__score-record dd{color:var(--yellow)}@media(pointer:coarse){.quiz-engine__score,.quiz-engine__cut-in{display:none}}.quiz-engine__ready-message{margin-top:16px;font-size:26px;font-weight:700;color:var(--yellow);animation:ready-blink 1.2s ease-in-out infinite}@keyframes ready-blink{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.quiz-engine__ready-message{animation:none}}.quiz-engine__cut-in{position:absolute;top:16px;left:0;z-index:11;padding:6px 18px 6px 14px;border-left:4px solid var(--yellow);background:color-mix(in srgb,var(--base02) 90%,transparent);color:var(--base1);font-size:18px;font-weight:700;letter-spacing:.04em;pointer-events:none;animation:cut-in 2.2s ease-out forwards}@keyframes cut-in{0%{transform:translate(-110%);opacity:0}12%{transform:translate(0);opacity:1}80%{transform:translate(0);opacity:1}to{transform:translate(-30%);opacity:0}}@media(prefers-reduced-motion:reduce){.quiz-engine__cut-in{animation:none}}.quiz-engine{position:relative}.quiz-engine__intro{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:color-mix(in srgb,var(--base03) 75%,transparent);pointer-events:none;text-align:center}.quiz-engine__intro-title{font-size:30px;font-weight:700;color:var(--base1)}.quiz-engine__intro-subtitle{font-size:14px;color:var(--base0)}.quiz-engine__intro-count{margin-top:12px;font-size:96px;font-weight:800;line-height:1;color:var(--yellow);animation:intro-count 1s ease-out forwards}@keyframes intro-count{0%{transform:scale(1.4);opacity:0}20%{transform:scale(1);opacity:1}85%{opacity:1}to{opacity:.2}}.quiz-engine__stage-area{flex:1;min-height:0;container-type:size;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow-x:visible;overflow-y:clip}.quiz-engine__stage{position:relative;display:flex;flex-shrink:0;align-items:flex-end;transform:translate(calc((100cqw - 100%) / 2 * var(--lane-x, 0)),calc((100cqh - 100%) * var(--lane-y, 0) * -1))}.quiz-engine--overlay-right .quiz-engine__score{left:auto;right:18px}.quiz-engine--overlay-right .quiz-engine__cut-in{left:auto;right:0;border-left:none;border-right:4px solid var(--yellow);animation-name:cut-in-right}@keyframes cut-in-right{0%{transform:translate(110%);opacity:0}12%{transform:translate(0);opacity:1}80%{transform:translate(0);opacity:1}to{transform:translate(30%);opacity:0}}.keyboard-view{display:flex;flex-direction:column}.keyboard-view__keys{position:relative;align-self:center}.note-chart{position:relative;z-index:1;display:flex;align-self:center;overflow:visible;clip-path:inset(0 0 -100vh 0)}.note-chart__lane{position:relative;overflow:hidden;flex-shrink:0;height:100%;background:var(--base02);border-left:1px solid var(--base03);border-right:1px solid var(--base03)}.note-chart__lane--black{background:color-mix(in srgb,var(--base02) 45%,var(--base03))}.note-chart__lane--pressed:before{content:"";position:absolute;left:0;right:0;bottom:var(--lift, 0);height:60%;background:linear-gradient(to top,color-mix(in srgb,var(--cyan) 55%,transparent),transparent);pointer-events:none}.note-chart__cover-numbers{position:absolute;left:0;right:0;z-index:4;display:flex;justify-content:space-between;padding:3px 8px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;pointer-events:none}.note-chart__cover-numbers--sudden{transform:translateY(-100%)}.note-chart__cover-numbers--lift{transform:translateY(100%)}.note-chart__white-number{color:#fdf6e3}.note-chart__green-number{color:#4cd964}.note-chart__cover-handle{position:absolute;left:0;right:0;z-index:3;cursor:ns-resize;touch-action:none}.note-chart__cover-handle--sudden{top:0}.note-chart__cover-handle--lift{bottom:0}.note-chart__cover{position:absolute;z-index:2;left:0;right:0;background:color-mix(in srgb,var(--base03) 70%,black);pointer-events:none}.note-chart__cover--sudden{top:0;border-bottom:2px solid var(--base01)}.note-chart__cover--lift{bottom:0;border-top:2px solid var(--base01)}.note-chart__judgement{position:absolute;left:0;right:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:.7em;line-height:1;font-family:Orbitron,system-ui,sans-serif;font-weight:900;font-style:normal;letter-spacing:.06em;color:var(--judge-fill, var(--base1));-webkit-text-stroke:.07em var(--judge-stroke, #000);paint-order:stroke fill;text-shadow:0 0 .22em var(--judge-glow, transparent);pointer-events:none;animation:judgement-pop .8s ease-out forwards}.note-chart__judgement--flash{animation:judgement-pop .8s ease-out forwards,great-flash .1s steps(1) infinite}.note-chart__judgement--flash{--judge-fill: var(--great-light);--judge-stroke: #1d4fae;--judge-glow: #3b8cff}.note-chart__judgement--great:not(.note-chart__judgement--flash),.note-chart__judgement--good{--judge-fill: #ffe066;--judge-stroke: #9a5200;--judge-glow: #ff9d00}.note-chart__judgement--bad{--judge-fill: #ff9be3;--judge-stroke: #7d1863;--judge-glow: #e0389f}.note-chart__timing{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:.45em;font-size:.42em;font-style:normal;letter-spacing:.08em;color:var(--base1);-webkit-text-stroke:.14em rgb(0 0 0 / .75);paint-order:stroke fill;text-shadow:0 0 .35em rgb(0 0 0 / .8)}.note-chart__timing--fast{color:var(--blue)}.note-chart__timing--slow{color:var(--red)}.note-chart__bomb{position:absolute;z-index:5;width:var(--bomb-size, 120px);aspect-ratio:1;border-radius:50%;pointer-events:none;translate:-50% 50%;background:radial-gradient(circle,#fff 0 10%,rgb(210 240 255 / .95) 18%,rgb(110 185 255 / .55) 32%,transparent 48%),radial-gradient(circle,transparent 56%,rgb(150 215 255 / .85) 62%,rgb(220 245 255 / .9) 65%,rgb(120 190 255 / .4) 69%,transparent 74%);mix-blend-mode:screen;animation:bomb .26s ease-out forwards}.note-chart__bomb--good{width:calc(var(--bomb-size, 120px) * .8)}@keyframes bomb{0%{scale:.3;opacity:1}55%{opacity:.95}to{scale:1.1;opacity:0}}@media(prefers-reduced-motion:reduce){.note-chart__bomb{animation-duration:.15s}}.note-chart__bar-line{position:absolute;left:0;right:0;height:1px;translate:0 50%;background:color-mix(in srgb,var(--base1) 65%,transparent);pointer-events:none}.note-chart__judge-line{position:absolute;left:0;right:0;background:color-mix(in srgb,var(--red) 70%,transparent);pointer-events:none}.note-chart--scroll .note{transition:none}@keyframes great-flash{0%{color:var(--great-light);text-shadow:0 0 .28em #3b8cff}50%{color:var(--great-blue);text-shadow:0 0 .16em var(--great-light)}}.note-chart__judgement--poor{--judge-fill: #ff8a80;--judge-stroke: #7a0f0f;--judge-glow: #ff3b30}.note-chart__combo{color:inherit;letter-spacing:.25em}.note-chart__judgement-word,.note-chart__combo{display:inline-block;position:relative;top:-.025em;transform:scaleY(var(--judge-stretch, 1));transform-origin:50% 52.5%}@keyframes judgement-pop{0%{transform:scale(1.15);opacity:1}15%{transform:scale(1)}70%{opacity:1}to{opacity:0}}.note{position:absolute;transition:bottom 90ms ease-out;z-index:1;left:0;right:0;border-radius:2px;opacity:.45}.note--current{opacity:1}.note--white{background:var(--base2)}.note--black{background:var(--blue)}.note--scratch{background:var(--red)}.key-unit{position:absolute;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;-webkit-user-select:none;user-select:none;touch-action:none;transition:background-color 60ms ease,box-shadow 60ms ease}.key-unit--white{background:var(--base2);color:var(--base03)}.key-unit--black{background:var(--base02);outline:1px solid var(--base01);outline-offset:-1px;color:var(--base1)}.key-unit--expected{box-shadow:0 0 0 4px var(--yellow) inset}.key-unit--pressed{filter:drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 14px var(--cyan))}.key-unit--pressed.key-unit--white{background:color-mix(in srgb,var(--cyan) 55%,var(--base3))}.key-unit--pressed.key-unit--black{background:var(--cyan)}.scratch-unit{position:absolute;bottom:0;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;touch-action:none;color:var(--base2)}.scratch-unit:after{content:"";position:absolute;top:calc(-1 * var(--hit-top, 0px));bottom:0}.scratch-unit--left:after{left:calc(-1 * var(--hit-outer, 0px));right:0}.scratch-unit--right:after{left:0;right:calc(-1 * var(--hit-outer, 0px))}.scratch-unit__clip{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.scratch-unit__disc{position:absolute;box-sizing:border-box;border-radius:50%;background:var(--base01);transition:background-color 60ms ease}.scratch-unit--expected .scratch-unit__disc{border:4px solid var(--yellow)}.scratch-unit--pressed{filter:drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 14px var(--cyan))}.scratch-unit--pressed .scratch-unit__disc{background:var(--cyan)}.scratch-unit__label{position:relative;padding:0 4px;text-align:center}.key-unit__label{font-size:12px;font-weight:600;pointer-events:none}.settings-panel{font-size:13px;line-height:1.4;background:var(--base02);border:1px solid var(--base01);border-radius:8px;padding:18px 20px;width:520px;max-width:calc(100vw - 32px);max-height:85vh;overflow-y:auto}.settings-panel__header{display:flex;justify-content:space-between;align-items:center}.settings-panel .settings-panel__close{display:grid;place-items:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--base1);font-size:22px;line-height:1;border-radius:4px}.settings-panel .settings-panel__close:hover{background:var(--base03)}.settings-panel section{margin-top:14px}.settings-panel h2{margin:0;font-size:17px}.settings-panel h3{margin:0 0 6px;font-size:14px;color:var(--base1)}.settings-panel h4{margin:8px 0 4px;font-size:13px;color:var(--base1)}.settings-panel button,.settings-panel select{font-size:12px;padding:3px 8px}.settings-panel__side{margin-bottom:6px}.settings-panel__sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));column-gap:20px}.settings-panel__sides .settings-panel__binding-row{grid-template-columns:5.5em minmax(0,1fr)}.settings-panel__binding-row{display:grid;grid-template-columns:9em minmax(0,1fr);align-items:center;column-gap:8px;margin-bottom:3px}.settings-panel__binding-row>select{justify-self:start;min-width:10em}.settings-panel__key-button{text-align:left}.settings-panel__buttons{display:grid;grid-template-columns:minmax(0,1fr) 6em 4.5em 4.5em;align-items:center;gap:4px}.settings-panel__buttons button{white-space:nowrap;padding-inline:4px}.settings-panel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:8px}.settings-panel__binding-row>.settings-panel__actions{margin-bottom:0}.settings-panel__binding-value{color:var(--base1);font-variant-numeric:tabular-nums}.settings-panel__note{color:var(--base01);font-size:12px;margin-top:12px}@media(prefers-reduced-motion:reduce){.note{transition:none}.note-chart__judgement--flash{animation:judgement-pop .8s ease-out forwards;color:var(--great-light);text-shadow:0 0 .25em var(--great-blue)}}