.recording-panel{margin-top:20px;padding:20px 24px;border:1px solid var(--line);border-radius:12px;background:#eeefe5;color:var(--ink)}.recording-panel h2{margin:0 0 14px;font:400 24px Georgia,serif}.recording-panel p{font-size:12px;line-height:1.7;max-width:75ch}.recording-panel h3{margin:22px 0 10px;font-size:15px}.recording-panel ol{padding-left:22px;font-size:12px;line-height:1.7;max-width:75ch}.recording-panel li+li{margin-top:8px}.recording-panel p a{color:inherit;text-underline-offset:3px}.recording-help summary{cursor:pointer;font-size:12px;padding:12px 0}.recording-format{flex-basis:100%;font-size:12px;line-height:1.6}.recording-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.recording-controls :is(button,a){display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid currentColor;border-radius:6px;padding:8px 12px;background:transparent;color:inherit;font:12px Segoe UI,Arial,sans-serif;text-decoration:none;cursor:pointer}.recording-controls label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:12px;cursor:pointer}.recording-controls input{width:18px;height:18px;accent-color:#728f4b}.recording-controls [aria-pressed=true]{background:#f3d49b;color:#213831}.recording-controls button:disabled{cursor:not-allowed;opacity:.6}.recording-controls :is([data-record-action],[data-record-stop]){gap:8px}.recording-controls [data-record-action]:not([data-record-state=ready]),.recording-controls [data-record-stop]{background:#9b303c;border-color:#e6a7ae;color:#fff}.recording-controls [data-record-action]:not([data-record-state=ready]):before,.recording-controls [data-record-stop]:before{content:"";width:9px;height:9px;flex:none;border-radius:50%;background:currentColor}.recording-controls :is([data-record-action],[data-record-stop]):is([data-record-state=recording],[data-record-state=starting],[data-record-state=stopping]):before{border-radius:1px}.recording-controls :is([data-record-action],[data-record-stop]):focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #213831}.recording-controls :is([data-record-action],[data-record-stop]):disabled{opacity:1;background:#675b5e;color:#fff;border-color:#bcaeb1}.recording-safety{flex-basis:100%;justify-content:center;font-size:12px}.recording-compact{justify-content:center;flex-basis:100%;border-top:1px solid #ffffff30;padding-top:8px;gap:8px}.recording-compact span{font-size:11px}#recording-preview{display:block;max-width:100%;max-height:60svh;width:640px;margin-bottom:16px;background:#171c21}#recording-error{border-left:3px solid currentColor;padding-left:12px}[data-theme=dark] .recording-panel{background:var(--theme-surface)}[data-theme=dark] .recording-controls input{accent-color:var(--theme-blue)}.immersive-camera .recording-panel{background:color-mix(in srgb,var(--immersive-surface, #f6f5ef) 76%,transparent)}@media(max-width:760px){.recording-panel{padding:18px 16px}}:root{font-family:Segoe UI,Arial,sans-serif;color:#273c37;background:#f6f5ef;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #213831;--muted: #6d776d;--line: #dfE2d6;--lime: #d9edb0;--dark: #182c29}*{box-sizing:border-box}body{margin:0}html:not(:has(.immersive-camera)){scrollbar-gutter:stable}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.7}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #c58a4b;outline-offset:4px}input:focus-visible{outline:2px solid #c58a4b;outline-offset:5px}[hidden]{display:none!important}svg{width:20px;height:20px;flex-shrink:0}.shell{max-width:1456px;margin:auto;padding:0 64px}.masthead{height:102px;display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none;font-size:37px;letter-spacing:-2px;font-weight:650}.brand-dot{color:#94a96c}.brand-mark{display:flex;height:29px;align-items:center;gap:4px;margin-right:13px}.brand-mark i{display:block;width:4px;border-radius:5px;height:17px;background:var(--ink)}.brand-mark i:nth-child(2){height:29px}.brand-mark i:nth-child(3){height:23px}.brand-mark i:nth-child(4){height:12px}.masthead-caption{font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:8px}.local-badge{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:#596d53}.local-badge svg{width:17px;height:17px}.intro{padding:50px 0 38px;display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{font-size:9px;font-weight:650;letter-spacing:2px}.intro>div{flex:1;min-width:0}h1{font-family:Georgia,Times New Roman,serif;font-size:clamp(42px,4.4vw,62px);line-height:1.06;font-weight:400;letter-spacing:-2.8px;margin:0}.intro-copy{flex-shrink:0;font-size:14px;line-height:1.85;color:var(--muted);margin:0 12px 5px 35px}.tonality{margin-bottom:20px;padding:20px 24px;border:1px solid var(--line);border-radius:12px;background:#eeefe5}.tonality-controls{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}.tonality-controls label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:600;color:#56684a}.tonality-controls select{max-width:100%;min-height:42px;padding:8px 30px 8px 12px;border:1px solid #bdcbae;border-radius:6px;background:#f7f8ef;color:var(--ink);font-size:12px;cursor:pointer}.tonality-controls p{margin:0 0 4px auto;color:#6d7762;font-size:11px;line-height:1.7}.scale-mapping{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:17px}.scale-mapping span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 4px;border-radius:5px;background:#e1e8d5;font-size:19px}.scale-mapping small{color:#758565;font-size:9px}.scale-mapping b{font:19px Georgia,serif}.scale-mapping .hand-shape,.voicing-shapes .hand-shape{display:block;width:auto;max-width:100%;height:1.22em;color:#63754f}.root-shape-caption{margin:10px 0 0;font-size:10px;line-height:1.6;color:#56684a}.left-shape-guide{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.left-shape-guide h2{font-size:12px;font-weight:600;color:#56684a;margin:0 0 10px}.voicing-shapes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}.voicing-shapes li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 4px;border-radius:5px;background:#e1e8d5;font-size:19px}.voicing-shapes b{display:flex;align-items:center;min-height:2.6em;text-align:center;font-size:11px;line-height:1.3;font-weight:500}@media(max-width:760px){.voicing-shapes{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.voicing-shapes li{font-size:16px}}@media(max-width:760px){.tonality{padding:18px 16px}.tonality-controls{gap:12px}.tonality-controls label{min-width:0}.tonality-controls p{margin-left:0}.scale-mapping{gap:4px}.scale-mapping span{flex-direction:column;gap:3px;font-size:16px}.scale-mapping b{font-size:16px}}.instrument{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(305px,1fr);gap:20px;align-items:start}.camera-card{border-radius:16px;background:var(--dark);color:#edf1df;min-width:0;overflow:hidden;display:flex;flex-direction:column}.camera-toolbar{height:66px;padding:15px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0c;gap:12px}.mode-switch{display:flex;align-items:center;gap:3px;background:#10221f;border-radius:7px;padding:4px}.mode-button{border:0;background:transparent;color:#9caea4;display:flex;align-items:center;gap:7px;font-size:11px;border-radius:5px;padding:8px 12px}.mode-button.selected{color:#eef3e3;background:#344841}.mode-button svg{width:14px;height:14px}.live-status{display:flex;align-items:center;gap:7px;color:#a2b2a7;font-size:8px;letter-spacing:1.2px;white-space:nowrap}.live-status i{width:5px;height:5px;background:#6e8074;border-radius:50%}.live-status.live i{background:var(--lime);box-shadow:0 0 10px #d9edb040}#camera-panel{flex:1;display:flex;flex-direction:column}.camera-stage{position:relative;flex:none;aspect-ratio:4 / 3;min-height:400px;background:radial-gradient(ellipse at 50% 37%,#2a4138 0,#1d332d 40%,#182c29 75%)}.camera-media{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.camera-media video,.camera-media canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;object-position:center}.camera-media video{transform:scaleX(-1);opacity:0}.camera-media video.visible{opacity:1}.camera-media canvas{pointer-events:none}.camera-empty{display:flex;flex-direction:column;align-items:center;text-align:center;position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;padding:18px 20px 24px}.hand-art{width:270px;height:178px;color:#ccdbac;opacity:.75;margin-bottom:9px}.camera-empty h2{font:400 25px Georgia,serif;margin:0 0 12px;letter-spacing:-.4px}.camera-empty p{font-size:12px;color:#a6b4a7;line-height:1.7;margin:0 0 25px}.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:14px 23px;border-radius:7px;border:0;font-size:12px;font-weight:650;min-height:45px;transition:background .15s,transform .15s}.button.primary{color:#23372a;background:var(--lime)}.button.primary:hover{background:#e9f5cd;transform:translateY(-1px)}.button svg{width:16px;height:16px}.permission-note{margin-top:12px;font-size:9px;color:#98a89b}.frame-corner{position:absolute;height:18px;width:18px;border:1px solid #aec89935;pointer-events:none}.top-left{top:20px;left:22px;border-right:0;border-bottom:0}.top-right{top:20px;right:22px;border-left:0;border-bottom:0}.bottom-left{bottom:20px;left:22px;border-right:0;border-top:0}.bottom-right{bottom:20px;right:22px;border-left:0;border-top:0}.preview-tag{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:#172a28c9;border-radius:4px;padding:6px 9px;font-size:8px;letter-spacing:1px;white-space:nowrap}.tracking-bar{min-height:54px;border-top:1px solid #ffffff0c;display:flex;align-items:center;gap:9px;padding:13px 23px;font-size:10px;color:#a5b3a5}.tracking-dot{width:5px;height:5px;border:1px solid #91a584;border-radius:50%;flex-shrink:0}.tracking-dot.active{background:var(--lime);border-color:var(--lime)}.stop-button{display:flex;gap:5px;align-items:center;margin-left:auto;background:#ffffff0d;border:1px solid #ffffff25;border-radius:5px;padding:7px 10px;color:#e7eddf;font-size:10px}.stop-button svg{width:11px;height:11px}.sound-card{padding:18px 20px;border:1px solid #dfe3d7;border-radius:16px;background:#eeefe5;display:flex;flex-direction:column}.sound-card{min-width:0}.sound-content{display:flex;flex:1;flex-direction:column;min-width:0}.sound-content>.sound-state{align-self:flex-end;margin-top:8px}.sound-card>.legend-toggle{align-self:flex-start;padding:0 12px}body:not(.immersive-camera) .sound-card:has(>.sound-content[hidden]){align-self:start;padding-top:12px;padding-bottom:12px}.sound-content:focus-visible{outline:2px solid var(--theme-accent, #c58a4b);outline-offset:2px}@media(min-width:761px){body:not(.immersive-camera) .sound-card:has(>.sound-content:not([hidden])){contain:size;align-self:stretch;min-height:0}body:not(.immersive-camera) .sound-card>.legend-toggle{flex-shrink:0}body:not(.immersive-camera) .sound-content{min-height:0;overflow-y:auto;scrollbar-gutter:stable}body:not(.immersive-camera) .sound-content>*{flex-shrink:0}}.sound-state{color:#77826f;font-size:8px;letter-spacing:.8px;border:1px solid #d8dece;border-radius:4px;padding:4px 6px;white-space:nowrap}.sound-state.playing{background:var(--lime);border-color:#bed299;color:#425b2c}.chord-display{text-align:center;margin:8px 0 0;min-height:128px}.chord-display h2{font-family:Georgia,serif;font-size:64px;letter-spacing:-3px;font-weight:400;line-height:1.05;margin:0}.chord-display h2.long-chord{font-size:42px;letter-spacing:-2px;min-height:67.2px;display:flex;justify-content:center;align-items:center}.chord-display p{color:#6f7a67;font-size:11px;margin:6px 0 10px}.note-chips{display:flex;justify-content:center;gap:7px;min-height:24px}.note-chips span{font-size:8px;color:#839076;letter-spacing:1px;border:1px solid #d9dfce;padding:5px 8px;border-radius:4px}.note-chips .note{background:#dce6cb;color:#425b36;font-size:10px;min-width:30px;letter-spacing:0}.output-meter{display:flex;align-items:center;justify-content:center;gap:12px;min-height:32px;margin-bottom:12px;color:#56684a;font-size:10px;letter-spacing:.8px}.output-segments{display:flex;gap:4px}.output-value{min-width:4.5ch;text-align:right;letter-spacing:0;font-variant-numeric:tabular-nums}.output-segments i{width:14px;height:8px;border-radius:2px;border:1px solid #879678;background:transparent}.output-segments i.lit{background:#637d4e;border-color:#637d4e}.hand-readings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 0;border-top:1px solid #d9dfce;border-bottom:1px solid #d9dfce;gap:12px}.hand-readings>div+div{padding-left:15px;border-left:1px solid #d9dfce}.reading-label{display:flex;align-items:center;gap:5px;font-size:8px;letter-spacing:1px;color:#748167}.reading-label i{width:5px;height:5px;border-radius:50%}.right-dot{background:#97ad70}.left-dot{background:#c99074}.hand-readings strong{display:block;font-weight:500;font-size:12px;margin:6px 0 5px}.hand-readings small{color:#7c8672;font-size:9px}.finger-indicators{display:flex;gap:4px;margin-top:8px}.finger-indicators span{display:inline-flex;align-items:center;justify-content:center;width:19px;height:20px;border:1px solid #d1d9c5;border-radius:4px;font-size:8px;color:#7c8870}.finger-indicators span.extended{background:#c7dda4;border-color:#a2bc7a;color:#304829;font-weight:650}.sound-controls{padding-top:14px}.patch-controls,.tone-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:center}.instrument-label{display:flex;flex-direction:column;gap:7px;color:#56684a;font-size:11px;margin:0;min-width:0}.instrument-label select{width:100%;min-width:0;min-height:44px;padding:8px;background:#f7f8ef;color:var(--ink);border:1px solid #bdcbae;border-radius:6px;cursor:pointer}.instrument-hint{font-size:10px;line-height:1.6;color:#6d7762;margin:8px 0 12px}.instrument-hint:last-child{margin-bottom:0}.patch-label{display:flex;align-items:center;gap:10px;min-width:0;overflow-wrap:anywhere}.patch-icon{display:flex;align-items:center;justify-content:center;height:32px;width:32px;border-radius:7px;background:#e0e5d4;color:#647957}.patch-icon svg{width:16px;height:16px}.patch-label strong{display:block;font-size:12px;font-weight:600}.patch-label div>span{display:block;margin-top:4px;font-size:7px;letter-spacing:1.1px;color:#7d8870}.patch-dots{margin-left:auto;color:#9aa988;letter-spacing:2px}.slider-label{display:flex;justify-content:space-between;font-size:10px;margin-bottom:4px;color:#56684a}.slider-label output{font-size:9px;color:#758566;font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;height:18px;margin:0 0 13px;cursor:pointer;background:transparent;accent-color:#728f4b}input[type=range]::-webkit-slider-runnable-track{height:3px;background:#cdd6bc;border-radius:4px}input[type=range]::-webkit-slider-thumb{margin-top:-6px}.slider-endpoints{display:flex;justify-content:space-between;color:#879379;font-size:8px;margin-top:-8px}.tone-controls{grid-template-columns:minmax(0,1fr);align-items:start}.tone-controls input[type=range]{height:44px;margin:0}.tone-controls .slider-endpoints{margin-top:0}.manual-panel{padding:30px 36px;flex:1}.audition-heading .eyebrow{color:#a3b991;font-size:8px}.audition-heading h2{font:400 31px Georgia,serif;margin:13px 0 9px}.audition-heading p{font-size:12px;color:#9dad9f;margin:0 0 28px}fieldset{border:0;padding:0;margin:0 0 21px;min-width:0}legend{font-size:10px;color:#bac8b7;margin-bottom:9px;padding:0}.root-buttons{display:flex;flex-wrap:wrap;gap:9px}.root-button{flex:1 0 44px;min-width:0;background:#263e35;border:1px solid #3e5547;border-radius:6px;color:#d1deca;padding:11px;font:24px Georgia,serif}.root-button.selected{background:var(--lime);color:var(--ink);border-color:var(--lime)}.option-buttons{display:flex;gap:9px}#manual-voicing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#manual-quality button:disabled{cursor:not-allowed;opacity:.45}.mute-button{background:#2b4139;color:#d7e5c8}.option-buttons button{flex:1;border:1px solid #3f5648;background:transparent;border-radius:6px;padding:11px;color:#aabca4;font-size:11px}.option-buttons button.selected{background:#354b39;color:#e0edc8;border-color:#9aaf7b}.scale-mapping>span.is-playing,.voicing-shapes>li.is-playing,#manual-roots button.is-playing,#manual-voicing button.is-playing,#manual-quality button.is-playing{background:#f3d49b;color:#213831;box-shadow:inset 0 0 0 2px #796039;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}.is-playing .hand-shape,.is-playing small,#manual-quality button.is-playing span{color:#425536}.option-buttons span{display:block;color:#9aae92;font-size:9px;margin-top:5px}.manual-panel .button{width:100%;margin-top:5px}.manual-note{text-align:center;font-size:9px;color:#96aa98;margin:12px 0 0}.error-panel{display:flex;align-items:flex-start;gap:13px;padding:20px;background:#fae8d9;border:1px solid #dfb596;border-radius:10px;color:#754528;margin-top:18px;font-size:12px;line-height:1.6}.error-panel strong{white-space:nowrap}.error-panel button{background:none;border:0;color:inherit;font-size:23px;padding:0 4px;margin-left:auto}.gesture-guide{padding:40px 0 25px}.guide-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.guide-heading h2{font:400 25px/1.3 Georgia,serif;letter-spacing:-.6px;margin:0}.guide-heading>span{margin-left:auto;font-size:7px;letter-spacing:1.7px;color:#8b947e}.guide-content{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:20px}.guide-content .fine-print{grid-column:1 / -1;padding-bottom:0}.step-number{font-size:9px;color:#8c9b73;font-variant-numeric:tabular-nums}.guide-step h3{font-weight:550;font-size:14px;margin:12px 0 10px}.guide-step p{font-size:10px;line-height:1.9;color:#7c8573;margin:0 0 14px}.guide-step p strong{font-weight:550;color:#526648}.root-map{display:flex;flex-wrap:wrap;gap:9px}.root-map span{display:flex;flex-direction:column;align-items:center;gap:4px}.guide-step .special-shapes{margin-top:12px}.root-map b{font:15px Georgia,serif;color:#547042;border-radius:4px;background:#e9eddf;padding:5px 9px}.root-map small{font-size:8px;color:#94a083}.tilt-demo{display:flex;gap:19px;align-items:center}.tilt-demo span{display:flex;gap:9px;align-items:center;font-size:9px;color:#687c58}.tilt-demo b{font-size:30px;font-weight:400;color:#8b9e75}.voicing-map{display:flex;flex-wrap:wrap;gap:13px}.voicing-map span{display:flex;align-items:center;gap:7px;font-size:9px;color:#687c58}.voicing-map b{padding:6px 9px;background:#e9eddf;font-size:13px;font-weight:500;border-radius:4px}.fine-print{display:flex;justify-content:space-between;gap:25px;padding-bottom:28px}.fine-print p{font-size:9px;line-height:1.8;color:#8b9480;margin:0}footer{border-top:1px solid var(--line);padding:25px 0 29px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#89937d;font-size:9px}footer span{display:flex;align-items:center;gap:5px}footer svg{width:13px;height:13px}footer span:last-child{font-size:7px;letter-spacing:1.5px}footer>.footer-message{display:block}.spinner{width:14px;height:14px;border:2px solid #273c3730;border-top-color:var(--ink);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1450px){.intro{padding-top:58px;padding-bottom:43px}.camera-empty{padding-top:34px}.hand-art{height:200px;width:310px}}@media(max-width:1100px){.shell{padding:0 32px}.intro-copy{font-size:12px}.instrument{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr)}.gesture-guide{gap:17px;grid-template-columns:1fr 1fr 1fr}.guide-heading{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between}.guide-heading h2 br{display:none}.guide-heading h2{margin:0}.guide-heading>span{margin-right:4px}.masthead-caption{font-size:8px;letter-spacing:1.2px}}@media(max-width:760px){.shell{padding:0 20px}.masthead{height:80px}.masthead-caption{display:none}.brand{font-size:32px}.local-badge{font-size:10px}.intro{padding:33px 0 28px}.intro-copy{display:none}h1{font-size:46px}.instrument{grid-template-columns:1fr;gap:16px}.camera-stage{min-height:320px}.camera-empty{padding:16px 20px}.hand-art{height:96px;width:160px}.sound-card{padding:18px 16px}.patch-icon{display:none}.camera-toolbar{padding:14px 17px}.gesture-guide{padding-top:28px;grid-template-columns:1fr;gap:22px}.guide-heading{grid-column:1;align-items:flex-start}.guide-heading h2{font-size:22px}.guide-heading>span{font-size:6px;margin-top:9px}.guide-step{border-top:1px solid var(--line);padding-top:17px}.guide-step h3{margin-top:8px}.guide-step p{font-size:12px}.step-number{float:right}.root-map{gap:13px}.fine-print{flex-direction:column;gap:12px}.fine-print p{font-size:10px}footer{flex-wrap:wrap;font-size:8px}footer span:nth-child(2){order:3;width:100%}.error-panel{flex-wrap:wrap}.error-panel strong{width:calc(100% - 35px)}.error-panel span{order:3}.manual-panel{padding:30px 24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.right-shape-guide{margin-top:16px}@media(max-width:760px){.guide-content{grid-template-columns:1fr;gap:22px}.guide-heading{align-items:center}}.legend-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.legend-heading h2{font-size:12px;font-weight:600;color:var(--ink);margin:0}.legend-toggle{min-width:60px;min-height:44px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);font-size:11px}.right-shape-guide .scale-mapping{margin-top:0}.view-toggle{border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;min-height:44px;padding:8px 12px;font-size:11px}.camera-toolbar{height:auto;min-height:66px;flex-wrap:wrap}.camera-toolbar .view-toggle{margin-left:auto}.immersive-toolbar{position:fixed;z-index:5;top:max(12px,env(safe-area-inset-top));left:50%;transform:translate(-50%);width:max-content;max-width:calc(100% - 24px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:12px;border:1px solid #718277;border-radius:12px;background:#182c29;color:#f6f5ef;box-shadow:0 4px 24px #0005}.immersive-safety,.immersive-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;width:100%;min-width:0}.immersive-toolbar{width:min(680px,calc(100% - 24px))}.immersive-safety{position:sticky;top:0;z-index:1;width:fit-content;max-width:100%;padding:8px;border:1px solid transparent;border-radius:10px;background:var(--immersive-chrome, #182c29)}.immersive-safety>span{font-size:12px}.immersive-toolbar.controls-collapsed{background:transparent;border-color:transparent;box-shadow:none;pointer-events:none}.immersive-options[hidden]{display:flex!important;visibility:hidden;pointer-events:none}.immersive-toolbar.controls-collapsed .immersive-safety{border-color:#718277;pointer-events:auto}.immersive-toolbar .immersive-tracking{flex-basis:100%;max-width:620px;text-align:center;line-height:1.5}.immersive-toolbar{max-height:calc(100dvh - 24px);overflow:auto}.immersive-toolbar .stop-button{min-height:44px;margin:0}.immersive-camera #app{isolation:isolate}.immersive-camera #camera-media{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:#182c29}.immersive-camera #camera-media video,.immersive-camera #camera-media canvas{object-fit:cover}.immersive-camera .shell{position:relative;z-index:1;padding-top:150px}.immersive-camera .immersive-toolbar{background:color-mix(in srgb,var(--immersive-chrome, #182c29) 88%,transparent)}.immersive-camera .immersive-toolbar.controls-collapsed{background:transparent}.immersive-camera .masthead,.immersive-camera .intro,.immersive-camera .gesture-guide,.immersive-camera footer{padding-left:20px;padding-right:20px;border-radius:12px}.immersive-camera :is(.masthead,.intro,.tonality,.sound-card,.gesture-guide,footer,.error-panel){background:color-mix(in srgb,var(--immersive-surface, #f6f5ef) 76%,transparent)}.immersive-camera .camera-card{display:none}.immersive-camera .instrument{display:flex;justify-content:flex-end}.immersive-camera .sound-card{width:min(100%,430px)}.immersive-camera .sound-content[hidden]{display:flex!important;visibility:hidden;pointer-events:none}.immersive-camera .sound-card:has(>.sound-content[hidden]){background:transparent;border-color:transparent}.immersive-camera .sound-card:has(>.sound-content[hidden])>.legend-toggle{align-self:flex-end;background:color-mix(in srgb,var(--immersive-surface, #f6f5ef) 76%,transparent)}@media(min-width:761px){.immersive-camera .instrument{margin-right:calc(24px + (100% - 100vw)/2)}}.immersive-camera .scale-mapping>span:not(.is-playing),.immersive-camera .voicing-shapes>li:not(.is-playing),.immersive-camera .root-map b,.immersive-camera .voicing-map b{background:color-mix(in srgb,var(--immersive-tile, #e1e8d5) 48%,transparent)}.immersive-camera :is(.local-badge,.masthead-caption,.tonality-controls label,.tonality-controls p,.root-shape-caption,.legend-heading h2,.instrument-label,.instrument-hint,.slider-label,.slider-label output,.slider-endpoints,.chord-display p,.reading-label,.hand-readings small,.patch-label div>span,.guide-step p,.guide-step p strong,.fine-print p,footer,.guide-heading>span,.step-number,.root-map small,.tilt-demo span,.voicing-map span,.scale-mapping>span:not(.is-playing) small,.sound-state:not(.playing),.note-chips span,.finger-indicators span:not(.extended)){color:var(--immersive-muted, #354c42)}.immersive-camera .error-panel{color:var(--ink)}.immersive-camera .tonality{background:transparent;border-color:transparent;box-shadow:none;color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000}body.immersive-camera .tonality :is(.tonality-controls label,.tonality-controls p,.root-shape-caption,.legend-heading h2,.scale-mapping small,.left-shape-guide h2,.hand-shape){color:inherit}.immersive-camera .tonality .left-shape-guide{border-color:transparent}.immersive-camera .tonality :is(.scale-mapping>span,.voicing-shapes>li):not(.is-playing){background:color-mix(in srgb,var(--immersive-chrome, #182c29) 45%,transparent);box-shadow:inset 0 0 0 1px #ffffff80;color:inherit}.immersive-camera .tonality .legend-toggle{color:inherit;border-color:#fff;text-shadow:inherit}.immersive-camera .tonality :is(select,option){background:#f7f8ef;color:#213831;text-shadow:none}.immersive-camera .tonality .is-playing{text-shadow:none}body.immersive-camera .tonality .is-playing :is(small,.hand-shape){color:inherit}.immersive-camera .intro{margin-top:12px;margin-bottom:16px}.immersive-camera .masthead{height:72px}.immersive-camera .intro{padding-top:16px;padding-bottom:16px}.immersive-camera h1{font-size:clamp(28px,3vw,38px);letter-spacing:-1px}.immersive-camera .gesture-guide{margin-top:24px}html:has(.immersive-camera){scroll-padding-top:210px}@media(max-width:760px){.camera-toolbar{gap:10px}.camera-toolbar .view-toggle{margin-left:0}.immersive-camera .shell{padding-left:12px;padding-right:12px}.immersive-toolbar,.immersive-safety,.immersive-options{gap:8px}.immersive-safety>span{flex-basis:100%;text-align:center}.immersive-toolbar .button,.immersive-toolbar .view-toggle{padding:10px}.immersive-camera .masthead{flex-wrap:wrap;gap:8px;height:auto;min-height:80px;padding-top:10px;padding-bottom:10px}}@media(max-width:760px),(max-width:1000px)and (max-height:500px)and (pointer:coarse){html:not(:has(.immersive-camera)){scrollbar-gutter:stable both-edges}.camera-empty{padding:16px 20px;scrollbar-gutter:stable both-edges}.camera-empty>*{max-width:100%;flex-shrink:0}.camera-empty>:first-child{margin-top:auto}.camera-empty>:last-child{margin-bottom:auto}body:not(.immersive-camera) .instrument{grid-template-columns:minmax(0,1fr)}body:not(.immersive-camera) .sound-card:has(>.sound-content:not([hidden])){contain:none;align-self:start}body:not(.immersive-camera) .sound-content{overflow-y:visible;scrollbar-gutter:auto}.immersive-camera #app{--mobile-camera-height: calc(100svh - max(12px, env(safe-area-inset-top)) - env(safe-area-inset-bottom)) ;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom)}.immersive-camera .immersive-toolbar{position:sticky;left:auto;transform:none;margin:0 auto;max-height:calc(var(--mobile-camera-height) * .5)}.immersive-camera .shell{padding-top:12px}.immersive-camera .tonality{margin-bottom:calc(20px + var(--mobile-camera-height) * .4)}html:has(.immersive-camera){scroll-padding-top:calc(50svh + 24px)}}