:root{--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--radius-sm: 0;--radius-md: 0;--radius-lg: 0;--radius-pill: 0;--font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, Menlo, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-md: 1.125rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 1.875rem;--text-3xl: 2.25rem;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.65;--ease: cubic-bezier(.4, 0, .2, 1);--duration: .15s;--container-max: 1200px}:root,:root[data-theme=dark]{color-scheme:dark;--color-bg: #1c1c1c;--color-surface-1: #202020;--color-surface-2: #2a2a2a;--color-surface-3: #383838;--color-text: #f2f2f2;--color-text-dim: #b5b5b5;--color-text-muted: #9a9a9a;--color-disabled: #5a5a5a;--color-disabled-bg: #222222;--color-border: #404040;--color-border-strong: #6a6a6a;--color-accent: #ffffff;--color-accent-hover: #ffffff;--color-accent-soft: rgba(255, 255, 255, .1);--color-on-accent: #1c1c1c;--color-success: #cfcfcf;--color-success-soft: rgba(255, 255, 255, .06);--color-warn: #909090;--color-warn-soft: rgba(255, 255, 255, .035);--color-danger: #5a5a5a;--color-danger-soft: rgba(255, 255, 255, .015);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4)}:root[data-theme=sepia]{color-scheme:light;--color-bg: #ecd2af;--color-surface-1: #e2c39a;--color-surface-2: #d0ad7e;--color-surface-3: #b08762;--color-text: #420c0c;--color-text-dim: #5a2820;--color-text-muted: #5c3c2a;--color-disabled: #b08762;--color-disabled-bg: #e2c39a;--color-border: #a07458;--color-border-strong: #6f4b38;--color-accent: #420c0c;--color-accent-hover: #8a2020;--color-accent-soft: rgba(66, 12, 12, .1);--color-on-accent: #ecd2af;--color-success: #420c0c;--color-success-soft: rgba(66, 12, 12, .14);--color-warn: #7d5538;--color-warn-soft: rgba(125, 85, 56, .16);--color-danger: #b08762;--color-danger-soft: rgba(176, 135, 98, .2);--shadow-sm: 0 1px 2px rgba(66, 12, 12, .12);--shadow-md: 0 4px 12px rgba(66, 12, 12, .15)}:root[data-theme=cyanotype]{color-scheme:dark;--color-bg: #15375d;--color-surface-1: #1d4470;--color-surface-2: #265685;--color-surface-3: #386da3;--color-text: #ecdebc;--color-text-dim: #e0d2af;--color-text-muted: #d6c8a4;--color-disabled: #6f88a8;--color-disabled-bg: #1d4470;--color-border: #5587b8;--color-border-strong: #9bb5d4;--color-accent: #ecdebc;--color-accent-hover: #f6ecca;--color-accent-soft: rgba(236, 222, 188, .1);--color-on-accent: #15375d;--color-success: #ecdebc;--color-success-soft: rgba(236, 222, 188, .14);--color-warn: #c4b58a;--color-warn-soft: rgba(196, 181, 138, .18);--color-danger: #9bb5d4;--color-danger-soft: rgba(155, 181, 212, .22);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .55);--shadow-md: 0 4px 12px rgba(0, 0, 0, .45)}:root[data-theme=light]{color-scheme:light;--color-bg: #ffffff;--color-surface-1: #ffffff;--color-surface-2: #f5f5f5;--color-surface-3: #e8e8e8;--color-text: #000000;--color-text-dim: #4a4a4a;--color-text-muted: #6b6b6b;--color-disabled: #b0b0b0;--color-disabled-bg: #f0f0f0;--color-border: #d0d0d0;--color-border-strong: #999999;--color-accent: #000000;--color-accent-hover: #333333;--color-accent-soft: rgba(0, 0, 0, .08);--color-on-accent: #ffffff;--color-success: #3a3a3a;--color-success-soft: rgba(0, 0, 0, .05);--color-warn: #707070;--color-warn-soft: rgba(0, 0, 0, .04);--color-danger: #a8a8a8;--color-danger-soft: rgba(0, 0, 0, .03);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:16px;line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body{min-height:100vh;display:flex;flex-direction:column}body:has(#transport-bar:not([hidden])),body.has-transport{padding-bottom:110px}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.chip-cell.is-playing .chord-chip{outline:2px solid var(--color-accent, var(--color-text));outline-offset:2px}.scale-play .icon-stop,.chord-chip-play .icon-stop,.scale-play.is-playing .icon-play,.chord-chip-play.is-playing .icon-play{display:none}.scale-play.is-playing .icon-stop,.chord-chip-play.is-playing .icon-stop{display:inline}.progression-styles{display:inline-flex;gap:2px;margin-left:var(--space-2);flex-wrap:wrap}.progression-styles button{background:transparent;border:1px solid var(--color-border, currentColor);color:var(--color-text);padding:.25em .6em;font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.progression-styles button.is-active{background:var(--color-text);color:var(--color-bg)}@media(max-width:600px){.progression-styles{width:100%;margin-left:0;margin-top:var(--space-1);justify-content:center}}.share-row{margin-top:var(--space-2);display:flex;justify-content:flex-end}.share-btn{background:transparent;border:1px solid var(--color-border, currentColor);color:var(--color-text);padding:.4em .9em;cursor:pointer;font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase}.share-btn:hover{background:var(--color-surface-2, transparent)}@media(prefers-reduced-motion:reduce){.drawer-backdrop,.settings-drawer{transition:none!important}}p{margin:0;line-height:var(--leading-relaxed)}button{font-family:inherit;font-size:inherit}::selection{background:var(--color-accent);color:var(--color-on-accent)}button:focus-visible,select:focus-visible,summary:focus-visible,[role=listitem] *:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm);box-shadow:0 0 0 4px #0009}.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);background:var(--color-bg);position:sticky;top:0;z-index:10}.logo{margin:0;font-size:var(--text-lg);font-weight:800;letter-spacing:-.02em;color:var(--color-accent);display:inline-flex;align-items:center;gap:var(--space-2)}.logo-mark{width:1.4em;height:1.4em;flex-shrink:0;display:block}.settings-btn{background:transparent;border:1px solid var(--color-border);color:var(--color-text-dim);padding:var(--space-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color var(--duration),border-color var(--duration)}.settings-btn.is-nudge{outline:2px solid var(--color-accent, var(--color-text));outline-offset:2px;animation:gear-nudge 1.4s var(--ease) 3 forwards}@keyframes gear-nudge{0%,to{outline-color:transparent;outline-offset:2px}50%{outline-color:var(--color-accent, var(--color-text));outline-offset:5px}}@media(prefers-reduced-motion:reduce){.settings-btn.is-nudge{animation:none;outline:2px solid var(--color-accent, var(--color-text));outline-offset:2px}}.settings-btn:hover{color:var(--color-text);border-color:var(--color-border-strong);background:var(--color-surface-2)}.drawer-backdrop{position:fixed;inset:0;background:#0006;z-index:90;opacity:0;transition:opacity .22s var(--ease)}body.drawer-open .drawer-backdrop{opacity:1}.settings-drawer{position:fixed;top:0;right:0;bottom:0;width:min(360px,100%);background:var(--color-surface-1);border-left:1px solid var(--color-border);z-index:100;display:flex;flex-direction:column;transform:translate(100%);transition:transform .22s var(--ease);box-shadow:var(--shadow-md)}.settings-drawer.is-open{transform:translate(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}.drawer-title{margin:0;font-size:var(--text-md);font-weight:700}.drawer-close{background:transparent;border:0;color:var(--color-text-dim);font-size:var(--text-lg);cursor:pointer;padding:var(--space-1) var(--space-2);transition:color var(--duration)}.drawer-close:hover{color:var(--color-text)}.drawer-body{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);overflow-y:auto;flex:1}.drawer-body .toggle-field{flex-direction:column;align-items:stretch;gap:var(--space-1)}.starter-example{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4) var(--space-5)}.starter-hint{margin:0;color:var(--color-text-dim);font-size:var(--text-sm)}.starter-btn{background:var(--color-accent);color:var(--color-on-accent);border:0;padding:.6rem 1.2rem;font-family:var(--font-mono);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:background var(--duration)}.starter-btn:hover{background:var(--color-accent-hover)}.toggle-field{display:flex;flex-direction:column;gap:var(--space-1)}.toggle-caption{font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);padding-left:var(--space-1)}.toggle-field--tessitura{gap:var(--space-2)}.tessitura-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 var(--space-1)}.tessitura-readout{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;color:var(--color-text)}.tessitura-slider{position:relative;height:28px;padding:0 var(--space-1)}.tessitura-track{position:absolute;top:50%;left:var(--space-1);right:var(--space-1);height:4px;background:var(--color-surface-3);transform:translateY(-50%)}.tessitura-fill{position:absolute;top:50%;height:4px;background:var(--color-accent, var(--color-text));transform:translateY(-50%);pointer-events:none}.tessitura-slider input[type=range]{position:absolute;inset:0;width:100%;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;margin:0}.tessitura-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:var(--color-text);border:2px solid var(--color-bg);border-radius:50%;cursor:pointer;pointer-events:auto;margin-top:0}.tessitura-slider input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--color-text);border:2px solid var(--color-bg);border-radius:50%;cursor:pointer;pointer-events:auto}.tessitura-slider input[type=range]::-moz-range-track{background:transparent}.tessitura-tip,.instr-tip{margin:0;font-size:var(--text-xs);color:var(--color-text-muted);padding-left:var(--space-1);line-height:1.4}.instr-tip{margin-top:var(--space-1)}.locale-toggle,.notation-toggle,.theme-toggle,.staff-toggle{display:inline-flex;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2px;gap:1px}.locale-toggle button,.notation-toggle button,.theme-toggle button,.staff-toggle button{background:transparent;color:var(--color-text-dim);border:0;padding:.375rem .7rem;font-size:var(--text-sm);font-weight:500;border-radius:0;cursor:pointer;transition:background var(--duration) var(--ease),color var(--duration) var(--ease)}.locale-toggle button:hover,.notation-toggle button:hover,.theme-toggle button:hover,.staff-toggle button:hover{color:var(--color-text)}.locale-toggle button.is-active,.notation-toggle button.is-active,.theme-toggle button.is-active,.staff-toggle button.is-active{background:var(--color-surface-1);color:var(--color-text);font-weight:600;box-shadow:var(--shadow-sm)}.instr-select{background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-sm);padding:.4rem .7rem;cursor:pointer;outline:none;font-weight:500}.instr-select:hover{border-color:var(--color-border-strong)}.app-main{flex:1;width:100%;max-width:var(--container-max);margin:0 auto;padding:var(--space-6) var(--space-5)}.chord-input-section{background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-6)}.chord-chips{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3)}.chord-chips:empty{margin-bottom:0}.harmony-meta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.playback-controls{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface-1);border-top:1px solid var(--color-border);box-shadow:0 -2px 12px #00000026}.progression-play,.progression-loop,.progression-click{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--color-accent);border:1px solid var(--color-accent);width:44px;height:44px;padding:0;cursor:pointer;transition:background var(--duration),color var(--duration)}.progression-play:hover,.progression-loop:hover,.progression-click:hover,.progression-loop.is-active,.progression-click.is-active,.progression-play.is-playing{background:var(--color-accent);color:var(--color-on-accent)}.progression-tempo{display:inline-flex;align-items:center;gap:var(--space-2);flex:1 1 200px;min-width:180px}.progression-tempo-label{font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}#progression-bpm{flex:1;height:24px;-webkit-appearance:none;appearance:none;background:transparent;accent-color:var(--color-accent);cursor:pointer}#progression-bpm::-webkit-slider-runnable-track,#progression-bpm::-moz-range-track{height:4px;background:var(--color-border)}#progression-bpm::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:var(--color-accent);border:2px solid var(--color-bg);border-radius:50%;margin-top:-10px;cursor:pointer}#progression-bpm::-moz-range-thumb{width:24px;height:24px;background:var(--color-accent);border:2px solid var(--color-bg);border-radius:50%;cursor:pointer}.progression-tempo-readout{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--color-text);min-width:4.5em;text-align:right}.key-badge{font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted)}.key-badge strong{color:var(--color-text);font-weight:600;text-transform:none;letter-spacing:0;margin-left:4px}.chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.chip-cell{display:inline-flex;flex-direction:column;align-items:center;gap:2px}.roman-numeral{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);letter-spacing:.02em}.roman-numeral[data-tip],.cadence-arrow[data-tip]{position:relative;text-decoration:underline dotted;text-decoration-color:var(--color-text-muted);text-underline-offset:2px;cursor:help}.roman-numeral[data-tip]:before,.cadence-arrow[data-tip]:before{content:"";position:absolute;inset:-10px -8px}.roman-numeral[data-tip]:after,.cadence-arrow[data-tip]:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%);background:var(--color-text);color:var(--color-bg);border:1px solid var(--color-border);padding:.35em .6em;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:500;font-style:normal;letter-spacing:0;text-transform:none;text-decoration:none;line-height:1.3;white-space:normal;width:max-content;max-width:min(60vw,28ch);text-align:center;z-index:70;pointer-events:none;opacity:0;visibility:hidden}.roman-numeral[data-tip]:hover:after,.roman-numeral[data-tip]:focus-visible:after,.cadence-arrow[data-tip]:hover:after,.cadence-arrow[data-tip]:focus-visible:after{opacity:1;visibility:visible}.roman-numeral[data-tip]:focus-visible,.cadence-arrow[data-tip]:focus-visible{outline:2px solid var(--color-accent, var(--color-text));outline-offset:2px}.roman-borrowed{font-style:italic;color:var(--color-accent, var(--color-text-dim));border-bottom:1px dotted var(--color-text-muted);cursor:help}.roman-empty{opacity:.3}.cadence-arrow{font-size:var(--text-base);color:var(--color-text-muted);padding:0 2px;align-self:center;margin-top:-14px;user-select:none}.cadence-arrow.cadence-authentic,.cadence-arrow.cadence-plagal,.cadence-arrow.cadence-deceptive,.cadence-arrow.cadence-iiV,.cadence-arrow.cadence-backdoor{color:var(--color-text);font-weight:700;cursor:help}.chord-chip{display:inline-flex;align-items:center;background:var(--color-accent-soft);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:2px 4px;font-family:var(--font-mono);font-size:var(--text-sm)}.chord-chip-label{padding:0 var(--space-2);color:var(--color-text);font-weight:600}.chord-chip-move,.chord-chip-remove,.chord-chip-play{background:transparent;border:0;color:var(--color-text-dim);cursor:pointer;padding:4px 6px;border-radius:var(--radius-pill);font-size:var(--text-sm);line-height:1;transition:color var(--duration),background var(--duration)}.chord-chip-play{color:var(--color-accent);display:inline-flex;align-items:center;justify-content:center}.chord-chip-play:hover{background:var(--color-accent-soft)}.chord-chip-play.is-loading{opacity:.6;cursor:wait}.chord-chip-move:hover:not(:disabled),.chord-chip-remove:hover{color:var(--color-text);background:var(--color-surface-3)}.chord-chip-move:disabled{opacity:.3;cursor:default}.chord-builder{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.builder-toggle{display:none;width:100%;min-height:44px;background:transparent;color:var(--color-text);border:1px solid var(--color-border);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;letter-spacing:.04em;cursor:pointer}.builder-toggle:hover{background:var(--color-surface-2)}@media(max-width:480px){.chord-input-section.is-collapsed .builder-toggle{display:flex;align-items:center;justify-content:center}.chord-input-section.is-collapsed .chord-builder{display:none}}.chord-builder-group{display:inline-flex;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2px;gap:1px}.chord-builder-group button{background:transparent;color:var(--color-text-dim);border:0;padding:.4rem .7rem;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;border-radius:0;cursor:pointer;min-width:2.1rem;transition:background var(--duration),color var(--duration)}.chord-builder-group button:hover{color:var(--color-text)}.chord-builder-group button.is-active{background:var(--color-surface-1);color:var(--color-accent);font-weight:600;box-shadow:var(--shadow-sm)}#acc-group button{font-size:var(--text-lg);min-width:2.6rem;padding:.35rem .75rem;line-height:1}.chord-builder-quality{background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text);font-family:var(--font-mono);font-size:var(--text-sm);padding:.45rem .7rem;border-radius:var(--radius-md);cursor:pointer;outline:none}.chord-builder-quality:hover{border-color:var(--color-border-strong)}.chord-preview{font-family:var(--font-mono);font-size:var(--text-md);font-weight:600;color:var(--color-accent);padding:0 var(--space-2);min-width:3rem}.chord-preview.is-invalid{color:var(--color-danger);animation:shake .35s var(--ease)}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.chord-add{background:var(--color-accent);color:var(--color-on-accent);border:0;padding:.5rem 1.1rem;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-md);cursor:pointer;margin-left:auto;transition:background var(--duration)}.chord-add:hover{background:var(--color-accent-hover)}.page-nav{display:flex;gap:var(--space-5);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-5)}.page-nav button{background:transparent;color:var(--color-text-dim);border:0;border-bottom:2px solid transparent;padding:var(--space-3) 0;margin-bottom:-1px;font-size:var(--text-md);font-weight:700;letter-spacing:-.01em;cursor:pointer;transition:color var(--duration),border-color var(--duration)}.page-nav button:hover{color:var(--color-text)}.page-nav button.is-active{color:var(--color-accent);border-bottom-color:var(--color-accent)}body[data-page=scales] .chord-input-section,body[data-page=scales] .view-tabs,body[data-page=studies] .chord-input-section,body[data-page=studies] .view-tabs,body[data-page=theory] .chord-input-section,body[data-page=theory] .view-tabs,body[data-page=cycle] .chord-input-section,body[data-page=cycle] .view-tabs{display:none}.scales-controls,.studies-controls{display:none;margin-bottom:var(--space-5)}body[data-page=scales] .scales-controls{display:block}body[data-page=studies] .studies-controls{display:flex;flex-direction:column;gap:var(--space-4)}.studies-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}.studies-field{display:flex;flex-direction:column;gap:var(--space-1);min-width:180px}.studies-caption{font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);padding-left:var(--space-1)}.studies-select{font-family:var(--font-mono);font-size:var(--text-sm);padding:var(--space-2);background:var(--color-surface-1);color:var(--color-text);border:1px solid var(--color-border)}.studies-pattern-group{display:flex;flex-wrap:wrap;gap:var(--space-1)}.studies-chip{font-family:var(--font-mono);font-size:var(--text-xs);padding:4px 10px;background:var(--color-surface-1);color:var(--color-text-dim);border:1px solid var(--color-border);cursor:pointer;transition:background var(--duration),color var(--duration)}.studies-chip:hover{color:var(--color-text)}.studies-chip.is-active{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}.studies-chip.is-disabled,.studies-chip:disabled{opacity:.35;cursor:not-allowed}.studies-field--bpm{min-width:220px;flex:1}.studies-bpm-slider{width:100%;height:24px;-webkit-appearance:none;appearance:none;background:transparent;accent-color:var(--color-accent);cursor:pointer}.studies-bpm-slider::-webkit-slider-runnable-track{height:4px;background:var(--color-border)}.studies-bpm-slider::-moz-range-track{height:4px;background:var(--color-border)}.studies-bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:var(--color-accent);border:2px solid var(--color-bg);border-radius:50%;margin-top:-10px;cursor:pointer}.studies-bpm-slider::-moz-range-thumb{width:24px;height:24px;background:var(--color-accent);border:2px solid var(--color-bg);border-radius:50%;cursor:pointer}.studies-bpm-readout{font-family:var(--font-mono);font-weight:600;color:var(--color-text);margin-left:var(--space-2)}.study-count{margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--color-text-muted);font-family:var(--font-mono)}.study-card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface-1);border:1px solid var(--color-border)}.study-card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}.study-title{margin:0;font-size:var(--text-lg);font-weight:700;color:var(--color-text)}.study-pattern{color:var(--color-text-muted);font-weight:500}.view-tabs{display:flex;background:transparent;border-bottom:1px solid var(--color-border);padding:0;margin-bottom:var(--space-5);gap:var(--space-4)}.view-tabs button{background:transparent;color:var(--color-text-dim);border:0;border-bottom:2px solid transparent;padding:var(--space-2) 0;margin-bottom:-1px;font-size:var(--text-base);font-weight:600;border-radius:0;cursor:pointer;transition:color var(--duration),border-color var(--duration)}.view-tabs button:hover{color:var(--color-text)}.view-tabs button.is-active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.results{display:flex;flex-direction:column;gap:var(--space-5)}.results[data-view=chord]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-4);align-items:start}@media(min-width:1024px){.results[data-view=chord]{grid-template-columns:repeat(4,minmax(0,1fr));width:100vw;margin-left:calc(50% - 50vw);padding-left:var(--space-5);padding-right:var(--space-5)}}.placeholder{color:var(--color-text-dim);text-align:center;padding:var(--space-6);font-size:var(--text-base);max-width:50ch;margin:0 auto;line-height:var(--leading-relaxed)}.placeholder-small{padding:var(--space-3);font-size:var(--text-sm)}.placeholder--error{color:var(--color-text)}.placeholder--error:before{content:"⚠ "}.parent-card{background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}.parent-card.is-hero{border-color:var(--color-accent);border-left-width:4px;padding:var(--space-6);box-shadow:var(--shadow-md)}.parent-card+.parent-card,.alt-parents .parent-card+.parent-card{margin-top:var(--space-3)}.parent-card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}.parent-card-title{margin:0;font-size:var(--text-xl);font-weight:700;letter-spacing:-.01em;color:var(--color-text)}.parent-card.is-hero .parent-card-title{font-size:var(--text-2xl)}.parent-card h3.parent-card-title{font-size:var(--text-md)}.parent-tag{font-size:var(--text-xs);padding:.25rem .6rem;border-radius:var(--radius-pill);font-weight:600;white-space:nowrap}.transposed-badge{display:inline-block;margin-left:var(--space-2);font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);font-style:italic;letter-spacing:0}.will-sound-badge{font-style:normal;color:var(--color-text-dim);border-bottom:1px dotted var(--color-text-muted);cursor:help}.will-sound-badge strong{color:var(--color-text);font-weight:600}.parent-tag-ok{background:var(--color-success-soft);color:var(--color-success)}.parent-tag-warn{background:var(--color-warn-soft);color:var(--color-warn)}.parent-card-notes{display:flex;flex-wrap:wrap;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-base);margin-bottom:var(--space-4)}.parent-card-notes span{padding:.3rem .6rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-weight:600}.parent-card-desc{margin:0 0 var(--space-4) 0;color:var(--color-text-dim);max-width:65ch}.chord-mapping{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-2)}.chord-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);padding:.5rem .75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm)}.chord-row-out{opacity:.5}.chord-row-symbol{font-family:var(--font-mono);font-weight:600;color:var(--color-text)}.chord-row-mode{color:var(--color-accent);font-weight:500}.chord-row-degree{color:var(--color-text-muted);font-size:var(--text-xs);margin-left:var(--space-1);font-variant-numeric:tabular-nums}.alt-parents{background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-4)}.alt-parents summary{cursor:pointer;font-size:var(--text-sm);color:var(--color-text-dim);padding:var(--space-2) 0;list-style:none;font-weight:500;user-select:none}.alt-parents summary::-webkit-details-marker{display:none}.alt-parents summary:before{content:"▸";display:inline-block;color:var(--color-accent);margin-right:var(--space-1);transition:transform var(--duration)}.alt-parents[open] summary:before{transform:rotate(90deg)}.alt-parents summary:hover{color:var(--color-text)}.alt-parents .parent-card{border:0;background:var(--color-surface-2);padding:var(--space-3) var(--space-4);margin-top:var(--space-2)}.outsiders{margin-top:var(--space-3);padding:var(--space-4) var(--space-5);border:1px solid var(--color-border);border-left:4px solid var(--color-warn);border-radius:var(--radius-lg);background:var(--color-surface-1)}.outsiders-title{margin:0 0 var(--space-1) 0;font-size:var(--text-md);color:var(--color-warn);font-weight:700}.outsiders-desc{margin:0 0 var(--space-4) 0;color:var(--color-text-dim);font-size:var(--text-sm);max-width:65ch}.outsider-group{margin-top:var(--space-3)}.outsider-title{margin:0 0 var(--space-2) 0;font-family:var(--font-mono);font-size:var(--text-base);color:var(--color-text);font-weight:600;display:flex;align-items:baseline;gap:var(--space-2)}.outsider-tag{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500}.outsider-empty{margin:0;font-size:var(--text-sm);color:var(--color-text-dim)}.chord-group{display:flex;flex-direction:column;gap:var(--space-3)}.chord-group-title{margin:0;font-size:var(--text-lg);font-weight:700;font-family:var(--font-mono);color:var(--color-text);display:flex;align-items:baseline;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}.scale-card-list{display:flex;flex-direction:column;gap:var(--space-3)}.tier-section{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3)}.tier-section:first-child{margin-top:0}.tier-section-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) 0}.tier-section-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--color-text-dim)}.tier-section-count{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);padding:1px 7px;border-radius:var(--radius-pill);background:var(--color-surface-2);border:1px solid var(--color-border)}.tier-fit-section .tier-section-label{color:var(--color-accent);font-weight:800}.tier-compatible-section .tier-section-label{color:var(--color-success);font-weight:700}.tier-color-section .tier-section-label{color:var(--color-warn);font-weight:600}.tier-outside-section .tier-section-label{color:var(--color-text-dim);font-weight:500}.scale-card{background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);border-left-width:4px}.scale-card.tier-fit{border-color:var(--color-accent);border-left-color:var(--color-accent);border-left-width:6px}.scale-card.tier-compatible{border-left-color:var(--color-success);border-left-width:4px}.scale-card.tier-color{background:var(--color-warn-soft);border-color:var(--color-warn);border-left-color:var(--color-warn);border-left-width:3px}.scale-card.tier-outside{background:transparent;border:1px dashed var(--color-border-strong);border-left:3px dashed var(--color-danger);padding:var(--space-3);opacity:.65}.scale-card.tier-outside:hover{opacity:1}.scale-card.tier-outside .scale-name{font-weight:500}.scale-card.tier-outside .scale-theory{display:none}.scale-name:before{display:inline-block;margin-right:.4rem;font-weight:700;font-family:var(--font-mono)}.tier-fit .scale-name:before{content:"✓";color:var(--color-accent)}.tier-compatible .scale-name:before{content:"◐";color:var(--color-success)}.tier-color .scale-name:before{content:"★";color:var(--color-warn)}.tier-outside .scale-name:before{content:"⚠";color:var(--color-text-dim)}body[data-page=scales] .scale-name:before{content:none}.scale-card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-2)}.scale-card-subtitle{margin:0 0 var(--space-3) 0;color:var(--color-text-dim);font-style:italic;font-size:var(--text-base);line-height:var(--leading-relaxed);max-width:60ch}.scale-card-actions{display:inline-flex;align-items:center;gap:var(--space-2)}.scale-play{background:transparent;border:1px solid var(--color-border);color:var(--color-text-dim);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color var(--duration),border-color var(--duration),background var(--duration)}.scale-play:hover{color:var(--color-accent);border-color:var(--color-accent);background:var(--color-accent-soft)}.scale-play:active{transform:scale(.95)}.scale-play.is-loading{opacity:.5;cursor:progress;animation:scale-play-pulse .9s ease-in-out infinite}@keyframes scale-play-pulse{0%,to{opacity:.5}50%{opacity:.85}}@media(prefers-reduced-motion:reduce){.scale-play.is-loading{animation:none}}.scale-name{font-size:var(--text-base);font-weight:700;color:var(--color-text)}.tonic-alt{font-weight:400;color:var(--color-text-dim);font-size:.85em;margin-left:.15em}@media(max-width:480px){.tonic-alt{display:none}}.tier-badge{font-size:var(--text-xs);font-weight:600;padding:.15rem .55rem;border-radius:var(--radius-pill);white-space:nowrap}.tier-badge-fit{background:var(--color-accent-soft);color:var(--color-accent)}.tier-badge-compatible{background:var(--color-success-soft);color:var(--color-success)}.tier-badge-color{background:var(--color-warn-soft);color:var(--color-warn)}.tier-badge-outside{background:var(--color-danger-soft);color:var(--color-text-dim)}.scale-staff{margin:var(--space-2) 0 var(--space-3);overflow-x:auto}.scale-staff-alt{margin-top:calc(var(--space-1) * -1)}.scale-staff-label{font-size:var(--text-xs);font-weight:500;color:var(--color-text-dim);margin:var(--space-2) 0 calc(var(--space-1) * -1);display:none}body[data-staff=on] .scale-staff-label{display:block}.scale-staff svg{display:block;max-width:100%;height:auto}:root[data-theme=dark] .scale-staff svg path,:root[data-theme=dark] .scale-staff svg line,:root[data-theme=dark] .scale-staff svg rect,:root[data-theme=dark] .study-staff svg path,:root[data-theme=dark] .study-staff svg line,:root[data-theme=dark] .study-staff svg rect{stroke:#d8d8d8;fill:#d8d8d8}:root[data-theme=dark] .scale-staff svg text,:root[data-theme=dark] .study-staff svg text{fill:#e8e8e8}:root[data-theme=sepia] .scale-staff svg path,:root[data-theme=sepia] .scale-staff svg line,:root[data-theme=sepia] .scale-staff svg rect,:root[data-theme=sepia] .study-staff svg path,:root[data-theme=sepia] .study-staff svg line,:root[data-theme=sepia] .study-staff svg rect{stroke:#420c0c;fill:#420c0c}:root[data-theme=sepia] .scale-staff svg line,:root[data-theme=sepia] .study-staff svg line{stroke-width:.75}:root[data-theme=sepia] .scale-staff svg text,:root[data-theme=sepia] .study-staff svg text{fill:#420c0c}:root[data-theme=cyanotype] .scale-staff svg path,:root[data-theme=cyanotype] .scale-staff svg line,:root[data-theme=cyanotype] .scale-staff svg rect,:root[data-theme=cyanotype] .study-staff svg path,:root[data-theme=cyanotype] .study-staff svg line,:root[data-theme=cyanotype] .study-staff svg rect{stroke:var(--color-text);fill:var(--color-text)}:root[data-theme=cyanotype] .scale-staff svg line,:root[data-theme=cyanotype] .study-staff svg line{stroke-width:.75}:root[data-theme=cyanotype] .scale-staff svg text,:root[data-theme=cyanotype] .study-staff svg text{fill:var(--color-text)}:root[data-theme=cyanotype] .scale-card,:root[data-theme=cyanotype] .parent-card,:root[data-theme=cyanotype] .study-card,:root[data-theme=cyanotype] .theory-card{border-color:#ecdebc47;box-shadow:0 1px #00000040,0 4px 14px #00000038}:root[data-theme=cyanotype] .chord-chip,:root[data-theme=cyanotype] .theory-note,:root[data-theme=cyanotype] .construction-pill,:root[data-theme=cyanotype] .mode-notes span,:root[data-theme=cyanotype] .parent-card-notes span{border-color:#ecdebc38}:root[data-theme=cyanotype] .mode-notes span,:root[data-theme=cyanotype] .parent-card-notes span,:root[data-theme=cyanotype] .construction-pill,:root[data-theme=cyanotype] .theory-card-formula{background:#ecdebc0f}.study-staff-wrap{overflow-x:auto;overflow-y:visible;margin:var(--space-2) 0;padding:var(--space-4) 0;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;mask-image:linear-gradient(to right,transparent,black 16px,black calc(100% - 16px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 16px,black calc(100% - 16px),transparent)}.study-staff svg{display:block;height:auto}.scale-card.tier-outside .scale-staff,.scale-staff{display:none}body[data-staff=on] .scale-staff{display:block}body[data-staff=on] .scale-card.tier-outside .scale-staff,body[data-staff=on] .mode-notes,body[data-staff=on] .parent-card-notes,body[data-staff=on] .mode-characteristic{display:none}.mode-notes{display:flex;flex-wrap:wrap;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-base);margin-bottom:var(--space-3)}.mode-notes span{padding:.3rem .6rem;background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border);font-weight:600}.mode-notes span.is-characteristic{background:var(--color-warn-soft);border-color:var(--color-warn);color:var(--color-text);font-weight:700}.mode-characteristic{margin:0 0 var(--space-3) 0;padding:var(--space-2) var(--space-3);background:var(--color-surface-2);border-left:2px solid var(--color-warn);border-radius:0;font-size:var(--text-sm);line-height:var(--leading-relaxed)}.mode-characteristic strong{font-family:var(--font-mono);color:var(--color-warn);font-weight:700;margin-right:var(--space-1)}.mode-desc{margin:0;font-size:var(--text-sm);color:var(--color-text-dim);line-height:var(--leading-relaxed)}.scale-theory{margin-top:var(--space-3);border-top:1px solid var(--color-border);padding-top:var(--space-2)}.scale-theory summary{cursor:pointer;font-size:var(--text-xs);color:var(--color-text-dim);list-style:none;padding:var(--space-1) 0;user-select:none;font-weight:600}.scale-theory summary::-webkit-details-marker{display:none}.scale-theory summary:before{content:"▸";display:inline-block;color:var(--color-accent);margin-right:var(--space-1);transition:transform var(--duration)}.scale-theory[open] summary:before{transform:rotate(90deg)}.scale-theory summary:hover{color:var(--color-text)}.theory-body{padding:var(--space-3) 0 var(--space-1) 0;display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--text-sm)}.theory-intro{margin:0;color:var(--color-text);line-height:var(--leading-relaxed)}.theory-intro code{font-family:var(--font-mono);font-size:var(--text-xs);padding:.1rem .35rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-warn);font-weight:600}.theory-section{display:flex;flex-direction:column;gap:var(--space-2)}.theory-h{margin:0;font-size:var(--text-xs);font-weight:600;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.05em}.theory-row{display:flex;flex-wrap:wrap;gap:var(--space-1)}.theory-note{display:inline-flex;align-items:baseline;gap:var(--space-1);padding:.2rem .55rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.theory-note strong{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text);font-weight:600}.theory-deg{font-size:var(--text-xs);color:var(--color-text-muted)}.theory-clash{border-color:var(--color-danger)}.theory-clash .theory-deg{color:var(--color-text-dim)}.theory-clash .theory-deg:before{content:"⚠ "}.theory-char{border-color:var(--color-warn)}.theory-char strong{color:var(--color-warn)}.theory-tip{margin:0;color:var(--color-text-dim);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.construction-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.construction-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;min-width:4.5em}.construction-values{display:flex;flex-wrap:wrap;gap:var(--space-1)}.construction-pill{display:inline-block;padding:.15rem .45rem;background:var(--color-surface-2);border:1px solid var(--color-border);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text);font-weight:600;min-width:1.6em;text-align:center}.construction-step{color:var(--color-text-dim);font-weight:500}.theory-page{display:flex;flex-direction:column;gap:var(--space-5)}.theory-page-intro{margin:0;color:var(--color-text-dim);font-size:var(--text-sm)}.theory-section-group{display:flex;flex-direction:column;gap:var(--space-3)}.theory-section-title{margin:0;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em}.theory-card-list{display:flex;flex-direction:column;gap:var(--space-3)}.theory-card{background:var(--color-surface-1);border:1px solid var(--color-border);border-left:4px solid var(--color-accent);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.theory-card-head{display:flex;flex-direction:column;gap:var(--space-1)}.theory-card-title{margin:0;font-size:var(--text-lg);font-weight:700;color:var(--color-text)}.theory-card-def{margin:0;color:var(--color-text-dim);font-style:italic}.theory-card-body{margin:0;color:var(--color-text);line-height:var(--leading-relaxed)}.theory-card-formula{margin:0;padding:var(--space-2) var(--space-3);background:var(--color-surface-2);border:1px solid var(--color-border);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text)}.theory-card-try{display:flex;flex-wrap:wrap;gap:var(--space-2)}.theory-try{font-family:var(--font-mono);font-size:var(--text-sm);padding:var(--space-2) var(--space-3);background:transparent;color:var(--color-accent);border:1px solid var(--color-accent);cursor:pointer;transition:background var(--duration),color var(--duration)}.theory-try:hover{background:var(--color-accent);color:var(--color-on-accent)}.app-footer{padding:var(--space-5);text-align:center;color:var(--color-text-muted);font-size:var(--text-xs);border-top:1px solid var(--color-border)}.shortcuts-hint{display:none;margin-top:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.02em}@media(hover:hover)and (min-width:721px){.shortcuts-hint{display:block}}@media(max-width:720px){.app-header{padding:var(--space-3) var(--space-4)}.logo{font-size:var(--text-md)}.app-main,.parent-card.is-hero{padding:var(--space-4)}.parent-card.is-hero .parent-card-title{font-size:var(--text-xl)}.scale-card,.chord-input-section{padding:var(--space-3)}.page-nav{gap:var(--space-4)}.page-nav button{flex:1;text-align:center;padding:var(--space-3) var(--space-2)}}@media(max-width:480px){.page-nav{flex-wrap:wrap;gap:0}.page-nav button{flex:1 0 33.33%;text-align:center;padding:var(--space-2) 0;font-size:var(--text-sm)}.app-header{padding:var(--space-3)}.logo-mark{width:1.2em;height:1.2em}.app-main{padding:var(--space-3)}.chord-builder{gap:var(--space-2)}.chord-builder-group{width:100%;justify-content:space-between}.chord-builder-group button{flex:1;min-height:44px;min-width:0}.chord-builder-quality{width:100%;min-height:44px}.chord-preview{flex-basis:100%;text-align:center;order:-1;padding:var(--space-2) 0;font-size:var(--text-lg);min-width:0}.chord-add{flex-basis:100%;margin-left:0;padding:var(--space-3);min-height:44px;font-size:var(--text-base)}#scales-tonic-group,#studies-tonic-group{flex-wrap:wrap;gap:2px}#scales-tonic-group button,#studies-tonic-group button{flex:0 0 calc(16.66% - 2px);min-height:44px}.chord-chip-move,.chord-chip-remove,.chord-chip-play{min-width:44px;min-height:44px;padding:var(--space-2)}.scale-play,.study-play{width:44px;height:44px;min-width:44px;min-height:44px}.settings-btn{min-width:44px;min-height:44px}.studies-field,.studies-field--bpm{min-width:0;flex-basis:100%}.studies-bpm-readout{font-size:var(--text-base)}.study-staff-wrap{max-height:60vh;overflow-y:auto}.parent-card.is-hero .parent-card-title{font-size:var(--text-lg)}.parent-card-notes{font-size:var(--text-sm)}.settings-drawer{width:100%}.tier-section{margin-top:var(--space-2)}.theory-body,.drawer-body .toggle-caption{font-size:var(--text-xs)}.page-nav{gap:0}.page-nav button{padding:var(--space-3) 0;min-height:44px;font-size:var(--text-sm);letter-spacing:0}.theory-card-try{flex-direction:column}.theory-try{width:100%;text-align:center}.theory-card-formula{font-size:var(--text-xs);overflow-wrap:anywhere;word-break:break-word}.harmony-meta{gap:var(--space-2)}.chord-chip-play{padding:var(--space-1)}.chip-row{flex-direction:column;align-items:stretch;gap:var(--space-2)}.chip-cell{width:100%}.chord-chip{width:100%;justify-content:space-between}.chord-chip-label{flex:1;text-align:center;font-size:var(--text-md);padding:0 var(--space-2)}.cadence-arrow{margin-top:0;align-self:center;text-align:center;font-size:var(--text-lg);display:inline-block;transform:rotate(90deg);transform-origin:center}.scale-card-subtitle{font-size:var(--text-sm)}.theory-card{padding:var(--space-3)}.theory-page-intro,.theory-section-title{font-size:var(--text-xs)}.app-footer{padding:var(--space-4);font-size:var(--text-xs)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.cycle-page{display:grid;gap:var(--space-5)}.cycle-wrap{display:flex;justify-content:center}.cycle-svg{width:100%;max-width:420px;height:auto;color:var(--color-text)}.cycle-ring{fill:none;stroke:var(--color-border);stroke-width:1}.cycle-slice{fill:transparent;stroke:var(--color-border);stroke-width:1;cursor:pointer;transition:fill var(--duration)}.cycle-slice:hover,.cycle-slice:focus-visible{fill:var(--color-surface-2, rgba(255, 255, 255, .06))}.cycle-slice:focus-visible{outline:none;stroke:var(--color-accent, var(--color-text));stroke-width:3;paint-order:stroke}.cycle-slice.is-detected{fill:var(--color-accent, var(--color-text));fill-opacity:.14}.cycle-slice.is-detected:hover,.cycle-slice.is-detected:focus-visible{fill-opacity:.26}.cycle-slice.is-focused{fill:var(--color-text);fill-opacity:.92}.cycle-slice.is-fan{fill:var(--color-text);fill-opacity:.08}.cycle-slice.is-fan:hover,.cycle-slice.is-fan:focus-visible{fill-opacity:.16}.cycle-sig{fill:var(--color-text-dim);font-size:11px;letter-spacing:-1px;font-family:var(--font-mono, monospace);pointer-events:none;user-select:none}.cycle-roman{fill:var(--color-accent, var(--color-text));font-family:var(--font-mono, monospace);font-size:13px;font-weight:700;pointer-events:none;user-select:none}.cycle-roman--inner{font-size:11px}.cycle-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:var(--space-3)}.cycle-action{background:transparent;border:1px solid var(--color-border, currentColor);color:var(--color-text);padding:.45em .9em;font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;font-family:var(--font-mono, monospace)}.cycle-action:hover{background:var(--color-surface-2, transparent)}.cycle-action--scales{background:var(--color-text);color:var(--color-bg)}.cycle-action--scales:hover{opacity:.85;background:var(--color-text)}.cycle-action--clear{color:var(--color-text-dim);border-style:dashed}.cycle-action--link{margin-top:var(--space-3);text-transform:none;letter-spacing:.02em;color:var(--color-text-dim)}.cycle-action--link:hover{color:var(--color-text)}@media(max-width:480px){.cycle-action--link{min-height:44px}}.drawer-support{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.support-link{display:inline-block;color:var(--color-text);text-decoration:none;font-family:var(--font-mono, monospace);font-size:var(--text-sm);letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--color-border);padding:.5em .9em}.support-link:hover{background:var(--color-text);color:var(--color-bg)}.support-link:focus-visible{outline:2px solid var(--color-accent, var(--color-text));outline-offset:2px}.support-note{margin:var(--space-2) 0 0;color:var(--color-text-dim);font-size:var(--text-xs);line-height:var(--leading-relaxed)}.theme-swatch{display:inline-block;width:10px;height:10px;border:1px solid var(--color-border);margin-right:.4em;vertical-align:middle}.theme-swatch[data-swatch=light]{background:#fdfcfa}.theme-swatch[data-swatch=sepia]{background:#d8c89a}.theme-swatch[data-swatch=cyanotype]{background:#16365c}.theme-swatch[data-swatch=dark]{background:#0e0e0e}.midi-indicator{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono, monospace);font-size:.7rem;letter-spacing:.08em;padding:.25em .55em;border:1px solid var(--color-border);color:var(--color-text-dim);margin-right:var(--space-2)}.midi-indicator:before{content:"";display:inline-block;width:6px;height:6px;background:#2db84a;border-radius:50%;box-shadow:0 0 6px #2db84a}.hint-toast{position:fixed;left:50%;bottom:calc(110px + var(--space-3));transform:translate(-50%);background:var(--color-text);color:var(--color-bg);font-size:var(--text-sm);padding:.6em 1em;border:1px solid var(--color-border);max-width:90vw;text-align:center;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s var(--duration),transform .2s var(--duration)}.hint-toast.is-visible{opacity:1;transform:translate(-50%) translateY(-4px)}body:not(.has-transport) .hint-toast{bottom:var(--space-5)}.hint-toast.is-visible{pointer-events:auto}.hint-toast-action{display:inline-block;margin-left:var(--space-2);padding:.2em .7em;background:transparent;color:inherit;font:inherit;font-weight:600;border:1px solid currentColor;cursor:pointer}.hint-toast-action:hover{background:var(--color-bg);color:var(--color-text)}.hint-toast-action:focus-visible{outline:2px solid currentColor;outline-offset:2px}@media(max-width:480px){.hint-toast-action{min-height:44px;padding:.4em 1em}}.cycle-label{fill:var(--color-text);font-family:var(--font-mono, monospace);font-weight:600;pointer-events:none;user-select:none}.cycle-label--major{font-size:18px}.cycle-label--minor{font-size:13px;fill:var(--color-text-dim)}.cycle-label.is-focused{fill:var(--color-bg)}.cycle-info{text-align:center;font-size:var(--text-sm)}.cycle-detected{margin:0 0 var(--space-3)}.cycle-relations{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-3);margin:0}.cycle-relations>div{border:1px solid var(--color-border);padding:var(--space-2)}.cycle-relations dt{font-size:var(--text-xs);color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-1)}.cycle-relations dd{margin:0;font-weight:700;font-size:var(--text-md)}.cycle-hint{color:var(--color-text-dim);font-size:var(--text-sm)}.cycle-guide{border-top:1px solid var(--color-border);padding-top:var(--space-5)}.cycle-guide-title{margin:0 0 var(--space-3);font-size:var(--text-lg);letter-spacing:-.01em}.cycle-guide-intro{margin:0 0 var(--space-4);color:var(--color-text-dim);line-height:var(--leading-relaxed);max-width:60ch}.cycle-guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4)}.cycle-guide-item{border-left:2px solid var(--color-border);padding-left:var(--space-3)}.cycle-guide-item h3{margin:0 0 var(--space-2);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text)}.cycle-guide-item p{margin:0;color:var(--color-text-dim);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.key-badge--link{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);margin:0 calc(-1 * var(--space-2));background:transparent;border:1px solid transparent;border-radius:0;font:inherit;font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);cursor:pointer;text-align:left}.key-badge--link strong{text-decoration:underline dotted;text-decoration-color:var(--color-text-muted);text-decoration-thickness:1px;text-underline-offset:3px}.key-badge-arrow{font-size:var(--text-sm);color:var(--color-text-muted);margin-left:var(--space-1);transition:transform .12s ease,color .12s ease}.key-badge--link:hover strong,.key-badge--link:focus-visible strong{color:var(--color-accent, var(--color-text));text-decoration-color:var(--color-accent, var(--color-text));text-decoration-style:solid}.key-badge--link:hover .key-badge-arrow,.key-badge--link:focus-visible .key-badge-arrow{color:var(--color-accent, var(--color-text));transform:translate(2px)}.key-badge--link:focus-visible{outline:2px solid var(--color-accent, var(--color-text));outline-offset:2px}@media(max-width:480px){.key-badge--link{min-height:44px;margin:0;padding:var(--space-2) var(--space-2)}}@media(prefers-reduced-motion:reduce){.key-badge-arrow{transition:none}.key-badge--link:hover .key-badge-arrow,.key-badge--link:focus-visible .key-badge-arrow{transform:none}}body:has(#transport-bar:not([hidden])),body.has-transport{padding-bottom:calc(var(--transport-h, 110px) + var(--space-4))}.preview-badge{display:none;align-items:center;align-self:center;padding:0 var(--space-2);min-height:22px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text);border:1px solid var(--color-border-strong);background:var(--color-accent-soft);white-space:nowrap;user-select:none}.preview-badge.is-visible{display:inline-flex}.theory-card{scroll-margin-top:var(--space-6)}.theory-card:focus{outline:none}.theory-card:focus-visible{outline:2px solid var(--color-accent, var(--color-text));outline-offset:2px}.theory-try--cycle{color:var(--color-text-dim);border-style:dashed}.theory-try--cycle:hover,.theory-try--cycle:focus-visible{color:var(--color-text);border-style:solid}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format("woff2-variations");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(data:font/woff2;base64,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) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-cyrillic-wght-normal-D73BlboJ.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-greek-wght-normal-Bw9x6K1M.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-vietnamese-wght-normal-Bt-aOZkq.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-latin-ext-wght-normal-DBQx-q_a.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-latin-wght-normal-B9CIFXIH.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}