:root {
  /* compliance typography note: IBM Plex Sans Condensed** Condense for call-sheet labels. Interpret the planned seed **prototype** prototype as cinematic rehearsal rather than product polish. The tone is speculative. Space Grotesk** Grotesk Grotes for compact interface copy and small technical captions when needed */
  --stage-black: #0B0C10;
  --draft-blue: #B9E7FF;
  --safety-vermilion: #FF4D2E;
  --softbox-ivory: #F4EEDC;
  --chrome: #7C8B94;
  --prototype-violet: #6D5DF7;
  --green-screen: #78F2A6;
  --display: "Bricolage Grotesque", Inter, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --condensed: "IBM Plex Sans Condensed", sans-serif;
  --space: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--stage-black);
  color: var(--softbox-ivory);
  font-family: var(--space);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background:
    repeating-linear-gradient(90deg, rgba(244,238,220,.035) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 50% 20%, rgba(185,231,255,.08), transparent 42%),
    linear-gradient(rgba(11,12,16,0), rgba(11,12,16,.38));
  mix-blend-mode: screen;
}

.stage-shell { position: relative; min-height: 100vh; background: var(--stage-black); }
.prototype-stage { position: relative; z-index: 2; }
.stage-bay {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 7rem);
  display: grid;
  place-items: center;
  isolation: isolate;
  border-bottom: 1px solid rgba(124,139,148,.2);
}

.stage-bay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(110deg, rgba(124,139,148,.14), transparent 22% 72%, rgba(109,93,247,.13)),
    radial-gradient(ellipse at var(--light-x, 50%) 38%, rgba(244,238,220,.3), rgba(185,231,255,.08) 25%, transparent 58%);
  opacity: .95;
  transition: background 700ms ease;
}

.stage-bay::after {
  content: "";
  position: absolute;
  inset: 10vh 8vw;
  border: 1px dashed rgba(185,231,255,.25);
  clip-path: polygon(5% 0, 100% 9%, 92% 100%, 0 88%);
  pointer-events: none;
  z-index: -1;
}

.projector-dust {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .45;
  background-image:
    radial-gradient(circle, rgba(244,238,220,.4) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(185,231,255,.25) 0 1px, transparent 1.2px);
  background-size: 97px 113px, 131px 89px;
  transform: translate3d(0, var(--dust-y, 0), 0);
}

.rigging { position: fixed; left: 0; right: 0; height: 42px; z-index: 4; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 44px, rgba(124,139,148,.45) 44px 47px), linear-gradient(rgba(124,139,148,.5), transparent 2px); }
.rigging-top { top: 0; }
.rigging-bottom { bottom: 0; transform: rotate(180deg); opacity: .25; }
.spotlight { position: fixed; inset: -18vh 24vw auto; height: 75vh; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(244,238,220,.55), rgba(185,231,255,.12) 34%, transparent 70%); clip-path: polygon(48% 0, 56% 0, 100% 100%, 0 100%); opacity: var(--spot-opacity, .56); transform: translateX(var(--spot-x, 0)) skewX(var(--spot-skew, -7deg)); filter: blur(1px); transition: opacity 500ms ease; }

.scene-counter, .call-rail { position: fixed; z-index: 7; font-family: var(--condensed); letter-spacing: .12em; text-transform: uppercase; color: var(--softbox-ivory); }
.scene-counter { top: 1rem; left: 1rem; display: grid; grid-template-columns: auto auto; gap: .1rem .55rem; padding: .7rem .8rem; background: rgba(11,12,16,.58); border: 1px solid rgba(185,231,255,.24); box-shadow: 0 0 0 1px rgba(255,77,46,.2) inset; }
.counter-label { color: var(--chrome); font-size: .72rem; }
.counter-number { font-size: 1.6rem; color: var(--safety-vermilion); line-height: .85; }
.counter-scene { grid-column: 1 / 3; color: var(--draft-blue); font-size: .72rem; }
.call-rail { right: 1rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .5rem; }
.call-rail a { color: var(--chrome); text-decoration: none; font-size: .74rem; padding: .35rem .45rem; border-right: 3px solid rgba(124,139,148,.5); background: rgba(11,12,16,.45); transition: transform 180ms steps(2), color 180ms, border-color 180ms; }
.call-rail a.active { color: var(--softbox-ivory); border-color: var(--safety-vermilion); transform: translateX(-6px) rotate(-1deg); }

h1, h2 { font-family: var(--display); margin: 0; line-height: .86; letter-spacing: -.055em; }
p { margin: 0; }
.production-label, .shot-label, .floor-stamp, .crew-note, .production-card, .last-mark { font-family: var(--condensed); text-transform: uppercase; letter-spacing: .12em; }

