@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap";html,body,#root{min-height:100%}body{min-width:320px;margin:0}:root{--bg:#f3f0e7;--panel:#fff;--panel2:#fbf7ef;--text:#1f1b16;--muted:#5b5f6a;--grid:#1f1b1614;--shadow:0 18px 38px #221a1224;--border-subtle:#00000014;--border-strong:#0000001f;--border-emphasis:#00000047;--border-faint:#0000001a;--border-dim:#0000000d;--surface-soft:#fff9;--surface:#ffffffb3;--surface-muted:#ffffffbf;--surface-strong:#ffffffd9;--surface-faint:#ffffffa6;--surface-blank:#ffffff59;--text-strong:#1f1b16cc;--text-soft:#1e1c18b3;--text-faint:#1f1b1699;--ring:0 0 0 4px #00000014;--control-highlight:inset 0 1px 0 #ffffffb3;--header-grad:linear-gradient(180deg,#ffffffb3,transparent);--page-pattern:radial-gradient(circle at 12% 16%,#ffffffd9,transparent 52%),radial-gradient(circle at 88% 10%,#d0e1ff73,transparent 46%),repeating-linear-gradient(90deg,#00000009 0 1px,transparent 1px 36px),repeating-linear-gradient(0deg,#00000008 0 1px,transparent 1px 36px);--positive:#2f6a4f;--quality-major:#7a4a14;--quality-minor:#2f5a82;--quality-dominant:#9a551e;--quality-diminished:#5b4d45;--quality-half-diminished:#4a5662;--quality-augmented:#2f6a4f;--chord-ring:0 0 0 3px #a05c1873;--cof-major-ring:#aa703c59;--cof-minor-ring:#4e76a559;--cof-dim-ring:#625c544d;--cof-major-chip:#ffe8d0b3;--cof-minor-chip:#d2e2f5b3;--cof-dim-chip:#f4eee6cc;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page-pad-x:28px;--page-pad-y:18px;--panel-pad:14px;--string-label-w:56px;--fret-min:34px;--fret-h:36px;--fret-gap:6px}[data-theme=dark]{--bg:#0b0d12;--panel:#141826;--panel2:#101422;--text:#e9ecf3;--muted:#aab2c5;--grid:#ffffff14;--shadow:0 18px 38px #00000059;--border-subtle:#ffffff1a;--border-strong:#ffffff29;--border-emphasis:#ffffff52;--border-faint:#ffffff1f;--border-dim:#ffffff0f;--surface-soft:#ffffff0a;--surface:#ffffff0f;--surface-muted:#ffffff14;--surface-strong:#ffffff1f;--surface-faint:#ffffff0d;--surface-blank:#ffffff05;--text-strong:#e9ecf3d9;--text-soft:#e9ecf3b3;--text-faint:#e9ecf38c;--ring:0 0 0 4px #ffffff1a;--control-highlight:inset 0 1px 0 #ffffff1f;--header-grad:linear-gradient(180deg,#ffffff14,transparent);--page-pattern:radial-gradient(circle at 12% 16%,#505c7a47,transparent 52%),radial-gradient(circle at 88% 10%,#232a4299,transparent 46%),repeating-linear-gradient(90deg,#ffffff0d 0 1px,transparent 1px 36px),repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 36px);--positive:#7ad7a8;--quality-major:#e0b167;--quality-minor:#7fb6f0;--quality-dominant:#f3a463;--quality-diminished:#b5b1a3;--quality-half-diminished:#b0c0cf;--quality-augmented:#8fd1b0;--chord-ring:0 0 0 3px #e7b96a99;--cof-major-ring:#e2aa5c4d;--cof-minor-ring:#78aae64d;--cof-dim-ring:#c6c6c633;--cof-major-chip:#5b422559;--cof-minor-chip:#2e425c59;--cof-dim-chip:#3a3a3a59;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{color:var(--text);background:var(--bg);margin:0;padding:0;font-family:Space Grotesk,IBM Plex Sans,Noto Sans,Trebuchet MS,sans-serif}body{background-image:var(--page-pattern);background-attachment:fixed;min-width:1080px;line-height:1.4}.mono{font-family:IBM Plex Mono,Fira Mono,Cascadia Mono,Consolas,Courier New,monospace}.app{flex-direction:column;max-width:1480px;min-height:100vh;margin:0 auto;display:flex}.header{padding:20px var(--page-pad-x)14px;border-bottom:1px solid var(--border-subtle);background:var(--header-grad);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.titleBlock{margin-bottom:2px}.title{letter-spacing:.2px;font-size:22px;font-weight:700}.subtitle{color:var(--muted);margin-top:6px;font-size:13px}.controls{grid-template-columns:repeat(2,minmax(200px,1fr));gap:12px;width:100%;display:grid}.control{gap:6px;display:grid}.controlLabel{color:var(--muted);letter-spacing:.3px;text-transform:uppercase;font-size:12px}select{background:var(--panel);color:var(--text);border:1px solid var(--border-strong);box-shadow:var(--control-highlight);border-radius:10px;padding:9px 12px;font-size:14px}.main{padding:var(--page-pad-y)var(--page-pad-x)28px;grid-template-columns:minmax(0,1fr);grid-template-areas:"circle""fretboard";gap:18px;display:grid}.panel{background:linear-gradient(180deg,var(--panel)0%,var(--panel2)100%);border:1px solid var(--border-subtle);padding:var(--panel-pad);box-shadow:var(--shadow);border-radius:16px}.panelHeader{margin-bottom:10px}.panelTitle{text-transform:uppercase;letter-spacing:.6px;font-size:15px;font-weight:700}.panelSubtitle{color:var(--muted);margin-top:4px;font-size:13px}.chordFocusBar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;display:flex}.chordFocusText{color:var(--muted);font-size:12px}.chordFocusName{color:var(--text);font-weight:700}.chordFocusClear{border:1px solid var(--border-strong);background:var(--surface-muted);color:var(--text);letter-spacing:.2px;cursor:pointer;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700}.cagedSection{gap:8px;margin-top:12px;display:grid}.cagedHeader{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.cagedTitle{text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-size:12px}.cagedSubtitle{color:var(--text-soft);font-size:12px}.cagedRow{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;display:grid}.cagedButton{border:1px solid var(--border-subtle);background:var(--surface);color:var(--text);text-align:left;cursor:pointer;font:inherit;border-radius:12px;gap:4px;padding:8px 10px;display:grid}.cagedButton.isSelected{border-color:var(--border-emphasis);box-shadow:var(--ring)}.cagedButton:focus-visible{border-color:var(--border-emphasis);box-shadow:var(--ring);outline:none}.cagedShape{font-size:13px;font-weight:800}.cagedRange{color:var(--text-soft);font-size:11px}.cagedFrets{color:var(--muted);font-size:11px}.headerActions{align-items:center;gap:8px;display:flex}.themeToggle{border:1px solid var(--border-strong);background:var(--surface-muted);color:var(--text);letter-spacing:.2px;cursor:pointer;border-radius:999px;padding:6px 12px;font-size:11px;font-weight:700}.cofPanel{grid-area:circle}.fretboardPanel{grid-area:fretboard/1/fretboard/-1;width:100%}.teacherHintDetails{margin-top:10px}.teacherHintDetails summary{cursor:pointer;color:var(--muted);-webkit-user-select:none;user-select:none;font-size:12px}.chordSection{margin-top:10px}.chordSectionTitle{color:var(--muted);margin:0 0 8px;font-size:12px}.chordStrip{flex-wrap:wrap;gap:8px;display:flex}.chordPill{border:1px solid var(--border-subtle);background:var(--surface-soft);border-radius:12px;min-width:120px;padding:8px 10px}.chordPillTop{color:var(--text-soft);letter-spacing:.2px;font-size:11px;font-weight:800}.chordPillMain{margin-top:6px;font-size:13px;font-weight:800}.cofLayout{grid-template-columns:minmax(320px,1fr);align-items:start;gap:14px;display:grid}.cofCircleWrap{justify-items:center;gap:10px;display:grid}.cofCircle{border:1px solid var(--border-subtle);background:var(--surface-soft);border-radius:999px;width:500px;height:500px;position:relative}.cofCircle:before,.cofCircle:after{content:"";border:1px solid var(--cof-major-ring);pointer-events:none;z-index:0;border-radius:999px;position:absolute;inset:40px}.cofCircle:after{border-style:dashed;border-color:var(--cof-minor-ring);inset:110px}.cofRingDim{border:1px dotted var(--cof-dim-ring);pointer-events:none;z-index:0;border-radius:999px;position:absolute;inset:164px}.cofKey{border:1px solid var(--border-strong);background:var(--surface);width:62px;height:62px;color:var(--text);cursor:pointer;text-align:center;z-index:1;border-radius:999px;grid-template-rows:1fr 1fr;align-content:center;justify-items:center;gap:2px;padding:6px 4px;font-size:12px;font-weight:800;display:grid;position:absolute;transform:translate(-50%,-50%)}.cofKeyMajor{border-color:var(--cof-major-ring);background:var(--cof-major-chip)}.cofKeyMinor{border-color:var(--cof-minor-ring);background:var(--cof-minor-chip);width:52px;height:52px;font-size:11px}.cofKeyDim{border-color:var(--cof-dim-ring);background:var(--cof-dim-chip);cursor:pointer;gap:1px;width:38px;height:38px;padding:4px 3px;font-size:9px}.cofKeyDim .cofKeyLabel{font-size:10px}.cofKeyDim .cofKeyChord{padding:2px 3px;font-size:8px}.cofKeyMinor .cofKeyChord{padding:2px 4px;font-size:9px}.cofKeyMinor .cofKeyLabel{font-size:11px}.cofKey.isSelected{border-color:var(--border-emphasis);box-shadow:var(--ring)}.cofKey.isOut{opacity:.45}.cofKeyLabel{font-size:12px;line-height:1}.cofKeyChord{border:1px solid var(--border-subtle);background:var(--surface);min-height:14px;color:var(--text-strong);border-radius:999px;align-items:baseline;gap:4px;padding:2px 6px;font-size:10px;font-weight:700;line-height:1;display:inline-flex}.cofKeyChord.isEmpty{opacity:0;background:0 0;border:0;padding:0}.cofKeyRoman{letter-spacing:.3px;font-size:9px}.cofCenter{border:1px solid var(--border-strong);background:var(--surface-strong);text-align:center;z-index:2;border-radius:999px;place-items:center;width:96px;height:96px;padding:10px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cofCenterKey{font-size:16px;font-weight:900}.cofCenterLabel{color:var(--muted);margin-top:2px;font-size:10px;font-weight:700}.cofKeyList{flex-wrap:wrap;justify-content:center;gap:8px;display:none}.cofKeyListSection{gap:6px;width:100%;display:grid}.cofKeyListTitle{text-transform:uppercase;letter-spacing:.3px;color:var(--muted);font-size:11px}.cofKeyListRow{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.cofKeyListBtn{border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;padding:8px 10px;font-size:12px;font-weight:800}.cofKeyListBtn.isSelected{border-color:var(--border-emphasis)}.cofSectionTitle{color:var(--muted);margin-top:2px;font-size:12px}.cofModesBlock{gap:10px;margin-top:14px;display:grid}.cofModesBlock .modeStrip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;display:grid}.cofModesBlock .modePill{min-width:0;padding:10px 12px}.cofModesBlock .modePillTop{font-size:12px}.cofModesBlock .modePillMain{font-size:14px}.cofChordBlock{gap:12px;margin-top:16px;display:grid}.cofInfoHeader{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.cofInfoSubtitle{color:var(--muted);margin-top:4px;font-size:12px}.cofQualityLegend{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;display:flex}.cofQualityLabel{text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin-right:4px;font-size:11px}.chordMatrix{gap:8px;width:100%;padding-top:4px;display:grid}.chordMatrixHeader,.chordMatrixRow{grid-template-columns:minmax(72px,90px) repeat(7,minmax(0,1fr));align-items:stretch;gap:8px;display:grid}.chordMatrixCorner{min-height:1px}.chordMatrixHeaderCell{border:1px solid var(--border-subtle);background:var(--surface);text-align:center;border-radius:12px;padding:6px 6px 8px}.chordMatrixHeaderRoman{font-size:12px;font-weight:800}.chordMatrixHeaderDegree{color:var(--muted);margin-top:2px;font-size:10px}.chordMatrixRowLabel{text-transform:uppercase;letter-spacing:.3px;color:var(--muted);align-self:center;font-size:11px}.chordMatrixCell{border:1px solid var(--border-subtle);background:var(--surface);text-align:center;appearance:none;cursor:pointer;font:inherit;border-radius:12px;justify-items:center;gap:6px;padding:8px 6px;display:grid}.chordMatrixCell.isSelected{border-color:var(--border-emphasis);box-shadow:var(--ring)}.chordMatrixCell:focus-visible{border-color:var(--border-emphasis);box-shadow:var(--ring);outline:none}.chordMatrixChord{overflow-wrap:anywhere;font-size:13px;font-weight:800}.cofEmpty{color:var(--muted);padding:8px 0 4px;font-size:12px}.qualityTag{border:1px solid var(--border-strong);background:var(--surface-muted);letter-spacing:.2px;border-radius:999px;padding:2px 6px;font-size:10px;font-weight:700;line-height:1}.quality-major{color:var(--quality-major)}.quality-minor{color:var(--quality-minor)}.quality-dominant{color:var(--quality-dominant)}.quality-diminished{color:var(--quality-diminished)}.quality-half-diminished{color:var(--quality-half-diminished)}.quality-augmented{color:var(--quality-augmented)}.modeStrip{flex-wrap:wrap;gap:8px;display:flex}.modePill{border:1px solid var(--border-subtle);background:var(--surface-soft);text-align:left;cursor:pointer;min-width:110px;font:inherit;border-radius:12px;padding:8px 10px}.modePill.isSelected{border-color:var(--border-emphasis);box-shadow:var(--ring)}.modePill:focus-visible{border-color:var(--border-emphasis);box-shadow:var(--ring);outline:none}.modePillTop{color:var(--text-soft);letter-spacing:.2px;font-size:11px;font-weight:800}.modePillMain{margin-top:6px;font-size:13px;font-weight:800}.degreeGrid{grid-template-columns:120px 1fr;align-items:center;gap:8px;display:grid}.degreeGridHeader{color:var(--muted);padding:6px 8px;font-size:12px}.degreeRow{display:contents}.degreeCell{border:1px solid var(--border-subtle);background:var(--surface-faint);border-radius:12px;padding:10px}.degreeTag{text-align:center;font-weight:700}.noteCell{font-size:15px;font-weight:600}.teacherHint{color:var(--muted);margin-top:10px;font-size:13px}.fretboardActions{justify-items:end;gap:4px;display:grid}.fretboardFooter{justify-content:flex-end;align-items:center;margin-top:8px;display:flex}.fretboardFooterSpacer{flex:1}.tuningReset{border:1px solid var(--border-strong);background:var(--surface-muted);color:var(--text);letter-spacing:.2px;cursor:pointer;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:700}.tuningToast{min-height:14px;color:var(--positive);opacity:0;font-size:11px;transition:opacity .18s}.tuningToast.isVisible{opacity:1}.fretboardScroll{padding-bottom:8px;overflow-x:auto}.fretboard{width:100%}.fretHeader{grid-template-columns:var(--string-label-w)repeat(24,minmax(var(--fret-min),1fr));gap:var(--fret-gap);align-items:center;margin-bottom:8px;display:grid}.stringLabelSpacer{height:1px}.fretNumber{text-align:center;color:var(--muted);border-bottom:1px solid var(--border-faint);flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:11px;display:flex;position:relative}.inlayMark{opacity:.6;font-size:10px;display:block}.fretNumberValue{line-height:1}.stringRow{grid-template-columns:var(--string-label-w)repeat(24,minmax(var(--fret-min),1fr));gap:var(--fret-gap);align-items:center;margin:6px 0;display:grid}.stringLabel{text-align:center;color:var(--muted);justify-content:center;align-items:center;font-size:12px;display:flex}.stringLabelRow{align-items:center;gap:6px;display:inline-flex}.stringTuningSelect{border:1px solid var(--border-subtle);background:var(--surface);color:var(--text);cursor:pointer;border-radius:8px;min-width:42px;padding:2px 6px;font-size:12px;font-weight:700}.stringTuningSelect:focus-visible{border-color:var(--border-emphasis);box-shadow:var(--ring);outline:none}.fretCell{height:var(--fret-h);border:1px solid var(--border-subtle);background:var(--surface-faint);border-radius:12px;place-items:center;display:grid}.fretCell.blank{background:var(--surface-blank);border-color:var(--border-dim);opacity:.55}.fretCell.chordOnly{background:var(--surface-muted);letter-spacing:.2px;flex-direction:column;align-items:center;gap:2px;font-weight:800;display:flex}.fretCell.isChordTone{border-color:var(--border-emphasis);box-shadow:var(--chord-ring);filter:saturate(1.35)brightness(1.08)}.fretCell.note{letter-spacing:.2px;flex-direction:column;align-items:center;gap:2px;font-weight:800;display:flex}.fretboard.hasChordFocus .fretCell.note:not(.isChordTone){opacity:.38;filter:saturate(.6)}.noteText{font-size:12px}.noteDegree{color:var(--text-soft);font-size:10px}.noteDegree.chordDegree{color:var(--text-strong)}.degree-1{background:#d93e2638}.degree-2{background:#dd873c2e}.degree-3{background:#e2c6362e}.degree-4{background:#46b9462e}.degree-5{background:#3997c62e}.degree-6{background:#4d58cb2e}.degree-7{background:#ac4dcb2e}.isRoot{filter:saturate(1.15)brightness(1.03)contrast(1.05);border-color:var(--border-emphasis)}