/* ==========================================================================
   MONOZEN // FRONT DOOR
   A quiet room, one warm computer, one way in. The machine is a placeholder
   chassis for the final pre-rendered angle set; the entry, snapshot, and
   half-way handover are the real interface.
   ========================================================================== */

.computer-entry {
  --ce-ink: #17110c;
  --ce-ivory: #dfd4c0;
  --ce-ivory-hi: #f4ecdf;
  --ce-ivory-lo: #b7a78f;
  --ce-red: #ff4d5a;
  --ce-screen: #07090b;
  --ce-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ce-rx: 0deg;
  --ce-ry: 0deg;
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000001;
  overflow: hidden;
  color: #f0e9dd;
  background: #080706;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  opacity: 1;
  transition: opacity 0.45s ease;
}
html.entry-active,
html.entry-active body {
  overflow: hidden;
  overscroll-behavior: none;
}
html.entry-active,
html.crt-live {
  scrollbar-gutter: stable;
}
#main-content:focus {
  outline: none;
}
html.entry-active #computerEntry {
  display: block;
}
html.entry-active #mz-cursor {
  display: none !important;
}
html.entry-active,
html.entry-active * {
  cursor: default !important;
}
html.entry-active .ce-frame-screen,
html.entry-active .ce-skip,
html.entry-active .ce-pref-btn {
  cursor: pointer !important;
}
.computer-entry:focus {
  outline: none;
}
.computer-entry.is-handover {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.computer-entry.is-reduced-motion .ce-machine-body {
  transform: none !important;
}

.ce-ambient,
.ce-spotlight,
.ce-vignette,
.ce-grain,
.ce-desk,
.ce-plant,
.ce-mug {
  pointer-events: none;
}
.ce-ambient {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(208, 138, 86, 0.3), transparent 34%),
    radial-gradient(ellipse at 56% 52%, rgba(255, 77, 90, 0.11), transparent 28%),
    radial-gradient(ellipse at 72% 62%, rgba(92, 42, 30, 0.22), transparent 42%),
    radial-gradient(ellipse at 28% 70%, rgba(54, 67, 55, 0.14), transparent 38%);
  filter: blur(10px);
  will-change: transform;
}
.ce-spotlight {
  position: absolute;
  inset: 0;
  background:
    /* Architectural studio wall grid */
    linear-gradient(90deg, rgba(244, 236, 223, 0.032) 1px, transparent 1px),
    linear-gradient(180deg, rgba(244, 236, 223, 0.032) 1px, transparent 1px),
    /* Ordered halftone dot field */
    radial-gradient(circle, rgba(244, 236, 223, 0.06) 1px, transparent 1px);
  background-size:
    56px 56px,
    56px 56px,
    14px 14px;
  background-position: center center;
  mask-image: radial-gradient(
    ellipse 66% 58% at 50% 44%,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.92) 40%,
    rgba(0, 0, 0, 0.55) 72%,
    transparent 96%
  );
}
.ce-spotlight::before,
.ce-spotlight::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.ce-spotlight::before {
  inset: clamp(18px, 2.6vw, 34px);
  background:
    linear-gradient(90deg, rgba(244, 236, 223, 0.22) 0 18px, transparent 18px calc(100% - 18px), rgba(244, 236, 223, 0.22) calc(100% - 18px))
      0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(244, 236, 223, 0.18) 0 18px, transparent 18px calc(100% - 18px), rgba(244, 236, 223, 0.18) calc(100% - 18px))
      0 100% / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(244, 236, 223, 0.22) 0 18px, transparent 18px calc(100% - 18px), rgba(244, 236, 223, 0.18) calc(100% - 18px))
      0 0 / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(244, 236, 223, 0.22) 0 18px, transparent 18px calc(100% - 18px), rgba(244, 236, 223, 0.18) calc(100% - 18px))
      100% 0 / 1px 100% no-repeat;
  opacity: 0.75;
}
/* Volumetric overhead tungsten lamp cone (blurred so there is no hard crease) */
.ce-spotlight::after {
  top: -15%;
  right: 20%;
  left: 20%;
  height: 85%;
  background: conic-gradient(
    from 148deg at 50% 0%,
    transparent 0deg,
    rgba(244, 214, 178, 0.05) 18deg,
    rgba(255, 234, 206, 0.13) 32deg,
    rgba(244, 214, 178, 0.05) 46deg,
    transparent 64deg
  );
  filter: blur(28px);
}
.ce-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 0 34%, rgba(0, 0, 0, 0.18) 64%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 25% 72%, rgba(0, 0, 0, 0.58));
}
.ce-grain {
  position: absolute;
  inset: 0;
  background-image: url('paper-noise.png');
  background-size: 320px 320px;
  opacity: 0.11;
  mix-blend-mode: soft-light;
}
.ce-desk {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 33%;
  background:
    radial-gradient(ellipse 52% 45% at 50% 0%, rgba(214, 152, 98, 0.15), transparent 72%),
    linear-gradient(180deg, rgba(188, 132, 89, 0.1), transparent 26%),
    linear-gradient(180deg, #15100c 0%, #0d0a08 64%, #060505 100%);
  border-top: 1px solid rgba(255, 221, 180, 0.12);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.65);
}
.ce-desk::before {
  content: '';
  position: absolute;
  top: 7%;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 224, 188, 0.2), transparent);
}
.ce-desk::after {
  content: '';
  position: absolute;
  top: 24%;
  left: 50%;
  width: min(82vw, 1060px);
  height: 1px;
  background: radial-gradient(ellipse, rgba(255, 218, 178, 0.18), transparent 74%);
  transform: translateX(-50%);
}
.ce-desk-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(244, 236, 223, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(244, 236, 223, 0.04) 1px, transparent 1px);
  background-size: 64px 28px;
  background-position: center top;
  mask-image: radial-gradient(ellipse 68% 85% at 50% 10%, rgba(0, 0, 0, 0.85), transparent 82%);
  transform: perspective(360px) rotateX(58deg);
  transform-origin: 50% 0%;
}
.ce-desk-mat {
  position: absolute;
  top: 4%;
  left: 50%;
  width: min(68vw, 780px);
  height: 76%;
  border: 1px solid rgba(244, 236, 223, 0.12);
  border-radius: 7px;
  background:
    /* Turntable / specimen calibration rings under the monitor */
    radial-gradient(
      ellipse 38% 36% at 50% 34%,
      transparent 0 68%,
      rgba(244, 236, 223, 0.07) 68.5% 69.5%,
      transparent 70% 96%,
      rgba(255, 77, 90, 0.14) 96.5% 97.5%,
      transparent 98%
    ),
    /* Cutting mat internal grid */
    linear-gradient(90deg, rgba(244, 236, 223, 0.03) 1px, transparent 1px) center / 36px 36px,
    linear-gradient(180deg, rgba(244, 236, 223, 0.03) 1px, transparent 1px) center / 36px 36px,
    /* Front calibration ruler ticks */
    repeating-linear-gradient(
      90deg,
      rgba(244, 236, 223, 0.24) 0 1px,
      transparent 1px 12px
    ) 50% calc(100% - 6px) / calc(100% - 48px) 4px no-repeat,
    repeating-linear-gradient(
      90deg,
      rgba(255, 77, 90, 0.48) 0 1px,
      transparent 1px 60px
    ) 50% calc(100% - 6px) / calc(100% - 48px) 8px no-repeat,
    linear-gradient(180deg, rgba(22, 18, 15, 0.94), rgba(12, 10, 8, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 212, 0.09),
    0 3px 0 #090706,
    0 18px 36px rgba(0, 0, 0, 0.72);
  transform: translateX(-50%) perspective(420px) rotateX(48deg);
  transform-origin: 50% 0%;
}
.ce-desk-glow {
  position: absolute;
  top: 6%;
  left: 50%;
  width: min(44vw, 460px);
  height: 62%;
  background:
    /* Deep chassis contact shadow directly under the MZ-01 */
    radial-gradient(ellipse 68% 28% at 50% 24%, rgba(0, 0, 0, 0.82), transparent 72%),
    /* CRT phosphor + crimson power LED + warm ivory bounce light in front */
    radial-gradient(ellipse 54% 38% at 50% 54%, rgba(210, 226, 242, 0.11), transparent 64%),
    radial-gradient(ellipse 28% 26% at 62% 46%, rgba(255, 77, 90, 0.14), transparent 58%),
    radial-gradient(ellipse 64% 44% at 50% 48%, rgba(226, 186, 138, 0.15), transparent 72%);
  filter: blur(6px);
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
}
.ce-desk-cable {
  position: absolute;
  top: 4%;
  left: calc(50% - min(19vw, 200px));
  width: clamp(84px, 10vw, 136px);
  height: clamp(32px, 4vw, 48px);
  border: 4px solid #1a1512;
  border-color: transparent transparent #1a1512 #1a1512;
  border-radius: 0 0 0 58px;
  box-shadow:
    -2px 5px 10px rgba(0, 0, 0, 0.72),
    inset 1px -1px 0 rgba(255, 230, 200, 0.12);
  opacity: 0.9;
  transform: rotate(-6deg);
}
/* 3.5" Archive Floppy Diskettes on the left desk flank */
.ce-desk-disks {
  position: absolute;
  top: 32%;
  left: calc(50% - min(25vw, 270px));
  width: clamp(58px, 6.4vw, 84px);
  height: clamp(60px, 6.6vw, 86px);
  transform: perspective(380px) rotateX(48deg) rotateZ(-15deg);
  transform-style: preserve-3d;
}
.ce-disk {
  position: absolute;
  inset: 0;
  border-radius: 3px 7px 3px 3px;
}
.ce-disk--bottom {
  background: linear-gradient(145deg, #28221e, #14110f);
  border: 1px solid rgba(255, 235, 210, 0.14);
  box-shadow:
    0 2px 0 #0d0b09,
    0 4px 0 #080706,
    0 12px 20px rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(255, 245, 230, 0.22);
  transform: translate(-14%, 11%) rotate(-12deg);
}
.ce-disk--top {
  background: linear-gradient(145deg, #e2d6c1, #b7a58c);
  border: 1px solid rgba(40, 28, 18, 0.5);
  box-shadow:
    0 2px 0 #8c7c66,
    0 3.5px 0 #665947,
    0 10px 18px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 250, 240, 0.55);
}
/* Metal sliding shutter at top of diskette */
.ce-disk--top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22%;
  width: 46%;
  height: 32%;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, #8b8274, #ded6c8 42%, #6e6659 85%, #9e9587);
  box-shadow:
    inset 10px 0 0 rgba(20, 16, 12, 0.75),
    inset 0 -1px 2px rgba(0, 0, 0, 0.45);
}
/* Archive label with Monozen crimson header band */
.ce-disk--top::after {
  content: '';
  position: absolute;
  right: 12%;
  bottom: 8%;
  left: 12%;
  height: 48%;
  border-radius: 2px;
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(40, 30, 20, 0.14) 5px 6px) 0 10px / 100% calc(100% - 10px) no-repeat,
    linear-gradient(180deg, #d84848 0 28%, #f5efe4 28% 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* Sculpted warm-ivory retro ADB mouse on the right desk flank */
.ce-desk-mouse {
  position: absolute;
  top: 34%;
  left: calc(50% + min(19vw, 205px));
  width: clamp(44px, 4.8vw, 62px);
  height: clamp(64px, 6.8vw, 88px);
  transform: perspective(380px) rotateX(46deg) rotateZ(11deg);
}
.ce-mouse-cord {
  position: absolute;
  top: -54%;
  left: 44%;
  width: 52px;
  height: 55%;
  border: 2.5px solid #1d1714;
  border-color: transparent transparent #1d1714 #1d1714;
  border-radius: 0 0 0 42px;
  transform: translateX(-85%) rotate(10deg);
}
.ce-mouse-body {
  position: absolute;
  inset: 0;
  border-radius: 6px 6px 13px 13px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent 20% 80%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, #e7dcc8 0%, #cbbba3 68%, #9f8f78 100%);
  border: 1px solid rgba(35, 25, 16, 0.45);
  box-shadow:
    0 3px 0 #8a7b66,
    0 6px 0 #5e5243,
    0 14px 24px rgba(0, 0, 0, 0.78),
    inset 0 2px 1px rgba(255, 250, 240, 0.55);
}
.ce-mouse-btn {
  position: absolute;
  top: 7%;
  right: 12%;
  left: 12%;
  height: 32%;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #ded2be, #c2b29b);
  border: 1px solid rgba(52, 38, 24, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ce-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9vh 4vw 7vh;
  perspective: 1500px;
}
.ce-machine {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: min(46vw, 490px, 56vh);
  aspect-ratio: 1;
  transform-origin: 0 0;
  will-change: transform;
}
.computer-entry.is-zooming .ce-desk {
  opacity: 0.15;
  transition: opacity 0.4s ease;
}
.computer-entry.is-zooming .ce-screen-prompt,
.computer-entry.is-zooming .ce-skip,
.computer-entry.is-zooming .ce-prefs {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.ce-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  pointer-events: none;
  filter: sepia(0.3) saturate(1.08) contrast(1.03) brightness(0.95);
  transition: opacity 0.3s var(--ce-ease), visibility 0s 0s;
}
.ce-machine.is-frames .ce-poster {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ce-ease), visibility 0s 0.3s;
}
.ce-frame-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  filter: sepia(0.3) saturate(1.08) contrast(1.03) brightness(0.95);
  transition: opacity 0.32s var(--ce-ease);
}
.ce-machine.is-frames {
  aspect-ratio: 1;
}
.ce-machine.is-frames .ce-frame-canvas {
  opacity: 1;
}
.ce-machine-body {
  display: none;
}
.ce-machine::after {
  content: '';
  position: absolute;
  right: 8%;
  bottom: 1.8%;
  left: 8%;
  z-index: 0;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.58), transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}
