:root {
  --counter: #0E2B25;
  --slip: #F3F5EE;
  --ink: #14201C;
  --brass: #C9A24B;
  --stamp: #B3261E;
  --recording: #4C5A66;
  --scripted: #8A5A00;
  --live: #0B6B3A;
  --on-counter: #C9D6CF;
  --muted: #3F4D47;
  --rule: #7B8881;
  --focus: #F3F5EE;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --tooth: .5rem;
}
* { box-sizing: border-box; }
body { margin: 0; font: 1.0625rem/1.55 var(--serif); color: var(--slip); background: var(--counter); }
.top, main { max-width: 74rem; margin: 0 auto; padding: 1.25rem 1rem 0; }
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-bottom: 3rem; }
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 .5rem; }
p { margin: .5rem 0; max-width: 42rem; }
.lede { color: var(--on-counter); }
.help { color: var(--on-counter); font-size: .95rem; }
.noscript { color: var(--slip); }

label, legend { display: block; font-weight: 700; margin: 0 0 .25rem; padding: 0; }
.field { margin: .75rem 0; }
select { width: 100%; font: inherit; min-height: 2.75rem; padding: .5rem .75rem; color: var(--ink); background: var(--slip); border: 2px solid var(--slip); border-radius: .25rem; }
fieldset { border: 0; margin: .75rem 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; }
legend { grid-column: 1 / -1; }
.segment { position: relative; margin: 0; font-weight: 400; }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment span { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .25rem .5rem; text-align: center; color: var(--slip); border: 2px solid var(--slip); }
.segment:first-of-type span { border-radius: .25rem 0 0 .25rem; }
.segment:last-of-type span { border-radius: 0 .25rem .25rem 0; margin-left: -2px; }
.segment input:focus-visible { outline: none; }
.segment input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.segment input:checked + span { background: var(--slip); color: var(--ink); font-weight: 700; }

button { font: inherit; min-height: 2.75rem; padding: .5rem 1rem; color: var(--ink); background: var(--slip); border: 2px solid var(--slip); border-radius: .25rem; cursor: pointer; text-align: left; }
button.primary { width: 100%; margin-top: .5rem; text-align: center; font-weight: 700; background: var(--brass); border-color: var(--brass); }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.slip { --focus: var(--ink); }

.recordings { display: grid; gap: .5rem; margin-top: .5rem; }

.slip { position: relative; margin-top: var(--tooth); margin-bottom: var(--tooth); padding: 1.25rem 1rem 1.5rem; color: var(--ink); background: var(--slip); filter: drop-shadow(0 .6rem .6rem rgba(0, 0, 0, .35)); scroll-margin-top: 1rem; }
.slip::before, .slip::after { content: ""; position: absolute; left: 0; right: 0; height: var(--tooth); }
.slip::before { top: calc(-1 * var(--tooth)); background: conic-gradient(from -45deg at bottom, transparent 90deg, var(--slip) 0) 50% 0 / calc(2 * var(--tooth)) 100%; }
.slip::after { bottom: calc(-1 * var(--tooth)); background: conic-gradient(from 135deg at top, transparent 90deg, var(--slip) 0) 50% 0 / calc(2 * var(--tooth)) 100%; }
.slip h2:focus { outline: none; }
.slip button { background: transparent; border-color: var(--ink); }
.slip button.approve { background: var(--brass); border-color: var(--brass); font-weight: 700; }
.slip button:disabled { opacity: .55; }
.slip .small, .slip .note { color: var(--muted); }
.empty { color: var(--muted); }
#trace, #decision { margin: .5rem 0; }

.banner { margin: .5rem 0 1rem; padding: .25rem 0 .25rem .75rem; border-left: .4rem solid var(--rule); font-weight: 700; }
.banner.mode-recording { border-left-color: var(--recording); }
.banner.mode-scripted { border-left-color: var(--scripted); }
.banner.mode-live { border-left-color: var(--live); }
.badge { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .03em; padding: .1rem .5rem; border-radius: .25rem; color: #fff; }
.badge.mode-recording { background: var(--recording); }
.badge.mode-scripted { background: var(--scripted); }
.badge.mode-live { background: var(--live); }

.step { padding: .75rem 0; }
.step + .step { border-top: 2px dashed var(--rule); }
.step h3 { font-size: 1rem; margin: 0 0 .25rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.step pre { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: .85rem/1.45 var(--mono); max-height: 18rem; overflow: auto; }
.step .note { font-size: .9rem; margin: .25rem 0 0; }
.outcome h3 { font-size: 1.05rem; }
.refused, .error { color: var(--stamp); font-weight: 700; }

#working { margin: .5rem 0; }
#working:empty { display: none; }
.working-text { font-weight: 700; margin: 0; }
.elapsed { font: .9rem/1.4 var(--mono); color: var(--muted); margin: .25rem 0; }
.bar { height: .4rem; background: var(--rule); overflow: hidden; position: relative; }
.bar span { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background: var(--ink); }

.signatures { margin: 1.5rem 0 .5rem; display: grid; gap: 1.25rem; }
.signatures[hidden] { display: none; }
.sign { position: relative; padding-top: 1.75rem; border-bottom: 2px solid var(--rule); min-height: 5rem; scroll-margin-top: 1rem; }
.sign-name { margin: 0; font-weight: 700; }
.sign-state { margin: .1rem 0 .4rem; font-size: .95rem; color: var(--muted); }
.sign-filled { border-bottom: 3px solid var(--ink); }
.sign-sealed { border-bottom: 3px solid var(--brass); }
.sign-sealed .sign-state { font-family: var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.sign-sealed { padding-right: 7rem; }
.seal { position: absolute; right: 0; top: .5rem; width: 6rem; height: 6rem; display: grid; place-items: center; border-radius: 50%; background: var(--brass); color: var(--ink); border: .3rem double var(--ink); font-weight: 700; font-size: 1rem; transform: rotate(-6deg); }
.sign-refused { padding-bottom: .5rem; }
.stamp { display: block; width: fit-content; max-width: 100%; margin: .5rem 0 .75rem auto; padding: .35rem .9rem .45rem; border: .3rem double var(--stamp); border-radius: .3rem; color: var(--stamp); background: var(--slip); text-align: center; transform: rotate(-3deg); }
.stamp-word { display: block; font: 700 1.9rem/1.1 var(--serif); }
.stamp-code { display: block; font: 700 .9rem/1.3 var(--mono); overflow-wrap: anywhere; }
.preview-line { margin: .25rem 0 0; color: var(--muted); }
.decision { padding: .25rem 0; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }

@media (min-width: 60rem) {
  .top, main { padding-left: 1.5rem; padding-right: 1.5rem; }
  main { grid-template-columns: 22rem minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "controls slip" "past slip"; gap: 2rem; align-items: start; }
  .controls { grid-area: controls; }
  .past { grid-area: past; }
  .slip { grid-area: slip; padding: 1.75rem 2rem 2rem; }
  .noscript { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .bar span { animation: sweep 1.4s ease-in-out infinite; }
  .stamp { animation: land .28s ease-out both; }
  @keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
  @keyframes land { from { transform: rotate(-12deg) scale(1.8); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none; transition: none; scroll-behavior: auto; }
  .bar { display: none; }
}