:root { color-scheme: dark; --bg: #151515; --fg: #ddd; --muted: #999; --accent: #ffe8a0; --line: rgba(255, 255, 255, 0.12); --panel: rgba(255, 255, 255, 0.035); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.65 system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
article { max-width: 680px; margin: 0 auto; padding: 48px 20px 96px; }
h1 { font-size: 34px; line-height: 1.15; font-weight: 650; margin: 0 0 8px; color: #fff; }
.kicker { color: var(--muted); margin: 0 0 24px; font-size: 15px; }
nav.parts { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin: 0 0 40px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
nav.parts a { color: var(--muted); text-decoration: none; }
nav.parts a:hover { color: var(--accent); }
nav.parts .here { color: #fff; }
nav.parts small { font-size: 11px; color: var(--muted); opacity: 0.8; margin-left: 2px; }
nav.parts .palette { margin-left: auto; }
nav.parts .choice { gap: 6px; }
nav.parts .choice button { padding: 2px 10px; font-size: 12px; }
h2 { font-size: 24px; font-weight: 600; margin: 56px 0 14px; color: #fff; scroll-margin-top: 16px; }
h2 a { color: inherit; text-decoration: none; }
h2 a:hover, h2 a:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
h3 { font-size: 19px; font-weight: 600; margin: 40px 0 10px; color: #fff; scroll-margin-top: 16px; }
h3 a { color: inherit; text-decoration: none; }
h3 a:hover, h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
h3 .tex { margin-left: 0.3em; font-weight: 400; }
p { margin: 0 0 18px; }
a { color: var(--accent); }
.term { font-style: normal; color: var(--accent); }
ol { padding-left: 22px; margin: 0 0 18px; }
li { margin-bottom: 6px; }
.eq { font-family: ui-serif, Georgia, serif; font-size: 20px; text-align: center; margin: 6px 0 22px; color: #fff; }
.eq sub, .eq sup { font-size: 70%; }
.note { font-size: 14px; color: var(--muted); }
figure.fig { margin: 26px 0 30px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
figure.fig .stage { display: block; width: 100%; touch-action: pan-y pinch-zoom; }
figure.fig canvas { display: block; width: 100%; }
figure.fig > .caption { padding: 10px 18px 0; font-size: 12.5px; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 18px 4px; font-size: 12.5px; color: var(--muted); }
.legend .item { display: inline-flex; align-items: center; gap: 7px; }
.legend .swatch { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 16px; }
.legend .swatch svg { display: block; }
.legend .gradient { display: block; width: 30px; height: 10px; border-radius: 2px; }
.controls { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--line); font-size: 14px; align-items: center; }
.controls > :not(.control) { grid-column: 1 / -1; }
.control { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.controls > .control { grid-template-columns: subgrid; grid-column: 1 / -1; }
@media (min-width: 600px) { .controls.two { grid-template-columns: 1fr 1fr; gap: 10px 22px; } .controls.two > :not(.control) { grid-column: auto; } .controls.two > .control { grid-template-columns: auto 1fr auto; grid-column: auto; } }
.control label { color: var(--muted); white-space: nowrap; }
.control output { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
input[type=range] { width: 100%; accent-color: var(--accent); margin: 0; min-width: 0; }
.buttons, .choice { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.choice .caption { color: var(--muted); margin-right: 2px; }
.buttons button, .choice button { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--fg); border-radius: 999px; padding: 4px 13px; font: inherit; font-size: 13px; cursor: pointer; }
.buttons button:hover, .choice button:hover { border-color: rgba(255, 232, 160, 0.5); color: #fff; }
.choice button[aria-pressed=true] { background: rgba(255, 232, 160, 0.16); border-color: rgba(255, 232, 160, 0.6); color: #fff; }
.swatch-chip { width: 30px; height: 22px; padding: 0; border: 2px solid rgba(255, 255, 255, 0.18); border-radius: 6px; background: transparent; cursor: pointer; }
.swatch-chip[aria-pressed=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.readout { color: var(--muted); font-variant-numeric: tabular-nums; grid-column: 1 / -1; }
.readout b { color: #fff; font-weight: 500; }
footer { margin-top: 64px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); padding-top: 16px; }
@media (max-width: 480px) { article { padding: 32px 16px 64px; } h1 { font-size: 28px; } body { font-size: 16px; } .controls { grid-template-columns: 1fr auto; } .control { grid-template-columns: 1fr auto; } .controls > .control { grid-template-columns: subgrid; } .control input { grid-column: 1 / -1; grid-row: 2; } }
.preview { position: absolute; z-index: 10; background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); overflow: hidden; font-size: 14px; line-height: 1.45; color: var(--fg); }
.preview img { display: block; width: 100%; height: auto; max-height: 170px; object-fit: cover; }
.preview .body { padding: 12px 14px 10px; }
.preview .title { font-weight: 600; color: #fff; margin-bottom: 4px; }
.preview p { margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.preview .from { margin-top: 8px; font-size: 11px; color: var(--muted); }
.preview-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.5); touch-action: none; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 80vh; overflow: hidden; background: #1e1e1e; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5); padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transition: transform 0.28s ease; touch-action: none; font-size: 15px; line-height: 1.5; color: var(--fg); cursor: pointer; }
.sheet.open { transform: translateY(0); }
.sheet .handle { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); margin: 10px auto 6px; }
.sheet img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: cover; }
.sheet .body { padding: 12px 18px 18px; }
.sheet .title { font-weight: 600; color: #fff; margin-bottom: 4px; }
.sheet p { margin: 0; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.sheet .from { margin-top: 10px; font-size: 12px; color: var(--muted); }
:root { --term-a: #e69f00; --term-b: #56b4e9; --term-c: #22b38a; --term-d: #d98cba; --term-e: #f0e442; --tex-error: #ff9e8a; }
.tex math { font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', math; }
div.tex, .tex.display { display: block; max-width: 100%; min-width: 0; margin: 2px 0 20px; padding: 0.3em 0; overflow-x: auto; overflow-y: hidden; font-size: 1.15em; color: #fff; }
div.tex > math, .tex.display > math { min-width: max-content; }
.term-a { color: var(--term-a); }
.term-b { color: var(--term-b); }
.term-c { color: var(--term-c); }
.term-d { color: var(--term-d); }
.term-e { color: var(--term-e); }
.term-a a, .term-b a, .term-c a, .term-d a, .term-e a { color: inherit; }
.tex .tex-aligned > mtr > mtd { padding: 0.45em 0; }
.tex .tex-aligned > mtr > mtd:nth-child(odd) { text-align: right; }
.tex .tex-aligned > mtr > mtd:nth-child(even) { text-align: left; }
.tex .tex-aligned > mtr > mtd:nth-child(2n+3) { padding-left: 2em; }
.tex.tex-error { font: 0.85em/1.5 ui-monospace, Menlo, monospace; color: var(--tex-error); white-space: pre-wrap; overflow-wrap: anywhere; }
div.tex.tex-error, .tex.display.tex-error { padding: 6px 10px; border-left: 2px solid var(--tex-error); background: rgba(255, 158, 138, 0.06); }
div.tex, .tex.display { background: linear-gradient(to right, var(--bg) 30%, transparent) left / 32px 100% no-repeat local, linear-gradient(to left, var(--bg) 30%, transparent) right / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, 0.22), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, 0.22), transparent) right / 12px 100% no-repeat scroll; }
@media (max-width: 600px) { div.tex, .tex.display { font-size: 1.02em; } }