.ce-screen-prompt {
  position: absolute;
  bottom: 6.2%;
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(238, 226, 209, 0.5);
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.65vw, 10px);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}
.ce-screen-prompt::before {
  content: '';
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 77, 90, 0.55));
}
.ce-screen-prompt b {
  color: var(--ce-red);
  font-size: 1.15em;
  font-weight: 400;
}
.ce-prompt-mobile {
  display: none;
}
.ce-frame-screen {
  --ce-screen-left: 19.8307%;
  --ce-screen-top: 27.4682%;
  --ce-screen-width: 60.3386%;
  --ce-screen-height: 43.9814%;
  position: absolute;
  top: var(--ce-screen-top);
  left: var(--ce-screen-left);
  z-index: 5;
  display: none;
  width: var(--ce-screen-width);
  height: var(--ce-screen-height);
  padding: 0;
  border: 0;
  border-radius: clamp(4px, 1.4vw, 12px);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.ce-frame-screen {
  display: block;
}
.ce-frame-screen:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 3px var(--ce-red),
    0 0 36px rgba(255, 77, 90, 0.2);
}

/* ---- CRT power-on tube ignition & Classic Mac Click cue ---- */
.ce-power-tube {
  position: absolute;
  inset: -1px;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 234, 0.95) 0%, rgba(255, 77, 90, 0.35) 35%, transparent 70%)
      no-repeat 50% 50% / 100% 3px,
    #060709;
  opacity: 0;
  animation: ceTubePowerOn 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}
