@font-face{font-family:InterVariable;font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/InterVariable.woff2)format("woff2")}@font-face{font-family:InterVariable;font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/InterVariable-Italic.woff2)format("woff2")}:root{--font-primary:"InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--tracking-tight:-.02em;--tracking-normal:-.01em;--tracking-wide:.02em;--leading-tight:1.2;--leading-normal:1.4;--bg-color:#1e1e1e;--panel-bg:#191919b8;--glass-bg-light:#ffffff08;--glass-bg:var(--glass-bg-light);--glass-bg-hover:#ffffff17;--glass-bg-active:#fff2;--glass-bg-dark:#19191980;--glass-border:.5px solid #fff2;--glass-blur:blur(10px) saturate(190%);--glass-shadow:0 10px 40px #00000026;--glass-radius:24px;--accent:#1565c0;--text-muted:#d1d1d6;--text-primary:#fff;--text-secondary:#ebebf0;--text-tertiary:#a1a1a6;--board-bg:#1f1f1f;--key-white:#e0e0e0;--key-black:#000;--hud-bg:var(--glass-bg-dark);--hud-text:#fff;--minimap-bg:#ffffff0a;--status-bar-bg:var(--board-bg);--safe-area-bg:var(--board-bg);--radius-btn:12px;--radius-btn-premium:12px;--radius-btn-icon:12px;--radius-btn-option:8px;--radius-btn-square:14px;--radius-btn-remove-ads:12px;--radius-segmented:14px;--radius-segment:11px;--radius-input:14px;--radius-textarea:14px;--radius-pill:14px;--radius-submit:14px;--radius-qs-col:12px;--radius-chord-prev:8px;--radius-chord-btn:8px;--radius-device-list:12px;--radius-premium-badge:8px;--radius-search:12px;--radius-grid:12px}:root[data-theme=light]{--bg-color:#f2f2f7;--panel-bg:#ffffff80;--glass-bg-light:#ffffff80;--glass-bg:var(--glass-bg-light);--glass-bg-hover:#ffffffa1;--glass-bg-active:#ffffffc2;--glass-bg-dark:#ffffff80;--glass-border:.5px solid #0000002d;--glass-shadow:0 10px 40px #00000014;--text-muted:#3a3a3c;--text-primary:#000;--text-secondary:#1f1f21;--text-tertiary:#48484a;--board-bg:#e5e5ea;--key-white:#fff;--key-black:#2c2c2e;--hud-bg:var(--glass-bg-dark);--hud-text:#1c1c1e;--minimap-bg:#0000000a;--status-bar-bg:var(--board-bg);--safe-area-bg:var(--board-bg)}body.lite-engine-active{--glass-bg-dark:#111;--glass-bg-light:#1c1c1e;--glass-bg-hover:#2c2c2e;--glass-bg-active:#3a3a3c;--glass-border:1px solid #2c2c2e;--hud-bg:#000}:root[data-theme=light] body.lite-engine-active{--glass-bg-dark:#e5e5ea;--glass-bg-light:#fff;--glass-bg-hover:#f2f2f7;--glass-bg-active:#e5e5ea;--glass-border:1px solid #c7c7cc;--hud-bg:#fff}:root{--ad-height-desktop:90px;--ad-height-mobile:60px;--spacing-xxs:4px;--spacing-xs:8px;--spacing-s:12px;--spacing-m:16px;--spacing-l:24px;--font-display:22px;--font-heading:16px;--font-body:14px;--font-small:10px;--font-label:13px;--font-input:13px;--font-button:14px;--font-square-button:24px;--safe-area-inset-top:env(safe-area-inset-top,0px);--safe-area-inset-bottom:env(safe-area-inset-bottom,0px);--android-status-bar-height:0px;--android-status-overlay-inset:0px;--android-nav-inset:env(safe-area-inset-bottom,0px);--corner-radius:0px;--corner-safe-inset:12px;--modal-top-offset:138px;--modal-bottom-offset:var(--safe-area-inset-bottom);--hud-btn-size:48px;--ad-actual-height:0px;--transition-fast:.15s;--transition-normal:.25s;--transition-slow:.4s;--ease-out-expo:cubic-bezier(.19, 1, .22, 1);--ease-elastic:cubic-bezier(.175, .885, .32, 1.275)}@media (min-width:1024px){:root{--font-display:32px;--font-heading:18px;--font-body:16px;--font-label:10px;--font-input:15px;--font-button:16px;--font-square-button:32px;--hud-btn-size:64px;--modal-top-offset:160px;--modal-bottom-offset:90px}}*{box-sizing:border-box}canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;display:block}body{background-color:var(--safe-area-bg);overscroll-behavior:none;font-family:var(--font-primary);letter-spacing:var(--tracking-normal);line-height:var(--leading-normal);touch-action:none;height:100vh;height:100dvh;color:var(--text-primary);-webkit-user-select:none;user-select:none;flex-direction:column;margin:0;display:flex;overflow:hidden;padding:0!important}input[type=text],input[type=number],textarea,[contenteditable=true],.selectable{-webkit-user-select:text!important;user-select:text!important}.glass-pane,.modal-panel,.hud-btn,.minimap-btn{-webkit-user-select:none!important;user-select:none!important}input,button,select,textarea{font-family:var(--font-primary);letter-spacing:var(--tracking-normal);line-height:var(--leading-normal)}#app-container{background-color:var(--board-bg);width:100%;padding-top:var(--ad-top-padding,0px);padding-bottom:var(--safe-area-inset-bottom,0px);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}body.platform-ios #app-container,body.platform-android #app-container{background-color:var(--safe-area-bg)}@media (min-width:1025px){#app-container{padding-bottom:0}}body.ad-top #app-container{padding-top:var(--ad-actual-height);padding-bottom:0}body.ad-bot #app-container{padding-top:0;padding-bottom:var(--safe-area-inset-bottom)}body.ad-free #app-container{padding-top:0;padding-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px))}body.platform-ios.hud-hidden:not(.fullscreen-mode) #app-container,body.platform-ios.has-status-bar.hud-hidden #app-container,body.platform-android.hud-hidden:not(.fullscreen-mode) #app-container,body.platform-android.has-status-bar.hud-hidden #app-container{padding-top:max(var(--ad-top-padding,0px), var(--safe-area-inset-top,0px), env(safe-area-inset-top,0px))}body.platform-android:before{content:"";height:max(var(--safe-area-inset-top,0px), env(safe-area-inset-top,0px));background:var(--status-bar-bg,#1f1f1f);z-index:1200;pointer-events:none;transition:none;position:fixed;top:0;left:0;right:0;transform:translateY(0)}body.platform-android.status-bar-offscreen:before,body.platform-android.fullscreen-mode:not(.fullscreen-transitioning):before{transition:none;transform:translateY(-100%)}body.platform-android.fullscreen-transitioning.status-bar-hide:before{transition:transform .5s cubic-bezier(.16,1,.3,1);transform:translateY(-100%)}body.platform-android.fullscreen-transitioning:not(.status-bar-offscreen):not(.status-bar-hide):before{transition:transform .5s cubic-bezier(.16,1,.3,1);transform:translateY(0)}body.platform-ios.fullscreen-closing.hud-hidden #app-container,body.platform-android.fullscreen-closing.hud-hidden #app-container{padding-top:max(var(--ad-top-padding,0px), var(--safe-area-inset-top,0px))}body.platform-android.fullscreen-closing:before{height:var(--safe-area-inset-top,0px)}body.ad-top.hud-hidden:not(.fullscreen-mode) #app-container,body.ad-top.has-status-bar.hud-hidden #app-container{padding-top:var(--ad-actual-height)}@media (max-width:1024px){.desktop-only{display:none!important}}@media (min-width:1025px){.mobile-only{display:none!important}}#loading-overlay{-webkit-backdrop-filter:blur(25px)saturate(180%);z-index:9000;color:#fff;width:100%;height:100%;font-family:var(--font-primary);background:#000;flex-direction:column;justify-content:center;align-items:center;transition:opacity .6s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0}#loading-overlay.hidden-overlay{opacity:0;pointer-events:none;z-index:-1}@keyframes pulseLogo{0%{filter:brightness()drop-shadow(0 0 #1565c000);transform:scale(1)}50%{filter:brightness(1.1)drop-shadow(0 0 20px #1565c066);transform:scale(1.03)}to{filter:brightness()drop-shadow(0 0 #1565c000);transform:scale(1)}}#toast{color:#fff;font-size:var(--font-small);opacity:0;pointer-events:none;z-index:10000;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:pre-line;background:#000c;border-radius:20px;max-width:90%;padding:10px 24px;line-height:1.4;transition:opacity .3s;position:absolute;bottom:120px;left:50%;transform:translate(-50%)}#toast.visible{opacity:1}@keyframes modalPop{0%{opacity:0;transform:translateY(28px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes slideUpEnter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes pulseIcon{0%,to{filter:brightness();transform:scale(1)}50%{filter:brightness(1.2);transform:scale(1.05)}}@keyframes glassShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes recordPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0;border-radius:10px}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px;transition:background .3s}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.modal-panel ::-webkit-scrollbar{width:5px}.custom-scrollbar ::-webkit-scrollbar{width:5px}.modal-panel ::-webkit-scrollbar-thumb{background:#fff3}.custom-scrollbar ::-webkit-scrollbar-thumb{background:#fff3}*{scrollbar-width:thin;scrollbar-color:#fff3 transparent}.stack-v{flex-direction:column;display:flex}.stack-h{flex-direction:row;align-items:center;display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.gap-xxs{gap:var(--spacing-xxs)}.gap-xs{gap:var(--spacing-xs)}.gap-s{gap:var(--spacing-s)}.gap-m{gap:var(--spacing-m)}.gap-l{gap:var(--spacing-l)}.p-xs{padding:var(--spacing-xs)}.p-s{padding:var(--spacing-s)}.p-m{padding:var(--spacing-m)}.p-l{padding:var(--spacing-l)}.m-b-xs{margin-bottom:var(--spacing-xs)}.m-b-s{margin-bottom:var(--spacing-s)}.m-b-m{margin-bottom:var(--spacing-m)}.m-t-s{margin-top:var(--spacing-s)}h1,h2,h3,h4,h5,h6{margin:0;font-weight:700}p{margin:0}.info-content-rich{text-align:left;max-width:800px;color:var(--text-secondary);line-height:1.6;font-size:var(--font-body);margin:0 auto}.info-content-rich h3{color:var(--accent);margin-top:5px;margin-bottom:12px;font-size:1.1rem;font-weight:700}.info-content-rich h4{color:var(--text-primary);margin-bottom:8px;font-size:.95rem;font-weight:600}.info-content-rich p{margin-bottom:15px}.info-content-rich ul{margin-bottom:20px;padding-left:20px}.info-content-rich li{margin-bottom:8px}.info-footer{font-size:var(--font-small);color:var(--text-muted);border-top:var(--glass-border);text-align:center;margin-top:30px;padding-top:15px}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent)}#sustain-effect{z-index:9999;pointer-events:none;width:100%;height:100%;box-shadow:inset 0 0 0 0 var(--accent);transition:box-shadow .5s var(--ease-out-expo);background:0 0;position:absolute;top:0;left:0}.sustain-active #sustain-effect{box-shadow:inset 0 0 20px 10px var(--accent);transition:box-shadow 5s linear}.smoke-puff{pointer-events:none;background:#fff6;border-radius:50%;width:20px;height:20px;position:absolute;animation:smoke-puff 2.25s var(--ease-out-expo) forwards!important}@keyframes smoke-puff{0%{opacity:1;transform:scale(.5)translateY(0)}30%{opacity:.6;filter:blur(4px);transform:scale(1.05)translateY(-10px)}to{opacity:0;filter:blur(20px);transform:scale(1.1)translateY(-30px)}}.text-display{font-size:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-primary);font-weight:700;line-height:var(--leading-tight)}.text-heading{font-size:var(--font-heading);letter-spacing:var(--tracking-normal);color:var(--accent);font-weight:600;line-height:var(--leading-tight)}.text-body{font-size:var(--font-body);letter-spacing:var(--tracking-normal);line-height:var(--leading-normal);color:var(--text-secondary)}.text-small{font-size:var(--font-small);letter-spacing:var(--tracking-normal);line-height:var(--leading-normal);color:var(--text-tertiary)}.text-muted{font-size:var(--font-small);letter-spacing:var(--tracking-normal);color:var(--text-muted)}.text-label{font-size:var(--font-label);letter-spacing:var(--tracking-wide);color:var(--text-tertiary);font-weight:700;line-height:var(--leading-tight);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.label{-webkit-line-clamp:2;font-size:var(--font-label);color:var(--text-secondary);letter-spacing:var(--tracking-wide);font-weight:700;line-height:var(--leading-tight);-webkit-box-orient:vertical;margin-top:15px;margin-bottom:8px;display:-webkit-box;overflow:hidden}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.glass-blobs{z-index:-1;pointer-events:none;background:var(--bg-color);width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.blob{background:radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 70%);filter:blur(60px);border-radius:50%;width:400px;height:400px;animation:20s infinite alternate move;position:absolute}.blob-1{background:radial-gradient(circle,#ff3b301f 0%,#ff3b3000 70%);top:-100px;right:-100px}.blob-2{background:radial-gradient(circle,#007aff1a 0%,#007aff00 70%);animation-duration:25s;bottom:-150px;left:-100px}.blob-3{background:radial-gradient(circle,#af52de14 0%,#af52de00 70%);width:300px;height:300px;animation-duration:30s;top:40%;left:50%}@keyframes move{0%{transform:translate(0)scale(1)}to{transform:translate(100px,100px)scale(1.2)}}.glass-pane{background:var(--glass-bg-dark);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--glass-radius,24px);padding:24px}.glass-interactive{background:var(--glass-bg-light);border:var(--glass-border);transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #0003,inset 0 1px 1px #ffffff1a}.glass-interactive:hover{background:var(--glass-bg-hover);transform:translateY(-1px);box-shadow:0 6px 12px #0003}.glass-interactive:active{background:var(--glass-bg-active);transform:scale(.98)}dialog.modal-dialog{width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding-top:var(--modal-top-offset);padding-bottom:var(--modal-bottom-offset);z-index:5000;box-sizing:border-box;pointer-events:none;background:0 0;border:none;justify-content:center;align-items:center;margin:0;display:none;position:fixed;inset:0}dialog.modal-dialog:focus,.modal-panel:focus{box-shadow:none!important;outline:none!important}dialog.modal-dialog :focus:not(:focus-visible){box-shadow:none!important;outline:none!important}dialog.modal-dialog :focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px!important}dialog.modal-dialog h2:focus-visible{box-shadow:none!important;outline:none!important}dialog.modal-dialog [tabindex="-1"]:focus-visible{box-shadow:none!important;outline:none!important}dialog.modal-dialog[open]{display:flex}dialog.modal-dialog::backdrop{pointer-events:none;background:0 0}.modal-panel{pointer-events:auto;color:var(--text-primary);text-align:center;box-sizing:border-box;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;pointer-events:auto;will-change:transform, opacity;width:90%;max-width:1000px;max-height:calc(100% - 20px);padding:24px;animation:.5s cubic-bezier(.32,.72,0,1) modalPop;position:relative;transform:translateZ(0);touch-action:auto!important;overflow-y:auto!important}.modal-panel.glass-pane{background:var(--glass-bg-dark)!important;-webkit-backdrop-filter:var(--glass-blur)!important;border:var(--glass-border)!important}:root[data-theme=light] .modal-panel.glass-pane{background:var(--glass-bg-light)!important;border:var(--glass-border)!important}.modal-panel.glass-pane:before{display:none!important}.modal-panel h2{color:var(--accent);font-size:var(--font-display);text-align:center;letter-spacing:.5px;margin-top:0;margin-bottom:8px;font-weight:700}.modal-panel h3{font-size:var(--font-heading);color:var(--text-primary);letter-spacing:.5px;margin:15px 0 8px;font-weight:600}.modal-panel p{font-size:var(--font-body);color:var(--text-secondary);margin-bottom:15px;line-height:1.6}.modal-panel small{font-size:var(--font-small);color:#777;text-align:center;margin-top:10px;display:block}#premium-modal h2{margin-top:10px;font-size:24px}.premium-options{width:100%}@media (min-width:1024px){.modal-panel{border-radius:var(--glass-radius,24px);max-width:1000px;padding:40px}}@media (max-width:932px){dialog.modal-dialog{padding-top:calc(var(--modal-top-offset) + 10px);padding-bottom:calc(var(--modal-bottom-offset) + 10px);align-items:flex-start}.modal-panel{width:90%;max-width:1000px;margin-top:0;margin-bottom:auto}}@media (max-width:600px) and (orientation:portrait){.modal-panel{width:90%;max-width:80%;max-height:calc(95vh - 60px)}.modal-panel h2{margin-bottom:5px;font-size:18px}.modal-panel h3{margin:10px 0 5px;font-size:13px}.modal-panel p{margin-bottom:10px;font-size:11px}}@media (max-height:500px) and (orientation:landscape){dialog.modal-dialog,#quick-settings-modal{padding-top:6px!important;padding-bottom:calc(var(--modal-bottom-offset) + 6px)!important;align-items:flex-start!important}.modal-panel{border-radius:var(--glass-radius,24px)!important;max-height:100%!important;padding:12px 20px!important}.modal-panel h2{margin-bottom:4px!important;font-size:16px!important}.modal-panel p{margin-bottom:8px!important;font-size:10px!important}.btn-close{min-height:auto!important;margin-top:5px!important;padding:6px 15px!important;font-size:11px!important}}body.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.hud-sliding-out dialog.modal-dialog{padding-top:max(env(safe-area-inset-top,0px), 10px)!important}@media (orientation:portrait){body.fullscreen-mode.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.fullscreen-modal-preview.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.fullscreen-mode.hud-sliding-out dialog.modal-dialog,body.fullscreen-modal-preview.hud-sliding-out dialog.modal-dialog{padding-top:max(calc(var(--cutout-bottom,0px) + 8px), env(safe-area-inset-top,0px), 10px)!important}body.cutout-type-dynamic_island.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.cutout-type-dynamic_island.hud-sliding-out dialog.modal-dialog,body.ios-profile-dynamic_island.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.ios-profile-dynamic_island.hud-sliding-out dialog.modal-dialog{padding-top:max(calc(var(--cutout-bottom,48px) + 10px), calc(env(safe-area-inset-top,0px) + 10px), 58px)!important}body.fullscreen-mode.cutout-type-punch.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.fullscreen-modal-preview.cutout-type-punch.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.fullscreen-mode.cutout-type-punch.hud-sliding-out dialog.modal-dialog,body.fullscreen-modal-preview.cutout-type-punch.hud-sliding-out dialog.modal-dialog{padding-top:max(calc(var(--cutout-bottom,42px) + 10px), 52px)!important}body.cutout-type-notch.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.cutout-type-notch.hud-sliding-out dialog.modal-dialog,body.ios-profile-notch.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.ios-profile-notch.hud-sliding-out dialog.modal-dialog{padding-top:max(calc(var(--cutout-bottom,35px) + 9px), calc(env(safe-area-inset-top,0px) + 9px), 44px)!important}body.fullscreen-mode.cutout-present.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.fullscreen-modal-preview.cutout-present.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.fullscreen-mode.cutout-present.hud-sliding-out dialog.modal-dialog,body.fullscreen-modal-preview.cutout-present.hud-sliding-out dialog.modal-dialog,body.cutout-type-dynamic_island.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.cutout-type-dynamic_island.hud-sliding-out dialog.modal-dialog,body.ios-profile-dynamic_island.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.ios-profile-dynamic_island.hud-sliding-out dialog.modal-dialog,body.cutout-type-notch.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.cutout-type-notch.hud-sliding-out dialog.modal-dialog,body.ios-profile-notch.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.ios-profile-notch.hud-sliding-out dialog.modal-dialog{align-items:flex-start!important}}@media (orientation:landscape){body.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.hud-sliding-out dialog.modal-dialog,body.fullscreen-mode.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.fullscreen-modal-preview.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.fullscreen-mode.hud-sliding-out dialog.modal-dialog,body.fullscreen-modal-preview.hud-sliding-out dialog.modal-dialog{padding-top:max(env(safe-area-inset-top,0px), 6px)!important}}body.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.hud-sliding-out dialog.modal-dialog{padding-bottom:max(calc(var(--modal-bottom-offset,0px) + 8px), calc(var(--safe-area-inset-bottom,0px) + 8px), 16px)!important}body.ad-bot.hud-hidden:not(.hud-sliding-in) dialog.modal-dialog,body.ad-bot.hud-sliding-out dialog.modal-dialog{padding-bottom:max(calc(var(--modal-bottom-offset,60px) + 8px), calc(var(--ad-actual-height,60px) + 8px), 68px)!important}body.hud-hidden:not(.hud-sliding-in) .modal-panel,body.hud-sliding-out .modal-panel{max-height:calc(100% - 8px)!important}body.fullscreen-mode.cutout-present.hud-hidden:not(.hud-sliding-in) .modal-panel,body.fullscreen-modal-preview.cutout-present.hud-hidden:not(.hud-sliding-in) .modal-panel,body.fullscreen-mode.cutout-present.hud-sliding-out .modal-panel,body.fullscreen-modal-preview.cutout-present.hud-sliding-out .modal-panel,body.cutout-type-dynamic_island.hud-hidden:not(.hud-sliding-in) .modal-panel,body.cutout-type-dynamic_island.hud-sliding-out .modal-panel,body.ios-profile-dynamic_island.hud-hidden:not(.hud-sliding-in) .modal-panel,body.ios-profile-dynamic_island.hud-sliding-out .modal-panel,body.cutout-type-notch.hud-hidden:not(.hud-sliding-in) .modal-panel,body.cutout-type-notch.hud-sliding-out .modal-panel,body.ios-profile-notch.hud-hidden:not(.hud-sliding-in) .modal-panel,body.ios-profile-notch.hud-sliding-out .modal-panel{max-height:calc(100% - 8px)!important;margin-top:0!important}dialog.modal-dialog.bottom-sheet{align-items:center;padding:20px}dialog.modal-dialog.bottom-sheet .modal-panel{border-radius:var(--glass-radius,24px);box-sizing:border-box;border:1px solid #ffffff2e;width:100%;max-width:480px;margin:0 auto;padding:24px;transition:transform .35s cubic-bezier(.16,1,.3,1);animation:none;transform:translateY(40px)scale(.95);box-shadow:0 12px 40px #000000a6}dialog.modal-dialog.bottom-sheet[open] .modal-panel{transform:translateY(0)scale(1)}@starting-style{dialog.modal-dialog.bottom-sheet[open] .modal-panel{transform:translateY(40px)scale(.95)}}.feedback-header{text-align:center;margin-bottom:20px;padding-right:15px}.feedback-header h2{color:var(--accent)!important;margin:0 0 6px!important;font-size:1.25rem!important}.feedback-subtitle{color:var(--text-secondary)!important;margin:0!important;font-size:12px!important;line-height:1.4!important}.segmented-control{background:var(--glass-bg-light);border:var(--glass-border);border-radius:var(--radius-segmented,14px);box-sizing:border-box;margin-bottom:16px;padding:3px;display:flex}.segment{color:var(--text-secondary);border-radius:var(--radius-segment,11px);cursor:pointer;background:0 0;border:none;outline:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 4px;font-size:12px;font-weight:700;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.segment:hover{color:var(--text-primary);background:var(--glass-bg-hover)}.segment.active{background:var(--glass-bg-active);color:var(--accent);box-shadow:0 2px 8px #00000026}.feedback-input-email{background:var(--glass-bg-dark);border:var(--glass-border);border-radius:var(--radius-input,14px);width:100%;height:46px;color:var(--text-primary);box-sizing:border-box;outline:none;margin-bottom:12px;padding:0 14px;font-family:inherit;font-size:13.5px;transition:border-color .2s,box-shadow .2s}.feedback-input-email:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent)}.feedback-input-email::placeholder{color:var(--text-muted)}.feedback-textarea{background:var(--glass-bg-dark);border:var(--glass-border);border-radius:var(--radius-textarea,14px);width:100%;color:var(--text-primary);resize:none;box-sizing:border-box;outline:none;min-height:100px;max-height:240px;margin-bottom:16px;padding:14px;font-family:inherit;font-size:13.5px;line-height:1.5;transition:border-color .2s,box-shadow .2s;overflow-y:auto}.feedback-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent)}.feedback-textarea::placeholder{color:var(--text-muted)}.transparency-pill{background:color-mix(in srgb, var(--accent) 5%, #1565c014);border:1px solid color-mix(in srgb, var(--accent) 15%, #1565c026);border-radius:var(--radius-pill,14px);text-align:left;box-sizing:border-box;align-items:flex-start;gap:10px;margin-bottom:22px;padding:12px 14px;display:flex}.transparency-pill .info-icon{flex-shrink:0;justify-content:center;align-items:center;display:flex}.transparency-pill .info-icon svg{width:15px;height:15px;color:var(--accent);margin-top:1px}.transparency-pill .transparency-text{color:var(--text-secondary);font-size:11px;font-weight:500;line-height:1.45}.feedback-submit-btn{cursor:pointer;width:100%;box-shadow:0 4px 15px color-mix(in srgb, var(--accent) 25%, transparent);text-transform:none;letter-spacing:.2px;outline:none;justify-content:center;align-items:center;gap:8px;transition:transform .2s,filter .2s,box-shadow .2s;display:flex;background:var(--accent)!important;color:#000!important;border-radius:var(--radius-submit,14px)!important;border:none!important;padding:14px!important;font-size:14px!important;font-weight:800!important}.feedback-submit-btn:hover{filter:brightness(1.08);box-shadow:0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);transform:translateY(-1px)}.feedback-submit-btn:active{transform:translateY(1px)}.feedback-submit-btn:disabled,.feedback-submit-btn.loading{opacity:.65;cursor:not-allowed;pointer-events:none;animation:1.5s ease-in-out infinite feedback-btn-pulse;box-shadow:none!important;filter:none!important;transform:none!important}@keyframes feedback-btn-pulse{0%{opacity:.6}50%{opacity:.85}to{opacity:.6}}.feedback-submit-btn.loading .submit-icon{display:none!important}.scrollable-label{scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto}.scrollable-label::-webkit-scrollbar{display:none}@media (max-width:932px) and (orientation:landscape){.modal-panel h2,.feedback-header{display:none!important}}:where([popover]){box-shadow:none;background:0 0;border:none;margin:0;padding:0;overflow:visible}[popover]:not(:popover-open){display:none!important}.rating-prompt-card{bottom:calc(var(--hud-height,60px) + 16px + env(safe-area-inset-bottom,0px));z-index:5500;background:var(--glass-bg-dark,#191919bf);width:calc(100vw - 32px);max-width:360px;-webkit-backdrop-filter:var(--glass-blur,blur(18px) saturate(190%));border:var(--glass-border,.5px solid #fff2);border-radius:var(--glass-radius,24px);box-sizing:border-box;pointer-events:auto;-webkit-user-select:none;user-select:none;flex-direction:column;margin:0 auto;padding:16px 18px;display:flex;position:fixed;left:0;right:0;box-shadow:0 16px 40px #0009,inset 0 0 0 .5px #ffffff14}@media (max-width:600px){.rating-prompt-card{border-radius:var(--glass-radius,24px);width:calc(100vw - 24px);max-width:360px;margin:0 auto;left:0;right:0}}.rating-prompt-animate-in{animation:.28s cubic-bezier(.16,1,.3,1) forwards ratingPromptSlideIn}.rating-prompt-animate-out{animation:.22s cubic-bezier(.16,1,.3,1) forwards ratingPromptSlideOut}@keyframes ratingPromptSlideIn{0%{opacity:0;transform:translateY(20px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ratingPromptSlideOut{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(20px)scale(.96)}}.rating-prompt-content{flex-direction:column;gap:12px;width:100%;display:flex}.rating-prompt-header{justify-content:center;align-items:center;width:100%;display:flex;position:relative}.rating-prompt-stars-banner{background:#ffd60a1a;border:.5px solid #ffd60a4d;border-radius:16px;justify-content:center;align-items:center;gap:6px;padding:8px 16px;display:inline-flex}.rating-prompt-stars-banner svg{filter:drop-shadow(0 2px 8px #ffd60a8c);width:24px;height:24px;display:block}.rating-prompt-text{text-align:center;width:100%}.rating-prompt-title{color:var(--text-primary,#fff);letter-spacing:-.01em;font-size:16px;font-weight:700}.rating-prompt-subtitle{color:var(--text-secondary,#ebebf0);margin-top:4px;font-size:12.5px;line-height:1.45}.rating-prompt-close-btn{width:32px;min-width:32px;height:32px;min-height:32px;color:var(--text-tertiary,#a1a1a6);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;padding:0;transition:background .15s,color .15s,transform .15s;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.rating-prompt-close-btn:hover{color:var(--text-primary,#fff);background:#ffffff14}.rating-prompt-close-btn:active{transform:translateY(-50%)scale(.92)}.rating-prompt-actions{align-items:center;gap:8px;margin-top:4px;display:flex}.rating-btn{cursor:pointer;white-space:nowrap;border:none;border-radius:12px;justify-content:center;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;font-size:12px;font-weight:600;transition:transform .15s,background .15s,filter .15s;display:inline-flex}.rating-btn svg{flex-shrink:0;width:15px;height:15px;display:block}.rating-btn:active{transform:scale(.97)}.rating-btn-text{color:var(--text-muted,#d1d1d6);background:0 0;flex:.8}.rating-btn-text:hover{color:var(--text-primary,#fff);background:#ffffff0d}.rating-btn-secondary{color:var(--text-primary,#fff);background:#ffffff0f;border:.5px solid #ffffff24;flex:1.25}.rating-btn-secondary:hover{background:#ffffff1f}.rating-btn-primary{background:var(--accent,#1565c0);color:#fff;box-shadow:0 4px 14px color-mix(in srgb, var(--accent,#1565c0) 35%, transparent);flex:1.35}.rating-btn-primary:hover{background:color-mix(in srgb, var(--accent,#1565c0) 88%, white)}#btn-rate-modal .icon-svg{background-color:currentColor;transition:filter .2s,transform .2s}#btn-rate-modal:hover .icon-svg{filter:drop-shadow(0 0 6px #fff6)}.btn-action{border-radius:var(--radius-btn,12px);width:100%;color:var(--text-primary);font-size:var(--font-button);cursor:pointer;letter-spacing:var(--tracking-normal);white-space:normal;text-align:center;border:none;outline:none;justify-content:center;align-items:center;margin-top:5px;margin-bottom:12px;padding:12px;font-weight:600;line-height:1;transition:all .2s;display:flex}.btn-action.active{background:var(--accent);color:#000;border-color:#0000}#premium-actions{flex-flow:wrap;justify-content:center;align-items:center;gap:6px;width:100%;margin-top:12px;display:flex}.btn-premium{color:var(--text-primary);cursor:pointer;letter-spacing:.1px;background:var(--glass-bg-light);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);text-align:center;box-sizing:border-box;white-space:nowrap;flex:80px;justify-content:center;align-items:center;min-width:80px;font-weight:600;transition:all .2s;display:flex;overflow:hidden;border-radius:var(--radius-btn-premium,12px)!important;font-size:var(--font-small)!important;height:26px!important;min-height:26px!important;padding:4px 2px!important}.btn-premium:hover{background:var(--glass-bg-hover);transform:translateY(-1px)}.btn-premium:active{background:var(--glass-bg-active);transform:scale(.98)}.btn-icon{border-radius:var(--radius-btn-icon,12px);height:44px;color:var(--text-secondary);cursor:pointer;flex:1;justify-content:center;align-items:center;padding:8px 0;transition:all .2s;display:flex}.btn-icon.active{background:var(--accent);color:#000;box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);border-color:#0000}#btn-sustain-toggle svg{fill:currentColor;width:24px;height:24px}.btn-group{flex-wrap:wrap;justify-content:center;gap:6px;width:100%;display:flex}.icon-row{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px;display:flex}.row-btn-group{flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:20px;display:flex}.btn-wrapper{cursor:pointer;flex-direction:column;flex:none;align-items:center;gap:6px;width:56px;display:flex}.btn-label{font-size:var(--font-small);color:var(--text-muted);text-align:center;-webkit-line-clamp:2;word-wrap:break-word;-webkit-user-select:none;user-select:none;-webkit-box-orient:vertical;max-width:56px;font-weight:400;line-height:1;transition:color .2s;display:-webkit-box;overflow:hidden}.btn-wrapper:hover .btn-label{color:var(--text-secondary)}.btn-square.active+.btn-label{color:var(--text-primary);font-weight:600}.btn-wrapper:has(.btn-square.active) .btn-label{color:var(--text-primary);font-weight:600}.btn-option{background:var(--glass-bg-light);border:var(--glass-border);border-radius:var(--radius-btn-option,8px);color:var(--text-secondary);cursor:pointer;text-align:center;flex:1;padding:10px;font-size:12px;font-weight:600;transition:all .2s}.btn-option:hover{background:var(--glass-bg-hover)}.btn-option.active{background:var(--accent);color:#000;border-color:#0000}.btn-square{aspect-ratio:1;background:var(--glass-bg-light);border:var(--glass-border);border-radius:var(--radius-btn-square,14px);width:56px;height:56px;color:var(--text-primary);cursor:pointer;white-space:nowrap;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:6px;font-size:14px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:inset 0 1px 1px #ffffff1a,0 4px 10px #00000026}.btn-square-text{justify-content:center;align-items:center;font-size:20px;font-weight:500;line-height:1;display:flex}.btn-square-text:not(:empty){font-size:clamp(12px,4.5vw,20px)}.btn-square:hover{background:var(--glass-bg-hover);transform:translateY(-2px);box-shadow:inset 0 1px 1px #ffffff26,0 8px 16px #0003}.btn-square:active{background:var(--glass-bg-active);transform:scale(.95)}.btn-square.active{background:var(--accent);color:#000;box-shadow:0 0 20px color-mix(in srgb, var(--accent) 40%, transparent);border-color:#0000}.btn-square svg{fill:currentColor;opacity:.9;width:34px;height:34px}.btn-square.num-btn{gap:0;padding:0;font-size:32px;font-weight:800}.btn-close{background:var(--accent);border-radius:var(--radius-btn,12px);color:#000;cursor:pointer;z-index:10;border:none;width:fit-content;margin:10px auto 0;padding:12px 25px;font-size:14px;font-weight:700;transition:transform .15s,opacity .15s,box-shadow .15s;display:block;box-shadow:0 4px 15px #00000040;min-width:0!important}.btn-close:active{transform:scale(.96)}.btn-modal-done{background:var(--accent);color:#000;border-radius:var(--radius-btn,12px);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;box-sizing:border-box;border:none;justify-content:center;align-items:center;min-width:88px;height:32px;padding:0 16px;font-size:12.5px;font-weight:600;transition:transform .15s,opacity .15s,box-shadow .15s;display:inline-flex;box-shadow:0 2px 8px #0003}.btn-modal-done:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 4px 12px #00000040}.btn-modal-done:active{transform:scale(.96);box-shadow:0 1px 4px #00000026}.btn-modal-cancel{background:var(--glass-bg-light);min-width:80px;height:32px;color:var(--text-primary);border:var(--glass-border);border-radius:var(--radius-btn,12px);cursor:pointer;-webkit-backdrop-filter:var(--glass-blur);-webkit-user-select:none;user-select:none;touch-action:manipulation;box-sizing:border-box;justify-content:center;align-items:center;padding:0 14px;font-size:12.5px;font-weight:600;transition:transform .15s,background .15s;display:inline-flex}.btn-modal-cancel:hover{background:var(--glass-bg-hover);transform:translateY(-1px)}.btn-modal-cancel:active{background:var(--glass-bg-active);transform:scale(.96)}.btn-modal-confirm{color:#fff;border-radius:var(--radius-btn,12px);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;box-sizing:border-box;background:#ff3b30;border:none;justify-content:center;align-items:center;min-width:80px;height:32px;padding:0 14px;font-size:12.5px;font-weight:600;transition:transform .15s,opacity .15s;display:inline-flex;box-shadow:0 2px 8px #ff3b304d}.btn-modal-confirm:hover{opacity:.92;transform:translateY(-1px)}.btn-modal-confirm:active{transform:scale(.96)}.btn-close-minimal{color:var(--text-primary);cursor:pointer;z-index:100;opacity:.6;transition:all var(--transition-normal);background:0 0;border:none;font-size:24px;position:absolute;top:15px;right:15px}.btn-close-minimal:hover{opacity:1;transform:scale(1.1)}body.hide-x-buttons .btn-close-minimal{display:none!important}@media (min-width:1024px){.btn-action{border-radius:var(--radius-btn,12px)!important;min-height:40px!important;margin:0!important;padding:12px 16px!important}}@media (orientation:landscape){.btn-close{margin-top:8px!important;padding:8px 20px!important;font-size:12px!important}}#btn-remove-ads{color:#fff;border-radius:var(--radius-btn-remove-ads,12px);background:linear-gradient(135deg,#ff9f0a 0%,#ff375f 100%);border:none;padding:12px 20px;font-size:14px;font-weight:700;box-shadow:0 4px 15px #ff375f66}#btn-pattern-editor,#btn-open-sf-picker,#btn-scale-overlay-trigger,#btn-sounds-center-velocity,#btn-sfx-center-velocity,#scale-select-container .dropdown-trigger,#settings-instrument-grid .instrument-row-btn.locked,#btn-midi-io{position:relative!important}body:not(.midi-io-free) #btn-midi-io:after,#btn-pattern-editor:after,#btn-open-sf-picker:after,#btn-scale-overlay-trigger:after,#btn-sounds-center-velocity:after,#btn-sfx-center-velocity:after,body:not(.ad-free) #scale-select-container .dropdown-trigger:after,#settings-instrument-grid .instrument-row-btn.locked:after{content:"PRO";color:#000;z-index:5;letter-spacing:.5px;pointer-events:none;background:linear-gradient(135deg,#ffb000,#ff7a00);border:.5px solid #ffffff26;font-weight:900;line-height:1;position:absolute;box-shadow:0 1px 3px #0006}#btn-midi-io:after{border-radius:4px;padding:2px 3.5px;font-size:7px;top:-3px;right:-3px}#btn-pattern-editor:after,#btn-scale-overlay-trigger:after,#btn-sounds-center-velocity:after,#btn-sfx-center-velocity:after{border-radius:3px;padding:1.5px 3px;font-size:6px;top:-4px;right:-4px}#btn-open-sf-picker:after{border-radius:4px;padding:2px 5px;font-size:7.5px;top:-4px;right:8px}#scale-select-container .dropdown-trigger:after{border-radius:4px;padding:2px 4px;font-size:7px;top:50%;right:28px;transform:translateY(-50%)}#settings-instrument-grid .instrument-row-btn.locked:after{border-radius:4px;padding:2px 4px;font-size:7px;top:50%;right:42px;transform:translateY(-50%)}body.ad-free #btn-pattern-editor:after,body.ad-free #btn-open-sf-picker:after,body.ad-free #btn-scale-overlay-trigger:after,body.ad-free #btn-sounds-center-velocity:after,body.ad-free #btn-sfx-center-velocity:after,body.ad-free #scale-select-container .dropdown-trigger:after,body.ad-free #badge-scale-pro,body.ad-free .pro-badge,body.ad-free #settings-instrument-grid .instrument-row-btn.locked:after,body.ad-free:not(.midi-io-free) #btn-midi-io:after{display:none!important}#btn-buy-premium{border:1.5px solid var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb, var(--accent) 10%, #ffffff05)!important;font-weight:700!important}#btn-rewarded-ad{color:#ff9f0a!important;background:#ffad2f1e!important;border:1.5px solid #ff9f0a!important;font-weight:700!important}:root[data-theme=light] #btn-buy-premium{background:color-mix(in srgb, var(--accent) 8%, #fff)!important}:root[data-theme=light] #btn-rewarded-ad{color:#d44000!important;background:#fcf0eb!important;border-color:#d44000!important}body.lite-engine-active #btn-buy-premium,body.lite-engine-active #btn-rewarded-ad{background:#1c1c1e!important}:root[data-theme=light] body.lite-engine-active #btn-buy-premium,:root[data-theme=light] body.lite-engine-active #btn-rewarded-ad{background:#fff!important}.switch-container{padding:var(--spacing-xs) 0;justify-content:space-between;align-items:center;display:flex}.switch{width:40px;height:22px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;transition:var(--transition-normal);background-color:#ffffff1a;border:1px solid #ffffff1a;border-radius:20px;position:absolute;inset:0}.slider:before{content:"";width:16px;height:16px;transition:var(--transition-normal);background-color:#ccc;border-radius:50%;position:absolute;bottom:2px;left:2px}input:checked+.slider{background-color:var(--accent);border-color:var(--accent)}input:checked+.slider:before{background-color:#fff;transform:translate(18px)}.switch-label{font-size:var(--font-label);color:var(--text-secondary);font-weight:600}.startup-toggle{cursor:pointer;opacity:.5;white-space:normal;align-items:center;gap:8px;max-width:120px;font-size:11px;line-height:1.25;display:inline-flex;position:absolute}.startup-toggle input[type=checkbox]{cursor:pointer;flex-shrink:0;width:14px;height:14px;margin:0}@media (max-width:480px){.startup-toggle{max-width:85px}}input[type=range]{-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;width:100%;margin-top:-4px;margin-bottom:10px;padding:8px 0;display:block}input[type=range]:focus-visible{outline:2px solid var(--accent)!important;outline-offset:4px!important;border-radius:4px!important}input[type=range]::-webkit-slider-runnable-track{background:#fff3;border-radius:2px;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);width:24px;height:14px;transition:background var(--transition-fast), transform .1s ease;cursor:ew-resize;border:none;border-radius:7px;margin-top:-5px;box-shadow:0 2px 5px #00000080}input[type=range]::-webkit-slider-thumb:hover{background:var(--text-primary);transform:scale(1.1)}input[type=range]::-webkit-slider-thumb:active{background:var(--text-primary);transform:scale(1.25)}input[type=range]::-moz-range-track{background:#fff3;border:none;border-radius:2px;width:100%;height:4px}input[type=range]::-moz-range-thumb{background:var(--accent);width:24px;height:14px;transition:background var(--transition-fast), transform .1s ease;cursor:ew-resize;border:none;border-radius:7px;box-shadow:0 2px 5px #00000080}input[type=range]::-moz-range-thumb:hover{background:var(--text-primary);transform:scale(1.1)}input[type=range]::-moz-range-thumb:active{background:var(--text-primary);transform:scale(1.25)}.custom-dropdown{width:100%;margin-bottom:var(--spacing-xs);-webkit-user-select:none;user-select:none;position:relative}.custom-dropdown.open{z-index:100000}.dropdown-trigger{background:var(--glass-bg-light);border:var(--glass-border);color:var(--text-primary);cursor:pointer;min-height:40px;font-size:var(--font-input);transition:all var(--transition-normal);border-radius:12px;justify-content:space-between;align-items:center;padding:10px 14px;font-weight:600;display:flex}.dropdown-trigger:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px!important}.dropdown-arrow{opacity:.6;transition:transform var(--transition-normal) var(--ease-elastic);pointer-events:none;font-size:14px}.custom-dropdown.open .dropdown-trigger{border-color:var(--accent)}.custom-dropdown.open .dropdown-arrow{transform:rotate(180deg)}.dropdown-options{background:var(--glass-bg-dark);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);border-radius:var(--glass-radius,24px);box-shadow:var(--glass-shadow);z-index:1000;max-height:400px;padding:8px;display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;overflow-y:auto}.dropdown-options.open{display:block}.dropdown-option{cursor:pointer;font-size:var(--font-input);transition:all var(--transition-fast);color:var(--text-secondary);border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:2px;padding:10px 12px;display:flex}.dropdown-option:hover,.dropdown-option.focused{background:var(--glass-bg-hover);color:var(--text-primary)}.dropdown-option.selected{font-weight:700;background:var(--accent)!important;color:#000!important}.dropdown-group{border-radius:8px;margin-bottom:8px;overflow:hidden}.dropdown-group-header{background:var(--glass-bg-light);color:var(--text-primary);font-size:var(--font-input);cursor:pointer;transition:all var(--transition-normal);border-radius:8px;justify-content:space-between;align-items:center;padding:8px 12px;font-weight:700;display:flex}.dropdown-group-header:hover{background:var(--glass-bg-hover)}.dropdown-group.expanded .dropdown-group-header{background:var(--glass-bg-hover);margin-bottom:4px}.dropdown-group-content{opacity:0;max-height:0;transition:all var(--transition-normal);overflow:hidden}.dropdown-group.expanded .dropdown-group-content{opacity:1;max-height:2000px;padding-top:4px;padding-bottom:8px}.dropdown-option.locked{opacity:.5}.dropdown-lock-icon{width:14px;height:14px;color:inherit;fill:currentColor;vertical-align:middle;flex-shrink:0;margin-left:auto;display:inline-block}@media (min-width:1024px){.dropdown-trigger{border-radius:16px!important;min-height:56px!important;padding:16px 20px!important}.dropdown-options{max-height:550px;padding:12px!important}.dropdown-option,.dropdown-group-header{border-radius:12px!important;padding:14px 18px!important}}.modal-panel select,.modal-overlay select{text-align:center!important;text-align-last:center!important}.label:has(+select){text-align:center!important;width:100%!important;display:block!important}label:has(+select){text-align:center!important;width:100%!important;display:block!important}:root[data-theme=light] .slider{background-color:#00000014!important;border:1px solid #00000040!important}:root[data-theme=light] .slider:before{background-color:#4c4c50!important}:root[data-theme=light] input:checked+.slider{background-color:var(--accent)!important;border-color:var(--accent)!important}:root[data-theme=light] input:checked+.slider:before{background-color:#fff!important}:root[data-theme=light] input[type=range]::-webkit-slider-runnable-track{background:#00000040!important}:root[data-theme=light] input[type=range]::-moz-range-track{background:#00000040!important}:root[data-theme=light] input[type=range]::-webkit-slider-thumb{border:none!important}:root[data-theme=light] input[type=range]::-moz-range-thumb{border:none!important}:root[data-theme=light] .startup-toggle{opacity:.85!important;color:var(--text-primary)!important}#ad-desktop-top,#ad-mobile-bottom{display:none;box-sizing:border-box!important;z-index:9999!important;background:var(--board-bg)!important;justify-content:center!important;width:100vw!important;position:fixed!important;left:0!important;overflow:hidden!important}#ad-desktop-top{border-bottom:var(--glass-border)!important;height:var(--ad-actual-height)!important;align-items:center!important;top:0!important}#ad-mobile-bottom{border-top:var(--glass-border)!important;height:var(--safe-area-inset-bottom)!important;align-items:flex-start!important;bottom:0!important}#ad-desktop-top:empty,#ad-mobile-bottom:empty,body:not(.ad-top) #ad-desktop-top,body:not(.ad-bot) #ad-mobile-bottom,body.ad-free #ad-desktop-top,body.ad-free #ad-mobile-bottom{border:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;display:none!important}@keyframes adShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}#startup-promo-banner{width:100%;height:var(--ad-actual-height);padding:0 var(--spacing-s);-webkit-backdrop-filter:blur(25px)saturate(250%);backdrop-filter:blur(25px)saturate(250%);font-family:var(--font-primary);background:#14141480;border-top:1px solid #fff3;border-radius:0;justify-content:space-between;align-items:center;display:none;position:relative;overflow:hidden;box-shadow:inset 0 0 40px #ff375f26,0 4px 20px #0006}#startup-promo-banner:after{content:"";background:linear-gradient(90deg,#ff9f0a,#ff375f,#ff9f0a) 0 0/200% 100%;height:2px;animation:3s linear infinite flowGradient;position:absolute;bottom:0;left:0;right:0}@keyframes flowGradient{0%{background-position:100% 0}to{background-position:-100% 0}}.promo-brand{align-items:center;gap:var(--spacing-xs);min-width:120px;display:flex}.promo-title{font-size:var(--font-small);color:#fff;letter-spacing:.5px;text-transform:uppercase;font-weight:900}.promo-title span{color:var(--accent)}.pulse-promo-icon{color:#000;background:linear-gradient(135deg,#ffd60a 0%,#ff9f0a 100%);border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:4px;font-size:18px;font-weight:700;animation:2s ease-in-out infinite pulseIcon;display:flex;box-shadow:0 0 20px #ff9f0a99}.pulse-promo-icon img{object-fit:contain;width:100%;height:100%}#promo-marketing-hit{height:100%;padding:0 var(--spacing-m);margin:0 var(--spacing-s);cursor:pointer;border-left:1px solid #ffffff1a;border-right:1px solid #ffffff1a;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.promo-benefit-viewport{width:100%;height:18px;position:relative;overflow:hidden}.promo-benefit-track{flex-direction:column;animation:12s cubic-bezier(.85,0,.15,1) infinite benefitCarousel;display:flex}.promo-benefit-slide{color:#ffd60a;white-space:nowrap;text-align:center;text-shadow:0 0 10px #ffd60a4d;justify-content:center;align-items:center;height:18px;font-size:12px;font-weight:800;display:flex}.promo-subtitle{color:#fff9;letter-spacing:.2px;margin-top:2px;font-size:9px;font-weight:600}.promo-actions{gap:var(--spacing-xs);align-items:center;display:flex}.btn-promo-primary,.btn-promo-secondary{letter-spacing:.5px;white-space:nowrap;transition:transform var(--transition-fast);border-radius:8px;padding:6px 12px;font-size:10px;font-weight:800}.btn-promo-primary{color:#fff!important;background:linear-gradient(135deg,#ff9f0a 0%,#ff375f 100%)!important;border:none!important;box-shadow:0 4px 15px #ff375f66!important}.btn-promo-secondary{color:#fff!important;background:#ffffff14!important;border:1px solid #fff3!important}.btn-promo-primary:active,.btn-promo-secondary:active{transform:scale(.95)}.promo-close{color:#fff6;cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;margin-left:4px;padding:4px;font-size:16px}.promo-close:hover{color:#fff}@keyframes benefitCarousel{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-18px)}50%,70%{transform:translateY(-36px)}75%,95%{transform:translateY(-54px)}to{transform:translateY(-72px)}}@media (max-width:600px){.promo-brand{display:none}#promo-marketing-hit{padding:0 var(--spacing-xs)!important;margin:0 var(--spacing-xs)!important;border-left:none!important;border-right:none!important;flex:0 0 95px!important;max-width:95px!important}.promo-benefit-slide{font-size:9px!important}.promo-subtitle{display:none}.promo-actions{gap:4px!important}.btn-promo-primary,.btn-promo-secondary{padding:6px 8px!important;font-size:9px!important}}#piano-container{background-color:var(--safe-area-bg);touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;flex:1;min-height:0;position:relative;overflow:hidden}#hud-chord-detector{font-family:var(--font-primary,sans-serif);color:var(--text-primary);background:var(--glass-bg-dark);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:var(--glass-border);z-index:120;pointer-events:none;opacity:0;letter-spacing:.03em;border-radius:14px;padding:4px 14px;font-size:13px;font-weight:700;transition:opacity .2s,transform .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.95);box-shadow:0 2px 10px #0006}#hud-chord-detector.active{opacity:1;transform:translate(-50%,-50%)scale(1)}#piano-container canvas{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block;position:absolute;top:0;left:0}#pianoCanvas{background-color:var(--board-bg);box-shadow:var(--glass-shadow);z-index:5}#activeCanvas{z-index:10;background-color:#0000}.board-crossfade-overlay{z-index:8;pointer-events:none;will-change:opacity;width:100%;height:100%;position:absolute;top:0;left:0;transform:translateZ(0)}canvas{display:block}#minimap-bar{z-index:1000;isolation:isolate;width:100%;height:auto;min-height:48px;padding-top:calc(max(var(--safe-area-inset-top,0px), env(safe-area-inset-top,0px)) + 8px);padding-bottom:8px;padding-left:max(env(safe-area-inset-left,0px), var(--cutout-left-offset,0px), var(--corner-safe-inset,16px));padding-right:max(env(safe-area-inset-right,0px), var(--cutout-right-offset,0px), var(--corner-safe-inset,16px));box-sizing:border-box;background:var(--hud-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:var(--glass-border);color:var(--hud-text);pointer-events:auto;border-top:none;justify-content:space-between;align-items:center;gap:0;margin:0;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;display:flex;position:relative}body.fullscreen-mode #minimap-bar{padding-top:8px}body:not(.fullscreen-mode) #minimap-bar,body.has-status-bar #minimap-bar{padding-left:max(env(safe-area-inset-left,0px), var(--corner-safe-inset,16px));padding-right:max(env(safe-area-inset-right,0px), var(--corner-safe-inset,16px))}:root[data-theme=light] #minimap-bar{border-top:none}@media (orientation:portrait){#minimap-bar{padding-left:max(env(safe-area-inset-left,0px), var(--cutout-left-offset,0px), var(--corner-safe-inset,12px));padding-right:max(env(safe-area-inset-right,0px), var(--cutout-right-offset,0px), var(--corner-safe-inset,12px))}body:not(.fullscreen-mode) #minimap-bar,body.has-status-bar #minimap-bar{padding-left:max(env(safe-area-inset-left,0px), var(--corner-safe-inset,12px));padding-right:max(env(safe-area-inset-right,0px), var(--corner-safe-inset,12px))}}@media (orientation:landscape){#minimap-bar{padding-top:max(var(--safe-area-inset-top,0px), env(safe-area-inset-top,0px));padding-bottom:0;padding-left:max(env(safe-area-inset-left,0px), var(--cutout-left-offset,0px), var(--corner-safe-inset,16px));padding-right:max(env(safe-area-inset-right,0px), var(--cutout-right-offset,0px), var(--corner-safe-inset,16px))}body.fullscreen-mode #minimap-bar{padding-top:0;padding-bottom:0}body.platform-android.fullscreen-mode #minimap-bar{padding-top:0;padding-bottom:0;padding-left:max(env(safe-area-inset-left,0px), var(--cutout-left-offset,0px), var(--corner-safe-inset,16px));padding-right:max(env(safe-area-inset-right,0px), var(--cutout-right-offset,0px), var(--corner-safe-inset,16px))}}body.fullscreen-closing #minimap-bar{padding-top:calc(var(--safe-area-inset-top,0px) + 8px)}@media (orientation:landscape){body.fullscreen-closing #minimap-bar{padding-top:var(--safe-area-inset-top,0px);padding-bottom:0}}.minimap-slot{pointer-events:auto;z-index:1001;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.minimap-btn{color:var(--hud-text);fill:var(--hud-text);cursor:pointer;touch-action:manipulation;pointer-events:auto;z-index:1001;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;transition:background .15s,transform .15s,color .15s;display:flex;position:relative}.minimap-btn:hover{background:var(--glass-bg-hover)}.minimap-btn svg{fill:var(--hud-text)}.minimap-btn.active{background:var(--accent);color:#fff}.minimap-btn.active svg{fill:#fff}.minimap-btn:active{background:var(--glass-bg-active);transform:scale(.92)}#hud-record-btn svg circle{fill:#ff3b30}#hud-record-btn.recording{animation:2s ease-in-out infinite recordPulse}#hud-record-btn.recording svg,#hud-record-btn.recording svg *{fill:#ff3b30}#minimap-container{background:var(--minimap-bg);border:var(--glass-border);cursor:pointer;border-radius:6px;flex:1;justify-content:center;align-items:center;height:40px;margin:0;padding:0 12px;display:flex;position:relative;overflow:visible}#minimap-canvas,#minimap-seekbar-canvas{border-radius:inherit;width:100%;height:100%;display:block;position:absolute;top:0;left:0}#minimap-canvas{opacity:1;z-index:10;border-bottom:1px solid #ffffff1a}#minimap-seekbar-canvas{z-index:210;pointer-events:none}#minimap-seekbar-hit{z-index:220;pointer-events:none;cursor:ew-resize;touch-action:none;width:32px;height:100%;margin-left:-16px;display:none;position:absolute;top:0}#minimap-seekbar-hit.active{pointer-events:auto;display:block}#minimap-thumb{border:2px solid var(--accent);box-sizing:border-box;pointer-events:none;z-index:100;background:0 0;border-radius:0;height:100%;transition:none;position:absolute;top:0;left:0;transform:translate(0)}.sustain-active #minimap-thumb{background:0 0;border-width:3px}#playback-time-display>div{color:var(--hud-text);text-shadow:0 1px 4px #0003;justify-content:space-between;align-items:center;font-family:Roboto,monospace;font-size:14px;display:flex}@media (orientation:portrait) and (max-width:600px){#minimap-bar{flex-wrap:wrap;height:auto;padding-left:max(env(safe-area-inset-left,0px), var(--corner-safe-inset,12px))!important;padding-right:max(env(safe-area-inset-right,0px), var(--corner-safe-inset,12px))!important}#minimap-slot-left,#minimap-slot-right{order:1}#minimap-slot-right{justify-content:flex-end}#minimap-container{background:var(--minimap-bg);border:var(--glass-border);flex:none;order:2;width:100%;height:40px;margin:4px 0;padding:0 12px}.cutout-pos-corner-left #minimap-bar,.cutout-pos-corner-right #minimap-bar{padding-left:max(env(safe-area-inset-left,0px), var(--corner-safe-inset,12px))!important;padding-right:max(env(safe-area-inset-right,0px), var(--corner-safe-inset,12px))!important;justify-content:center!important;gap:0!important}.cutout-pos-corner-left #minimap-slot-left,.cutout-pos-corner-right #minimap-slot-left,.cutout-pos-corner-left #minimap-slot-right,.cutout-pos-corner-right #minimap-slot-right{gap:0!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}.cutout-pos-corner-left #minimap-container,.cutout-pos-corner-right #minimap-container{width:100%!important;margin-left:0!important;margin-right:0!important}}@media (min-width:1024px){.minimap-btn svg,.minimap-btn img,#hud-btn-icon{width:32px!important;height:32px!important}}#playback-time-display{z-index:50;pointer-events:none;padding:0 15px;position:absolute;bottom:10px;left:0;right:0}#playback-time-display>div{color:var(--hud-text);justify-content:space-between;align-items:center;font-family:Roboto Mono,monospace;font-size:14px;font-weight:500;display:flex}#playback-current-time,#playback-total-time{text-align:center;background:#0000004d;border-radius:4px;min-width:45px;padding:4px 8px}:root[data-theme=light] #playback-current-time,:root[data-theme=light] #playback-total-time{background:#ffffffbf}@media (orientation:portrait) and (max-width:600px){body.cutout-type-dynamic_island.fullscreen-mode #minimap-bar,body.cutout-type-dynamic_island-narrow.fullscreen-mode #minimap-bar,body.cutout-type-dynamic_island-short.fullscreen-mode #minimap-bar,body.ios-profile-dynamic_island.fullscreen-mode #minimap-bar,body.ios-profile-dynamic_island-narrow.fullscreen-mode #minimap-bar,body.ios-profile-dynamic_island-short.fullscreen-mode #minimap-bar{grid-template:"record play.tempo sfx""instrument minimap minimap minimap settings"/auto auto 1fr auto auto;place-items:center;gap:4px 0;padding-left:max(env(safe-area-inset-left,0px), var(--corner-safe-inset,16px))!important;padding-right:max(env(safe-area-inset-right,0px), var(--corner-safe-inset,16px))!important;display:grid!important}body.cutout-type-notch-narrow.fullscreen-mode #minimap-bar{grid-template:"record play.tempo sfx""instrument minimap minimap minimap settings"/auto auto 1fr auto auto;place-items:center;gap:4px 0;padding-top:0!important;padding-bottom:0!important;padding-left:max(env(safe-area-inset-left,0px), var(--corner-safe-inset,16px))!important;padding-right:max(env(safe-area-inset-right,0px), var(--corner-safe-inset,16px))!important;display:grid!important}body.cutout-type-notch-wide.fullscreen-mode #minimap-bar,body.cutout-type-notch:not(.cutout-type-notch-narrow).fullscreen-mode #minimap-bar,body.ios-profile-notch:not(.cutout-type-notch-narrow).fullscreen-mode #minimap-bar,body.cutout-type-notch.fullscreen-mode #minimap-bar,body.ios-profile-notch.fullscreen-mode #minimap-bar{grid-template:"instrument. . .settings""record play minimap tempo sfx"/auto auto 1fr auto auto;place-items:center;gap:4px 0;padding-top:0!important;padding-bottom:0!important;padding-left:max(env(safe-area-inset-left,0px), var(--corner-safe-inset,16px))!important;padding-right:max(env(safe-area-inset-right,0px), var(--corner-safe-inset,16px))!important;display:grid!important}body.cutout-type-notch.fullscreen-mode #minimap-slot-left,body.cutout-type-notch.fullscreen-mode #minimap-slot-right,body.cutout-type-dynamic_island.fullscreen-mode #minimap-slot-left,body.cutout-type-dynamic_island.fullscreen-mode #minimap-slot-right,body.ios-profile-notch.fullscreen-mode #minimap-slot-left,body.ios-profile-notch.fullscreen-mode #minimap-slot-right,body.ios-profile-dynamic_island.fullscreen-mode #minimap-slot-left,body.ios-profile-dynamic_island.fullscreen-mode #minimap-slot-right{display:contents!important}body.cutout-type-dynamic_island.fullscreen-mode #hud-record-btn,body.ios-profile-dynamic_island.fullscreen-mode #hud-record-btn,body.cutout-type-notch-narrow.fullscreen-mode #hud-record-btn{grid-area:record}body.cutout-type-dynamic_island.fullscreen-mode #btn-playback,body.ios-profile-dynamic_island.fullscreen-mode #btn-playback,body.cutout-type-notch-narrow.fullscreen-mode #btn-playback{grid-area:play}body.cutout-type-dynamic_island.fullscreen-mode #metronome-wrapper,body.ios-profile-dynamic_island.fullscreen-mode #metronome-wrapper,body.cutout-type-notch-narrow.fullscreen-mode #metronome-wrapper{grid-area:tempo}body.cutout-type-dynamic_island.fullscreen-mode #sfx-wrapper,body.ios-profile-dynamic_island.fullscreen-mode #sfx-wrapper,body.cutout-type-notch-narrow.fullscreen-mode #sfx-wrapper{grid-area:sfx}body.cutout-type-dynamic_island.fullscreen-mode #hud-inst-btn,body.ios-profile-dynamic_island.fullscreen-mode #hud-inst-btn,body.cutout-type-notch-narrow.fullscreen-mode #hud-inst-btn{grid-area:instrument}body.cutout-type-dynamic_island.fullscreen-mode #minimap-container,body.ios-profile-dynamic_island.fullscreen-mode #minimap-container,body.cutout-type-notch-narrow.fullscreen-mode #minimap-container{box-sizing:border-box;grid-area:minimap;width:100%!important;margin:4px 0!important}body.cutout-type-dynamic_island.fullscreen-mode #btn-open-settings,body.ios-profile-dynamic_island.fullscreen-mode #btn-open-settings,body.cutout-type-notch-narrow.fullscreen-mode #btn-open-settings{grid-area:settings}body.cutout-type-notch:not(.cutout-type-notch-narrow).fullscreen-mode #hud-inst-btn,body.ios-profile-notch:not(.cutout-type-notch-narrow).fullscreen-mode #hud-inst-btn{grid-area:instrument}body.cutout-type-notch:not(.cutout-type-notch-narrow).fullscreen-mode #btn-open-settings,body.ios-profile-notch:not(.cutout-type-notch-narrow).fullscreen-mode #btn-open-settings{grid-area:settings}body.cutout-type-notch:not(.cutout-type-notch-narrow).fullscreen-mode #hud-record-btn,body.ios-profile-notch:not(.cutout-type-notch-narrow).fullscreen-mode #hud-record-btn{grid-area:record}body.cutout-type-notch:not(.cutout-type-notch-narrow).fullscreen-mode #btn-playback,body.ios-profile-notch:not(.cutout-type-notch-narrow).fullscreen-mode #btn-playback{grid-area:play}body.cutout-type-notch:not(.cutout-type-notch-narrow).fullscreen-mode #minimap-container,body.ios-profile-notch:not(.cutout-type-notch-narrow).fullscreen-mode #minimap-container{box-sizing:border-box;grid-area:minimap;height:38px;width:100%!important;margin:2px 4px!important}body.cutout-type-notch:not(.cutout-type-notch-narrow).fullscreen-mode #metronome-wrapper,body.ios-profile-notch:not(.cutout-type-notch-narrow).fullscreen-mode #metronome-wrapper{grid-area:tempo}body.cutout-type-notch:not(.cutout-type-notch-narrow).fullscreen-mode #sfx-wrapper,body.ios-profile-notch:not(.cutout-type-notch-narrow).fullscreen-mode #sfx-wrapper{grid-area:sfx}@media (min-width:414px){body.cutout-type-notch-wide.fullscreen-mode #minimap-bar,body.cutout-type-notch:not(.cutout-type-notch-narrow).fullscreen-mode #minimap-bar,body.ios-profile-notch:not(.cutout-type-notch-narrow).fullscreen-mode #minimap-bar,body.cutout-type-notch.fullscreen-mode #minimap-bar,body.ios-profile-notch.fullscreen-mode #minimap-bar{grid-template-columns:auto auto 1fr auto auto;grid-template-areas:"record play.tempo sfx""instrument minimap minimap minimap settings";padding-top:0!important;padding-bottom:0!important;padding-left:max(env(safe-area-inset-left,0px), var(--corner-safe-inset,16px))!important;padding-right:max(env(safe-area-inset-right,0px), var(--corner-safe-inset,16px))!important}body.cutout-type-notch-wide.fullscreen-mode #minimap-container,body.cutout-type-notch:not(.cutout-type-notch-narrow).fullscreen-mode #minimap-container,body.ios-profile-notch:not(.cutout-type-notch-narrow).fullscreen-mode #minimap-container{box-sizing:border-box;grid-area:minimap;width:100%!important;margin:4px 0!important}}@media (min-width:428px){body.cutout-type-dynamic_island.fullscreen-mode #minimap-bar,body.cutout-type-dynamic_island-narrow.fullscreen-mode #minimap-bar,body.cutout-type-dynamic_island-short.fullscreen-mode #minimap-bar,body.ios-profile-dynamic_island.fullscreen-mode #minimap-bar,body.ios-profile-dynamic_island-narrow.fullscreen-mode #minimap-bar,body.ios-profile-dynamic_island-short.fullscreen-mode #minimap-bar{grid-template-columns:auto auto auto 1fr auto auto auto;grid-template-areas:"instrument record play.tempo sfx settings""minimap minimap minimap minimap minimap minimap minimap";padding-left:max(env(safe-area-inset-left,0px), var(--corner-safe-inset,20px))!important;padding-right:max(env(safe-area-inset-right,0px), var(--corner-safe-inset,20px))!important}body.cutout-type-dynamic_island.fullscreen-mode #minimap-container,body.cutout-type-dynamic_island-narrow.fullscreen-mode #minimap-container,body.cutout-type-dynamic_island-short.fullscreen-mode #minimap-container,body.ios-profile-dynamic_island.fullscreen-mode #minimap-container,body.ios-profile-dynamic_island-narrow.fullscreen-mode #minimap-container,body.ios-profile-dynamic_island-short.fullscreen-mode #minimap-container{grid-area:minimap/1/minimap/-1;width:100%!important;margin:4px 0!important}}}#dev-cutout-overlay{pointer-events:none;z-index:999999;justify-content:center;transition:opacity .2s;display:flex;position:fixed;top:0;left:0;right:0}.floating-settings-btn{top:max(calc(max(var(--safe-area-inset-top,0px), env(safe-area-inset-top,0px)) + 8px), 11px);right:max(calc(env(safe-area-inset-right,0px) + var(--cutout-right-offset,0px) + 12px), var(--corner-safe-inset,16px));border-radius:var(--radius-btn,12px);background:var(--glass-bg-dark);width:48px;height:48px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:var(--glass-border);z-index:2000;cursor:pointer;color:var(--text-primary);touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;padding:0;transition:transform .15s,background .15s;display:none;position:fixed;box-shadow:0 4px 16px #00000059}.floating-settings-btn .icon-svg{width:24px!important;height:24px!important}.floating-settings-btn:before{content:"";position:absolute;inset:-6px}@media (orientation:portrait){body.fullscreen-mode.hud-hidden .floating-settings-btn,body.fullscreen-mode.hud-sliding-out .floating-settings-btn,body.fullscreen-mode.hud-sliding-in .floating-settings-btn{top:8px!important}body.fullscreen-mode.cutout-type-dynamic_island.hud-hidden .floating-settings-btn,body.fullscreen-mode.cutout-type-dynamic_island.hud-sliding-out .floating-settings-btn,body.fullscreen-mode.cutout-type-dynamic_island.hud-sliding-in .floating-settings-btn,body.fullscreen-mode.ios-profile-dynamic_island.hud-hidden .floating-settings-btn,body.fullscreen-mode.ios-profile-dynamic_island.hud-sliding-out .floating-settings-btn,body.fullscreen-mode.ios-profile-dynamic_island.hud-sliding-in .floating-settings-btn{width:48px;height:48px;top:max(var(--cutout-top,11px), 11px)!important}body.fullscreen-mode.cutout-type-notch.hud-hidden .floating-settings-btn,body.fullscreen-mode.cutout-type-notch.hud-sliding-out .floating-settings-btn,body.fullscreen-mode.cutout-type-notch.hud-sliding-in .floating-settings-btn,body.fullscreen-mode.ios-profile-notch.hud-hidden .floating-settings-btn,body.fullscreen-mode.ios-profile-notch.hud-sliding-out .floating-settings-btn,body.fullscreen-mode.ios-profile-notch.hud-sliding-in .floating-settings-btn{width:48px;height:48px;top:4px!important}body.fullscreen-mode.cutout-type-punch.hud-hidden .floating-settings-btn,body.fullscreen-mode.cutout-type-punch.hud-sliding-out .floating-settings-btn,body.fullscreen-mode.cutout-type-punch.hud-sliding-in .floating-settings-btn{width:48px;height:48px;top:max(var(--cutout-top,10px), 10px)!important}}@media (orientation:landscape){body.hud-hidden .floating-settings-btn,body.hud-sliding-out .floating-settings-btn,body.hud-sliding-in .floating-settings-btn{top:max(calc(max(var(--safe-area-inset-top,0px), env(safe-area-inset-top,0px)) + 6px), 8px)!important}}body.cutout-pos-corner-right .floating-settings-btn,body.cutout-type-punch-right .floating-settings-btn{right:max(calc(env(safe-area-inset-right,0px) + var(--cutout-right-offset,48px) + 12px), 60px)!important}.floating-settings-btn:hover{background:var(--glass-bg-hover)}.floating-settings-btn:active{background:var(--glass-bg-active);transform:scale(.92)}:root[data-theme=light] .floating-settings-btn{background:var(--glass-bg-light);border:var(--glass-border);box-shadow:var(--glass-shadow)}body.hud-hidden .floating-settings-btn{transition:transform .15s,background .15s,opacity .2s;display:flex}body.fullscreen-transitioning.hud-hidden .floating-settings-btn{transition:transform .5s cubic-bezier(.16,1,.3,1),background .15s,opacity .2s!important}body.hud-measuring #minimap-bar,body.hud-measuring #piano-container,body.hud-measuring .layout-pill-widget,body.hud-measuring .floating-settings-btn{transition:none!important;animation:none!important}body.hud-hidden #minimap-bar{z-index:2500;pointer-events:none;box-shadow:none;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;position:fixed;top:0;left:0;right:0;transform:translateY(-100%)}body.hud-hidden #minimap-bar.hud-peek{pointer-events:auto;transform:translateY(0);box-shadow:0 8px 32px #0000008c}body.hud-hidden #minimap-bar.hud-peek~#floating-settings-btn{opacity:0;pointer-events:none}body.hud-hidden:has(#minimap-bar.hud-peek) .floating-settings-btn{opacity:0;pointer-events:none}#piano-container{--board-scale:1}body.hud-transitioning #piano-container,body.fullscreen-transitioning #piano-container{transform-origin:50% 100%;pointer-events:none;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}body.hud-transitioning #minimap-bar,body.hud-transitioning #piano-container,body.hud-transitioning .floating-settings-btn,body.fullscreen-transitioning #minimap-bar,body.fullscreen-transitioning #piano-container,body.fullscreen-transitioning .floating-settings-btn{pointer-events:none!important}body.hud-sliding-out #minimap-bar{pointer-events:none;transform:translateY(-100%)}body.hud-sliding-out .floating-settings-btn,body.hud-sliding-in .floating-settings-btn,body.hud-hidden.hud-sliding-in .floating-settings-btn{display:flex!important}body.hud-sliding-out .floating-settings-btn{animation:.5s cubic-bezier(.16,1,.3,1) forwards floating-settings-fade-in}body.hud-sliding-in .floating-settings-btn,body.hud-hidden.hud-sliding-in .floating-settings-btn{pointer-events:none;animation:.5s cubic-bezier(.16,1,.3,1) forwards floating-settings-fade-out}@keyframes floating-settings-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes floating-settings-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}body.hud-sliding-in #minimap-bar,body.hud-hidden.hud-sliding-in #minimap-bar{pointer-events:none;transform:translateY(0)}#top-controls{z-index:40;background:var(--hud-bg);width:100%;height:auto;color:var(--hud-text);flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex;position:relative;top:0}#minimap-container{background:var(--minimap-bg);cursor:pointer;z-index:50;border:var(--glass-border);border-radius:8px;width:100%;height:40px;margin:0;position:relative;overflow:visible}#minimap-canvas{border-radius:inherit;background:0 0;width:100%;height:100%;display:block}#minimap-thumb{border:2px solid var(--accent);box-sizing:border-box;height:100%;box-shadow:none;cursor:grab;background:0 0;border-radius:0;transition:none;position:absolute;top:0;left:0}#minimap-thumb:active{cursor:grabbing;background:0 0}:root[data-theme=light] #minimap-thumb{box-shadow:none;background:0 0}:root[data-theme=light] #minimap-thumb:active{background:0 0}.thumb-grip{display:none}.thumb-handle{background:var(--glass-bg-dark);width:12px;height:calc(100% + 4px);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:2px solid var(--accent);cursor:ew-resize;z-index:200;pointer-events:auto;isolation:isolate;justify-content:center;align-items:center;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;display:flex;position:absolute;top:-2px;box-shadow:0 2px 8px #00000059,inset 0 1px 1px #ffffff40}:root[data-theme=light] .thumb-handle{background:var(--glass-bg-light);box-shadow:0 2px 6px #0000001f,inset 0 1px 1px #ffffffe6}.thumb-handle:before{content:"";position:absolute;inset:-10px -15px}.thumb-handle:after{content:"";background:var(--accent);opacity:.85;border-radius:1px;width:2px;height:calc(100% - 14px)}:root[data-theme=light] .thumb-handle:after{opacity:.7}.thumb-handle:hover{background:var(--glass-bg-hover);box-shadow:0 0 10px var(--accent), 0 3px 12px #0006, inset 0 1px 1px #ffffff59;transform:scaleY(1.05)}:root[data-theme=light] .thumb-handle:hover{background:var(--glass-bg-hover);box-shadow:0 0 8px var(--accent), 0 3px 10px #0003, inset 0 1px 1px #fff}.thumb-handle:active{background:var(--glass-bg-active);box-shadow:0 0 12px var(--accent), 0 2px 8px #00000080, inset 0 1px 1px #fff6;transform:scaleY(1.05)scaleX(.95)}:root[data-theme=light] .thumb-handle:active{background:var(--glass-bg-active)}.thumb-handle.left{border-radius:6px 0 0 6px;left:-12px}.thumb-handle.right{border-radius:0 6px 6px 0;right:-12px}#metronome-slider-popup{z-index:99999;box-sizing:border-box;overscroll-behavior:contain;max-height:calc(100vh - 20px);margin-top:5px;padding:16px;position:absolute;top:110%;left:50%;overflow-y:auto;transform:translate(-50%);width:184px!important;min-width:unset!important}#metronome-slider-popup:not(:popover-open){display:none}.metronome-header{color:var(--text-primary);text-align:center;letter-spacing:.05em;text-transform:none;opacity:.9;margin-bottom:12px;font-size:12px;font-weight:800}.metronome-grid-wrapper{flex-direction:column;gap:14px;display:flex}.metronome-col{flex-direction:column;display:flex}.metronome-row{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.metronome-row span:first-child{color:var(--text-secondary);font-size:11px;font-weight:600}.metronome-row span:last-child{color:var(--accent);font-size:13px;font-weight:800}.metronome-slider{width:100%;margin-bottom:12px;display:block}.metronome-tap-btn{text-transform:none;border-radius:8px;justify-content:center;align-items:center;gap:6px;width:100%;height:32px;margin-bottom:16px;font-size:10px;font-weight:700;display:flex}.metronome-tap-btn svg{width:12px;height:12px}.metronome-section-title{color:var(--text-muted);text-transform:none;letter-spacing:.05em;margin-bottom:6px;font-size:10px;font-weight:700}.metronome-label{color:var(--text-muted);margin-bottom:4px;font-size:9px;font-weight:600}#metronome-slider-popup .time-sig-preset-grid,#metronome-slider-popup .ts-num-grid,#metronome-slider-popup .ts-den-grid{grid-template-columns:repeat(4,32px);justify-content:center;gap:8px;display:grid}#metronome-slider-popup .ts-num-grid{margin-bottom:8px}#metronome-slider-popup .time-sig-preset-grid .btn-option,#metronome-slider-popup .ts-num-grid .btn-option,#metronome-slider-popup .ts-den-grid .btn-option{border-radius:var(--radius-btn-option,8px);justify-content:center;place-self:center;align-items:center;width:32px;height:32px;padding:0;font-size:10px;display:flex}@media (orientation:landscape),(max-height:550px){#metronome-slider-popup{width:326px!important;max-width:calc(100vw - 20px)!important;padding:12px 14px!important}#metronome-slider-popup .metronome-header{border-bottom:var(--glass-border);margin-bottom:10px;padding-bottom:6px}#metronome-slider-popup .metronome-grid-wrapper{grid-template-columns:1fr 1fr;align-items:start;gap:16px;display:grid}#metronome-slider-popup .metronome-slider{margin-bottom:8px}#metronome-slider-popup .metronome-tap-btn{height:28px;margin-bottom:10px}#metronome-slider-popup .time-sig-preset-grid,#metronome-slider-popup .ts-num-grid,#metronome-slider-popup .ts-den-grid{grid-template-columns:repeat(4,30px)!important;gap:6px!important}#metronome-slider-popup .time-sig-preset-grid .btn-option,#metronome-slider-popup .ts-num-grid .btn-option,#metronome-slider-popup .ts-den-grid .btn-option{width:30px;height:30px}#metronome-slider-popup .ts-num-grid{margin-bottom:6px}}#sfx-wrapper{position:relative}#sfx-popup{z-index:99999;min-width:220px;max-width:260px;margin-top:5px;padding:15px;position:absolute;top:110%;right:-50px}#sfx-popup:not(:popover-open){display:none}.sfx-grid-wrapper{display:block}.sfx-col{flex-direction:column;display:flex}.sfx-header{color:var(--text-primary);text-align:center;border-bottom:var(--glass-border);letter-spacing:.05em;margin-bottom:15px;padding-bottom:8px;font-size:12px;font-weight:700}.sfx-row{font-size:var(--font-small);color:var(--text-secondary);justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.sfx-row span:last-child{color:var(--text-primary);font-weight:600}.sfx-slider{cursor:pointer;background:0 0;width:100%;margin-top:-4px;margin-bottom:10px;padding:8px 0;display:block}.sfx-slider:last-of-type{margin-bottom:5px}.sfx-slider::-webkit-slider-runnable-track{background:var(--glass-bg-hover);border:none;border-radius:3px;width:100%;height:6px}.sfx-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);width:26px;height:16px;transition:background var(--transition-fast), transform .1s ease;cursor:ew-resize;border:none;border-radius:8px;margin-top:-5px;box-shadow:0 3px 6px #00000080}.sfx-slider::-webkit-slider-thumb:hover{background:var(--text-primary);transform:scale(1.1)}.sfx-slider::-webkit-slider-thumb:active{background:var(--text-primary);transform:scale(1.25)}.sfx-slider::-moz-range-track{background:var(--glass-bg-hover);border:none;border-radius:3px;width:100%;height:6px}.sfx-slider::-moz-range-thumb{background:var(--accent);width:26px;height:16px;transition:background var(--transition-fast), transform .1s ease;cursor:ew-resize;border:none;border-radius:8px;box-shadow:0 3px 6px #00000080}.sfx-slider::-moz-range-thumb:hover{background:var(--text-primary);transform:scale(1.1)}.sfx-slider::-moz-range-thumb:active{background:var(--text-primary);transform:scale(1.25)}.sfx-toggle-row{font-size:var(--font-small);color:var(--text-secondary);justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}@media (orientation:landscape),(max-height:550px){#sfx-popup{min-width:480px!important;max-width:600px!important;right:-60px!important}.sfx-grid-wrapper{grid-template-columns:1fr 1fr;gap:20px;display:grid}.sfx-header{margin-bottom:12px}}.midi-control-pad{background:var(--glass-bg);width:120px;height:120px;-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);z-index:4000;cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;transition:transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-slow);box-shadow:var(--glass-shadow);border-radius:16px;justify-content:center;align-items:center;padding:0;display:flex;position:fixed}.midi-control-pad.active{background:#1565c01a;border-color:#1565c066;box-shadow:0 0 20px #1565c033}@keyframes latchPulse{0%,to{box-shadow:0 0 16px #1565c080}50%{box-shadow:0 0 28px #1565c0e6,inset 0 0 8px #1565c066}}.midi-control-pad.latched{background:#1565c026;border-color:#1565c0b3;animation:1.4s ease-in-out infinite latchPulse}.midi-control-pad.latched .midi-pad-dot{box-shadow:0 0 18px #1565c0,0 0 6px #fff}.midi-control-pad.unlocked{background:color-mix(in srgb, var(--accent) 30%, transparent);border-color:var(--accent);cursor:default;box-shadow:0 0 30px color-mix(in srgb, var(--accent) 40%, transparent)}.midi-pad-move-pill{background:color-mix(in srgb, var(--accent) 60%, white);cursor:move;opacity:.8;width:48px;height:10px;transition:opacity var(--transition-fast), background var(--transition-fast);z-index:10;border-radius:5px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.midi-pad-move-pill:hover{opacity:1;background:var(--accent)}.midi-pad-close-btn{width:36px;height:36px;color:var(--text-primary);cursor:pointer;opacity:0;pointer-events:none;transition:all var(--transition-normal) var(--ease-elastic);z-index:20;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:24px;font-weight:300;display:flex;position:absolute;top:-38px;left:50%;transform:translate(-50%)scale(.8)}.midi-pad-close-btn.visible{opacity:1;pointer-events:auto;transform:translate(-50%)scale(1)}.midi-pad-close-btn:hover{color:var(--text-primary);text-shadow:0 0 10px #fffc;transform:translate(-50%)scale(1.1)}.midi-pad-resize-handle{z-index:5;width:20px;height:20px;position:absolute}.midi-pad-resize-handle.top-left{cursor:nwse-resize;top:0;left:0}.midi-pad-resize-handle.top-right{cursor:nesw-resize;top:0;right:0}.midi-pad-resize-handle.bottom-left{cursor:nesw-resize;bottom:0;left:0}.midi-pad-resize-handle.bottom-right{cursor:nwse-resize;bottom:0;right:0}.midi-pad-label{text-align:center;width:100%;color:var(--accent);letter-spacing:.05em;pointer-events:none;opacity:.8;font-size:9px;font-weight:800;position:absolute;bottom:8px;left:0}.midi-pad-dot{background:var(--accent);pointer-events:none;border:2px solid #fff;border-radius:50%;width:12px;height:12px;transition:left .1s ease-out,top .1s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #1565c0cc}.midi-control-pad.unlocked .midi-pad-dot{background:var(--accent)}.pad-preset-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.pad-preset-btn{background:var(--glass-bg-light);border:var(--glass-border);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:2px;height:auto;min-height:52px;padding:12px 5px;font-size:12px;font-weight:700;display:flex}.preset-subtitle{opacity:.5;letter-spacing:.05em;font-size:9px;font-weight:400}.pad-preset-btn:hover{background:var(--glass-bg-hover);border-color:var(--accent);color:var(--accent);box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);transform:translateY(-2px)}.pad-preset-btn:hover .preset-subtitle{opacity:.8}#settings-modal.slider-dragging{opacity:.5}#settings-modal.slider-dragging #rows-slider{opacity:2}#settings-modal.slider-dragging .label:has(#rows-val){opacity:2}#settings-modal .modal-panel{text-align:left;border-radius:var(--glass-radius,24px);flex-direction:column;width:90%;max-width:1000px;padding:24px;display:flex;position:relative}#settings-modal .settings-columns{grid-template-columns:repeat(2,1fr);align-items:start;gap:20px;display:grid;touch-action:pan-y!important}.settings-tab-bar{border-bottom:1px solid #ffffff1a;flex-shrink:0;justify-content:center;gap:0;margin-bottom:20px;padding:0 24px;display:flex}.settings-tab{max-width:160px;font-size:var(--font-label);color:var(--text-muted);cursor:pointer;text-align:center;letter-spacing:.5px;background:0 0;border:none;flex:1;padding:14px 0;font-weight:700;transition:all .3s;position:relative}.settings-tab:focus-visible{outline:2px solid var(--accent)!important;outline-offset:-2px!important;border-radius:8px!important}.settings-tab:hover{color:var(--text-primary)}.settings-tab.active{color:var(--accent)}.settings-tab:after{content:"";background:var(--accent);width:60%;height:3px;box-shadow:0 -2px 10px color-mix(in srgb, var(--accent) 50%, transparent);border-radius:4px 4px 0 0;transition:transform .3s cubic-bezier(.4,0,.2,1);position:absolute;bottom:-1px;left:20%;transform:scaleX(0)}.settings-tab.active:after{transform:scaleX(1)}.settings-tab-content{width:100%;animation:.2s ease-out settingsFadeIn;display:none}.settings-tab-content.active{display:block}@keyframes settingsFadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.btn-close-minimal{width:32px;height:32px;box-shadow:none;color:var(--text-secondary);cursor:pointer;z-index:1000;background:0 0;border:none;border-radius:0;outline:none;justify-content:center;align-items:center;margin:0;padding:0;font-size:20px;transition:all .2s;display:flex;position:absolute;top:12px;right:12px}.btn-close-minimal:hover{color:var(--text-primary);opacity:1;transform:scale(1.1)}.close-settings-internal:hover{color:var(--text-primary);background:var(--glass-bg-hover)}.btn-close{border-radius:50px;width:fit-content;margin:15px auto 10px;padding:12px 25px;font-size:16px;display:block;min-width:0!important}#quick-settings-modal{z-index:2200}#quick-settings-modal .modal-panel{text-align:left;width:90%;max-width:1000px;padding:24px}#quick-settings-modal h2,#info-modal h2,#quick-setup-modal h2{text-align:center;color:var(--accent);letter-spacing:1px;margin-bottom:12px;font-size:20px}#info-modal .info-credits{text-align:center;color:var(--text-muted);opacity:.85;margin:20px 0 10px;font-size:10px;display:block}#info-modal .info-credits a{color:inherit;text-decoration:none}.info-content-rich h3{color:var(--accent);letter-spacing:.3px;margin-top:20px;margin-bottom:10px;font-size:1.1rem;font-weight:700}.info-content-rich p,.info-content-rich ul{color:var(--text-primary);font-size:.92rem;line-height:1.55}.info-content-rich li{margin-bottom:6px;font-size:.92rem;line-height:1.55}.info-card-sub{transition:background .2s,border-color .2s}.info-card-sub:hover{background:#ffffff12!important;border-color:#ffffff26!important}.video-carousel-container{width:100%;max-width:600px;margin:16px auto}.video-carousel-header{text-align:left;margin-bottom:10px}#video-carousel-title{color:var(--accent);letter-spacing:.2px;margin:0;font-size:.95rem;font-weight:600}.video-carousel-viewport{background:#000;border:1px solid #ffffff1f;border-radius:10px;width:100%;position:relative;overflow:hidden}.video-carousel-controls{justify-content:center;align-items:center;gap:12px;margin-top:10px;display:flex}.video-carousel-controls button{cursor:pointer;width:32px;height:32px;min-height:32px;color:var(--text-primary);border-radius:8px;justify-content:center;align-items:center;padding:0;font-size:15px;font-weight:700;display:flex}#video-carousel-indicator{opacity:.85;text-align:center;min-width:40px;color:var(--text-primary);font-size:.85rem;font-weight:600}.info-video-slide{width:100%}.info-video-wrapper{aspect-ratio:16/9;background:#000;width:100%;position:relative;overflow:hidden}.info-video-wrapper iframe{border:0;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.info-video-card-ios{z-index:2;cursor:pointer;background:#000;text-decoration:none;display:none;position:absolute;inset:0;overflow:hidden}body.platform-ios .info-video-card-ios{display:block!important}body.platform-ios .info-video-wrapper iframe{display:none!important}.info-video-thumb{object-fit:cover;object-position:center;width:100%;height:100%;transition:transform .25s,filter .25s;display:block}.info-video-overlay{background:#00000059;justify-content:center;align-items:center;transition:background .25s;display:flex;position:absolute;inset:0}.youtube-play-badge{-webkit-backdrop-filter:blur(8px);background:#000000a6;border:1px solid #ffffff29;border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:10px 18px;transition:transform .2s,background .2s;display:flex;box-shadow:0 4px 20px #0006}.youtube-play-text{color:#fff;letter-spacing:.3px;font-size:.82rem;font-weight:600}.info-video-card-ios:hover .info-video-thumb,.info-video-card-ios:active .info-video-thumb{transform:scale(1.03)}.info-video-card-ios:hover .youtube-play-badge,.info-video-card-ios:active .youtube-play-badge{background:#000c;transform:scale(1.06)}.qs-cols{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));align-items:stretch;gap:10px;margin-bottom:20px;display:grid}.qs-col{border-radius:var(--radius-qs-col,12px);background:0 0;border:2px solid #ffffff40;flex-direction:column;flex:1;align-items:center;padding:10px;display:flex}:root[data-theme=light] .qs-col{border:2px solid #00000026}.qs-header{color:var(--accent);font-size:var(--font-heading);letter-spacing:.5px;margin-bottom:8px;font-weight:600}.qs-desc-text{color:var(--text-secondary);font-size:var(--font-body);min-height:10px;margin-bottom:15px;line-height:1.4}.qs-layout-preview{box-sizing:border-box;border-radius:var(--radius-qs-col,12px);background:var(--glass-bg-dark);border:1px solid #ffffff1f;flex-direction:column;justify-content:center;align-items:center;width:100%;margin-top:0;padding:8px;display:flex;overflow:hidden;box-shadow:0 4px 12px #0003}.qs-layout-preview canvas{border-radius:8px;width:100%;height:75px;display:block}.qs-btn-group{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.qs-item-wrapper{text-align:center;flex-direction:column;flex-shrink:0;justify-content:flex-start;align-items:center;gap:4px;width:40px;display:flex}.qs-card-btn{width:100%}.qs-card-btn svg{width:28px;height:28px}.qs-card-btn:hover{background:var(--glass-bg-hover)}.qs-card-btn.active{background:var(--accent);border-color:var(--accent);color:#000;box-shadow:0 5px 15px #0000004d, 0 0 15px color-mix(in srgb, var(--accent) 30%, transparent);transform:scale(1.05)}.qs-label-external{font-size:var(--font-label);color:var(--text-secondary);text-align:center;width:100%;font-weight:400;line-height:1.2}.qs-card-btn.active+.qs-label-external{color:var(--accent);font-weight:700}.qs-square-btn.layout-btn{white-space:normal;text-align:center;min-width:56px;font-size:9px;line-height:1.1;width:auto!important;padding:0 8px!important}.qs-chord-preview{border:var(--glass-border);border-radius:var(--radius-chord-prev,8px);justify-content:center;align-items:center;width:90%;height:30px;margin-bottom:10px;display:flex}.qs-chord-preview .mini-key{width:12px;height:16px}.qs-chord-preview .mini-row.shift{margin-left:14px}.qs-chord-grid{grid-template-columns:repeat(3,1fr);gap:2px;width:100%;display:grid}.qs-chord-btn{border-radius:var(--radius-chord-btn,8px);color:var(--text-secondary);font-size:var(--font-label);cursor:pointer;border:none;padding:8px 0;font-weight:700}.qs-chord-btn:hover{background:var(--glass-bg-hover);color:var(--text-primary)}.qs-chord-btn.active{background:var(--accent);border-color:var(--accent);color:#000;box-shadow:0 5px 15px #0000004d, 0 0 15px color-mix(in srgb, var(--accent) 30%, transparent);transform:scale(1.05)}.btn-start-play{background:var(--accent);color:#000;cursor:pointer;border:none;border-radius:30px;margin:0 auto;padding:10px 40px;font-size:14px;font-weight:700;transition:transform .2s;display:block}.btn-start-play:hover{box-shadow:0 0 20px rgba(var(--accent-rgb), .4);transform:scale(1.05)}#settings-panel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 8px var(--accent)}#settings-panel button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 8px var(--accent)}#settings-panel input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 8px var(--accent)}.qs-btn-group button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 8px var(--accent)}@media (min-width:1024px){#settings-modal .modal-panel{width:90%;max-width:1000px;padding:40px}#settings-modal .settings-columns{gap:40px}#quick-settings-modal .modal-panel{width:90%;max-width:1000px;padding:40px}.qs-cols{gap:30px}.qs-square-btn{width:76px;height:76px}.qs-square-btn svg{width:38px;height:38px}}@media (max-width:932px) and (orientation:portrait){#settings-modal .settings-columns,.qs-cols{grid-template-columns:1fr}.qs-desc-text{margin-bottom:10px;font-size:11px;line-height:1.3}.qs-item-wrapper{width:38px}.qs-label-external{font-size:9px}.qs-label-external span{font-size:7px}.qs-chord-btn{padding:4px 0;font-size:8px}.btn-start-play{padding:8px 25px;font-size:12px}}@media (max-width:600px) and (orientation:portrait){#settings-modal .modal-panel{max-height:80vh;overflow-y:auto}}@media (max-width:932px) and (orientation:landscape){.qs-header{margin-bottom:5px;font-size:12px}.btn-start-play{padding:6px 20px;font-size:11px}}@media (orientation:landscape) and (max-height:600px){.btn-close{margin-top:8px;padding:8px 20px;font-size:12px}.qs-item-wrapper{gap:2px;width:36px}.qs-card-btn svg{width:18px;height:18px}}#btn-settings-toggle svg{fill:currentColor;width:24px;height:24px}#settings-hint-container{background:var(--glass-bg-light)!important;border:var(--glass-border)!important;box-shadow:none!important;margin-top:4px!important;padding:6px!important;font-size:9px!important}.midi-pad-settings-btn{background:var(--glass-bg-light);border:var(--glass-border);width:24px;height:24px;color:var(--text-primary);cursor:pointer;z-index:10;border-radius:6px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:5px;right:5px}.midi-pad-settings-btn:hover{background:var(--glass-bg-hover);border-color:var(--accent);color:var(--accent)}.midi-pad-settings-btn svg{opacity:.7}.midi-pad-settings-btn:hover svg{opacity:1}.midi-device-list{border-radius:var(--radius-device-list,12px);background:#0003;border:1px solid #ffffff1a;flex-direction:column;max-height:none;margin-bottom:5px;display:flex;overflow:hidden}.midi-device-list.expanded{max-height:min(42vh,320px);overflow-y:auto}.midi-device-list:not(.expanded) .midi-device-item:not(.midi-device-all):not(.empty){display:none}.midi-section-header{justify-content:space-between;align-items:center;display:flex}.midi-section-title{align-items:center;gap:6px;display:flex}.midi-device-all{cursor:pointer;-webkit-user-select:none;user-select:none}.midi-device-all .midi-device-info{cursor:pointer}.midi-device-chevron{opacity:.55;flex-shrink:0;width:12px;height:12px;margin-right:4px;transition:transform .2s,opacity .15s,color .15s}.midi-device-all:hover .midi-device-chevron{opacity:1;color:var(--accent)}.midi-device-list.expanded .midi-device-all .midi-device-chevron{opacity:1;color:var(--accent);transform:rotate(180deg)}.midi-device-all .midi-device-name{align-items:center;gap:6px;display:flex}.midi-section-actions{align-items:center;gap:8px;display:flex}.midi-icon-btn{color:var(--accent);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:28px;min-height:28px;padding:4px;display:flex}.midi-icon-btn:hover{background:var(--glass-bg-hover)}.midi-omni-wrap{opacity:.7;align-items:center;gap:4px;font-size:10px;display:flex}.midi-omni-wrap[hidden]{display:none!important}.midi-debug-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 6px;font-size:10px}.midi-debug-btn:hover{color:var(--text-secondary);background:var(--glass-bg-hover)}.midi-device-item{border-bottom:var(--glass-border);color:var(--text-secondary);justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;font-size:11px;display:flex}.midi-device-item:last-child{border-bottom:none}.midi-device-item.empty{opacity:.5;text-align:center;padding:20px 0;font-size:11px}.midi-device-info{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.midi-device-controls{flex-shrink:0;align-items:center;gap:10px;display:flex}.status-indicator-dot{width:8px;height:8px;transition:background-color var(--transition-normal) ease, box-shadow var(--transition-normal) ease;background-color:#ff3b30;border-radius:50%}.status-indicator-dot.active{background-color:#4caf50;box-shadow:0 0 6px #4caf5099}.midi-device-name{text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);overflow:hidden}.midi-device-detail{opacity:.55;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;font-size:9px;overflow:hidden}#midi-modal .midi-modal-panel{isolation:isolate;outline:none;flex-direction:column;width:min(320px,92vw);max-height:min(90vh,100% - 24px);display:flex;overflow:hidden!important}#midi-modal .midi-modal-panel.glass-pane:before{z-index:0;background:color-mix(in srgb, var(--glass-bg-dark) 88%, #000 12%)}#midi-modal .midi-modal-panel>*{z-index:1;position:relative}.midi-modal-title{text-align:center;flex-shrink:0;margin:0 0 16px}.midi-modal-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:auto;min-height:0;padding-right:2px;overflow-y:auto}.midi-connection-details{color:var(--text-secondary);border-top:1px solid #ffffff1a;margin-top:12px;padding-top:10px;font-size:11px}.midi-connection-details summary{color:var(--accent);cursor:pointer;outline:none;justify-content:center;align-items:center;gap:4px;font-weight:600;list-style:none;display:flex}.midi-connection-details summary::-webkit-details-marker{display:none}.midi-connection-guide{text-align:left;color:var(--text-muted);flex-direction:column;gap:10px;margin-top:8px;font-size:10.5px;line-height:1.45;display:flex}.midi-guide-section{background:#00000038;border:1px solid #ffffff0f;border-radius:8px;padding:8px 10px}.midi-guide-title{color:var(--text-primary);margin-bottom:4px;font-size:11px;display:block}.midi-guide-steps{flex-direction:column;gap:4px;margin:0;padding-left:18px;display:flex}.midi-guide-steps li{padding-left:2px}.midi-guide-note{margin:0;font-size:10px;line-height:1.4}.midi-inline-tip{color:var(--text-muted);text-align:left;margin:6px 0 0;padding:0 2px;font-size:10px;line-height:1.4}.midi-status-tip{color:#e6c200;background:#ffd70014;border-left:2px solid gold;border-radius:8px;margin-top:10px;padding:8px 10px}.midi-status-tip[hidden]{display:none!important}#premium-modal .modal-panel{border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);max-width:380px;padding:40px 30px}#premium-badge{color:#30d158;border-radius:var(--radius-premium-badge,8px);text-align:center;background:#30d15826;border:1px solid #30d1584d;margin-top:15px;padding:10px;font-size:12px;font-weight:700;display:none}.dev-badge{color:#fff;vertical-align:middle;background:#ff375f;border-radius:4px;margin-left:5px;padding:2px 6px;font-size:9px}.inst-search-container{background:var(--glass-bg-light);border:var(--glass-border);border-radius:var(--radius-search,12px);align-items:center;height:46px;padding:0 14px;transition:all .3s;display:flex;position:relative}.inst-search-container:focus-within{background:var(--glass-bg-hover);border-color:var(--accent);box-shadow:0 0 12px color-mix(in srgb, var(--accent) 25%, transparent)}.inst-search-icon{color:var(--text-muted);flex-shrink:0;justify-content:center;align-items:center;margin-right:10px;display:flex}.inst-search-icon .search-svg{width:18px;height:18px}#inst-search-input{color:var(--text-primary);font-size:var(--font-body);background:0 0;border:none;outline:none;flex:1;height:100%;margin:0;padding:0;font-weight:500}#inst-search-input::placeholder{color:var(--text-muted)}.inst-search-clear{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin:0 -4px 0 0;padding:4px;transition:all .2s;display:flex}.inst-search-clear:hover{color:var(--text-primary);background:var(--glass-bg-hover)}.inst-search-clear .clear-svg{width:16px;height:16px}.inst-search-no-results{text-align:center;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;padding:40px 20px;display:flex}.inst-search-no-results-icon{opacity:.6;margin-bottom:12px;font-size:32px}.inst-search-no-results-text{font-size:var(--font-body);font-weight:500;line-height:1.4}#settings-instrument-grid{border-radius:var(--radius-grid,12px);background:#ffffff05;border:1px solid #ffffff0d;margin-top:12px;overflow:hidden;box-shadow:0 4px 16px #0000001a}#settings-instrument-grid .inst-group-card{box-shadow:none;background:0 0;border:none;border-radius:0;margin-bottom:0;overflow:visible}#settings-instrument-grid .inst-group-card.collapsed{margin-bottom:0}#settings-instrument-grid .inst-group-card.collapsed .inst-list-rows{display:none}#settings-instrument-grid .inst-group-header{-webkit-backdrop-filter:blur(16px);color:var(--group-color,var(--accent));text-transform:none;letter-spacing:normal;z-index:10;cursor:pointer;-webkit-user-select:none;user-select:none;background:#19191940;border-top:1px solid #ffffff08;border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;padding:12px 16px;font-size:13px;font-weight:700;transition:background .2s;display:flex;position:sticky;top:-1px}#settings-instrument-grid .inst-group-card:first-child .inst-group-header{border-top:none}#settings-instrument-grid .inst-group-header:hover{background:#ffffff08}#settings-instrument-grid .inst-group-header .chevron-svg{width:12px;height:12px;color:var(--text-muted);transition:transform .25s cubic-bezier(.4,0,.2,1),color .2s;display:block}#settings-instrument-grid .inst-group-header:hover .chevron-svg{color:var(--group-color,var(--accent))}#settings-instrument-grid .inst-group-card.collapsed .chevron-svg{transform:rotate(-90deg)}#settings-instrument-grid .inst-list-rows{flex-direction:column;display:flex}#settings-instrument-grid .instrument-row-btn{-webkit-appearance:none;appearance:none;cursor:pointer;text-align:left;box-sizing:border-box;width:100%;color:var(--text-secondary);background:0 0;border:none;border-bottom:1px solid #ffffff08;justify-content:space-between;align-items:center;padding:12px 16px;font-family:inherit;transition:all .2s;display:flex;position:relative}#settings-instrument-grid .instrument-row-btn:focus-visible{outline:2px solid var(--accent)!important;outline-offset:-2px!important;z-index:15!important;border-radius:8px!important}#settings-instrument-grid .instrument-row-btn:last-child{border-bottom:none}@media (min-width:600px){#settings-instrument-grid .inst-list-rows{grid-template-columns:repeat(2,1fr);display:grid}#settings-instrument-grid .instrument-row-btn{border-bottom:var(--glass-border);border-right:none}#settings-instrument-grid .instrument-row-btn:nth-child(odd){border-right:var(--glass-border)}#settings-instrument-grid .instrument-row-btn:nth-last-child(-n+2),#settings-instrument-grid .instrument-row-btn:last-child{border-bottom:none}}#settings-instrument-grid .instrument-row-btn:hover{background:var(--glass-bg-hover);color:var(--text-primary)}#settings-instrument-grid .inst-row-left{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:12px;display:flex;overflow:hidden}#settings-instrument-grid .inst-badge{background:var(--glass-bg-dark);border:var(--glass-border);color:var(--text-muted);text-align:center;border-radius:4px;min-width:24px;padding:2px 6px;font-family:monospace;font-size:10px;transition:all .2s}#settings-instrument-grid .inst-name{font-size:13px;font-weight:500;transition:color .2s}#settings-instrument-grid .instrument-row-btn.active{background:var(--glass-bg-active);color:var(--text-primary)}#settings-instrument-grid .instrument-row-btn.active:before{content:"";background:var(--group-color,var(--accent));width:3px;box-shadow:0 0 8px var(--group-color,var(--accent));border-radius:0 4px 4px 0;position:absolute;top:4px;bottom:4px;left:0}#settings-instrument-grid .instrument-row-btn.active .inst-badge{background:color-mix(in srgb, var(--group-color,var(--accent)) 15%, transparent);border-color:color-mix(in srgb, var(--group-color,var(--accent)) 30%, transparent);color:var(--group-color,var(--accent))}#settings-instrument-grid .instrument-row-btn.active .inst-name{color:var(--text-primary);font-weight:600}#settings-instrument-grid .instrument-row-btn.locked{opacity:.55}#settings-instrument-grid .instrument-row-btn.locked:hover{background:#ffffff03}#settings-instrument-grid .inst-lock-icon{color:var(--text-muted);justify-content:center;align-items:center;transition:all .2s;display:flex}#settings-instrument-grid .instrument-row-btn:hover .inst-lock-icon{color:var(--accent);transform:scale(1.1)}.settings-row-split{flex-direction:column;gap:0;display:flex}.settings-col{width:100%}.key-labels-header,.settings-col-top-header{margin-top:15px}@media (min-width:600px),(orientation:landscape){.key-labels-header,.settings-col-top-header{margin-top:0!important}#settings-modal .modal-panel{width:90%!important;max-width:1000px!important}.settings-row-split{grid-template-columns:1fr 1fr!important;align-items:start!important;gap:24px!important;display:grid!important}#settings-instrument-grid{box-shadow:none!important;background:0 0!important;border:none!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:12px!important;display:grid!important;overflow:visible!important}#settings-instrument-grid .inst-group-card{border-radius:var(--radius-grid,12px)!important;background:#ffffff08!important;border:1px solid #ffffff0f!important;grid-column:span 1!important;transition:all .25s!important;overflow:hidden!important}#settings-instrument-grid .inst-group-header{border-radius:var(--radius-segment,10px)!important;background:#1e1e1e59!important;border:none!important}#settings-instrument-grid .inst-group-card:not(.collapsed){background:#ffffff05!important;grid-column:span 2!important}}:root[data-theme=light] #settings-instrument-grid .inst-group-header{color:color-mix(in srgb, var(--group-color,var(--accent)) 60%, #000)!important;background:#ffffff1f!important;border-bottom:1px solid #00000014!important}:root[data-theme=light] #settings-instrument-grid .inst-group-header:hover{background:#00000008!important}:root[data-theme=light] #settings-instrument-grid .inst-group-header .chevron-svg{color:var(--text-muted)!important}:root[data-theme=light] #settings-instrument-grid .inst-group-header:hover .chevron-svg{color:color-mix(in srgb, var(--group-color,var(--accent)) 60%, #000)!important}:root[data-theme=light] #settings-instrument-grid .instrument-row-btn.active .inst-badge{background:color-mix(in srgb, var(--group-color,var(--accent)) 15%, #fff)!important;border-color:color-mix(in srgb, var(--group-color,var(--accent)) 40%, #000)!important;color:color-mix(in srgb, var(--group-color,var(--accent)) 60%, #000)!important}:root[data-theme=light] #settings-instrument-grid .instrument-row-btn.active:before{background:color-mix(in srgb, var(--group-color,var(--accent)) 60%, #000)!important;box-shadow:0 0 4px color-mix(in srgb, var(--group-color,var(--accent)) 60%, #000)!important}@media (max-width:932px) and (orientation:landscape){:root[data-theme=light] #settings-instrument-grid .inst-group-card{background:#00000005!important;border:1px solid #0000000f!important}:root[data-theme=light] #settings-instrument-grid .inst-group-header{background:#ffffff2e!important}:root[data-theme=light] #settings-instrument-grid .inst-group-card:not(.collapsed){background:#00000003!important}}#scale-overlay-popover{border-radius:var(--glass-radius,24px);background:var(--glass-bg-dark,#19191973);border:var(--glass-border);width:350px;max-width:95vw;-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);color:var(--text-primary);z-index:2500;box-sizing:border-box;outline:none;max-height:90vh;margin:0;padding:16px;position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}#scale-overlay-popover:popover-open{flex-direction:column;gap:12px;display:flex}#scale-popover-body-container,#scale-popover-scale-panel{flex-direction:column;gap:12px;width:100%;display:flex}#btn-scale-popover-pin.active{transform:rotate(45deg);color:var(--accent)!important;opacity:1!important}#btn-scale-popover-pin:hover{opacity:.9!important;background:#ffffff14!important}#btn-scale-popover-pin:active{transform:scale(.95);background:#ffffff26!important}#btn-scale-popover-pin.active:active{transform:rotate(45deg)scale(.95)}:root[data-theme=light] #btn-scale-popover-pin:hover{background:#0000000f!important}:root[data-theme=light] #btn-scale-popover-pin:active{background:#0000001f!important}@media (orientation:landscape){#scale-overlay-popover{width:700px;max-width:95vw}#scale-popover-body-container{flex-direction:row;align-items:flex-start;gap:16px}#scale-popover-scale-panel{flex:1;min-width:0}#scale-chord-section{flex:1;min-width:0;margin-top:0}#scale-chord-divider{border-top:none!important;border-left:1px solid #ffffff14!important;align-self:stretch!important;width:1px!important;height:auto!important;margin:0!important}#scale-popover-header{min-height:0!important;margin-bottom:0!important}.scale-popover-title,#scale-popover-subtitle{display:none!important}}.mini-keyboard{background:#0009;border:1px solid #ffffff1a;border-radius:12px;flex-shrink:0;width:100%;height:70px;padding:0;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px 5px #00000080}.mini-key{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:background-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;border:none;outline:none}.mini-key.white{color:#4b6584;z-index:1;background:#eef2f3;border-right:1px solid #c9d6df;border-radius:0 0 8px 8px;flex:1;justify-content:center;align-items:flex-end;height:100%;padding-bottom:6px;font-size:10px;font-weight:800;display:flex}.mini-key.white:last-child{border-right:none}.mini-key.black{color:#8854d0;z-index:5;background:#1e272e;border-left:1px solid #111;border-right:1px solid #111;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;width:9%;height:60%;padding-bottom:3px;font-size:8px;font-weight:700;display:flex;position:absolute}.mini-key.black[data-val="1"]{left:9.5%}.mini-key.black[data-val="3"]{left:23.5%}.mini-key.black[data-val="6"]{left:52%}.mini-key.black[data-val="8"]{left:66%}.mini-key.black[data-val="10"]{left:80%}.mini-key.white:hover{background:#dcdde1}.mini-key.black:hover{background:#2f3542}.mini-key.white.scale-active{z-index:1;background:var(--accent)!important;color:#fff!important;box-shadow:0 0 10px var(--accent), inset 0 1px 2px #fff6!important;border-bottom:none!important}.mini-key.black.scale-active{z-index:5;background:color-mix(in srgb, var(--accent) 75%, #000)!important;color:#fff!important;box-shadow:0 0 10px var(--accent), inset 0 1px 2px #ffffff4d!important;border-bottom:none!important}.mini-key.white.scale-active:hover{background:color-mix(in srgb, var(--accent) 85%, #fff)!important;box-shadow:0 0 14px var(--accent), inset 0 1px 2px #ffffff80!important}.mini-key.black.scale-active:hover{background:color-mix(in srgb, var(--accent) 65%, #000)!important;box-shadow:0 0 14px var(--accent), inset 0 1px 2px #fff6!important}.mini-key.white.scale-root{z-index:1;background:var(--scale-root-color,#ff6f00)!important;color:#fff!important;box-shadow:0 0 12px var(--scale-root-color,#ff6f00), inset 0 1px 2px #ffffff80!important;border-bottom:none!important}.mini-key.black.scale-root{z-index:6;background:var(--scale-root-color,#ff6f00)!important;color:#fff!important;box-shadow:0 0 12px var(--scale-root-color,#ff6f00), inset 0 1px 2px #ffffff80!important;border-bottom:none!important}.scale-pills-scroll{flex-wrap:wrap;justify-content:center;gap:6px;width:100%;padding:4px 2px;display:flex}.scale-pills-scroll::-webkit-scrollbar{display:none}.scale-pills-scroll{-ms-overflow-style:none;scrollbar-width:none}.scale-pill{background:var(--glass-bg-light,#ffffff08);border:var(--glass-border);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast) ease;border-radius:20px;flex:none;padding:6px 10px;font-size:11px;font-weight:600}.scale-pill:hover{background:var(--glass-bg-hover,#ffffff14);color:var(--text-primary)}.scale-pill.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent)!important}:root[data-theme=light] #scale-overlay-popover{background:var(--glass-bg-dark,#ebebf073);border:var(--glass-border)}:root[data-theme=light] .mini-keyboard{background:#fff6;border:1px solid #0000001a}:root[data-theme=light] .mini-key.white{color:#2f3542;background:#fff;border-right:1px solid #dcdde1}:root[data-theme=light] .mini-key.white:hover{background:#f1f2f6}.settings-chord-selector{flex-direction:column;gap:12px;width:100%;margin-bottom:20px;display:flex}.settings-chord-group{flex-direction:column;gap:4px;display:flex}.settings-chord-group-label{color:var(--text-secondary);opacity:.6;letter-spacing:.05em;margin-bottom:2px;margin-left:2px;font-size:10px;font-weight:800}.settings-chord-grid{grid-template-columns:repeat(4,1fr);gap:3px;width:100%;display:grid}.settings-chord-btn{color:var(--text-secondary);cursor:pointer;text-align:center;background:#ffffff08;border:1px solid #ffffff0d;border-radius:6px;padding:8px 4px;font-size:11px;font-weight:700;transition:all .15s}.settings-chord-btn:hover{background:var(--glass-bg-hover);color:var(--text-primary)}.settings-chord-btn.active{background:var(--accent);border-color:var(--accent);color:#000;transform:translateY(-1px);box-shadow:0 4px 10px #00000040}.scale-chord-grid-2{grid-template-columns:repeat(2,1fr);gap:3px;width:100%;display:grid}.scale-chord-grid-3{grid-template-columns:repeat(3,1fr);gap:3px;width:100%;display:grid}.scale-chord-grid-4{grid-template-columns:repeat(4,1fr);gap:3px;width:100%;display:grid}.scale-chord-pill,.scale-voicing-pill,.scale-inversion-pill,.scale-arp-direction-pill,.scale-arp-octaves-pill,.scale-strum-mode-pill,.scale-strum-tempo-pill{background:var(--glass-bg-light,#ffffff08);border:var(--glass-border);color:var(--text-secondary);cursor:pointer;text-align:center;transition:all var(--transition-fast) ease;border-radius:20px;padding:6px 4px;font-size:10px;font-weight:600}.scale-chord-pill:hover,.scale-voicing-pill:hover,.scale-inversion-pill:hover,.scale-arp-direction-pill:hover,.scale-arp-octaves-pill:hover,.scale-strum-mode-pill:hover,.scale-strum-tempo-pill:hover{background:var(--glass-bg-hover,#ffffff14);color:var(--text-primary)}.scale-chord-pill.active,.scale-voicing-pill.active,.scale-inversion-pill.active,.scale-arp-direction-pill.active,.scale-arp-octaves.active,.scale-arp-octaves-pill.active,.scale-strum-mode-pill.active,.scale-strum-tempo-pill.active{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent)!important}.custom-interval-grid{grid-template-columns:repeat(6,1fr);gap:4px;width:100%;display:grid}.interval-chip{cursor:pointer;justify-content:center;align-items:center;display:flex;position:relative}.interval-chip input{opacity:0;cursor:pointer;width:0;height:0;position:absolute}.interval-chip span{text-align:center;width:100%;color:var(--text-muted);background:#ffffff08;border:1px solid #ffffff0d;border-radius:4px;padding:4px 0;font-size:8px;font-weight:700;transition:all .15s;display:block}.interval-chip input:checked+span{background:var(--accent);border-color:var(--accent);color:#000}.switch-toggle-compact{width:36px;height:20px;display:inline-block;position:relative}.switch-toggle-compact input{opacity:0;width:0;height:0}.slider-round-compact{cursor:pointer;background-color:#ffffff1a;border:1px solid #ffffff0d;border-radius:20px;transition:all .2s;position:absolute;inset:0}.slider-round-compact:before{content:"";background-color:#fff;border-radius:50%;width:14px;height:14px;transition:all .2s;position:absolute;bottom:2px;left:2px}.switch-toggle-compact input:checked+.slider-round-compact{background-color:var(--accent)}.switch-toggle-compact input:checked+.slider-round-compact:before{transform:translate(18px)}#btn-scale-chord-reset:hover{box-shadow:0 0 8px #ef44444d;background:#ef444440!important;border-color:#ef444499!important}.layout-dropdown-container{-webkit-user-select:none;user-select:none;width:100%;margin-bottom:6px;position:relative}.layout-dropdown-container.open{z-index:100000}.layout-dropdown-btn{background:var(--glass-bg-light);border:var(--glass-border);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:100%;min-height:40px;transition:all var(--transition-normal);border-radius:12px;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;display:flex}.layout-dropdown-btn:hover{background:var(--glass-bg-hover);border-color:var(--accent)}.layout-dropdown-container.open .layout-dropdown-btn{border-color:var(--accent)}.layout-selected-text{font-size:var(--font-input,13px);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;font-weight:600;overflow:hidden}.layout-pill{color:var(--text-primary);background:color-mix(in srgb, var(--accent) 18%, transparent);border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);white-space:nowrap;letter-spacing:.2px;border-radius:12px;padding:3px 9px;font-size:11px;font-weight:700}:root[data-theme=light] .layout-pill{color:var(--text-primary);background:color-mix(in srgb, var(--accent) 12%, #0000000a);border:1px solid color-mix(in srgb, var(--accent) 25%, #0000001a)}.layout-dropdown-arrow{opacity:.6;color:var(--text-secondary);transition:transform var(--transition-normal) var(--ease-elastic);pointer-events:none;font-size:14px}.layout-dropdown-container.open .layout-dropdown-arrow{transform:rotate(180deg)}#badge-scale-pro,.pro-badge{color:#000;letter-spacing:.5px;white-space:nowrap;background:linear-gradient(135deg,#ffb000,#ff7a00);border:.5px solid #ffffff40;border-radius:4px;padding:2.5px 5px;font-size:7.5px;font-weight:900;line-height:1;box-shadow:0 1px 3px #00000059}body.ad-free #badge-scale-pro,body.ad-free .pro-badge{display:none!important}.experimental-badge{color:#c48fff;letter-spacing:.3px;white-space:nowrap;text-transform:none;background:#af52de2e;border:.5px solid #af52de59;border-radius:4px;padding:2.5px 5px;font-size:7.5px;font-weight:700;line-height:1;box-shadow:0 1px 3px #00000040}#key-label-modes{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:12px;display:flex}.btn-group-segmented{grid-template-columns:repeat(3,1fr);gap:4px;width:100%;margin-top:4px;display:grid}.segmented-chip{text-align:center;background:var(--glass-bg-dark);border:var(--glass-border);color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;padding:6px 2px;font-size:11px;font-weight:600;transition:all .15s}.segmented-chip:hover{background:var(--glass-bg-hover);color:var(--text-primary)}.segmented-chip.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 8px color-mix(in srgb, var(--accent) 40%, transparent)}.custom-edo-panel{background:var(--glass-bg-dark);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);box-sizing:border-box;border-radius:16px;box-shadow:0 16px 40px #00000073}.edo-preset-chip,.edo-subdiv-chip{text-align:center;background:var(--glass-bg-dark);border:var(--glass-border);min-height:38px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:500;transition:all .15s}.edo-preset-chip:hover,.edo-subdiv-chip:hover{background:var(--glass-bg-hover);color:var(--text-primary);border-color:color-mix(in srgb, var(--accent) 30%, transparent)}.edo-preset-chip.active,.edo-subdiv-chip.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 10px color-mix(in srgb, var(--accent) 50%, transparent)}.custom-scale-panel{background:var(--glass-bg-dark);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);box-sizing:border-box;border-radius:16px;box-shadow:0 16px 40px #00000073}.custom-scale-tab-bar{background:color-mix(in srgb, var(--glass-bg-dark) 90%, black);border:var(--glass-border);border-radius:10px;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.custom-scale-tab-btn{text-align:center;min-height:38px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:7px;padding:6px 12px;font-size:13px;font-weight:500;transition:all .15s}.custom-scale-tab-btn:hover{color:var(--text-primary);background:#ffffff0d}.custom-scale-tab-btn.active{background:var(--accent);color:#fff;box-shadow:0 0 10px color-mix(in srgb, var(--accent) 45%, transparent)}.custom-ratio-panel{background:var(--glass-bg-dark);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);box-sizing:border-box;border-radius:16px;box-shadow:0 16px 40px #00000073}.ratio-template-chip{text-align:center;background:var(--glass-bg-dark);border:var(--glass-border);min-height:36px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:500;transition:all .15s}.ratio-template-chip:hover{background:var(--glass-bg-hover);color:var(--text-primary);border-color:color-mix(in srgb, var(--accent) 30%, transparent)}.ratio-table-row{box-sizing:border-box;border-bottom:1px solid #ffffff0f;align-items:center;gap:8px;padding:8px 10px;transition:background .15s;display:flex}.ratio-table-row:hover{background:#ffffff08}.ratio-table-row:last-child{border-bottom:none}.ratio-input-field{background:var(--glass-bg-dark);border:var(--glass-border);height:38px;color:var(--text-primary);box-sizing:border-box;border-radius:8px;outline:none;flex:1;padding:0 10px;font-family:inherit;font-size:14px;font-weight:500;transition:border-color .15s}.ratio-input-field:focus{border-color:var(--accent)}.ratio-input-field.invalid{border-color:#ff453a}.ratio-cents-badge{text-align:right;font-variant-numeric:tabular-nums;background:var(--glass-bg-dark);min-width:72px;color:var(--text-secondary);-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:6px;padding:4px 8px;font-size:12px}.ratio-cents-badge.valid{color:var(--text-primary)}.ratio-cents-badge.invalid{color:#ff453a}.ratio-delete-btn{width:38px;min-width:38px;height:38px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;font-size:16px;transition:all .15s;display:flex}.ratio-delete-btn:hover{color:#ff453a;background:#ff453a1f}#key-label-modal .modal-panel{text-align:center;flex-direction:column;align-items:center;display:flex}#key-label-modal-grid{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.pe-studio-layout{align-items:stretch;gap:20px;height:320px;margin-bottom:20px;display:flex}.pe-studio-layout>.glass-pane{background:var(--glass-bg-light)!important;-webkit-backdrop-filter:var(--glass-blur)!important;border:var(--glass-border)!important;border-radius:var(--radius-qs-col,16px)!important;box-shadow:inset 0 1px 1px #ffffff14, var(--glass-shadow)!important}#pattern-editor-modal .modal-panel{width:90%!important;max-width:1000px!important;padding:20px!important}@media (min-width:1024px){#pattern-editor-modal .modal-panel{max-width:1000px!important}}@media (max-width:850px){.pe-studio-layout{flex-direction:column!important;gap:20px!important;height:auto!important}.pe-studio-layout>.glass-pane{flex:none!important;width:100%!important;max-width:100%!important;height:320px!important}#tile-builder-viewport{height:320px!important}#btn-pe-undo,#btn-pe-redo,#btn-pe-clear,.pe-grid-btn{flex:0 0 48px!important;width:48px!important;height:48px!important}#btn-pe-undo svg,#btn-pe-redo svg,#btn-pe-clear svg,.pe-grid-btn svg{width:22px!important;height:22px!important}}.pe-btn-solid{background:var(--glass-bg-light);border-radius:var(--radius-btn,12px);color:var(--text-primary);cursor:pointer;-webkit-backdrop-filter:var(--glass-blur);transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000001f;border:var(--glass-border)!important}.pe-btn-solid:hover{background:var(--glass-bg-hover);transform:translateY(-1px);box-shadow:0 4px 12px #0000002e;border-color:var(--accent)!important}.pe-btn-solid:active{background:var(--glass-bg-active);transform:scale(.97)}:root[data-theme=light] .pe-btn-solid{background:var(--glass-bg-light);color:var(--text-primary);box-shadow:0 2px 6px #0000000d;border:var(--glass-border)!important}:root[data-theme=light] .pe-btn-solid:hover{background:var(--glass-bg-hover);border-color:var(--accent)!important}:root[data-theme=light] .pe-btn-solid:active{background:var(--glass-bg-active)}.pe-grid-btn{cursor:pointer;width:var(--hud-btn-size,48px)!important;height:var(--hud-btn-size,48px)!important;flex:0 0 var(--hud-btn-size,48px)!important;aspect-ratio:1!important;box-sizing:border-box!important;background:var(--glass-bg-light)!important;border:var(--glass-border)!important;color:var(--text-primary)!important;border-radius:8px!important;justify-content:center!important;align-items:center!important;margin:0!important;padding:0!important;transition:all .2s cubic-bezier(.4,0,.2,1)!important;display:flex!important}.pe-grid-btn:hover{transform:translateY(-1px);background:var(--glass-bg-hover)!important;border-color:var(--accent)!important}.pe-grid-btn:active{transform:scale(.95);background:var(--glass-bg-active)!important}.pe-grid-btn:disabled,.pe-grid-btn[disabled]{opacity:.35!important;cursor:not-allowed!important;pointer-events:none!important;color:var(--text-muted)!important;border-color:var(--glass-border)!important;background:var(--glass-bg-light)!important;box-shadow:none!important;transform:none!important}.pe-grid-btn.active.pe-btn-solid,.pe-grid-btn.active,.pe-grid-btn[data-active=true]{background:var(--accent)!important;color:#fff!important;border-color:#fff6!important;box-shadow:0 0 15px #1565c066!important}.pe-btn-clear{color:#ff453a!important;border-color:#ff453a40!important}.pe-btn-clear:hover{background:#ff453a1f!important;border-color:#ff453a!important}#btn-pe-undo,#btn-pe-redo,#btn-pe-clear{width:var(--hud-btn-size,48px)!important;height:var(--hud-btn-size,48px)!important}@media (min-width:1024px){#btn-pe-undo svg,#btn-pe-redo svg,#btn-pe-clear svg,.pe-grid-btn svg{width:24px!important;height:24px!important}}.pe-pane-solid{background:#1a1a1a;border-radius:8px;padding:20px;box-shadow:0 8px 16px #00000080;-webkit-backdrop-filter:none!important;border:1px solid #ffffff26!important}.preview-shape-circle .mini-key{border-radius:50%;width:10px;height:10px;margin:0}.preview-shape-circle .mini-row{gap:0}.preview-shape-circle .mini-row.shift{margin-left:11px}.preview-shape-square .mini-key{border-radius:1px;width:9px;height:9px;margin:0}.preview-shape-square .mini-row.shift{margin-left:11px}.preview-shape-hexagon .mini-key{clip-path:url(#pe-clip-pointy);border-radius:0;width:10px;height:12px;margin:0}.preview-shape-hexagon .mini-row{gap:0;margin-bottom:-3px}.preview-shape-hexagon .mini-row.shift{margin-left:11px}.pe-cell.active-note.collision-warning{animation:1s infinite alternate pulse-collision;z-index:100!important;border:2px solid #ff3b30!important;box-shadow:0 0 15px #ff3b30,inset 0 0 10px #ff3b30!important}@keyframes pulse-collision{0%{opacity:1;transform:scale(1)}to{opacity:.7;transform:scale(1.05)}}.pattern-editor-controls{grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px;padding:15px;display:grid}@media (max-width:932px) and (orientation:portrait){.pattern-editor-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.pattern-editor-controls>.pe-section:first-child{grid-column:span 2}.pe-grid-size-controls{min-width:40px;border-radius:12px!important;flex-direction:column!important;gap:2px!important;padding:6px 4px!important}.pe-grid-size-label{display:none!important}.pe-grid-size-controls input{width:28px!important;padding:0!important;font-size:13px!important}}.pe-section{flex-direction:column;gap:12px;padding:12px;display:flex}.pe-section-title{color:#666;letter-spacing:1.5px;border-bottom:1px solid #ffffff0d;margin-bottom:5px;padding-bottom:5px;font-size:9px;font-weight:800}.pe-control-row{align-items:flex-end;gap:12px;display:flex}.pe-note-badge{background:var(--glass-bg-light);color:var(--accent);text-align:center;border-radius:4px;min-width:28px;padding:2px 6px;font-size:10px;font-weight:700}.pe-control-group{flex-direction:column;gap:5px;display:flex}.pe-control-group label{color:var(--accent);font-size:10px;font-weight:700}.pe-control-group input[type=number],.pe-control-group input[type=text],.pe-control-group select{color:#fff;background:#1a1a1a;border:1px solid #333;border-radius:6px;outline:none;padding:6px 8px;font-size:11px;transition:border-color .2s}.pe-control-group input:focus,.pe-control-group select:focus{border-color:var(--accent)}.pattern-grid{background:#111;border-radius:4px;justify-content:center;gap:1px 0;max-height:50vh;margin:0 auto 20px;padding:10px;display:grid;overflow:auto}.pattern-grid.honeycomb .pe-cell.shifted{transform:translate(25px)}.pattern-grid.honeycomb{padding-right:35px}.pe-cell{cursor:pointer;color:#666;-webkit-user-select:none;user-select:none;background:#222;border:1px solid #333;border-radius:4px;justify-content:center;align-items:center;font-size:14px;font-weight:700;transition:all .1s;display:flex}.pe-cell.hexagon{clip-path:url(#pe-clip-pointy);border:none;border-radius:0}.pe-cell.circle{border-radius:50%}.pe-cell.diamond{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);border:none;border-radius:0}.pe-cell.square,.pe-cell.original{border-radius:6px}.pe-cell:not(.original):not(.square){border:1px solid #ffffff0d}.pe-cell:hover{background:#333;border-color:#555}.pe-cell.active-note{color:#fff;background:#444;box-shadow:inset 0 0 10px #ffffff0d}.pe-cell.sharp{color:var(--accent)}.pe-cell.root{background:var(--accent)!important;color:#000!important}.pe-grid-overlay{z-index:100;pointer-events:auto;position:absolute;top:10px;right:10px}.pe-grid-wrapper{overflow:hidden}.pattern-editor-footer{justify-content:center;gap:12px;margin-top:20px;display:flex}.pe-empty-btn{color:#888;cursor:pointer;background:#222;border:1px solid #333;border-radius:4px;width:100%;margin-top:8px;padding:5px;font-size:10px;display:block}.pe-empty-btn:hover{color:#fff;background:#333}.pe-axis-row{cursor:default;background:#ffffff08;border:1px solid #ffffff12;border-radius:8px;align-items:center;gap:7px;padding:5px 8px;transition:border-color .2s,background .2s;display:flex}.pe-axis-row:hover{background:#ffffff0f;border-color:#ffffff24}.pe-axis-row.pe-axis-row--focused{border-color:var(--accent);background:#ff9f0a0f}.pe-axis-row.pe-axis-row-offset{border-color:#5583cc33}.pe-axis-dir-badge{color:#aaa;background:#ffffff12;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:14px;font-weight:600;display:flex}.pe-badge-h{color:#4aa0ff;background:#007aff2e}.pe-badge-ul{color:#4ecb6a;background:#34c75926}.pe-badge-ur{color:#ffb830;background:#ff9f0a26}.pe-badge-v{color:#bf7eff;background:#af52de2e}.pe-badge-offset{color:#6a9edd;background:#5583cc26}.pe-axis-input-wrap{cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.pe-axis-dir-text{color:#666;letter-spacing:.4px;font-size:8.5px;font-weight:600}.pe-axis-input{color:#fff;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-appearance:none;appearance:none;background:0 0;border:none;border-bottom:1px solid #333;outline:none;width:100%;padding:3px 5px;font-size:13px;font-weight:700;transition:border-color .2s}.pe-axis-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pe-axis-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pe-axis-input:focus{border-bottom-color:var(--accent)}.pe-axis-input-offset{color:#6a9edd}#pe-min-note-wrap,#pe-max-note-wrap{cursor:grab;touch-action:none}.pe-axis-interval-name{color:var(--accent);letter-spacing:.3px;white-space:nowrap;text-overflow:ellipsis;font-size:8px;font-weight:700;overflow:hidden}#pe-axiom-svg .axiom-arrow{cursor:pointer;transition:opacity .15s}#pe-axiom-svg .axiom-arrow:hover{opacity:.8}#pe-axiom-svg .axiom-label{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.pe-axis-row.pe-hidden{display:none!important}#pe-axiom-controller{-webkit-user-select:none;user-select:none;touch-action:none;z-index:5;-webkit-backdrop-filter:var(--glass-blur);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative}#pe-axiom-svg{filter:drop-shadow(0 8px 16px #0009)}.pe-dir-input{z-index:10;transform:translate(calc(-50% + cos(var(--angle)) * var(--dist)), calc(-50% + sin(var(--angle)) * var(--dist)));cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:var(--glass-blur);filter:drop-shadow(0 0 1px #ffffff73)drop-shadow(0 4px 12px #00000059);flex-direction:column;justify-content:center;align-items:center;gap:2px;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s,filter .2s;display:flex;position:absolute;top:50%;left:50%}.pe-dir-input.pe-axis-chip--dragging,.pe-axiom-center-cell.pe-axis-chip--dragging{filter:brightness(1.25) contrast(1.1) drop-shadow(0 0 4px #fffc) drop-shadow(0 0 20px var(--glow-color,#fff6))!important;cursor:grabbing!important;z-index:100!important}#pattern-editor-modal[data-grid=pointy-top] .pe-dir-input{clip-path:url(#pe-clip-pointy);border-radius:0;width:70px;height:80.8px}#pattern-editor-modal[data-grid=flat-top] .pe-dir-input{clip-path:url(#pe-clip-flat);border-radius:0;width:80.8px;height:70px}#pattern-editor-modal[data-grid=square] .pe-dir-input{clip-path:none;border:var(--glass-border);filter:none;border-radius:10.5px;width:70px;height:70px;box-shadow:inset 0 1px 1.5px #ffffff4d,0 4px 12px #0000004d}.pe-dir-input .pe-axis-dir-badge{pointer-events:none;background:0 0;font-size:14px;text-align:center!important;width:100%!important;color:inherit!important;opacity:1!important;margin:0!important;position:absolute!important;top:10px!important;left:0!important}.pe-dir-input .pe-axis-input-wrap,.pe-axiom-center-cell .pe-axis-input-wrap{pointer-events:none;z-index:2;flex-direction:column!important;align-items:center!important;width:100%!important;display:flex!important;position:absolute!important;top:52%!important;left:50%!important;transform:translate(-50%,-50%)!important}.pe-dir-input .pe-axis-input,.pe-axiom-center-cell .pe-axis-input{pointer-events:all;text-align:center!important;-webkit-appearance:none!important;appearance:none!important;box-sizing:border-box!important;width:40px!important;color:inherit!important;background:0 0!important;border:none!important;margin:0 auto!important;padding:0!important;font-family:inherit!important;font-size:14px!important;line-height:1!important;display:block!important}.pe-dir-input .pe-axis-interval-name{pointer-events:none;font-weight:700;text-align:center!important;width:100%!important;color:inherit!important;opacity:.9!important;font-size:9px!important;position:absolute!important;bottom:15px!important;left:0!important}.pe-dir-input:hover{filter:brightness(1.1);transform:translate(calc(-50% + cos(var(--angle)) * var(--dist)), calc(-50% + sin(var(--angle)) * var(--dist))) scale(1.05)}#pe-dir-h{color:#fff;--glow-color:#007affb3;background:linear-gradient(145deg,#007aff73 0%,#004baa42 100%);border:1.5px solid #4aa0ff8c}#pe-dir-ul{color:#fff;--glow-color:#34c759b3;background:linear-gradient(145deg,#34c75973 0%,#1c873a42 100%);border:1.5px solid #4ecb6a8c}#pe-dir-ur{color:#fff;--glow-color:#ff9f0ab3;background:linear-gradient(145deg,#ff9f0a73 0%,#b45f0042 100%);border:1.5px solid #ffb8308c}#pe-dir-v{color:#fff;--glow-color:#af52deb3;background:linear-gradient(145deg,#af52de73 0%,#732d9b42 100%);border:1.5px solid #bf7eff8c}.pe-dir-input:focus-within{filter:drop-shadow(0 0 2px #fffc) drop-shadow(0 0 16px var(--glow-color,#007aff99))!important}#pattern-editor-modal[data-grid=square] .pe-dir-input:focus-within{box-shadow:inset 0 1px 2px #fff9, 0 0 20px var(--glow-color,#007aff99)!important;border-color:var(--accent)!important;filter:none!important}:root[data-theme=light] #pe-dir-h{color:#004da6;--glow-color:#007aff66;background:linear-gradient(145deg,#007aff3d 0%,#007aff1a 100%);border:1.5px solid #007aff73}:root[data-theme=light] #pe-dir-ul{color:#175f28;--glow-color:#34c75966;background:linear-gradient(145deg,#34c7593d 0%,#34c7591a 100%);border:1.5px solid #28a04673}:root[data-theme=light] #pe-dir-ur{color:#844c00;--glow-color:#ff9f0a66;background:linear-gradient(145deg,#ff9f0a42 0%,#ff9f0a1f 100%);border:1.5px solid #d2780073}:root[data-theme=light] #pe-dir-v{color:#5d1c82;--glow-color:#af52de66;background:linear-gradient(145deg,#af52de3d 0%,#af52de1a 100%);border:1.5px solid #913cbe73}:root[data-theme=light] .pe-dir-input{filter:drop-shadow(0 0 1px #00000038)drop-shadow(0 3px 8px #0000001a)}:root[data-theme=light] #pattern-editor-modal[data-grid=square] .pe-dir-input{filter:none;box-shadow:inset 0 1px 1.5px #fff9,0 3px 8px #0000001a}#pattern-editor-modal[data-grid=pointy-top] .pe-axiom-center-cell{clip-path:url(#pe-clip-pointy);border-radius:0;width:70px;height:80.8px}#pattern-editor-modal[data-grid=flat-top] .pe-axiom-center-cell{clip-path:url(#pe-clip-flat);border-radius:0;width:80.8px;height:70px}#pattern-editor-modal[data-grid=square] .pe-axiom-center-cell{clip-path:none;filter:none;border:1px solid #ffffff59;border-radius:10.5px;width:70px;height:70px;box-shadow:inset 0 1px 2px #fff6,0 0 25px #1565c080}.pe-axiom-center-cell{background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 75%, #fff 25%) 0%, var(--accent) 100%);filter:drop-shadow(0 0 1px #ffffff8c)drop-shadow(0 0 25px #1565c080);z-index:5;pointer-events:all;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:var(--glass-blur);flex-direction:column;justify-content:center;align-items:center;font-size:14px;font-weight:900;transition:all .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important}.pe-axiom-center-cell .pe-axis-dir-badge,.pe-axiom-center-cell .pe-axis-interval-name,.pe-axiom-center-cell .pe-axis-input{color:#fff!important}.pe-axiom-center-cell:focus-within{filter:drop-shadow(0 0 2px #fffc)drop-shadow(0 0 35px #1565c0cc)!important;transform:translate(-50%,-50%)scale(1.05)!important}#pattern-editor-modal[data-grid=square] .pe-axiom-center-cell:focus-within{filter:none!important;box-shadow:inset 0 1px 2px #fff9,0 0 35px #1565c0cc!important}:root[data-theme=light] .pe-axiom-center-cell{background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 85%, #fff 15%) 0%, var(--accent) 100%);filter:drop-shadow(0 0 1px #00000040)drop-shadow(0 4px 16px #1565c066)}.pe-axiom-bg-shape{fill:url(#pe-axiom-bg-grad);stroke:#ffffff38;stroke-width:1.5px;transition:stroke .3s}:root[data-theme=light] .pe-axiom-bg-shape{stroke:#0000001f!important}:root[data-theme=light] #pe-axiom-svg{filter:drop-shadow(0 6px 16px #00000014)}#pe-axiom-svg line{stroke:#ffffff26;stroke-width:1.5px;stroke-dasharray:4 4}:root[data-theme=light] #pe-axiom-svg line{stroke:#00000026}#pattern-editor-modal[data-grid=square] #pe-dir-ul,#pattern-editor-modal[data-grid=square] #pe-dir-ur{visibility:hidden!important;pointer-events:none!important}.pe-grid-group,.pe-action-group{background:var(--glass-bg-dark);-webkit-backdrop-filter:var(--glass-blur);border-radius:var(--radius-btn,12px);border:var(--glass-border);box-shadow:inset 0 1px 1.5px #ffffff1f, var(--glass-shadow);flex-direction:column;gap:8px;padding:5px;display:flex}:root[data-theme=light] .pe-grid-group,:root[data-theme=light] .pe-action-group{box-shadow:inset 0 1px 1.5px #ffffff73, var(--glass-shadow)}.pe-section-label{color:var(--text-tertiary);letter-spacing:.8px;opacity:.85;margin-bottom:6px;font-size:11px;font-weight:700;display:block}.pe-section-subtitle{color:var(--text-secondary);letter-spacing:.3px;opacity:.8;font-size:10px;font-weight:600}.pe-range-overlay{background:var(--glass-bg-dark);-webkit-backdrop-filter:var(--glass-blur);z-index:10;border-radius:var(--radius-btn,12px);border:var(--glass-border);width:280px;box-shadow:inset 0 1px 1.5px #ffffff1f, var(--glass-shadow);justify-content:center;gap:15px;padding:10px 18px;display:flex;position:absolute;bottom:50px;left:50%;transform:translate(-50%)}:root[data-theme=light] .pe-range-overlay{box-shadow:inset 0 1px 1.5px #ffffff73, var(--glass-shadow)}.pe-range-label{color:var(--text-tertiary);letter-spacing:.5px;font-size:9px;font-weight:900}.pe-range-input{background:var(--glass-bg-light);border:var(--glass-border);width:48px;color:var(--text-primary);text-align:center;box-sizing:border-box;border-radius:8px;outline:none;padding:2px 4px;font-size:11.5px;font-weight:800;transition:border-color .2s,background .2s,box-shadow .2s}.pe-range-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent)}.pe-preview-title{text-align:center;width:100%;color:var(--text-tertiary);letter-spacing:.8px;z-index:5;opacity:.85;pointer-events:none;font-size:10px;font-weight:700;display:block;position:absolute;top:12px}.pe-zoom-controls{z-index:10;background:var(--glass-bg-dark);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);border-radius:var(--radius-btn,12px);box-shadow:inset 0 1px 1.5px #ffffff1f, var(--glass-shadow);align-items:center;gap:4px;padding:4px 8px;display:flex;position:absolute;top:10px;right:10px}:root[data-theme=light] .pe-zoom-controls{box-shadow:inset 0 1px 1.5px #ffffff73, var(--glass-shadow)}.pe-zoom-btn{background:var(--glass-bg-light);border:var(--glass-border);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:4px 6px;transition:all .15s;display:flex;color:var(--text-primary)!important}.pe-zoom-btn:hover{border-color:var(--accent);background:var(--glass-bg-hover)!important}.pe-zoom-btn:active{transform:scale(.92);background:var(--glass-bg-active)!important}#pe-zoom-badge{color:var(--text-secondary);text-align:center;-webkit-user-select:none;user-select:none;cursor:grab;touch-action:none;border-radius:6px;min-width:42px;padding:3px 6px;font-size:11px;font-weight:700;transition:background .15s,color .15s,box-shadow .15s}#pe-zoom-badge:hover{background:var(--glass-bg-hover);color:var(--text-primary)}#pe-zoom-badge.pe-zoom-badge--dragging{background:var(--glass-bg-active);color:var(--accent);box-shadow:0 0 8px color-mix(in srgb, var(--accent) 35%, transparent);cursor:grabbing!important}.pe-preview-actions{border-top:var(--glass-border);background:var(--glass-bg-dark);-webkit-backdrop-filter:var(--glass-blur);flex-direction:column;gap:8px;padding:10px;display:flex;box-shadow:inset 0 1px #ffffff14}#pe-layout-name{border:var(--glass-border);background:var(--glass-bg-light);width:100%;color:var(--text-primary);text-align:center;box-sizing:border-box;border-radius:8px;outline:none;padding:8px 12px;font-size:12px;font-weight:500;transition:border-color .2s,background .2s,box-shadow .2s}#pe-layout-name:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent)}.pe-btn-save{background:var(--accent)!important;color:#fff!important;border-color:#0000!important}.pe-btn-save:hover{background:color-mix(in srgb, var(--accent) 90%, #fff)!important;color:#fff!important}.pe-btn-cancel,.pe-btn-import,.pe-btn-export{color:var(--text-primary)!important}.pe-btn-save:active,.pe-btn-cancel:active,.pe-btn-import:active,.pe-btn-export:active{transform:scale(.95)}.pattern-container{box-sizing:border-box;grid-template-columns:repeat(2,1fr);justify-content:center;gap:8px;width:100%;max-width:850px;margin:0 auto;padding:0 10px;display:grid;overflow-x:auto}@media (min-width:932px),(orientation:landscape){.pattern-container{grid-template-columns:repeat(4,1fr)}}.pattern-box{text-align:center;border-radius:8px;padding:8px}.patterns-row{justify-content:center;gap:15px;margin-top:5px;display:flex}.mini-grid{grid-template-rows:1fr 1fr;gap:1px;display:grid}.mini-row{justify-content:center;gap:1px;display:flex}.mini-row.shift{margin-left:3.5px}.mini-key{background:#333;border:1px solid #444;border-radius:1px;width:6px;height:11px}.mini-key.root{background:var(--accent);border-color:#fff}.mini-key.chord{background:#00e5ff}@media (max-width:932px),(orientation:portrait){.mini-grid,.mini-row{gap:1px}.mini-row.shift{margin-left:4px}.mini-key{border-radius:1px;width:7px;height:13px}}.pattern-container{box-sizing:border-box;grid-template-columns:repeat(2,1fr);justify-content:center;gap:8px;width:100%;max-width:850px;margin:0 auto;padding:0 10px;display:grid}@media (min-width:932px),(orientation:landscape){.pattern-container{grid-template-columns:repeat(4,1fr)}}.pattern-box{text-align:center;background:var(--glass-bg-light);border:var(--glass-border);border-radius:8px;padding:8px;box-shadow:inset 0 1px 1px #ffffff14,0 2px 8px #0000001f}:root[data-theme=light] .pattern-box{box-shadow:inset 0 1px 1px #fff9,0 2px 6px #0000000d}.pattern-label{color:var(--text-primary);margin-bottom:5px;font-size:10px;font-weight:700}:root[data-theme=light] .mini-key{background:#c8c8cc;border-color:#a0a0a5}.chord-preview-box{background:#ffffff0d;border-radius:8px;justify-content:center;align-items:center;min-height:50px;margin-bottom:8px;padding:8px;display:flex}.chord-preview-label{color:#666;letter-spacing:1px;margin-right:10px;font-size:10px}.tb-handle{transition:transform var(--transition-fast);box-shadow:0 0 10px #00000080}.tb-handle:hover{transform:scale(1.1);z-index:25!important}.tb-handle:active{cursor:grabbing;transform:scale(.95)}#tb-world{will-change:transform}#tile-builder-viewport:active{cursor:grabbing}.layout-pill-widget{z-index:2600;pointer-events:none;isolation:isolate;width:100%;margin-top:calc(var(--ad-top-padding,0px) + var(--hud-height,calc(env(safe-area-inset-top,0px) + 64px)));flex-direction:column;align-items:center;transition:margin-top .5s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;top:0;left:0}body.fullscreen-mode .layout-pill-widget{margin-top:calc(var(--ad-top-padding,0px) + var(--hud-height,64px))}@media (orientation:portrait) and (max-width:600px){.layout-pill-widget{margin-top:calc(var(--ad-top-padding,0px) + var(--hud-height,calc(env(safe-area-inset-top,0px) + 120px)))}body.fullscreen-mode .layout-pill-widget{margin-top:calc(var(--ad-top-padding,0px) + var(--hud-height,120px))}}.layout-pill-btn{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;z-index:2;justify-content:center;align-items:center;width:64px;min-width:64px;height:24px;margin:0;padding:0;transition:transform .28s cubic-bezier(.175,.885,.32,1.15);display:flex;position:relative;-webkit-backdrop-filter:none!important;box-shadow:none!important;background:0 0!important;border:none!important;border-radius:0!important}.layout-pill-btn:before{content:"";position:absolute;inset:-12px -12px -14px}body.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.hud-sliding-out .layout-pill-widget{margin-top:calc(var(--ad-top-padding,0px) + max(env(safe-area-inset-top,0px), 2px))!important}body.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:calc(var(--ad-top-padding,0px) + max(env(safe-area-inset-top,0px), 2px))!important}@media (orientation:portrait){body.fullscreen-mode.cutout-type-dynamic_island.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.cutout-type-dynamic_island.hud-sliding-out .layout-pill-widget,body.fullscreen-mode.ios-profile-dynamic_island.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.ios-profile-dynamic_island.hud-sliding-out .layout-pill-widget{margin-top:max(calc(var(--cutout-bottom,48px) + 4px), 52px)!important}body.fullscreen-mode.cutout-type-dynamic_island.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:max(calc(var(--cutout-bottom,48px) + 4px), 52px)!important}body.fullscreen-mode.ios-profile-dynamic_island.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:max(calc(var(--cutout-bottom,48px) + 4px), 52px)!important}body.fullscreen-mode.cutout-type-punch:not(.cutout-pos-corner-left):not(.cutout-pos-corner-right):not(.cutout-type-punch-left):not(.cutout-type-punch-right).hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.cutout-type-punch:not(.cutout-pos-corner-left):not(.cutout-pos-corner-right):not(.cutout-type-punch-left):not(.cutout-type-punch-right).hud-sliding-out .layout-pill-widget,body.fullscreen-mode.cutout-type-punch-center.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.cutout-type-punch-center.hud-sliding-out .layout-pill-widget{margin-top:calc(var(--cutout-bottom,24px) - 6px)!important}body.fullscreen-mode.cutout-type-punch:not(.cutout-pos-corner-left):not(.cutout-pos-corner-right):not(.cutout-type-punch-left):not(.cutout-type-punch-right).hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:calc(var(--cutout-bottom,24px) - 6px)!important}body.fullscreen-mode.cutout-type-punch-center.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:calc(var(--cutout-bottom,24px) - 6px)!important}body.fullscreen-mode.cutout-type-punch.cutout-pos-corner-left.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.cutout-type-punch.cutout-pos-corner-left.hud-sliding-out .layout-pill-widget,body.fullscreen-mode.cutout-type-punch.cutout-pos-corner-right.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.cutout-type-punch.cutout-pos-corner-right.hud-sliding-out .layout-pill-widget,body.fullscreen-mode.cutout-type-punch-left.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.cutout-type-punch-left.hud-sliding-out .layout-pill-widget,body.fullscreen-mode.cutout-type-punch-right.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.cutout-type-punch-right.hud-sliding-out .layout-pill-widget{margin-top:2px!important}body.fullscreen-mode.cutout-type-punch.cutout-pos-corner-left.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:2px!important}body.fullscreen-mode.cutout-type-punch.cutout-pos-corner-right.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:2px!important}body.fullscreen-mode.cutout-type-punch-left.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:2px!important}body.fullscreen-mode.cutout-type-punch-right.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:2px!important}body.fullscreen-mode.cutout-type-notch.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.cutout-type-notch.hud-sliding-out .layout-pill-widget,body.fullscreen-mode.ios-profile-notch.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.ios-profile-notch.hud-sliding-out .layout-pill-widget{margin-top:max(calc(var(--cutout-bottom,35px) + 4px), 39px)!important}body.fullscreen-mode.cutout-type-notch.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:max(calc(var(--cutout-bottom,35px) + 4px), 39px)!important}body.fullscreen-mode.ios-profile-notch.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:max(calc(var(--cutout-bottom,35px) + 4px), 39px)!important}body.fullscreen-mode.cutout-present:not(.cutout-type-punch).cutout-pos-center.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.cutout-present:not(.cutout-type-punch).cutout-pos-center.hud-sliding-out .layout-pill-widget{margin-top:max(calc(var(--cutout-bottom,40px) + 4px), 44px)!important}body.fullscreen-mode.cutout-present:not(.cutout-type-punch).cutout-pos-center.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:max(calc(var(--cutout-bottom,40px) + 4px), 44px)!important}}@media (orientation:landscape){body.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.hud-sliding-out .layout-pill-widget,body.fullscreen-mode.hud-hidden:not(.hud-sliding-in) #minimap-bar:not(.hud-peek)~.layout-pill-widget,body.fullscreen-mode.hud-sliding-out .layout-pill-widget{margin-top:max(env(safe-area-inset-top,0px), 2px)!important}body.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:max(env(safe-area-inset-top,0px), 2px)!important}body.fullscreen-mode.hud-hidden:not(.hud-sliding-in):not(:has(#minimap-bar.hud-peek)) .layout-pill-widget{margin-top:max(env(safe-area-inset-top,0px), 2px)!important}}.layout-pill-arrow-icon{filter:drop-shadow(0 1px 3px #0006);width:36px;height:16px;transition:transform .2s cubic-bezier(.2,.8,.2,1)}.layout-pill-arrow-icon .arrow-stroke-bg{stroke:var(--key-black);stroke-width:5.5px}.layout-pill-arrow-icon .arrow-stroke-fg{stroke:var(--key-white);stroke-width:3.2px;transition:stroke .2s}.layout-pill-btn:hover{background:0 0!important;border:none!important}.layout-pill-btn:hover .layout-pill-arrow-icon{transform:translateY(2px)}.layout-pill-btn:hover .layout-pill-arrow-icon .arrow-stroke-fg{stroke:var(--accent)}.layout-pill-btn:active{transform:translateY(3px)scale(.95);background:0 0!important}.layout-pill-btn.is-dragging{cursor:grabbing!important;transition:none!important}.layout-pill-btn.is-dragging .layout-pill-arrow-icon{filter:drop-shadow(0 0 10px var(--accent)) drop-shadow(0 1px 4px #00000073);transition:none!important;transform:none!important}.layout-pill-btn.is-dragging .layout-pill-arrow-icon .arrow-stroke-fg{stroke:var(--accent)}.layout-pill-btn.is-pill-mode{-webkit-backdrop-filter:none!important;box-shadow:none!important;background:0 0!important;border:none!important;border-radius:0!important}.layout-pill-btn.is-pill-mode .layout-pill-arrow-icon{filter:drop-shadow(0 0 10px var(--accent)) drop-shadow(0 1px 4px #0000008c);transition:transform .15s;transform:none!important}.layout-pill-btn.is-pill-mode .layout-pill-arrow-icon .arrow-stroke-fg{stroke:var(--accent);stroke-width:3.8px}.layout-pill-btn.is-pill-mode .layout-pill-arrow-icon .arrow-stroke-bg{stroke-width:6.2px}.layout-pill-trails{pointer-events:none;z-index:1;width:64px;height:24px;position:absolute;top:0;left:50%;overflow:visible;transform:translate(-50%)}.layout-pill-widget.expanded .layout-pill-trails{display:none!important}.layout-pill-live-streamer{pointer-events:none;opacity:0;height:4px;filter:drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 3px var(--accent));will-change:width, left, opacity;border-radius:2px;transition:opacity .15s;position:absolute;top:10px;transform:none}.layout-pill-live-streamer.active{opacity:.95}.layout-pill-live-streamer.at-boundary{height:4.5px;top:9.75px;filter:drop-shadow(0 0 12px var(--accent)) drop-shadow(0 0 5px var(--key-white,#fff))!important;opacity:1!important;transform:none!important}.layout-pill-live-streamer.streak-right{background:linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--accent) 35%, transparent) 18%, color-mix(in srgb, var(--accent) 85%, transparent) 55%, var(--accent) 88%, var(--accent) 100%)}.layout-pill-live-streamer.streak-left{background:linear-gradient(to left, transparent 0%, color-mix(in srgb, var(--accent) 35%, transparent) 18%, color-mix(in srgb, var(--accent) 85%, transparent) 55%, var(--accent) 88%, var(--accent) 100%)}.layout-pill-wake-echo{pointer-events:none;will-change:transform, opacity, filter;width:64px;height:24px;transform:translateX(var(--echo-x,0px)) scaleX(var(--echo-scale,1));opacity:.7;filter:drop-shadow(0 0 8px var(--accent));justify-content:center;align-items:center;transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),filter .95s ease-out;display:flex;position:absolute;top:0;left:0}.layout-pill-wake-echo.fade-out{transform:translateX(calc(var(--echo-x,0px) * .35)) scaleX(.7);opacity:0;filter:blur(7px) drop-shadow(0 0 12px var(--accent))}.layout-pill-wake-echo .layout-pill-arrow-icon{width:36px;height:16px}.layout-pill-wake-echo .trail-stroke-fg{stroke:var(--accent);stroke-width:3.8px;stroke-linecap:round}.layout-pill-motion-trail{pointer-events:none;justify-content:center;align-items:center;width:64px;height:24px;display:flex;position:absolute;top:0;left:0;overflow:visible}.layout-pill-motion-trail .trail-ghost-primary,.layout-pill-motion-trail .trail-ghost-secondary{pointer-events:none;will-change:transform, opacity, filter;justify-content:center;align-items:center;width:64px;height:24px;display:flex;position:absolute;top:0;left:0}.layout-pill-motion-trail .trail-ghost-primary{transform:translateX(var(--trail-offset,0px)) scaleX(var(--trail-stretch,1));opacity:.85;filter:drop-shadow(0 0 10px var(--accent));transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),filter .95s ease-out}.layout-pill-motion-trail .trail-ghost-secondary{transform:translateX(var(--trail-offset-half,0px)) scaleX(1.04);opacity:.5;filter:drop-shadow(0 0 5px var(--accent));transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .85s ease-out}.layout-pill-motion-trail .trail-stroke-fg{stroke:var(--accent);stroke-width:3.8px;stroke-linecap:round}.layout-pill-motion-trail .trail-streak-line{pointer-events:none;opacity:.9;height:4px;filter:drop-shadow(0 0 8px var(--accent));will-change:opacity, transform, filter;transform-origin:50%;border-radius:2px;transition:opacity .92s ease-out,transform .92s cubic-bezier(.16,1,.3,1),filter .92s ease-out;position:absolute;top:10px}.layout-pill-motion-trail .trail-streak-line.streak-right{background:linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--accent) 35%, transparent) 18%, color-mix(in srgb, var(--accent) 85%, transparent) 55%, var(--accent) 88%, var(--accent) 100%)}.layout-pill-motion-trail .trail-streak-line.streak-left{background:linear-gradient(to left, transparent 0%, color-mix(in srgb, var(--accent) 35%, transparent) 18%, color-mix(in srgb, var(--accent) 85%, transparent) 55%, var(--accent) 88%, var(--accent) 100%)}.layout-pill-motion-trail .layout-pill-arrow-icon{width:36px;height:16px}.layout-pill-motion-trail.fade-out .trail-ghost-primary{transform:translateX(calc(var(--trail-offset,0px) * .15)) scaleX(.85);opacity:0;filter:blur(7px) drop-shadow(0 0 14px var(--accent))}.layout-pill-motion-trail.fade-out .trail-ghost-secondary{opacity:0;filter:blur(5px) drop-shadow(0 0 8px var(--accent));transform:translate(0)scaleX(.7)}.layout-pill-motion-trail.fade-out .trail-streak-line{opacity:0;filter:blur(5px);transform:scaleX(.3)}.layout-pill-widget.expanded .layout-pill-btn{display:none}.layout-pill-popup{pointer-events:auto;border-radius:var(--radius-btn-square,14px);background:var(--glass-bg-dark);width:90%;max-width:1000px;height:44px;min-height:44px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:var(--glass-border);box-shadow:var(--glass-shadow);box-sizing:border-box;isolation:isolate;will-change:opacity;transform-origin:top;touch-action:none;overscroll-behavior:none;align-items:center;margin-top:4px;padding:4px 5px;animation:.28s cubic-bezier(.16,1,.3,1) forwards layoutPillPushDown;display:flex;position:relative;overflow:hidden}.layout-pill-popup.closing{animation:.2s cubic-bezier(.4,0,1,1) forwards layoutPillPopUp}@keyframes layoutPillPushDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}@keyframes layoutPillPopUp{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(-12px)}}.layout-carousel-container{touch-action:none;overscroll-behavior:none;align-items:center;gap:6px;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.layout-carousel-container.is-dragging{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}.layout-carousel-container.is-dragging *{-webkit-user-select:none!important;user-select:none!important}.layout-carousel-container.is-dragging .layout-carousel-arrow{pointer-events:none!important}.layout-carousel-arrow{aspect-ratio:1;border-radius:var(--radius-btn,12px);width:34px;min-width:34px;height:34px;min-height:34px;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;opacity:.9;background:#ffffff14;border:1px solid #ffffff1f;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .15s;display:flex}.layout-nav-icon{stroke:currentColor;stroke-width:3.2px;pointer-events:none;flex-shrink:0;width:18px;height:18px;transition:transform .15s,stroke .15s}.layout-carousel-arrow:hover{background:var(--glass-bg-hover);border-color:var(--accent);color:var(--accent);opacity:1;transform:scale(1.06)}.layout-carousel-arrow:active{transform:scale(.92)}.layout-carousel-track{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;overscroll-behavior-y:none;overscroll-behavior:contain;scrollbar-width:none;box-sizing:border-box;will-change:scroll-position;-webkit-user-select:none;user-select:none;touch-action:none;scroll-snap-type:none;align-items:center;gap:12px;width:100%;height:100%;padding:0 calc(50% - 60px);display:flex;position:relative;overflow:auto hidden}.layout-carousel-track::-webkit-scrollbar{display:none}.layout-carousel-container.is-dragging .layout-carousel-track{scroll-snap-type:none!important}.layout-carousel-container.is-dragging .layout-card,.layout-carousel-container.is-dragging .layout-card-name{transition:none!important}.layout-card{contain:layout style;width:120px;min-width:120px;height:32px;max-height:32px;box-shadow:none;text-align:center;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;opacity:.72;touch-action:none;background:0 0;border:none;flex:0 0 120px;justify-content:center;align-items:center;padding:0 4px;transition:opacity .3s;display:flex;overflow:hidden}.layout-card:hover{opacity:.92}.layout-card.active{box-shadow:none;opacity:1;background:0 0;border:none;transform:none}.layout-card-name{color:var(--text-primary);text-transform:none;text-align:center;white-space:nowrap;text-overflow:ellipsis;width:100%;max-width:100%;font-size:14px;font-weight:400;line-height:32px;transition:color .3s,opacity .3s,font-weight .2s;display:block;overflow:hidden}.layout-card.active .layout-card-name{color:var(--accent);letter-spacing:normal;text-shadow:0 0 8px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent);font-size:14px;font-weight:700}:root[data-theme=light] .layout-pill-btn{box-shadow:none!important;background:0 0!important;border:none!important}:root[data-theme=light] .layout-pill-btn:hover{background:0 0!important}:root[data-theme=light] .layout-pill-arrow-icon{filter:drop-shadow(0 1px 2px #00000040)}:root[data-theme=light] .layout-pill-arrow-icon .arrow-stroke-bg{stroke:var(--key-white)}:root[data-theme=light] .layout-pill-arrow-icon .arrow-stroke-fg{stroke:var(--key-black)}:root[data-theme=light] .layout-pill-btn:hover .layout-pill-arrow-icon .arrow-stroke-fg{stroke:var(--accent)}:root[data-theme=light] .layout-pill-popup{background:var(--glass-bg-light);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);box-shadow:var(--glass-shadow)}:root[data-theme=light] .layout-carousel-arrow{color:#000000b3;background:#0000000d;border-color:#00000014}:root[data-theme=light] .layout-carousel-arrow:hover{color:var(--accent);background:#0000001a}:root[data-theme=light] .layout-card.active .layout-card-name{color:var(--accent);text-shadow:0 0 8px color-mix(in srgb, var(--accent) 30%, transparent)}.quick-setup-grid{grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:10px;display:grid}.setup-section{flex-direction:column;gap:8px;display:flex}.setup-section h3{font-size:var(--font-heading);letter-spacing:.5px;color:var(--accent);border-bottom:none;margin-top:0;margin-bottom:0;font-weight:600}.setup-desc{font-size:var(--font-body);color:var(--text-secondary);margin-bottom:5px;line-height:1.4}.time-sig-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;display:grid}.time-sig-editor{justify-content:center;align-items:center;gap:4px;margin-top:10px;padding:2px 0;display:flex}.ts-select{color:var(--text-primary);cursor:pointer;-webkit-appearance:none;appearance:none;text-align:center;font-size:14px;font-weight:800;font-family:var(--font-primary), monospace;background:0 0;border:none;width:auto;min-width:25px;margin:0;padding:0}.ts-select:hover{color:var(--accent)}.ts-divider{color:var(--text-muted);margin:0 6px;font-size:14px;font-weight:300}.time-sig-preset,.ts-grid-btn{padding:8px 0;font-size:11px;font-weight:700}.time-sig-preset.active,.ts-grid-btn.active{box-shadow:0 0 12px color-mix(in srgb, var(--accent) 50%, transparent)}.qs-btn-group{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:20px;display:flex}.qs-square-btn{border-radius:var(--radius-btn-square,14px);cursor:pointer;width:56px;height:56px;color:var(--text-primary);background:var(--glass-bg-light);border:var(--glass-border);flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .2s;display:inline-flex}.qs-square-btn:hover{background:var(--glass-bg-hover)}.qs-square-btn.active{background:var(--accent);border-color:var(--accent);color:#000;box-shadow:0 5px 15px #0000004d, 0 0 15px color-mix(in srgb, var(--accent) 30%, transparent);transform:scale(1.05)}.qs-square-btn svg{vector-effect:non-scaling-stroke;width:24px;height:24px}@media (max-width:600px) and (orientation:portrait){.quick-setup-grid{gap:10px}}@media (min-width:1024px){.qs-square-btn{width:76px;height:76px}.qs-square-btn svg{width:38px;height:38px}}#instrument-modal{z-index:5000}#instrument-modal .modal-panel{box-sizing:border-box;flex-direction:column;width:fit-content;max-width:95%;max-height:calc(100% - 20px);margin:20px auto;padding:24px 0;display:flex;overflow:hidden}#instrument-modal h2{margin:0 0 16px}.modal-scroll-wrapper{-webkit-overflow-scrolling:touch;flex:1;padding:4px 24px 16px;overflow-y:auto}.inst-grid{box-sizing:border-box;grid-template-columns:repeat(4,64px);justify-content:center;gap:12px;width:100%;padding:10px 0;display:grid}.instrument-card{box-sizing:border-box;flex-direction:column;align-items:center;gap:6px;width:100%;min-width:0;display:flex}.instrument-btn{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;color:inherit;border:var(--glass-border);cursor:pointer;aspect-ratio:1;box-sizing:border-box;z-index:1;background:#ffffff0d;border-radius:22%;outline:none;justify-content:center;align-items:center;width:100%;height:auto;margin:0;padding:0;font-family:inherit;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 16px #00000026,inset 0 1px 1px #ffffff1a}.instrument-card:hover .instrument-btn,.instrument-btn:hover{background:linear-gradient(135deg,#ffffff2e,#ffffff14);border-color:#fff6;box-shadow:0 8px 24px #0003,0 0 0 1px #ffffff4d}.instrument-btn.active{box-shadow:inset 0 0 0 2px var(--accent), 0 8px 24px #0006;border-color:var(--accent);background:var(--accent);color:#000}.instrument-btn.selected{box-shadow:inset 0 0 0 3px var(--accent), 0 8px 24px #0006;border-color:var(--accent);z-index:50;background:#ffffff26}.instrument-btn.active.selected{background:var(--accent)!important;color:#000!important;border-color:var(--accent)!important;box-shadow:inset 0 0 0 3px var(--accent), 0 8px 24px #0006!important}.instrument-card.active.selected .inst-name,.instrument-btn.active.selected .inst-name{color:var(--accent)!important}.instrument-btn.active.selected .inst-icon{background-color:#000!important}.instrument-btn.selected:not(.active){color:var(--accent)}.instrument-card.selected:not(.active) .inst-name,.instrument-btn.selected:not(.active) .inst-name{color:var(--accent)!important}.instrument-btn.selected:not(.active) .inst-icon{background-color:var(--accent)!important}.inst-icon-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.inst-icon{aspect-ratio:1;filter:drop-shadow(1.3px 0)drop-shadow(-1.3px 0)drop-shadow(0 1.3px)drop-shadow(0 -1.3px);background-color:currentColor;width:60%;max-width:44px;height:60%;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.inst-name{color:var(--text-secondary);text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:11px;font-weight:500;line-height:1.1;transition:color .2s;overflow:hidden}.instrument-card.active .inst-name,.instrument-btn.active .inst-name{font-weight:700;color:var(--accent)!important}.instrument-btn.active .inst-icon{background-color:#000!important}#btn-current-inst{background:var(--glass-bg-light);width:40px;height:40px;-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:5px;display:flex}#btn-current-inst svg{width:24px;height:24px;fill:var(--accent)}@media (min-width:1024px){#instrument-modal .modal-panel{width:85%!important;max-width:820px!important;padding:30px!important}.inst-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:16px!important;padding:15px!important}.instrument-btn{min-height:100px!important;padding:0!important}.inst-icon{max-width:44px!important}.inst-name{font-size:13px!important}}@media (max-width:932px) and (orientation:landscape){#instrument-modal .modal-panel{max-width:95%;width:fit-content!important;margin:0 auto!important}.modal-scroll-wrapper{padding:4px 12px 16px}.inst-grid{grid-template-columns:repeat(5,64px);gap:12px;padding:10px 0}.instrument-btn{padding:0!important}}@media (orientation:portrait){.inst-grid{grid-template-columns:repeat(4,64px)}}:root[data-theme=light] .instrument-btn{background:var(--glass-bg-light)!important;color:var(--text-primary)!important}:root[data-theme=light] .instrument-btn:hover{background:var(--glass-bg-hover)!important}:root[data-theme=light] .instrument-btn.active{box-shadow:inset 0 0 0 2px var(--accent)!important;border-color:var(--accent)!important;background:var(--accent)!important;color:#000!important}:root[data-theme=light] .instrument-btn.selected{box-shadow:inset 0 0 0 3px var(--accent)!important;border-color:var(--accent)!important;background:var(--glass-bg-hover)!important}:root[data-theme=light] .instrument-btn.active.selected{background:var(--accent)!important;color:#000!important;border-color:var(--accent)!important;box-shadow:inset 0 0 0 3px var(--accent)!important}:root[data-theme=light] .instrument-card.active.selected .inst-name,:root[data-theme=light] .instrument-btn.active.selected .inst-name{color:#000!important}:root[data-theme=light] .instrument-btn.active .inst-icon,:root[data-theme=light] .instrument-btn.active.selected .inst-icon{background-color:#000!important}:root[data-theme=light] .instrument-btn.selected:not(.active),:root[data-theme=light] .instrument-card.selected:not(.active) .inst-name,:root[data-theme=light] .instrument-btn.selected:not(.active) .inst-name{color:color-mix(in srgb, var(--accent) 75%, #000)!important}:root[data-theme=light] .instrument-btn.selected:not(.active) .inst-icon{background-color:color-mix(in srgb, var(--accent) 75%, #000)!important}.custom-sf-panel{border:var(--glass-border);box-sizing:border-box;background:#ffffff08;border-radius:12px;flex-direction:column;gap:10px;margin:4px 10px 16px;padding:12px 16px;transition:all .3s;display:flex}.custom-sf-header{justify-content:space-between;align-items:center;display:flex}.custom-sf-title{color:#ffffffd9;font-size:13px;font-weight:600}.custom-sf-status-badge{color:#fff9;background:#ffffff1a;border:1px solid #ffffff26;border-radius:20px;padding:2px 8px;font-size:10px;font-weight:500}.custom-sf-status-badge.active-sf{color:#30d158;background:#30d15826;border-color:#30d1584d}.custom-sf-actions{gap:8px;width:100%;display:flex}.custom-sf-actions .btn-action{text-align:center;border-radius:8px;flex:1;justify-content:center;margin:0;padding:8px 12px;font-size:11px}.custom-sf-url-panel{opacity:1;gap:8px;width:100%;max-height:40px;margin-top:4px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.custom-sf-url-panel.hidden-panel{opacity:0;pointer-events:none;max-height:0;margin-top:0}#sf-url-input{color:#fff;background:#0003;border:1px solid #ffffff1a;border-radius:8px;outline:none;flex:1;padding:8px 12px;font-family:inherit;font-size:12px;transition:border-color .2s}#sf-url-input:focus{border-color:var(--accent)}#btn-sf-download{border-radius:8px;margin:0;padding:8px 12px;font-size:11px}body.lite-engine-active *{box-shadow:none!important;text-shadow:none!important;-webkit-backdrop-filter:none!important;transition:none!important;animation:none!important}body.lite-engine-active .blob,body.lite-engine-active .glass-blobs{display:none!important}body.lite-engine-active #loading-overlay{background:#000!important}body.lite-engine-active .btn-promo-primary,body.lite-engine-active #btn-promo-go-pro,body.lite-engine-active #btn-promo-watch-ad,body.lite-engine-active #btn-rewarded-ad{background:var(--accent)!important;color:#fff!important;opacity:1!important;background:linear-gradient(135deg,#ff9f0a,#ff3b30)!important}body.lite-engine-active .minimap-btn{border:none!important}body.lite-engine-active .glass-interactive.active,body.lite-engine-active .btn-icon.active,body.lite-engine-active #settings-instrument-grid .instrument-row-btn.active,body.lite-engine-active .pad-preset-btn.active,body.lite-engine-active .segment.active,:root[data-theme=light] body.lite-engine-active .glass-interactive.active,:root[data-theme=light] body.lite-engine-active .btn-icon.active,:root[data-theme=light] body.lite-engine-active #settings-instrument-grid .instrument-row-btn.active,:root[data-theme=light] body.lite-engine-active .pad-preset-btn.active,:root[data-theme=light] body.lite-engine-active .segment.active{background:var(--accent)!important;border-color:var(--accent)!important;color:#000!important}body.lite-engine-active #settings-instrument-grid .instrument-row-btn.active .inst-name,body.lite-engine-active #settings-instrument-grid .instrument-row-btn.active .inst-badge,body.lite-engine-active .pad-preset-btn.active .preset-subtitle,:root[data-theme=light] body.lite-engine-active #settings-instrument-grid .instrument-row-btn.active .inst-name,:root[data-theme=light] body.lite-engine-active #settings-instrument-grid .instrument-row-btn.active .inst-badge,:root[data-theme=light] body.lite-engine-active .pad-preset-btn.active .preset-subtitle{color:#000!important}body.lite-engine-active .btn-icon.active svg,body.lite-engine-active .btn-icon.active img,:root[data-theme=light] body.lite-engine-active .btn-icon.active svg,:root[data-theme=light] body.lite-engine-active .btn-icon.active img{filter:brightness(0)!important}body.lite-engine-active #activeCanvas{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}