:root{--background:#050609;--accent:#f8faff;--tint:#dce8ff;--muted:#7b818f;--dim:#616773;--panel:#111219;--border:#dce8ff22;color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--background);color:var(--tint)}
*{box-sizing:border-box}
html,body,main{width:100%;height:100%;margin:0;overflow:hidden}
body{overscroll-behavior:none}
main{position:relative;height:100svh;min-height:280px}
#intro{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:#000;color:#f8faff;cursor:pointer;user-select:none;outline:none;-webkit-tap-highlight-color:transparent}
#intro[hidden]{display:none}
.intro-copy{text-align:center;padding:24px;opacity:0}
.intro-copy h1{margin:0;font-size:clamp(34px,7vw,52px);font-weight:500;letter-spacing:-.035em;line-height:1.12}
.intro-copy p{margin:15px 0 0;color:#83838c;font-size:clamp(10px,2vw,12px);font-weight:400;letter-spacing:.07em;line-height:1.6}
#intro.is-running{animation:intro-reveal 2.2s ease-out both}
#intro.is-running .intro-copy{animation:intro-copy 2.2s ease-out both}
@keyframes intro-copy{0%{opacity:0;transform:translateY(7px)}22%,64%{opacity:1;transform:translateY(0)}88%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes intro-reveal{0%,74%{opacity:1}100%{opacity:0}}
#game{display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:default;-webkit-tap-highlight-color:transparent}
#level{position:absolute;top:max(29px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);color:var(--muted);font-size:10px;letter-spacing:.23em;font-variant-numeric:tabular-nums;pointer-events:none;transition:opacity .35s}
#app-controls{position:absolute;z-index:3;right:max(19px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));display:flex;align-items:center;gap:4px}
.icon-button{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;background:transparent;border:0;padding:13px;color:var(--dim);border-radius:50%;cursor:pointer;transition:color .2s,background .2s;-webkit-tap-highlight-color:transparent}
.icon-button:hover,.icon-button[aria-expanded="true"]{color:var(--tint);background:var(--border)}
.icon-button:focus-visible{outline:1px solid var(--tint);outline-offset:3px;color:var(--tint)}
.icon-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#account-open svg{stroke-width:1.6;filter:drop-shadow(0 0 2px currentColor)}
#theme-menu{position:absolute;z-index:4;right:max(20px,env(safe-area-inset-right));top:max(64px,calc(env(safe-area-inset-top) + 54px));width:218px;max-width:calc(100vw - 28px);max-height:calc(100svh - 82px);overflow-y:auto;padding:12px;background:var(--panel);border:1px solid var(--border);border-radius:15px;box-shadow:0 14px 48px #0008;color:var(--tint);overscroll-behavior:contain}
#theme-menu[hidden]{display:none}
#theme-menu fieldset{border:0;padding:0;margin:0;min-width:0}
#theme-menu legend{padding:5px 10px 10px;color:var(--muted);font-size:10px;letter-spacing:.08em}
.theme-option{position:relative;display:flex;align-items:center;gap:11px;min-height:44px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:11px;user-select:none}
.theme-option:hover{background:var(--border)}
.theme-option:focus-within{outline:1px solid var(--tint);outline-offset:-1px}
.theme-option input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.swatch{width:14px;height:14px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,var(--swatch) 0 60%,var(--swatch-tint) 60% 100%)}
.theme-name{color:var(--muted)}
.theme-check{margin-left:auto;color:var(--tint);opacity:0;font-size:12px}
.theme-option input:checked~.theme-check{opacity:1}
.theme-option input:checked~.theme-name{color:var(--tint)}
#hint{position:absolute;left:0;right:0;top:var(--hint-y,75%);margin:0;text-align:center;color:var(--muted);font-size:10px;letter-spacing:.08em;pointer-events:none;transition:opacity .3s}
.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}
.no-script{position:absolute;inset:45% 0;text-align:center;font-size:14px}
@media(max-width:480px){#hint{font-size:9px;letter-spacing:.03em}#app-controls{right:max(9px,env(safe-area-inset-right))}#level{left:max(24px,env(safe-area-inset-left));transform:none}#theme-menu{right:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}#intro.is-running,#intro.is-running .intro-copy{animation:none!important}.intro-copy{opacity:1}}

#account-dialog{position:fixed;width:min(400px,calc(100vw - 32px));max-height:calc(100svh - 40px);overflow:auto;padding:34px 28px 26px;border:1px solid var(--border);border-radius:20px;background:var(--panel);color:var(--tint);box-shadow:0 25px 90px #0009}
#account-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}
#account-dialog [hidden]{display:none!important}
#account-dialog .eyebrow{font-size:9px;letter-spacing:.2em;color:var(--muted);margin:0 0 22px}
#account-dialog h2{font-size:25px;line-height:1.2;font-weight:500;letter-spacing:-.025em;margin:0 0 15px}
#account-dialog p{font-size:13px;line-height:1.7;color:var(--muted)}
#account-dialog button{display:block;width:100%;border:1px solid var(--border);border-radius:10px;padding:13px 16px;margin:14px 0 0;background:var(--tint);color:var(--background);font:inherit;font-size:13px;cursor:pointer}
#account-dialog button:disabled{opacity:.45;cursor:default}
#account-dialog .quiet,#account-dialog [data-retry]{background:transparent;color:var(--tint)}
#account-dialog .dialog-close{position:absolute;right:12px;top:8px;width:32px;height:32px;display:grid;place-items:center;padding:0;margin:0;border:0;background:transparent;color:var(--muted);font-size:22px}
#account-dialog label{font-size:11px;color:var(--muted);display:block;margin:22px 0 9px}
#account-dialog input{width:100%;padding:13px 12px;background:var(--background);border:1px solid var(--border);border-radius:10px;color:var(--tint);font:inherit;font-size:14px}
#account-dialog [data-message]{min-height:0;margin:16px 0 0;font-size:11px}
#account-dialog button:focus-visible,#account-open:focus-visible,#account-dialog input:focus-visible{outline:1px solid var(--tint);outline-offset:3px}

#difficulty-dialog{position:fixed;inset:0;width:100vw;height:100svh;max-width:100vw;max-height:100svh;margin:0;padding:0;border:0;background:var(--background);color:var(--tint);overflow:auto;overscroll-behavior:contain}
#difficulty-dialog::backdrop{background:#000c}
.difficulty-content{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));text-align:center}
.difficulty-eyebrow{margin:0 0 12px;color:var(--muted);font-size:9px;letter-spacing:.2em}
#difficulty-title{margin:0 0 20px;font-size:18px;font-weight:400;letter-spacing:.025em;color:var(--muted)}
.difficulty-drum{--label-width:170px;position:relative;width:min(300px,calc(100vw - 48px));height:clamp(160px,43svh,340px);flex-shrink:0;cursor:grab;touch-action:none;user-select:none}
.difficulty-drum.is-dragging,.difficulty-drum.is-dragging *{cursor:grabbing}
.difficulty-label{position:absolute;top:50%;left:50%;white-space:nowrap;height:44px;margin-top:-22px;display:flex;align-items:center;border:0;padding:0 0 0 .08em;background:none;color:var(--tint);cursor:pointer;touch-action:none;font-family:"Trebuchet MS",ui-rounded,system-ui,sans-serif;font-size:clamp(26px,6vw,36px);letter-spacing:.08em;--g:0;text-shadow:0 0 calc(4px * var(--g)) var(--tint),0 0 calc(14px * var(--g)) var(--tint),0 0 calc(30px * var(--g)) var(--accent);will-change:transform,opacity}
.difficulty-label:focus-visible{outline:1px solid var(--tint);outline-offset:7px;border-radius:3px}
#difficulty-hint{margin:14px 0 0;color:var(--dim);font-size:10px;letter-spacing:.05em}
#difficulty-description{max-width:330px;min-height:40px;margin:20px 0 0;color:var(--muted);font-size:12px;line-height:1.7}
#difficulty-dialog [data-start]{min-height:44px;min-width:210px;max-width:100%;padding:12px 22px;margin-top:18px;border:1px solid var(--border);border-radius:10px;background:var(--tint);color:var(--background);font:inherit;font-size:12px;cursor:pointer}
#difficulty-dialog [data-start]:disabled{opacity:.5;cursor:wait}
#difficulty-dialog [data-start]:focus-visible,.difficulty-close:focus-visible{outline:1px solid var(--tint);outline-offset:3px}
#difficulty-dialog [data-message]{max-width:330px;margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.6}
.difficulty-close{position:absolute;z-index:1;top:max(14px,env(safe-area-inset-top));right:max(19px,env(safe-area-inset-right));width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--dim);font:inherit;font-size:24px;cursor:pointer}
.difficulty-close:hover{color:var(--tint);background:var(--border)}
@media(max-width:480px){.difficulty-drum{--label-width:128px;width:min(250px,calc(100vw - 48px))}}
@media(max-height:480px){.difficulty-content{padding-top:22px;padding-bottom:20px}.difficulty-eyebrow{display:none}#difficulty-title{font-size:14px;margin-bottom:8px}.difficulty-drum{height:150px}#difficulty-hint{margin-top:7px}#difficulty-description{margin-top:10px;font-size:11px;min-height:30px}#difficulty-dialog [data-start]{margin-top:10px}}

#app{opacity:1;transition:opacity 1.35s ease .25s}
#app.is-picking{opacity:0;pointer-events:none}
#game{opacity:1;transition:opacity .7s ease}
#game.is-changing{opacity:0}
.has-difficulty-rail #hint{left:var(--rail-reserve,0px)}
.has-difficulty-rail #level{left:calc(50% + var(--rail-reserve,0px)/2)}
#difficulty-dialog{z-index:2;transition:background-color 1.6s ease}
.difficulty-content{position:fixed;left:50%;top:50%;width:100vw;height:100svh;transform:translate(-50%,-50%);transition:left 1.8s cubic-bezier(.22,.7,.22,1),top 1.8s cubic-bezier(.22,.7,.22,1),width 1.8s cubic-bezier(.22,.7,.22,1),height 1.8s ease,padding 1.8s ease;overflow:visible}
.difficulty-heading{max-height:120px;opacity:1;overflow:hidden;flex-shrink:0;transition:opacity .65s ease,max-height 1.6s ease}
.difficulty-footer{max-height:270px;opacity:1;overflow:hidden;flex-shrink:0;transition:opacity .65s ease,max-height 1.6s ease}
.difficulty-drum{transition:width 1.8s cubic-bezier(.22,.7,.22,1),height 1.8s ease}
.difficulty-label{transition:font-size 1.8s ease}
.difficulty-rail-status{display:none}
#difficulty-dialog.is-docked{background:transparent;pointer-events:none;overflow:visible}
#difficulty-dialog.is-docked .difficulty-content{left:var(--rail-center,48px);top:var(--rail-y,50%);width:var(--rail-width,80px);height:var(--rail-height,280px);min-height:0;padding:0}
#difficulty-dialog.is-docked .difficulty-heading,#difficulty-dialog.is-docked .difficulty-footer{opacity:0;max-height:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease,max-height 1.6s ease,visibility 0s linear .65s}
#difficulty-dialog.is-docked .difficulty-close{opacity:0;visibility:hidden;pointer-events:none}
#difficulty-dialog.is-docked .difficulty-drum{width:var(--rail-width,80px);height:var(--rail-height,280px);pointer-events:auto}
#difficulty-dialog.is-docked .difficulty-label{font-size:var(--rail-font,12px);min-height:44px}
#difficulty-dialog.is-docked .difficulty-rail-status{display:block;position:absolute;top:calc(100% + 12px);left:0;width:100%;margin:0;color:var(--muted);font-size:10px;line-height:1.6;text-align:left;pointer-events:none}
@media(max-width:480px){.has-difficulty-rail #level{left:max(24px,env(safe-area-inset-left));transform:none}}

#sidebar-divider{position:absolute;z-index:2;top:0;bottom:0;left:calc(var(--rail-reserve,0px) - 1px);width:1px;background:var(--tint);box-shadow:0 0 7px var(--tint),0 0 14px var(--accent);opacity:0;pointer-events:none;transition:opacity 1.35s ease .25s}
.has-difficulty-rail #sidebar-divider{opacity:.7}
:root{--safe-top:env(safe-area-inset-top,0px)}
.has-difficulty-rail #app-controls{left:max(env(safe-area-inset-left),calc((var(--rail-reserve,240px) - var(--controls-width,172px))/2));right:auto;top:var(--control-top,14px);flex-direction:row;gap:var(--control-gap,8px)}
@media(max-width:639px){.has-difficulty-rail #app-controls{flex-direction:column}}
.has-difficulty-rail .icon-button{width:var(--control-size,52px);height:var(--control-size,52px);padding:0}
.has-difficulty-rail .icon-button svg{width:var(--control-icon,22px);height:var(--control-icon,22px);stroke-width:1.5}
.has-difficulty-rail #account-open svg{stroke-width:1.7}
.has-difficulty-rail #theme-menu{left:min(calc(var(--rail-reserve,240px) + 12px),calc(100vw - 230px));right:auto;top:var(--control-top,14px)}
@media(max-width:480px){.has-difficulty-rail #level{left:calc(50% + var(--rail-reserve,0px)/2);transform:translateX(-50%)}}

#language-control{position:fixed;z-index:9;top:max(14px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));direction:ltr}
#language-toggle{display:flex;align-items:center;gap:7px;min-width:58px;height:44px;padding:8px 6px;border:0;border-radius:10px;background:transparent;color:var(--tint);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s}
.language-flag{display:block;width:27px;height:19px;flex-shrink:0;filter:saturate(.65) drop-shadow(0 0 3px var(--tint)) drop-shadow(0 0 7px var(--accent));opacity:.85}
.language-code{font-size:9px;letter-spacing:.1em;color:var(--muted)}
#language-toggle:hover,#language-toggle[aria-expanded="true"]{background:var(--border)}
#language-toggle:hover .language-flag{opacity:1}
#language-toggle:focus-visible,#language-dialog button:focus-visible,#language-search:focus-visible{outline:1px solid var(--tint);outline-offset:2px}
#account-dialog #language-toggle{display:flex;width:auto;margin:0;border:0;padding:8px 6px;background:transparent;color:var(--tint)}
#account-dialog #language-toggle:hover{background:var(--border)}
#language-dialog{position:fixed;inset:auto max(14px,env(safe-area-inset-right)) auto auto;top:max(64px,calc(env(safe-area-inset-top) + 58px));width:min(302px,calc(100vw - 28px));max-width:calc(100vw - 28px);height:auto;max-height:calc(100svh - max(80px,calc(env(safe-area-inset-top) + 72px)) - env(safe-area-inset-bottom));margin:0;padding:15px;border:1px solid var(--border);border-radius:17px;background:var(--panel);color:var(--tint);box-shadow:0 0 18px var(--border),0 20px 70px #000a;overflow:hidden}
#language-dialog[open]{display:flex;flex-direction:column}
#language-dialog::backdrop{background:#0005}
#language-dialog header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;flex-shrink:0}
#language-title{margin:0;font-size:12px;font-weight:400;letter-spacing:.045em;color:var(--tint)}
#language-dialog [data-language-close]{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:22px;cursor:pointer}
#language-search{width:100%;min-height:43px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--background);color:var(--tint);font:inherit;font-size:12px;flex-shrink:0}
#language-search::placeholder{color:var(--muted)}
#language-list{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;min-height:0;max-height:min(395px,52svh);margin-top:11px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.language-option{display:flex;align-items:center;gap:13px;width:100%;min-height:44px;padding:10px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;text-align:start}
.language-option .language-flag{width:23px;height:17px;filter:none;opacity:.7}
.language-option:hover,.language-option[aria-checked="true"]{background:var(--border);color:var(--tint)}
.language-option[aria-checked="true"] .language-flag{filter:drop-shadow(0 0 4px var(--accent));opacity:1}
.language-name{flex:1;min-width:0;text-align:start}
.language-check{margin-inline-start:auto;color:var(--tint);font-size:12px}
#language-empty{margin:24px 8px;text-align:center;color:var(--muted);font-size:12px}
#language-empty[hidden]{display:none}
#game,#level,#app-controls{direction:ltr}
#hint{padding-inline:12px;line-height:1.5}
[dir="rtl"] #theme-menu,[dir="rtl"] #account-dialog,[dir="rtl"] #language-dialog{text-align:right}
[dir="rtl"] .theme-check{margin-left:0;margin-right:auto}
[dir="rtl"] .difficulty-label{letter-spacing:0}
#difficulty-dialog:not(.is-docked) .difficulty-close{right:max(94px,calc(env(safe-area-inset-right) + 80px))}
#difficulty-dialog.is-docked .difficulty-label{font-size:calc(var(--rail-font,12px)*var(--label-scale,1))}
@media(max-width:480px){#language-control{right:max(12px,env(safe-area-inset-right))}#language-search{font-size:16px}#language-dialog{width:min(302px,calc(100vw - 24px));right:max(12px,env(safe-area-inset-right))}}
@media(max-height:380px){#language-dialog{top:12px;max-height:calc(100svh - 24px)}#language-list{max-height:40svh}}