*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100vh}button{font-family:inherit}:root{--bg: #FDF6E3;--fg: #2C2C2C;--header-bg: #FFFFFF;--header-fg: #2C2C2C;--toolbar-bg: #EDE8D5;--toolbar-border: #D5D0C0;--accent: #B58900;--card-bg: #FDF6E3;--btn-bg: #FDF6E3;--btn-hover: #EEE8D5;--dialog-bg: #FDF6E3;--input-bg: #fff;--muted: #888}[data-theme=dark]{--bg: #1a1a2e;--fg: #e0e0e0;--header-bg: #0f0f1e;--header-fg: #e0e0e0;--toolbar-bg: #22223a;--toolbar-border: #3a3a5c;--accent: #d4a017;--card-bg: #22223a;--btn-bg: #2a2a44;--btn-hover: #3a3a5c;--dialog-bg: #22223a;--input-bg: #2a2a44;--muted: #999}.app{display:flex;flex-direction:column;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--fg);background:var(--bg)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--header-bg);color:var(--header-fg);box-shadow:0 1px 4px #00000014;border-bottom:1px solid rgba(0,0,0,.08);z-index:10}.header-left{display:flex;align-items:center;gap:12px}.header-right{display:flex;gap:8px}.app-logo{height:40px;margin:0}.app-logo.clickable{cursor:pointer}.sheet-title{font-size:18px;font-weight:600;margin:0;cursor:pointer;padding:4px 8px;border-radius:4px}.sheet-title:hover{background:#0000000d}.unsaved-dot{color:var(--accent)}.title-input{font-size:18px;font-weight:600;background:#0000000d;border:1px solid rgba(0,0,0,.15);color:var(--header-fg);padding:4px 8px;border-radius:4px;outline:none;width:250px}.header-btn{padding:6px 14px;background:var(--accent);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500}.header-btn:hover{background:#9a7500}.header-btn.primary{background:var(--accent)}.app-body{display:flex;flex:1;overflow:hidden}.list-body{flex:1;overflow:auto;padding:24px;position:relative}.list-watermark{display:block;width:60%;max-height:70vh;margin:0 auto;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.list-watermark--faded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:60vw;opacity:.12}.sidebar{width:190px;background:var(--toolbar-bg);border-right:1px solid var(--toolbar-border);overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:14px;flex-shrink:0}.toolbar-section{display:flex;flex-direction:column;gap:5px}.toolbar-title{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#888;margin:0;font-weight:700}.toolbar-grid{display:flex;flex-wrap:wrap;gap:3px}.toolbar-btn{padding:4px 7px;font-size:11px;border:1px solid var(--toolbar-border);background:var(--btn-bg);color:var(--fg);border-radius:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:38px;transition:all .1s}.toolbar-btn:hover{background:var(--btn-hover);border-color:var(--accent)}.toolbar-btn.active{background:var(--accent);color:var(--header-fg);border-color:var(--accent)}.voice-btn{flex-direction:row;gap:4px;justify-content:flex-start;min-width:100%;padding:5px 8px}.btn-icon{font-family:monospace;font-size:10px;opacity:.7}.toolbar-btn.active .btn-icon{opacity:.9}.btn-label{font-size:11px}.measure-count{font-size:11px;color:#888;padding:4px 0}.help-btn{width:100%;justify-content:center}.playback-controls{display:flex;flex-direction:column;gap:6px}.playback-buttons{display:flex;gap:6px}.playback-btn{width:34px;height:34px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.playback-btn.play{background:#859900;color:#fdf6e3}.playback-btn.play:hover{background:#6d8000}.playback-btn.pause{background:#cb4b16;color:#fdf6e3}.playback-btn.pause:hover{background:#b04213}.playback-btn.stop{background:#dc322f;color:#fdf6e3}.playback-btn.stop:hover{background:#c02a28}.playback-options{display:flex;flex-direction:column;gap:2px}.playback-option{display:flex;align-items:center;gap:5px;font-size:11px;color:#555;cursor:pointer}.playback-option input{margin:0}.tempo-slider{width:100%}.tempo-label{font-size:11px;color:#666}.slider{width:100%;margin-top:3px}.zoom-controls{display:flex;align-items:center;gap:6px}.zoom-btn{width:28px;height:28px;border:1px solid var(--toolbar-border);background:var(--btn-bg);color:var(--fg);border-radius:4px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}.zoom-btn:hover{background:var(--btn-hover)}.zoom-btn:disabled{opacity:.4;cursor:default}.zoom-value{font-size:12px;color:#666;min-width:40px;text-align:center}.editor-area{flex:1;display:flex;overflow:hidden}.editor-canvas{flex:1;overflow:auto;background:var(--bg);padding:16px}.note-group:hover{filter:brightness(.5)}.sheet-list-page{max-width:800px;margin:0 auto}.empty-state{text-align:center;padding:60px 20px;color:#888}.empty-state h2{color:#555}.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;position:relative;z-index:1}.sheet-card{background:var(--card-bg);border:1px solid var(--toolbar-border);border-radius:8px;padding:14px;cursor:pointer;position:relative;transition:all .15s}.sheet-card:hover{border-color:var(--accent);box-shadow:0 2px 8px #b5890026}.sheet-card-title{font-size:15px;font-weight:600;margin-bottom:4px}.sheet-card-artist{font-size:12px;color:#888;margin-bottom:6px}.sheet-card-meta{display:flex;gap:10px;font-size:11px;color:#999}.sheet-card-date{font-size:10px;color:#aaa;margin-top:8px}.sheet-card-delete{position:absolute;top:8px;right:8px;background:none;border:none;font-size:18px;color:#ccc;cursor:pointer;padding:2px 6px;border-radius:4px}.sheet-card-delete:hover{color:#dc322f;background:#dc322f1a}.dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:200}.dialog{background:var(--dialog-bg);border-radius:12px;padding:24px;min-width:340px;max-width:480px;box-shadow:0 8px 30px #00000040}.dialog h2{margin:0 0 16px;font-size:20px;color:var(--fg)}.dialog-field{margin-bottom:14px}.dialog-field>label{display:block;font-size:12px;font-weight:600;color:#666;margin-bottom:4px}.dialog-field input[type=text],.dialog-field input[type=number],.dialog-field select{width:100%;padding:8px 10px;border:1px solid var(--toolbar-border);border-radius:6px;font-size:14px;box-sizing:border-box;background:var(--input-bg);color:var(--fg)}.ts-inputs{display:flex;align-items:center;gap:8px}.radio-group{display:flex;flex-direction:column;gap:4px}.radio-label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}.radio-label input{margin:0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.btn-primary{padding:8px 20px;background:var(--accent);color:var(--header-fg);border:none;border-radius:6px;cursor:pointer;font-weight:500}.btn-primary:hover{background:#9a7400}.btn-primary:disabled{opacity:.5;cursor:default}.btn-secondary{padding:8px 20px;background:var(--toolbar-bg);border:1px solid var(--toolbar-border);color:var(--fg);border-radius:6px;cursor:pointer}.btn-secondary:hover{background:var(--btn-hover)}.keyboard-help{min-width:380px}.shortcuts-table{width:100%;border-collapse:collapse}.shortcuts-table td{padding:5px 10px;font-size:13px;border-bottom:1px solid var(--toolbar-bg)}.shortcut-key kbd{background:var(--toolbar-bg);border:1px solid var(--toolbar-border);border-radius:3px;padding:2px 6px;font-family:monospace;font-size:12px}.shortcut-action{color:#555}.theme-btn{width:100%;justify-content:center}.legal-page{max-width:700px;margin:0 auto;padding:32px 24px;line-height:1.6}.legal-page h1{font-size:24px;margin:0 0 4px}.legal-page h2{font-size:17px;margin:28px 0 8px}.legal-page p{margin:0 0 12px;font-size:14px;color:var(--fg)}.legal-page a{color:var(--accent);text-decoration:underline}.legal-page .legal-updated{font-size:12px;color:var(--muted);margin-bottom:24px}.legal-back{background:none;border:none;color:var(--accent);cursor:pointer;font-size:14px;padding:0;margin-bottom:16px}.legal-back:hover{text-decoration:underline}.legal-links{display:flex;gap:16px;justify-content:center;margin-top:32px;padding-top:16px;border-top:1px solid var(--toolbar-border)}.legal-links button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px}.legal-links button:hover{color:var(--accent);text-decoration:underline}@media (max-width: 900px){.app-body{flex-direction:column}.sidebar{width:100%;flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px 10px;overflow-x:auto;overflow-y:hidden;border-right:none;border-bottom:1px solid var(--toolbar-border)}.toolbar-section{flex-direction:row;flex-wrap:wrap;gap:4px;align-items:center}.toolbar-title{margin-right:6px}.voice-btn{min-width:auto}.toolbar-btn{padding:8px 12px;font-size:13px;min-height:40px}.playback-btn{width:44px;height:44px}.zoom-btn{width:36px;height:36px}}@media (max-width: 600px){.app-header{padding:6px 10px}.header-btn{padding:8px 10px;font-size:12px}.sheet-title{font-size:15px}.toolbar-btn{padding:10px 14px;font-size:14px;min-height:44px}.playback-btn{width:48px;height:48px}}@media (max-width: 480px){.legal-page{padding:16px 12px}}@media (pointer: coarse){.toolbar-btn{min-height:44px;min-width:44px}.header-btn{min-height:44px}.playback-btn{width:48px;height:48px}.zoom-btn{width:40px;height:40px}.note-group{cursor:pointer}}