.chords-field{display:grid;gap:6px;margin-top:4px;color:var(--muted);font-size:13px;font-weight:500}.chords-field input{height:52px;padding:0 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--card-2, var(--card));color:var(--ink);font:600 22px var(--display, var(--font));letter-spacing:.02em}.chords-field input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.chord-bars{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px;min-height:34px}.chord-bar{display:inline-flex;align-items:baseline;gap:8px;padding:6px 14px;border-radius:10px;background:var(--accent-tint);color:var(--ink);font-weight:600;font-size:15px}.chord-bar small{color:var(--muted);font-size:11px;font-weight:500}.presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}.presets .hint{margin:0 4px 0 0}.sound-line{margin:6px 0 0;color:var(--text);font-size:14px}.sound-line b{color:var(--accent-ink);font-weight:600}.roll-wrap{overflow-x:auto;border-radius:12px;background:var(--well, var(--fill));box-shadow:inset 0 0 0 1px var(--line)}.roll{position:relative;min-width:560px;padding:8px 0}.roll-row{display:grid;grid-template-columns:60px 1fr;height:11px}.roll-key{padding-right:8px;color:var(--muted);font-size:10px;line-height:11px;text-align:right}.roll-lane{position:relative;background-image:repeating-linear-gradient(to right,var(--line-2) 0 1px,transparent 1px calc(100% * var(--spb) / var(--total)))}.roll-row.black .roll-lane{background-color:#00000014}.roll-lane i{position:absolute;top:1px;bottom:1px;border-radius:3px;background:var(--accent);opacity:calc(.45 + var(--v) * .55);box-shadow:inset 0 0 0 1px #ffffff26}.roll-now{position:absolute;top:0;bottom:0;left:calc(60px + (100% - 60px) * var(--x, 0));width:2px;background:var(--ink);pointer-events:none}.roll-now[hidden]{display:none}.keys-sub{margin:28px 0 14px;font-size:18px;flex-wrap:wrap;gap:10px}.keys-sub .hint{font-size:13px;font-weight:400;letter-spacing:0}.controls+.keys-sub{margin-top:24px}.take-status,.key-hint{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;padding:10px 14px;border-radius:12px;background:var(--accent-tint);color:var(--ink);font-size:14px;font-weight:500}.take-status[hidden],.key-hint[hidden]{display:none}.key-hint{margin-top:8px;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}#key-use[hidden]{display:none}.key-hint b{color:var(--accent-ink);font-weight:600}.roll-row.roll-chords{height:34px;margin-bottom:6px;align-items:center}.roll-chords .roll-key{line-height:1.2}.roll-chords .roll-lane{height:100%;background-image:none}.roll-chord{position:absolute;top:2px;bottom:2px;padding:0 8px;overflow:hidden;border:0;border-left:1px solid var(--line-2);background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}.roll-chord:hover{background:var(--accent-tint)}.roll-chord:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.roll-chord.editing{background:var(--accent);color:var(--on-accent)}.chord-edit{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:10px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2)}.chord-edit[hidden]{display:none}.chord-edit__field{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.chord-edit__field input{width:9em;min-height:40px;padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--fill);color:var(--ink);font:inherit;font-size:16px}.chord-edit__field input[aria-invalid=true]{border-color:var(--error-ink)}.chord-edit__keys{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex-basis:100%}.chord-edit__keys .btn.active{box-shadow:inset 0 0 0 2px var(--accent)}.chord-edit .hint{margin:0}#chord-edit-msg{flex-basis:100%}.roll-row.roll-take{height:48px;margin-bottom:6px;align-items:center}.roll-take .roll-key{line-height:1.2}.roll .wave{--col: calc(100% / var(--n));grid-column:auto;height:44px}.harm-box{margin-top:24px}.harm-list{display:grid;gap:10px}.harm-list:empty{display:none}.harm-card{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:start;padding:12px 14px;border-radius:12px;background:var(--fill)}.harm-card h4{margin:0;font-size:15px}.harm-card .chord-bars{grid-column:1;margin:0}.harm-card p{grid-column:1;margin:0;color:var(--muted);font-size:14px;line-height:1.5;max-width:70ch}.harm-card .btn{grid-column:2;grid-row:1 / span 3;align-self:center}@media (max-width: 600px){.harm-card{grid-template-columns:1fr}.harm-card .btn{grid-column:1;grid-row:auto;justify-self:start}}