:root {
  color-scheme: light dark;
  --paper: #f6f5f0;
  --panel: #fffef9;
  --ink: #171b29;
  --muted: #47526a;
  --line: #bdc4d1;
  --accent: #2e6bfa;
  --action: #174cd1;
  --surface-blue: #e0eaff;
  --headline: "Archivo Narrow", "Noto Sans", sans-serif;
  --body: "Noto Sans", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141824;
  --panel: #202638;
  --ink: #f7f7fb;
  --muted: #bec8df;
  --line: #65738f;
  --action: #2e64ea;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="system"] {
    --paper: #141824;
    --panel: #202638;
    --ink: #f7f7fb;
    --muted: #bec8df;
    --line: #65738f;
    --action: #2e64ea;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--body); }
a { color: inherit; text-underline-offset: .23em; }
h1, h2, h3, p { margin-block: 0 .55em; }
h1, h2, h3 { font-family: var(--headline); line-height: 1.04; }
h1 { font-size: clamp(2.25rem, 6vw, 5.35rem); }
h2 { font-size: clamp(1.45rem, 3.5vw, 2.3rem); }
button, select { font: inherit; }
button, .button {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  padding: .55em .8em; min-block-size: 44px; cursor: pointer; font-weight: 650; text-decoration: none;
}
button[aria-pressed=true] { background: var(--surface-blue); border-color: #2e6bfa; color: #102b73; }
button.primary, .button.primary { background: var(--action); border-color: transparent; color: white; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ruler-tool { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; }
.ruler-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .65rem; padding: .75rem; }
.ruler-choices { display: flex; gap: .375rem; flex-wrap: wrap; }
.ruler-edge { position: relative; background: var(--surface-blue); border-block: 2px solid var(--accent); color: #10327e; direction: ltr; }
.ruler-edge canvas { display: block; inline-size: 100%; block-size: 68px; }
.ruler-edge input { position: absolute; inset: 0; opacity: 0; inline-size: 100%; block-size: 100%; margin: 0; touch-action: none; cursor: crosshair; }
.ruler-edge:focus-within { outline: 3px solid var(--accent); outline-offset: 4px; z-index: 1; }
.ruler-reading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .55rem .75rem; font-size: .88rem; }
.ruler-reading output { font-size: 1.24rem; font-variant-numeric: tabular-nums; font-weight: 750; white-space: nowrap; }
.ruler-status { color: var(--muted); margin: 0; }
.ruler-bay { padding: .85rem; border-block-start: 1px solid var(--line); }
.ruler-bay p { max-inline-size: 65ch; font-size: .9rem; }
.outline-space { direction: ltr; margin-block: .55rem; }
.card-outline {
  inline-size: 275px; aspect-ratio: 85.6 / 53.98; border: 2px solid var(--accent); border-radius: 9px;
  background: var(--surface-blue); max-inline-size: 100%;
}
.adjustments { display: flex; gap: .5rem; max-inline-size: 38rem; align-items: center; margin-block: .5rem; }
.adjustments input { min-inline-size: 0; flex: 1; accent-color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }