body.chord-page { --chord-ink: #28312f; --chord-muted: #626d66; --chord-line: #ccd3cc; background: #f4f5f2; color: var(--chord-ink); }
.chord-page.night { --chord-ink: #ecf0e9; --chord-muted: #a8b4ac; --chord-line: #414b46; background: #181d1b; color: var(--chord-ink); }
.chord-page main { height: 100svh; min-height: 940px; }
.mode-switch.style-switch { grid-template-columns: repeat(2, 1fr); }
#light-params.inactive { opacity: .4; }
@media (max-width: 700px) { body.chord-page main { min-height: 1100px; } }
.chord-heading { position: absolute; top: 110px; left: 5%; right: 5%; display: flex; justify-content: space-between; align-items: end; gap: 20px; pointer-events: none; }
.eyebrow, .form-name { font-family: Consolas, monospace; font-size: 10px; color: var(--chord-muted); }
.chord-heading h1 { font-size: 40px; margin: 16px 0 0; line-height: 1.2; }.chord-heading h1 span { display: inline; font-size: 15px; margin-left: 14px; color: var(--chord-muted); }
.chord-stage { position: absolute; left: 0; right: 320px; top: 205px; bottom: 65px; }
.chord-stage canvas { cursor: crosshair; }.chord-stage p { padding: 30px; }
.chord-controls { position: absolute; right: 5%; top: 245px; width: 248px; padding: 0; color: var(--chord-ink); }
.chord-controls .controls-top { border-bottom: 1px solid var(--chord-line); padding-bottom: 12px; margin-bottom: 20px; }.chord-controls .controls-top > span { font-size: 8px; }
.chord-controls fieldset { padding: 0; margin: 0 0 22px; border: 0; min-width: 0; }.chord-controls legend { font-size: 11px; margin-bottom: 10px; color: var(--chord-muted); }
.mode-switch { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--chord-line); gap: 4px; }.mode-switch button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--chord-muted); padding: 9px 0; cursor: pointer; font: inherit; font-size: 12px; }.mode-switch button[aria-pressed="true"] { color: var(--chord-ink); border-color: #647e4b; }
.chord-controls label { grid-template-columns: 34px minmax(0, 1fr) 32px; gap: 10px; margin-top: 14px; }.chord-controls .color-field { margin-top: 24px; margin-bottom: 18px; position: relative; }.chord-controls .palette { margin: 6px 0 0; padding-left: 3px; gap: 14px; }
.chord-controls .swatch.ink { background: #4667a2; }.chord-controls .swatch[aria-pressed="true"] { border-color: #fff; outline: 2px solid var(--chord-ink); }
.chord-controls .toggle { display: flex; align-items: center; gap: 8px; font-size: 11px; }.chord-controls .toggle input { accent-color: #647e4b; width: 15px; height: 15px; margin: 0; }.color-field .toggle { position: absolute; right: 0; bottom: 3px; margin: 0; }.pointer-toggle { padding-top: 16px; border-top: 1px solid var(--chord-line); }
.night .icon-control::after { filter: invert(1); }.chord-footer { position: absolute; left: 5%; right: 5%; bottom: 24px; border-top: 1px solid var(--chord-line); padding-top: 14px; display: flex; justify-content: space-between; gap: 12px; font: 10px Consolas, monospace; color: var(--chord-muted); }
.chord-page :focus-visible { outline-color: #718b53; }
@media (max-width: 1000px) and (min-width: 701px) { .chord-controls { right: 24px; width: 224px; }.chord-stage { right: 260px; } }
@media (max-width: 700px) { .chord-page main { min-height: 930px; }.chord-heading { top: 92px; left: 24px; right: 24px; }.chord-heading h1 { font-size: 32px; }.chord-heading h1 span { font-size: 12px; margin-left: 8px; }.form-name { display: none; }.chord-stage { top: 165px; bottom: auto; height: 300px; left: 0; right: 0; }.chord-controls { top: 485px; left: 24px; right: 24px; width: auto; }.chord-controls .controls-top { margin-bottom: 12px; padding-bottom: 8px; }.chord-controls fieldset { margin-bottom: 12px; }.chord-controls .color-field { margin-top: 18px; }.chord-footer { bottom: 20px; left: 24px; right: 24px; font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .chord-page * { scroll-behavior: auto; } }