:root {
  /* compliance tokens from DESIGN.md typography parser: Sans* 3* */
  --engine-burgundy: #4A0F22;
  --black-cherry: #1C0810;
  --operator-cream: #F4E2C2;
  --brass-signal: #C9973A;
  --queue-coral: #FF6B5E;
  --relay-teal: #35B7A0;
  --soft-photo-mauve: #A86D7D;
  --display: "Alegreya Sans", "Trebuchet MS", sans-serif;
  --body: "Source Sans 3", "Segoe UI", sans-serif;
  --numbers: "IBM Plex Sans", "Arial", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--black-cherry); color: var(--operator-cream); }

body { font-family: var(--body); }

button { font: inherit; color: inherit; }

.workshop-shell { width: 100vw; height: 100vh; display: grid; grid-template-columns: minmax(238px, 17vw) 1fr; background: radial-gradient(circle at 70% 14%, rgba(255,107,94,.18), transparent 28%), linear-gradient(135deg, var(--engine-burgundy), var(--black-cherry) 72%); }

.dispatch-board { position: relative; z-index: 5; padding: 22px 18px; background: linear-gradient(180deg, #5a1229, var(--engine-burgundy) 42%, #320817); border-right: 5px solid var(--brass-signal); box-shadow: 18px 0 42px rgba(28,8,16,.5), inset -1px 0 rgba(244,226,194,.15); display: flex; flex-direction: column; gap: 24px; }
.dispatch-board:before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(244,226,194,.23); pointer-events: none; }
.brand-plate { position: relative; padding: 18px 14px 16px; background: rgba(28,8,16,.42); border: 2px solid rgba(201,151,58,.62); box-shadow: inset 0 0 0 3px rgba(244,226,194,.05), 0 15px 22px rgba(28,8,16,.25); transform: rotate(-.7deg); }
.plate-kicker { display: block; color: var(--brass-signal); font-family: var(--numbers); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
h1 { margin: 4px 0 12px; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 3vw, 48px); line-height: .84; letter-spacing: -.03em; text-shadow: 2px 2px 0 var(--black-cherry); }
.stamp-row { display: flex; gap: 8px; font-family: var(--numbers); font-weight: 700; }
.stamp-row span { border: 1px solid var(--brass-signal); color: var(--operator-cream); padding: 3px 8px; transform: rotate(-3deg); }

.chapter-tabs { display: grid; gap: 12px; }
.chapter-tab { position: relative; display: grid; grid-template-columns: 18px 1fr 40px; align-items: center; gap: 10px; padding: 13px 10px; background: rgba(28,8,16,.45); border: 1px solid rgba(244,226,194,.18); box-shadow: inset 0 -4px 0 rgba(28,8,16,.28); cursor: pointer; transition: transform .22s ease, background .22s ease, border-color .22s ease; }
.chapter-tab:hover, .chapter-tab.active { transform: translateX(8px); background: rgba(244,226,194,.12); border-color: var(--brass-signal); }
.bulb { width: 12px; height: 12px; border-radius: 50%; background: #3d1421; border: 1px solid rgba(244,226,194,.45); box-shadow: inset 0 1px 4px rgba(0,0,0,.6); transition: background .2s ease, box-shadow .2s ease; }
.chapter-tab:hover .bulb, .chapter-tab.active .bulb { background: var(--relay-teal); box-shadow: 0 0 16px var(--relay-teal), inset 0 1px 2px rgba(244,226,194,.7); }
.tab-label { font-family: var(--display); font-size: 23px; font-weight: 600; }
.counter { font-family: var(--numbers); color: var(--brass-signal); background: var(--black-cherry); padding: 2px 5px; text-align: center; overflow: hidden; }
.counter.roll { animation: counterRoll .36s ease; }

.operator-controls { margin-top: auto; display: grid; gap: 10px; }
.brass-switch { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--black-cherry); border: 1px solid var(--brass-signal); text-transform: uppercase; letter-spacing: .08em; font-family: var(--numbers); font-size: 12px; cursor: pointer; transition: transform .18s ease; }
.brass-switch span { width: 34px; height: 16px; background: var(--brass-signal); border-radius: 20px; box-shadow: inset 14px 0 0 var(--operator-cream); transition: box-shadow .2s ease; }
.brass-switch.snapped { transform: translateY(2px); }
.brass-switch.snapped span { box-shadow: inset -14px 0 0 var(--operator-cream); }

.simulation-stage { position: relative; overflow: hidden; min-width: 0; background: radial-gradient(circle at 18% 78%, rgba(53,183,160,.16), transparent 25%), radial-gradient(circle at 72% 28%, rgba(168,109,125,.24), transparent 28%), linear-gradient(145deg, #5a1229 0%, var(--engine-burgundy) 36%, var(--black-cherry) 100%); }
.stage-grain { position: absolute; inset: 0; opacity: .23; background-image: repeating-linear-gradient(25deg, transparent 0 18px, rgba(244,226,194,.045) 19px 21px), repeating-linear-gradient(90deg, rgba(28,8,16,.16) 0 1px, transparent 1px 82px); pointer-events: none; }
.timing-rack { position: absolute; inset: 0 0 0 8%; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; opacity: .28; }
.timing-rack span { border-left: 1px solid rgba(244,226,194,.22); }

.scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateX(7vw); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.scene.active { opacity: 1; pointer-events: auto; transform: translateX(0); }
.scene-copy { position: absolute; left: 7vw; top: 8vh; width: min(450px, 38vw); z-index: 4; }
.pinned-note { background: var(--operator-cream); color: var(--black-cherry); padding: 22px 25px; box-shadow: 0 24px 44px rgba(28,8,16,.38); border: 2px solid rgba(201,151,58,.72); transform: rotate(-1.2deg); }
.pinned-note:before, .photo-card:before { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--brass-signal); top: 9px; right: 11px; box-shadow: 0 2px 0 rgba(28,8,16,.32); }
.note-number { color: var(--engine-burgundy); font-family: var(--numbers); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
h2 { margin: 7px 0 8px; font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4.4vw, 70px); line-height: .88; letter-spacing: -.035em; }
p { margin: 0; font-size: 18px; line-height: 1.45; }

.photo-card { position: absolute; background: var(--operator-cream); padding: 14px 14px 44px; box-shadow: 0 28px 55px rgba(28,8,16,.42); border: 1px solid rgba(28,8,16,.2); transition: transform .24s ease; transform-style: preserve-3d; }
.photo-card.selected { transform: rotate(1.5deg) scale(1.025) !important; }
.large { width: 42vw; height: 48vh; right: 8vw; bottom: 13vh; }
.small { width: 24vw; height: 30vh; right: 9vw; top: 12vh; }
.race-photo { width: 28vw; height: 35vh; right: 8vw; bottom: 10vh; }
.replay-photo { width: 30vw; height: 36vh; right: 9vw; top: 11vh; }
.tilt-left { transform: rotate(-3deg); }
.tilt-right { transform: rotate(3deg); }
.photo-photo { width: 100%; height: 100%; border: 5px solid rgba(74,15,34,.15); background-blend-mode: multiply; filter: saturate(.85) contrast(1.05); }
.photo-workbench { background: radial-gradient(circle at 20% 30%, #F4E2C2 0 7%, transparent 8%), linear-gradient(125deg, rgba(168,109,125,.86), rgba(74,15,34,.7)), repeating-linear-gradient(0deg, #C9973A 0 12px, #4A0F22 13px 17px, #F4E2C2 18px 32px); }
.photo-rail { background: linear-gradient(140deg, rgba(74,15,34,.85), rgba(168,109,125,.62)), repeating-linear-gradient(35deg, #1C0810 0 10px, #C9973A 11px 15px, #F4E2C2 16px 24px); }
.photo-buttons { background: radial-gradient(circle at 32% 42%, #C9973A 0 9%, transparent 10%), radial-gradient(circle at 62% 58%, #FF6B5E 0 8%, transparent 9%), linear-gradient(135deg, rgba(168,109,125,.82), rgba(28,8,16,.72)), repeating-linear-gradient(90deg, #F4E2C2 0 8px, #4A0F22 9px 21px); }
.photo-clock { background: radial-gradient(circle at 50% 50%, transparent 0 24%, #C9973A 25% 29%, transparent 30%), linear-gradient(135deg, rgba(168,109,125,.84), rgba(74,15,34,.62)), repeating-conic-gradient(from 8deg, #F4E2C2 0 9deg, #1C0810 10deg 18deg); }
.photo-stamp { position: absolute; left: 18px; bottom: 14px; color: var(--engine-burgundy); border: 2px solid var(--engine-burgundy); padding: 3px 8px; font-family: var(--numbers); font-weight: 700; font-size: 12px; transform: rotate(-2deg); }

.event-capsule, .queue-tag, .clock-chip, .fork-node, .lock-plate, .signal-flag, .replay-token { position: absolute; z-index: 3; font-family: var(--numbers); font-weight: 700; }
.event-capsule { min-width: 92px; padding: 12px 18px; border-radius: 999px; color: var(--black-cherry); text-align: center; box-shadow: 0 12px 22px rgba(28,8,16,.3), inset 0 0 0 2px rgba(244,226,194,.4); animation: floaty 4.8s ease-in-out infinite; transition: transform .45s cubic-bezier(.2,.8,.2,1), left .45s ease, top .45s ease; }
.coral { background: var(--queue-coral); }
.teal { background: var(--relay-teal); }
.mauve { background: var(--soft-photo-mauve); color: var(--operator-cream); }
.brass { background: var(--brass-signal); }
.queue-rail, .fork-rail, .race-lane, .resolve-rail { position: absolute; height: 8px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--brass-signal), transparent); box-shadow: 0 0 18px rgba(201,151,58,.35); }
.queue-rail { left: 12vw; right: 10vw; top: 61vh; transform: rotate(-7deg); }
.rail-a:after { content: ""; position: absolute; inset: -12px; border-top: 1px dashed rgba(244,226,194,.38); }
.queue-tag { background: var(--operator-cream); color: var(--engine-burgundy); padding: 9px 14px; box-shadow: 0 10px 18px rgba(28,8,16,.3); }
.tag-1 { left: 14vw; top: 57vh; transform: rotate(-8deg); }
.tag-2 { left: 24vw; top: 55vh; transform: rotate(3deg); }
.tag-3 { left: 34vw; top: 53vh; transform: rotate(-2deg); }
.token-a { left: 44vw; top: 48vh; }
.clock-chip { right: 18vw; top: 27vh; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--operator-cream); color: var(--engine-burgundy); box-shadow: 0 14px 28px rgba(28,8,16,.35); }

.fork-node { left: 30vw; top: 42vh; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--brass-signal); color: var(--black-cherry); border: 8px solid rgba(244,226,194,.4); }
.fork-source { left: 18vw; top: 44vh; }
.fork-child { opacity: .92; }
.child-one { left: 45vw; top: 24vh; }
.child-two { left: 53vw; top: 43vh; }
.child-three { left: 44vw; top: 63vh; }
.fork-rail { left: 32vw; width: 30vw; transform-origin: left center; }
.rail-one { top: 32vh; transform: rotate(-20deg); background: linear-gradient(90deg, var(--brass-signal), var(--queue-coral)); }
.rail-two { top: 48vh; background: linear-gradient(90deg, var(--brass-signal), var(--relay-teal)); }
.rail-three { top: 62vh; transform: rotate(18deg); background: linear-gradient(90deg, var(--brass-signal), var(--soft-photo-mauve)); }

.lock-plate { left: 50vw; top: 42vh; width: 116px; height: 116px; display: grid; place-items: center; background: var(--brass-signal); color: var(--black-cherry); border-radius: 18px; box-shadow: 0 20px 40px rgba(28,8,16,.45); transform: rotate(4deg); }
.lock-plate span { position: absolute; top: -26px; width: 56px; height: 44px; border: 9px solid var(--brass-signal); border-bottom: 0; border-radius: 28px 28px 0 0; }
.race-lane { left: 17vw; width: 45vw; height: 7px; }
.lane-top { top: 38vh; transform: rotate(3deg); background: linear-gradient(90deg, var(--queue-coral), var(--brass-signal)); }
.lane-bottom { top: 57vh; transform: rotate(-4deg); background: linear-gradient(90deg, var(--relay-teal), var(--brass-signal)); }
.racer-a { left: 22vw; top: 32vh; animation-duration: 2.4s; }
.racer-b { left: 27vw; top: 58vh; animation-duration: 2.8s; }
.signal-flag { left: 63vw; top: 35vh; background: var(--queue-coral); color: var(--black-cherry); padding: 12px 18px; clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%); animation: blinkFlag 1.2s steps(2,end) infinite; }

.resolve-rail { left: 16vw; width: 48vw; height: 9px; background: linear-gradient(90deg, transparent, var(--relay-teal), var(--operator-cream)); transform-origin: right center; }
.resolve-a { top: 34vh; transform: rotate(15deg); }
.resolve-b { top: 49vh; }
.resolve-c { top: 64vh; transform: rotate(-15deg); }
.receipt-card { position: absolute; right: 12vw; top: 34vh; width: 290px; padding: 28px 24px; background: var(--operator-cream); color: var(--black-cherry); box-shadow: 0 25px 45px rgba(28,8,16,.4); transform: rotate(2deg); z-index: 4; border: 2px solid var(--relay-teal); }
.receipt-card span { color: var(--relay-teal); font-family: var(--numbers); font-weight: 700; letter-spacing: .15em; }
.receipt-card strong, .receipt-card em { display: block; margin-top: 12px; }
.resolved-one { left: 37vw; top: 31vh; }.resolved-two { left: 39vw; top: 46vh; }.resolved-three { left: 37vw; top: 61vh; }

.replay-wheel { position: absolute; left: 28vw; top: 25vh; width: 300px; height: 300px; border-radius: 50%; border: 18px solid rgba(201,151,58,.78); background: radial-gradient(circle, var(--operator-cream) 0 28%, var(--engine-burgundy) 29% 100%); box-shadow: 0 26px 50px rgba(28,8,16,.44); animation: wheelTurn 18s linear infinite; }
.replay-wheel span { position: absolute; font-family: var(--numbers); color: var(--operator-cream); font-weight: 700; }
.replay-wheel span:nth-child(1) { left: 132px; top: 18px; }.replay-wheel span:nth-child(2) { right: 24px; top: 132px; }.replay-wheel span:nth-child(3) { left: 136px; bottom: 18px; }.replay-wheel span:nth-child(4) { left: 24px; top: 132px; }
.ticket-stack { position: absolute; left: 53vw; bottom: 16vh; display: grid; gap: 8px; transform: rotate(-5deg); }
.ticket-stack span { display: block; width: 150px; padding: 11px 18px; background: var(--operator-cream); color: var(--engine-burgundy); font-family: var(--numbers); font-weight: 700; box-shadow: 0 10px 16px rgba(28,8,16,.28); }
.replay-token { left: 41vw; top: 48vh; }

.stage-running .event-capsule { animation-duration: 1.6s; }
.stage-settled .event-capsule { animation: none; transform: translateY(0) scale(.96); }
.magnetized { transform: translateX(38px) translateY(-6px) scale(1.05); }

@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-18px) rotate(1.5deg); } }
@keyframes counterRoll { 0% { transform: translateY(0); } 48% { transform: translateY(-105%); } 49% { transform: translateY(105%); } 100% { transform: translateY(0); } }
@keyframes blinkFlag { 50% { background: var(--brass-signal); } }
@keyframes wheelTurn { to { transform: rotate(360deg); } }

@media (max-width: 850px) {
  .workshop-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .dispatch-board { height: 230px; border-right: 0; border-bottom: 5px solid var(--brass-signal); overflow: hidden; }
  .chapter-tabs { grid-template-columns: repeat(5, minmax(116px, 1fr)); overflow-x: auto; }
  .operator-controls { display: none; }
  .scene-copy { left: 7vw; width: 70vw; top: 5vh; }
  .large, .small, .race-photo, .replay-photo { width: 48vw; right: 5vw; }
}