@font-face{font-family:Playfair Display;font-style:normal;font-weight:600 800;font-display:swap;src:url(/vendor/fonts/playfair-display.woff2) format("woff2")}@font-face{font-family:Spectral;font-style:normal;font-weight:400;font-display:swap;src:url(/vendor/fonts/spectral-400.woff2) format("woff2")}@font-face{font-family:Spectral;font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/spectral-500.woff2) format("woff2")}@font-face{font-family:Spectral;font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts/spectral-600.woff2) format("woff2")}@font-face{font-family:Spectral;font-style:normal;font-weight:700;font-display:swap;src:url(/vendor/fonts/spectral-700.woff2) format("woff2")}@font-face{font-family:Spectral;font-style:italic;font-weight:400;font-display:swap;src:url(/vendor/fonts/spectral-italic-400.woff2) format("woff2")}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--paper: #f3eee1;--paper2: #ece4d2;--card: #fbf8f0;--card-border: #e6dac2;--ink: #2c2722;--ink-soft: #4a443b;--muted: #8d8475;--navy: #1a2456;--navy-dark: #121844;--navy-soft: #e8edf8;--gold: #b8962e;--gold-dark: #9a7824;--sage: #9fc0a6;--sage-deep: #8bb293;--sage-ink: #2f5d3f;--done-bg: #cbe5d2;--done-text: #3a7350;--danger: #c2564d;--warning: #bd8636;--success: #3a7350;--radius: 14px;--shadow: 0 2px 12px rgba(95, 75, 40, .09);--shadow-lift: 0 6px 22px rgba(95, 75, 40, .14);--serif: "Spectral", Georgia, "Times New Roman", serif;--display: "Playfair Display", Georgia, serif}body{font-family:var(--serif);background:var(--paper);color:var(--ink-soft);min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font-family:var(--serif);cursor:pointer;border:none;outline:none}button:disabled{cursor:not-allowed}input{font-family:var(--serif)}h1,h2,h3{font-family:var(--display);color:var(--ink)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}.music-paper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:linear-gradient(170deg,var(--paper) 0%,var(--paper2) 100%);overflow:hidden}.score-layout{display:flex;min-height:100vh}.score-sidebar{width:224px;flex-shrink:0;background:var(--card);border-right:1px solid var(--card-border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden auto}.score-main{flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0}.score-header{display:flex;align-items:center;padding:0 24px;height:62px;background:var(--card);border-bottom:1px solid var(--card-border);position:sticky;top:0;z-index:10;flex-shrink:0}.sb-label{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:8px 14px 4px;-webkit-user-select:none;user-select:none}.sb-divider{height:1px;background:var(--card-border);margin:8px 14px;flex-shrink:0}.play-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 14px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:background .12s,transform .08s,box-shadow .12s;font-family:var(--serif);border:1.5px solid rgba(125,79,142,.3);background:#7d4f8e14;color:var(--navy)}.play-btn:active{transform:scale(.95)}.play-btn.playing{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 4px 14px #7d4f8e59}.sb-icon-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:var(--paper);border:1.5px solid var(--card-border);border-radius:10px;cursor:pointer;color:var(--ink-soft);transition:background .1s,border-color .1s,color .1s,transform .08s;font-family:var(--serif);font-size:14px;font-weight:700;flex-shrink:0}.sb-icon-btn:hover:not(:disabled){background:var(--navy-soft);border-color:#7d4f8e73;color:var(--navy)}.sb-icon-btn:active:not(:disabled){transform:scale(.88)}.sb-icon-btn:disabled{opacity:.3;cursor:not-allowed}.sb-btn{display:flex;align-items:center;width:100%;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:background .1s,transform .08s;text-align:left;font-family:var(--serif);background:transparent;border:1px solid transparent}.sb-btn:hover:not(:disabled){background:#7d4f8e0f}.sb-btn:active:not(:disabled){transform:scale(.97)}.sb-btn:disabled{opacity:.3;cursor:not-allowed}.sb-half-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 6px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--serif);transition:background .1s,transform .08s;background:var(--paper);border:1px solid var(--card-border);color:var(--ink-soft)}.sb-half-btn:hover:not(:disabled){background:var(--navy-soft);color:var(--navy);border-color:#7d4f8e59}.sb-half-btn:active:not(:disabled){transform:scale(.94)}.sb-half-btn:disabled{opacity:.3;cursor:not-allowed;background:transparent;border-color:transparent}.action-btn-danger{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:#c2564d12;border:1px solid rgba(194,86,77,.22);border-radius:10px;padding:8px;font-size:13px;font-weight:600;color:var(--danger);cursor:pointer;font-family:var(--serif);transition:background .1s,transform .08s}.action-btn-danger:hover:not(:disabled){background:#c2564d21}.action-btn-danger:active:not(:disabled){transform:scale(.95)}.action-btn-danger:disabled{opacity:.3;cursor:not-allowed}.action-btn-ghost{flex:1;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--card-border);border-radius:10px;padding:8px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--serif);transition:background .1s,transform .08s}.action-btn-ghost:hover{background:var(--paper);color:var(--ink-soft)}.action-btn-ghost:active{transform:scale(.95)}.export-btn{background:var(--paper);border:1px solid var(--card-border);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:var(--serif);transition:background .1s,color .1s,border-color .1s,transform .08s}.export-btn:hover{background:var(--navy-soft);color:var(--navy);border-color:#1a24564d}.export-btn:active{transform:scale(.93)}.score-canvas{background:#fdf9f0;border-radius:16px;padding:24px 16px;box-shadow:0 4px 28px #5f4b281c,0 1px 4px #5f4b280f;border:1px solid var(--card-border);max-width:920px;margin:0 auto}.edit-hint{margin:16px 14px;background:var(--navy-soft);border:1px dashed rgba(125,79,142,.3);border-radius:14px;padding:22px 14px;text-align:center}.more-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--paper);border:1px solid var(--card-border);border-radius:10px;padding:7px 12px;font-size:12px;font-weight:700;color:var(--navy);cursor:pointer;font-family:var(--serif);transition:background .1s,transform .08s}.more-btn:hover{background:var(--navy-soft)}.more-btn:active{transform:scale(.96)}.score-status{height:32px;min-height:32px;display:flex;align-items:center;gap:8px;padding:0 20px;background:var(--card);border-top:1px solid var(--card-border);font-size:11px;color:var(--ink-soft);flex-shrink:0;font-family:var(--serif);overflow:hidden;white-space:nowrap}.status-sep{color:var(--card-border);font-size:13px;-webkit-user-select:none;user-select:none}@media (max-width: 639px){.score-sidebar{position:fixed;bottom:0;left:0;right:0;width:100%;max-height:44vh;height:auto;border-right:none;border-top:2px solid var(--card-border);z-index:20;box-shadow:0 -4px 20px #00000017}.score-main{padding-bottom:44vh}.score-header{height:auto;min-height:56px;flex-wrap:wrap;padding:8px 12px;gap:6px}.score-status,.score-shortcuts{display:none}.sb-icon-btn{width:44px;height:44px}.sb-half-btn{min-height:44px;padding:10px 6px}.play-btn{min-height:44px}.sb-btn{min-height:44px;padding:11px 14px}.action-btn-danger,.action-btn-ghost{min-height:44px}}.zoom-cluster{display:flex;align-items:center;gap:0;background:var(--card);border:1px solid var(--card-border);border-radius:8px;overflow:hidden}.zoom-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;font-size:15px;font-weight:700;color:var(--ink-soft);cursor:pointer;line-height:1;transition:background .1s}.zoom-btn:hover{background:var(--navy-soft);color:var(--navy)}.zoom-btn:active{transform:scale(.88)}.zoom-pct{font-size:10px;font-family:monospace;color:var(--muted);width:36px;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;border-left:1px solid var(--card-border);border-right:1px solid var(--card-border);height:26px;display:flex;align-items:center;justify-content:center;transition:color .1s}.zoom-pct:hover{color:var(--navy)}.listen-btn{width:110px;height:110px;border-radius:50%;background:var(--navy);color:#fff;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:0 8px 32px #1a245652;transition:transform .15s,box-shadow .15s}.listen-btn:hover{transform:scale(1.07);box-shadow:0 12px 40px #1a24566b}.listen-btn:active{transform:scale(.96)}.listen-btn-label{font-size:12px;font-family:var(--display);font-weight:800;letter-spacing:.5px}.listen-pulse-btn{width:110px;height:110px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px #1a245659;position:relative;z-index:1;flex-shrink:0}@keyframes listen-ring-expand{0%{transform:scale(1);opacity:.65}to{transform:scale(2.1);opacity:0}}.listen-ring{position:absolute;width:110px;height:110px;border-radius:50%;border:2px solid var(--navy);animation:listen-ring-expand 1.8s ease-out infinite}.listen-identifying-btn{width:90px;height:90px;border-radius:50%;background:var(--navy-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;border:2px solid rgba(26,36,86,.25)}@keyframes spin{to{transform:rotate(360deg)}}:root{--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}body{padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right)}@media (display-mode: standalone){body{padding-top:var(--safe-top)}}
