:root{color:#2d3833;font-synthesis:none;--header-height:78px;--footer-height:56px;--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{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--header-height) minmax(0, 1fr) var(--footer-height);height:100dvh;display:grid}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]{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;justify-content:flex-end;align-items:center;gap:10px;padding:6px 24px;display:flex}.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-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;scrollbar-width:thin;scrollbar-color:#cbcbb9 transparent;background:linear-gradient(90deg,#f6f4ed,#fbfaf5 15% 85%,#f6f4ed);height:100%;overflow:auto}.fingerboard{width:100%;height:var(--board-height);min-width:520px;max-width:900px;margin-inline:auto;position:relative}.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}.overlays .extension-text{letter-spacing:0;font-size:8px}.board-bottom{text-align:center;letter-spacing:1.5px;color:#929585;width:100%;font-size:8px;position:absolute;bottom:5px}#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 var(--footer-height) auto;width:min(360px,100%);height:calc(100dvh - var(--header-height) - var(--footer-height));max-height:calc(100dvh - var(--header-height) - var(--footer-height));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-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}.controls{padding:24px}.controls section+section{border-top:1px solid #e8e5dc;margin-top:24px;padding-top:23px}.section-heading{align-items:center;gap:10px;display:flex}.step{color:#7a8576;border:1px solid #dce2d5;border-radius:50%;place-items:center;width:25px;height:25px;font-size:10px;font-weight:650;display:grid}.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{cursor:pointer;align-items:center;gap:9px;padding:9px 0;font-size:12px;display:flex}.position-choice input{accent-color:var(--position);width:16px;height:16px;margin:0}.position-dot{background:var(--position);border-radius:50%;width:7px;height:7px}.position-side{color:#92958c;margin-left:auto;font-size:10px}.variant-controls{border:0;margin:18px 0 0;padding:0}.variant-controls legend{color:var(--muted);margin-bottom:8px;font-size:10px}.variant-controls label{cursor:pointer;align-items:center;gap:8px;padding:7px 0;font-size:12px;display:flex}.variant-controls input{accent-color:var(--green);width:16px;height:16px;margin:0}.extension{cursor:pointer;align-items:flex-start;gap:9px;margin-top:18px;font-size:11px;line-height:1.6;display:flex}.extension input{accent-color:var(--green);flex-shrink:0;width:16px;height:16px;margin:2px 0}.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}.widget-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}.widget-heading h2{font-size:13px}.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){#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 (prefers-reduced-motion:reduce){.note{transition:none}.settings-panel[open]{animation:none}}