.chord-tool{--tool-panel-bg:#ffffffeb;--tool-control-label:#77849a;--tool-export-text:#273650;--tool-export-bg:#f8fafc;--tool-export-border:#bdc9d9;--tool-progression-bg:#f6f8fb;--tool-roll-border:#d8e1ec;--tool-roll-bg:#f8fafc;--tool-key-border:#b7c3d2;--tool-key-white:#fff;--tool-key-rule:#cbd5e1;--tool-key-text:#738096;--tool-grid-major:#8595ae42;--tool-grid-minor:#8595ae3b;--tool-grid-bg:#fbfcfe;--tool-playhead:#183d78;--tool-playhead-outline:#ffffffd9;--timeline-key-gutter:50px;--timeline-border:1px;width:100%;min-width:0}@media (prefers-color-scheme:dark){:root:not([data-theme]) .chord-tool{--tool-panel-bg:linear-gradient(180deg, #121f34f2, #0d182af2);--tool-control-label:#8391aa;--tool-export-text:#d9e1ee;--tool-export-bg:#142238;--tool-export-border:#445673;--tool-progression-bg:#0c1728;--tool-roll-border:#20324a;--tool-roll-bg:#0a1424;--tool-key-border:#567;--tool-key-white:#f8fafc;--tool-key-rule:#b8c3d1;--tool-key-text:#64748b;--tool-grid-major:#55719738;--tool-grid-minor:#4f658438;--tool-grid-bg:transparent;--tool-playhead:#f1f6ff;--tool-playhead-outline:#0a1424d9}}:root[data-theme=dark] .chord-tool{--tool-panel-bg:linear-gradient(180deg, #121f34f2, #0d182af2);--tool-control-label:#8391aa;--tool-export-text:#d9e1ee;--tool-export-bg:#142238;--tool-export-border:#445673;--tool-progression-bg:#0c1728;--tool-roll-border:#20324a;--tool-roll-bg:#0a1424;--tool-key-border:#567;--tool-key-white:#f8fafc;--tool-key-rule:#b8c3d1;--tool-key-text:#64748b;--tool-grid-major:#55719738;--tool-grid-minor:#4f658438;--tool-grid-bg:transparent;--tool-playhead:#f1f6ff;--tool-playhead-outline:#0a1424d9}.chord-tool__controls,.chord-tool__workspace{border:1px solid var(--border);background:var(--tool-panel-bg);box-shadow:var(--shadow);border-radius:18px}.chord-tool__controls{grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end;gap:16px;padding:31px 28px;display:grid}.chord-tool__heading{flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:14px;display:flex}.chord-tool__heading-title{min-width:0}.chord-tool__heading-title .page-title{margin:0}.chord-tool__mode{border:1px solid var(--border-strong);background:var(--tool-panel-bg);border-radius:10px;flex:none;width:fit-content;margin-left:auto;padding:3px;display:flex}.chord-tool__mode button{min-height:32px;color:var(--muted-strong);background:0 0;border:1px solid #0000;border-radius:7px;padding:0 14px;font-size:13px;font-weight:700}.chord-tool__mode button[aria-pressed=true]{color:var(--text);border-color:var(--tool-export-border);background:var(--tool-export-bg)}.chord-tool__controls--quick{grid-template-columns:minmax(0,1fr) auto}.chord-tool__controls--quick>label{width:160px;max-width:100%}.chord-tool__controls label{gap:8px;display:grid}.chord-tool__controls label>span{color:var(--tool-control-label);letter-spacing:.02em;margin-left:2px;font-size:12px;font-weight:800}.chord-tool__controls select{border:1px solid var(--border-strong);width:100%;height:48px;color:var(--text);background:var(--surface-control);border-radius:12px;outline:none;padding:0 38px 0 16px}.chord-tool__controls select:focus{border-color:#8ab4f8;box-shadow:0 0 0 3px #4c89f01f}.chord-tool__select{display:grid;position:relative}.chord-tool__select>select{appearance:none}.chord-tool__counted-select>select{color:#0000;-webkit-text-fill-color:transparent}.chord-tool__counted-select>select option{color:var(--text);-webkit-text-fill-color:var(--text);background:var(--surface-control)}.chord-tool__select-value{color:var(--text);pointer-events:none;white-space:nowrap;text-overflow:ellipsis;align-items:center;padding:0 38px 0 16px;display:flex;position:absolute;inset:0;overflow:hidden}.chord-tool__select-arrow{border-left:4px solid #0000;border-right:4px solid #0000;border-top:5px solid var(--text);pointer-events:none;width:0;height:0;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.chord-tool__select>select:disabled~.chord-tool__select-arrow,.chord-tool__counted-select>select:disabled+.chord-tool__select-value{opacity:.55}.chord-tool__generation-actions{--generation-action-height:64px;align-items:center;gap:8px;min-width:0;display:flex}.chord-tool__navigate{width:44px;height:var(--generation-action-height);border:1px solid var(--tool-export-border);color:var(--tool-export-text);background:var(--tool-export-bg);white-space:nowrap;border-radius:12px;flex:0 0 44px;place-items:center;padding:0;font-size:22px;font-weight:700;display:grid}.chord-tool__navigate:focus-visible,.chord-tool__generate:focus-visible{outline-offset:3px;outline:3px solid #8ab4f8}.chord-tool__generate{min-width:0;height:var(--generation-action-height);color:#fff;background:linear-gradient(90deg,#2f9bf2 0%,#4b72f3 52%,#6f3ceb 100%);border:0;border-radius:16px;flex:1;justify-content:center;align-items:center;gap:11px;padding:0 16px;font-size:16px;font-weight:800;display:flex;box-shadow:0 12px 28px #4766df38}.chord-tool__generate span{font-size:20px}.chord-tool__workspace{margin-top:20px;padding:22px 27px 24px}.chord-tool__workspace-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;display:flex}.chord-tool__result-title{letter-spacing:-.02em;font-size:24px;font-weight:800}.chord-tool__actions{flex-wrap:wrap;align-items:center;gap:12px;min-width:0;display:flex;position:relative}.chord-tool__bpm{color:var(--muted);gap:4px;font-size:12px;display:grid}.chord-tool__bpm input{border:1px solid var(--border-strong);width:76px;height:36px;color:var(--text);background:var(--surface-control);font-variant-numeric:tabular-nums;border-radius:8px;padding:0 8px}.chord-tool__bpm-notice{clip-path:inset(50%);width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.chord-tool__loop{border:1px solid var(--tool-export-border);height:52px;color:var(--tool-export-text);background:var(--tool-export-bg);border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 12px;font-weight:700;display:flex}.chord-tool__loop[aria-pressed=true]{background:var(--surface-control);border-color:#4b8df2;box-shadow:inset 0 0 0 1px #4b8df2}.chord-tool__bpm input:focus-visible,.chord-tool__instrument select:focus-visible,.chord-tool__loop:focus-visible,.chord-tool__play:focus-visible,.chord-tool__export:focus-visible{outline-offset:3px;outline:3px solid #8ab4f8}.chord-tool__play,.chord-tool__export{border-radius:14px;justify-content:center;align-items:center;gap:10px;height:52px;padding:0 22px;font-weight:800;display:flex}.chord-tool__play{color:#fff;background:linear-gradient(#4c9df4,#2a6feb);border:0;box-shadow:0 8px 18px #346fe229}.chord-tool__export{border:1px solid var(--tool-export-border);color:var(--tool-export-text);background:var(--tool-export-bg)}.chord-tool__share{min-width:0;position:static}.chord-tool__share-button{border:1px solid var(--tool-export-border);min-height:52px;color:var(--tool-export-text);background:var(--tool-export-bg);border-radius:12px;padding:0 16px;font-weight:700}.chord-tool__share-menu{z-index:5;border:1px solid var(--tool-export-border);background:var(--surface-control);width:186px;max-width:calc(100vw - 48px);box-shadow:var(--shadow);border-radius:12px;padding:6px;position:absolute;top:calc(100% + 6px);right:0}.chord-tool__share-menu button{width:100%;min-height:44px;color:var(--text);text-align:left;background:0 0;border:0;border-radius:7px;padding:8px 12px;display:block}.chord-tool__share-menu button:hover{background:var(--tool-export-bg)}.chord-tool__share-status{width:max-content;max-width:210px;color:var(--muted-strong);background:var(--surface-control);border-radius:4px;font-size:12px;position:absolute;bottom:calc(100% + 4px);right:0}.chord-tool__share-preparing{color:var(--muted);padding:4px 12px;font-size:12px;display:block}.chord-tool__progression{border:var(--timeline-border) solid var(--border);background:var(--tool-progression-bg);border-radius:12px;margin-bottom:11px;padding:11px 0 9px}.chord-tool__number{color:#7f8ca0;text-align:center;margin-bottom:8px;font-size:12px;display:block}.chord-tool__chord{color:#fff;border-radius:9px;place-items:center;min-width:0;height:68px;font-size:18px;font-weight:800;display:grid;position:relative;box-shadow:inset 0 1px #ffffff29}.chord-tool__chord small{color:#fffc;font-size:12px;font-weight:700;position:absolute;bottom:8px}.chord-tool__chord>span{overflow-wrap:anywhere;text-align:center;max-width:100%;padding:0 4px 14px}.chord-tool__timeline-scroll{overscroll-behavior-x:contain;max-width:100%;padding-bottom:4px;overflow-x:auto}.chord-tool__chord-track{height:94px;margin-left:var(--timeline-key-gutter);position:relative}.chord-tool__timeline{position:relative}.chord-tool__playhead-layer{inset:0 var(--timeline-border) 0 calc(var(--timeline-key-gutter) + var(--timeline-border));z-index:3;pointer-events:none;position:absolute;overflow:hidden}.chord-tool__playhead{background:var(--tool-playhead);width:2px;box-shadow:0 0 0 1px var(--tool-playhead-outline);position:absolute;top:0;bottom:0;left:0;transform:translate(-50%)}.chord-tool__playhead:before{content:"";background:var(--tool-playhead);border-radius:0 0 2px 2px;width:7px;height:5px;position:absolute;top:0;left:50%;transform:translate(-50%)}.chord-tool__event{padding:0 3px;position:absolute}.chord-tool__instrument{color:var(--muted);gap:4px;font-size:12px;display:grid}.chord-tool__instrument select{width:195px;height:36px;color:var(--text);background:var(--surface-control);border:1px solid var(--border-strong);border-radius:8px;padding:0 38px 0 8px}.chord-tool__status{color:var(--muted);flex-wrap:wrap;gap:4px 12px;margin:0 0 10px;font-size:12px;display:flex}.chord-tool__diagnostic{color:var(--muted-strong);margin:8px 0;font-size:13px}.chord-tool__placeholder{min-height:315px;color:var(--muted-strong);text-align:center;place-items:center;padding:24px;display:grid}.chord-tool button:disabled,.chord-tool select:disabled,.chord-tool input:disabled{opacity:.55;cursor:default}.chord-tool button:focus-visible,.chord-tool__instrument select:focus-visible,.chord-tool__timeline-scroll:focus-visible{outline-offset:3px;outline:3px solid #8ab4f8}.chord-tool__chord--1{background:linear-gradient(#5792ed,#3f7cdd)}.chord-tool__chord--2{background:linear-gradient(#4ec7b4,#39af9d)}.chord-tool__chord--3{background:linear-gradient(#e36f83,#cd596f)}.chord-tool__chord--4{background:linear-gradient(#8d6ae2,#7654d3)}.chord-tool__roll{grid-template-columns:var(--timeline-key-gutter) 1fr;border:var(--timeline-border) solid var(--tool-roll-border);background:var(--tool-roll-bg);border-radius:10px;height:210px;display:grid;overflow:hidden}.chord-tool__keys{border-right:1px solid var(--tool-key-border);background:repeating-linear-gradient(to bottom, var(--tool-key-white) 0, var(--tool-key-white) calc(14.285% - 1px), var(--tool-key-rule) calc(14.285% - 1px), var(--tool-key-rule) 14.285%);position:relative;box-shadow:inset -7px 0 12px #3c4e6914}.chord-tool__keys span{z-index:2;color:var(--tool-key-text);font-size:11px;position:absolute;left:8px;transform:translateY(-50%)}.chord-tool__roll-grid{background:linear-gradient(to right, var(--tool-grid-major) 1px, transparent 1px) 0 0 / 6.25% 100%, linear-gradient(to bottom, var(--tool-grid-minor) 1px, transparent 1px) 0 0 / 100% 14.285%, var(--tool-grid-bg);position:relative}.chord-tool__note{opacity:.95;border-radius:3px;position:absolute;box-shadow:0 1px 2px #2939531a}.chord-tool__note--bass{filter:saturate(.75);box-shadow:inset 0 0 0 1px #00000040}.chord-tool__note--1{background:#4b8df2}.chord-tool__note--2{background:#45c7b4}.chord-tool__note--3{background:#df6279}.chord-tool__note--4{background:#805bdd}@media (width<=900px){.chord-tool__controls{grid-template-columns:repeat(2,minmax(0,1fr))}.chord-tool__controls--quick{grid-template-columns:minmax(0,1fr)}.chord-tool__generation-actions{grid-column:1/-1}.chord-tool__workspace-head{flex-direction:column;align-items:flex-start}.chord-tool__actions{width:100%}.chord-tool__play,.chord-tool__export{flex:1}}@media (width<=620px){.chord-tool{--timeline-key-gutter:34px}.chord-tool__controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px}.chord-tool__controls--quick{grid-template-columns:minmax(0,1fr)}.chord-tool__generation-actions{--generation-action-height:54px}.chord-tool__generate{gap:8px;padding:0 12px;font-size:15px}.chord-tool__workspace{padding:18px 14px}.chord-tool__result-title{font-size:21px}.chord-tool__chord{height:68px;font-size:18px}.chord-tool__roll{height:170px}.chord-tool__keys span{font-size:9px;left:5px}.chord-tool__instrument,.chord-tool__instrument select{width:100%}.chord-tool__controls select{padding:0 38px 0 8px}.chord-tool__select-value{padding-left:8px}}