@layer tokens,reset,base,layout,components,utilities;@layer tokens{:root{--app-desktop-width: 1280;--app-gutter: 6px;--radius: 8px;--z-modal: 10000;--z-screen-capture: 9999;--z-header: 900;--z-overlay: 800;--z-content: 1;--bg: #fff;--fg: #000;--accent: #764ba2;--header-height: 60px;--footer-height: 0px;--sidebar-width: 280px;--scale: 1;--color-header-bg-connected: #388722;--color-header-bg-disconnected: #3a5397}}@layer layout{.viewport{position:fixed;inset:0;background:var(--bg);color:var(--fg);overflow:hidden}@supports (width: 1svw){.viewport{--vh: 100svh}}@supports not (width: 1svw){.viewport{--vh: 100vh}}.app-canvas{width:100vw;height:var(--vh);overflow:hidden;display:flex;flex-direction:column}:root{--scale: 1}.tap-target{min-width:44px;min-height:44px}}@layer layout{.app-shell{display:grid;grid-template:"header header" var(--header-height) "sidebar main" 1fr "footer footer" var(--footer-height) / minmax(0,var(--sidebar-width)) minmax(0,1fr);min-height:100vh;padding:3px;box-sizing:border-box}.app-shell-no-sidebar:has(.unified-header[style*="position: fixed"]){grid-template:"header" 0 "main" 1fr "footer" var(--footer-height) / minmax(0,1fr)}.app-header{grid-area:header;z-index:var(--z-header)}.app-main{grid-area:main;overflow:auto;min-height:0;height:100vh}.app-footer{grid-area:footer}@supports selector(:has(*)){.app-shell:not(:has(.app-sidebar>*)){grid-template:"header" var(--header-height) "main" 1fr "footer" var(--footer-height) / minmax(0,1fr)}}}@layer layout{.overlay-stack{position:absolute;inset:0;display:grid;grid-template:"top-left     top-center    top-right" auto "center-left  center        center-right" 1fr "bottom-left  bottom-center bottom-right" auto / 1fr minmax(420px,640px) 1fr;pointer-events:none;z-index:var(--z-overlay)}.overlay{pointer-events:auto}.overlay-top-left{grid-area:top-left;place-self:start start}.overlay-top-center{grid-area:top-center;place-self:start center}.overlay-top-right{grid-area:top-right;place-self:start end}.overlay-center-left{grid-area:center-left;place-self:center start}.overlay-center{grid-area:center;place-self:center center}.overlay-center-right{grid-area:center-right;place-self:center end}.overlay-bottom-left{grid-area:bottom-left;place-self:end start}.overlay-bottom-center{grid-area:bottom-center;place-self:end center}.overlay-bottom-right{grid-area:bottom-right;place-self:end end}}@layer components{.ant-btn,.ant-input,.ant-select,.ant-select-dropdown,.ant-select-item,.ant-select-selection-item,.ant-modal,.ant-modal-content,.ant-modal-header,.ant-modal-title,.ant-modal-body,.ant-tabs,.ant-tabs-tab,.ant-tabs-tab-btn,.ant-table,.ant-table-cell,.ant-menu,.ant-menu-item,.ant-tree,.ant-tree-treenode,.ant-card,.ant-card-body,.ant-form,.ant-form-item,.ant-checkbox,.ant-radio,.ant-steps,.ant-steps-item-title,.ant-progress,.ant-slider,.ant-breadcrumb,.ant-breadcrumb-link,.ant-space,.ant-typography,.ant-picker,.ant-tooltip,.ant-popover,.ant-dropdown,.ant-message,.ant-notification{font-family:Crimson Text,serif!important}.ant-btn{border-radius:0}.ant-tabs-tab-btn{color:#fa8c16}.ant-steps-item-title{color:#00acc1}.ant-progress-inner{background-color:#2020b68f}.ant-modal-centered{z-index:var(--z-modal)}.ant-modal-wrap{pointer-events:auto}.ant-modal{pointer-events:auto;z-index:var(--z-modal);top:2vh!important}.ant-tree,.ant-tree-treenode{font-size:12px}.ant-tree-switcher{width:12px}.ant-tree-indent-unit{width:10px}.ant-select-selector{color:var(--fg)}.ant-select-selection-item-content{background-color:var(--bg);color:var(--fg)}.ant-menu-item{min-width:3%}.ant-menu{width:20%}.ant-slider-mark{inset-inline-start:0;top:10px;width:100%}.ant-card{border-radius:0}.ant-card-body{padding:3px;display:flex;flex-flow:column wrap}.ant-table-cell>a{margin:10px}.ant-space-gap-row-large{row-gap:0!important}.ant-tabs-nav{margin-bottom:0!important}.ant-breadcrumb-link{text-transform:capitalize}.ant-tabs-content{width:97vw!important}.ant-tour{z-index:var(--z-modal)}.ant-tour-mask{z-index:calc(var(--z-modal) - 1)}.ant-tour~.unified-header,.unified-header{z-index:var(--z-header)!important}}input.ant-input-number-input::placeholder,.ant-select-placeholder{opacity:1;color:#777!important}@layer utilities{.u-scroll-y{overflow-y:auto}.u-scroll-x{overflow-x:auto}.u-center{display:grid;place-items:center}.u-hidden{display:none!important}.u-gap-xs{gap:4px}.u-gap-s{gap:8px}.u-gap-m{gap:12px}.u-gap-l{gap:16px}.u-inline{display:inline-block}}@font-face{font-family:Crimson Text;src:url(/fonts/CrimsonText-Regular.woff2) format("woff2"),url(/fonts/CrimsonText-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Crimson Text;src:url(/fonts/CrimsonText-Italic.woff2) format("woff2"),url(/fonts/CrimsonText-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Crimson Text;src:url(/fonts/CrimsonText-SemiBold.woff2) format("woff2"),url(/fonts/CrimsonText-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Crimson Text;src:url(/fonts/CrimsonText-SemiBoldItalic.woff2) format("woff2"),url(/fonts/CrimsonText-SemiBoldItalic.ttf) format("truetype");font-weight:600;font-style:italic;font-display:swap}@font-face{font-family:Crimson Text;src:url(/fonts/CrimsonText-Bold.woff2) format("woff2"),url(/fonts/CrimsonText-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Crimson Text;src:url(/fonts/CrimsonText-BoldItalic.woff2) format("woff2"),url(/fonts/CrimsonText-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic;font-display:swap}@layer base{html,body{max-width:100%;overflow-x:clip;min-height:100vh}html{font-family:Crimson Text,serif}body{margin:0;color:var(--fg);font-family:Crimson Text,serif}figure{margin:0;padding:0}*,button,input,textarea,select{font-family:Crimson Text,serif}}@layer layout{.app-home{--velocity-top: var(--header-height);--velocity-area-height: clamp(14vh, 22vh, 30vh);--notation-top: calc(var(--header-height) + var(--velocity-area-height));--notation-area-height: clamp(26vh, 38vh, 52vh);position:relative;height:100%;width:100%;min-height:0;box-shadow:inset 0 0 #80808099;transition:box-shadow .1s ease-out}.app-home.metronome-pulse-active{box-shadow:inset 0 0 0 4px #80808099}@media(orientation:portrait){.app-home{--velocity-area-height: clamp(12vh, 18vh, 24vh);--notation-area-height: clamp(34vh, 50vh, 64vh)}}.app-home-primary{position:absolute;inset:32px 0 0;height:100%;width:100vw!important;min-height:0;z-index:var(--z-content)}.app-home-primary>*{min-height:0}.app-home-notation{position:relative;height:100%;min-height:0}.app-home-notation>*{min-height:0}.app-home-secondary{position:absolute;inset:0;height:100%;width:100%;z-index:var(--z-overlay);pointer-events:none}}@layer components{#back,#forward{position:fixed;bottom:50vh;z-index:var(--z-overlay);padding:10px;cursor:pointer}#back{left:0}#forward{right:0}.selectable-selectbox{position:absolute;z-index:var(--z-overlay);border:1px dashed #39f;background:#3399ff1a}.notation-container .notation svg{position:absolute;top:0;left:0;height:100%;width:auto}.tiny-table{font-size:10px;border-collapse:collapse}.tiny-table td{border:none;padding:4px;text-align:left;min-width:7vw}.tick{background:red}.grid{position:fixed;width:100vw;height:100vh;top:0;right:0;z-index:var(--z-content);pointer-events:none}}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.rainbowing-border{--border-width: 16px;--animation-speed: 2s;--glow-blur: 12px;--angle: 0deg;position:relative;border-radius:16px;padding:20px;isolation:isolate}.rainbowing-border:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--border-width);background:conic-gradient(from var(--angle),#ff0080,#ff8000,#ff0,#80ff00,#00ff80,#0ff,#0080ff,#8000ff,#ff0080);mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);mask-composite:exclude;animation:rainbow-rotate var(--animation-speed) linear infinite;pointer-events:none}.rainbowing-border:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--border-width);mask-composite:exclude;filter:blur(var(--glow-blur)) opacity(.8);animation:rainbow-rotate var(--animation-speed) linear infinite;pointer-events:none;z-index:-1}@keyframes rainbow-rotate{to{--angle: 360deg}}.rainbowing-border.success:before{background:conic-gradient(from var(--angle),#0f8,#8f0,#0fa,#4f8,#0f6,#6f4,#0f8);animation:success-rotate var(--animation-speed) ease-in-out infinite}.rainbowing-border.success:after{animation:success-rotate var(--animation-speed) ease-in-out infinite;filter:blur(var(--glow-blur)) opacity(.6)}.rainbowing-border.success{--animation-speed: 3s}@keyframes success-rotate{0%,to{--angle: 0deg}50%{--angle: 180deg}}.rainbowing-border.failure:before{background:conic-gradient(from var(--angle),#f04,#f40,#f80,#f06,#f20,#f60,#f04)}.rainbowing-border.failure:after{filter:blur(var(--glow-blur)) opacity(.9)}.rainbowing-border.failure{--animation-speed: .8s;--glow-blur: 15px}@keyframes failure-glitch{0%{--angle: 0deg}15%{--angle: 45deg}30%{--angle: 120deg}45%{--angle: 180deg}60%{--angle: 240deg}75%{--angle: 300deg}90%{--angle: 350deg}to{--angle: 360deg}}@keyframes failure-shake{0%{transform:translate(-1px) translateY(0)}to{transform:translate(1px) translateY(-1px)}}.rainbowing-border.warning:before{background:conic-gradient(from var(--angle),#fa0,#f80,#fc0,#f90,#fb0,#f70,#fa0);animation:warning-pulse var(--animation-speed) ease-in-out infinite}.rainbowing-border.warning:after{background:conic-gradient(from var(--angle),#fa0,#f80,#fc0,#f90,#fb0,#f70,#fa0);animation:warning-pulse var(--animation-speed) ease-in-out infinite;filter:blur(var(--glow-blur)) opacity(.7)}.rainbowing-border.warning{--animation-speed: 1.5s}@keyframes warning-pulse{0%,to{--angle: 0deg;opacity:.8}50%{--angle: 180deg;opacity:1}}.rainbowing-border.adaptive{filter:none}.rainbowing-border.adaptive:before{background:conic-gradient(from var(--angle),hsl(320deg 100% 60%),hsl(30deg 100% 60%),hsl(60deg 100% 60%),hsl(120deg 100% 60%),hsl(180deg 100% 60%),hsl(240deg 100% 60%),hsl(280deg 100% 60%),hsl(320deg 100% 60%))}.rainbowing-border.adaptive:after{background:conic-gradient(from var(--angle),hsl(320deg 100% 60%),hsl(30deg 100% 60%),hsl(60deg 100% 60%),hsl(120deg 100% 60%),hsl(180deg 100% 60%),hsl(240deg 100% 60%),hsl(280deg 100% 60%),hsl(320deg 100% 60%))}.rainbowing-border.js-immune{filter:none}@media(prefers-color-scheme:dark){:root{--body-invert: 1}.rainbowing-border:not(.blend-immune,.adaptive,.js-immune){filter:invert(1)}}@media(prefers-color-scheme:light){:root{--body-invert: 0}.rainbowing-border:not(.blend-immune,.adaptive,.js-immune){filter:invert(0)}}@supports not (background: conic-gradient(from var(--angle),red,blue)){.rainbowing-border:before,.rainbowing-border:after{background:linear-gradient(45deg,#ff0080,#ff8000,#ff0,#80ff00,#00ff80,#0ff,#0080ff,#8000ff,#ff0080);background-size:400% 400%;animation:rainbow-fallback var(--animation-speed) ease infinite}@keyframes rainbow-fallback{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}}@keyframes rainbow-bg{0%{background-position:0% 50%,0% 0%}25%{background-position:100% 50%,0% 0%}50%{background-position:100% 100%,0% 0%}75%{background-position:0% 100%,0% 0%}to{background-position:0% 50%,0% 0%}}.center{place-self:center}.scroll-notation{overflow-y:scroll!important;height:100%!important;align-items:start!important;justify-content:start!important}.scroll-notation-container{scale:.9!important}.middle{inset:0;margin:auto;z-index:10000;position:relative;height:100%;display:flex;place-content:center;align-items:center;flex-direction:row}svg{overflow:visible}.ant-tree-checkbox-inner{border-color:#0d1117!important}.chonky-chonkyRoot,.chonky-chonkyRoot *{font-family:Crimson Text,serif!important}.chonky-chonkyRoot{border:none!important}.Mui-disabled,#nprogress .spinner{display:none}#nprogress .bar{background:linear-gradient(to right,red,orange,#ff0,green,#00f,indigo,violet);height:4px;position:fixed;top:0;left:0;width:100%}#nprogress .peg{box-shadow:none}.ui-practice-feedback-notation-0{width:100%;height:unset;display:block}.ui-practice-feedback-div-1{width:100%;max-width:220px;min-height:120px}.ui-practice-feedback-div-2{text-align:center;padding:20px}.ui-practice-feedback-col-3{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0}.ui-practice-feedback-div-4{margin:auto;min-height:180px;width:180px;height:180px}.ui-practice-feedback-col-5{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%}.ui-practice-feedback-span-6,.ui-practice-feedback-span-7{color:#555}.ui-practice-feedback-div-8{margin-top:auto;font-size:13px;color:#999;opacity:.8}.ui-practice-feedback-div-9{margin-bottom:4px;font-style:italic;max-width:220px}.ui-practice-feedback-span-10{color:#888;font-size:.85rem}.ui-practice-feedback-span-11,.ui-practice-feedback-span-12{margin-right:8px}.ui-practice-feedback-div-13{display:flex;align-items:center;margin-bottom:6px}.ui-practice-feedback-col-14{min-width:0;border-right:1px solid #eee;padding:18px 16px 16px 18px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;min-height:100%}.ui-practice-feedback-row-15{width:100%;background:#fffffff2}.ui-render-notation-div-0{position:relative}.countdown-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;width:300px;height:100px;margin:0 20px;border:1px solid #ddd;background:#fafafa;border-radius:4px}.countdown-container{position:fixed;top:20px;right:20px;width:200px;height:200px;background-color:#f0f0f0;border-radius:50%;box-shadow:0 0 10px #0000001a;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;background-image:linear-gradient(45deg,#d3d3d3 25%,transparent 25%),linear-gradient(-45deg,#d3d3d3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d3d3d3 75%),linear-gradient(-45deg,transparent 75%,#d3d3d3 75%),radial-gradient(circle at 20% 20%,#d3d3d3 10%,transparent 11%),radial-gradient(circle at 80% 20%,#d3d3d3 10%,transparent 11%),radial-gradient(circle at 20% 80%,#d3d3d3 10%,transparent 11%),radial-gradient(circle at 80% 80%,#d3d3d3 10%,transparent 11%);background-size:20px 20px,20px 20px,20px 20px,20px 20px,50px 50px,50px 50px,50px 50px,50px 50px;background-position:0 0,0 20px,20px -20px,-20px 0,0 0,0 50px,50px 0,50px 50px}.countdown-signatures{color:#555;margin:100px 10px 10px;text-align:center;font-size:.9em}.key-signature,.time-signature{margin:2px 0}.countdown-number{font-size:3em;font-weight:700;text-align:center;position:fixed;left:10vw;top:10vh;width:10vw;height:10vh;z-index:1000;pointer-events:none}.current-beat{animation:fade-in-out 1s ease-in-out,pulse .3s ease-in-out;opacity:.5;transition:opacity .5s ease-in-out,transform .5s ease-in-out}@keyframes fade-in-out{0%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.speedup-progress-container{position:absolute;top:-50px;left:0;right:0;background:#0000001a;border-radius:8px;padding:8px;z-index:1001}.speedup-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;font-size:.8em;font-weight:700}.speedup-text{color:#333}.speedup-target{color:#666;font-size:.9em}.speedup-progress-bar{height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;position:relative}.speedup-progress-fill{height:100%;border-radius:4px;transition:width .3s ease,background-color .3s ease;background:linear-gradient(90deg,#4caf50,#ff9800,#f44336)}.speedup-active{animation:speedup-pulse 2s infinite ease-in-out;border-width:2px!important}.speedup-green{border-color:#4caf50!important;background-color:#4caf500d}.speedup-green .speedup-progress-fill{background:#4caf50}.speedup-orange{border-color:#ff9800!important;background-color:#ff98000d}.speedup-orange .speedup-progress-fill{background:#ff9800}.speedup-red{border-color:#f44336!important;background-color:#f443360d;animation:speedup-warning 1s infinite ease-in-out}.speedup-red .speedup-progress-fill{background:#f44336}@keyframes speedup-pulse{0%{box-shadow:0 0 5px #0000001a}50%{box-shadow:0 0 15px #ff980066}to{box-shadow:0 0 5px #0000001a}}@keyframes speedup-warning{0%{box-shadow:0 0 10px #f4433633}50%{box-shadow:0 0 20px #f4433699;transform:scale(1.02)}to{box-shadow:0 0 10px #f4433633}}.ui-render-countdown-div-1{width:20vw}.feedback-modal,.feedback-modal+.ant-modal-wrap{z-index:var(--z-modal)!important}.ui-feedback-feedback-modal-element-0{display:none}.ui-feedback-feedback-modal-canvas-1{border:1px solid #ddd;border-radius:4px;max-width:100%;max-height:600px;display:block;object-fit:contain;width:auto;height:auto}.ui-feedback-feedback-modal-space-2,.ui-feedback-feedback-modal-div-3{width:100%}.ui-md-footer-div-0{display:flex;justify-content:center;gap:2rem}.footer{width:100%;margin:0;border-radius:0;background:linear-gradient(120deg,#fff6,#f0f3ff59);border:1px solid rgb(255 255 255 / 35%);box-shadow:0 -6px 24px #0000001a;backdrop-filter:blur(14px);color:#0f172a}.footer--glass{background:linear-gradient(135deg,#ffffff52,#e1ebff47);border:1px solid rgb(255 255 255 / 32%);box-shadow:0 -10px 30px #0000001f}.footer__links{flex-wrap:wrap;align-items:center;font-weight:600;font-size:.95rem}.footer__links a{color:#0f172a;text-decoration:none;padding:4px 6px;border-radius:10px;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease}.footer__links a:hover{color:#4c1d95;background:#4c1d9514;box-shadow:inset 0 0 0 1px #4c1d9529}@media(width<=640px){.footer{width:100%;margin:0;padding:.8rem .6rem;border-radius:0}.footer__links{justify-content:center;font-size:.9rem}.footer__links a{padding:4px 5px}}.ui-settings-localhost-mode-switch-span-0{font-size:11px;opacity:.7}.ui-settings-localhost-mode-switch-div-1{display:flex;align-items:center;gap:4px}.ui-settings-localhost-mode-switch-span-2{font-size:11px;opacity:.7}.ui-settings-localhost-mode-switch-div-3{display:flex;align-items:center;gap:4px}.ui-settings-localhost-mode-switch-div-4{display:flex;align-items:center;gap:8px;position:fixed;z-index:var(--z-screen-capture);bottom:0;left:0}.ui-settings-localhost-mode-switch-dev-midi{display:flex;align-items:center;gap:6px;padding:0 6px}.ui-settings-localhost-mode-switch-slider{width:140px}.ui-settings-localhost-mode-switch-span-5{font-size:11px;min-width:32px;text-align:right}.ui-settings-localhost-mode-switch-dev-flag{display:flex;align-items:center;gap:4px}@layer components{.mobile-essential-overlay{position:fixed;top:8px;left:8px;right:60px;z-index:var(--z-header);display:flex;justify-content:flex-end;align-items:center;pointer-events:none;height:32px;overflow:hidden}.mobile-essential-controls{display:flex;gap:4px;align-items:center;pointer-events:auto;height:100%;max-width:100%;overflow:hidden}.mobile-essential-controls>*:not(.exercise-list){background:var(--bg);border-radius:4px;box-shadow:0 2px 8px #00000026}.mobile-essential-controls .exercise-list{background:transparent;flex:1;min-width:0;max-width:100%}.header-toggle-button{position:fixed;top:8px;right:8px;z-index:calc(var(--z-header) + 1);padding:6px;background:transparent;border:2px solid var(--ant-color-primary);border-radius:50%;cursor:pointer;font-size:16px;color:var(--ant-color-primary);transition:all .2s ease;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.header-toggle-button:hover{opacity:.9}.header-toggle-button:active{transform:scale(.95)}.mobile-drawer-content{display:flex;flex-direction:column;gap:16px}.mobile-drawer-close{position:absolute;top:16px;right:16px;background:transparent;border:none;cursor:pointer;font-size:20px;color:var(--fg);padding:8px}.mobile-drawer-section{border-bottom:1px solid rgb(0 0 0 / 6%);padding-bottom:12px}.mobile-drawer-section:last-child{border-bottom:none}.mobile-drawer-section h3{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--fg-secondary);text-transform:uppercase}.mobile-drawer-buttons{display:flex;flex-wrap:wrap;gap:8px}.unified-header{position:absolute;z-index:var(--z-header);width:100%;background:var(--bg);backdrop-filter:blur(12px);border-bottom:1px solid rgb(0 0 0 / 6%);transition:border-color .3s ease,box-shadow .3s ease}.unified-header.midi-connected{border-bottom-width:3px;border-bottom-color:#4caf5066;box-shadow:0 2px 8px #4caf501a}.unified-header.midi-disconnected{border-bottom-width:3px;border-bottom-color:#9e9e9e66}.unified-header.midi-polling-active{border-bottom-width:3px;border-bottom-color:#2196f399}.midi-status-indicator-header{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:4px;font-size:12px;margin-left:12px}.midi-status-icon{font-size:10px;line-height:1}.midi-status-text{font-weight:500;line-height:1;white-space:nowrap}.midi-polling-indicator{font-size:14px;line-height:1;opacity:0;transition:opacity .2s ease}.midi-polling-indicator.active{opacity:1;animation:spin .6s ease-in-out}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header-grid{display:grid;grid-template:"breadcrumb exercises view-controls app-controls" var(--header-height) / [breadcrumb-start] auto [breadcrumb-end exercises-start] auto [exercises-end view-controls-start] auto [view-controls-end app-controls-start] auto [app-controls-end];width:100%;gap:var(--app-gutter);padding:0 var(--app-gutter);box-sizing:border-box;align-items:center}.header-slot{display:flex;align-items:center;justify-content:space-evenly;min-height:32px}.header-slot:empty{display:none}.header-slot .exercise-list,.header-slot .breadcrumb{position:static!important}.breadcrumb-slot{grid-area:breadcrumb;justify-content:flex-start}.exercises-slot{grid-area:exercises;position:relative;overflow:visible}.view-controls-slot{grid-area:view-controls}.app-controls-slot{grid-area:app-controls;align-items:end;display:flex;justify-content:flex-end}.ui-layout-header-div-1,.ui-layout-header-div-2{display:flex;align-items:center;gap:var(--app-gutter)}@media screen and (max-width:1400px){:root{--header-height: 88px}:root:has(.mobile-essential-overlay){--header-height: 50px}.header-grid{grid-template:"breadcrumb view-controls" auto "exercises app-controls" auto / minmax(0,1fr) auto;gap:4px 8px;padding:4px 8px;align-items:center}.unified-header{border-bottom:1px solid rgb(0 0 0 / 6%)}.ui-layout-header-div-1,.ui-layout-header-div-2{gap:6px;flex-wrap:nowrap;overflow:hidden}.breadcrumb-slot{min-width:0;overflow:hidden;justify-content:flex-start}.breadcrumb-slot .breadcrumb{min-width:0;overflow:hidden}.exercises-slot{min-width:0;overflow:hidden;justify-content:flex-start;text-align:left}.view-controls-slot,.app-controls-slot{min-width:0;overflow:hidden;justify-content:flex-end}.midi-status-indicator-header{display:none}}@media screen and (max-width:768px)and (orientation:portrait){:root{--header-height: 132px}:root:has(.mobile-essential-overlay){--header-height: 50px}.header-grid{grid-template:"breadcrumb breadcrumb app-controls" auto "exercises exercises exercises" auto "view-controls view-controls view-controls" auto / minmax(0,1fr) minmax(0,1fr) auto;gap:6px 4px;padding:6px 8px;align-items:center}.unified-header{border-bottom:1px solid rgb(0 0 0 / 6%)}.ui-layout-header-div-1,.ui-layout-header-div-2{gap:4px;flex-wrap:wrap}.breadcrumb-slot{min-width:0;overflow:hidden;justify-content:flex-start;flex-wrap:nowrap}.breadcrumb-slot .breadcrumb{min-width:0;overflow:hidden}.exercises-slot{min-width:0;overflow:visible;justify-content:center;text-align:center}.exercises-slot .exercise-list{justify-content:center;text-align:center}.view-controls-slot{min-width:0;overflow:hidden;justify-content:center}.app-controls-slot{min-width:0;overflow:hidden;justify-content:flex-end}.midi-status-indicator-header{margin-left:0;display:flex}.mobile-essential-overlay{justify-content:flex-end}}@media screen and (max-width:1024px)and (orientation:landscape),screen and (max-height:600px)and (orientation:landscape){:root{--header-height: 90px}:root:has(.mobile-essential-overlay){--header-height: 50px}.header-grid{grid-template:"breadcrumb view-controls" auto "exercises app-controls" auto / minmax(0,1fr) auto;gap:4px;padding:4px 8px;align-items:center}.unified-header{border-bottom:1px solid rgb(0 0 0 / 6%)}.ui-layout-header-div-1,.ui-layout-header-div-2{gap:4px;flex-wrap:nowrap;overflow:hidden}.breadcrumb-slot{min-width:0;overflow:hidden;justify-content:flex-start}.breadcrumb-slot .breadcrumb{min-width:0;overflow:hidden}.exercises-slot{min-width:0;overflow:hidden;justify-content:flex-start;text-align:left}.view-controls-slot,.app-controls-slot{min-width:0;overflow:hidden;justify-content:flex-end}.midi-status-indicator-header{display:none}.mobile-essential-overlay{justify-content:flex-start;left:8px;right:60px}.mobile-essential-controls .exercise-list{text-align:left}}}.wobbling-button{position:relative;background:linear-gradient(135deg,#667eea,#764ba2)!important;border:none!important;box-shadow:0 4px 15px #667eea66}.wobbling-button:hover{background:linear-gradient(135deg,#764ba2,#667eea)!important;box-shadow:0 6px 20px #667eea99;transform:translateY(-2px);transition:all .3s ease}.wobbling-button:active{transform:translateY(0)}.ui-navigation-breadcrumb-navigation-breadcrumb-0{background-color:#ffffffe5;padding:4px 8px;border-radius:4px;max-width:100%}@media screen and (width<=768px){.ui-navigation-breadcrumb-navigation-breadcrumb-0{padding:4px;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.ui-user-avatar-space-0{margin-left:8px}.ui-user-avatar-antd-avatar-1{vertical-align:middle}.ui-user-avatar-button-2{padding:0;border:none!important;box-shadow:none;background:transparent;height:auto;width:auto;line-height:1}.ui-user-avatar-div-3{display:inline-flex;align-items:center;margin-left:5px;margin-right:5px}.ui-user-avatar-div-4{padding:0 8px}.ui-user-avatar-antd-avatar-5{background-color:#9acd32;vertical-align:middle}.avatar-fullscreen-overlay{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;background:#00000073;z-index:9999!important;backdrop-filter:blur(3px);display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important}.avatar-fullscreen-menu{position:relative;max-width:420px;width:calc(100% - 32px);max-height:calc(100vh - 32px);overflow-y:auto;background:var(--bg);border-radius:12px;box-shadow:0 8px 40px #00000040,0 2px 8px #00000026;margin:16px}.avatar-fullscreen-menu .ant-dropdown-menu{max-height:none!important;overflow:visible!important;box-shadow:none!important;border-radius:0!important;padding:8px 0!important}.avatar-fullscreen-menu .ant-dropdown-menu-item{padding:12px 20px!important;margin:2px 8px!important;border-radius:8px!important;transition:all .2s ease!important}.avatar-fullscreen-menu .ant-dropdown-menu-item:hover{background:#0000000a!important}.avatar-fullscreen-menu .ant-dropdown-menu-item-danger:hover{background:#ff4d4f1a!important}.avatar-fullscreen-menu .ant-dropdown-menu-item-icon{font-size:16px!important;margin-right:12px!important}.avatar-fullscreen-menu .ant-dropdown-menu-item-divider{margin:8px 16px!important;background:#0000000f!important}.avatar-menu-header{display:flex;flex-direction:row;align-items:center;gap:16px;padding:28px 24px 20px;border-bottom:1px solid rgb(0 0 0 / 8%);background:linear-gradient(to bottom,rgb(0 0 0 / 2%),transparent)}.avatar-menu-username{font-size:18px;font-weight:600;color:var(--fg);letter-spacing:-.01em;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar-menu-roles{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.avatar-menu-role-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:#1890ff1a;border:1px solid rgb(24 144 255 / 25%);border-radius:12px;font-size:12px;font-weight:500;color:#1890ff;line-height:1.4}.avatar-menu-role-badge span{margin-top:1px}.avatar-fullscreen-close{position:absolute!important;top:12px;right:12px;background:#00000008;border:1px solid rgb(0 0 0 / 8%);border-radius:8px;cursor:pointer;font-size:18px;color:var(--fg);padding:8px;box-shadow:0 1px 3px #0000000d;z-index:1;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.avatar-fullscreen-close:hover{background:#0000000f;border-color:#0000001f;box-shadow:0 2px 6px #00000014}@media screen and (width<=900px),screen and (height<=400px){.avatar-fullscreen-menu{max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.avatar-fullscreen-close{top:8px;right:8px;padding:6px 10px;font-size:18px}}.sound-control-modal .ant-modal-content{border-radius:12px;overflow:hidden}.sound-control-modal .ant-modal-header{background:linear-gradient(to bottom,rgb(0 0 0 / 2%),transparent);border-bottom:1px solid rgb(0 0 0 / 8%);padding:20px 24px}.sound-control-modal .ant-modal-title{font-size:18px;font-weight:600;color:var(--fg)}.sound-control-modal .ant-modal-close{top:16px;right:16px}@media screen and (width<=600px){.sound-control-modal{max-width:calc(100vw - 32px)!important;margin:16px auto!important}.sound-control-modal .ant-modal-header{padding:16px 20px}.sound-control-modal .ant-modal-body{padding:12px 16px!important}}.sound-control-container{padding:16px;max-width:100%;user-select:none}.sound-control-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgb(0 0 0 / 8%)}.sound-control-title{font-size:15px;font-weight:600;color:var(--fg)}.sound-control-list{display:flex;flex-direction:column;gap:20px;max-height:60vh;overflow-y:auto;padding-right:4px}.sound-control-item{display:flex;flex-direction:column;gap:8px}.sound-control-item-header{display:flex;justify-content:space-between;align-items:center}.sound-control-label{font-size:13px;font-weight:500;color:var(--fg);display:flex;align-items:center;gap:6px}.sound-control-label-master{font-size:14px;font-weight:600;color:#1890ff}.sound-control-icon{display:inline-flex;font-size:14px}.sound-control-mute-button{font-size:12px;padding:2px 8px;height:auto;border-radius:4px;transition:all .2s ease}.sound-control-muted{color:#ff4d4f}.sound-control-slider-container{display:flex;align-items:center;gap:12px}.sound-control-slider-container .ant-slider{flex:1;margin:0}.sound-control-value{min-width:50px;text-align:right;font-size:12px;font-weight:500;color:#000000a6;font-variant-numeric:tabular-nums}.sound-control-list::-webkit-scrollbar{width:6px}.sound-control-list::-webkit-scrollbar-track{background:#0000000a;border-radius:3px}.sound-control-list::-webkit-scrollbar-thumb{background:#00000026;border-radius:3px}.sound-control-list::-webkit-scrollbar-thumb:hover{background:#00000040}.dummy-midi-settings-modal .ant-modal-body{max-height:70vh;overflow-y:auto}.dummy-midi-section{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgb(0 0 0 / 6%)}.dummy-midi-section:last-child{border-bottom:none}.dummy-midi-section h3{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--fg-secondary);text-transform:uppercase}.setting-row{margin-bottom:16px}.setting-row label{display:block;margin-bottom:8px;font-size:13px;font-weight:500;color:var(--fg)}.setting-description{margin-top:4px;font-size:12px;color:var(--fg-secondary);font-style:italic}.dual-slider-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}.slider-column{display:flex;flex-direction:column}.slider-column label{font-size:12px;margin-bottom:4px}.pitch-preview{margin-top:8px;padding:8px;background:#00000008;border-radius:4px;font-size:12px;font-family:monospace;color:var(--fg-secondary)}.ui-settings-language-switcher-select-0{min-width:120px}.test-accuracy-settings-modal{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.test-accuracy-description{padding:12px 16px;background:var(--ant-color-bg-container-secondary, #fafafa);border-radius:8px;margin-bottom:24px;color:var(--ant-color-text-secondary, #666);line-height:1.6}.test-accuracy-section{margin-bottom:32px}.test-accuracy-section h3{font-size:16px;font-weight:600;margin-bottom:16px;color:var(--ant-color-text, #000)}.test-accuracy-section .setting-row{margin-bottom:16px}.test-accuracy-section .setting-row label{display:block;font-weight:500;margin-bottom:12px;color:var(--ant-color-text, #000)}.test-accuracy-section .setting-description{margin-top:8px;font-size:13px;color:var(--ant-color-text-secondary, #666);line-height:1.5}.test-accuracy-section .ant-slider{margin:12px 0 24px}.test-accuracy-section .ant-slider-mark-text{font-size:12px;color:var(--ant-color-text-tertiary, #999)}.test-accuracy-info{padding:12px 16px;background:var(--ant-color-primary-bg, #e6f7ff);border-left:4px solid var(--ant-color-primary, #1890ff);border-radius:4px;font-size:13px;line-height:1.6;color:var(--ant-color-text, #000)}.test-accuracy-info strong{color:var(--ant-color-primary, #1890ff)}@media(prefers-color-scheme:dark){.test-accuracy-description{background:var(--ant-color-bg-container-secondary, #1f1f1f);color:var(--ant-color-text-secondary, #aaa)}.test-accuracy-section h3,.test-accuracy-section .setting-row label{color:var(--ant-color-text, #fff)}.test-accuracy-section .setting-description{color:var(--ant-color-text-secondary, #aaa)}.test-accuracy-info{background:var(--ant-color-primary-bg, #111b26);border-left-color:var(--ant-color-primary, #177ddc);color:var(--ant-color-text, #fff)}.test-accuracy-info strong{color:var(--ant-color-primary, #177ddc)}}