:root {
  --wick: #2A1710;
  --ember: #C75A1B;
  --tan: #A9794B;
  --apricot: #E99A4A;
  --plum: #3B2632;
  --teal: #2F6F68;
  --cream: #F3D7A4;
  --mono-markdown-token: "Mono**";
}

/* DESIGN typography tokens: Roboto Mono** sparingly */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 76% 16%, rgba(199, 90, 27, .42), transparent 30rem),
    radial-gradient(circle at 22% 82%, rgba(47, 111, 104, .18), transparent 34rem),
    linear-gradient(145deg, var(--wick) 0%, var(--plum) 52%, #24120d 100%);
  font-family: "Atkinson Hyperlegible", "Inter", "Roboto", system-ui, sans-serif;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .26;
  background-image:
    radial-gradient(circle, rgba(243, 215, 164, .18) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(42, 23, 16, .36) 1px, transparent 1.8px);
  background-size: 17px 19px, 29px 31px;
  mix-blend-mode: overlay;
}

.lamp {
  position: fixed;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  left: 62%;
  top: 8%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(233, 154, 74, .27), rgba(199, 90, 27, .12) 38%, transparent 68%);
  filter: blur(10px);
}

.workbench { position: relative; z-index: 1; }

.scene {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}

.hero-scene {
  min-height: 112vh;
  overflow: hidden;
  background:
    linear-gradient(120deg, transparent 0 40%, rgba(169, 121, 75, .12) 40% 52%, transparent 52%),
    radial-gradient(ellipse at 72% 48%, rgba(199, 90, 27, .42), transparent 31rem);
}

.desk-edge {
  position: absolute;
  left: -6vw;
  right: -6vw;
  bottom: -4vh;
  height: 31vh;
  transform: skewY(-7deg);
  background: linear-gradient(100deg, #6f4129, var(--tan), #55311f);
  border-top: 6px solid rgba(243, 215, 164, .22);
  box-shadow: 0 -26px 80px rgba(42, 23, 16, .78) inset;
}

.hero-copy {
  position: absolute;
  left: clamp(20px, 6vw, 86px);
  bottom: 7vh;
  max-width: 760px;
  z-index: 8;
}

.sticker,
.paper-strip span,
.manual-card span,
.receipt span,
.final-note span {
  display: inline-block;
  font-family: "M PLUS Rounded 1c", "Nunito Sans", "Inter", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--wick);
  background: var(--apricot);
  padding: .38rem .7rem;
  border-radius: 999px;
  border: 2px solid rgba(42, 23, 16, .38);
  box-shadow: 4px 5px 0 rgba(42, 23, 16, .42);
}

h1 {
  margin: .2rem 0 0;
  font-family: "Nunito Sans", "Inter", "Roboto", system-ui, sans-serif;
  font-size: clamp(4.3rem, 15vw, 12.6rem);
  line-height: .78;
  letter-spacing: -.075em;
  color: var(--cream);
  text-shadow: 8px 10px 0 rgba(42, 23, 16, .7), 0 0 42px rgba(199, 90, 27, .62);
}

.caption {
  max-width: 570px;
  margin: 1.1rem 0 0 1rem;
  color: #ffe1ad;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.5;
}

.magnetic { transition: transform .28s cubic-bezier(.2, .9, .2, 1); will-change: transform; }

.iso-object { transform-style: preserve-3d; }

.terminal {
  position: absolute;
  width: clamp(270px, 34vw, 500px);
  height: clamp(220px, 28vw, 380px);
  left: 18vw;
  top: 13vh;
  transform: rotate(-8deg) skewY(-8deg);
  z-index: 5;
}

