/* A neutral glass layer with one display accent and a quiet text hierarchy. */
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:600;font-display:swap;src:url('./fonts/barlow-condensed-semibold-italic.ttf') format('truetype')}
#menu{
  box-sizing:border-box;width:min(620px,calc(100vw - 32px));height:min(650px,calc(100dvh - 48px));
  max-width:none;max-height:none;margin:auto;padding:0;overflow:hidden;
  color:#f7f8f8;border:1px solid #ffffff45;border-radius:17px;background:#151b2266;
  box-shadow:0 24px 78px #05080b85,inset 0 1px #ffffff25;
  -webkit-backdrop-filter:blur(24px) saturate(120%);backdrop-filter:blur(24px) saturate(120%);
}
#menu[open]{display:flex;flex-direction:column}
#menu::backdrop{background:#0b0d1133;-webkit-backdrop-filter:none;backdrop-filter:none}
#menu .menu-heading{display:flex;align-items:center;justify-content:space-between;padding:25px 32px 0;flex:none}
#menu .menu-heading .micro{font:600 10px/1.3 var(--font);letter-spacing:1.6px;color:#e9eef0a8}
#menu .menu-heading-separator{margin:0 5px;color:#fff7}
#menu #close-menu{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#ffffff17;color:#fff;font-size:24px;line-height:1;backdrop-filter:none;transition:background .2s}
#menu #close-menu:hover{background:#ffffff30}
#menu h1{margin:21px 32px 23px;font:600 italic clamp(48px,6.7vw,60px)/.94 var(--display);text-transform:uppercase;letter-spacing:.15px;color:#fff}
#menu .menu-tabs{display:flex;gap:3px;margin:0 32px;padding:4px;border-radius:10px;background:#ffffff14;flex:none}
#menu .menu-tabs button{flex:1;min-width:0;padding:10px 8px;border:0;border-radius:7px;background:transparent;color:#e4eaf0b5;font:600 13px var(--font);cursor:pointer;transition:background .2s,color .2s}
#menu .menu-tabs button[aria-selected=true]{color:#192027;background:#f1f3f4;box-shadow:0 1px 5px #0003}
#menu .menu-tabs button:hover:not([aria-selected=true]){background:#ffffff12;color:#fff}
#menu button:focus-visible,#menu select:focus-visible{outline:2px solid #fff;outline-offset:2px}
#menu .menu-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 32px 24px;scrollbar-color:#ffffff60 transparent}
#menu .menu-panel[hidden]{display:none!important}
#menu .menu-eyebrow{margin:0 0 16px;color:#e3e9edaa;font:600 10px/1.3 var(--font);letter-spacing:1.7px}
#menu .level-picker{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#menu .level-picker label{display:block;margin:0 0 10px;color:#fff;font:600 16px/1.3 var(--font);letter-spacing:0}
#menu .level-picker select,#menu .visuals-setting select{appearance:auto;min-height:46px;padding:10px 13px;border:0;border-radius:8px;background:#ffffff1b;color:#fff;font:600 14px var(--font);color-scheme:dark}
#menu .level-picker select{width:100%;font-size:15px}
#menu .level-picker p{min-height:40px;margin:12px 0 18px;color:#e7edf0ba;font:400 13px/1.5 var(--font)}
#menu .level-load{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;border:0;border-radius:8px;background:#f4f5f5;color:#192027;font:700 13px var(--font);letter-spacing:.2px;cursor:pointer;transition:transform .2s,background .2s}
#menu .level-load:hover,#menu #resume:hover{transform:translateY(-2px);background:#fff}
#menu .level-load span{font-size:19px;font-weight:400}
#menu .session-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:29px}
#menu .session-stats .pause-detail{display:flex;align-items:center;min-height:60px;margin:0;padding:0;background:transparent;border:0;border-radius:0;backdrop-filter:none}
#menu .best-line{display:flex;flex-direction:column;gap:5px;margin:0;color:#e3e9edab;font:600 10px var(--font);letter-spacing:1px}
#menu .best-line strong{color:#fff;font:700 27px/1 var(--font);letter-spacing:-.6px}
#menu .pause-detail .bottom-left{position:static;display:flex;gap:9px;align-items:center}
#menu .pause-detail .speed-value{min-width:0;color:#fff;font:600 28px/1 var(--font)}
#menu .pause-detail .speed-caption{color:#e7edf0b3;font:600 10px/1.25 var(--font);letter-spacing:.5px}
#menu .pause-detail .speed-caption span{display:block;margin-top:4px;color:#e7edf0a3;font-size:9px}
#menu .pause-detail .speed-bars{display:none}
#menu .guide{margin:0;border:0;background:transparent}
#menu .guide>div{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:50px;padding:9px 0;border:0}
#menu .guide>div>span{display:flex;align-items:center;gap:4px}
#menu .guide strong{color:#f0f3f4db;font:500 13px/1.25 var(--font);text-align:right}
#menu kbd{height:25px;min-width:25px;padding:3px 6px;border:0;border-radius:5px;background:#ffffff1d;color:#fff;font:600 11px var(--font);text-shadow:none}
#menu .menu-tip,#menu .mobile-guide p{margin:18px 0 0;color:#e7edf0ba;font:400 13px/1.55 var(--font)}
#menu .mobile-guide{display:none}
#menu .visuals-setting{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0;padding:14px 0 22px;border:0}
#menu .visuals-setting + .visuals-setting{margin-top:7px;padding-top:22px;border-top:1px solid #ffffff25}
#menu .visuals-setting label{display:block;color:#fff;font:600 16px/1.3 var(--font)}
#menu .visuals-setting small{display:block;max-width:270px;margin-top:6px;color:#e7edf0b0;font:400 12px/1.45 var(--font)}
#menu .visuals-setting select{flex:none;max-width:47%;min-width:124px}
#menu .menu-footer{display:flex;gap:10px;padding:16px 32px 23px;border:0;background:#11182022;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex:none}
#menu .menu-footer .primary-button{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1;min-width:0;min-height:46px;margin:0;padding:11px 16px;border:0;border-radius:8px;background:#f4f5f5;color:#192027;font:700 14px var(--font);letter-spacing:.2px;box-shadow:none;transition:transform .2s,background .2s}
#menu #resume span{font-size:19px;font-weight:400}
#menu #tutorial-replay{flex:none;width:auto;margin:0;border:0;background:#ffffff19;color:#fff;font-size:11px;letter-spacing:.2px}
#menu #tutorial-replay:hover,#menu .menu-secondary:hover{background:#ffffff30}
#menu .menu-secondary{margin-top:18px;padding:10px 14px;border:0;border-radius:8px;background:#ffffff19;color:#fff;font:600 12px var(--font)}
#loading{background:#191e21}
#loading .loading-brand span{color:#f5f6f6}
#loading .loading-track{background:#ffffff27}
#loading .loading-track i{background:#f1f3f3}
#loading .loading-track+p{color:#e5e9e9a8}
@media(max-width:600px){
 #menu{width:calc(100vw - 20px);height:min(690px,calc(100dvh - 20px));border-radius:15px}
 #menu .menu-heading{padding:18px 20px 0}#menu h1{margin:18px 20px 17px;font-size:45px}
 #menu .menu-tabs{margin:0 20px;gap:3px}#menu .menu-content{padding:25px 20px 20px}
 #menu .menu-footer{padding:12px 20px calc(15px + env(safe-area-inset-bottom));flex-wrap:wrap}
 #menu #tutorial-replay{order:2;flex-basis:100%;min-height:37px;justify-content:center}
 #menu .session-stats{margin-top:22px}#menu .session-stats .pause-detail{min-height:54px}
 #menu .visuals-setting select{min-width:112px}#menu .guide strong{font-size:12px}
}
@media(max-width:380px){#menu .visuals-setting{align-items:stretch;flex-direction:column;gap:10px}#menu .visuals-setting select{max-width:none;width:100%}#menu h1{font-size:40px}}
@media(max-height:520px){#menu{height:calc(100dvh - 12px)}#menu .menu-heading{padding-top:11px}#menu h1{margin-top:9px;margin-bottom:11px;font-size:33px}#menu .menu-content{padding-top:15px;padding-bottom:12px}#menu .menu-footer{padding-top:9px;padding-bottom:9px}}
@media(prefers-reduced-motion:reduce){#menu .menu-tabs button,#menu .level-load,#menu .menu-footer .primary-button,#menu #close-menu{transition:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#menu{background:#20262bea}#menu .menu-footer{background:#181e25ed}}

.combo-numbers,.combo-numbers #multiplier{font-family:var(--display);font-weight:600;font-style:italic}
