@import "https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap";:root{--ui-scale:1;--logical-width:1920px;color:#f2f2ff;font-synthesis:none;--text:#f2f2ff;--muted:#a6b2cc;--panel:#211c2b;--panel-alt:#2a2336;--background:#0d0c0f;--elements:#2d283e;--hover:#403854;--outline:#4a4460;--accent:#d9a04f;--back:#f64949;--play:#7db435;background:#0d0c0f;font-family:Rubik,sans-serif}*{box-sizing:border-box;-webkit-user-select:none;user-select:none}html,body,#root{width:100%;height:100%;margin:0}body{min-width:320px;min-height:100vh;overflow:hidden}button,input{color:inherit;font:inherit}button{cursor:pointer;border:0}button:hover{filter:brightness(1.14)}button:active{filter:brightness(.9)}button:focus-visible,input:focus-visible{outline:2px solid var(--text);outline-offset:-3px}button:disabled{cursor:not-allowed;filter:grayscale();opacity:.55}svg{width:22px;height:22px}.screen{place-items:center;min-height:100vh;display:grid}.loading-screen{text-align:center;padding:2rem}.loading-screen p,.song-library-error{color:#ff8d8d}.song-select-screen{width:var(--logical-width);min-width:0;height:1080px;min-height:0;transform:scale(var(--ui-scale));transform-origin:0 0;background:var(--background);grid-template-rows:50px 72px minmax(0,1fr) 64px;display:grid;position:absolute;top:0;left:0;overflow:hidden}.song-select-header{z-index:2;background:linear-gradient(90deg, var(--panel), #1d1925 50%, var(--panel));grid-template-columns:1fr auto 1fr;align-items:center;display:grid;box-shadow:0 6px 24px #0005}.game-brand{letter-spacing:.12em;align-items:center;gap:10px;height:100%;padding-left:16px;font-size:18px;font-weight:700;display:flex}.game-brand img{width:34px;height:34px}.session-info{height:30px;color:var(--muted);font-variant-numeric:tabular-nums;background:#0d0c0f38;border-radius:4px;align-items:center;gap:12px;padding:0 12px;font-size:13px;display:flex}.session-elapsed,.online-status{border-left:1px solid var(--outline);padding-left:12px}.session-elapsed{color:var(--text);font-weight:700}.online-status{letter-spacing:.06em;font-size:9px;font-weight:600}.online-status b{color:var(--text);font-size:10px}.header-actions{justify-self:end;height:100%;display:flex}.player-info{align-items:center;gap:10px;padding:0 12px 0 16px;display:flex}.player-info>span{justify-items:end;gap:2px;display:grid}.player-info strong{font-size:13px}.player-info small{color:var(--muted);letter-spacing:.06em;font-size:8px}.player-info small b{color:var(--text);font-size:9px}.player-info>i{border:1px solid var(--outline);background:linear-gradient(145deg,#45417d,#2d2955);border-radius:4px;width:34px;height:34px}.header-icon-dock{border-left:1px solid var(--outline);background:#2d283e6b;height:100%;display:flex}.header-icon-dock button{width:42px;height:100%;color:var(--muted);background:0 0;place-items:center;padding:0;display:grid;position:relative}.header-icon-dock button:hover{color:var(--text);background:var(--hover)}.header-icon-dock svg{width:20px;height:20px}.notification-dot{background:var(--back);border:2px solid var(--panel);border-radius:50%;width:7px;height:7px;position:absolute;top:11px;right:10px}.library-toolbar{background:#1b1820;border-bottom:1px solid #ffffff0b;grid-template-columns:240px 150px 225px minmax(260px,1fr);gap:8px;padding:10px 18px;display:grid;box-shadow:0 10px 26px #0004}.library-toolbar button{border-radius:5px}.collection-button,.toolbar-button{background:var(--elements);text-align:left;align-items:center;min-width:0;padding:0 14px;display:flex}.collection-button{justify-content:space-between}.collection-button>span,.toolbar-button span{min-width:0;display:grid}.library-toolbar small{color:var(--muted);letter-spacing:.12em;align-self:end;font-size:9px;font-weight:700}.library-toolbar strong{text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.collection-button strong{font-size:16px}.collection-button svg{color:var(--muted)}.toolbar-button{gap:11px}.toolbar-button>svg{color:var(--accent)}.chart-search{border:1px solid var(--outline);background:#292435;border-radius:5px;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;padding:0 12px;display:grid}.chart-search>svg{width:20px;color:var(--accent)}.chart-search input{background:0 0;border:0;outline:0;width:100%;min-width:0;height:100%;padding:0;font-weight:600}.chart-search input::placeholder{color:var(--muted);opacity:1}.chart-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px #d9a04f2e}.chart-search kbd{color:var(--muted);background:var(--panel);border:1px solid var(--outline);border-radius:3px;padding:4px 6px;font-size:9px;font-weight:600}.song-select-content{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:16px;min-height:0;margin:14px 18px;display:grid}.song-select-column{gap:10px;min-width:0;min-height:0;display:grid}.left-column{grid-template-rows:52fr 48fr}.right-column{grid-template-rows:78px minmax(0,1fr)}.song-hero{isolation:isolate;background:linear-gradient(145deg,#342943,#17131d 62%,#0d0c0f);border-radius:5px;min-height:0;font-family:Zen Maru Gothic,sans-serif;position:relative;overflow:hidden}.song-hero-background{z-index:-2;object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .55s ease-out,transform 1.2s cubic-bezier(.2,.7,.2,1);position:absolute;inset:0;transform:scale(1.035)}.song-hero.loaded .song-hero-background{opacity:1;transform:scale(1)}.song-hero:before{z-index:-1;content:"";background:linear-gradient(#0000 38%,#0d0c0f66 63%,#0d0c0ff2),radial-gradient(#0000 38%,#0d0c0f3d 70%,#0d0c0fa6 115%);position:absolute;inset:0}.song-hero-chart{min-width:0;text-shadow:2px 2px var(--background);display:grid;position:absolute;top:14px;left:18px;right:18px}.song-hero-chart strong,.song-hero-chart span,.song-hero-metadata h1,.song-hero-metadata p{text-overflow:ellipsis;white-space:nowrap;opacity:0;overflow:hidden;transform:translateY(8px)}.song-hero.loaded .song-hero-metadata h1{animation:.4s ease-out 80ms forwards song-hero-row-in}.song-hero.loaded .song-hero-metadata p{animation:.4s ease-out .16s forwards song-hero-row-in}.song-hero.loaded .song-hero-chart strong{animation:.4s ease-out .24s forwards song-hero-row-in}.song-hero.loaded .song-hero-chart span{animation:.4s ease-out .32s forwards song-hero-row-in}.song-hero-chart strong{font-size:clamp(18px,1.35vw,26px)}.song-hero-chart span{color:#d8d4df;font-size:14px}.song-hero-metadata{text-shadow:2px 2px var(--background);position:absolute;bottom:14px;left:18px;right:18px}.song-hero-metadata h1{margin:0;font-size:clamp(30px,2.5vw,48px);line-height:1.08}.song-hero-metadata p{color:var(--accent);margin:7px 0 0;font-size:clamp(17px,1.25vw,24px);font-weight:700}@keyframes song-hero-row-in{to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.song-hero-background{transition:none;transform:none}.song-hero-chart strong,.song-hero-chart span,.song-hero-metadata h1,.song-hero-metadata p{transform:none}.song-hero.loaded .song-hero-chart strong,.song-hero.loaded .song-hero-chart span,.song-hero.loaded .song-hero-metadata h1,.song-hero.loaded .song-hero-metadata p{animation-duration:1ms;animation-delay:0s}}.score-list{background:#1b1722;border:1px solid #ffffff0c;border-radius:7px;grid-template-rows:44px minmax(0,1fr);gap:4px;min-height:0;padding:5px;display:grid;overflow:hidden}.score-list>header{min-width:0;color:var(--muted);border-bottom:1px solid #4a446085;justify-content:space-between;align-items:center;padding-left:13px;font-size:clamp(15px,1.05vw,20px);display:flex}.score-list>header>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.score-list>header strong{color:#f4df35;font-weight:500}.score-source{background:#282332;border-radius:18px;flex:none;align-self:stretch;margin:3px 3px 4px 14px;display:flex;overflow:hidden}.score-source button{width:48px;color:var(--text);background:0 0;border-radius:16px;place-items:center;padding:0;display:grid}.score-source button.active{background:#379fd0}.no-records{color:#b8bfd4;background:#19171f;border:1px solid #09080b;align-self:center;align-items:center;gap:54px;width:min(520px,100% - 56px);min-height:64px;margin:0 auto;padding:0 24px;font-size:clamp(15px,1.1vw,21px);display:flex}.no-records svg{color:#f2ad2f;stroke-width:2.5px;width:27px;height:27px}.score-row{background:#2d283e52;border-radius:5px;min-height:0;padding:0;position:relative}.score-row.filled{text-align:left;background:linear-gradient(90deg,#00b4fc3d,#0000 72%),#1d1925;grid-template-columns:64px 1fr auto;align-items:center;gap:16px;padding:6px 17px 6px 6px;display:grid}.score-avatar{color:#ded8ff;background:linear-gradient(145deg,#565084,#292542);border-radius:4px;place-items:center;width:64px;height:100%;font-size:28px;font-weight:700;display:grid}.score-player{text-overflow:ellipsis;white-space:nowrap;font-size:clamp(17px,1.25vw,24px);overflow:hidden}.score-details{justify-items:end;gap:3px;display:grid}.score-details strong{color:#00b4fc;font-size:clamp(18px,1.25vw,24px);font-weight:400}.score-details span{color:var(--muted);white-space:nowrap;font-size:clamp(11px,.84vw,16px)}.score-details b{color:var(--text);margin-right:12px;font-weight:400}.chart-summary{background:#1c1823;border:1px solid #ffffff0c;border-radius:6px;grid-template-columns:minmax(285px,auto) minmax(260px,1fr);min-width:0;padding:6px;display:grid;overflow:hidden}.chart-difficulty{background:linear-gradient(105deg,#ff713b15,#0000 80%);border-left:3px solid #ff7845;align-items:center;min-width:0;display:flex}.chart-mode{color:#ff9b5e;letter-spacing:.08em;grid-template:auto auto/auto auto;align-content:center;align-items:center;min-width:154px;height:100%;padding:7px 14px 7px 11px;font-size:11px;font-weight:700;display:grid}.chart-mode span{grid-column:1/-1}.chart-mode b{color:#ff8a4d;font-size:29px;font-weight:600;line-height:.9}.chart-mode em{margin:3px 0 0 5px;font-size:10px;font-style:normal}.chart-patterns{color:#70bfd3;border-left:1px solid #4a44608c;gap:4px;min-width:0;padding:0 8px;font-size:11px;font-weight:700;display:grid}.chart-metadata{border-left:1px solid #4a44608c;grid-template:repeat(2,1fr)/repeat(3,minmax(62px,1fr));grid-auto-flow:column;align-items:center;min-width:0;padding:5px 0 5px 12px;display:grid}.chart-metadata>span{min-width:0;color:var(--muted);grid-template-columns:25px minmax(0,1fr);align-items:center;font-size:clamp(11px,.8vw,15px);display:grid}.chart-metadata svg{width:16px;height:16px}.chart-metadata b{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.chart-metadata b.accent{color:#ff8a72}.chart-browser{background:#1a1720;border:1px solid #ffffff0c;border-radius:7px;grid-template-rows:78px minmax(0,1fr);min-height:0;padding:6px;display:grid;overflow:hidden}.difficulty-strip{grid-template-columns:38px minmax(0,1fr) 38px;gap:5px;min-width:0;padding-bottom:6px;display:grid}.difficulty-strip>button{color:var(--muted);background:#292435;border-radius:4px;place-items:center;padding:0;display:grid}.difficulty-strip>div{scrollbar-width:none;gap:5px;min-width:0;display:flex;overflow-x:auto}.difficulty-strip>div::-webkit-scrollbar{display:none}.difficulty-strip>div button{background:linear-gradient(to top, color-mix(in srgb, var(--difficulty-color) 22%, transparent), transparent 78%), #302a3c;text-align:left;border-radius:5px;flex:1 0 84px;grid-template-rows:1fr auto;justify-items:start;min-width:84px;padding:8px 12px 7px;display:grid}.difficulty-strip strong{color:var(--difficulty-color);font-size:clamp(20px,1.45vw,28px);font-weight:600}.difficulty-strip span{color:var(--muted);letter-spacing:.12em;font-size:11px;font-weight:700}.difficulty-strip div button.selected{border-bottom:3px solid var(--difficulty-color);background:linear-gradient(to top, color-mix(in srgb, var(--difficulty-color) 30%, transparent), transparent 88%), #382d3d;padding-bottom:4px}.chart-list{scrollbar-color:var(--outline) #0d0c0f70;scrollbar-width:thin;border-top:1px solid #4a446075;outline:0;min-height:0;font-family:Zen Maru Gothic,sans-serif;position:relative;overflow:auto}.chart-list:focus-visible{box-shadow:inset 0 0 0 2px var(--text)}.chart-list-space{position:relative}.chart-row{width:calc(100% - 5px);height:79px;transform:translateY(var(--row-offset));color:var(--text);background:linear-gradient(to right, color-mix(in srgb, var(--difficulty-color) 20%, transparent), transparent 38%), #2a2435;border-left:4px solid var(--difficulty-color);text-align:left;border-radius:3px;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-top:2px;padding:4px 16px 4px 20px;display:grid;position:absolute;top:0}.chart-row>span{min-width:0;display:grid}.chart-row strong,.chart-row small{text-overflow:ellipsis;white-space:nowrap;font-family:Zen Maru Gothic,sans-serif;font-size:24px;font-weight:700;line-height:1.15;overflow:hidden}.chart-row small{color:var(--muted);padding-bottom:3px;line-height:1.25}.chart-row>i{background:linear-gradient(#a6b2cc,#4f5968);border-radius:50%;width:30px;height:30px;margin-left:16px;box-shadow:inset 0 1px #ffffff45,0 2px 5px #0006}.chart-row>i.ranked{background:linear-gradient(#62caf0,#26659b)}.chart-row.selected{border:3px solid var(--difficulty-color);padding:1px 13px 1px 17px}.empty-library{color:var(--muted);text-align:center;position:sticky;top:40%}.song-library-error{margin:0;padding:1.5rem}.song-select-footer{z-index:2;background:linear-gradient(#2a2435, var(--panel));grid-template-columns:auto 1fr auto;display:grid;box-shadow:0 -8px 30px #0007}.back-control,.play-control{width:154px;color:var(--text);letter-spacing:.06em;text-shadow:0 1px 3px #0007;justify-content:center;align-items:center;gap:10px;padding:0 18px;font-size:16px;font-weight:700;display:flex}.back-control{background:linear-gradient(135deg, #f77 -30%, var(--back) 42%, #732c35)}.play-control{background:linear-gradient(225deg, #b5d985 -30%, var(--play) 42%, #425f2d)}.loadout-controls{align-items:center;gap:6px;min-width:0;padding-left:14px;display:flex}.loadout-controls button{--control-color:#639b3d;background:linear-gradient(to bottom, color-mix(in srgb, var(--control-color) 34%, var(--elements)), color-mix(in srgb, var(--control-color) 16%, var(--elements)));height:46px;box-shadow:inset 0 3px color-mix(in srgb, var(--control-color) 55%, var(--text));align-items:center;gap:9px;padding:0 17px;font-size:12px;font-weight:700;display:flex}.loadout-controls svg{width:19px;color:color-mix(in srgb, var(--control-color) 76%, var(--text))}.loadout-controls .mutators{--control-color:#be4cc0}.loadout-controls .inputs{--control-color:#8838ce}.loadout-controls .skins{--control-color:#435fa7}.loadout-controls b{background:#0d0c0f99;border-radius:3px;min-width:18px;padding:2px 5px}.play-controls{justify-self:end;align-items:stretch;gap:8px;display:flex}.play-modifiers{align-items:center;gap:16px;padding:0 8px;display:flex}.play-modifiers>strong{color:#3eaecb;white-space:nowrap;font-size:13px}.rate-control{align-items:center;gap:10px;display:flex}.rate-control output{font-variant-numeric:tabular-nums;text-align:right;width:38px;font-size:13px;font-weight:700}.rate-knob{background:conic-gradient(from 225deg, var(--accent) 0 var(--rate-angle), var(--outline) var(--rate-angle) 270deg, transparent 270deg);border-radius:50%;width:34px;height:34px;position:relative}.rate-knob>span{background:var(--panel);border:1px solid var(--outline);border-radius:50%;position:absolute;inset:4px}.rate-knob>span:after{width:2px;height:10px;transform:rotate(var(--rate-rotation));transform-origin:1px 10px;background:var(--text);content:"";margin:-10px 0 0 -1px;position:absolute;top:50%;left:50%}.rate-knob input{z-index:1;opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.modifier-flag{background:linear-gradient(#93c56f,#639b3d 50%,#344d24);border-radius:7px;grid-template-rows:20px auto;place-items:center;width:52px;height:44px;padding:3px 7px;font-size:10px;font-weight:700;display:grid}.modifier-flag svg{width:24px;height:18px}.gameplay-screen{width:100vw;height:100vh;position:relative;overflow:hidden}.gameplay-screen canvas{width:100%;height:100%;display:block}.gameplay-hint{color:#888;font-size:.75rem;position:absolute;bottom:1rem;right:1rem}.fps-counter{font-family:monospace;font-size:.875rem;position:absolute;top:1rem;left:1rem}.result-screen{font-size:2rem}.settings-modal-layer{z-index:20;width:var(--logical-width);height:1080px;transform:scale(var(--ui-scale));transform-origin:0 0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0d0c0f8c;place-items:center;padding:20px;display:grid;position:absolute;top:0;left:0}.settings-modal{background:#211c2b;border-radius:18px;grid-template-columns:320px 740px;width:1060px;min-width:0;height:740px;min-height:0;display:grid;overflow:hidden;box-shadow:0 24px 80px #000a}.settings-sidebar{background:#292235;grid-template-rows:78px 1fr 76px;min-height:0;display:grid;overflow:hidden}.settings-brand{color:var(--muted);letter-spacing:.14em;align-items:center;gap:13px;padding:0 34px;font-size:13px;font-weight:700;display:flex}.settings-brand img{width:30px;height:30px}.settings-sidebar nav{align-content:start;padding:12px 18px;display:grid}.settings-sidebar nav a{height:64px;color:var(--text);border-left:3px solid #0000;border-radius:7px;align-items:center;gap:18px;padding:0 26px;font-size:17px;font-weight:600;text-decoration:none;display:flex}.settings-sidebar nav a:first-child{border-left-color:var(--accent);background:#352d43}.settings-sidebar nav a:hover{background:var(--hover)}.settings-sidebar nav svg{stroke-width:2px;width:26px;height:26px}.settings-back{background:linear-gradient(135deg, #f77 -30%, var(--back) 42%, #732c35);letter-spacing:.08em;text-align:left;align-items:center;gap:14px;padding:0 42px;font-size:15px;font-weight:700;display:flex}.settings-panel{scroll-behavior:smooth;scrollbar-color:var(--outline) transparent;background:#211c2b;width:740px;min-width:0;padding:52px 52.5px;overflow-y:auto}.settings-heading{align-items:center;gap:18px;scroll-margin-top:62px;display:flex}.settings-heading svg{stroke-width:2px;width:31px;height:31px}.settings-heading h1,.settings-heading h2{margin:0;font-size:35px;line-height:1}.settings-heading-spaced{margin-top:82px}.settings-control{gap:14px;width:635px;max-width:100%;margin-top:38px;display:grid}.settings-control>span{font-size:18px;font-weight:600}.settings-control output{font-variant-numeric:tabular-nums;margin-left:7px}.settings-control small{color:var(--muted);font-size:13px}.settings-control input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:28px;margin:0}.settings-control input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0 var(--slider-progress), #0d0c0f var(--slider-progress) 100%);border-radius:999px;height:9px}.settings-control input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:0;border-radius:50%;width:29px;height:29px;margin-top:-10px;box-shadow:0 2px 7px #0005}.settings-control input[type=range]::-moz-range-track{background:#0d0c0f;border-radius:999px;height:9px}.settings-control input[type=range]::-moz-range-progress{background:var(--accent);border-radius:999px;height:9px}.settings-control input[type=range]::-moz-range-thumb{background:var(--accent);border:0;border-radius:50%;width:29px;height:29px;box-shadow:0 2px 7px #0005}.input-bindings-layer{z-index:30;width:var(--logical-width);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0d0c0fa3;place-items:center;height:1080px;padding:24px;display:grid;position:absolute;top:0;left:0}.input-bindings-modal{background:#211c2b;border:1px solid #ffffff0b;border-radius:20px;grid-template-rows:auto 1fr auto;width:min(1040px,100% - 48px);min-height:520px;padding:58px 70px 42px;display:grid;overflow:hidden;box-shadow:0 24px 80px #000a}.input-bindings-modal h1{text-align:center;margin:0;font-size:37px}.input-bindings-modal h1 span{white-space:nowrap}.input-bindings-modal>p{color:#b6bfd6;text-align:center;margin:34px 0 0;font-size:18px}.input-binding-list{justify-content:center;align-items:center;gap:14px;min-width:0;padding:44px 0 30px;display:flex}.input-binding-list>div{color:#b6bfd6;text-align:center;flex:112px;gap:12px;min-width:0;max-width:112px;font-size:20px;font-weight:700;display:grid}.input-binding-list button{height:112px;color:var(--text);text-overflow:ellipsis;white-space:nowrap;background:#1e1928;border:3px solid #504966;border-radius:8px;padding:8px;font-size:20px;overflow:hidden}.input-binding-list button:hover,.input-binding-list button.listening{filter:none;background:#2c2339;border-color:#9d59df}.input-binding-list button.listening{box-shadow:0 0 0 4px #9d59df30}