.terminal-top {
  height: 76%;
  padding: 9%;
  border-radius: 28px;
  background: linear-gradient(145deg, var(--cream), #cfa66e);
  border: 5px solid var(--wick);
  box-shadow: 18px 22px 0 #5d3724, 36px 44px 52px rgba(42, 23, 16, .65);
}

.terminal-side {
  position: absolute;
  left: 7%;
  right: -10%;
  bottom: 6%;
  height: 22%;
  transform: skewX(38deg);
  background: linear-gradient(90deg, var(--tan), #5c3726);
  border: 5px solid var(--wick);
  z-index: -1;
}

.screen {
  position: relative;
  height: 66%;
  overflow: hidden;
  padding: 1.2rem;
  color: #8ff1ca;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, rgba(47, 111, 104, .9), #153935 72%);
  border: 4px solid var(--wick);
  font-family: "Roboto Mono", ui-monospace, monospace;
  box-shadow: inset 0 0 28px rgba(42, 23, 16, .8);
}

.screen p { margin: .35rem 0; font-size: clamp(.66rem, 1.2vw, .92rem); }
.scanline { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(243, 215, 164, .09) 10px 11px); animation: scan 5s linear infinite; }
.keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5%; margin-top: 8%; }
.keys i { height: 18px; border-radius: 12px; background: var(--ember); border: 3px solid var(--wick); }