.floor-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(185,231,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(185,231,255,.09) 1px, transparent 1px); background-size: 8vw 8vw; transform: perspective(600px) rotateX(60deg) scale(1.4); transform-origin: center bottom; opacity: .55; }
.floor-grid.angled { transform: perspective(650px) rotateX(58deg) rotateZ(-8deg) scale(1.35); }
.diagonal-wing { position: absolute; top: -5vh; bottom: -5vh; width: 25vw; background: linear-gradient(90deg, rgba(11,12,16,.9), rgba(11,12,16,.2)); z-index: 0; }
.left-wing { left: -8vw; transform: skewX(-13deg); border-right: 1px solid rgba(124,139,148,.32); }
.right-wing { right: -9vw; transform: skewX(-13deg); border-left: 1px solid rgba(124,139,148,.32); }
.tape-path { position: absolute; height: 12px; background: var(--safety-vermilion); box-shadow: 0 0 0 2px rgba(11,12,16,.5) inset; transform-origin: left center; opacity: .9; }
.tape-path-a { width: 48vw; left: 8vw; bottom: 16vh; transform: rotate(-12deg) scaleX(var(--tape-scale, .1)); }
.tape-path-b { width: 34vw; right: 10vw; top: 24vh; background: var(--green-screen); transform: rotate(23deg) scaleX(var(--tape-scale, .1)); }

.wordmark-rig { text-align: center; transform: translateY(2vh); filter: drop-shadow(0 24px 34px rgba(0,0,0,.65)); }
.production-label { color: var(--draft-blue); font-size: clamp(.72rem, 1.2vw, 1rem); margin-bottom: 1rem; }
.acrylic-wordmark { font-size: clamp(4.4rem, 15vw, 17rem); color: var(--softbox-ivory); text-shadow: 0 0 1px var(--softbox-ivory), 0 0 20px rgba(185,231,255,.33), .045em .045em 0 rgba(109,93,247,.62), -.025em .025em 0 rgba(255,77,46,.75); }
.acrylic-wordmark em { font-family: var(--condensed); font-style: normal; font-size: .25em; letter-spacing: .03em; color: var(--draft-blue); border: 2px solid rgba(185,231,255,.5); padding: .05em .12em; vertical-align: middle; text-shadow: none; }
.floor-stamp { display: inline-block; margin-top: 1rem; color: var(--stage-black); background: var(--softbox-ivory); padding: .45rem .8rem; transform: rotate(-1deg); }
.crew-note { position: absolute; background: rgba(244,238,220,.92); color: var(--stage-black); padding: .7rem .9rem; font-size: .78rem; box-shadow: 0 11px 0 rgba(0,0,0,.22); }
.note-one { left: 10vw; top: 28vh; transform: rotate(-8deg); }
.note-two { right: 13vw; bottom: 23vh; transform: rotate(5deg); }
.hero-clap { position: absolute; right: 9vw; top: 18vh; width: 200px; transform: rotate(8deg); }
.clap-top { display: grid; grid-template-columns: repeat(3,1fr); height: 42px; background: var(--softbox-ivory); border: 2px solid var(--stage-black); transform-origin: left bottom; animation: clap 5s steps(2) infinite; }
.clap-top span:nth-child(odd) { background: var(--stage-black); transform: skewX(-22deg); }
.clap-body { background: rgba(185,231,255,.92); color: var(--stage-black); border: 2px solid var(--stage-black); border-top: 0; padding: .8rem; font-family: var(--condensed); text-transform: uppercase; }
.scene-subtitle { position: absolute; left: 13vw; bottom: 11vh; max-width: 540px; font-family: var(--serif); font-size: clamp(1.6rem, 3.7vw, 4.4rem); line-height: .95; color: var(--softbox-ivory); }

