@font-face{font-family:Saira;src:url('assets/fonts/saira.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('assets/fonts/plex.ttf') format('truetype');font-weight:100 700;font-display:swap}
@font-face{font-family:'Space Mono';src:url('assets/fonts/mono.ttf') format('truetype');font-weight:400;font-display:swap}
:root {
  color-scheme: light;
  --bg:#e9edf1; --surface:#f4f5f7; --surface-2:#e1e6ec; --ink:#29333f; --muted:#566577;
  --line:#aeb9c6; --grid:#d6dee7; --accent:#507da9; --button-bg:#edf0f4;
  --primary-bg:#d4e1ef; --primary-ink:#293f58; --link:#355f8a;
  --panel-surface:#f4f5f7; --panel-secondary:#e3e7ed;
  --chart-bg:#f4f5f7; --chart-panel:#f4f5f7; --chart-axis:#7b8a9c; --chart-hover:#29333f;
  --shadow:#33415533;
  font-family:'IBM Plex Sans',sans-serif;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#111418; --surface:#1b1e23; --surface-2:#2a3039; --ink:#e7ebf0; --muted:#adbac8;
  --line:#424d5c; --grid:#303b49; --accent:#88afd8; --button-bg:#232a33;
  --primary-bg:#34485e; --primary-ink:#e2edf9; --link:#aac9eb;
  --panel-surface:#1b1e23; --panel-secondary:#272e37;
  --chart-bg:#1b1e23; --chart-panel:#1b1e23; --chart-axis:#8498af; --chart-hover:#f4f7fb;
  --shadow:#00000066;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); }
main { max-width:1680px; margin:auto; padding:20px; display:grid; gap:18px; grid-template-columns:minmax(0,1fr) 370px; }
.spectra { height:4px; background:linear-gradient(90deg,#00ff88 0% 11.11%,#00e8ff 11.11% 22.22%,#0088ff 22.22% 33.33%,#8800ff 33.33% 44.44%,#ff00ff 44.44% 55.55%,#ff0044 55.55% 66.66%,#ff8800 66.66% 77.77%,#ffcc00 77.77% 88.88%,#f8ff00 88.88%); }
.workshop-nav { max-width:1680px; margin:auto; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.workshop-nav a { text-decoration:none; font-size:13px; }
.nav-actions { display:flex; align-items:center; gap:18px; }
.nav-actions button { font-size:13px; min-width:100px; }
.workshop-nav .brand-link { display:flex; align-items:center; gap:10px; font:700 18px Saira,sans-serif; letter-spacing:.06em; color:var(--ink); }
.brand-link span { font:11px 'Space Mono',monospace; color:var(--muted); }
.app-header { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:16px 0 8px; }
.app-header .heading { flex:1 1 460px; min-width:0; }
.app-header > #availability-note { flex-basis:100%; }
.chart-selectors { display:flex; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; gap:16px 24px; }
.selector-block { min-width:0; }
.selector-label { display:block; margin-bottom:6px; font:11px 'Space Mono',monospace; color:var(--muted); }
.edition-version { display:flex; flex-wrap:wrap; gap:8px; }
h1 { margin:0; font-family:Saira,sans-serif; font-weight:700; font-size:clamp(24px,2.3vw,34px); line-height:1.2; }
h2,summary { font-family:Saira,sans-serif; }
h2 { margin:0; font-size:18px; }
p { margin:0; }
.eyebrow { font:11px 'Space Mono',monospace; letter-spacing:.1em; color:var(--ink); margin-bottom:8px; }
.subhead { color:var(--muted); font-size:13px; margin-top:6px; }
.tabs { display:flex; gap:0; flex-shrink:0; }
button,input { font:inherit; border:1px solid var(--line); border-radius:0; color:var(--ink); background:var(--button-bg); min-height:44px; }
button { padding:8px 12px; cursor:pointer; }
button:hover:not(:disabled) { background:var(--surface-2); }
button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible,.dimension-coming:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
button:disabled { opacity:.45; cursor:not-allowed; }
.tabs > * + *, .toolbar button + button, .utilities button + button { margin-left:-1px; }
.tabs button,.toolbar button,.utilities button,.legend-row button { position:relative; }
.tabs button:hover,.tabs button:focus-visible,.toolbar button:hover,.toolbar button:focus-visible,.utilities button:hover,.utilities button:focus-visible,.legend-row button:hover,.legend-row button:focus-visible { z-index:1; }
.tabs button[aria-pressed="true"],.toolbar button[aria-pressed="true"],.legend-toggle[aria-pressed="true"] { background:var(--primary-bg); color:var(--primary-ink); }
.dimension-coming { position:relative; display:flex; }
.dimension-coming button { color:var(--muted); background:var(--surface-2); border-color:var(--line); cursor:not-allowed; opacity:.6; }
.dimension-coming [role="tooltip"] { position:absolute; z-index:5; top:calc(100% + 10px); right:0; width:230px; padding:12px; font-size:13px; line-height:1.5; background:var(--surface); color:var(--ink); border:2px solid var(--line); box-shadow:4px 4px var(--shadow); visibility:hidden; }
.dimension-coming:hover [role="tooltip"],.dimension-coming:focus-within [role="tooltip"] { visibility:visible; }
.chart-shell,.inspector { --surface:var(--panel-surface); --surface-2:var(--panel-secondary); }
.chart-shell { min-width:0; background:var(--surface); padding:16px; align-self:start; position:sticky; top:16px; }
.chart-heading,.section-heading { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.chart-heading { flex-wrap:wrap; }
.chart-heading > div:first-child { flex:1 1 220px; }
.chart-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px; margin-left:auto; }
.chart-actions button { display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.chart-actions button svg { width:18px; height:18px; flex-shrink:0; }
.chart-shell #share-panel,.chart-shell #action-status:not(:empty) { margin-top:10px; }
.version-release { margin-top:4px; font-size:12px; color:var(--muted); }
#selection-count,#inspect-status,#resource-count { font-size:12px; color:var(--muted); }
.method,.coverage,.hint { font-size:12px; line-height:1.5; color:var(--muted); }
.method { margin-top:6px; }
.chart-stage { margin-top:12px; height:clamp(400px,calc(100svh - 260px),850px); }
#chart { width:100%; height:100%; display:block; touch-action:pan-y; }
.coverage { margin-top:5px; }
aside { display:flex; flex-direction:column; gap:14px; min-width:0; width:100%; max-width:340px; align-self:start; }
.inspector { background:var(--surface); padding:16px; }
.resource-picker { margin:16px 0; }
.y-controls { display:flex; gap:0; align-items:center; margin:14px 0 8px; }
.y-controls label { font-size:13px; margin-right:auto; padding-right:8px; }
.y-controls input,.y-controls input + button,.y-controls button + button { margin-left:-1px; }
.y-controls button:focus-visible,.y-controls input:focus-visible { position:relative; z-index:1; }
.y-controls button { padding:6px 10px; }
#y-input { width:78px; padding:6px 8px; }
#readout-list:empty { display:none; }
summary { cursor:pointer; font-weight:650; }
.resource-picker summary { min-height:28px; }
#resource-count { margin-left:6px; font-weight:400; }
.toolbar { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:12px 0; }
.toolbar button { display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:13px; padding:6px; }
.preset-icon { width:18px; height:18px; flex-shrink:0; image-rendering:pixelated; }
.legend { display:grid; gap:0; margin-top:12px; }
.legend-row { border-bottom:1px solid var(--line); }
.legend-value { font-size:12px; font-variant-numeric:tabular-nums; text-align:right; width:88px; min-width:88px; padding:8px 4px; position:relative; isolation:isolate; }
.legend-value::before { content:''; position:absolute; right:0; top:0; bottom:0; width:var(--value-width,0%); background:var(--value-color); opacity:.2; z-index:-1; pointer-events:none; }
.legend-row:last-child { border-bottom:0; }
.legend-row button { font-size:12px; padding:6px; border:0; box-shadow:none; background:transparent; }
.legend-row button:hover:not(:disabled) { background:var(--surface-2); background:color-mix(in srgb,var(--surface-2) 50%,var(--surface)); }
.legend-row button[aria-pressed="true"]:hover { background:var(--surface-2); }
.legend-toggle { display:flex; width:100%; gap:8px; align-items:center; text-align:left; user-select:none; }
.legend-toggle .legend-value { margin-left:auto; flex-shrink:0; }
.legend-toggle[aria-pressed="true"] { background:var(--surface-2); color:var(--ink); }
.legend-toggle[aria-pressed="false"] { color:var(--muted); background:transparent; }
.legend-toggle[aria-pressed="false"] .swatch { opacity:.25; }
.swatch { width:16px; height:4px; flex-shrink:0; border-radius:2px; }
.resource-icon { width:20px; height:20px; flex-shrink:0; image-rendering:pixelated; }
.utilities { display:flex; gap:0; }
.utilities button { font-size:12px; }
.source { color:var(--muted); font-size:12px; line-height:1.5; }
.source p { margin-top:8px; }
a { color:var(--link); }
#share-panel label { display:block; font-size:12px; margin-bottom:5px; }
#share-url { width:100%; padding:8px; font-size:12px; }
#action-status:empty { display:none; }
.workshop-footer { max-width:1640px; margin:12px auto 0; padding:24px 20px; border-top:2px solid var(--line); display:flex; flex-wrap:wrap; gap:16px 24px; font-size:12px; color:var(--muted); }
.workshop-footer span:last-child { margin-left:auto; }
@media(min-width:1300px) {
  main { grid-template-columns:calc((100% - 388px)*.7) minmax(0,1fr); }
}
@media(max-width:860px) {
  main { grid-template-columns:1fr; padding:12px; gap:12px; }
  .app-header { padding:12px 0 8px; }
  .chart-selectors { gap:14px; }
  .app-header .heading { flex-basis:100%; }
  .chart-selectors { width:100%; margin-left:0; }
  .selector-block { width:100%; }
  .edition-version { display:grid; grid-template-columns:1fr 1.3fr; }
  .tabs { margin-top:0; }
  .tabs button { flex:1; }
  .dimension-coming { flex:1; }
  .tabs > button,.dimension-coming button { padding:8px 6px; font-size:13px; }
  .workshop-nav { padding:16px 12px; flex-wrap:wrap; }
  .workshop-nav .brand-link { font-size:16px; flex-wrap:wrap; }
  .nav-actions { width:100%; justify-content:space-between; gap:12px; }
  .brand-link span { font-size:10px; }
  .workshop-footer span:last-child { margin-left:0; }
  .chart-shell { position:static; padding:12px; }
  .chart-stage { height:clamp(320px,44svh,480px); }
  .inspector { padding:12px; }
  button { min-height:44px; }
  .legend-row button { min-height:44px; }
}


@supports (color:oklch(0.5 0.1 200)) {
:root {
  --bg:oklch(0.9442042 0.0068968 247.89793);
  --surface:oklch(0.9699532 0.0028718 264.54197);
  --surface-2:oklch(0.9228586 0.0097656 252.81480);
  --ink:oklch(0.3170199 0.0255295 253.21224);
  --muted:oklch(0.5009850 0.0341797 253.14745);
  --line:oklch(0.7812349 0.0221911 252.53621);
  --grid:oklch(0.8971492 0.0150674 251.16741);
  --accent:oklch(0.5757978 0.0844217 248.95773);
  --button-bg:oklch(0.9539970 0.0062606 255.47552);
  --primary-bg:oklch(0.9041516 0.0237476 250.08488);
  --primary-ink:oklch(0.3611651 0.0517306 252.37367);
  --link:oklch(0.4750252 0.0844531 250.52976);
  --panel-surface:oklch(0.9699532 0.0028718 264.54197);
  --panel-secondary:oklch(0.9266461 0.0091956 258.33660);
  --chart-bg:oklch(0.9699532 0.0028718 264.54197);
  --chart-panel:oklch(0.9699532 0.0028718 264.54197);
  --chart-axis:oklch(0.6275601 0.0323224 253.05871);
  --chart-hover:oklch(0.3170199 0.0255295 253.21224);
  --shadow:oklch(0.3716963 0.0391564 257.28695 / 0.2000);
}
:root[data-theme="dark"] {
  --bg:oklch(0.1898294 0.0094142 255.63327);
  --surface:oklch(0.2340704 0.0106414 260.68624);
  --surface-2:oklch(0.3071738 0.0182910 258.37016);
  --ink:oklch(0.9384569 0.0080034 253.85480);
  --muted:oklch(0.7832238 0.0246148 250.12817);
  --line:oklch(0.4164753 0.0288637 256.20782);
  --grid:oklch(0.3482875 0.0286415 254.62763);
  --accent:oklch(0.7405113 0.0731777 250.09710);
  --button-bg:oklch(0.2821517 0.0193663 254.82147);
  --primary-bg:oklch(0.3945052 0.0452041 251.35247);
  --primary-ink:oklch(0.9413824 0.0200603 250.38698);
  --link:oklch(0.8245436 0.0585304 250.91737);
  --panel-surface:oklch(0.2340704 0.0106414 260.68624);
  --panel-secondary:oklch(0.2982930 0.0190997 254.80584);
  --chart-bg:oklch(0.2340704 0.0106414 260.68624);
  --chart-panel:oklch(0.2340704 0.0106414 260.68624);
  --chart-axis:oklch(0.6719842 0.0411009 252.04621);
  --chart-hover:oklch(0.9750011 0.0062264 255.47466);
  --shadow:oklch(0.0000000 0.0000000 0.00000 / 0.4000);
}
.spectra { height:4px; background:linear-gradient(90deg,oklch(0.8762797 0.2277893 152.54960) 0% 11.11%,oklch(0.8512085 0.1461332 207.50850) 11.11% 22.22%,oklch(0.6320536 0.2017874 254.08790) 22.22% 33.33%,oklch(0.5394686 0.2936362 296.53732) 33.33% 44.44%,oklch(0.7016739 0.3224910 328.36342) 44.44% 55.55%,oklch(0.6326860 0.2540395 19.90225) 55.55% 66.66%,oklch(0.7442025 0.1811708 56.45846) 66.66% 77.77%,oklch(0.8652090 0.1768282 90.38156) 77.77% 88.88%,oklch(0.9624182 0.2127148 111.79293) 88.88%); }
.legend-row button:hover:not(:disabled) { background:color-mix(in oklch,var(--surface-2) 50%,var(--surface)); }
}