@keyframes ceTubePowerOn {
  0% {
    opacity: 1;
    background-size: 4% 2px, 100% 100%;
    clip-path: inset(0 0 0 0);
  }
  38% {
    opacity: 1;
    background-size: 100% 4px, 100% 100%;
    clip-path: inset(0 0 0 0);
  }
  78% {
    opacity: 0.45;
    background-size: 100% 100%, 100% 100%;
    clip-path: inset(48% 0 48% 0);
  }
  100% {
    opacity: 0;
    clip-path: inset(50% 0 50% 0);
  }
}

.ce-click-cue {
  --ce-cue-x: 0%;
  --ce-cue-y: 0%;
  --ce-cue-rx: 0deg;
  --ce-cue-ry: 0deg;
  --ce-cue-scale: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  padding: 5.5px;
  border-radius: 15px;
  background: #0a0908;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.72),
    0 0 18px rgba(244, 236, 223, 0.14);
  pointer-events: none;
  transform:
    translate3d(calc(-50% + var(--ce-cue-x)), calc(-50% + var(--ce-cue-y)), 0)
    perspective(380px)
    rotateY(var(--ce-cue-ry))
    rotateX(var(--ce-cue-rx))
    scale(var(--ce-cue-scale));
  transition:
    background-color 0.14s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
  animation: ceCueAppear 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}