.crate-stack { position: absolute; right: 27vw; top: 30vh; transform: rotate(10deg); z-index: 4; }
.crate { width: 112px; padding: 18px 12px; margin: -2px; color: var(--wick); font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 900; text-align: center; background: var(--apricot); border: 4px solid var(--wick); box-shadow: 10px 10px 0 #583321; transform: skewY(-8deg); }
.crate.teal, .coupon.teal, .drawer.teal { background: var(--teal); color: var(--cream); }

.receipt {
  color: var(--wick);
  background: repeating-linear-gradient(90deg, var(--cream) 0 18px, #ebc98f 19px 20px);
  border: 3px solid rgba(42, 23, 16, .65);
  box-shadow: 9px 12px 0 rgba(42, 23, 16, .44);
}
.receipt-hero { position: absolute; right: 6vw; top: 52vh; width: min(330px, 42vw); padding: 1.1rem; transform: rotate(8deg); z-index: 6; }
.receipt strong { display: block; margin-top: .8rem; font-family: "Nunito Sans", system-ui; font-size: 1.38rem; line-height: 1.05; }

.matchbook { position: absolute; left: 9vw; top: 38vh; width: 118px; height: 82px; background: var(--ember); border: 4px solid var(--wick); border-radius: 10px 10px 18px 18px; transform: rotate(-18deg); box-shadow: 10px 12px 0 rgba(42, 23, 16, .56); z-index: 3; }
.matchbook span { display: block; margin: 25px 13px; color: var(--cream); font: 900 1rem "M PLUS Rounded 1c", sans-serif; }

.tag { position: absolute; padding: .55rem .9rem; border-radius: 10px 4px 10px 4px; background: var(--ember); color: var(--cream); border: 3px solid var(--wick); font: 900 1rem "M PLUS Rounded 1c", sans-serif; box-shadow: 6px 7px 0 rgba(42, 23, 16, .45); }
.tag-one { right: 18vw; top: 18vh; transform: rotate(16deg); }
.tag-two { left: 62vw; top: 38vh; transform: rotate(-9deg); }

.screw { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, var(--cream) 0 16%, var(--tan) 17% 55%, var(--wick) 56%); box-shadow: 3px 4px 0 rgba(42, 23, 16, .5); }
.screw:after { content: ""; position: absolute; left: 6px; right: 6px; top: 11px; height: 4px; background: var(--wick); transform: rotate(35deg); }
.screw-one { left: 54vw; top: 18vh; } .screw-two { left: 13vw; top: 63vh; } .screw-three { right: 14vw; bottom: 20vh; }

.candle-wrap { position: absolute; right: 8vw; top: 21vh; width: 130px; height: 230px; z-index: 7; transform-origin: bottom center; }
.flame { position: absolute; left: 50%; top: 0; width: 48px; height: 76px; margin-left: -24px; background: radial-gradient(circle at 52% 70%, var(--cream) 0 14%, var(--apricot) 15% 44%, var(--ember) 45% 76%, transparent 77%); border-radius: 58% 42% 54% 46% / 70% 70% 30% 30%; filter: drop-shadow(0 0 25px var(--ember)); transform-origin: 50% 92%; animation: flicker 1.35s ease-in-out infinite alternate; }
.wick { position: absolute; left: 61px; top: 66px; width: 8px; height: 26px; border-radius: 9px; background: var(--wick); }
.candle { position: absolute; left: 28px; top: 82px; width: 74px; height: 126px; border-radius: 22px 22px 12px 12px; background: linear-gradient(90deg, #f7e0b9, var(--cream), #bd8b59); border: 4px solid var(--wick); box-shadow: inset -14px 0 0 rgba(169, 121, 75, .25); }
.candle span { position: absolute; right: 12px; top: 24px; width: 12px; height: 48px; border-radius: 0 0 10px 10px; background: var(--apricot); }
.wax-pool { position: absolute; left: 7px; bottom: 0; width: 118px; height: 30px; border-radius: 50%; background: rgba(243, 215, 164, .62); border: 3px solid var(--wick); }

.smoke-path { position: absolute; width: 34vw; height: 38vh; border: 4px dashed rgba(243, 215, 164, .18); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; filter: blur(.2px); animation: smoke 7s ease-in-out infinite alternate; }
.smoke-a { right: 12vw; top: 3vh; transform: rotate(-22deg); }
.smoke-b { left: 34vw; top: 12vh; transform: rotate(18deg); }

.tableau { min-height: 96vh; }
.paper-strip { position: absolute; width: min(540px, 70vw); padding: 1.5rem; background: var(--cream); color: var(--wick); border: 4px solid var(--wick); box-shadow: 15px 18px 0 rgba(42, 23, 16, .54); }
.strip-left { left: 8vw; top: 14vh; transform: rotate(-7deg); }
h2 { margin: .9rem 0 .7rem; font-family: "Nunito Sans", "M PLUS Rounded 1c", system-ui; font-size: clamp(2.2rem, 5vw, 5rem); line-height: .9; letter-spacing: -.045em; }
.paper-strip p, .manual-card p, .final-note p { font-size: 1.05rem; line-height: 1.55; }

.coupon-wall { position: absolute; right: 9vw; top: 22vh; display: grid; grid-template-columns: repeat(2, 150px); gap: 18px; transform: rotate(8deg); }
.coupon { min-height: 92px; display: grid; place-items: center; background: var(--apricot); color: var(--wick); border: 4px solid var(--wick); border-radius: 16px 4px 16px 4px; box-shadow: 8px 10px 0 rgba(42, 23, 16, .52); font: 900 1rem "M PLUS Rounded 1c", sans-serif; }
.coil { position: absolute; left: 42vw; bottom: 18vh; width: 180px; height: 100px; border: 12px solid var(--teal); border-left-color: transparent; border-radius: 50%; transform: rotate(-25deg); box-shadow: 8px 10px 0 rgba(42, 23, 16, .42); }
.coil span { position: absolute; width: 120px; height: 68px; border: 10px solid var(--teal); border-left-color: transparent; border-radius: 50%; left: 22px; top: 4px; }
.ember-dot { position: absolute; right: 32vw; bottom: 24vh; width: 22px; height: 22px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 24px var(--ember); }

.cabinet { position: absolute; left: 12vw; top: 14vh; width: min(470px, 62vw); transform: skewY(-7deg) rotate(3deg); color: var(--wick); }
.cabinet-top, .drawer { padding: 1.1rem 1.3rem; border: 4px solid var(--wick); background: var(--tan); box-shadow: 12px 13px 0 rgba(42, 23, 16, .52); font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 900; }
.cabinet-top { background: var(--apricot); border-radius: 18px 18px 0 0; }
.drawer { margin-top: -4px; background: var(--cream); }
.manual-card { position: absolute; right: 9vw; top: 26vh; width: min(520px, 66vw); padding: 1.5rem; color: var(--cream); background: linear-gradient(135deg, rgba(59, 38, 50, .94), rgba(42, 23, 16, .94)); border: 4px solid var(--tan); border-radius: 26px; box-shadow: 16px 20px 0 rgba(42, 23, 16, .55), 0 0 70px rgba(199, 90, 27, .17); transform: rotate(5deg); }

.test-rig { position: absolute; left: 14vw; top: 24vh; width: 320px; height: 260px; padding: 1.4rem; background: var(--apricot); color: var(--wick); border: 5px solid var(--wick); border-radius: 30px; box-shadow: 18px 20px 0 #5c3424; transform: skewY(-7deg) rotate(-4deg); font: 900 1.2rem "M PLUS Rounded 1c", sans-serif; }
.meter { height: 135px; border-radius: 135px 135px 12px 12px; border: 5px solid var(--wick); background: var(--cream); position: relative; overflow: hidden; }
.meter b { position: absolute; left: 50%; bottom: 16px; width: 6px; height: 94px; background: var(--ember); transform-origin: bottom; transform: rotate(54deg); animation: needle 3s ease-in-out infinite alternate; }
.long-receipt { position: absolute; right: 10vw; top: 18vh; width: min(620px, 64vw); padding: 1.5rem; transform: rotate(7deg); }
.floppy { position: absolute; right: 23vw; bottom: 18vh; width: 130px; height: 130px; padding: 1rem; background: var(--teal); color: var(--cream); border: 5px solid var(--wick); border-radius: 12px; box-shadow: 10px 12px 0 rgba(42, 23, 16, .55); font: 900 2rem "Nunito Sans", sans-serif; }
.floppy:before { content: ""; display: block; height: 40px; margin-bottom: 14px; background: var(--cream); border: 4px solid var(--wick); }

.final-scene { min-height: 108vh; background: radial-gradient(circle at 55% 54%, rgba(199, 90, 27, .2), transparent 28rem); }
.shelf { position: absolute; left: 6vw; right: 5vw; top: 48vh; height: 24vh; background: linear-gradient(110deg, #4d2b1c, var(--tan), #321b14); transform: skewY(6deg); border: 5px solid var(--wick); box-shadow: 0 28px 70px rgba(42, 23, 16, .85); }
.tiny-machine { position: absolute; left: 20vw; top: 33vh; width: 210px; height: 170px; padding: 28px; background: var(--cream); border: 5px solid var(--wick); border-radius: 28px; transform: rotate(-7deg) skewY(-8deg); box-shadow: 16px 18px 0 #5f3925, 0 0 55px rgba(233, 154, 74, .32); }
.machine-light { width: 42px; height: 42px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 30px var(--ember); animation: pulse 1.8s ease-in-out infinite; }
.machine-face { margin-top: 18px; color: var(--wick); font: 900 3rem "Nunito Sans", sans-serif; letter-spacing: -.08em; }
.final-note { position: absolute; right: 11vw; top: 28vh; width: min(560px, 66vw); padding: 1.7rem; background: rgba(59, 38, 50, .92); color: var(--cream); border: 4px solid var(--tan); border-radius: 28px; box-shadow: 15px 18px 0 rgba(42, 23, 16, .54); transform: rotate(4deg); }
.melted-candle { position: absolute; right: 12vw; bottom: 17vh; width: 84px; height: 58px; border-radius: 45% 45% 22px 22px; border: 4px solid var(--wick); background: var(--cream); box-shadow: 0 0 50px rgba(199, 90, 27, .38); }
.flame.small { width: 24px; height: 38px; left: 44px; top: -36px; }

@keyframes flicker { from { transform: rotate(-4deg) scaleY(.94); } to { transform: rotate(5deg) scaleY(1.08); } }
@keyframes scan { from { transform: translateY(-20px); } to { transform: translateY(20px); } }
@keyframes smoke { from { opacity: .18; transform: translateY(0) rotate(-18deg); } to { opacity: .36; transform: translateY(-28px) rotate(-8deg); } }
@keyframes needle { from { transform: rotate(-38deg); } to { transform: rotate(50deg); } }
@keyframes pulse { 50% { transform: scale(1.2); opacity: .78; } }

@media (max-width: 760px) {
  .terminal { left: 7vw; top: 14vh; width: 280px; height: 220px; }
  .candle-wrap { right: 6vw; top: 10vh; transform: scale(.78); }
  .crate-stack, .receipt-hero { top: 44vh; right: 6vw; }
  .coupon-wall { grid-template-columns: 1fr; right: 7vw; top: 46vh; }
  .manual-card, .long-receipt, .final-note { right: 5vw; left: 5vw; width: auto; top: 44vh; }
  .cabinet, .test-rig, .tiny-machine { left: 7vw; }
  .paper-strip { left: 5vw; width: 86vw; }
  .tag-two, .floppy { display: none; }
}