:root{color-scheme:dark;--bg:#101313;--ink:#e9eeea;--line:#2a3334;--lime:#c1e88a;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:var(--type-4) 'DM Sans',system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:0 32px}a{color:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
header{height:76px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:var(--type-4);font-weight:700;display:flex;align-items:center;gap:17px}.brand span{font:var(--type-4) var(--mono);letter-spacing:2px;color:#9daea5}.instruction{margin:24px 0;color:#a9b9b0;font-size:var(--type-4)}
.instrument{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#111718}.controls{display:flex;align-items:center;gap:40px;padding:24px 28px;background:#161d1c;border-bottom:1px solid var(--line)}.control{flex:1;min-width:0}.control label{display:flex;justify-content:space-between;gap:12px;font-size:var(--type-4);margin-bottom:14px}output{color:var(--lime);font:var(--type-4) var(--mono)}input[type=range]{display:block;width:100%;height:4px;accent-color:var(--lime);margin:0;cursor:pointer}button{font:var(--type-4) 'DM Sans',system-ui,sans-serif;color:#c7d2cb;cursor:pointer;background:#25312b;border:1px solid #415246;border-radius:7px;padding:10px 20px}button:hover{background:#304035}
.toolbar{height:55px;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.toolbar h1{font-size:var(--type-4);font-weight:500;margin:0}#status{font:var(--type-4) var(--mono);color:var(--lime);letter-spacing:1px}.surface-wrap{position:relative;margin:22px 35px 8px}#surface{display:block;width:100%;height:auto;aspect-ratio:2;touch-action:none;cursor:crosshair;background:#111b20;border:1px solid #304144;border-radius:9px}#hint{pointer-events:none;position:absolute;bottom:12px;left:0;right:0;text-align:center;font:var(--type-4) var(--mono);color:#a3b5b5;transition:opacity .3s}.axis-top{position:absolute;top:-20px;left:46%;font:var(--type-4) var(--mono);color:#657c7e}.axis-side{position:absolute;left:-26px;top:46%;writing-mode:vertical-rl;transform:rotate(180deg);font:var(--type-4) var(--mono);color:#657c7e}
.legend{padding:12px 20px 20px;display:flex;gap:24px;align-items:center;justify-content:center;font-size:var(--type-4);color:#9aada3}.legend>span{display:flex;align-items:center;gap:8px}.legend-arrow{font-style:normal;font-size:var(--type-4);color:#92b7ae}.ramp{display:inline-block;width:40px;height:5px;border-radius:2px;background:linear-gradient(90deg,#414487,#2a788e,#22a884,#7ad151,#fde725)}
.cross-section{border-top:1px solid var(--line);padding:17px 25px 16px;background:#131a1b}.section-label{display:flex;justify-content:space-between;font:var(--type-4) var(--mono);color:#a2b3aa}.section-label span+span{color:#708582}#section{display:block;width:100%;height:auto;aspect-ratio:3 / 1;margin:5px 0}.section-key{display:flex;justify-content:center;font-size:var(--type-4);color:#859b90;gap:25px}.dot{display:inline-block;width:8px;height:8px;margin-right:5px;vertical-align:middle;border-radius:1px}.magnet{background:linear-gradient(135deg,#cbd7df,#5b6f7f)}.sensor{background:#344650;border:1px solid #a9b7b9}.footnote{margin:16px 0 28px;font-size:var(--type-4);color:#6f8478}
@media(max-width:600px){main{padding:0 16px}header{height:62px}.instruction{font-size:var(--type-4);margin:20px 0}.controls{padding:20px 18px;gap:25px 20px;display:grid;grid-template-columns:1fr auto}.control{grid-column:1}.controls button{grid-column:2;grid-row:1/3;padding:10px 12px}.toolbar{padding:0 18px}.surface-wrap{margin:22px 22px 8px}.axis-side{left:-18px}#hint{font-size:var(--type-4)}.legend{flex-wrap:wrap;gap:4px 16px;font-size:var(--type-4);padding:8px 10px 16px}.cross-section{padding:15px 14px}.section-key{font-size:var(--type-4)}}

/* PanoTac website theme; signal colors retain their scientific scale. */
:root{color-scheme:light;--bg:#ffffff;--ink:#282330;--line:#ddd7df;--lime:#592380;--mono:Arial,Helvetica,sans-serif}
body{font-family:Arial,Helvetica,sans-serif}main{max-width:none;padding:0}
.instrument{background:#fbfaf7;border-radius:9px}.controls{background:#ede6f2;padding:20px 26px}.control label{font-size:var(--type-4)}output{font-size:var(--type-4);font-variant-numeric:tabular-nums}
button{font-family:Arial,Helvetica,sans-serif;background:#592380;border-color:#592380;color:#fff}button:hover{background:#41165f}
.toolbar h1{font-weight:600}.axis-top,.axis-side{color:#696270}.legend{color:#696270}.legend-arrow{color:#592380}
.cross-section{background:#f1edf3}.section-label,.section-label span+span,.section-key{color:#696270}.section-label{font-size:var(--type-4)}.footnote{color:#696270;margin:10px 0 0;font-size:var(--type-4)}.surface-wrap{margin-top:22px}#surface{background:#101a20}#status{font-size:var(--type-4)}
@media(max-width:600px){main{padding:0}.controls{padding:18px}.legend{line-height:1.5}.footnote{font-size:var(--type-4)}}

/* Keep the contact field and its deformation visible together. */
.workspace{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:55px auto auto}
.toolbar{grid-column:1;grid-row:1;padding:0 22px}
.surface-wrap{grid-column:1;grid-row:2;margin:20px 22px 8px 30px}
.legend{grid-column:1;grid-row:3;flex-wrap:wrap;gap:4px 16px;padding:10px 12px 18px;font-size:var(--type-4)}
.cross-section{grid-column:2;grid-row:1/4;border-top:0;border-left:1px solid var(--line);padding:0 20px 18px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.section-label{height:55px;flex-shrink:0;align-items:center;font:600 var(--type-4) Arial,Helvetica,sans-serif;margin-bottom:auto}.section-label span+span{font-size:var(--type-4);font-weight:400}
#section{margin:18px 0;width:100%;height:auto;aspect-ratio:3/1}.section-key{margin-top:auto;min-height:28px;align-items:center}
@media(max-width:650px){.workspace{display:block}.toolbar{height:44px}.surface-wrap{max-width:460px;margin:20px auto 8px;width:calc(100% - 48px)}.cross-section{border-left:0;border-top:1px solid var(--line);padding:0 18px 12px}.section-label{height:40px}#section{max-width:400px;margin:0 auto 8px}.section-key{min-height:20px}.controls{padding:14px 18px;gap:18px}.control label{margin-bottom:10px}}

.section-label{margin-bottom:0}.section-description{font:var(--type-4)/1.6 Arial,Helvetica,sans-serif;color:#696270;margin:0 0 auto;max-width:360px} .cross-section #section{margin-top:24px}@media(max-width:650px){.section-description{max-width:none;margin-bottom:14px}.cross-section #section{margin-top:0}}

#section{aspect-ratio:960/420}

#section{aspect-ratio:960/600;max-width:none}.dot.tpu{background:#c9c6d0;border:1px solid #96919f}.section-key{gap:15px;flex-wrap:wrap}.cross-section #section{margin:8px 0}.section-description{margin-bottom:6px}

.dot.flexitac{background:#d9783480;border:1px solid #b8753f88}.section-key{gap:8px 13px}

.toolbar h1,.section-label>span:first-child{font-size:var(--type-3);font-weight:600;line-height:1.4}
.section-label{height:auto;min-height:55px;gap:12px;flex-wrap:wrap;padding-block:10px}
.control label{flex-wrap:wrap}.legend>span{flex-wrap:wrap}.toolbar{gap:12px;height:auto;min-height:55px}
.axis-top{top:-25px}.surface-wrap{margin-top:28px}.section-description{line-height:1.7}

body,.section-description,.legend{line-height:1.5}

/* Keep instructions below the canvas instead of overlapping its edge. */
#hint{position:static;margin:12px 0 0;font:400 var(--type-4)/1.5 Arial,Helvetica,sans-serif;color:var(--muted,#696270);text-align:center;pointer-events:auto}
.legend{align-content:start;gap:8px 16px;padding-top:8px}
.legend>span{justify-content:center}