:root{color:#3f4d43;font-synthesis:none;--ink:#3f4d43;--rust:#ac5e3f;--paper:#fff9e9;--line:#d2c6ac;background:#f2eddf;font-family:Yu Gothic,Hiragino Kaku Gothic ProN,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{touch-action:manipulation;min-height:44px;color:var(--ink);cursor:pointer;background:#fbf6e9;border:1px solid #c7b99b;border-radius:6px;padding:9px 15px;transition:background .15s}button:hover:enabled{background:#eee1c7}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible{outline-offset:3px;outline:3px solid #638a70}[hidden]{display:none!important}.app{width:min(1100px,100%);margin:auto;padding:28px 36px 20px}.masthead{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;display:flex}.eyebrow{letter-spacing:.18em;color:#927e60;margin:0 0 9px;font-size:9px}h1,h2{font-family:Yu Mincho,Hiragino Mincho ProN,Georgia,serif;font-weight:500}h1{letter-spacing:.08em;white-space:nowrap;margin:0;font-size:34px}h1 span{color:#a15c3e}.masthead nav{gap:7px;margin-left:auto;display:flex}.quiet{background:0 0;font-size:11px}.lead{color:#8c785c;letter-spacing:.05em;margin:16px 0 20px;font-family:Yu Mincho,serif;font-size:14px}.controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.transport{flex-wrap:wrap;gap:7px;display:flex}.primary{color:#fff7e6;background:#985c3d;border-color:#985c3d}.primary:hover:enabled{background:#824b32}#play{min-width:158px;font-size:14px}.transport>button:not(.primary){font-size:12px}.preferences{align-items:center;gap:20px;font-size:11px;display:flex}.tempo-label{align-items:center;gap:8px;display:flex}.tempo-label input{accent-color:#966844;width:108px;min-height:44px}.tempo-label output{font-variant-numeric:tabular-nums;width:23px;font:12px Georgia,serif}.accompaniment-label{cursor:pointer;align-items:center;gap:6px;min-height:44px;display:flex}.accompaniment-label input{accent-color:#5d7a60;width:16px;height:16px}.music-box{background:var(--paper);isolation:isolate;border:11px solid #b58c61;border-radius:13px;position:relative;box-shadow:0 4px #9e7953,0 8px 24px #5c4d3412}.music-box:before{pointer-events:none;content:"";border:2px solid #ddbb8a;border-radius:12px;position:absolute;inset:-10px}.paper-heading{border-bottom:1px solid #e8ddc6;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px 14px;display:flex}.paper-heading>span{letter-spacing:.05em;font-family:Yu Mincho,serif;font-size:17px}.paper-heading small{color:#9c8869;font-size:10px}.score{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;display:grid}.measure{outline-offset:-5px;touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;min-width:0;height:198px;position:relative;overflow:hidden}.measure:nth-child(2n){border-left:1px solid #e9dfca}.measure:nth-child(n+3){border-top:1px solid #e9dfca}.measure:focus-visible{outline:2px solid #638a70}.measure-label{color:#a18d70;pointer-events:none;z-index:2;font:italic 12px Georgia,serif;position:absolute;top:10px;left:18px}.measure canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.leaf-layer{pointer-events:none;position:absolute;inset:0}.leaf{pointer-events:auto;touch-action:none;cursor:grab;z-index:3;background:0 0;border:0;border-radius:50%;width:40px;height:36px;min-height:0;padding:0;transition:none;position:absolute;transform:translate(-50%,-50%)}.leaf:hover:enabled{background:#bca26d16}.leaf svg{filter:drop-shadow(0 2px 1px #4a382d20);pointer-events:none;width:32px;height:27px;overflow:visible}.leaf[data-selected=true]{outline-offset:0;background:#dfebd050;outline:1.5px dashed #6b8561}.leaf[data-playing=true] svg{filter:drop-shadow(0 0 5px #ecc35a);transform:scale(1.15)}.leaf[data-origin=true]{opacity:.25}.leaf:focus-visible{outline-offset:1px;outline:2px solid #648765}.leaf.ghost{opacity:.72;pointer-events:none;z-index:6}.playhead{pointer-events:none;z-index:1;opacity:0;background:#af8052;width:2px;position:absolute;top:32px;bottom:23px;box-shadow:0 0 7px #dcb97e66}.measure[data-playing=true] .playhead{opacity:.7}.measure[data-playing=true]{background:#f4e6b526}.keyboard-cursor{pointer-events:none;z-index:2;border:1px dashed #8a9b77;border-radius:50%;width:35px;height:28px;position:absolute;transform:translate(-50%,-50%)}.paper-footer{color:#89755a;border-top:1px solid #e8ddc6;justify-content:space-between;align-items:center;gap:10px;min-height:46px;padding:13px 20px;font-size:11px;display:flex}.palette{gap:9px;display:flex}.palette i{background:#b86743;border-radius:90% 0;width:15px;height:9px;transform:rotate(-30deg)}.palette i:nth-child(2){background:#c0a35a}.palette i:nth-child(3){background:#7b9266}.screw{pointer-events:none;background:#92704d;border-radius:50%;width:6px;height:6px;position:absolute;bottom:-9px;box-shadow:inset 1px 1px 1px #d7b785}.screw:before{content:"";background:#65543a;height:1px;position:absolute;top:3px;left:1px;right:1px;transform:rotate(-35deg)}.screw-a{left:2px}.screw-b{right:2px}.editing{justify-content:space-between;align-items:flex-start;gap:10px;margin:16px 0 10px;display:flex}.editing p{max-width:50%;margin:6px 0;font-size:11px;line-height:1.8}.editing>div{flex-wrap:wrap;gap:5px;display:flex}.editing .quiet{padding:8px 10px;font-size:10px}.theory{color:#8c795d;border-top:1px solid #d8cdb6;padding:12px 0;font-size:11px}.theory summary{cursor:pointer;min-height:28px;padding-top:4px}.theory p{max-width:740px;line-height:1.9}#harmony{letter-spacing:.12em;font:italic 16px Georgia,serif}.colophon{color:#a18c70;letter-spacing:.08em;justify-content:space-between;gap:12px;margin-top:15px;font-size:9px;display:flex}dialog{color:var(--ink);background:#fff9e9;border:1px solid #c5b18a;border-radius:10px;width:min(530px,100% - 24px);max-height:calc(100% - 32px);padding:0}dialog::backdrop{background:#35403570}.help-content{padding:28px}.help-content h2{margin:5px 0 15px;font-size:25px}.help-content ol{padding-left:19px;font-size:13px;line-height:1.9}.help-content li{margin:13px 0}.help-content>p:not(.eyebrow){font-size:12px;line-height:1.9}.keyboard-help{color:#88785d}.help-content .primary{width:100%;margin-top:10px}@media (max-width:740px){.app{padding:18px 14px}.masthead{gap:10px}h1{font-size:26px}.eyebrow{letter-spacing:.1em;font-size:8px}.masthead .quiet{padding:7px 10px;font-size:10px}.lead{margin:13px 0 16px;font-size:12px}.controls{gap:8px}.preferences{justify-content:space-between;gap:10px;width:100%}.transport{gap:6px}#play{min-width:140px}.transport>button:not(.primary){padding:8px 10px;font-size:11px}.music-box{border-width:8px}.music-box:before{inset:-7px}.paper-heading{padding:15px 14px 11px;display:block}.paper-heading>span{font-size:15px}.paper-heading small{margin-top:6px;font-size:9px;display:block}.score{grid-template-columns:1fr}.measure{height:198px}.measure:nth-child(2n){border-left:0}.measure:nth-child(n+2){border-top:1px solid #e9dfca}.leaf{width:34px;height:36px}.leaf svg{width:29px;height:25px}.paper-footer{padding:12px;font-size:10px}.editing{display:block}.editing p{max-width:none;min-height:24px}.editing>div{justify-content:flex-end}.colophon{letter-spacing:0;flex-wrap:wrap;font-size:8px}.help-content{padding:22px}}@media (max-width:360px){h1{font-size:24px}.masthead nav{margin-left:auto}.transport{width:100%}.transport #play{min-width:132px}.transport>button:not(.primary){padding:8px}.tempo-label input{width:90px}.preferences{font-size:10px}.editing .quiet{padding:8px}.paper-heading small{font-size:8px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.leaf[data-playing=true] svg{transform:none}.playhead{box-shadow:none}}