@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background:#0f0f1a;color:#e0e0e0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;min-width:320px}#root{width:100%}:root{--bg: #0f0f1a;--panel: #161625;--line: #262640;--text: #e6e6ee;--muted: #8a8aa0;--accent: #4d8dff;--root: #ff4d5e;--tone: #3f7fe8;--added: #f0a830;--wood: #3a2a1e;--fret: #9a9aa8;--nut: #e8dcc8;--string: #d0d0d8}.app{max-width:1280px;margin:0 auto;padding:10px 16px 12px}.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}.top h1{font-size:1.1rem;font-weight:800;color:var(--accent)}.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px}.seg button{flex:1;background:none;border:0;color:var(--muted);font:inherit;font-size:.9rem;font-weight:700;padding:7px 14px;border-radius:7px;cursor:pointer;white-space:nowrap}.seg button.is-on{background:var(--accent);color:#fff}.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.85rem;color:var(--muted)}.legend span{display:inline-flex;align-items:center;gap:5px}.swatch{width:12px;height:12px;border-radius:50%}.swatch.dot-root{background:var(--root)}.swatch.dot-tone{background:var(--tone)}.swatch.dot-added{background:var(--added)}.hint{margin-top:6px;color:var(--muted);font-size:.88rem;line-height:1.45}.hint b{color:var(--text)}.form-picker{display:none}.forms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}.form{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px 4px}.form h3{font-size:1rem;font-weight:800}.form-label{margin-top:4px;font-size:.82rem;font-weight:700;color:var(--text)}.form-label span{margin-left:6px;font-weight:500;color:var(--muted)}.form h3 span{margin-left:6px;font-size:.8rem;font-weight:600;color:var(--muted)}.board{display:block;width:100%;max-height:max(140px,calc((100vh - 360px)/2));margin:2px auto 0;font-family:JetBrains Mono,monospace}.board-wood{fill:var(--wood)}.board-fret{stroke:var(--fret);stroke-width:1.5;opacity:.6}.board-nut{stroke:var(--nut);stroke-width:5}.board-string{stroke:var(--string);opacity:.7}.is-unused .board-string{opacity:.22}.is-unused .board-label{opacity:.35}.board-label{fill:var(--muted);font-size:12px;font-weight:700}.board-fretnum{fill:var(--muted);font-size:13px}.board-fretnum.is-root{fill:var(--root);font-weight:800;font-size:15px}.dot circle{stroke-width:1.5}.dot text{font-size:12px;font-weight:800;fill:#fff}.dot-root circle{fill:var(--root);stroke:#ff9aa4}.dot-tone circle{fill:var(--tone);stroke:#8fb6ff}.dot-added circle{fill:var(--added);stroke:#ffd48a}.dot-added text{fill:#1a1206}.bottom{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px;margin-top:10px}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}.card h2{font-size:1rem;font-weight:800}.card h2 span{margin-left:6px;font-size:.78rem;font-weight:500;color:var(--muted)}.grid{width:100%;margin-top:8px;border-collapse:collapse;table-layout:fixed;text-align:center}.grid th,.grid td{padding:6px 0;border:1px solid var(--line)}.grid thead th{color:var(--root);font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:700;border-top:0}.grid thead th:first-child,.grid tbody th{width:40px;border-left:0}.grid tbody th{color:var(--muted);font-size:.78rem;font-weight:600}.grid td{font-weight:800;font-size:.95rem}.grid td.is-sharp{color:var(--muted);font-weight:500;font-size:.78rem}.pairs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;margin-top:8px}.pairs div{display:flex;flex-direction:column;align-items:center;background:#1d1d30;border-radius:6px;padding:4px 0}.pairs b{font-size:.9rem}.pairs small{font-size:.72rem;color:var(--muted)}.degrees{width:100%;margin-top:8px;border-collapse:separate;border-spacing:3px;table-layout:fixed;text-align:center;font-size:.9rem}.degrees th{width:52px;text-align:left;font-weight:600;color:var(--muted);font-size:.78rem}.degrees td{background:#1d1d30;border-radius:6px;padding:4px 0;font-weight:700}.degrees td.is-root{background:var(--root);color:#fff}.fill-page{margin-top:8px}.fill-page>.hint{margin-top:0}.fill-picker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;font-size:.88rem;color:var(--muted)}.fill-picker .seg button{padding:7px 18px}.fill-tabs{flex-wrap:wrap;margin-top:8px}.fill-intro{margin-top:8px;font-size:.9rem;line-height:1.5;color:var(--text)}.fill-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.fill-play{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;transition:background .15s,transform .1s}.fill-play svg{width:15px;height:15px;fill:currentColor}.fill-play:hover{background:#6a9fff}.fill-play:active{transform:scale(.94)}.fill-play.is-on{background:var(--root)}.fill-play:disabled{background:#26263a;color:var(--muted);cursor:default}.fill-notes em{margin-left:1px;font-size:.75rem;font-style:normal;font-weight:700;color:var(--accent)}.fill-shape{margin-top:14px}.fill-shape h3{font-size:1rem;font-weight:800;color:var(--accent)}.fill-shape h3 span{margin-left:6px;font-size:.82rem;font-weight:500;color:var(--muted)}.fills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}.fill-notes{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;font-size:1.15rem;font-weight:800}.fill-notes i{margin:0 4px;font-style:normal;color:var(--muted)}.fill-notes small{margin-left:10px;font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:600;color:var(--muted)}.is-end{color:var(--root)}.bar{display:grid;grid-template-columns:22px repeat(16,minmax(0,1fr));grid-auto-rows:24px;margin-top:8px;font-family:JetBrains Mono,monospace}.bar-beat{grid-row:1;align-self:center;margin:0 1px;border-radius:5px;background:#1d1d30;color:var(--muted);font-size:.78rem;font-weight:700;text-align:center;line-height:20px}.bar-beat.is-fill{background:var(--accent);color:#fff}.bar-string{position:relative;grid-column:1 / -1;display:flex;align-items:center;font-size:.75rem;color:var(--muted)}.bar-string:after{content:"";position:absolute;left:22px;right:0;top:50%;border-top:1px solid var(--line);border-top-color:#4a4a66}.bar-rest{grid-row:2 / 8;z-index:1;display:flex;align-items:center;justify-content:center;margin:2px;border-radius:6px;background:#0f0f1abf;color:var(--muted);font-family:Inter,sans-serif;font-size:.85rem}.bar-fret{z-index:2;justify-self:center;align-self:center;padding:0 2px;background:var(--panel);font-size:.95rem;font-weight:800;line-height:1}.bar-hold{z-index:1;align-self:center;height:4px;margin-right:4px;border-radius:2px;background:var(--root);opacity:.55}.bar-hold.is-swell{height:8px;border-radius:0 4px 4px 0;background:linear-gradient(to right,transparent,var(--root));opacity:.8}.bar-fret.is-echo{color:var(--root);opacity:.45;font-weight:600}.bar-name{grid-row:8;justify-self:center;align-self:center;font-family:Inter,sans-serif;font-size:.85rem;font-weight:800;white-space:nowrap}.fill-tips{margin-top:10px;padding-left:30px;font-size:.88rem;line-height:1.7;color:var(--muted)}.fill-tips b{color:var(--text)}.fill-tips b.is-end{color:var(--root)}.workbench{margin:12px 0 20px;padding:20px;border-color:#3b4665}.workbench-title,.save-row,.transport,.play-settings,.fill-card-footer,.saved-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.workbench-title{justify-content:space-between;margin-bottom:16px}.workbench h2{font-size:1.3rem}.chord-badge{padding:6px 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:.8rem}.work-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:12px}.transform-controls,.play-options-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workbench label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.8rem;font-weight:600;min-width:0}.workbench input:not([type=checkbox]),.workbench select,.workbench textarea{width:100%;min-width:0;min-height:40px;padding:9px 10px;border:1px solid #40405a;border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:.9rem}.workbench textarea{resize:vertical;line-height:1.5;font-family:monospace}.workbench select:disabled{opacity:.55}.action{min-height:40px;padding:9px 13px;border:1px solid #40405a;border-radius:8px;background:#222239;color:var(--text);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}.action:hover{background:#303050}.action.primary{border-color:var(--accent);background:var(--accent);color:#fff}.action.primary:hover{background:#3676e7}.action.is-playing{background:var(--root);border-color:var(--root)}.action.quiet{background:transparent;color:var(--muted)}.action:disabled{opacity:.4;cursor:default}.workbench :is(button,input,select,textarea,summary):focus-visible,.preset-library summary:focus-visible{outline:2px solid #a5c4ff;outline-offset:3px}.work-preview{padding:16px;border:1px solid var(--line);border-radius:10px;background:#131320}.work-note-line{font-size:1.2rem;font-weight:800;color:var(--text)}.work-preview .bar{margin:10px 0 18px;grid-auto-rows:27px}.work-preview .bar-fret{background:#131320}.work-preview .bar-fret.selectable{width:100%;min-width:0;height:28px;padding:0;border:1px solid #52617d;border-radius:6px;color:var(--text);font-family:inherit;cursor:pointer;z-index:4}.work-preview .bar-fret.selectable:hover{background:#303050}.work-preview .bar-fret.selectable.is-selected{background:var(--accent);border-color:#c6dcff;color:#fff}.bar-fret sup{font-size:.6rem;margin-left:1px}.click-hint{color:var(--muted);font-size:.85rem}.ai-feedback{margin-top:16px}.generate-pattern{width:100%;margin-bottom:14px}.ai-progress{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;font-size:.8rem;color:var(--muted)}.listen-controls>.compare-pattern{flex-basis:100%}.login-link{display:inline-block;margin-top:10px;text-decoration:none}.selection-summary,.exchange-hint{font-size:.78rem;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}.feedback-shortcuts{display:flex;gap:8px;margin:10px 0}.feedback-shortcuts>button{flex:1}.feedback-request{margin:12px 0}.request-copy{width:100%}.exchange-hint{margin-top:6px;text-align:center}.work-more>label+label{margin-top:12px}.work-preview .bar-name{font-size:.82rem}.bar-playhead{grid-row:2 / 8;z-index:3;background:#8bb9ff25;border-left:2px solid #b9d2ff;pointer-events:none}.play-settings{margin-top:14px;gap:10px 18px}.workbench .play-settings label,.workbench label.inline-check{flex-direction:row;align-items:center;white-space:nowrap}.play-settings input,.inline-check input{accent-color:var(--accent);width:17px;height:17px}.play-settings span{color:var(--muted);font-size:.8rem}.listen-controls>button{flex:1}.listen-controls>.inline-check{margin-left:auto;padding:8px 0 8px 6px}.listen-status{display:block;color:var(--muted);font-size:.8rem}.listen-status:not(:empty){margin-top:10px}.original-actions{margin-top:12px}.starter-hint{margin:-4px 0 14px;color:var(--muted);font-size:.82rem;line-height:1.5}.work-more .play-options-grid{margin-top:12px}.creation-mode{margin-bottom:16px}.creation-mode button{padding:9px 12px;font-size:.86rem}.material-controls{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}.alternate-notes{margin-bottom:14px;font-size:.8rem}.listen-controls{gap:8px}.listen-controls>button{font-size:.8rem;padding-inline:10px}.workbench details{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.workbench summary,.preset-library>summary{cursor:pointer;font-weight:700;font-size:.9rem;color:var(--text)}.workbench details[open]>summary{margin-bottom:12px}.workbench .hint{display:block}.original-preview .bar{max-width:780px}.work-warning,.work-message,.work-error{margin-top:12px;padding:10px 12px;border-radius:8px;font-size:.85rem;line-height:1.5;overflow-wrap:anywhere}.work-warning{color:#f6cc87;background:#f0a83012}.work-message{color:#b9d2ff;background:#4d8dff15}.work-error{color:#ffb1b9;background:#ff4d5e15}.save-row{margin-top:18px;align-items:flex-end}.save-row>label{flex:1;min-width:180px}.saved-row{margin-top:10px;padding:10px 0;border-bottom:1px solid var(--line)}.saved-row>span{flex:1;min-width:150px;font-size:.9rem;overflow-wrap:anywhere}.saved-row small{display:block;margin-top:4px;color:var(--muted)}.codex-exchange .transport{margin:10px 0}.codex-exchange>button{margin-top:10px}.workbench label.file-import{display:inline-flex;justify-content:center;color:var(--text)}.file-import input{display:none}.edit-hit{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.edit-hit>label:not(.inline-check){width:105px}.edit-notes{flex:1;min-width:190px}.edit-note{display:flex;align-items:flex-end;gap:8px;margin-bottom:8px}.edit-note>strong{align-self:center;width:30px;flex:none;color:var(--text);font-size:.9rem}.edit-note>label{width:86px}.edit-hit>.inline-check{padding-top:30px}.edit-actions{display:flex;flex-wrap:wrap;gap:8px}.note-editor>button{margin-top:14px}.echo-description{color:var(--muted);padding:10px 0;font-size:.85rem}.preset-library{margin-bottom:20px}.preset-library>summary{font-size:1.05rem;margin-bottom:10px}.fill-card-footer{justify-content:space-between;margin-top:8px}.fill-card-footer .hint{margin:0}.fill-card-footer .action{font-size:.78rem;min-height:36px;padding:7px 10px}@media(max-width:760px){.card.workbench{padding:14px 10px}.workbench-title{gap:8px}.workbench h2{font-size:1.15rem}.work-controls{gap:8px}.work-preview{padding:12px 6px}.work-note-line{font-size:1rem}.work-preview .bar{grid-auto-rows:25px}.transport>button{flex:1 1 130px}.listen-controls>button{flex:1 1 0}.listen-controls>.inline-check{margin-left:0}.play-settings{gap:12px}.play-settings>span{flex-basis:100%}.save-row>label{flex-basis:100%}.save-row>button{flex:1}.workbench summary{line-height:1.5}.edit-hit>label:not(.inline-check){width:90px}.edit-notes{flex-basis:calc(100% - 102px);min-width:0}.edit-note{flex-wrap:wrap}.edit-note>label{width:64px}.edit-hit>.inline-check{padding-top:24px}.edit-actions{width:100%}.saved-row>span{flex-basis:100%}}@media(max-width:1100px){.fills{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.app{padding-top:8px}.top h1{display:none}.form-picker{display:flex;margin-top:8px}.forms{grid-template-columns:minmax(0,1fr)}.form:not(.is-picked){display:none}.board{max-height:max(150px,calc((100vh - 500px)/2))}.bottom{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:8px}.form h3,.top .hint,.card .hint,.card h2 span{display:none}.form{padding-top:4px}.card{padding:8px 10px}.grid th,.grid td{padding:4px 0}.degrees td{padding:2px 0}.pairs{gap:2px}.pairs b{font-size:.72rem}.pairs small{font-size:.55rem}.grid td{font-size:.8rem}.grid td.is-sharp{font-size:.65rem}.grid thead th:first-child,.grid tbody th{width:30px}.fills{grid-template-columns:minmax(0,1fr);gap:8px}.card.fill .hint{display:block}.bar-fret{font-size:.85rem}.bar-name{font-size:.75rem}}