:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#24201e;background:#fcfbf9}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 50% 48%,#fff 0,#fdfcfb 46%,#f5f1ec)}button,select,input{font:inherit}button{cursor:pointer}.note-dial.svelte-1ml6rvj{display:flex;align-items:center;justify-content:space-between;width:5em;padding:0 18px}.dial-face.svelte-1ml6rvj{position:relative;width:auto;height:66px;flex:1;border:0;color:#25211f;background:transparent;box-shadow:none}.dial-face.svelte-1ml6rvj strong:where(.svelte-1ml6rvj){display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:30px;letter-spacing:-.08em}.dial-face.svelte-1ml6rvj small:where(.svelte-1ml6rvj){font-size:10px;font-weight:700;color:#928b85}.dial-tick.svelte-1ml6rvj{display:none}.dial-arrow.svelte-1ml6rvj{width:30px;height:30px;color:#908a85;border:0;border-radius:50%;background:transparent;font-size:11px}.dial-arrow.svelte-1ml6rvj:hover{color:#c8752d;background:#f8eee4}.note-steps.svelte-1ml6rvj{display:none}.theory-tabs.svelte-17e3fwz{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;background:#fbfaf8;border:1px solid #e5e1dc;border-radius:10px}.theory-tabs.svelte-17e3fwz button:where(.svelte-17e3fwz){border:0;border-radius:7px;padding:8px;background:transparent;color:#908a85;font-size:11px;font-weight:800}.theory-tabs.svelte-17e3fwz button.active:where(.svelte-17e3fwz){background:#df8b3a;color:#fff;box-shadow:none}.keyboard-selectors.svelte-11ry3ll{display:grid;grid-template-columns:minmax(220px,1fr) minmax(190px,.8fr);align-items:end;gap:8px;margin-bottom:14px;padding-bottom:8px;max-width:25em}.keyboard-selectors.svelte-11ry3ll .theory-tabs{grid-column:1;grid-row:1}.selector-field.svelte-11ry3ll,.root-field.svelte-11ry3ll{min-width:0}.material-field.svelte-11ry3ll{grid-column:1;grid-row:2}.root-field.svelte-11ry3ll{grid-column:2;grid-row:1 / span 2;align-self:center}select.svelte-11ry3ll{width:100%;min-height:36px;padding:0 32px 0 11px;color:#332c27;border:1px solid #e2ddd7;border-radius:10px;outline:none;background:#fff;font-size:13px;font-weight:650}select.svelte-11ry3ll:focus{border-color:#dc913f;box-shadow:0 0 0 3px #df8b3a1c}.root-field.svelte-11ry3ll{padding:0 6px}.root-field.svelte-11ry3ll .note-dial{padding:0}.root-field.svelte-11ry3ll .dial-face{height:36px}.root-field.svelte-11ry3ll .dial-face strong{font-size:21px}.root-field.svelte-11ry3ll .dial-arrow{width:24px;height:24px}@media(max-width:760px){.keyboard-selectors.svelte-11ry3ll{grid-template-columns:1fr 1fr}}@media(max-width:460px){.keyboard-selectors.svelte-11ry3ll{grid-template-columns:1fr}.keyboard-selectors.svelte-11ry3ll .theory-tabs,.material-field.svelte-11ry3ll,.root-field.svelte-11ry3ll{grid-column:1}.root-field.svelte-11ry3ll{grid-row:auto}}.keyboard-stage.svelte-1wc597x{--accent: #3b3b3b;--key-radius: 8px;--key-gap: 4px;--white-key-fill: linear-gradient(105deg, #fdfdfd 0%, #e7e7e7 45%, #cfcfcf 100%);--black-key-fill: linear-gradient(105deg, #4d4d4d 0%, #1b1b1b 46%, #060606 100%);--suggested-white-key-fill: linear-gradient(to bottom, #fdfdfd 0%, #e7e7e7 42%, #f4ca43 100%);--suggested-black-key-fill: linear-gradient(to bottom, #4d4d4d 0%, #1b1b1b 46%, #060606 50%, #ffd400 100%);--root-key-fill: linear-gradient(105deg, #fff1a4 0%, #f6d34e 48%, #dca912 100%);--pressed-key-fill: linear-gradient(105deg, #b8b8b8 0%, #747474 52%, #383838 100%);--pressed-key-shadow: inset 0 2px 5px #00000073, inset 0 -1px 1px #ffffff52, 0 1px 3px #0000005e;--key-height: 242px;--white-key-min-width: 64px;--key-press-offset: 4px;width:100%;margin-top:10px;isolation:isolate}.keyboard-header.svelte-1wc597x,.keyboard-controls.svelte-1wc597x,.keyboard-size-setting.svelte-1wc597x,.labels-switch.svelte-1wc597x,.volume-control.svelte-1wc597x{display:flex;align-items:center}.keyboard-header.svelte-1wc597x{position:relative;z-index:1}.keyboard-header.svelte-1wc597x,.keyboard-size-setting.svelte-1wc597x{justify-content:space-between}.keyboard-header.svelte-1wc597x{padding-bottom:10px}.keyboard-controls.svelte-1wc597x{gap:14px}.labels-switch.svelte-1wc597x,.volume-control.svelte-1wc597x,.control-label.svelte-1wc597x{color:#888;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.labels-switch.svelte-1wc597x{gap:8px;letter-spacing:.04em}.labels-switch.svelte-1wc597x button:where(.svelte-1wc597x){width:31px;height:18px;padding:2px;border:0;border-radius:999px;background:var(--accent)}.labels-switch.svelte-1wc597x button:where(.svelte-1wc597x) span:where(.svelte-1wc597x){display:block;width:14px;height:14px;transform:translate(12px);border-radius:50%;background:#fff;box-shadow:inset 0 1px 1px #fffc,0 1px 3px #0005;transition:transform .2s}.labels-switch.svelte-1wc597x button[aria-checked=false]:where(.svelte-1wc597x){background:#c4c4c4}.labels-switch.svelte-1wc597x button[aria-checked=false]:where(.svelte-1wc597x) span:where(.svelte-1wc597x){transform:translate(0)}.volume-control.svelte-1wc597x{gap:7px;color:#707070}.volume-control.svelte-1wc597x input:where(.svelte-1wc597x){width:74px;accent-color:var(--accent)}.keyboard-scroll.svelte-1wc597x{position:relative;z-index:1;overflow-x:auto;overflow-y:hidden;padding:7px 0 12px}.keyboard-scroll.svelte-1wc597x::-webkit-scrollbar{height:5px}.keyboard-scroll.svelte-1wc597x::-webkit-scrollbar-thumb{border-radius:999px;background:#bdbdbd}.piano-keyboard.svelte-1wc597x{position:relative;box-sizing:border-box;display:flex;width:calc(var(--white-key-count) * var(--white-key-min-width));margin-inline:auto;height:var(--key-height);padding:0 1px;-webkit-user-select:none;user-select:none}.piano-key.svelte-1wc597x{box-sizing:border-box;touch-action:none;height:var(--key-height)}.key-surface.svelte-1wc597x{box-sizing:border-box;width:100%;height:100%;border:0;cursor:pointer;touch-action:none;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease,color .12s ease}.white-key.svelte-1wc597x .key-surface:where(.svelte-1wc597x),.black-key.svelte-1wc597x .key-surface:where(.svelte-1wc597x){display:flex;justify-content:center;align-items:flex-end;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.white-key.svelte-1wc597x{position:relative;flex:0 0 auto;min-width:var(--white-key-min-width)}.white-key.svelte-1wc597x .key-surface:where(.svelte-1wc597x){position:relative;padding:0 2px 26px;border-radius:var(--key-radius);background:transparent;--key-fill: var(--white-key-fill);font-size:22px;font-weight:400}.white-key.svelte-1wc597x .key-surface:where(.svelte-1wc597x):before{position:absolute;inset:0 var(--key-gap) 0 0;z-index:0;border-radius:var(--key-radius);background:var(--key-fill);box-shadow:inset 1px 1px 1px #ffffffd9,inset -1px -4px 5px #00000024,0 3px 5px #00000038;content:""}.key-surface.svelte-1wc597x>span:where(.svelte-1wc597x){position:relative;z-index:1}.white-key.highlighted.svelte-1wc597x:not(.rootNote) .key-surface:where(.svelte-1wc597x){--key-fill: var(--suggested-white-key-fill);color:#252525}.black-key.highlighted.svelte-1wc597x:not(.rootNote) .key-surface:where(.svelte-1wc597x){--key-fill: var(--suggested-black-key-fill);opacity:.72}.black-key.svelte-1wc597x{position:absolute;z-index:2;top:0;height:calc(var(--key-height) * .64)}.black-key.svelte-1wc597x .key-surface:where(.svelte-1wc597x){padding:0 1px 10px;border-radius:var(--key-radius);background:var(--key-fill, var(--black-key-fill));color:#e2e2e2;font-size:16px;opacity:.72;box-shadow:inset 1px 1px 1px #ffffff29,inset -2px -4px 5px #00000094,0 3px 5px #0000006b}.piano-key.rootNote.white-key.svelte-1wc597x .key-surface:where(.svelte-1wc597x){--key-fill: var(--root-key-fill);color:#111}.piano-key.rootNote.black-key.svelte-1wc597x .key-surface:where(.svelte-1wc597x){--key-fill: var(--root-key-fill);box-shadow:inset 0 1px 2px #ffffffd9,inset 0 -4px 7px #555,0 3px 5px #0000006b;color:#111;opacity:.8}.piano-key.svelte-1wc597x .key-surface.active:where(.svelte-1wc597x),.piano-key.svelte-1wc597x .key-surface:where(.svelte-1wc597x):active{--key-fill: var(--pressed-key-fill);color:#f8f8f8;filter:brightness(.96);opacity:1;transform:translateY(var(--key-press-offset))}.white-key.svelte-1wc597x .key-surface.active:where(.svelte-1wc597x):before,.white-key.svelte-1wc597x .key-surface:where(.svelte-1wc597x):active:before{box-shadow:var(--pressed-key-shadow)}.piano-key.black-key.svelte-1wc597x .key-surface.active:where(.svelte-1wc597x),.piano-key.black-key.svelte-1wc597x .key-surface:where(.svelte-1wc597x):active{box-shadow:var(--pressed-key-shadow);opacity:.72}.piano-key.incorrect.svelte-1wc597x .key-surface:where(.svelte-1wc597x){--key-fill: linear-gradient(105deg, #ef9ca4 0%, #d85064 48%, #a82942 100%);color:#fff;opacity:1}.root-selector.svelte-1wc597x{position:absolute;z-index:3;top:8px;left:50%;display:block;padding:0;border:0;color:#888;background:transparent;box-shadow:none;cursor:pointer;opacity:0;pointer-events:none;transform:translate(-50%) translateY(4px);transition:opacity .16s ease,transform .16s ease,color .16s ease}.piano-key.svelte-1wc597x:hover .root-selector:where(.svelte-1wc597x),.root-selector.svelte-1wc597x:focus-visible{opacity:1;pointer-events:auto;transform:translate(-50%)}.root-selector.svelte-1wc597x:hover{color:#1c1c1c}.root-selector.svelte-1wc597x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.keyboard-size-setting.svelte-1wc597x{gap:16px;padding-top:15px}.control-label.svelte-1wc597x{display:block;color:#858585;letter-spacing:.08em;text-transform:uppercase}.keyboard-size-setting.svelte-1wc597x p:where(.svelte-1wc597x){margin:5px 0 0;color:#929292;font-size:12px}.keyboard-size-setting.svelte-1wc597x .soft-select:where(.svelte-1wc597x){width:220px;flex:0 0 auto}.soft-select.svelte-1wc597x{padding:11px 36px 11px 13px;border:1px solid #ddd;border-radius:10px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;color:#2c2c2c;font-size:13px;font-weight:650}.soft-select.svelte-1wc597x:focus{border-color:var(--accent);box-shadow:0 0 0 3px #0000001c}@media(max-width:680px){.keyboard-header.svelte-1wc597x{gap:10px}.keyboard-controls.svelte-1wc597x{align-items:flex-end;gap:8px;flex-direction:column}.piano-keyboard.svelte-1wc597x{--key-height: 205px}.keyboard-size-setting.svelte-1wc597x{align-items:flex-start;flex-direction:column}.keyboard-size-setting.svelte-1wc597x .soft-select:where(.svelte-1wc597x){width:100%}}.pressed-notes.svelte-zk0all{position:relative;display:grid;height:150px;place-items:center;margin-bottom:16px;overflow:hidden;isolation:isolate}.pressed-aura.svelte-zk0all{position:absolute;top:50%;left:50%;width:220px;height:220px;z-index:-1;border-radius:50%;background:var(--aura-background);filter:blur(34px);opacity:.95;transform:translate(-50%,-50%);animation:svelte-zk0all-pressed-aura-breathe 2.2s ease-in-out infinite}.pressed-value.svelte-zk0all{position:relative;z-index:1;color:#292422;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(34px,7vw,64px);font-weight:800;letter-spacing:-.06em;animation:svelte-zk0all-pressed-value-in .42s cubic-bezier(.2,.8,.3,1) both}@keyframes svelte-zk0all-pressed-value-in{0%{opacity:0;transform:translateY(8px) scale(.82);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes svelte-zk0all-pressed-aura-breathe{0%,to{opacity:.68;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}.diatonic-trainer.svelte-11lhh78{width:100%;box-sizing:border-box;padding:20px;border:1px solid #e7ddd3;border-radius:14px;background:linear-gradient(135deg,#fffaf4,#fff)}.exercise-actions.svelte-11lhh78{display:flex;align-items:center;justify-content:space-between;gap:10px}.diatonic-list.svelte-11lhh78{display:grid;grid-template-columns:repeat(7,minmax(78px,1fr));gap:7px;overflow-x:auto}.diatonic-chord.svelte-11lhh78{display:grid;min-width:78px;gap:4px;padding:10px;border:1px solid #e6ded7;border-radius:10px;background:#fff}.diatonic-chord.target.svelte-11lhh78{border-color:#bf7138;background:#fff3e8;box-shadow:0 0 0 2px #e9b17c52}.chord-label.svelte-11lhh78{display:flex;align-items:baseline;gap:7px}.degree.svelte-11lhh78{color:#b26b36;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:800}.diatonic-chord.svelte-11lhh78 strong:where(.svelte-11lhh78){color:#332a25;font-size:14px}.diatonic-chord.svelte-11lhh78 small:where(.svelte-11lhh78){color:#8a8079;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;font-weight:700;line-height:1.35}.exercise-actions.svelte-11lhh78{justify-content:flex-start;flex-wrap:wrap;margin-top:15px}.exercise-primary.svelte-11lhh78,.exercise-secondary.svelte-11lhh78,.exercise-infinite.svelte-11lhh78,.exercise-stop.svelte-11lhh78{border-radius:8px;padding:9px 11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:800}.exercise-primary.svelte-11lhh78{color:#fff;border:1px solid #b5662e;background:#bd6c31}.exercise-secondary.svelte-11lhh78{color:#7a563c;border:1px solid #d9bda4;background:#fff4e9}.exercise-infinite.svelte-11lhh78{color:#756a62;border:1px solid #ded8d2;background:#fff}.exercise-infinite.active.svelte-11lhh78{color:#9a5a2e;border-color:#d9a36f;background:#fff1e4}.exercise-stop.svelte-11lhh78{color:#7a716b;border:1px solid #ded8d2;background:#fff}@media(max-width:680px){.diatonic-trainer.svelte-11lhh78{margin-top:18px;padding:16px}.diatonic-list.svelte-11lhh78{grid-template-columns:repeat(7,78px)}}.app-shell.svelte-1n46o8q{min-height:100vh;padding:52px 20px 64px}.app-header.svelte-1n46o8q{width:min(100%,640px);margin:0 auto}.app-header.svelte-1n46o8q{display:flex;align-items:center;justify-content:space-between;padding:0 4px 18px}.brand.svelte-1n46o8q{color:#292422;display:inline-flex;gap:9px;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;font-weight:800;text-decoration:none;letter-spacing:-.04em}.brand-mark.svelte-1n46o8q{width:12px;height:12px;display:grid;place-items:center;color:transparent;font-size:0;border-radius:3px;background:#db8b3d}.brand-byline.svelte-1n46o8q{color:#96908b;font-family:Inter,system-ui,sans-serif;font-size:10px;font-weight:500;letter-spacing:0;white-space:nowrap}.brand-byline.svelte-1n46o8q a:where(.svelte-1n46o8q){color:inherit;text-decoration:underline;text-underline-offset:2px}.header-caption.svelte-1n46o8q{color:#96908b;font-size:11px}.header-actions.svelte-1n46o8q{display:flex;align-items:center;gap:12px}.language-button.svelte-1n46o8q{border:1px solid #e2ded9;border-radius:8px;padding:6px 8px;color:#827a74;background:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:800;letter-spacing:.06em}.keyboard-layout.svelte-1n46o8q{display:flex;flex-direction:column;justify-content:center;width:min(100%,1400px);min-height:calc(100vh - 190px);margin:0 auto}.diatonic-workbench.svelte-1n46o8q{display:grid;grid-template-columns:minmax(0,400px) minmax(0,700px);align-items:end;gap:20px;margin-bottom:14px}@media(max-width:900px){.diatonic-workbench.svelte-1n46o8q{grid-template-columns:1fr;gap:0}}@media(max-width:680px){.app-shell.svelte-1n46o8q{padding:16px 12px 35px}.app-header.svelte-1n46o8q{padding-bottom:16px}.header-caption.svelte-1n46o8q{display:none}}