:root {
  --paper: #E7D7B1;
  --ink: #17130F;
  --teal: #1E6F73;
  --red: #C63A26;
  --brass: #B08A3C;
  --green: #76FF5A;
  --blue: #123C7C;
  --plum: #2A1630;
  --warmth: 0;
  --display: "Hiragino Mincho ProN", "Yu Mincho", "Times New Roman", serif;
  --gothic: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --bureau: "BIZ UDPGothic", "Meiryo", "MS Gothic", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --mono-note: "IBM Plex Mono only for small tuning frequencies";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--gothic);
  overflow-x: hidden;
}

.grain, .scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: .28;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(23,19,15,.25) 0 1px, transparent 1px),
    radial-gradient(circle at 73% 62%, rgba(198,58,38,.15) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent, rgba(176,138,60,.13), transparent);
  background-size: 9px 11px, 13px 17px, 100% 100%;
  mix-blend-mode: multiply;
}

.scanline {
  opacity: calc(.05 + var(--warmth) * .035);
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(18,60,124,.45) 5px 6px);
}

.era-dial {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 8px;
}

.era-dial button {
  width: 154px;
  border: 1px solid rgba(231,215,177,.35);
  color: var(--paper);
  background: rgba(23,19,15,.72);
  font-family: var(--bureau);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 9px 11px;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(176,138,60,.25);
}

.era-dial button span {
  display: block;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 10px;
}

.era-dial button.active {
  color: var(--ink);
  background: var(--brass);
  transform: translateX(-10px);
}

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 7vw 11vw;
}

.scene::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -2;
  background: linear-gradient(135deg, rgba(231,215,177,.8), transparent 38%, rgba(23,19,15,.18) 70%, rgba(42,22,48,.35));
  transform: translate3d(calc(var(--warmth) * -12px), calc(var(--warmth) * 8px), 0);
}

h1, h2, .vertical-title { font-family: var(--display); font-weight: 700; }
h1 { font-size: clamp(48px, 8vw, 118px); line-height: .88; max-width: 760px; margin: 0; }
h2 { font-size: clamp(38px, 6vw, 86px); line-height: .9; margin: 8px 0 20px; }
p { font-size: clamp(16px, 1.6vw, 22px); line-height: 1.55; }
code, .kicker, small { font-family: var(--mono); letter-spacing: .08em; }

.scene-dawn {
  background:
    repeating-linear-gradient(90deg, rgba(23,19,15,.1) 0 1px, transparent 1px 8vw),
    radial-gradient(circle at 28% 28%, rgba(198,58,38,.16), transparent 18%),
    var(--paper);
}

.paper-column {
  width: min(760px, 72vw);
  border-left: 3px double var(--ink);
  padding-left: 34px;
}

.vertical-title {
  position: absolute;
  left: 7vw;
  bottom: 5vh;
  writing-mode: vertical-rl;
  font-size: clamp(80px, 16vw, 220px);
  color: rgba(23,19,15,.11);
  letter-spacing: .05em;
}

.printer-mark { max-width: 280px; font-family: var(--bureau); border-top: 1px solid var(--ink); padding-top: 12px; }

.tune-control {
  position: absolute;
  left: 51vw;
  top: 18vh;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  border: 13px solid var(--brass);
  background: radial-gradient(circle, #E7D7B1 0 38%, #B08A3C 39% 42%, #17130F 43% 46%, #E7D7B1 47%);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 30px 80px rgba(23,19,15,.28), inset 0 0 30px rgba(23,19,15,.22);
}

.tune-control strong, .tune-control em { display: block; position: relative; top: 36px; font-family: var(--bureau); }
.tune-control em { font-family: var(--mono); font-size: 11px; color: var(--red); }
.needle { position: absolute; left: 50%; top: 42px; width: 3px; height: 95px; background: var(--red); transform-origin: bottom center; transform: rotate(-34deg); animation: needle 1.7s infinite steps(2); }

.sun-object {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  transition: transform .7s ease, filter .7s ease;
}

.stamp {
  right: 15vw;
  bottom: 12vh;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--red);
  color: rgba(231,215,177,.86);
  font-family: var(--display);
  font-size: 94px;
  box-shadow: 0 0 0 12px rgba(198,58,38,.12), inset 0 0 28px rgba(23,19,15,.22);
  mix-blend-mode: multiply;
  animation: seep 4s ease-in-out infinite;
}

