:root {
  /* Typography compliance note: IBM Plex Mono sparingly for ticker fragments; Space Grotesk** Grotes* for clean explanatory copy and trade-floor labels. */
  --walnut: #3A2118;
  --persimmon: #E85D2A;
  --avocado: #6F8A3A;
  --cream: #F2E3C6;
  --teal: #1F6F78;
  --brass: #C89B3C;
  --rose: #F06C8E;
  --title: Fraunces, Georgia, 'Times New Roman', serif;
  --copy: 'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--walnut); color: var(--cream); }

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

.exchange-floor { position: fixed; inset: 0; overflow: hidden; background: var(--walnut); }

.room { position: absolute; inset: 0; min-height: 100vh; padding: clamp(24px, 4vw, 64px); opacity: 0; transform: translateX(100%) scale(.985); transition: transform 900ms cubic-bezier(.75,0,.2,1), opacity 700ms ease; pointer-events: none; overflow: hidden; }
.room.active { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.room.past { transform: translateX(-34%) scale(.96); opacity: .28; }

.wall { position: absolute; inset: 0; overflow: hidden; }
.wall::before { content: ''; position: absolute; inset: -20%; background-image: radial-gradient(circle at 12% 22%, rgba(242,227,198,.13) 0 1px, transparent 2px), radial-gradient(circle at 72% 62%, rgba(200,155,60,.18) 0 1px, transparent 2px), linear-gradient(115deg, transparent 0 45%, rgba(255,255,255,.05) 46% 48%, transparent 49%); background-size: 38px 38px, 54px 54px, 100% 100%; opacity: .5; transform: rotate(-3deg); }
.wall-walnut { background: radial-gradient(circle at 70% 20%, rgba(232,93,42,.22), transparent 28%), linear-gradient(120deg, #27130f, var(--walnut) 48%, #23100c); }
.wall-cream { background: linear-gradient(100deg, var(--cream), #dfc790 55%, #b97d32); }
.wall-teal { background: radial-gradient(circle at 28% 35%, rgba(242,227,198,.18), transparent 30%), linear-gradient(135deg, #123f47, var(--teal)); }
.wall-rose { background: linear-gradient(120deg, #5b2c28, var(--rose) 48%, var(--persimmon)); }
.wall-night { background: radial-gradient(circle at 65% 58%, rgba(200,155,60,.26), transparent 32%), linear-gradient(135deg, #160b09, var(--walnut) 62%, #071c20); }

.elevator-panel { position: fixed; z-index: 50; right: 22px; top: 50%; transform: translateY(-50%); padding: 12px 9px; border-radius: 22px; background: linear-gradient(145deg, #8b6424, var(--brass)); border: 1px solid rgba(242,227,198,.45); box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); display: grid; gap: 11px; }
.room-dot { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--walnut); background: #4c2b1f; cursor: pointer; position: relative; box-shadow: inset 0 2px 5px rgba(0,0,0,.45); }
.room-dot.active { background: var(--rose); box-shadow: 0 0 16px var(--rose), inset 0 1px 3px rgba(255,255,255,.55); }
.room-dot span { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); white-space: nowrap; color: var(--cream); background: rgba(58,33,24,.8); padding: 5px 8px; border-radius: 12px; font: 10px var(--mono); letter-spacing: .08em; opacity: 0; transition: opacity .2s ease; }
.room-dot:hover span { opacity: 1; }

.ticker-lamp { position: fixed; z-index: 40; left: 5vw; top: 4vh; width: min(520px, 72vw); color: var(--walnut); transform-origin: 40px top; transition: transform 600ms ease; }
.lamp-shade { width: 86px; height: 44px; background: var(--persimmon); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 22px rgba(232,93,42,.8)); animation: flicker 2.5s infinite; }
.lamp-copy { display: inline-block; margin-left: 64px; margin-top: -8px; padding: 8px 18px; border-radius: 2px 22px 22px 2px; background: var(--cream); font: 700 12px var(--mono); letter-spacing: .12em; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
@keyframes flicker { 0%, 100% { opacity: 1; } 7% { opacity: .58; } 10% { opacity: 1; } 38% { opacity: .78; } 41% { opacity: 1; } }

.brass-plate { position: relative; z-index: 2; background: linear-gradient(135deg, #8d6927, var(--brass), #f0cf7a); color: var(--walnut); border-radius: 8px; box-shadow: inset 0 2px rgba(255,255,255,.4), 0 30px 80px rgba(0,0,0,.45); }
.hero-plate { width: min(720px, 72vw); margin: 18vh 0 0 9vw; padding: 30px 38px; transform: rotate(-1.4deg); }
.lot-code, .final-note small { font: 700 12px var(--mono); letter-spacing: .18em; }
h1 { font-family: var(--title); font-size: clamp(52px, 10vw, 138px); line-height: .86; margin: 12px 0 8px; letter-spacing: -.055em; text-shadow: 0 1px rgba(242,227,198,.35); }
.hero-plate p { margin: 0; font-size: clamp(16px, 2vw, 24px); }

.conversation-pit { position: absolute; z-index: 1; right: 4vw; bottom: 4vh; width: min(760px, 62vw); height: 46vh; transform: translateY(80px); transition: transform 900ms cubic-bezier(.2,.8,.2,1); }
.active .conversation-pit { transform: translateY(0); }
.rug { position: absolute; inset: 22% 8% 0; border-radius: 50%; background: repeating-linear-gradient(90deg, var(--avocado) 0 18px, #56702e 18px 22px, var(--cream) 22px 38px, var(--persimmon) 38px 44px); transform: perspective(450px) rotateX(58deg); opacity: .9; }
.sofa { position: absolute; background: var(--avocado); border-radius: 26px; box-shadow: inset -18px -12px rgba(0,0,0,.16), 0 24px 35px rgba(0,0,0,.25); }
.sofa-left { width: 42%; height: 28%; left: 0; bottom: 28%; transform: skewY(-6deg); }
.sofa-right { width: 35%; height: 30%; right: 4%; bottom: 42%; transform: skewY(8deg); background: var(--teal); }
.boomerang-table { position: absolute; left: 32%; top: 38%; width: 220px; height: 92px; background: var(--cream); color: var(--walnut); clip-path: polygon(0 28%, 52% 0, 100% 30%, 74% 50%, 100% 72%, 48% 100%, 0 70%, 28% 50%); transform: rotate(-8deg); display: flex; align-items: center; justify-content: space-around; font: 800 13px var(--mono); }
.trade-slip { position: absolute; right: 22vw; top: 26vh; z-index: 3; background: var(--cream); color: var(--persimmon); padding: 16px 28px; font: 900 25px var(--mono); transform: rotate(10deg); box-shadow: 0 18px 32px rgba(0,0,0,.35); animation: reject 3.2s infinite; }
@keyframes reject { 0%, 68%, 100% { transform: rotate(10deg) translateX(0); } 74% { transform: rotate(4deg) translateX(-32px); } 80% { transform: rotate(12deg) translateX(18px); } }

.room-title { position: absolute; z-index: 6; left: clamp(28px, 6vw, 90px); bottom: clamp(28px, 7vh, 80px); width: min(570px, 76vw); }
.room-title span { display: block; font-family: var(--title); font-size: clamp(38px, 6vw, 82px); line-height: .9; letter-spacing: -.04em; }
.room-title p { margin: 16px 0 0; font-size: clamp(15px, 1.6vw, 20px); line-height: 1.45; color: rgba(242,227,198,.86); }

.smoked-glass { position: absolute; z-index: 1; border: 1px solid rgba(242,227,198,.18); background: rgba(242,227,198,.08); backdrop-filter: blur(5px); box-shadow: inset 0 0 50px rgba(255,255,255,.05); }
.glass-left { width: 28vw; height: 88vh; left: 0; bottom: 0; transform: skewX(-9deg) translateX(-22%); }

.shelf-grid { position: absolute; z-index: 1; right: 8vw; top: 11vh; width: 42vw; height: 43vh; display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 1fr; gap: 10px; transform: rotate(1deg); }
.shelf-grid i { border: 8px solid var(--walnut); background: rgba(111,138,58,.18); box-shadow: inset 0 0 0 2px rgba(200,155,60,.5); }
.credenza-cabinet { position: absolute; z-index: 4; left: 8vw; bottom: 17vh; width: min(680px, 66vw); height: 210px; background: linear-gradient(90deg, #4b281b, var(--walnut)); border-radius: 10px 10px 3px 3px; box-shadow: 0 32px 70px rgba(0,0,0,.35); }
.drawer { position: absolute; top: 24px; width: 45%; height: 132px; background: #563023; border: 2px solid #24120d; color: var(--cream); padding: 22px; transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.drawer b { display: block; color: var(--brass); font: 800 22px var(--mono); text-transform: uppercase; }
.drawer span { display: block; margin-top: 12px; max-width: 220px; line-height: 1.3; }
.drawer-a { left: 5%; }.drawer-b { right: 5%; }
.active .drawer-a { transform: translateX(-44px); }.active .drawer-b { transform: translateX(52px); }
.cabinet-leg { position: absolute; bottom: -72px; width: 18px; height: 80px; background: var(--walnut); }.cabinet-leg.left { left: 12%; }.cabinet-leg.right { right: 12%; }
.rotary-dial { position: absolute; z-index: 5; right: 14vw; bottom: 18vh; width: 180px; height: 180px; border-radius: 50%; background: var(--cream); border: 16px solid var(--brass); color: var(--walnut); display: grid; place-items: center; box-shadow: 0 20px 45px rgba(0,0,0,.3); transition: transform 900ms ease; }
.active .rotary-dial { transform: rotate(115deg); }
.rotary-dial span { position: absolute; width: 74px; height: 74px; border-radius: 50%; background: var(--walnut); }.rotary-dial em { position: absolute; bottom: 22px; font: 900 15px var(--mono); }
.ticker-strip { position: absolute; z-index: 4; left: -5vw; top: 22vh; width: 120vw; padding: 12px 0; background: var(--persimmon); color: var(--cream); font: 800 14px var(--mono); letter-spacing: .16em; transform: rotate(-4deg); white-space: nowrap; animation: ticker 13s linear infinite; }
@keyframes ticker { from { text-indent: -30vw; } to { text-indent: 70vw; } }

.quote-panels { position: absolute; z-index: 4; right: 8vw; top: 17vh; width: min(680px, 70vw); height: 52vh; display: grid; gap: 18px; }
.quote-panels article { padding: 24px 30px; color: var(--cream); background: rgba(242,227,198,.12); border: 1px solid rgba(242,227,198,.28); backdrop-filter: blur(7px); transform: translateX(80px); transition: transform 700ms ease; box-shadow: 0 22px 45px rgba(0,0,0,.25); }
.active .quote-panels article { transform: translateX(0); }.active .quote-panels article:nth-child(2) { transition-delay: 120ms; }.active .quote-panels article:nth-child(3) { transition-delay: 240ms; }
.quote-panels span { font: 800 12px var(--mono); color: var(--brass); letter-spacing: .2em; }.quote-panels b { display: block; font: 56px var(--title); }.quote-panels p { margin: 0; }
.phone-cord { position: absolute; z-index: 3; left: 4vw; bottom: 18vh; width: 70vw; height: 28vh; fill: none; stroke: var(--rose); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 12px 0 rgba(0,0,0,.15)); stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.5s ease; }
.active .phone-cord { stroke-dashoffset: 0; }
.cold-chair { position: absolute; left: 11vw; top: 25vh; width: 250px; height: 280px; border-radius: 70px 70px 18px 18px; background: var(--cream); box-shadow: inset -30px -20px rgba(31,111,120,.22); transform: rotate(-6deg); }
.cold-chair::before, .cold-chair::after { content: ''; position: absolute; bottom: -90px; width: 18px; height: 120px; background: var(--brass); }.cold-chair::before { left: 42px; transform: rotate(12deg); }.cold-chair::after { right: 42px; transform: rotate(-12deg); }
.clock-row { position: absolute; left: 8vw; top: 12vh; display: flex; gap: 18px; }.clock-row span { width: 82px; height: 82px; border: 5px solid var(--cream); border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--mono); color: var(--cream); }

.gallery-rail { position: absolute; z-index: 4; inset: 15vh 7vw auto 7vw; display: flex; gap: clamp(18px, 4vw, 60px); align-items: flex-start; justify-content: center; }
.gallery-rail figure { margin: 0; width: min(300px, 27vw); background: rgba(242,227,198,.88); color: var(--walnut); padding: 16px 16px 20px; box-shadow: 0 30px 60px rgba(0,0,0,.28); transform: translateY(60px) rotate(var(--tilt, -2deg)); transition: transform 800ms ease; }
.gallery-rail figure:nth-child(2) { --tilt: 2deg; margin-top: 7vh; }.gallery-rail figure:nth-child(3) { --tilt: -4deg; margin-top: 2vh; }
.active .gallery-rail figure { transform: translateY(0) rotate(var(--tilt, -2deg)); }
.art { height: 260px; background: var(--walnut); position: relative; overflow: hidden; }
.heart-inlay::before { content: ''; position: absolute; inset: 48px; background: var(--brass); clip-path: polygon(50% 88%, 10% 45%, 16% 20%, 40% 18%, 50% 34%, 60% 18%, 84% 20%, 90% 45%); opacity: .55; }
.rose-carbon { background: repeating-linear-gradient(135deg, var(--rose) 0 18px, #d85675 18px 22px, var(--cream) 22px 34px); }
.atomic-burst::before { content: ''; position: absolute; inset: 50%; width: 180px; height: 180px; transform: translate(-50%,-50%); background: radial-gradient(circle, var(--cream) 0 12px, transparent 13px), conic-gradient(from 0deg, transparent 0 10deg, var(--persimmon) 10deg 16deg, transparent 16deg 35deg, var(--brass) 35deg 42deg, transparent 42deg 60deg); border-radius: 50%; }
figcaption { margin-top: 12px; font: 800 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.paper-rain span { position: absolute; z-index: 6; top: -10vh; left: var(--x); background: var(--cream); color: var(--persimmon); padding: 12px 18px; font: 900 13px var(--mono); transform: rotate(var(--r)); animation: fall 5s linear infinite; animation-delay: var(--d); }
.paper-rain span:nth-child(1) { --x: 14vw; --r: -9deg; --d: 0s; }.paper-rain span:nth-child(2) { --x: 42vw; --r: 7deg; --d: 1.1s; }.paper-rain span:nth-child(3) { --x: 68vw; --r: -4deg; --d: 2s; }.paper-rain span:nth-child(4) { --x: 83vw; --r: 13deg; --d: 3.1s; }
@keyframes fall { to { top: 110vh; transform: rotate(calc(var(--r) + 35deg)); } }

.lamp-pool { position: absolute; z-index: 1; left: 18vw; bottom: 7vh; width: 65vw; height: 45vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(200,155,60,.45), rgba(232,93,42,.18) 45%, transparent 70%); filter: blur(6px); }
.settlement-desk { position: absolute; z-index: 5; left: 18vw; right: 12vw; bottom: 10vh; height: 34vh; background: linear-gradient(90deg, #2b150f, var(--walnut)); border-radius: 20px 20px 4px 4px; box-shadow: 0 -10px 0 rgba(200,155,60,.35), 0 38px 90px rgba(0,0,0,.55); }
.paper-trail { position: absolute; left: 7%; right: 22%; top: 28%; height: 46%; background: repeating-linear-gradient(90deg, var(--cream) 0 90px, #e5cfa4 90px 96px); transform: rotate(-2deg); opacity: .92; }
.final-note { position: absolute; z-index: 2; right: 8%; top: 18%; width: min(360px, 42vw); min-height: 170px; background: var(--cream); color: var(--walnut); padding: 28px; transform: rotate(3deg); box-shadow: 0 20px 40px rgba(0,0,0,.32); }
.final-note strong { display: block; margin-top: 18px; font: 56px/0.9 var(--title); letter-spacing: -.04em; color: var(--persimmon); }
.stamp { position: absolute; z-index: 4; left: 12%; top: 24%; border: 0; border-radius: 8px; background: var(--brass); color: var(--walnut); padding: 18px 26px; font: 900 16px var(--mono); box-shadow: 0 14px 0 #6e4a17, 0 28px 30px rgba(0,0,0,.35); cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease; }
.stamp.down { transform: translateY(14px); box-shadow: 0 2px 0 #6e4a17, 0 12px 20px rgba(0,0,0,.35); }
.rose-sun { position: absolute; z-index: 3; right: 12vw; top: 15vh; width: 120px; height: 120px; border-radius: 50%; background: var(--rose); transform: scale(.2); opacity: 0; box-shadow: 0 0 60px var(--rose); transition: transform 500ms ease, opacity 500ms ease; }
.rose-sun.show { transform: scale(1); opacity: 1; }

@media (max-width: 760px) {
  .room { padding: 22px; }
  .ticker-lamp { left: 4vw; width: 84vw; }
  .hero-plate { margin-top: 17vh; width: 82vw; }
  .conversation-pit, .quote-panels, .shelf-grid { width: 86vw; right: 8vw; }
  .gallery-rail { flex-direction: column; top: 11vh; gap: 12px; }
  .gallery-rail figure { width: 55vw; }
  .art { height: 120px; }
  .room-title { bottom: 22px; }
  .room-title span { font-size: 36px; }
}