/* Hallmark · macrostructure: Workbench (asymmetric split: statement left, instrument right) · tone: utilitarian/austere · anchor hue: signal orange on ice */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font: var(--text-base)/1.55 var(--font-body);
  min-height: 100dvh; display: flex; flex-direction: column;
}
.mono { font-family: var(--font-mono); }
a { color: var(--color-accent-ink); text-underline-offset: 3px; }
.wrap { width: min(1120px, 100% - 2 * var(--space-lg)); margin-inline: auto; }
.narrow { max-width: 640px; margin-inline: 0; margin-left: max(var(--space-lg), calc((100% - 1120px) / 2)); }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; top: var(--space-sm); left: var(--space-sm); background: var(--color-surface); padding: var(--space-sm) var(--space-md); z-index: 10; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
#app:focus { outline: none; }

/* header */
.top { width: min(1120px, 100% - 2 * var(--space-lg)); margin: var(--space-lg) auto 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); padding-bottom: var(--space-md); }
.mark { display: inline-flex; align-items: center; gap: var(--space-sm); font: 600 var(--text-base)/1 var(--font-mono); letter-spacing: 0.02em; color: var(--color-ink); text-decoration: none; }
.mark-icon { width: 22px; height: 22px; color: var(--color-accent-ink); }
.top-note { margin: 0; font: var(--text-sm)/1 var(--font-mono); color: var(--color-ink-2); white-space: nowrap; }

/* main layouts */
main { flex: 1; padding-block: var(--space-2xl) var(--space-3xl); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; }
h1 { font: 500 var(--text-display)/1.04 var(--font-display); letter-spacing: -0.015em; margin: 0 0 var(--space-lg); text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
h2 { font: 600 var(--text-lg)/1.2 var(--font-body); margin: 0 0 var(--space-md); }
.lede { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); max-width: 52ch; margin: 0 0 var(--space-xl); }
.facts { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.facts li { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); max-width: 52ch; }
.facts b { color: var(--color-ink); font-weight: 600; }

/* panel / form */
.panel { background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-top: 6px solid var(--color-accent); padding: var(--space-lg); display: grid; gap: var(--space-lg); }
.narrow .panel { margin-top: var(--space-xl); }
.field { display: grid; gap: var(--space-sm); }
label, legend { font: 600 var(--text-sm)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); padding: 0; }
textarea, input[type="text"], input[type="number"], select {
  font: var(--text-base)/1.5 var(--font-mono); color: var(--color-ink); background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%; min-width: 0;
}
textarea { resize: vertical; min-height: 11rem; }
.count { margin: 0; text-align: right; font: var(--text-sm)/1 var(--font-mono); color: var(--color-ink-2); }
.count.over { color: var(--color-danger); font-weight: 700; }

.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); border: 0; margin: 0; padding: 0; min-width: 0; }
.choices legend { grid-column: 1 / -1; margin-bottom: var(--space-sm); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: block; text-align: center; padding: 10px 6px; border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-sm); background: var(--color-paper); font: var(--text-sm)/1.2 var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--color-ink); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); }
.choice:hover span { background: var(--color-paper-2); }
.choice input:checked + span { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.choice input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.custom-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.custom-row[hidden] { display: none; }
.warn { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); border-left: 3px solid var(--color-accent); padding-left: var(--space-md); }
.form-error { margin: 0; color: var(--color-danger); font-weight: 600; }
.form-error[hidden] { display: none; }

/* buttons */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 var(--space-lg); font: 600 var(--text-base)/1 var(--font-body); color: var(--color-ink); background: var(--color-accent); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--color-accent-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn.busy { cursor: progress; }
.btn-quiet { background: transparent; }
.btn-quiet:hover { background: var(--color-paper-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* result views */
.linkbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); }
.meta { margin: var(--space-lg) 0 0; display: grid; gap: var(--space-md); }
.meta div { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
.meta dt { font: var(--text-sm)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.meta dd { margin: var(--space-xs) 0 0; overflow-wrap: anywhere; }
.clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--rule-hair) solid var(--color-ink); background: var(--color-surface); }
.cell { padding: var(--space-lg) var(--space-sm) var(--space-md); display: grid; gap: var(--space-sm); justify-items: center; }
.cell + .cell { border-left: var(--rule-hair) solid var(--color-rule); }
.num { font: 500 clamp(2rem, 1rem + 5vw, 4rem)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.lab { font: var(--text-sm)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-2); }
.reveal { margin: 0; padding: var(--space-lg); background: var(--color-surface); border: var(--rule-hair) solid var(--color-ink); border-left: 6px solid var(--color-accent); font: var(--text-base)/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; }
.state-line { font: var(--text-base)/1 var(--font-mono); color: var(--color-ink-2); }

/* api + footer */
.api { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl); }
.api-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); }
.api p { color: var(--color-ink-2); max-width: 46ch; margin: 0; }
.api-code pre { margin: 0; padding: var(--space-lg); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); overflow-x: auto; font: var(--text-sm)/1.6 var(--font-mono); }
.foot { padding-block: var(--space-xl); }
.foot p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); max-width: 70ch; }

@media (max-width: 860px) {
  .split, .api-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  main { padding-block: var(--space-xl) var(--space-2xl); }
  .narrow { margin-left: auto; }
  .top-note { display: none; }
}
@media (max-width: 460px) {
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linkbox { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: var(--space-md); }
  .btn { white-space: normal; }
}
@media (prefers-reduced-motion: no-preference) {
  main > div { animation: enter var(--dur-base) var(--ease-out); }
  @keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}