[hidden]{display:none!important}
#fourier #drawing{height:clamp(180px,30vh,260px);max-height:260px}
@media(min-width:801px){#fourier .stage{display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:20px;align-content:start}#fourier .stage-top{grid-column:1 / -1;margin-bottom:12px}#fourier #drawing{grid-column:1;grid-row:2;height:300px;max-height:300px}#fourier .legend{grid-column:1;grid-row:3}#fourier .component-inspector{grid-column:2;grid-row:2 / 4;display:block;border-top:0;border-left:1px solid var(--line);padding:0 0 0 18px;margin:0}#fourier .component-inspector svg{height:85px}}
@media(max-width:800px){.component-inspector>div:last-child{display:flex;flex-direction:column}.component-inspector label.check{order:-1}}
.component-inspector{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;border-top:1px solid var(--line);padding-top:18px;margin-top:12px;align-items:center}
.component-inspector svg{width:100%;height:130px}
.component-inspector label{margin:0 0 8px}
.component-inspector select{width:100%;max-width:240px}
.component-inspector .hint{margin:10px 0;max-width:330px}
.mini-caption{font-size:10px;line-height:1.6;color:#5b6068;margin:6px 0}
.component-inspector>div:first-child .mini-caption{text-align:center}
label.check{display:flex;align-items:center;justify-content:flex-start;gap:9px;font-size:12px;font-weight:500;line-height:1.5;margin:10px 0;min-height:36px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--blue);flex-shrink:0}
.mechanisms{margin-top:20px;padding-top:12px;border-top:1px solid var(--line)}
.distance-totals{display:flex;gap:20px;font-size:12px;color:#535b65}
.distance-totals strong{display:block;font-size:23px;font-weight:500;color:#2464bc;font-variant-numeric:tabular-nums}
#data-invitation{margin:0 0 16px}
#support{touch-action:none;cursor:ew-resize}
.data-dot .middle-ring{fill:none;stroke:#9b481d;stroke-width:2.5}
.data-dot[data-selected=true] .dot-body{fill:#2464bc;stroke:white;stroke-width:2}
.data-dot[data-selected=true] text{fill:white}
#sorted-view{border-top:1px solid var(--line);padding:14px 0 6px;text-align:center}
#sorted-values{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:8px 0}
#sorted-values span{display:grid;place-items:center;min-width:30px;height:30px;border:2px solid transparent;border-radius:50%;font:12px ui-monospace,monospace}
#sorted-values .middle-value{border-color:#9b481d;background:#f9dfac}
#median-explanation{margin:5px 0}
.toy-heading .subject{max-width:240px;text-align:right;line-height:1.5}
@media(max-width:800px){.subject{display:block}.toy-heading{flex-wrap:wrap}.toy-heading .subject{margin-left:59px;text-align:left;max-width:none}.component-inspector{grid-template-columns:130px minmax(0,1fr)}}
@media(max-width:520px){.toy-heading .subject{margin-left:46px;font-size:11px}.component-inspector{grid-template-columns:85px minmax(0,1fr);gap:10px}.component-inspector svg{height:90px}.component-inspector .hint{font-size:11px}.component-inspector .mini-caption{font-size:9px}}

/* A personal workbench: paper, ink, open tools. */
:root{background:#faf7ee;color:#263345;--line:#cbc8bc}
header{border:0;padding-top:24px;padding-bottom:16px;gap:22px}.brand{font-family:Georgia,serif;font-size:22px;font-weight:400}.badge{border:0;border-radius:0;padding:0;font:12px ui-sans-serif,system-ui;color:#62615b}
.intro{display:block;padding:22px 0 32px}.intro h1{font-family:Georgia,serif;font-size:clamp(30px,4vw,46px);font-weight:400;letter-spacing:-.035em}.intro nav{display:flex;flex-wrap:wrap;gap:24px;margin-top:18px}.intro nav a{border:0;padding:0;text-decoration:underline;text-underline-offset:5px;color:#245aa1}
.toy{border:0;border-radius:0;background:transparent;overflow:visible;margin-bottom:48px;border-top:2px solid #263345}.toy-heading{border:0;padding:20px 0 16px;gap:12px}h2{font-family:Georgia,serif;font-size:28px;font-weight:400;letter-spacing:-.025em}.stage{background:#f2f0e4;border-radius:3px}.controls{border:0;padding-top:12px}.toy-heading .subject{font-size:11px;color:#62615b}
button,select{border-radius:4px;background:#fffdf5;border-color:#a8aaa5}button{border-bottom-width:3px}button:active{transform:translateY(1px);border-bottom-width:2px}button[aria-pressed=true],button.primary{background:#285b9b;border-color:#285b9b}.metrics{gap:42px}.metrics strong{font-size:25px;font-family:ui-monospace,monospace}footer{border-top:1px solid var(--line);padding-top:16px}
@media(max-width:800px){.toy-heading .subject{margin-left:auto}.controls{padding:22px 12px}.intro{padding:20px 0 30px}.toy-heading{padding:18px 0}.toy{margin-bottom:30px}}
@media(max-width:520px){.brand{font-size:19px}.badge{font-size:10px}.intro h1{font-size:34px}.intro nav{gap:20px}.toy-heading{align-items:baseline}.toy-heading .subject{margin-left:0;width:100%}.stage{padding:16px 10px}h2{font-size:27px}}