:root {
  color-scheme: light;
  --paper: #f2ecdf;
  --paper-light: #fffaf0;
  --ink: #24211d;
  --muted: #706a5f;
  --line: #2a2722;
  --cobalt: #1657d8;
  --amber: #ee6b2f;
  --mineral: #439978;
  --active: var(--amber);
  --serif: "Iowan Old Style", "Palatino Linotype", Baskerville, Georgia, serif;
  --mono: var(--pg-font-mono, ui-monospace, monospace);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(rgba(38, 34, 27, .046) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 34, 27, .032) 1px, transparent 1px),
    var(--paper);
  background-size: 26px 26px;
  font-family: var(--serif);
}
button, input { font: inherit; }
.playground-chrome { position: relative; top: auto; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
button { border-radius: 1px; }

.atlas-header,
main,
footer {
  width: min(1180px, calc(100% - 28px));
  margin-inline: auto;
}

.atlas-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(28px, 6vw, 90px);
  min-height: 74svh;
  padding: clamp(50px, 9vw, 118px) 0 82px;
  align-items: start;
}
.kicker, .folio, .phase-instrument, .stage-status, .why-note strong, footer, .instrument-row label > span, .press-controls > p {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .09em;
}
.kicker { margin: 0 0 22px; font-size: .72rem; font-weight: 800; }
h1 { margin: 0; font-size: clamp(3.8rem, 10.8vw, 9.7rem); line-height: .78; letter-spacing: -.075em; font-weight: 500; }
h1 em { color: var(--cobalt); font-weight: 400; }
.lede { max-width: 42rem; margin: 38px 0 0; color: #4d473f; font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.5; }
.phase-instrument { border: 2px solid var(--line); background: var(--paper-light); box-shadow: 5px 5px 0 var(--line); font-size: .72rem; }
.phase-instrument p { display: flex; justify-content: space-between; margin: 0; padding: 12px; border-bottom: 2px solid var(--line); }
.phase-instrument ol { list-style: none; margin: 0; padding: 0; }
.phase-instrument li { display: flex; gap: 18px; padding: 12px; color: #91897d; border-bottom: 1px solid #cfc4b4; }
.phase-instrument li span { width: 2ch; }
.phase-instrument li[aria-current="step"] { color: var(--ink); background: color-mix(in srgb, var(--active) 14%, var(--paper-light)); font-weight: 900; }
.phase-instrument button { width: 100%; min-height: 46px; border: 0; background: var(--ink); color: white; cursor: pointer; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; }
.phase-instrument button:disabled { color: var(--muted); background: #ded5c7; cursor: not-allowed; }

.act { position: relative; margin: 0 0 clamp(90px, 12vw, 170px); scroll-margin-top: 28px; }
.folio { display: flex; justify-content: space-between; padding: 8px 0; border-top: 2px solid var(--line); border-bottom: 1px solid var(--line); font-size: .68rem; }
.act-heading { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 22px; padding: clamp(24px, 5vw, 62px) 0; }
.act-number { margin: -.1em 0 0; color: var(--active); font-size: clamp(4rem, 9vw, 7rem); line-height: .8; font-style: italic; }
h2 { margin: 0; font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: .88; letter-spacing: -.055em; font-weight: 500; }
.act-heading div > p { max-width: 48rem; margin: 20px 0 0; color: #514c44; font-size: clamp(1rem, 1.8vw, 1.22rem); line-height: 1.55; }

.specimen-stage { position: relative; overflow: hidden; border: 2px solid var(--line); background: #171713; box-shadow: 6px 6px 0 var(--line); isolation: isolate; }
.exposure-stage { min-height: clamp(370px, 68vw, 720px); }
.anneal-stage { width: min(900px, 92%); min-height: clamp(390px, 58vw, 680px); margin-inline: auto; }
.print-stage { min-height: clamp(500px, 76vw, 810px); background: var(--paper-light); }
.poster, .shader-mount, .stage-overlay { position: absolute; inset: 0; }
.poster { z-index: 0; display: grid; place-items: center; transition: opacity .28s ease; }
.poster img { width: min(64%, 550px); filter: contrast(.85); opacity: .44; }
.poster-exposure { background: radial-gradient(circle at 48% 52%, #39455a, #171713 56%, #0e0f0f); }
.poster-anneal { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--active) 34%, #24140d), #130f0c 62%); }
.poster-anneal span, .poster-print span { position: absolute; color: white; font-family: var(--mono); font-weight: 900; letter-spacing: .18em; font-size: clamp(1.2rem, 5vw, 3.7rem); mix-blend-mode: difference; }
.poster-print { background: #fff9ed; }
.poster-print img { width: 73%; opacity: .93; }
.print-stage.has-proof-source .poster-print img { width: 100%; height: 100%; object-fit: contain; opacity: 1; }
body:not([data-phase="printed"]) .print-stage.has-proof-source .poster-print img { filter: grayscale(1) contrast(.72); opacity: .34; }
.print-stage.has-proof-source .poster-print span,
.print-stage.has-proof-source .poster-print small { display: none; }
.poster-print span { color: var(--ink); mix-blend-mode: normal; }
.poster-print small { position: absolute; right: 7%; bottom: 6%; font-family: var(--mono); }
.shader-mount { z-index: 1; opacity: 0; transition: opacity .28s ease; }
.specimen-stage.is-live .shader-mount { opacity: 1; }
.specimen-stage.is-live .poster { opacity: 0; }
.print-stage.is-live.has-proof-source .poster { opacity: 1; }
.print-stage.is-live.has-proof-source .shader-mount { opacity: .72; mix-blend-mode: screen; }
.stage-overlay { z-index: 2; pointer-events: none; display: grid; place-items: center; }
.exposure-overlay { place-items: center end; padding-right: 7%; }
.exposure-overlay img { width: min(74%, 690px); opacity: .9; mix-blend-mode: multiply; filter: contrast(2.1); transform: translateY(-2%) rotate(-6deg); transform-origin: 58% 52%; transition: transform .28s ease; }
.crosshair { position: absolute; left: 16%; top: 19%; width: 43%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; transform: rotate(-8deg); }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: rgba(255,255,255,.4); }
.crosshair::before { left: 50%; top: -8%; width: 1px; height: 116%; }
.crosshair::after { top: 50%; left: -8%; height: 1px; width: 116%; }
.stage-status { position: absolute; z-index: 4; left: 10px; bottom: 10px; max-width: calc(100% - 20px); margin: 0; padding: 8px 10px; background: rgba(255,250,240,.92); border: 1px solid var(--line); color: var(--ink); font-size: .63rem; }
.retry-live { position: absolute; z-index: 5; right: 10px; bottom: 10px; min-height: 44px; border: 2px solid var(--line); background: var(--paper-light); box-shadow: 3px 3px 0 var(--line); font-family: var(--mono); font-size: .63rem; text-transform: uppercase; cursor: pointer; }
.retry-live:not([hidden]) + .exposure-readout { top: 70px; }
.exposure-readout { position: absolute; z-index: 3; right: 18px; top: 16px; color: white; font-family: var(--mono); text-align: right; }
.exposure-readout span { display: block; font-size: .64rem; }
.exposure-readout strong { display: block; font-size: clamp(2.4rem, 8vw, 6rem); line-height: .88; }
.thermal-scale { position: absolute; z-index: 3; right: 16px; top: 18px; display: flex; gap: 8px; align-items: center; color: white; font-family: var(--mono); font-size: .61rem; text-transform: uppercase; }
.thermal-scale i { width: clamp(70px, 18vw, 180px); height: 7px; background: linear-gradient(90deg, var(--cobalt), var(--amber), #fff2b2); }
.registration { position: absolute; z-index: 3; inset: 16px; pointer-events: none; }
.registration i { position: absolute; width: 12px; height: 12px; border: 1px solid var(--ink); border-radius: 50%; }
.registration i::before, .registration i::after { content: ""; position: absolute; background: var(--ink); }
.registration i::before { width: 18px; height: 1px; left: -4px; top: 5px; }
.registration i::after { width: 1px; height: 18px; left: 5px; top: -4px; }
.registration i:nth-child(1) { left: 0; top: 0; }.registration i:nth-child(2) { right: 0; top: 0; }.registration i:nth-child(3) { left: 0; bottom: 0; }.registration i:nth-child(4) { right: 0; bottom: 0; }

.instrument-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; margin-top: 18px; }
.instrument-row button, .press-controls button, .continue-link { min-height: 52px; border: 2px solid var(--line); background: var(--paper-light); color: var(--ink); box-shadow: 3px 3px 0 var(--line); cursor: pointer; }
.instrument-row button:hover:not(:disabled), .press-controls button:hover:not(:disabled), .continue-link:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--line); }
.instrument-row button:disabled, .press-controls button:disabled { cursor: not-allowed; opacity: .46; box-shadow: none; }
.plunger { display: grid; place-items: center; padding: 14px; touch-action: manipulation; user-select: none; }
.plunger span, #anneal-button span { font-family: var(--mono); font-size: .63rem; text-transform: uppercase; letter-spacing: .1em; }
.plunger strong, #anneal-button strong { font-size: 1.1rem; letter-spacing: .06em; }
.plunger.is-pressed { transform: translate(3px,3px); box-shadow: none; background: var(--active); }
.dial, .anneal-controls label { display: grid; gap: 9px; border: 2px solid var(--line); padding: 13px 16px; background: #e8dfd1; font-family: var(--mono); font-size: .68rem; }
.dial input { width: 100%; min-height: 44px; accent-color: var(--active); }
.dial-scale { display: flex; justify-content: space-between; font-size: .61rem; }
.dial-scale i { font-style: normal; }
.anneal-controls { grid-template-columns: 1.2fr 1fr; }
.anneal-controls input { width: 100%; min-height: 48px; border: 0; border-bottom: 2px solid var(--line); background: transparent; color: var(--ink); font-family: var(--mono); font-size: clamp(1.25rem, 3vw, 2rem); text-transform: uppercase; }
#anneal-button { display: grid; place-items: center; padding: 10px; }
.why-note { max-width: 58rem; margin: 24px 0 0; color: #5e574d; font-size: .93rem; line-height: 1.55; }
.why-note strong { color: var(--ink); font-size: .64rem; }
.continue-link { display: block; margin: 26px 0 0 auto; padding: 10px 18px; font-family: var(--mono); font-size: .73rem; text-transform: uppercase; }

.specimen-rail { position: relative; display: grid; grid-template-columns: 52px 14px minmax(0,1fr) auto; gap: 13px; align-items: center; width: min(760px, calc(100% - 28px)); margin: -78px auto 150px; padding: 10px 14px; border: 2px solid var(--line); background: var(--paper-light); box-shadow: 4px 4px 0 var(--line); font-family: var(--mono); text-transform: uppercase; font-size: .68rem; }
.specimen-rail::before { content: "inherited state"; position: absolute; left: 10px; top: -20px; font-size: .57rem; }
.specimen-rail img { width: 48px; height: 34px; object-fit: contain; }
.specimen-rail > span { width: 12px; height: 28px; background: var(--active); border: 1px solid var(--line); }
.specimen-rail strong { overflow: hidden; text-overflow: ellipsis; }
.specimen-rail small { color: var(--muted); }

.print-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(230px, .7fr); gap: 24px; align-items: start; }
.press-controls { position: sticky; top: 64px; border: 2px solid var(--line); background: #e8dfd1; box-shadow: 4px 4px 0 var(--line); }
.press-controls > p { margin: 0; padding: 10px; border-bottom: 2px solid var(--line); font-size: .66rem; }
.plate-grid { display: grid; grid-template-columns: 1fr 1fr; }
.plate-grid button { position: relative; min-height: 126px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: none; text-align: left; padding: 12px; }
.plate-grid button strong { display: block; margin: 5px 0; font-family: sans-serif; font-size: 2.8rem; line-height: 1; }
.plate-grid button span, .plate-grid button small { font-family: var(--mono); font-size: .61rem; text-transform: uppercase; }
.plate-grid button[data-plate="C"].is-pressed { background: #00a9d7; }.plate-grid button[data-plate="M"].is-pressed { background: #dc397b; }.plate-grid button[data-plate="Y"].is-pressed { background: #f3c800; }.plate-grid button[data-plate="K"].is-pressed { background: #282522; color: white; }
.final-actions { display: grid; gap: 8px; padding: 12px; }
.final-actions button { min-height: 48px; }

.lab-notes { margin: 60px 0 140px; padding: clamp(22px, 5vw, 60px); border: 2px solid var(--line); background: var(--paper-light); box-shadow: 6px 6px 0 var(--line); }
.lab-notes h2 { max-width: 12ch; margin-top: 38px; }
.notes-intro { max-width: 50rem; font-size: 1.2rem; line-height: 1.55; }
.decision-index { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--line); margin: 42px 0; }
.decision-index div { padding: 16px 12px; border-bottom: 1px solid var(--line); }
.decision-index dt { font-family: var(--mono); font-size: .69rem; text-transform: uppercase; font-weight: 900; }
.decision-index dd { margin: 8px 0 0; line-height: 1.45; color: #514b43; }
details { border-top: 1px solid var(--line); padding: 14px 0; }
summary { cursor: pointer; font-family: var(--mono); font-size: .74rem; text-transform: uppercase; font-weight: 900; }
details p { max-width: 55rem; line-height: 1.6; color: #514b43; }
a { color: #123f9e; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0 28px; border-top: 2px solid var(--line); font-size: .61rem; }

body[data-palette="cobalt"] { --active: var(--cobalt); }
body[data-palette="amber"] { --active: var(--amber); }
body[data-palette="mineral"] { --active: var(--mineral); }
body[data-phase="printed"] .atlas-header h1 em { color: var(--ink); }

@media (max-width: 720px) {
  .atlas-header { grid-template-columns: 1fr; min-height: auto; gap: 20px; padding: 28px 0 34px; }
  .kicker { margin-bottom: 12px; font-size: .61rem; }
  h1 { font-size: clamp(3.15rem, 16vw, 4.6rem); line-height: .82; }
  .lede { margin-top: 18px; font-size: 1rem; line-height: 1.38; }
  .phase-instrument { width: 100%; }
  .phase-instrument p { padding: 8px 10px; }
  .phase-instrument ol { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
  .phase-instrument li { display: grid; gap: 3px; padding: 8px 6px; border-right: 1px solid #cfc4b4; font-size: .57rem; }
  .phase-instrument button { min-height: 44px; }
  .act { margin-bottom: 96px; }
  .act-heading { grid-template-columns: 42px minmax(0,1fr); gap: 8px; padding: 18px 0; }
  .act-heading div > p { margin-top: 10px; font-size: .95rem; line-height: 1.4; }
  .act-number { font-size: 2.9rem; }
  h2 { font-size: clamp(2.35rem, 12vw, 3.8rem); }
  .act-exposure { display: grid; grid-template-columns: minmax(0,1fr); }
  .act-exposure > * { grid-column: 1; }
  .act-exposure .folio { order: 1; }
  .act-exposure .act-heading { order: 2; }
  .act-exposure .instrument-row { order: 3; grid-row: 3; grid-template-columns: .8fr 1.2fr; align-self: start; z-index: 6; margin: 12px; }
  .act-exposure .plunger { align-self: start; height: 76px; }
  .act-exposure .specimen-stage { order: 3; grid-row: 3; }
  .act-exposure .why-note { order: 4; }
  .act-exposure .continue-link { order: 5; }
  .exposure-stage { min-height: min(58svh, 400px); }
  .exposure-overlay { padding-right: 1%; }
  .exposure-overlay img { width: 86%; }
  .anneal-stage { width: 100%; min-height: 420px; }
  .instrument-row, .anneal-controls, .print-layout { grid-template-columns: 1fr; }
  .plunger { min-height: 76px; }
  .specimen-rail { grid-template-columns: 44px 12px minmax(0,1fr); margin-top: -56px; margin-bottom: 96px; }
  .specimen-rail small { grid-column: 3; }
  .print-stage { min-height: 510px; }
  .press-controls { position: relative; top: auto; }
  .plate-grid button { min-height: 92px; }
  .decision-index { grid-template-columns: 1fr; }
  footer { flex-direction: column; }
}

@media (max-width: 720px) and (max-height: 650px) {
  .atlas-header { gap: 12px; padding: 14px 0 18px; }
  .atlas-header .lede, .act-exposure .act-heading div > p { display: none; }
  .kicker { margin-bottom: 8px; }
  .phase-instrument p { padding: 5px 8px; }
  .phase-instrument li { padding-block: 5px; }
  .phase-instrument button { min-height: 44px; }
  .act-exposure .act-heading { padding: 12px 0; }
}

@media (max-width: 350px) {
  .atlas-header, main, footer { width: calc(100% - 20px); }
  .playground-chrome { width: calc(100% - 20px); }
  .exposure-stage { min-height: 350px; }
  .stage-status { font-size: .57rem; }
  .thermal-scale { right: 10px; top: 10px; }
  .specimen-rail { width: calc(100% - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}