/* Technical Universe: a printed spec sheet. Inputs left, live results right. */
:root {
  --ml-ground: #EFEEEA;
  --ml-surface: #E2E1DB;
  --ml-surface-2: #FFFFFF;
  --ml-line: #121316;
  --ml-ink: #121316;
  --ml-ink-soft: #55575E;
  --ml-accent: #121316;
  --ml-on-accent: #EFEEEA;
  --ml-highlight: #FF4A1C;
  --ml-on-highlight: #121316;
  --ml-code-bg: #121316;
  --ml-code-ink: #7FD4FF;
  --ml-radius: 0;
  --ml-radius-lg: 0;
  --ml-depth: 0;
  --ml-font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --ml-font-text: 'Hanken Grotesk', system-ui, sans-serif;
  --ml-font-code: 'IBM Plex Mono', ui-monospace, monospace;
  --ml-logo-ink: #061632;
  --ml-logo-satellite: #FFC600;
  --ml-logo-planet: #EFEEEA;
  --ml-logo-rim: #061632;
  color-scheme: light;
}
:root[data-ml-theme="dark"] {
  --ml-ground: #141518;
  --ml-surface: #24262B;
  --ml-surface-2: #1C1D21;
  --ml-line: #E8E7E2;
  --ml-ink: #EFEEEA;
  --ml-ink-soft: #A9ABB2;
  --ml-accent: #EFEEEA;
  --ml-on-accent: #121316;
  --ml-highlight: #FF4A1C;
  --ml-on-highlight: #121316;
  --ml-code-bg: #0B0C0E;
  --ml-code-ink: #7FD4FF;
  --ml-logo-ink: #FFFFFF;
  --ml-logo-satellite: #FFC600;
  --ml-logo-planet: #141518;
  --ml-logo-rim: #FFFFFF;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--ml-ground); color: var(--ml-ink); font-family: var(--ml-font-text); font-size: 17px; line-height: 1.5; font-synthesis: none; margin: 0; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ml-ground); }
h1, h2, p { margin: 0; }
a { color: var(--ml-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, .scroll:focus-visible { outline: 3px solid var(--ml-ink); outline-offset: 3px; }
button, input, textarea { font: inherit; color: inherit; }

.wrap { padding-left: max(clamp(16px, 4vw, 64px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 4vw, 64px), env(safe-area-inset-right, 0px)); }

.top { border-bottom: 2px solid var(--ml-line); }
.top .wrap { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.top h1 { font-family: var(--ml-font-display); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.top .by { font-size: 15px; color: var(--ml-ink-soft); }
.top .name { min-width: 0; margin-right: auto; }

.btn { background: var(--ml-accent); color: var(--ml-on-accent); border: 2px solid var(--ml-accent); border-radius: var(--ml-radius); padding: 11px 20px; font-weight: 700; min-height: 44px; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--ml-ink-soft); border-color: var(--ml-ink-soft); }
.btn.quiet { background: transparent; color: var(--ml-ink); border-color: var(--ml-line); }
.btn.quiet:hover { background: var(--ml-surface); border-color: var(--ml-line); }
.icon { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: transparent; color: var(--ml-ink); border: 2px solid var(--ml-line); cursor: pointer; flex: none; }
.icon:hover { background: var(--ml-surface); }
.icon[aria-pressed="true"] { background: var(--ml-accent); color: var(--ml-on-accent); }

.lead { padding-top: 16px; max-width: 72ch; box-sizing: content-box; }
.tool { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 40px; align-items: start; padding-block: 24px; }
.opts { min-width: 0; display: grid; gap: 8px; }

.group { border-bottom: 2px solid var(--ml-line); padding-bottom: 12px; }
.group summary { cursor: pointer; padding-block: 8px; }
.group summary h2 { display: inline; font-family: var(--ml-font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; }
.items { display: grid; gap: 18px; padding-top: 8px; }
.hint { font-size: 15px; color: var(--ml-ink-soft); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .lab { display: block; padding: 0; margin-bottom: 6px; font-size: 15px; font-weight: 700; }
.field { width: 100%; min-height: 52px; background: var(--ml-surface-2); border: 2px solid var(--ml-line); border-radius: var(--ml-radius); padding: 10px 12px; }
textarea.field { min-height: 96px; resize: vertical; display: block; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: block; }
.chip input, .sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: block; padding: 8px 12px; min-height: 40px; font-size: 15px; font-weight: 500; line-height: 22px; background: var(--ml-surface-2); border: 1px solid var(--ml-line); }
.chip input:hover + span { background: var(--ml-surface); }
.chip input:checked + span { background: var(--ml-accent); color: var(--ml-on-accent); }
.chip input:focus-visible + span, .sw input:focus-visible + span { outline: 3px solid var(--ml-ink); outline-offset: 3px; }

.fonts { max-height: 216px; overflow-y: auto; border: 2px solid var(--ml-line); background: var(--ml-surface-2); position: relative; }
.fonts p { padding: 8px 12px 4px; font-size: 15px; font-weight: 700; color: var(--ml-ink-soft); }
.fonts .chip { content-visibility: auto; contain-intrinsic-size: auto 42px; }
.fonts .chip span { border: 0; font-size: 19px; font-weight: 400; line-height: 26px; }

.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.sw { position: relative; display: block; width: 40px; height: 40px; }
.sw span { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid var(--ml-line); font-size: 18px; font-weight: 800; }
.sw span::after { content: ""; }
.sw input:checked + span::after { content: "\2713"; }
.custom { display: flex; gap: 6px; margin-top: 6px; }
.custom input[type="color"] { width: 44px; height: 44px; padding: 2px; flex: none; background: var(--ml-surface-2); border: 2px solid var(--ml-line); cursor: pointer; }
.custom .field { min-height: 44px; width: 120px; padding: 6px 10px; font-family: var(--ml-font-code); font-size: 15px; }

.live { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); display: flex; flex-direction: column; gap: 10px; min-width: 0; height: min(calc(100vh - 24px), 1000px); }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--ml-line); flex: none; }
.fig { padding: 8px 12px; min-width: 0; }
.fig + .fig { border-left: 2px solid var(--ml-line); }
.fig b { display: block; font-family: var(--ml-font-display); font-weight: 800; font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fig span { display: block; font-size: 15px; color: var(--ml-ink-soft); }
.fig .k { font-weight: 700; color: var(--ml-ink); }
.fig.on { background: var(--ml-highlight); color: var(--ml-on-highlight); }
.fig.on span, .fig.on .k { color: var(--ml-on-highlight); }
.warn { flex: none; max-height: 112px; overflow-y: auto; background: var(--ml-highlight); color: var(--ml-on-highlight); padding: 8px 12px; font-size: 15px; font-weight: 600; }
.warn ul { margin: 2px 0 0; padding-left: 18px; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex: none; }
.bar .btn { margin-left: auto; padding-block: 7px; min-height: 40px; }
.frame { flex: 1; min-height: 0; overflow: auto; background: var(--ml-surface); border: 2px solid var(--ml-line); }
#pv { margin-inline: auto; max-width: 100%; }
#pv.phone { width: 390px; }

.skill { border-top: 2px solid var(--ml-line); padding-block: 32px; display: grid; gap: 14px; scroll-margin-top: 16px; }
.skill h2 { font-family: var(--ml-font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; }
.skill .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.skill pre { margin: 0; max-height: 520px; overflow: auto; padding: 16px; background: var(--ml-code-bg); color: var(--ml-code-ink); font-family: var(--ml-font-code); font-size: 15px; line-height: 1.5; white-space: pre; }
.foot { border-top: 2px solid var(--ml-line); }
.foot .wrap { display: flex; align-items: center; gap: 12px; padding-block: 16px; font-size: 15px; }

@media (max-width: 960px) {
  .tool { display: flex; flex-direction: column; gap: 20px; padding-top: 0; align-items: stretch; }
  .live { order: -1; height: 46vh; min-height: 300px; z-index: 5; gap: 6px; padding-block: 8px; background: var(--ml-ground); border-bottom: 2px solid var(--ml-line); top: env(safe-area-inset-top, 0px); }
  .figs { grid-template-columns: 1fr; }
  .fig:not(.on) { display: none; }
  .fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 2px 10px; }
  .fig b { font-size: 18px; }
  .warn { max-height: 60px; padding-block: 4px; }
  .bar { gap: 8px; }
  .bar .chips { gap: 3px; }
  .bar .chip span { padding: 4px 7px; min-height: 32px; }
  .bar .btn { min-height: 34px; padding: 2px 8px; font-size: 15px; }
  .top #reset { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }