:root{--bg: #15161d;--panel: #1f2130;--panel-2: #282a3d;--line: #3a3d54;--text: #e9eaf2;--muted: #9a9cb4;--accent: #f0a73c;--accent-2: #6c8cff;--note: #f0a73c;--chord: #4f7be0;--good: #4caf7d;--bad: #e0566b}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}button,input,select{font:inherit}.app{min-height:100vh}.topbar{display:flex;align-items:baseline;gap:14px;padding:14px 24px;border-bottom:1px solid var(--line);background:var(--panel)}.brand{font-size:1.2rem;font-weight:700;color:var(--text);text-decoration:none}.tagline{color:var(--muted);font-size:.85rem}main{padding:0}.page{max-width:1100px;margin:0 auto;padding:22px 24px 60px}h2{font-size:1.15rem;margin-bottom:12px}h3{font-size:1.05rem}.muted{color:var(--muted)}.small{font-size:.82rem}.error{background:#e0566b26;border:1px solid var(--bad);color:#ffb3bf;padding:8px 12px;border-radius:8px;margin:12px 0}button,.btn{background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:7px 14px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block;font-size:.88rem}button:hover,.btn:hover{border-color:var(--accent-2)}button:disabled{opacity:.4;cursor:default}button.primary,.primary{background:var(--accent-2);border-color:var(--accent-2);color:#fff;font-weight:600}.link-danger{background:transparent;border:none;color:var(--bad);padding:4px 6px}.link-danger:hover{text-decoration:underline;border:none}.tiny{font-size:.8rem}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:22px}.new-piece{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.new-piece label,.input-row .input-label{display:flex;flex-direction:column;font-size:.78rem;color:var(--muted);gap:4px}.new-piece input,.new-piece select{background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:7px 10px;border-radius:8px}.new-piece input[type=number]{width:90px}.import-row{margin-top:14px;display:flex;align-items:center;gap:12px}.piece-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.piece-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}.piece-card:hover{border-color:var(--accent)}.piece-card-main{text-decoration:none;color:var(--text)}.piece-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.82rem}.piece-versions{color:var(--accent);font-size:.84rem;margin-top:6px}.editor-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.back{color:var(--accent-2);text-decoration:none;font-size:.9rem}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}.toolbar .spacer{flex:1}.play-track{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}.play-track select{background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:5px 8px;border-radius:7px}.grid-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.grid-inner{position:relative}.lane-label{position:sticky;left:0;width:fit-content;z-index:5;background:var(--panel);padding:6px 10px;font-size:.8rem;color:var(--muted);font-weight:600;border-top:1px solid var(--line)}.track-label{display:flex;align-items:center;gap:8px}.track-name{background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:3px 8px;border-radius:6px;font-size:.82rem;width:150px}.badge{background:var(--accent-2);color:#fff;font-size:.68rem;padding:1px 7px;border-radius:10px;font-weight:600}.roll,.chord-row{position:relative;background:var(--bg)}.chord-row{height:48px;cursor:crosshair;border-top:1px dashed var(--line)}.grid-line{position:absolute;top:0;bottom:0;width:1px;background:#ffffff0d}.grid-line.measure{background:#ffffff29}.octave-mark{position:absolute;left:3px;font-size:.62rem;color:var(--muted);z-index:2}.note-block{position:absolute;background:var(--note);border-radius:3px;box-shadow:0 0 0 1px #0000004d}.rest-block{position:absolute;top:0;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(255,255,255,.04) 5px,rgba(255,255,255,.04) 10px)}.chord-block{position:absolute;top:7px;height:34px;background:var(--chord);border:1px solid #6f96f0;color:#fff;font-weight:600;font-size:.85rem;border-radius:6px;padding:0 8px;text-align:left;overflow:hidden;white-space:nowrap}.chord-block:hover{filter:brightness(1.12)}.chord-block.unknown{background:#6a5535;border-color:var(--accent)}.chord-input{position:absolute;top:7px;height:34px;width:90px;background:#fff;color:#15161d;border:2px solid var(--accent);border-radius:6px;padding:0 8px;z-index:6}.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--good);z-index:4;pointer-events:none}.input-panel{margin-top:22px}.input-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.input-label{font-size:.85rem;color:var(--muted);font-weight:600}.duration-picker{display:inline-flex;gap:4px;background:var(--panel-2);padding:4px;border-radius:8px}.duration-picker button{background:transparent;border:none;padding:5px 12px}.duration-picker button.active{background:var(--accent);color:#15161d;font-weight:600}.piano{position:relative;display:flex;height:120px;-webkit-user-select:none;user-select:none}.white-key{height:100%;background:#f4f4f7;border:1px solid #b9bccd;border-radius:0 0 5px 5px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;color:#6a6d80;font-size:.62rem}.white-key:hover{background:#ffe8c4}.white-key:active{background:var(--accent)}.black-key{position:absolute;top:0;width:2.8%;height:64px;background:#23242f;border:1px solid #000;border-radius:0 0 4px 4px;z-index:2}.black-key:hover{background:#4a3a1f}.black-key:active{background:var(--accent)}