.hanging-sheet { width: min(540px, 82vw); min-height: 360px; padding: 3rem; background: rgba(185,231,255,.72); color: var(--stage-black); border: 1px solid rgba(244,238,220,.75); backdrop-filter: blur(6px); box-shadow: 18px 24px 0 rgba(109,93,247,.34); transform: rotate(-3deg); position: absolute; left: 8vw; top: 16vh; }
.hanging-sheet::before, .hanging-sheet::after, .glass-pane::before { content: ""; position: absolute; top: -22vh; width: 1px; height: 22vh; background: var(--chrome); }
.hanging-sheet::before { left: 18%; } .hanging-sheet::after { right: 22%; }
.pin { position: absolute; top: .9rem; right: 1.2rem; width: 18px; height: 18px; background: var(--safety-vermilion); border-radius: 50%; box-shadow: -220px 9px 0 var(--prototype-violet); }
.hanging-sheet h2, .hinge-panel h2, .glass-pane h2, .final-object h2 { font-size: clamp(3rem, 8vw, 8rem); }
.hanging-sheet p, .hinge-panel p, .glass-pane p, .subtitle-slate p, .final-object p { font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 2.35rem); line-height: 1.02; margin-top: 1.2rem; }
.foam-skyline { position: absolute; right: 8vw; bottom: 15vh; width: 46vw; height: 38vh; display: flex; align-items: flex-end; gap: .75vw; filter: drop-shadow(0 30px 0 rgba(0,0,0,.3)); }
.tower { display: block; flex: 1; background: var(--softbox-ivory); border: 1px solid rgba(11,12,16,.45); clip-path: polygon(0 7%, 100% 0, 96% 100%, 4% 96%); transform: translateY(var(--sky-nudge, 0)); }
.t1 { height: 44%; } .t2 { height: 70%; background: var(--draft-blue); } .t3 { height: 53%; } .t4 { height: 86%; background: var(--prototype-violet); } .t5 { height: 61%; } .t6 { height: 37%; background: var(--green-screen); }
.tape-roll { position: absolute; left: 47vw; bottom: 18vh; width: 108px; height: 108px; border-radius: 50%; background: conic-gradient(var(--softbox-ivory), #d7cfb8, var(--softbox-ivory)); border: 16px solid var(--safety-vermilion); }
.tape-roll span { position: absolute; inset: 25px; border-radius: 50%; background: var(--stage-black); border: 1px solid var(--chrome); }
.safe-frame { position: absolute; right: 16vw; top: 15vh; width: 30vw; height: 30vh; border: 2px dashed var(--draft-blue); color: var(--draft-blue); font-family: var(--condensed); text-transform: uppercase; letter-spacing: .15em; padding: .8rem; transform: rotate(4deg); }
.production-card { position: absolute; padding: .7rem 1rem; color: var(--stage-black); background: var(--green-screen); font-size: .72rem; }
.card-a { right: 12vw; bottom: 9vh; transform: rotate(-2deg); } .card-b { left: 14vw; bottom: 16vh; background: var(--prototype-violet); color: var(--softbox-ivory); transform: rotate(3deg); }

.exposure-sheet { position: absolute; left: 7vw; top: 13vh; width: min(340px, 36vw); background: var(--softbox-ivory); color: var(--stage-black); padding: 1.1rem; transform: rotate(2deg); box-shadow: 0 20px 0 rgba(124,139,148,.18); }
.sheet-title { font-family: var(--condensed); letter-spacing: .12em; text-transform: uppercase; color: var(--safety-vermilion); border-bottom: 2px solid var(--stage-black); padding-bottom: .5rem; }
.exposure-sheet ol { margin: .7rem 0 0; padding: 0; list-style: none; font-family: var(--condensed); text-transform: uppercase; }
.exposure-sheet li { display: flex; gap: .7rem; border-bottom: 1px solid rgba(11,12,16,.22); padding: .48rem 0; transform: translateX(var(--frame-step, 0)); }
.exposure-sheet li span { color: var(--prototype-violet); }
.hinge-panel { position: relative; width: min(720px, 78vw); padding: clamp(2rem, 5vw, 4rem); background: rgba(11,12,16,.84); border: 1px solid var(--chrome); box-shadow: -18px 0 0 rgba(109,93,247,.42), 22px 26px 0 rgba(185,231,255,.12); transform-origin: left center; transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.hinge-panel.rehearsing { transform: perspective(900px) rotateY(-10deg) translateX(20px); }
.stage-button { margin-top: 1.6rem; border: 0; background: var(--safety-vermilion); color: var(--stage-black); font-family: var(--condensed); text-transform: uppercase; letter-spacing: .16em; padding: .9rem 1.1rem; cursor: pointer; box-shadow: 5px 5px 0 var(--softbox-ivory); }
.clay-hand { position: absolute; right: 14vw; bottom: 17vh; width: 130px; height: 70px; background: #b98572; border-radius: 44% 55% 45% 50%; transform: rotate(-8deg) translateY(var(--hand-y, 0)); box-shadow: inset -12px -8px 0 rgba(11,12,16,.2); }
.clay-hand span { position: absolute; right: -30px; top: 11px; width: 58px; height: 38px; background: #c89682; border-radius: 55%; }
.ghost-stack i { position: absolute; right: 11vw; top: 18vh; width: 24vw; height: 36vh; border: 2px solid var(--prototype-violet); background: rgba(109,93,247,.07); transform: translate(calc(var(--ghost-shift, 0) * 1px), calc(var(--ghost-shift, 0) * .5px)) rotate(var(--r)); opacity: .55; }
.ghost-stack i:nth-child(1) { --r: -5deg; } .ghost-stack i:nth-child(2) { --r: 2deg; border-color: var(--draft-blue); } .ghost-stack i:nth-child(3) { --r: 7deg; border-color: var(--green-screen); }
.c-stand { position: absolute; right: 5vw; top: 16vh; width: 2px; height: 58vh; background: var(--chrome); }
.c-stand::before { content: ""; position: absolute; top: 0; left: -80px; width: 160px; height: 2px; background: var(--chrome); transform: rotate(-12deg); }
.c-stand span { position: absolute; bottom: 0; left: -48px; width: 98px; height: 2px; background: var(--chrome); transform: rotate(24deg); }

.playback-strip { position: absolute; top: 8vh; left: -8vw; right: -8vw; height: 110px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; transform: rotate(-4deg); }
.playback-strip span { background: rgba(244,238,220,.12); border: 2px solid rgba(244,238,220,.45); box-shadow: inset 0 0 0 16px var(--stage-black); }
.rewind-loop { position: absolute; left: 12vw; bottom: 20vh; width: 170px; height: 170px; display: grid; place-items: center; border: 2px solid var(--safety-vermilion); color: var(--safety-vermilion); border-radius: 50%; font-size: 6rem; font-family: var(--display); transform: rotate(var(--rewind-rot, 0deg)); }
.subtitle-slate { width: min(760px, 78vw); padding: 2rem; background: rgba(11,12,16,.72); border-left: 12px solid var(--safety-vermilion); box-shadow: 25px 25px 0 rgba(244,238,220,.12); }
.subtitle-slate h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.04em; font-size: clamp(3rem, 7vw, 8rem); line-height: .88; }
.shot-label { color: var(--green-screen); margin-bottom: 1rem; }
.torn-green { position: absolute; right: -4vw; bottom: 8vh; width: 38vw; height: 52vh; background: var(--green-screen); clip-path: polygon(0 10%, 100% 0, 90% 24%, 100% 36%, 82% 54%, 95% 100%, 11% 90%, 24% 72%, 4% 50%); opacity: .74; mix-blend-mode: screen; }
.crop-brackets span { position: absolute; width: 68px; height: 68px; border-color: var(--softbox-ivory); opacity: .7; }
.crop-brackets span:nth-child(1) { left: 9vw; top: 18vh; border-left: 4px solid; border-top: 4px solid; } .crop-brackets span:nth-child(2) { right: 9vw; top: 18vh; border-right: 4px solid; border-top: 4px solid; } .crop-brackets span:nth-child(3) { left: 9vw; bottom: 18vh; border-left: 4px solid; border-bottom: 4px solid; } .crop-brackets span:nth-child(4) { right: 9vw; bottom: 18vh; border-right: 4px solid; border-bottom: 4px solid; }

.glass-stack { position: relative; width: min(760px, 82vw); height: 560px; }
.glass-pane { position: absolute; inset: 0; padding: 3rem; background: rgba(185,231,255,.18); border: 1px solid rgba(185,231,255,.65); backdrop-filter: blur(8px); box-shadow: 0 24px 50px rgba(0,0,0,.28), inset 0 0 0 1px rgba(244,238,220,.14); }
.glass-pane::before { left: 28%; } .pane-one { transform: translate(-5vw, 2vh) rotate(-2deg); } .pane-two { transform: translate(8vw, 10vh) rotate(4deg); color: var(--draft-blue); font-family: var(--condensed); text-transform: uppercase; letter-spacing: .14em; } .pane-three { transform: translate(2vw, -5vh) rotate(-8deg); color: var(--green-screen); font-family: var(--condensed); text-transform: uppercase; letter-spacing: .14em; }
.calibration-chart { position: absolute; right: 10vw; bottom: 15vh; display: grid; grid-template-columns: repeat(2, 70px); grid-template-rows: repeat(2, 70px); border: 1px solid var(--softbox-ivory); transform: rotate(7deg); }
.calibration-chart span:nth-child(1) { background: var(--safety-vermilion); } .calibration-chart span:nth-child(2) { background: var(--draft-blue); } .calibration-chart span:nth-child(3) { background: var(--prototype-violet); } .calibration-chart span:nth-child(4) { background: var(--green-screen); }
.ruler-grid { position: absolute; left: 8vw; bottom: 10vh; width: 36vw; height: 13vh; border-top: 2px solid var(--chrome); background: repeating-linear-gradient(90deg, var(--chrome) 0 1px, transparent 1px 22px); opacity: .8; }
.version-tags { position: absolute; left: 13vw; top: 15vh; display: flex; gap: .6rem; }
.version-tags b { font-family: var(--condensed); color: var(--stage-black); background: var(--softbox-ivory); padding: .45rem .7rem; transform: rotate(var(--tag-r)); } .version-tags b:nth-child(1) { --tag-r: -6deg; } .version-tags b:nth-child(2) { --tag-r: 3deg; background: var(--draft-blue); } .version-tags b:nth-child(3) { --tag-r: 8deg; background: var(--prototype-violet); color: var(--softbox-ivory); }

.final-light-test::before { background: radial-gradient(ellipse at 50% 50%, rgba(244,238,220,.55), rgba(244,238,220,.13) 30%, transparent 62%), linear-gradient(110deg, rgba(11,12,16,.9), rgba(109,93,247,.1), rgba(11,12,16,.9)); }
.final-pool { position: absolute; width: 62vw; height: 45vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(244,238,220,.34), rgba(244,238,220,.07) 55%, transparent 72%); bottom: 12vh; filter: blur(2px); }
.final-object { position: relative; width: min(680px, 82vw); padding: clamp(2rem, 5vw, 4.5rem); background: rgba(244,238,220,.96); color: var(--stage-black); clip-path: polygon(1% 4%, 98% 0, 100% 96%, 3% 100%); box-shadow: 24px 28px 0 rgba(255,77,46,.48), -20px -18px 0 rgba(185,231,255,.18); }
.screw { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--chrome); box-shadow: inset 0 0 0 3px rgba(11,12,16,.25); } .s1 { left: 18px; top: 18px; } .s2 { right: 18px; top: 18px; } .s3 { left: 18px; bottom: 18px; } .s4 { right: 18px; bottom: 18px; }
.last-mark { display: inline-block; margin-top: 1.4rem; background: var(--stage-black); color: var(--softbox-ivory); padding: .55rem .75rem; font-size: .72rem; }
blockquote { position: absolute; left: 8vw; bottom: 12vh; font-family: var(--serif); font-size: clamp(2rem, 4vw, 5rem); margin: 0; color: var(--draft-blue); transform: rotate(-4deg); }
.closing-clap { position: absolute; right: 12vw; top: 18vh; width: 160px; height: 110px; display: grid; place-items: center; background: var(--stage-black); border: 2px solid var(--softbox-ivory); color: var(--softbox-ivory); font-family: var(--condensed); text-transform: uppercase; transform: rotate(9deg); }
.closing-clap b { color: var(--safety-vermilion); font-size: 2.6rem; }

.prop-hover { transition: transform 280ms steps(4), box-shadow 280ms ease, filter 280ms ease; }
.prop-hover:hover { transform: translateY(-8px) rotate(-1deg) scale(1.025); filter: brightness(1.08); }
.is-visible .tape-path { --tape-scale: 1; transition: transform 900ms steps(9); }
.is-visible .crew-note, .is-visible .production-card { animation: noteIn 700ms steps(4) both; }
.is-visible .hanging-sheet, .is-visible .hinge-panel, .is-visible .glass-pane, .is-visible .final-object { animation: propEnter 850ms steps(5) both; }

@keyframes clap { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-14deg); } }
@keyframes noteIn { from { opacity: 0; transform: translateY(24px) rotate(-8deg); } to { opacity: 1; } }
@keyframes propEnter { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 760px) {
  .stage-bay { padding: 5rem 1.2rem; min-height: 100svh; }
  .call-rail { display: none; }
  .scene-counter { transform: scale(.85); transform-origin: top left; }
  .hero-clap, .safe-frame, .c-stand, .calibration-chart, .closing-clap { display: none; }
  .note-one { left: 6vw; top: 17vh; } .note-two { right: 6vw; bottom: 15vh; }
  .scene-subtitle { left: 7vw; right: 7vw; bottom: 8vh; }
  .hanging-sheet, .exposure-sheet { position: relative; left: auto; top: auto; width: 92vw; }
  .foam-skyline { width: 84vw; right: 6vw; bottom: 9vh; }
  .tape-roll { left: auto; right: 8vw; transform: scale(.75); }
  .clay-hand, .rewind-loop { opacity: .55; transform: scale(.72); }
  blockquote { position: relative; left: auto; bottom: auto; margin-top: 2rem; }
}