:root{color:#2d3833;font-synthesis:none;--header-height:78px;--footer-height:56px;--piano-height:88px;--green:#287665;--muted:#737a70;background:#f8f5ef;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0}#app{--piano-visible-height:0px;--sequence-visible-height:0px;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--header-height) minmax(0, 1fr) auto auto var(--footer-height);height:100dvh;display:grid}#app:has(#piano:not([hidden])){--piano-visible-height:var(--piano-height)}button,input,select{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.board-scroll:focus-visible,#staff:focus-visible{outline:3px solid var(--green);outline-offset:4px}#notation-display:focus-visible{outline:3px solid var(--green);outline-offset:2px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}h2{margin:0;font-size:15px;font-weight:650}.eyebrow{letter-spacing:2px;color:var(--green);font-size:10px;font-weight:750}.micro{color:#85897e;font-size:10px;line-height:1.8}.segmented{background:#efeee7;border-radius:9px;gap:4px;padding:4px;display:flex}.segmented button{color:var(--muted);background:0 0;border:0;border-radius:6px;flex:1;padding:9px 5px;font-size:12px}.segmented button[aria-pressed=true],.segmented button[aria-selected=true]{color:var(--green);background:#fffdf8;font-weight:650;box-shadow:0 1px 4px #0000000d}.segmented button:disabled{opacity:.5;cursor:default}.icon-button{color:#354d40;background:#fffdf8;border:1px solid #dce2d5;border-radius:10px;place-items:center;width:44px;height:44px;font-size:28px;display:grid}.icon-button:hover{background:#eef2e7}.icon-button[aria-expanded=true],.icon-button[aria-pressed=true]{border-color:var(--green);background:#e0eadd}.header{border-bottom:1px solid #e5e3d9;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.brand{letter-spacing:-1px;color:#2d3833;align-items:center;font-size:25px;font-weight:780;text-decoration:none;display:flex}.brand-end{color:var(--green)}.brand-mark{border-radius:9px;flex-shrink:0;width:39px;height:39px;margin-right:10px;display:block}.about-emblem{border-radius:28px;width:min(240px,100%);height:auto;margin:12px auto 24px;display:block}.header-actions{align-items:center;gap:10px;display:flex}.key-chip{min-height:44px;color:var(--green);white-space:nowrap;background:#e0eadd;border:1px solid #b8cebe;border-radius:10px;align-items:center;gap:10px;padding:8px 12px;font-size:12px;font-weight:650;display:flex}.key-chip[hidden]{display:none}.key-chip:hover{background:#d4e3d0}main,.workspace,.board-card,.board-scroll-wrap{min-width:0;height:100%;min-height:0}.footer{border-top:1px solid #e5e3d9;grid-row:5;justify-content:center;align-items:center;gap:10px;padding:6px 24px;display:flex;container:bottom-tools/inline-size}.labelled-button{justify-content:center;gap:8px;width:auto;min-width:44px;padding:0 12px;font-size:12px;display:flex}.pitch-sequence{color:#26382b;background:#fffdf8;border-top:1px solid #d9d4c4;grid-row:3;min-width:0}.pitch-sequence[hidden]{display:none}.sequence-heading{min-height:36px;color:var(--muted);justify-content:space-between;align-items:center;gap:8px;padding-inline:16px;font-size:11px;display:flex}.sequence-heading>span{margin-right:auto}.sequence-heading .clear-note{padding:9px 0}.sequence-heading .clear-note:disabled{opacity:.45;cursor:default}.sequence-confirm{background:#edf1e8;align-items:center;gap:12px;padding:8px 16px;font-size:11px;display:flex}.sequence-confirm[hidden]{display:none}.sequence-confirm>span{margin-right:auto}.sequence-confirm .clear-note{flex-shrink:0}.sequence-playhead{fill:#dfe9d7}.staff-note.playing{fill:var(--green);color:var(--green)}.staff-note.playing .note-stem{stroke:var(--green)}.sequence-scroll{overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#cbcbb9 transparent;overflow:auto hidden}.sequence-scroll:focus-visible{outline:2px solid var(--green);outline-offset:-2px}.sequence-scroll svg{display:block}.piano-dock{height:var(--piano-height);background:#f8f5ef;border-top:1px solid #d9d4c4;grid-row:4;min-width:0}.piano-dock[hidden]{display:none}.piano-scroll{overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#cbcbb9 transparent;height:100%;overflow:auto hidden}.piano-keys{height:100%;margin-inline:auto;position:relative}.piano-key{width:var(--white-key-width);color:#354d40;touch-action:pan-x;background:#fffdf8;border:1px solid #ccc8bb;border-top:0;border-radius:0 0 4px 4px;justify-content:center;align-items:flex-end;height:100%;padding:0 0 7px;font-size:11px;display:flex;position:absolute;top:0}.piano-key.black{z-index:1;width:var(--black-key-width);color:#fffdf8;background:#35413b;border-color:#24312c;height:58%;font-size:10px}.piano-key.selected{background:hsl(var(--note-hue) 72% 76%);color:#24312c;box-shadow:inset 0 0 0 2px #243d32}.piano-key:focus-visible{outline-offset:-3px;z-index:2}.piano-key .piano-label{pointer-events:none}.piano-key.black.selected .piano-label{background:#fffdf8;border-radius:3px;padding:2px;position:absolute;top:calc(100% + 5px)}.piano-key.dimmed .piano-label{opacity:.45}.piano-key.outside-key:not(.selected):after{content:"";pointer-events:none;background:#f8f5ef99;position:absolute;inset:0}.piano-key.outside-key:focus-visible:after{display:none}.panel-copy{color:var(--muted);padding:12px 24px 24px;font-size:13px;line-height:1.8}.panel-copy a{color:var(--green)}.material-icon{width:24px;height:24px;-webkit-mask:var(--icon) center / contain no-repeat;-webkit-mask:var(--icon) center / contain no-repeat;mask:var(--icon) center / contain no-repeat;background:currentColor;display:block}.icon-terminal{--icon:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20enable-background='new%200%200%2024%2024'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3e%3cg%3e%3crect%20fill='none'%20height='24'%20width='24'/%3e%3c/g%3e%3cg%3e%3cpath%20d='M20,4H4C2.89,4,2,4.9,2,6v12c0,1.1,0.89,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.11,4,20,4z%20M20,18H4V8h16V18z%20M18,17h-6v-2%20h6V17z%20M7.5,17l-1.41-1.41L8.67,13l-2.59-2.59L7.5,9l4,4L7.5,17z'/%3e%3c/g%3e%3c/svg%3e")}.icon-fit-page{--icon:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%20-960%20960%20960'%20width='24'%3e%3cpath%20d='M120-120v-720h80v720h-80Zm640%200v-720h80v720h-80ZM280-440v-80h80v80h-80Zm160%20320v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm160%20320v-80h80v80h-80Z'/%3e%3c/svg%3e")}.icon-fit-width{--icon:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%20-960%20960%20960'%20width='24'%3e%3cpath%20d='M120-120v-720h80v720h-80Zm640%200v-720h80v720h-80ZM280-440v-80h80v80h-80Zm160%200v-80h80v80h-80Zm160%200v-80h80v80h-80Z'/%3e%3c/svg%3e")}.icon-view-real-size{--icon:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%20-960%20960%20960'%20width='24'%3e%3cpath%20d='M280-280v-320h-80v-80h160v400h-80Zm160%200v-80h80v80h-80Zm200%200v-320h-80v-80h160v400h-80ZM440-440v-80h80v80h-80Z'/%3e%3c/svg%3e")}.icon-mic{--icon:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3e%3cpath%20d='M12%2014c1.66%200%202.99-1.34%202.99-3L15%205c0-1.66-1.34-3-3-3S9%203.34%209%205v6c0%201.66%201.34%203%203%203zm5.3-3c0%203-2.54%205.1-5.3%205.1S6.7%2014%206.7%2011H5c0%203.41%202.72%206.23%206%206.72V21h2v-3.28c3.28-.48%206-3.3%206-6.72h-1.7z'/%3e%3cpath%20d='M0%200h24v24H0z'%20fill='none'/%3e%3c/svg%3e")}.icon-mic-off{--icon:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3e%3cpath%20d='M0%200h24v24H0zm0%200h24v24H0z'%20fill='none'/%3e%3cpath%20d='M19%2011h-1.7c0%20.74-.16%201.43-.43%202.05l1.23%201.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9%203.34%209%205v.18l5.98%205.99zM4.27%203L3%204.27l6.01%206.01V11c0%201.66%201.33%203%202.99%203%20.22%200%20.44-.03.65-.08l1.66%201.66c-.71.33-1.5.52-2.31.52-2.76%200-5.3-2.1-5.3-5.1H5c0%203.41%202.72%206.23%206%206.72V21h2v-3.28c.91-.13%201.77-.45%202.54-.9L19.73%2021%2021%2019.73%204.27%203z'/%3e%3c/svg%3e")}.icon-speed{--icon:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3e%3cpath%20d='M0%200h24v24H0z'%20fill='none'/%3e%3cpath%20d='M20.38%208.57l-1.23%201.85a8%208%200%200%201-.22%207.58H5.07A8%208%200%200%201%2015.58%206.85l1.85-1.23A10%2010%200%200%200%203.35%2019a2%202%200%200%200%201.72%201h13.85a2%202%200%200%200%201.74-1%2010%2010%200%200%200-.27-10.44zm-9.79%206.84a2%202%200%200%200%202.83%200l5.66-8.49-8.49%205.66a2%202%200%200%200%200%202.83z'/%3e%3c/svg%3e")}.icon-music-note{--icon:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3e%3cpath%20d='M0%200h24v24H0z'%20fill='none'/%3e%3cpath%20d='M12%203v10.55c-.59-.34-1.27-.55-2-.55-2.21%200-4%201.79-4%204s1.79%204%204%204%204-1.79%204-4V7h4V3h-6z'/%3e%3c/svg%3e")}.icon-settings{--icon:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20enable-background='new%200%200%2024%2024'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3e%3cg%3e%3cpath%20d='M0,0h24v24H0V0z'%20fill='none'/%3e%3cpath%20d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61%20l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41%20h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87%20C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58%20c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54%20c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96%20c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z%20M12,15.6c-1.98,0-3.6-1.62-3.6-3.6%20s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3e%3c/g%3e%3c/svg%3e")}.icon-info{--icon:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3e%3cpath%20d='M0%200h24v24H0z'%20fill='none'/%3e%3cpath%20d='M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm1%2015h-2v-6h2v6zm0-8h-2V7h2v2z'/%3e%3c/svg%3e")}.icon-help{--icon:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3e%3cpath%20d='M0%200h24v24H0z'%20fill='none'/%3e%3cpath%20d='M11%2018h2v-2h-2v2zm1-16C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208zm0-14c-2.21%200-4%201.79-4%204h2c0-1.1.9-2%202-2s2%20.9%202%202c0%202-3%201.75-3%205h2c0-2.25%203-2.5%203-5%200-2.21-1.79-4-4-4z'/%3e%3c/svg%3e")}.board-card{overflow:hidden}.board-scroll-wrap{position:relative}.board-scroll{overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#cbcbb9 transparent;background:linear-gradient(90deg,#f6f4ed,#fbfaf5 15% 85%,#f6f4ed);height:100%;overflow:auto}.board-zoom-space{margin-inline:auto}.board-zoom-space.zoomable{position:relative;overflow:hidden}.board-zoom-space.zoomable .fingerboard{transform-origin:0 0;min-width:0;max-width:none;margin:0;position:absolute;top:0;left:0}.fingerboard{width:100%;height:var(--board-height);min-width:520px;max-width:900px;margin-inline:auto;position:relative}.settings-panel.assistance-panel{inset:calc(var(--header-height) + 8px) 12px auto auto;border:1px solid #e3e0d5;border-radius:12px;width:min(300px,100vw - 24px);height:auto}.assistance-panel .settings-heading{padding:12px 16px}.panel-actions{gap:4px;padding:8px;display:grid}.panel-actions button{color:#354d40;text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:12px;min-height:44px;padding:10px 12px;font-size:14px;display:flex}.panel-actions button:hover{background:#eef2e7}.panel-actions button[aria-pressed=true]{background:#e0eadd}.panel-actions button[aria-pressed]:after{content:"✓";visibility:hidden;margin-left:auto}.panel-actions button[aria-pressed=true]:after{visibility:visible}.notes{background:repeating-linear-gradient(90deg,#0000 0 calc(12.5% - 1px),#d9d4c4 calc(12.5% - 1px) calc(12.5% + 1px),#0000 calc(12.5% + 1px) 25%);position:absolute;inset:0 120px}.notes:before{content:"";top:var(--nut-y);background:#b7aa8b;border-radius:4px;height:5px;position:absolute;left:12.5%;right:12.5%;box-shadow:0 2px #e9e4d4}.note-row{width:100%;height:var(--row-height);pointer-events:none;grid-template-columns:repeat(4,1fr);align-items:center;display:grid;position:absolute}.note-cell{justify-content:center;display:flex;position:relative}.note{width:var(--note-size,var(--note-diameter));height:var(--note-size,var(--note-diameter));pointer-events:auto;border:1px solid hsl(var(--note-hue) 65% 48%);color:#24312c;background:hsl(var(--note-hue) 72% 76%);border-radius:50%;padding:0;font-size:12px;font-weight:550;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 3px #343d2005}.note:hover{transform:scale(1.08);box-shadow:0 3px 8px #343d2018}.note.selected{outline-offset:3px;outline:3px solid #243d32;font-weight:750;box-shadow:0 0 0 6px #fffdf8}.note.crowded{box-shadow:none;border-color:#0000}.note.crowded.selected{outline-offset:1px;box-shadow:none;outline-width:2px}.open-row .note{font-family:Georgia,serif;font-size:17px}.string-numeral{color:#737768;pointer-events:none;font-family:Georgia,serif;font-size:15px;line-height:1.2;position:absolute;bottom:calc(100% + 12px);left:calc(50% + 10px)}.notes.has-selection .note:not(.selected){opacity:.22}.notes.has-key.has-selection .note:not(.selected):not(.outside-key){opacity:.55}.notes.has-key .note.outside-key:not(.selected){opacity:.22}.notes.has-selection .note:not(.selected):hover,.notes.has-selection .note:not(.selected):focus-visible{opacity:.75}.notes.has-key .note:not(.selected):hover,.notes.has-key .note:not(.selected):focus-visible,.notes.has-key.has-selection .note:not(.selected):hover,.notes.has-key.has-selection .note:not(.selected):focus-visible{opacity:1}.overlays{width:100%;height:var(--board-height);pointer-events:none;position:absolute;inset:0}.overlays text{letter-spacing:.5px;font:600 11px ui-sans-serif,system-ui}.overlays .finger-number{letter-spacing:0;font-size:10px;font-weight:750}.overlays .position-label{letter-spacing:0;font-size:10px}#notation-display{z-index:2;color:#26382b;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#f8f6ef;border:1px solid #dce2d5;border-radius:8px;width:120px;height:130px;display:block;position:absolute;top:4px;left:4px;overflow:hidden}#notation-display.dragging{cursor:grabbing}#notation-display.expanded{height:220px}#compact-staff{pointer-events:none;width:100%;height:218px;display:block;position:absolute;bottom:0}.notation-size-toggle{width:24px;height:24px;color:var(--muted);touch-action:manipulation;background:#f8f6ef;border:0;border-radius:4px;place-items:center;padding:0;display:grid;position:absolute;top:2px;right:2px}.notation-size-toggle:hover{background:#e0eadd}.settings-panel{inset:var(--header-height) 0 calc(var(--footer-height) + var(--piano-visible-height,0px) + var(--sequence-visible-height,0px)) auto;width:min(360px,100%);height:calc(100dvh - var(--header-height) - var(--footer-height) - var(--piano-visible-height,0px) - var(--sequence-visible-height,0px));max-height:calc(100dvh - var(--header-height) - var(--footer-height) - var(--piano-visible-height,0px) - var(--sequence-visible-height,0px));z-index:10;background:#fffdf8;border:0;border-left:1px solid #e3e0d5;max-width:100%;margin:0;padding:0;position:fixed;overflow-y:auto;box-shadow:-10px 0 40px #26382b20}#settings,#notation-panel{bottom:var(--footer-height);height:calc(100dvh - var(--header-height) - var(--footer-height));max-height:calc(100dvh - var(--header-height) - var(--footer-height))}.settings-panel[open]{animation:.2s ease-out slide-in}.settings-heading{border-bottom:1px solid #e6e3d8;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.settings-heading h2{font-size:18px}.settings-tabs{z-index:1;margin:12px 24px 0;position:sticky;top:0}.settings-tabs button{min-width:0;min-height:44px;padding-inline:6px;font-size:12px}.controls{padding:24px}.controls section+section{border-top:1px solid #e8e5dc;margin-top:24px;padding-top:23px}.hint{color:var(--muted);margin:13px 0;font-size:11px;line-height:1.6}.key-control{justify-content:space-between;align-items:center;gap:12px;margin-top:18px;font-size:12px;display:flex}.key-control select{min-width:0;min-height:44px;color:var(--green);background:#fffdf8;border:1px solid #b8cebe;border-radius:8px;flex:1;padding:8px 12px}.key-notes{color:var(--muted);margin-bottom:0;font-size:12px;line-height:1.8}.position-choice-row{grid-template-columns:1.65fr 1fr;align-items:center;gap:6px;font-size:11px;display:grid}.position-choice,.position-variant{min-width:0}.position-choice-row .slider-switch{gap:4px}.position-choice-row .switch-track{flex-shrink:0}.extension{cursor:pointer;align-items:center;gap:9px;margin-top:18px;font-size:11px;line-height:1.6;display:flex}.extension small{color:#92958c;font-size:10px;display:block}.volume-label{color:var(--muted);justify-content:space-between;margin:18px 0 10px;font-size:11px;display:flex}input[type=range]{width:100%;accent-color:var(--green);height:20px;margin:0}.note-widget{background:#fffdf8;padding:20px}.notation-panel .settings-heading{gap:12px}.notation-panel .settings-heading h2{margin-right:auto}.clear-note{color:#647660;background:0 0;border:0;padding:10px 0;font-size:10px}.widget-body{flex-direction:column;display:flex}#staff{cursor:crosshair;touch-action:manipulation;color:#26382b;border:1px solid #dce2d5;border-radius:4px;width:100%;height:300px;display:block}#staff:focus-visible{outline-offset:2px;border-radius:8px}.staff-note{pointer-events:none}.preview-note{opacity:.6}#selected-note{margin:14px 0 6px;font-size:17px;font-weight:600}#selected-detail{color:#76816c;font-size:10px;line-height:1.6}#audio-status{color:#697c62;margin-top:8px;font-size:10px;line-height:1.5;display:block}#staff-help{color:var(--muted);margin:12px 0 0;font-size:10px;line-height:1.7}.accidentals button{padding:4px;font-size:21px}.accidentals button[aria-pressed=true]{background:#e0eadd}.accidentals button:disabled{opacity:.35;cursor:default}@keyframes slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@media (width<=700px){:root{--header-height:68px}.header{padding:12px 16px}.header-actions{gap:6px}.footer{gap:6px;padding-inline:16px}.settings-panel{width:min(310px,100%)}}@media (width<=520px){.header{padding-inline:12px}.brand{font-size:20px}.brand-mark{width:28px;height:28px;margin-right:6px}.header-actions .labelled-button{flex-direction:column;gap:2px;padding-inline:8px;font-size:11px}.header-actions .material-icon{width:18px;height:18px}.footer{padding-inline:8px}.footer .labelled-button{flex:1;gap:6px;padding-inline:6px}.footer .material-icon,.footer svg{flex-shrink:0;width:20px;height:20px}#app:has(.header.has-key){--header-height:118px}.header.has-key{padding-bottom:62px;position:relative}.header.has-key .key-chip{padding-block:6px;position:absolute;bottom:6px;right:16px}}@media (width<=360px){.footer{gap:4px;padding-inline:8px}}@media (prefers-reduced-motion:reduce){.note{transition:none}.settings-panel[open]{animation:none}}main:has(.pitch-feedback){flex-direction:column;min-height:0;display:flex}main:has(.pitch-feedback) .workspace{flex:1;min-height:0}.pitch-feedback[hidden]{display:none}.pitch-feedback{background:#f8f5ef;border-top:1px solid #ddd8ce;flex:none;grid-template-columns:minmax(0,1fr) 44px;column-gap:8px;padding:10px 16px;font-size:12px;display:grid}.pitch-diagnostics-toggle{box-shadow:none;color:var(--muted);background:0 0;border:0;grid-area:1/2/3;align-self:start}.pitch-diagnostics-toggle:hover,.pitch-diagnostics-toggle[aria-expanded=true]{color:#354d40;background:0 0}.pitch-heading,.pitch-controls,.pitch-summary{align-items:center;gap:8px;display:flex}.pitch-heading,.pitch-summary{flex-wrap:wrap;justify-content:space-between}.pitch-controls{flex-shrink:0}.pitch-mic{color:#24312c;background:0 0;border:0;min-width:44px;min-height:44px}.pitch-mic[aria-pressed=true]{color:#c53932}.slider-switch{cursor:pointer;align-items:center;gap:8px;min-height:44px;display:flex;position:relative}.slider-switch input{z-index:1;opacity:0;width:36px;height:22px;margin:0;position:absolute}.switch-track{background:#c5c8c0;border-radius:11px;flex-shrink:0;width:36px;height:22px;transition:background .15s}.switch-track:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;margin:3px;transition:transform .15s;display:block}.slider-switch input:checked+.switch-track{background:var(--switch-color,var(--green))}.slider-switch input:checked+.switch-track:after{transform:translate(14px)}.slider-switch input:focus-visible+.switch-track{outline:3px solid var(--green);outline-offset:3px}.pitch-status{margin:2px 0}.pitch-reading,.pitch-debug{font-variant-numeric:tabular-nums}.pitch-reading{color:var(--muted)}.pitch-diagnostics{z-index:8;color:#fffdf8;background:#24312cd1;border-radius:8px;max-width:calc(100% - 16px);max-height:55%;padding:10px 12px;position:absolute;top:8px;right:8px;overflow:auto}.pitch-diagnostics[hidden]{display:none}.pitch-debug{margin:0;font-size:11px;line-height:1.6}@media (height<=600px){.pitch-feedback{max-height:100px;overflow-y:auto}}@container bottom-tools (width<=480px){.tool-label{display:none}}.board-pitch-feedback{right:calc(50% + var(--anchor-size,44px) / 2 + 12px);z-index:4;width:36px;color:var(--pitch-color,#a15e24);pointer-events:none;font-variant-numeric:tabular-nums;flex-direction:column;align-items:center;padding:0;font-size:13px;font-weight:650;line-height:1.1;display:flex;position:absolute;top:50%;transform:translateY(-22px)}.board-pitch-feedback[hidden]{display:none}.board-pitch-feedback[data-direction=tune]{color:var(--green)}.board-pitch-feedback[data-direction=neutral]{color:var(--muted)}.board-pitch-symbol{flex-shrink:0;justify-content:center;align-items:center;width:100%;height:44px;display:flex}.board-pitch-dot{background:currentColor;border-radius:50%;width:12px;height:12px;margin:0;display:none}.board-pitch-feedback[data-direction=tune] .board-pitch-arrow,.board-pitch-feedback[data-direction=neutral] .board-pitch-arrow{display:none}.board-pitch-feedback[data-direction=tune] .board-pitch-dot,.board-pitch-feedback[data-direction=neutral] .board-pitch-dot{display:block}.board-pitch-unit{margin-top:2px;font-size:10px;font-weight:400}.board-pitch-trace{z-index:-1;position:absolute;top:-11px;right:calc(100% - 38px);overflow:hidden}@media (prefers-reduced-motion:reduce){.switch-track,.switch-track:after{transition:none}}.settings-switch{font-size:11px;line-height:1.6}#board-settings .panel-actions{padding:0}#board-settings .slider-switch{gap:8px}#board-settings .panel-actions button{grid-template-columns:36px 1fr;gap:8px;padding:10px 0;font-size:11px;display:grid}#board-settings .panel-actions .material-icon{justify-self:center}