:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#2d3833;background:#f8f5ef;font-synthesis:none;--header-height: 78px;--footer-height: 56px;--green: #287665;--muted: #737a70}*{box-sizing:border-box}body{margin:0}#app{height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--header-height) minmax(0,1fr) var(--footer-height)}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input: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{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}h2{font-size:15px;margin:0;font-weight:650}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:750;color:var(--green)}.micro{font-size:10px;line-height:1.8;color:#85897e}.segmented{display:flex;background:#efeee7;padding:4px;border-radius:9px;gap:4px}.segmented button{flex:1;border:0;background:none;border-radius:6px;padding:9px 5px;font-size:12px;color:var(--muted)}.segmented button[aria-pressed=true]{background:#fffdf8;box-shadow:0 1px 4px #0000000d;color:var(--green);font-weight:650}.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #dce2d5;background:#fffdf8;border-radius:10px;color:#354d40;font-size:28px}.icon-button:hover{background:#eef2e7}.icon-button[aria-expanded=true],.icon-button[aria-pressed=true]{background:#e0eadd;border-color:var(--green)}.header{padding:16px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e3d9}.brand{display:flex;align-items:center;font-size:25px;font-weight:780;letter-spacing:-1px;text-decoration:none;color:#2d3833}.brand-end{color:var(--green)}.brand-mark{border-radius:9px;width:39px;height:39px;display:block;flex-shrink:0;margin-right:10px}.about-emblem{display:block;width:min(240px,100%);height:auto;margin:12px auto 24px;border-radius:28px}.header-actions{display:flex;gap:10px}main,.workspace,.board-card,.board-scroll-wrap{min-width:0;min-height:0;height:100%}.footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:6px 24px;border-top:1px solid #e5e3d9}.panel-copy{padding:12px 24px 24px;font-size:13px;line-height:1.8;color:var(--muted)}.panel-copy a{color:var(--green)}.material-icon{display:block;width:24px;height:24px;background:currentColor;-webkit-mask:var(--icon) center / contain no-repeat;mask:var(--icon) center / contain no-repeat}.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{height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cbcbb9 transparent;background:linear-gradient(90deg,#f6f4ed,#fbfaf5 15% 85%,#f6f4ed)}.fingerboard{position:relative;width:100%;height:var(--board-height);min-width:520px;max-width:900px;margin-inline:auto}.notes{position:absolute;inset:0 120px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),#d9d4c4 calc(12.5% - 1px),#d9d4c4 calc(12.5% + 1px),transparent calc(12.5% + 1px),transparent 25%)}.notes:before{content:"";position:absolute;top:var(--nut-y);left:12.5%;right:12.5%;height:5px;border-radius:4px;background:#b7aa8b;box-shadow:0 2px #e9e4d4}.note-row{position:absolute;display:grid;grid-template-columns:repeat(4,1fr);width:100%;height:var(--row-height);align-items:center}.note-cell{position:relative;display:flex;justify-content:center}.note{width:var(--note-diameter);height:var(--note-diameter);border-radius:50%;border:1px solid hsl(var(--note-hue) 65% 48%);font-size:12px;font-weight:550;color:#24312c;background:hsl(var(--note-hue) 72% 76%);box-shadow:0 2px 3px #343d2005;transition:transform .15s,box-shadow .15s}.note:hover{transform:scale(1.08);box-shadow:0 3px 8px #343d2018}.note.selected{outline:3px solid #243d32;outline-offset:3px;box-shadow:0 0 0 6px #fffdf8;font-weight:750}.open-row .note{font-size:17px;font-family:Georgia,serif}.string-numeral{position:absolute;bottom:calc(100% + 12px);left:calc(50% + 10px);font-family:Georgia,serif;font-size:15px;line-height:1.2;color:#737768;pointer-events:none}.notes.has-selection .note:not(.selected){opacity:.22}.notes.has-selection .note:not(.selected):hover,.notes.has-selection .note:not(.selected):focus-visible{opacity:.75}.overlays{position:absolute;inset:0;width:100%;height:var(--board-height);pointer-events:none}.overlays text{font:11px ui-sans-serif,system-ui;font-weight:600;letter-spacing:.5px}.overlays .finger-number{font-size:10px;font-weight:750;letter-spacing:0}.overlays .position-label{font-size:10px;letter-spacing:0}.overlays .extension-text{font-size:8px;letter-spacing:0}.board-bottom{position:absolute;bottom:5px;width:100%;text-align:center;font-size:8px;letter-spacing:1.5px;color:#929585}#notation-display{position:absolute;z-index:2;left:4px;top:4px;display:block;width:120px;height:130px;color:#26382b;background:#f8f6ef;border:1px solid #dce2d5;border-radius:8px;overflow:hidden;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}#notation-display.dragging{cursor:grabbing}#notation-display.expanded{height:220px}#compact-staff{position:absolute;bottom:0;display:block;width:100%;height:218px;pointer-events:none}.notation-size-toggle{position:absolute;top:2px;right:2px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;background:#f8f6ef;color:var(--muted);touch-action:manipulation}.notation-size-toggle:hover{background:#e0eadd}.settings-panel{position:fixed;inset:var(--header-height) 0 var(--footer-height) auto;margin:0;width:min(360px,100%);height:calc(100dvh - var(--header-height) - var(--footer-height));max-height:calc(100dvh - var(--header-height) - var(--footer-height));max-width:100%;z-index:10;border:0;border-left:1px solid #e3e0d5;padding:0;background:#fffdf8;overflow-y:auto;box-shadow:-10px 0 40px #26382b20}.settings-panel[open]{animation:slide-in .2s ease-out}.settings-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e6e3d8}.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{display:flex;align-items:center;gap:10px}.step{font-size:10px;color:#7a8576;font-weight:650;border:1px solid #dce2d5;border-radius:50%;height:25px;width:25px;display:grid;place-items:center}.hint{font-size:11px;line-height:1.6;color:var(--muted);margin:13px 0}.position-choice{display:flex;align-items:center;gap:9px;padding:9px 0;font-size:12px;cursor:pointer}.position-choice input{accent-color:var(--position);width:16px;height:16px;margin:0}.position-dot{height:7px;width:7px;border-radius:50%;background:var(--position)}.position-side{margin-left:auto;color:#92958c;font-size:10px}.variant-controls{border:0;padding:0;margin:18px 0 0}.variant-controls legend{font-size:10px;color:var(--muted);margin-bottom:8px}.variant-controls label{display:flex;align-items:center;gap:8px;font-size:12px;padding:7px 0;cursor:pointer}.variant-controls input{accent-color:var(--green);width:16px;height:16px;margin:0}.extension{display:flex;gap:9px;margin-top:18px;align-items:flex-start;font-size:11px;line-height:1.6;cursor:pointer}.extension input{accent-color:var(--green);width:16px;height:16px;flex-shrink:0;margin:2px 0}.extension small{display:block;color:#92958c;font-size:10px}.volume-label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:18px 0 10px}input[type=range]{width:100%;accent-color:var(--green);height:20px;margin:0}.note-widget{padding:20px;background:#fffdf8}.widget-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.widget-heading h2{font-size:13px}.clear-note{border:0;background:none;color:#647660;font-size:10px;padding:10px 0}.widget-body{display:flex;flex-direction:column}#staff{display:block;width:100%;height:300px;border:1px solid #dce2d5;border-radius:4px;cursor:crosshair;touch-action:manipulation;color:#26382b}#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{font-size:10px;color:#76816c;line-height:1.6}#audio-status{display:block;margin-top:8px;font-size:10px;color:#697c62;line-height:1.5}#staff-help{font-size:10px;color:var(--muted);line-height:1.7;margin:12px 0 0}.accidentals button{font-size:21px;padding:4px}.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(max-width:700px){:root{--header-height: 68px}.header{padding:12px 16px}.header-actions{gap:6px}.footer{padding-inline:16px;gap:6px}.settings-panel{width:min(310px,100%)}}@media(prefers-reduced-motion:reduce){.note{transition:none}.settings-panel[open]{animation:none}}