:root {
  color-scheme: dark;
  --bg: #050e25; --top: #0b1631; --panel: #091a37; --deep: #07142c;
  --raised: #102749; --heading: #103165; --edge: #2a5890; --border: #3c83d3;
  --field: #0b1a33; --text: #f1f6ff; --muted: #bed0e8; --accent: #78eff8;
  --accent-edge: #37e8e3; --glow: #19c9c9; --active: #07535d; --highlight: #062f3d;
  --error: #ffadb2; --initial: #479dff;
  --grid: #183659; --axis: #eef5ff; --canvas: #07152d; --tag: #0b203f;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edf4ff; --top: #f8fbff; --panel: #fff; --deep: #f2f7ff;
  --raised: #e6f0ff; --heading: #d8e9ff; --edge: #9ebce0; --border: #658dbf;
  --field: #f9fbff; --text: #112b4a; --muted: #405d7d; --accent: #00636f;
  --accent-edge: #00858d; --glow: #6ac8cc; --active: #d3f1f0; --highlight: #e4f7f6;
  --error: #a21b36; --initial: #175caf;
  --grid: #d6e3f4; --axis: #24415e; --canvas: #f7faff; --tag: #fff;
}
* {box-sizing: border-box}
body {margin: 0; min-width: 0; background: var(--bg); color: var(--text); font: 16px/1.45 "Segoe UI", system-ui, sans-serif}
button, input, select {font: inherit}
button, select, input[type="number"] {
  color: var(--text); border: 1px solid var(--edge); border-radius: 9px; background: var(--field);
}
button, select {cursor: pointer}
button {padding: .55rem .75rem}
button:hover:not(:disabled), select:hover, input[type="number"]:hover {border-color: var(--accent-edge)}
button:disabled, input:disabled {opacity: .45; cursor: default}
:focus-visible {outline: 2px solid var(--accent-edge); outline-offset: 3px}
input[type="checkbox"], input[type="range"] {accent-color: var(--accent-edge)}
h1, h2, h3, p {margin: 0}
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem clamp(.8rem, 2.2vw, 2.1rem); background: var(--top); border-bottom: 1px solid var(--edge);
}
.brand, .header-actions, .theme-button, .help-button {display: flex; align-items: center}
.brand {gap: clamp(.55rem, 1.5vw, 1.4rem); min-width: 0}
.brand-mark {padding-right: clamp(.35rem, 1.4vw, 1.25rem); border-right: 1px solid var(--edge); flex: none}
.brand-mark img {display: block; width: clamp(3.5rem, 8vw, 7.1rem); height: auto; aspect-ratio: 2; object-fit: cover; border-radius: .45rem}
.brand-mark .brand-logo-light, [data-theme="light"] .brand-logo-dark {display: none}
[data-theme="light"] .brand-mark .brand-logo-light {display: block}
.brand h1 {font-size: clamp(1.45rem, 3.2vw, 2.9rem); line-height: 1.1; letter-spacing: -.04em}
.brand p {font-size: clamp(.77rem, 1.6vw, 1.44rem); color: var(--muted)}
.header-actions {gap: clamp(.25rem, 1vw, 1rem); flex: none}
.header-actions .help-button {background: transparent; border-color: transparent; gap: .55rem}
.theme-button {justify-content: center; background: var(--raised); border-color: var(--border); min-width: 8.5em; min-height: 2.5rem; font-weight: 650}
.help-button span {width: 1.6rem; height: 1.6rem; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center}
.lab {max-width: 1680px; margin: auto; padding: clamp(.55rem, 1.3vw, 1.15rem)}
.layout {display: grid; grid-template-columns: minmax(0, 24fr) minmax(0, 47fr) minmax(0, 29fr); gap: clamp(.55rem, .9vw, .9rem); align-items: stretch}
.panel {min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 14px}
.inputs {min-width: 0; display: grid; align-content: start; gap: clamp(.65rem, 1vw, 1rem)}
.panel-title {padding: .75rem clamp(.65rem, 1.2vw, 1.18rem); font-size: clamp(1rem, 1.75vw, 1.58rem); line-height: 1.23; background: var(--heading); border-bottom: 1px solid var(--border); border-radius: 13px 13px 6px 6px}
.input-card .panel-title {font-size: clamp(.95rem, 1.48vw, 1.5rem)}
.operand {display: grid; grid-template-columns: minmax(2.2rem, .55fr) minmax(0, 1fr); gap: clamp(.5rem, 1.2vw, 1.15rem); padding: clamp(.65rem, 1.4vw, 1.35rem); align-items: center}
.operand-icon {width: 100%; height: auto; max-width: 105px; justify-self: center}
.transform-icon {color: var(--accent); filter: drop-shadow(0 0 7px var(--glow))}
.transform-icon[hidden] {display: none}
.transform-icon.reverse {transform: rotate(180deg)}
.fields {display: grid; gap: .3rem; min-width: 0}
.fields label {color: var(--muted); line-height: 1.23}
.fields :is(input, select) {width: 100%; min-width: 0; min-height: 2.55rem; padding: .3rem .5rem; font-weight: 650}
.fields label:not(:first-child) {margin-top: .45rem}
.fields i, .panel-title i {font-family: Georgia, serif}
.equations {margin: 0 clamp(.6rem, 1.05vw, 1rem) 1rem; padding: .6rem; text-align: center; background: var(--raised); border: 1px solid var(--border); border-radius: 10px}
.equations .math {font-size: clamp(.94rem, 1.37vw, 1.4rem)}
.equations .secondary {color: var(--muted); font-size: .93rem; margin-top: .35rem}
.operand-note {margin: -.25rem 1rem .85rem; font-size: .82rem; color: var(--muted)}
.math {font: clamp(1rem, 1.62vw, 1.48rem)/1.42 Georgia, serif; overflow-wrap: anywhere}
.frac {display: inline-flex; vertical-align: middle; flex-direction: column; text-align: center; line-height: 1.15; margin: 0 .14em}
.frac > span {padding: 0 .16em}
.frac > span:first-child {border-bottom: 1px solid currentColor}
.error {color: var(--error); margin: 0 .85rem .65rem; font-size: .88rem}
.error:empty {display: none}
.workspace {background: var(--deep); border-color: var(--edge); padding: .45rem; display: flex; flex-direction: column; gap: .6rem}
.op-buttons {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 clamp(0rem, 1vw, .8rem); gap: .2rem}
.op-buttons button {min-width: 0; padding: .5rem .12rem; font-size: clamp(.8rem, 1.35vw, 1.2rem)}
.op-buttons button[aria-pressed="true"], .primary {border-color: var(--accent-edge); background: var(--active); color: var(--text); box-shadow: inset 0 0 12px color-mix(in srgb, var(--glow) 23%, transparent)}
.op-buttons button[aria-pressed="true"] {font-weight: 750}
.plot {border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: var(--canvas)}
.plot-heading {display: grid; gap: .45rem; padding: .5rem .75rem 0}
.plot-heading h2 {text-align: center; font-size: clamp(1.25rem, 2vw, 1.9rem); line-height: 1.15}
.legend {justify-self: end; border: 1px solid var(--edge); background: var(--field); border-radius: 8px; padding: .3rem .55rem; font-size: clamp(.7rem, .9vw, .85rem); display: grid; gap: .15rem}
.legend span {display: flex; align-items: center; gap: .45rem}
.sample {display: inline-block; width: 1.55rem; height: 0; border-top: 3px solid var(--accent-edge)}
.sample.initial {border-color: var(--initial); border-top-style: dashed}
.canvas-wrap {height: clamp(285px, 29vw, 475px)}
canvas {display: block; width: 100%; height: 100%}
.playback {display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .72rem; border-top: 1px solid var(--edge)}
.primary {font-weight: 680}
.replay {padding: 0 .6rem; font-size: 1.5rem; line-height: 2.2rem; min-width: 2.6rem}
.scrubber {display: flex; flex: 1 1 9rem; align-items: center; gap: .4rem; font-size: .74rem; white-space: nowrap}
.scrubber output {min-width: 2.45rem; text-align: right; font-variant-numeric: tabular-nums}
.scrubber input {width: 100%; min-width: 2rem; cursor: pointer}
.plot-note {display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; background: var(--raised); border: 1px solid var(--edge); border-radius: 9px; font-size: clamp(.82rem, 1.15vw, 1rem)}
.plot-note span {color: var(--accent); font-size: 1.22rem; line-height: 1}
.plot-tools {display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; font-size: .74rem; padding: 0 .25rem}
.plot-tools label {display: flex; align-items: center; gap: .2rem}
.plot-tools :is(button, select) {padding: .28rem .42rem}
.status {font-size: .75rem; color: var(--muted); padding: 0 .3rem .15rem}
.solution {align-self: start}
.solution-body {padding: clamp(.65rem, 1.4vw, 1.35rem)}
#solution-steps {display: grid; gap: clamp(.65rem, 1.4vw, 1.4rem)}
.solution-step h3, .displacement-title {display: flex; align-items: center; gap: .52rem; font-size: clamp(.94rem, 1.45vw, 1.3rem); line-height: 1.25; margin-bottom: .42rem}
.displacement-title {margin-top: clamp(.65rem, 1.4vw, 1.4rem)}
.displacement-title[hidden] {display: none}
.displacement-title:not([hidden]) + .interpretation {margin-top: .42rem}
.step-note {font: .9rem/1.45 "Segoe UI", system-ui, sans-serif; color: var(--muted)}
.operand-conversion + .operand-conversion {border-top: 1px solid var(--edge); margin-top: .55rem; padding-top: .55rem}
.layout:has(.solution-breakdown[open]:not([hidden])) .workspace {align-self: start}
.step-number {width: 1.6rem; height: 1.6rem; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--raised); flex: none; font-size: .93rem}
.formula-block {border: 1px solid var(--border); border-radius: 9px; padding: .48rem .64rem; background: var(--field)}
.formula-block > div + div {margin-top: .4rem}
#solution-result, .solution-step:last-child .formula-block, .interpretation {background: var(--highlight); border-color: var(--accent-edge)}
#solution-result:empty {display: none}
.solution-breakdown {margin-top: .85rem}
.solution-breakdown > summary {cursor: pointer; color: var(--accent); font-weight: 650}
.solution-breakdown[open] > summary {margin-bottom: .8rem}
.result-cart {font-weight: 700; font-size: 1.22em}
.interpretation {display: flex; align-items: center; gap: .55rem; margin-top: clamp(.6rem, 1.5vw, 1.35rem); padding: .7rem .68rem; border: 1px solid; border-radius: 11px; color: var(--accent); font-size: clamp(.85rem, 1.3vw, 1.15rem); font-weight: 680; line-height: 1.4}
.interpretation::before {content: "⟳"; font-size: 1.6em; line-height: 1}
.displacement-title:not([hidden]) + .interpretation::before {content: "↦"}
.interpretation:empty {display: none}
.calculation-details {margin-top: .8rem; color: var(--muted); font-size: .82rem}
.calculation-details summary {cursor: pointer}
.calculation-details p {margin: .5rem 0; overflow-wrap: anywhere}
.disclaimer {text-align: center; color: var(--muted); font-size: .82rem; margin: .65rem 0 .1rem}
dialog {color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 14px; width: min(38rem, calc(100% - 2rem)); max-height: 88dvh; padding: 1.2rem}
dialog::backdrop {background: #02081bb5}
dialog p {margin-top: .8rem}
.close {float: right; margin: 0 0 .35rem .5rem}
.visually-hidden {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap}
@media (min-width: 1061px) and (min-height: 800px) {
  .layout:has(.solution-breakdown[open]:not([hidden])) :is(.inputs, .workspace) {position: sticky; top: .65rem; align-self: start}
}
@media (max-width: 1060px) {
  .layout {grid-template-columns: minmax(215px, 1fr) minmax(0, 2fr)}
  .solution {grid-column: 1 / -1}
  #solution-steps {grid-template-columns: repeat(3, minmax(0, 1fr))}
  .solution:has(#displacement-title:not([hidden])) #solution-steps {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .canvas-wrap {height: clamp(280px, 40vw, 440px)}
}
@media (max-width: 650px) {
  .masthead {flex-wrap: wrap; gap: .25rem; padding: .55rem .65rem}
  .header-actions {margin-left: auto; font-size: .8rem}
  .header-actions button {padding: .25rem .4rem}
  .layout {grid-template-columns: minmax(0, 1fr)}
  .inputs {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .operand {grid-template-columns: minmax(0, 1fr)}
  .operand-icon {max-width: 42px}
  .fields label, .operand-note {font-size: .76rem}
  .equations {font-size: .86rem}
  .canvas-wrap {height: clamp(255px, 73vw, 360px)}
  #solution-steps, .solution:has(#displacement-title:not([hidden])) #solution-steps {grid-template-columns: minmax(0, 1fr)}
}