@keyframes ceCueAppear {
  0% {
    opacity: 0;
    filter: blur(2px) brightness(1.6);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
  }
}
.ce-click-cue::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.16) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}
.ce-click-cue-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(68px, 7.2vw, 88px);
  height: clamp(30px, 3.2vw, 38px);
  padding: 0 16px;
  border: 2px solid #0a0908;
  border-radius: 9.5px;
  box-shadow: 0 0 0 2.5px #f4ecdf;
  background: #f4ecdf;
  color: #0a0908;
  font-family: 'Chicago', 'Charcoal', 'Geneva', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: clamp(13px, 1.35vw, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  transition:
    background-color 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
/* Classic Macintosh button inversion on screen hover / focus */
.ce-frame-screen:hover .ce-click-cue,
.ce-frame-screen:focus-visible .ce-click-cue {
  --ce-cue-scale: 1.05;
  background: #f4ecdf;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.76);
}
.ce-frame-screen:hover .ce-click-cue-inner,
.ce-frame-screen:focus-visible .ce-click-cue-inner {
  background: #0a0908;
  color: #f4ecdf;
  border-color: #f4ecdf;
  box-shadow: 0 0 0 2.5px #0a0908;
}
.ce-frame-screen:active .ce-click-cue {
  --ce-cue-scale: 0.96;
}
.computer-entry.is-zooming .ce-click-cue {
  --ce-cue-scale: 1.5;
  opacity: 0;
  transition:
    transform 0.19s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.17s ease;
}
.ce-machine-body {
  position: relative;
  width: 100%;
  transform: perspective(1500px) rotateX(var(--ce-rx)) rotateY(var(--ce-ry));
  transform-style: preserve-3d;
  transition: transform 0.16s ease-out;
  will-change: transform;
}
.ce-machine-body::before {
  content: '';
  position: absolute;
  top: 3%;
  right: 1%;
  bottom: 2%;
  left: 2%;
  z-index: 0;
  border-radius: clamp(20px, 4.2vw, 58px);
  background: linear-gradient(145deg, #80725f, #4c4034 48%, #251f1a);
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.6);
  transform: translateZ(-18px) translate(2%, -1.4%);
}
.ce-shell {
  position: relative;
  z-index: 2;
  padding: clamp(18px, 3.2vw, 38px) clamp(18px, 3.2vw, 38px) 0;
  border-radius: clamp(20px, 4.2vw, 58px) clamp(20px, 4.2vw, 58px)
    clamp(14px, 2.8vw, 38px) clamp(14px, 2.8vw, 38px);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.62), transparent 19%),
    linear-gradient(160deg, #f1e8d8 0%, #ded2bd 34%, #cbbb9f 72%, #ad9b80 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -22px 36px rgba(83, 59, 37, 0.22),
    inset 0 0 0 1px rgba(74, 53, 32, 0.28),
    0 34px 60px rgba(0, 0, 0, 0.54);
  animation: ce-arrive 0.55s var(--ce-ease) both;
}
.ce-shell::before {
  content: '';
  position: absolute;
  top: 3%;
  right: 4%;
  left: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.44), transparent);
  opacity: 0.6;
}
.ce-shell::after {
  content: '';
  position: absolute;
  right: 9%;
  bottom: 2.2%;
  left: 9%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(75, 52, 29, 0.22), transparent);
}
@keyframes ce-arrive {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.ce-machine-foot {
  position: absolute;
  right: 11%;
  bottom: -1.5%;
  left: 11%;
  height: 5.2%;
  z-index: 1;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #81725e, #453a2e 48%, #211b16);
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.46);
}
.ce-machine-foot::before,
.ce-machine-foot::after {
  content: '';
  position: absolute;
  bottom: -3px;
  width: 16%;
  height: 3px;
  border-radius: 3px;
  background: #100d0a;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.5);
}
.ce-machine-foot::before {
  left: 13%;
}
.ce-machine-foot::after {
  right: 13%;
}
.ce-machine-shadow {
  position: absolute;
  right: 3%;
  bottom: -8%;
  left: 3%;
  height: 22%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.64), transparent 68%);
  filter: blur(18px);
}
.ce-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: clamp(20px, 2.2vw, 30px);
  margin-bottom: clamp(8px, 1.1vw, 15px);
}
.ce-handle {
  position: relative;
  display: block;
  width: 18%;
  height: 30%;
  min-height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9c8a71, #6b5b49);
  box-shadow:
    inset 0 1px 3px rgba(38, 28, 19, 0.62),
    0 1px 0 rgba(255, 255, 255, 0.48);
}
.ce-handle::after {
  content: '';
  position: absolute;
  inset: 34% 14%;
  border-radius: inherit;
  background: #2b241d;
  opacity: 0.66;
}
.ce-badge {
  color: #5a4b3a;
  font-size: clamp(7px, 0.65vw, 9px);
  letter-spacing: 0.18em;
  white-space: nowrap;
  text-transform: uppercase;
}
.ce-badge b {
  color: #8e3b35;
  font-weight: 700;
}
.ce-bezel {
  position: relative;
  padding: clamp(8px, 1.7vw, 18px);
  border-radius: clamp(12px, 2.2vw, 24px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 30%),
    linear-gradient(160deg, #c4b299, #a59076 55%, #8a7660);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.46),
    inset 0 -10px 18px rgba(63, 44, 26, 0.24),
    0 2px 0 rgba(255, 255, 255, 0.14);
}
.ce-screen {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: clamp(5px, 1.2vw, 13px);
  background: var(--ce-screen);
  cursor: pointer;
  transform: translateZ(1px);
  box-shadow:
    0 0 0 2px #0a0908,
    0 0 0 4px rgba(255, 238, 210, 0.1),
    inset 0 0 42px rgba(0, 0, 0, 0.88),
    inset 0 0 110px rgba(0, 0, 0, 0.52);
  -webkit-appearance: none;
  appearance: none;
}
.ce-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 0 50%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 20% 78%, rgba(0, 0, 0, 0.34));
  pointer-events: none;
}
.ce-screen::after {
  content: '';
  position: absolute;
  top: 4%;
  right: 4%;
  z-index: 7;
  width: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 225, 0.42));
  box-shadow: 12px 4px 0 rgba(255, 245, 225, 0.12);
  transform: rotate(31deg);
  opacity: 0.7;
  pointer-events: none;
}
.ce-screen-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  filter: brightness(0.73) contrast(1.1) saturate(0.84);
  transform: scale(1.025);
  transition: transform 0.5s var(--ce-ease), filter 0.5s ease;
}
.ce-screen:hover .ce-screen-img,
.ce-screen:focus-visible .ce-screen-img {
  filter: brightness(0.86) contrast(1.06) saturate(0.94);
  transform: scale(1.045);
}
.ce-screen:focus-visible {
  outline: 2px solid var(--ce-red);
  outline-offset: 5px;
}
.ce-screen-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 172, 107, 0.06), transparent 34%),
    radial-gradient(ellipse at 50% 105%, rgba(255, 74, 90, 0.17), transparent 50%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.ce-screen-scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.32) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 45, 65, 0.025) 0 2px,
      rgba(45, 255, 160, 0.018) 2px 4px,
      rgba(80, 140, 255, 0.022) 4px 6px
    );
  opacity: 0.58;
  pointer-events: none;
}
.ce-screen-glare {
  position: absolute;
  inset: -15% -20%;
  z-index: 4;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 243, 220, 0.16) 43%,
    rgba(255, 243, 220, 0.035) 50%,
    transparent 62%
  );
  pointer-events: none;
}
.ce-screen-ui {
  position: absolute;
  z-index: 5;
  right: 4%;
  left: 4%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 247, 231, 0.62);
  font-size: clamp(6px, 0.52vw, 8px);
  letter-spacing: 0.14em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  pointer-events: none;
}
.ce-screen-ui--top {
  top: 4.4%;
}
.ce-screen-ui--bottom {
  bottom: 4.6%;
  align-items: center;
}
.ce-screen-enter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 248, 235, 0.92);
  font-weight: 600;
}
.ce-screen-enter::after {
  content: '↗';
  color: var(--ce-red);
  font-size: 1.15em;
}
.ce-screen-cue {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: clamp(38px, 4.5vw, 60px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 245, 225, 0.42);
  border-radius: 50%;
  opacity: 0.72;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease, transform 0.35s var(--ce-ease);
  pointer-events: none;
}
.ce-screen-cue::before,
.ce-screen-cue::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255, 245, 225, 0.5);
  transform: translate(-50%, -50%);
}
.ce-screen-cue::before {
  width: 1px;
  height: 40%;
}
.ce-screen-cue::after {
  width: 40%;
  height: 1px;
}
.ce-screen:hover .ce-screen-cue,
.ce-screen:focus-visible .ce-screen-cue {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}
.ce-chin {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
  height: clamp(38px, 4.6vw, 58px);
  margin-top: clamp(8px, 1.1vw, 15px);
  padding: 0 2.2% 0 2.4%;
  color: #5c4c3a;
}
.ce-floppy {
  position: relative;
  display: block;
  width: 22%;
  height: 22%;
  min-height: 7px;
  border-radius: 1px;
  background: #2b241d;
  box-shadow:
    inset 0 1px 2px #050403,
    0 1px 0 rgba(255, 255, 255, 0.28);
}
.ce-floppy::before {
  content: '';
  position: absolute;
  top: 34%;
  right: 9%;
  left: 9%;
  height: 1px;
  background: rgba(244, 233, 214, 0.24);
}
.ce-floppy::after {
  content: '';
  position: absolute;
  top: 22%;
  left: 12%;
  width: 18%;
  height: 18%;
  background: rgba(244, 233, 214, 0.16);
}
.ce-chin-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(6px, 0.58vw, 8px);
  letter-spacing: 0.11em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
}
.ce-chin-label b {
  color: #8d3b35;
  font-weight: 700;
}
.ce-power {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(11px, 1.2vw, 16px);
  height: clamp(11px, 1.2vw, 16px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7efdf, #b6a58e 58%, #796955);
  box-shadow:
    inset 0 0 0 1px rgba(72, 50, 27, 0.28),
    0 1px 1px rgba(255, 255, 255, 0.46);
}
.ce-power::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ce-red);
  box-shadow: 0 0 5px rgba(255, 77, 90, 0.76);
  transform: translate(-50%, -50%);
}
.ce-under {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: clamp(18px, 2vw, 26px);
  border-top: 1px solid rgba(82, 59, 35, 0.13);
  margin-top: 1.2%;
  color: rgba(72, 53, 33, 0.54);
  font-size: clamp(5px, 0.48vw, 7px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ce-under b {
  color: rgba(111, 44, 40, 0.72);
  font-weight: 500;
}

/* ---- Small room companions ---- */
.ce-plant {
  position: absolute;
  right: clamp(18px, 6vw, 92px);
  bottom: 14%;
  z-index: 1;
  width: clamp(66px, 9vw, 132px);
  height: clamp(102px, 15vw, 210px);
  opacity: 0.92;
  transform: translateZ(-10px);
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.ce-plant,
.ce-mug {
  display: none;
}
.ce-pot {
  position: absolute;
  right: 15%;
  bottom: 0;
  left: 15%;
  height: 28%;
  border-radius: 3px 3px 42% 42%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 22% 78%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, #b36d4e, #743c2c 66%, #4c241c);
  box-shadow:
    inset 0 2px 0 rgba(255, 213, 173, 0.23),
    0 12px 18px rgba(0, 0, 0, 0.42);
}
.ce-pot::before {
  content: '';
  position: absolute;
  top: -8%;
  right: -7%;
  left: -7%;
  height: 22%;
  border-radius: 3px;
  background: linear-gradient(180deg, #8e4d37, #5f2e23);
  box-shadow: inset 0 1px 0 rgba(255, 216, 179, 0.2);
}
.ce-leaf {
  position: absolute;
  width: 35%;
  height: 46%;
  border-radius: 100% 0 100% 0;
  background:
    linear-gradient(145deg, rgba(139, 164, 116, 0.34), transparent 34%),
    linear-gradient(160deg, #4f6748, #2c3c2f 62%, #16231b);
  box-shadow: inset -6px -8px 12px rgba(0, 0, 0, 0.22);
  transform-origin: 70% 100%;
}
.ce-leaf--1 {
  bottom: 25%;
  left: 30%;
  transform: rotate(-35deg);
}
.ce-leaf--2 {
  bottom: 32%;
  left: 34%;
  transform: rotate(12deg) scale(0.9);
}
.ce-leaf--3 {
  right: 25%;
  bottom: 31%;
  transform: rotate(44deg) scale(0.84);
}
.ce-leaf--4 {
  bottom: 45%;
  left: 26%;
  transform: rotate(-66deg) scale(0.7);
}
.ce-leaf--5 {
  right: 21%;
  bottom: 47%;
  transform: rotate(67deg) scale(0.72);
}
.ce-mug {
  position: absolute;
  bottom: 16%;
  left: clamp(18px, 6vw, 92px);
  z-index: 1;
  width: clamp(42px, 5.5vw, 76px);
  height: clamp(36px, 4.5vw, 62px);
  border-radius: 7% 7% 26% 26%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent 22% 76%, rgba(0, 0, 0, 0.18)),
    linear-gradient(180deg, #e5dac6, #b9aa93 72%, #8f806b);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.48),
    0 14px 18px rgba(0, 0, 0, 0.34);
  transform: rotate(-6deg);
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.ce-mug::before {
  content: '';
  position: absolute;
  top: 10%;
  right: -22%;
  width: 30%;
  height: 52%;
  border: clamp(4px, 0.5vw, 7px) solid #b9aa93;
  border-left: 0;
  border-radius: 0 60% 60% 0;
  box-shadow: inset -2px 0 2px rgba(255, 255, 255, 0.16);
}
.ce-mug::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 12%;
  left: 12%;
  height: 8%;
  border-radius: 50%;
  background: #3f2c1e;
  box-shadow: inset 0 2px 3px #1e130d;
}
.ce-mug-band {
  position: absolute;
  right: 0;
  bottom: 27%;
  left: 0;
  height: 12%;
  background: rgba(157, 55, 48, 0.56);
}

/* ---- Entry actions ---- */
.ce-prefs {
  position: absolute;
  top: clamp(16px, 2.4vw, 30px);
  left: clamp(18px, 3vw, 42px);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 22px);
}
.ce-pref-btn {
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(240, 227, 208, 0.2);
  color: rgba(240, 227, 208, 0.62);
  background: transparent;
  font: inherit;
  font-size: clamp(8px, 0.65vw, 10px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ce-pref-btn[aria-pressed='false'] {
  color: rgba(240, 227, 208, 0.36);
  border-bottom-color: rgba(240, 227, 208, 0.1);
}
.ce-pref-btn:hover,
.ce-pref-btn:focus-visible {
  color: #fff4e4;
  border-color: var(--ce-red);
  outline: none;
}
.ce-skip {
  position: absolute;
  top: clamp(16px, 2.4vw, 30px);
  right: clamp(18px, 3vw, 42px);
  z-index: 9;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(240, 227, 208, 0.2);
  color: rgba(240, 227, 208, 0.62);
  background: transparent;
  font: inherit;
  font-size: clamp(8px, 0.65vw, 10px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ce-skip:hover,
.ce-skip:focus-visible {
  color: #fff4e4;
  border-color: var(--ce-red);
  outline: none;
}
/* ---- The screen-to-viewport handover ---- */
.ce-zoom {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000003;
  overflow: hidden;
  border-radius: clamp(5px, 1.2vw, 13px);
  background: #050607;
  pointer-events: none;
  will-change: left, top, width, height, border-radius;
  transition:
    left 0.9s cubic-bezier(0.7, 0, 0.2, 1),
    top 0.9s cubic-bezier(0.7, 0, 0.2, 1),
    width 0.9s cubic-bezier(0.7, 0, 0.2, 1),
    height 0.9s cubic-bezier(0.7, 0, 0.2, 1),
    border-radius 0.9s cubic-bezier(0.7, 0, 0.2, 1),
    opacity 0.36s ease;
}
.ce-zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: brightness(0.92) contrast(1.04) saturate(0.96);
}
.ce-zoom::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.32) 0 1px,
      transparent 1px 3px
    ),
    radial-gradient(ellipse at 50% 50%, transparent 0 56%, rgba(0, 0, 0, 0.42));
  opacity: 0.54;
  pointer-events: none;
}
.ce-zoom.is-fading {
  opacity: 0;
}
.ce-flash {
  position: fixed;
  inset: 0;
  z-index: 1000002;
  background: var(--ce-red);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.ce-flash.is-on {
  opacity: 0.12;
}

/* ---- Live-site CRT glass ---- */
.crt-live-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.18) 0 1px,
      transparent 1px 3px
    );
}
.crt-live-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 57%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(90deg, rgba(255, 44, 61, 0.018), transparent 18% 82%, rgba(45, 130, 255, 0.014));
}
.crt-live-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 46, 61, 0.02) 0 1px,
    rgba(44, 255, 142, 0.012) 1px 2px,
    rgba(64, 122, 255, 0.016) 2px 3px
  );
  opacity: 0.55;
}
html.crt-live .crt-live-overlay {
  opacity: 0.48;
}
html.crt-live.crt-live-strong .crt-live-overlay {
  opacity: 0.62;
}
@media (prefers-reduced-motion: reduce) {
  .ce-shell,
  .ce-zoom,
  .ce-zoom img,
  .ce-power-tube,
  .ce-click-cue,
  .ce-machine.is-zooming {
    animation: none;
    transition: none;
  }
  .ce-screen-img,
  .ce-screen-cue {
    transition: none;
  }
}

/* ---- Responsive room ---- */
@media (max-width: 720px) {
  .ce-scene {
    padding: 5vh 4vw 10vh;
  }
  .ce-machine {
    width: min(86vw, 56vh, 360px);
  }
  .ce-desk-disks,
  .ce-desk-mouse,
  .ce-desk-cable {
    display: none;
  }
  .ce-machine-body {
    transition: none;
  }
  .ce-prompt-desktop {
    display: none;
  }
  .ce-prompt-mobile {
    display: inline;
  }
  .ce-screen-prompt {
    bottom: 6.2%;
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .ce-plant,
  .ce-mug {
    display: none;
  }
  .ce-prefs {
    top: 14px;
    left: 16px;
    gap: 10px;
  }
  .ce-pref-btn,
  .ce-skip {
    top: 14px;
    right: 16px;
    font-size: 8px;
  }
}
@media (max-height: 560px) {
  .ce-plant,
  .ce-mug {
    display: none;
  }
  .ce-scene {
    padding-top: 4vh;
    padding-bottom: 4vh;
  }
  .ce-machine {
    width: min(46vw, 60vh, 460px);
  }
}