.radio-arc { position: absolute; right: 9vw; top: 10vh; width: 280px; height: 140px; border-top: 2px solid var(--brass); border-radius: 280px 280px 0 0; }
.radio-arc i { position: absolute; bottom: 0; width: 1px; height: 28px; background: var(--ink); transform-origin: bottom; }
.radio-arc i:nth-child(1) { left: 15%; transform: rotate(-36deg); }
.radio-arc i:nth-child(2) { left: 42%; transform: rotate(-12deg); }
.radio-arc i:nth-child(3) { left: 70%; transform: rotate(20deg); }
.radio-arc b { position: absolute; left: 50%; bottom: -5px; width: 90px; height: 2px; background: var(--red); transform-origin: left; transform: rotate(-20deg); }
.calendar-stack { position: absolute; left: 12vw; bottom: 12vh; padding: 22px; background: rgba(231,215,177,.78); border: 1px dashed var(--ink); box-shadow: 10px 10px 0 rgba(176,138,60,.28); font-family: var(--bureau); }
.calendar-stack span { display: block; font-family: var(--display); font-size: 42px; }

.scene-market { background: linear-gradient(115deg, #E7D7B1, #B08A3C 54%, #1E6F73); }
.awning { position: absolute; inset: 0 0 auto; height: 28vh; display: flex; filter: drop-shadow(0 26px 28px rgba(23,19,15,.35)); }
.awning span { flex: 1; background: var(--red); border-radius: 0 0 28px 28px; }
.awning span:nth-child(even) { background: var(--paper); }
.ration-ticket { position: relative; margin-top: 24vh; max-width: 560px; padding: 34px; background: rgba(231,215,177,.88); border: 2px dashed var(--ink); box-shadow: 18px 18px 0 rgba(23,19,15,.2); transform: rotate(-3deg); }
.ration-ticket b { font-family: var(--mono); color: var(--red); font-size: 30px; }
.coupon-line { position: absolute; right: 13vw; bottom: 18vh; display: grid; grid-template-columns: repeat(5, 74px); gap: 10px; transform: rotate(7deg); }
.coupon-line i { height: 112px; background: rgba(231,215,177,.72); border: 1px solid var(--ink); border-left: 8px dotted var(--red); }
.enamel-sign { position: absolute; right: 19vw; top: 38vh; padding: 16px 38px; border-radius: 14px; background: var(--teal); color: var(--paper); border: 4px solid var(--paper); font-family: var(--display); font-size: 34px; box-shadow: inset 0 0 0 3px var(--ink); }
.ticket-disc { right: 26vw; bottom: 28vh; width: 120px; height: 120px; border-radius: 50%; background: var(--red); color: var(--paper); transform: scaleX(1.25) rotate(8deg); }

.scene-cafe { background: radial-gradient(circle at 55% 48%, rgba(176,138,60,.8), transparent 24%), linear-gradient(135deg, #17130F, #2A1630); color: var(--paper); }
.tabletop { position: absolute; left: 50%; top: 50%; width: min(850px, 78vw); height: min(850px, 78vw); transform: translate(-50%, -50%); border-radius: 50%; background: repeating-radial-gradient(circle, #3a2117 0 12px, #2b1812 13px 24px); animation: slowspin 28s linear infinite; box-shadow: 0 0 0 35px rgba(176,138,60,.16), 0 0 100px rgba(0,0,0,.55); }
.coffee-cup { position: absolute; left: 14%; top: 17%; width: 180px; height: 180px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 28px #4a2417, inset 0 0 0 46px var(--paper); }
.coffee-cup span { position: absolute; right: -46px; top: 62px; width: 70px; height: 50px; border: 13px solid var(--paper); border-left: 0; border-radius: 0 50px 50px 0; }
.steam { position: absolute; width: 70px; height: 190px; border-left: 4px solid rgba(231,215,177,.45); border-radius: 50%; animation: smoke 5s ease-in-out infinite; }
.steam-one { left: 23%; top: -1%; } .steam-two { left: 30%; top: 2%; animation-delay: -2s; }
.receipt { position: absolute; right: 9%; top: 30%; width: 330px; padding: 26px; color: var(--ink); background: var(--paper); transform: rotate(12deg); font-family: var(--bureau); }
.receipt h2 { font-size: 48px; }
.vinyl { position: absolute; left: 18%; bottom: 12%; width: 210px; height: 210px; border-radius: 50%; background: repeating-radial-gradient(circle, #17130F 0 5px, #2A1630 6px 8px); }
.vinyl i { position: absolute; inset: 78px; border-radius: 50%; background: var(--brass); }
.coffee-ring { right: 17vw; top: 12vh; width: 190px; height: 190px; border-radius: 50%; border: 18px solid rgba(198,58,38,.7); box-shadow: 0 0 0 18px rgba(176,138,60,.18); }

.scene-tv { background: radial-gradient(circle at center, #1E6F73, #17130F 70%); color: var(--paper); }
.crt { position: relative; margin: 0 auto; width: min(880px, 76vw); height: 68vh; border-radius: 64px; padding: 42px 120px 42px 42px; background: linear-gradient(145deg, #2A1630, #17130F); box-shadow: inset 0 0 50px rgba(231,215,177,.12), 0 30px 90px rgba(0,0,0,.55); }
.crt-screen { position: relative; height: 100%; border-radius: 44px; padding: 7vh 6vw; overflow: hidden; background: radial-gradient(circle, rgba(118,255,90,.2), rgba(18,60,124,.45) 44%, #17130F); box-shadow: inset 0 0 80px rgba(118,255,90,.18); }
.crt-screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(231,215,177,.14) 6px); }
.color-bars { display: flex; height: 60px; margin-bottom: 30px; }
.color-bars span { flex: 1; } .color-bars span:nth-child(1){background:#E7D7B1}.color-bars span:nth-child(2){background:#B08A3C}.color-bars span:nth-child(3){background:#C63A26}.color-bars span:nth-child(4){background:#1E6F73}.color-bars span:nth-child(5){background:#76FF5A}
.knobs { position: absolute; right: 38px; top: 22%; display: grid; gap: 52px; }
.knobs i { width: 56px; height: 56px; border-radius: 50%; background: var(--brass); box-shadow: inset 0 0 0 8px var(--ink); }
.vacuum-tube { position: absolute; left: 8vw; bottom: 10vh; width: 80px; height: 210px; border-radius: 40px 40px 12px 12px; border: 3px solid rgba(231,215,177,.5); background: linear-gradient(transparent, rgba(198,58,38,.4)); animation: glow 2.4s ease-in-out infinite; }
.crt-glass { right: 14vw; bottom: 12vh; width: 120px; height: 90px; border-radius: 40%; background: radial-gradient(circle, #76FF5A, #123C7C 58%, #17130F); box-shadow: 0 0 36px #76FF5A; }

.scene-station { background: linear-gradient(90deg, #17130F, #123C7C 55%, #2A1630); color: var(--paper); }
.poster-wall { position: absolute; inset: 12vh -12vw auto 8vw; display: flex; gap: 34px; animation: posters 18s linear infinite; }
.poster-wall article { min-width: 330px; height: 56vh; padding: 28px; background: var(--paper); color: var(--ink); border-top: 18px solid var(--red); box-shadow: 20px 22px 0 rgba(0,0,0,.2); }
.poster-wall strong { display: block; font-family: var(--display); font-size: 58px; line-height: .95; }
.train-straps { position: absolute; inset: 0 0 auto; height: 36vh; display: flex; justify-content: space-around; }
.train-straps i { width: 4px; height: 190px; background: var(--brass); position: relative; animation: sway 3s ease-in-out infinite; transform-origin: top; }
.train-straps i::after { content: ""; position: absolute; left: -24px; bottom: -60px; width: 52px; height: 70px; border: 7px solid var(--paper); border-radius: 50%; }
.route-line { position: absolute; left: 12vw; right: 12vw; bottom: 18vh; height: 6px; background: var(--green); box-shadow: 0 0 25px var(--green); }
.route-line span { position: relative; top: -12px; display: inline-block; width: 28px; height: 28px; margin-right: 18%; border-radius: 50%; background: var(--paper); border: 5px solid var(--green); }
.station-clock { right: 15vw; bottom: 25vh; width: 170px; height: 170px; border-radius: 50%; background: var(--paper); color: var(--ink); border: 10px solid var(--brass); font-family: var(--mono); font-size: 28px; box-shadow: 0 0 40px rgba(118,255,90,.45); }

.scene-midnight { background: radial-gradient(circle at 70% 20%, rgba(118,255,90,.24), transparent 20%), linear-gradient(160deg, #2A1630, #123C7C 58%, #17130F); color: var(--paper); }
.rain { position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 18px, rgba(231,215,177,.28) 19px 20px); animation: rain 1s linear infinite; }
.neon-kanji { position: absolute; right: 8vw; top: 9vh; writing-mode: vertical-rl; font-family: var(--display); font-size: clamp(64px, 11vw, 150px); color: var(--green); text-shadow: 0 0 10px var(--green), 0 0 34px var(--blue), 8px 8px 0 var(--red); animation: blink 3.2s infinite; }
.alley-copy { position: relative; top: 22vh; max-width: 580px; padding: 28px; background: rgba(23,19,15,.55); border-left: 5px solid var(--green); backdrop-filter: blur(2px); }
.pachinko-field { position: absolute; right: 24vw; bottom: 17vh; width: 360px; height: 360px; }
.pachinko-field i { position: absolute; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #E7D7B1, #76FF5A 30%, #123C7C 62%, #17130F); box-shadow: 0 0 18px var(--green); animation: clatter 4s ease-in-out infinite; }
.pachinko-field i:nth-child(1){left:8%;top:12%}.pachinko-field i:nth-child(2){left:38%;top:2%;animation-delay:-.3s}.pachinko-field i:nth-child(3){left:70%;top:18%;animation-delay:-.6s}.pachinko-field i:nth-child(4){left:18%;top:43%;animation-delay:-.9s}.pachinko-field i:nth-child(5){left:55%;top:38%;animation-delay:-1.2s}.pachinko-field i:nth-child(6){left:84%;top:55%;animation-delay:-1.5s}.pachinko-field i:nth-child(7){left:4%;top:72%;animation-delay:-1.8s}.pachinko-field i:nth-child(8){left:38%;top:78%;animation-delay:-2.1s}.pachinko-field i:nth-child(9){left:68%;top:80%;animation-delay:-2.4s}.pachinko-field i:nth-child(10){left:90%;top:8%;animation-delay:-2.7s}
.puddle { position: absolute; left: 22vw; right: 10vw; bottom: 8vh; height: 90px; border-radius: 50%; background: radial-gradient(ellipse, rgba(118,255,90,.38), rgba(18,60,124,.5), transparent 70%); transform: skewX(-18deg); display: grid; place-items: center; font-family: var(--mono); color: rgba(231,215,177,.72); }

@keyframes needle { 50% { transform: rotate(-21deg); } }
@keyframes seep { 50% { filter: blur(1px) saturate(1.3); transform: scale(1.04) rotate(-2deg); } }
@keyframes slowspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes smoke { 50% { transform: translate(24px, -28px) scaleX(1.5); opacity: .35; } }
@keyframes glow { 50% { box-shadow: 0 0 42px var(--red); } }
@keyframes posters { 50% { transform: translateX(-220px); } }
@keyframes sway { 50% { transform: rotate(5deg); } }
@keyframes rain { to { background-position: 0 42px; } }
@keyframes blink { 8%, 12%, 62% { opacity: .35; } 10%, 14%, 70% { opacity: 1; } }
@keyframes clatter { 50% { transform: translate(18px, 28px) scale(1.08); } }

body.tuned .stamp { transform: scale(1.16) rotate(-9deg); filter: saturate(1.5); }
body.tuned .radio-arc b { animation: needle .4s infinite; }

@media (max-width: 820px) {
  .era-dial { right: 0; left: 0; top: auto; bottom: 0; transform: none; display: flex; overflow-x: auto; background: rgba(23,19,15,.86); }
  .era-dial button { min-width: 134px; }
  .scene { padding: 14vh 7vw 20vh; }
  .tune-control, .stamp, .ticket-disc, .coffee-ring, .crt-glass, .station-clock { transform: scale(.72); right: 2vw; }
  .crt { width: 94vw; padding: 24px; }
  .receipt { width: 260px; right: 2%; }
  .poster-wall { left: 4vw; }
  .pachinko-field { right: 4vw; transform: scale(.78); }
}