:root { --page: #000; --panel: #191c21; --control: #252b34; --ink: #eef1f5; --label: #bac3cf; --muted: #98a5b6; --edge: #303640; --button-edge: #414b59; --accent: #23476d; --accent-ink: #fff; --hover: #354255; --warning: #ffc976; }
html[data-curve-theme="dark"] { --page: #101820; --panel: #1a252e; --control: #172d3a; --ink: #e7eef2; --label: #c5d1d8; --muted: #9fb0ba; --edge: #334652; --button-edge: #48606d; --accent: #1685ad; --hover: #1d9bc7; }
html[data-curve-theme="workshop"] { color-scheme: light; --page: #fff; --panel: #f7f9fb; --control: #e1f4fb; --ink: #172632; --label: #294453; --muted: #526b78; --edge: #9bc8da; --button-edge: #88b7ca; --accent: #ffc400; --accent-ink: #172632; --hover: #d0eaf5; --warning: #9a6700; }
body { min-height: 100vh; }
:root, body { background: var(--page); color: var(--ink); }
.page-header { width: 1030px; max-width: 100%; margin: 0 auto 8px; display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.page-header .page-title { width: auto; margin: 0; font-size: 20px; }
.header-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.site-home-link { color: var(--label); font-size: 12px; text-decoration: none; }
.site-home-link:hover { text-decoration: underline; }
.theme-control { display: flex; gap: 8px; align-items: center; }
.panel { background: var(--panel); border-color: var(--edge); padding: 14px; margin-top: 16px; }
label, legend { color: var(--label); }
button, select, input[type="number"] { background: var(--control); color: var(--ink); border-color: var(--button-edge); min-height: 34px; padding: 7px 9px; font-size: 13px; }
button:hover:not(:disabled) { background: var(--hover); }
#demo-start, #add-curve { background: var(--accent); color: var(--accent-ink); border-color: var(--button-edge); }
#curve-controls { border-color: var(--edge); margin-top: 12px; padding-top: 12px; }
#curve-list li { border-color: var(--edge); gap: 8px; padding: 6px 0; }
#curve-list li label { color: var(--ink); }
#curve-list { margin: 8px 0; }
.brightness { margin-top: 12px; font-size: 12px; }
#curve-message, #demo-status { color: var(--muted); font-size: 11px; margin-top: 6px; line-height: 1.3; }
#cursor-reading { color: var(--warning); }
.toolbar, .selection { gap: 8px; }
.field { gap: 4px; }
@media(max-width:1000px) { .page-header { width:650px; flex-wrap:wrap; } .panel { margin-top:0; } }

/* Compact layout shared by the public and internal curve calculators. */
main > *, .page-title, .header-controls, .field { min-width: 0; }
#curve-chart { min-height: 0; touch-action: pan-y; }
@media (max-width: 600px) {
    body { padding: 8px; }
    main { gap: 12px; }
    .page-header { gap: 10px; margin-bottom: 12px; }
    .page-header .page-title { font-size: 18px; width: 100%; }
    .header-controls { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .site-home-link { grid-column: 1 / -1; }
    .theme-control { gap: 6px; }
    .panel { padding: 14px; }
    label, legend, #curve-list li label { font-size: 15px; }
    .brightness { font-size: 14px; }
    #curve-message, #demo-status { font-size: 13px; line-height: 1.5; }
    button, select, input[type="number"] {
        min-height: 44px; font-size: 16px; max-width: 100%;
    }
    .toolbar, .selection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .toolbar > .field, .toolbar > button { grid-column: 1 / -1; }
    .field input, .field select { width: 100%; }
    .selection > button { grid-column: 1 / -1; width: 100%; }
    #curve-list li { min-height: 48px; gap: 10px; }
    #curve-list li label { min-width: 0; overflow-wrap: anywhere; padding: 10px 0; }
    #curve-list button { min-height: 44px; padding: 8px 12px; }
    .curve-swatch { flex-shrink: 0; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex-shrink: 0; }
    .brightness { min-height: 44px; }
    input[type="range"] { min-height: 44px; }
}