/* ── Lynn's Desk — scroll sections + retro frames ── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --cream: #ece8e0;
  --paper: #f0ece4;
  --ink: #14120f;
  --ink-soft: #4a4640;
  --accent: #b8986a;

  /* Typography — warm tungsten on gunmetal desk */
  --desk-text: #e8e4dc;
  --desk-text-soft: rgba(220, 216, 208, 0.92);
  --desk-text-muted: rgba(200, 196, 188, 0.62);
  --desk-glow: rgba(210, 195, 165, 0.45);
  --desk-glow-soft: rgba(180, 170, 155, 0.22);
  --desk-chroma-a: rgba(200, 180, 160, 0.18);
  --desk-chroma-b: rgba(160, 175, 190, 0.16);

  --font-retro-crt: "VT323", "Courier New", Courier, monospace;
  --font-retro-pixel: "Press Start 2P", "Courier New", Courier, monospace;
  --font-retro-mono: "Share Tech Mono", "Courier New", Courier, monospace;
  --font-display: var(--font-retro-crt);
  --font-serif: Georgia, "Times New Roman", serif;
  --font-hand: "Caveat", "Segoe Script", cursive;
  --font-chunk: var(--font-retro-pixel);
  --crt-glow:
    0 0 8px var(--desk-glow),
    0 0 22px var(--desk-glow-soft),
    1px 0 var(--desk-chroma-a),
    -1px 0 var(--desk-chroma-b);
  --intro-ease: cubic-bezier(0.33, 1, 0.38, 1);
  --page-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Win95 chrome — matte gunmetal */
  --win-gray: #b8bcc2;
  --win-dark: #3a4048;
  --win-light: #d8dce2;
  --win-title: #4a5058;
  --win-border-grad: linear-gradient(
    145deg,
    #d0d4da 0%,
    #9aa0a8 28%,
    #6a7078 52%,
    #4a5058 76%,
    #2a3038 100%
  );
  --win-face: "Tahoma", "MS Sans Serif", "Segoe UI", sans-serif;

  --eco-float-dur: 6s;
  --eco-flicker-dur: 4.2s;
  --eco-glitch-dur: 5.6s;
  --eco-grain-dur: 4.4s;
  --eco-grain-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.65'/%3E%3C/svg%3E");

  --net-tilt-x: 0deg;
  --net-tilt-y: 0deg;
  --net-signal: 0.82;
  --net-buffer: 0%;
  --net-parallax: 0px;

  --metal-stripe: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.14) 0 2px,
    rgba(0, 0, 0, 0.06) 2px 4px
  );
  --metal-face: linear-gradient(180deg, #c8ccd4 0%, #9aa3ad 38%, #7a848f 100%);
  --metal-tab: linear-gradient(180deg, #dde1e6, #aeb6bf);
  --metal-border: #5c6670;
  --metal-inset: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -1px -2px 0 rgba(0, 0, 0, 0.18);
  --metal-drop: 2px 3px 6px rgba(0, 0, 0, 0.35);

  --folder-face: linear-gradient(180deg, #c8ccd2 0%, #9aa0a8 22%, #6a7078 58%, #4a5058 100%);
  --folder-tab: linear-gradient(180deg, #dde1e6, #aeb4bc);
  --folder-border: #3a4048;

  --canvas-black: #080808;
  --bg-overlay-hero: rgba(8, 8, 10, 0.16);
  --bg-overlay-project: rgba(4, 4, 6, 0.28);

  /* Category tints — subtle warmth/cool within metal family */
  --scene-tint: rgba(184, 152, 106, 0.06);
  --text-scale: 1;
  --sticker-scale: 1.05;
  --cursor-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M0 0v28l8-6 4 10 4-2-4-10 8-2z'/%3E%3Cpath fill='%23fff' d='M2 2v22l6-4 3 7 2-1-3-7 6-2z'/%3E%3C/svg%3E") 0 0, auto;
  --cursor-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M8 2v12H6V8H4v6H2v8h2v10h4v-4h2v4h4V2z'/%3E%3Cpath fill='%23fff' d='M10 4v10h-2V10H8v4H6v6h2v8h2v-2h2v2h2V4z'/%3E%3C/svg%3E") 8 0, pointer;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-retro-mono);
  background: #101114;
}

/* Category accents — same metal language, slight tonal shift */
.scroll-panel--scene-about { --scene-tint: rgba(196, 176, 138, 0.08); --accent: #c4b08a; }
.scroll-panel--scene-taskbar,
.scroll-panel--scene-explorer { --scene-tint: rgba(168, 174, 184, 0.07); --accent: #a8aebc; }
.scroll-panel--scene-paint,
.scroll-panel--scene-rednotes,
.scroll-panel--scene-social { --scene-tint: rgba(176, 182, 192, 0.07); --accent: #b0b6c0; }
.scroll-panel--scene-academic { --scene-tint: rgba(148, 152, 160, 0.09); --accent: #9498a0; }
.scroll-panel--scene-contact { --scene-tint: rgba(168, 158, 188, 0.1); --accent: #b0a8c4; }

body.scroll-unlocked {
  overflow: hidden;
}

body.scroll-unlocked,
body.scroll-unlocked * {
  cursor: var(--cursor-arrow);
}

body.scroll-unlocked a,
body.scroll-unlocked button,
body.scroll-unlocked .intro-lamp-button,
body.scroll-unlocked [role="button"] {
  cursor: var(--cursor-arrow);
}

/* ── Grain ── */

.grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

body.scroll-unlocked .grain {
  opacity: calc(0.14 + (1 - var(--net-signal, 0.82)) * 0.16);
  animation: net-grain-drift 0.85s steps(5) infinite;
}

@keyframes net-grain-drift {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-1.5%, 1%, 0); }
  50% { transform: translate3d(1%, -1.2%, 0); }
  75% { transform: translate3d(-0.8%, -0.6%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ── Network instability overlay (pixel grain · scanlines · signal tear) ── */

.network-fx {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.1s ease;
}

body.scroll-unlocked .network-fx {
  opacity: 1;
}

.network-fx__scanlines,
.network-fx__grain,
.network-fx__rgb,
.network-fx__tear,
.network-fx__vignette,
.network-fx__buffer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.network-fx__scanlines {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, 0.09) 2px 3px
  );
  opacity: 0.28;
  mix-blend-mode: multiply;
  animation: net-scan-drift 8s linear infinite;
}

.network-fx__grain {
  inset: -18%;
  opacity: calc(0.22 + (1 - var(--net-signal, 0.82)) * 0.35);
  background-image: var(--eco-grain-noise);
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  animation: net-fx-grain 0.72s steps(4) infinite;
}

.network-fx__rgb {
  opacity: 0;
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg, rgba(255, 60, 60, 0.07) 0 33%, transparent 33% 66%, rgba(60, 120, 255, 0.06) 66% 100%);
  animation: net-rgb-idle 24s steps(1, end) infinite;
}

.network-fx__tear {
  opacity: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 6px,
    rgba(255, 255, 255, 0.04) 6px 7px,
    transparent 7px 14px
  );
  mix-blend-mode: overlay;
}

.network-fx__vignette {
  background: radial-gradient(
    ellipse 88% 78% at 50% 46%,
    transparent 52%,
    rgba(0, 0, 0, 0.22) 100%
  );
  opacity: calc(0.35 + (1 - var(--net-signal, 0.82)) * 0.25);
  animation: net-vignette-pulse 11s ease-in-out infinite;
}

.network-fx__buffer {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  height: 2px;
  width: var(--net-buffer, 0%);
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184, 152, 106, 0.15) 18%,
    rgba(220, 212, 196, 0.85) 50%,
    rgba(184, 152, 106, 0.15) 82%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(184, 152, 106, 0.35);
}

@keyframes net-scan-drift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 6px, 0); }
}

@keyframes net-fx-grain {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  20% { transform: translate3d(-2%, 1.5%, 0) scale(1.01); }
  40% { transform: translate3d(1.5%, -1%, 0) scale(0.99); }
  60% { transform: translate3d(-1%, -1.5%, 0) scale(1.01); }
  80% { transform: translate3d(2%, 0.5%, 0) scale(1); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes net-rgb-idle {
  0%, 96%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
  97% { opacity: 0.38; transform: translate3d(2px, 0, 0); }
  98% { opacity: 0; transform: translate3d(0, 0, 0); }
}

@keyframes net-vignette-pulse {
  0%, 100% { opacity: calc(0.32 + (1 - var(--net-signal, 0.82)) * 0.22); }
  48% { opacity: calc(0.4 + (1 - var(--net-signal, 0.82)) * 0.28); }
  49% { opacity: calc(0.55 + (1 - var(--net-signal, 0.82)) * 0.35); }
  50% { opacity: calc(0.38 + (1 - var(--net-signal, 0.82)) * 0.25); }
}

body.network-fx--glitch .network-fx__scanlines {
  animation: net-scan-glitch 0.12s steps(3) 1;
  opacity: 0.42;
}

body.network-fx--glitch .network-fx__grain {
  animation: net-fx-grain 0.08s steps(4) 2;
  opacity: 0.62;
}

body.network-fx--glitch .network-fx__rgb {
  opacity: 0.72;
  animation: net-rgb-burst 0.14s steps(2) 1;
}

body.network-fx--glitch .network-fx__tear {
  opacity: 0.35;
  animation: net-tear-slice 0.11s steps(2) 1;
}

body.network-fx--desync .network-fx__buffer {
  opacity: 0.85;
  animation: net-buffer-sweep 0.55s ease-out 1;
}

body.network-fx--desync .site-bg__layer.is-active .site-bg__video {
  animation: net-video-desync 0.42s steps(3) 1;
}

@keyframes net-scan-glitch {
  0% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(0, -3px, 0); }
  66% { transform: translate3d(0, 2px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes net-rgb-burst {
  0% { transform: translate3d(0, 0, 0); opacity: 0.75; }
  50% { transform: translate3d(-5px, 0, 0); opacity: 0.85; }
  100% { transform: translate3d(4px, 1px, 0); opacity: 0; }
}

@keyframes net-tear-slice {
  0% { clip-path: inset(18% 0 62% 0); transform: translate3d(-4px, 0, 0); }
  50% { clip-path: inset(42% 0 38% 0); transform: translate3d(5px, 0, 0); }
  100% { clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); }
}

@keyframes net-buffer-sweep {
  0% { width: 0%; opacity: 0; }
  18% { width: 34%; opacity: 0.9; }
  100% { width: 100%; opacity: 0; }
}

@keyframes net-video-desync {
  0% { transform: translate3d(0, 0, 0) scale(1); filter: saturate(1.06) contrast(1.05); }
  33% { transform: translate3d(-6px, 0, 0) scale(1.008); filter: saturate(0.7) contrast(1.18) brightness(0.92); }
  66% { transform: translate3d(5px, 2px, 0) scale(0.998); filter: saturate(1.1) contrast(1.12) brightness(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: saturate(1.06) contrast(1.05); }
}

body.scroll-unlocked .site-bg__layer.is-active .site-bg__video {
  animation: net-video-flicker 16s steps(1, end) infinite;
}

@keyframes net-video-flicker {
  0%, 98%, 100% { filter: saturate(1.06) contrast(1.05) brightness(1); }
  99% { filter: saturate(0.94) contrast(1.08) brightness(0.97); }
}

body.network-fx--glitch .retro-scene {
  animation: net-scene-jitter 0.1s steps(2) 1;
}

body.network-fx--desync .retro-scene {
  animation: net-scene-desync 0.38s ease-out 1;
}

@keyframes net-scene-jitter {
  0% { transform: perspective(1400px) rotateX(var(--net-tilt-x, 0deg)) rotateY(var(--net-tilt-y, 0deg)) scale(var(--text-scale, 1)) translate3d(0, 0, 0); }
  50% { transform: perspective(1400px) rotateX(var(--net-tilt-x, 0deg)) rotateY(var(--net-tilt-y, 0deg)) scale(var(--text-scale, 1)) translate3d(-2px, 1px, 0); }
  100% { transform: perspective(1400px) rotateX(var(--net-tilt-x, 0deg)) rotateY(var(--net-tilt-y, 0deg)) scale(var(--text-scale, 1)) translate3d(0, 0, 0); }
}

@keyframes net-scene-desync {
  0% { transform: perspective(1400px) rotateX(var(--net-tilt-x, 0deg)) rotateY(var(--net-tilt-y, 0deg)) scale(var(--text-scale, 1)); filter: none; }
  35% { transform: perspective(1400px) rotateX(calc(var(--net-tilt-x, 0deg) + 0.6deg)) rotateY(calc(var(--net-tilt-y, 0deg) - 0.8deg)) scale(calc(var(--text-scale, 1) * 0.992)); filter: saturate(0.85); }
  100% { transform: perspective(1400px) rotateX(var(--net-tilt-x, 0deg)) rotateY(var(--net-tilt-y, 0deg)) scale(var(--text-scale, 1)); filter: none; }
}

body.network-fx--glitch:not(.retro-is-dragging) .retro-scene .retro-win:not(.retro-win--closed) {
  animation: net-win-skew 0.09s steps(2) 1;
}

body.retro-is-dragging .miniso-daily-row,
body.retro-is-dragging .miniso-meme-slot,
body.retro-is-dragging .cosmo-meme-slot,
body.retro-is-dragging .retro-scene {
  animation: none !important;
}

@keyframes net-win-skew {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(1px, -1px, 0) skewX(0.4deg); }
  100% { transform: translate3d(0, 0, 0); }
}

.site-rail__signal {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 14px;
  margin-top: 0.35rem;
  opacity: 0;
  transition: opacity 0.6s ease;
}

body.scroll-unlocked .site-rail__signal {
  opacity: 1;
}

.site-rail__signal-bar {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: rgba(184, 152, 106, 0.35);
  transform-origin: bottom center;
  animation: net-signal-bar 2.8s ease-in-out infinite;
}

.site-rail__signal-bar:nth-child(1) { height: 4px; animation-delay: 0s; }
.site-rail__signal-bar:nth-child(2) { height: 7px; animation-delay: 0.15s; }
.site-rail__signal-bar:nth-child(3) { height: 10px; animation-delay: 0.3s; }
.site-rail__signal-bar:nth-child(4) { height: 13px; animation-delay: 0.45s; }

body.network-fx--glitch .site-rail__signal-bar {
  animation: net-signal-drop 0.2s steps(2) 1;
}

@keyframes net-signal-bar {
  0%, 100% {
    transform: scaleY(calc(0.55 + var(--net-signal, 0.82) * 0.45));
    background: rgba(184, 152, 106, calc(0.35 + var(--net-signal, 0.82) * 0.45));
  }
  47% { transform: scaleY(calc(0.4 + var(--net-signal, 0.82) * 0.35)); }
  48% { transform: scaleY(0.25); background: rgba(200, 120, 100, 0.55); }
  49% { transform: scaleY(calc(0.5 + var(--net-signal, 0.82) * 0.4)); }
}

@keyframes net-signal-drop {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(0.15); opacity: 0.4; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* ── Intro ── */

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060606;
  pointer-events: auto;
  overflow: hidden;
  transition: background 0.8s ease 0.75s, opacity 0.6s ease 1.1s, visibility 0s linear 1.65s;
}

.intro-overlay__noise,
.intro-overlay__static {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
}

.intro-overlay__noise {
  opacity: 0.52;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.72'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
  animation: intro-noise-drift 0.42s steps(6) infinite;
}

.intro-overlay__static {
  opacity: 0.14;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.04) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0 1px,
      transparent 1px 4px
    );
  animation: intro-static-flicker 0.12s steps(3) infinite;
}

@keyframes intro-noise-drift {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-2%, 1.5%, 0); }
  40% { transform: translate3d(1.5%, -1%, 0); }
  60% { transform: translate3d(-1%, -2%, 0); }
  80% { transform: translate3d(2%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes intro-static-flicker {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.2; }
}

/* Dreamcore — warp / strobe / temporal collapse */
.intro-overlay__warp {
  position: absolute;
  inset: -35%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(ellipse 42% 58% at 50% 44%, rgba(186, 168, 228, 0.14), transparent 68%),
    radial-gradient(ellipse 55% 38% at 28% 62%, rgba(210, 188, 148, 0.1), transparent 62%),
    radial-gradient(ellipse 38% 48% at 72% 38%, rgba(160, 190, 210, 0.08), transparent 60%);
  mix-blend-mode: screen;
  filter: blur(10px);
}

.intro-overlay__strobe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  mix-blend-mode: overlay;
}

body.intro-montage-active .intro-overlay__noise {
  opacity: calc(0.48 + var(--intro-chaos, 0) * 0.38);
  animation-duration: calc(0.42s - var(--intro-chaos, 0) * 0.22s);
}

body.intro-montage-active .intro-overlay__static {
  opacity: calc(0.16 + var(--intro-chaos, 0) * 0.28);
  animation-duration: calc(0.12s - var(--intro-chaos, 0) * 0.06s);
}

body.intro-montage-active .intro-overlay__warp {
  opacity: calc(0.28 + var(--intro-chaos, 0) * 0.62);
  animation: intro-warp-collapse var(--warp-duration, 0.2s) steps(2) infinite;
}

body.intro-montage-active .intro-overlay__strobe {
  animation: intro-strobe-chaos var(--strobe-duration, 0.09s) steps(1) infinite;
}

body.intro-montage-active .intro-stage {
  animation: intro-stage-temporal var(--stage-duration, 0.24s) steps(2) infinite;
  filter: blur(calc(var(--intro-chaos, 0) * 2.4px)) saturate(calc(1 + var(--intro-chaos, 0) * 0.18));
}

body.intro-montage-active .intro-lamp-montage {
  animation: intro-lamp-stretch var(--lamp-duration, 0.17s) steps(2) infinite;
}

body.intro-montage-active .intro-lamp-montage[data-art="y2k"] {
  animation: none;
  transform: scale(1);
}

@keyframes intro-warp-collapse {
  0% { transform: scale(1) skew(0deg); filter: blur(8px); }
  25% { transform: scale(1.1, 0.88) skew(2.5deg); filter: blur(18px); }
  50% { transform: scale(0.92, 1.14) skew(-3.5deg); filter: blur(5px); }
  75% { transform: scale(1.06, 0.86) skew(1.2deg) translateY(-2.5%); filter: blur(20px); }
  100% { transform: scale(1) skew(0deg); filter: blur(10px); }
}

@keyframes intro-strobe-chaos {
  0%, 62%, 100% { opacity: 0; background: transparent; }
  63% { opacity: calc(0.32 + var(--intro-chaos, 0) * 0.38); background: rgba(255, 250, 235, 0.42); }
  64% { opacity: 0; }
  78% { opacity: calc(0.22 + var(--intro-chaos, 0) * 0.28); background: rgba(198, 178, 255, 0.32); }
  79% { opacity: 0; }
  91% { opacity: calc(0.18 + var(--intro-chaos, 0) * 0.22); background: rgba(255, 255, 255, 0.28); }
  92% { opacity: 0; }
}

@keyframes intro-stage-temporal {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  20% { transform: translate3d(-5px, 2px, 0) scale(1.03, 0.97) skewX(-1deg); }
  40% { transform: translate3d(6px, -4px, 0) scale(0.96, 1.06) skewX(1.4deg); }
  60% { transform: translate3d(-3px, 5px, 0) scale(1.05, 0.91); }
  80% { transform: translate3d(4px, -2px, 0) scale(0.98, 1.03) skewY(0.6deg); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes intro-lamp-stretch {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  33% { transform: scaleX(1.14) scaleY(0.86) translateX(-3.5%); filter: brightness(1.35) saturate(1.25) contrast(1.08); }
  66% { transform: scaleX(0.88) scaleY(1.18) translateY(2.5%); filter: brightness(0.78) contrast(1.25) saturate(0.9); }
}

body.intro-lamp-settled:not(.desk-awake) .intro-overlay {
  background: #030206;
  transition: background 1.1s ease;
}

body.intro-lamp-settled:not(.desk-awake) .intro-overlay__warp {
  opacity: 0.1;
  animation: intro-settled-warp 5.5s ease-in-out infinite;
  filter: blur(8px);
}

body.intro-lamp-settled:not(.desk-awake) .intro-overlay__strobe {
  animation: intro-settled-flicker 3.2s steps(1) infinite;
}

body.intro-lamp-settled:not(.desk-awake) .intro-stage {
  animation: intro-settled-drift 4.2s ease-in-out infinite;
  filter: none;
  transform: translateY(0);
  transition: filter 0.7s ease, transform 0.7s ease;
}

@keyframes intro-settled-warp {
  0%, 100% { transform: scale(1) skew(0deg); opacity: 0.18; }
  50% { transform: scale(1.04, 0.96) skew(0.8deg); opacity: 0.28; }
}

@keyframes intro-settled-drift {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(2px); opacity: 1; }
}

@keyframes intro-settled-flicker {
  0%, 90%, 100% { opacity: 0; }
  91% { opacity: 0.14; background: rgba(255, 248, 230, 0.18); }
  92% { opacity: 0; }
  95% { opacity: 0.09; background: rgba(205, 190, 255, 0.14); }
  96% { opacity: 0; }
}

.intro-flash-burst {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.08);
  mix-blend-mode: overlay;
}

.intro-flash-burst.is-burst {
  animation: intro-flash-burst 0.32s ease-out forwards;
}

@keyframes intro-flash-burst {
  0% { opacity: 0; transform: scale(1); }
  8% { opacity: calc(0.28 + var(--flash-strength, 1) * 0.42); transform: scale(1.02); }
  18% { opacity: calc(0.12 + var(--flash-strength, 1) * 0.18); transform: scale(0.99); }
  100% { opacity: 0; transform: scale(1); }
}

.intro-overlay.is-fading,
.intro-overlay.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-overlay.is-fading {
  visibility: visible;
  transition: opacity 0.85s ease 0.15s;
}

body.desk-awake .intro-overlay {
  background: rgba(14, 13, 11, 0);
}

.intro-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.desk-awake .intro-stage {
  animation: intro-vanish 0.55s var(--intro-ease) 0.12s forwards;
  pointer-events: none;
}

@keyframes intro-vanish {
  to { opacity: 0; visibility: hidden; transform: scale(1.03); }
}

.intro-lamp-button {
  padding: 0;
  border: none;
  background: none;
  cursor: var(--cursor-arrow);
  transition: transform 0.2s ease, filter 0.2s ease, opacity 0.65s ease;
  opacity: 0.35;
}

.intro-lamp-button--ready {
  opacity: 1;
}

.intro-lamp-button:disabled {
  cursor: default;
}

.intro-lamp-button--ready:hover {
  filter: brightness(1.08);
  transform: scale(1.02);
}

.intro-lamp-button--ready:active {
  transform: scale(0.98);
}

.intro-style-tag {
  min-height: 1.4em;
  margin-bottom: 0.85rem;
  font-family: var(--font-retro-pixel);
  font-size: clamp(0.42rem, 1.1vw, 0.52rem);
  letter-spacing: 0.14em;
  color: rgba(220, 212, 196, 0.82);
  text-shadow: 0 0 10px rgba(184, 152, 106, 0.28);
  opacity: 0.92;
  transition: opacity 0.35s ease, transform 0.35s var(--intro-ease);
}

.intro-style-tag--swap {
  animation: intro-tag-swap 0.42s var(--intro-ease) forwards;
}

.intro-style-tag--out {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

@keyframes intro-tag-swap {
  0% { opacity: 0; transform: translateY(6px); letter-spacing: 0.08em; }
  100% { opacity: 0.92; transform: translateY(0); letter-spacing: 0.14em; }
}

.intro-lamp-montage {
  position: relative;
  display: block;
  width: clamp(220px, 24vw, 300px);
  height: clamp(280px, 30vw, 380px);
  transition: filter 0.55s ease, transform 0.55s var(--intro-ease);
  isolation: isolate;
}

.intro-lamp-montage::before {
  content: "";
  position: absolute;
  inset: 6% 10% 14%;
  pointer-events: none;
  z-index: 4;
  border-radius: 4px;
  opacity: 0;
  animation: intro-lamp-border-glitch 5.2s steps(1, end) infinite;
}

.intro-lamp-montage[data-art="y2k"]::before,
.intro-lamp-montage.intro-lamp-montage--locking::before,
body.intro-lamp-settled:not(.desk-awake) .intro-lamp-montage::before {
  animation: none;
  opacity: 0;
  box-shadow: none;
  transform: none;
}

@keyframes intro-lamp-border-glitch {
  0%, 90%, 100% {
    opacity: 0;
    box-shadow: none;
    transform: translate3d(0, 0, 0);
  }
  91% {
    opacity: 0.9;
    transform: translate3d(-2px, 0, 0);
    box-shadow:
      inset 0 0 0 2px rgba(210, 195, 165, 0.55),
      -3px 0 0 rgba(200, 160, 130, 0.28),
      3px 0 0 rgba(150, 165, 185, 0.24);
  }
  92% {
    opacity: 0.7;
    transform: translate3d(2px, 1px, 0) skewX(0.35deg);
    box-shadow:
      inset 0 0 0 2px rgba(230, 210, 170, 0.42),
      inset 0 10px 0 rgba(200, 160, 130, 0.1);
  }
  93% { opacity: 0; }
}

.intro-lamp-montage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 55%;
  height: 12%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(210, 195, 165, 0.14), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.intro-lamp-montage[data-art="y2k"]::after {
  opacity: 0;
  background: radial-gradient(ellipse, rgba(210, 195, 165, 0.16), transparent 70%);
}

body.intro-lamp-settled:not(.desk-awake) .intro-lamp-montage[data-art="y2k"] {
  filter: brightness(0.48) saturate(0.78) contrast(1.06);
  animation: none;
  transform: scale(1);
  transition: filter 0.85s ease, transform 0.55s var(--intro-ease);
}

body.intro-lamp-settled:not(.desk-awake) .intro-lamp-montage[data-art="y2k"] .intro-lamp-img {
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.78));
}

body.intro-lamp-settled:not(.desk-awake) .intro-lamp-montage[data-art="y2k"] .intro-lamp-scanlines {
  opacity: 0.28;
}

.intro-lamp-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: 0.88;
  transform: scale(0.96);
  transition: opacity 0.55s ease, transform 0.55s var(--intro-ease), filter 0.75s ease;
}

.intro-lamp-art--swap {
  opacity: 1;
  transform: scale(1);
}

.intro-lamp-art--settled {
  animation: none;
}

body.intro-lamp-settled:not(.desk-awake) .intro-lamp-art--settled {
  filter: brightness(0.58);
  transition: filter 0.85s ease, opacity 0.55s ease, transform 0.55s var(--intro-ease);
}

.intro-lamp-scanlines {
  position: absolute;
  inset: 8% 12% 18%;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0, 0, 0, 0.18) 2px 3px
  );
  mix-blend-mode: multiply;
  transition: opacity 0.4s ease;
}

.intro-lamp-montage .intro-lamp-scanlines {
  opacity: 0.32;
}

.intro-lamp-montage[data-art="y2k"] .intro-lamp-scanlines {
  opacity: 0.45;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0, 0, 0, 0.16) 2px 3px
  );
  mix-blend-mode: multiply;
}

.intro-lamp-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.48));
}

.intro-lamp-montage[data-art="pixel"] .intro-lamp-img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Art-style atmosphere — object-only, no canvas fills */
.intro-lamp-montage[data-art="pop"] { filter: saturate(1.08) contrast(1.04) brightness(1.03); }
.intro-lamp-montage[data-art="surreal"] { filter: saturate(1.06) brightness(1.02); }
.intro-lamp-montage[data-art="minimal"] { filter: brightness(1.06); }
.intro-lamp-montage[data-art="dada"] { filter: contrast(1.05) saturate(1.02); }
.intro-lamp-montage[data-art="constructivist"] { filter: contrast(1.06); }
.intro-lamp-montage[data-art="fauvism"] { filter: saturate(1.12) contrast(1.03); }
.intro-lamp-montage[data-art="cubist"] { filter: saturate(0.96) contrast(1.04); }
.intro-lamp-montage[data-art="artdeco"] { filter: contrast(1.05) brightness(1.03); }
.intro-lamp-montage[data-art="nouveau"] { filter: saturate(1.06) brightness(1.02); }
.intro-lamp-montage[data-art="baroque"] { filter: sepia(0.08) contrast(1.04); }
.intro-lamp-montage[data-art="memphis"] { filter: saturate(1.1) brightness(1.03); }
.intro-lamp-montage[data-art="vaporwave"] { filter: saturate(1.1) brightness(1.02); }
.intro-lamp-montage[data-art="ink"] { filter: brightness(1.04); }
.intro-lamp-montage[data-art="brutalist"] { filter: contrast(1.06) saturate(0.92); }
.intro-lamp-montage[data-art="stained"] { filter: saturate(1.12) brightness(1.04); }
.intro-lamp-montage[data-art="ceramic"] { filter: brightness(1.03); }
.intro-lamp-montage[data-art="pixel"] { filter: contrast(1.04); }
.intro-lamp-montage[data-art="anime"] { filter: saturate(1.08) brightness(1.04); }
.intro-lamp-montage[data-art="line"] { filter: brightness(1.04); }

.intro-lamp-montage[data-art="y2k"] {
  filter: saturate(0.88) contrast(1.04) brightness(0.98);
}

.intro-lamp-montage[data-art="y2k"] .intro-lamp-img {
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.52));
}

.intro-lamp-montage[data-art="y2k"] .intro-lamp-art--settled,
.intro-lamp-montage[data-art="y2k"] .intro-lamp-art--swap {
  transform: scale(1);
}

body.desk-awake .intro-lamp-montage[data-art="y2k"] {
  filter: drop-shadow(0 0 36px rgba(230, 210, 170, 0.52)) brightness(1.12) saturate(0.94);
  animation: intro-lamp-ignite 1.05s ease-out forwards;
}

body.desk-awake .intro-lamp-montage[data-art="y2k"]::after {
  opacity: 1;
  animation: intro-lamp-glow-on 1.1s ease-out forwards;
}

body.desk-awake .intro-lamp-art--settled {
  animation: intro-lamp-light-on 1.15s ease-out forwards;
}

@keyframes intro-lamp-ignite {
  0% { filter: brightness(0.48) saturate(0.78); }
  35% { filter: drop-shadow(0 0 48px rgba(240, 215, 165, 0.65)) brightness(1.45) saturate(1.02); }
  100% { filter: drop-shadow(0 0 32px rgba(230, 210, 170, 0.45)) brightness(1.12) saturate(0.94); }
}

@keyframes intro-lamp-light-on {
  0% { filter: brightness(0.58); }
  40% { filter: brightness(1.4) drop-shadow(0 0 28px rgba(230, 200, 150, 0.55)); }
  100% { filter: brightness(1.06) drop-shadow(0 0 14px rgba(210, 190, 155, 0.22)); }
}

@keyframes intro-lamp-glow-on {
  from { opacity: 0; transform: translateX(-50%) scale(0.45); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

body.desk-awake .intro-lamp-scanlines {
  opacity: 0.28;
}

.intro-hint {
  margin-top: 1.6rem;
  font-family: var(--font-hand);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: rgba(246, 241, 232, 0.72);
  animation: hint-breathe 2.4s ease-in-out infinite;
}

@keyframes hint-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

body.desk-awake .intro-hint { animation: none; opacity: 0; }

.intro-hint--click {
  max-width: min(92vw, 540px);
  text-align: center;
  line-height: 1.38;
  font-style: italic;
  letter-spacing: 0.012em;
  color: rgba(246, 241, 232, 0.88);
  opacity: 0;
  transform: translateY(10px);
  animation: none;
  transition: opacity 0.6s ease, transform 0.6s var(--intro-ease);
}

.intro-hint--click.intro-hint--revealed {
  opacity: 1;
  transform: translateY(0);
}

body.intro-lamp-settled:not(.desk-awake) .intro-hint--click.intro-hint--revealed {
  animation: hint-breathe 2.8s ease-in-out infinite;
  filter: none;
}

.intro-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 1;
  width: min(90vmax, 1000px);
  height: min(90vmax, 1000px);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.04);
  background: radial-gradient(circle, rgba(230, 210, 170, 0.42) 0%, transparent 62%);
}

body.desk-awake .intro-glow {
  animation: glow-spread 1.15s var(--intro-ease) 0.22s forwards;
}

@keyframes glow-spread {
  to { opacity: 0.75; transform: translate(-50%, -50%) scale(2.4); }
}

.artifact { position: relative; display: block; }

/* ── Fixed background ── */

.desk-app {
  position: relative;
  height: 100vh;
}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.site-bg__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.35s var(--page-ease);
}

.site-bg__layer.is-active {
  opacity: 1;
}

.site-bg__static {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 42%;
}

.site-bg__static--desk {
  background-image: url("../assets/background1.jpg");
  background-position: center center;
}

.site-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(1.06) contrast(1.05);
}

body:not(.desk-awake):not(.scroll-unlocked) .site-bg__layer {
  opacity: 0;
}

body.desk-awake:not(.scroll-unlocked) .site-bg__layer {
  opacity: 0;
}

body.desk-awake:not(.scroll-unlocked) .site-bg__layer[data-bg-id="desk"] {
  opacity: 1;
}

body.scroll-unlocked .site-bg__layer.is-active {
  opacity: 1;
}

body.scroll-unlocked .site-bg__layer[data-bg-id="desk"] {
  opacity: 0 !important;
}

.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-overlay-hero);
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  transition:
    background 1.1s var(--page-ease),
    backdrop-filter 1.1s var(--page-ease);
}

body.in-projects .site-bg__layer.is-active .site-bg__video {
  filter: saturate(0.94) brightness(0.96);
}

body.in-projects .site-bg::after {
  background: var(--bg-overlay-project);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

/* HNU Youth Media + Inde Study — shared youth-media bg, slightly dimmer */
.site-bg__layer[data-bg-id="youth-media"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.07);
  opacity: 0;
  transition: opacity 1.35s var(--page-ease);
}

.site-bg__layer[data-bg-id="youth-media"].is-active::after {
  opacity: 1;
}

body.in-projects .site-bg__layer.is-active[data-bg-id="youth-media"] .site-bg__video {
  filter: saturate(0.91) brightness(0.91);
}

/* ── Scroll container (CannonDesign-style full sections) ── */

.scroll-site {
  position: relative;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

body.desk-awake:not(.scroll-unlocked) .scroll-site {
  visibility: visible;
  pointer-events: none;
}

body.desk-awake.desk-enter-ready:not(.scroll-unlocked) {
  cursor: var(--cursor-arrow);
}

body.desk-awake.desk-enter-ready:not(.scroll-unlocked) .desk-header,
body.desk-awake.desk-enter-ready:not(.scroll-unlocked) .desk-header * {
  cursor: var(--cursor-arrow);
}

body.desk-awake.desk-enter-ready .desk-header {
  pointer-events: auto;
}

body.scroll-unlocked .scroll-site {
  visibility: visible;
  pointer-events: auto;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.scroll-panel {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
}

.scroll-panel--hero {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: start;
  padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 4vw, 4rem);
}

/* ── Fixed rail (CannonDesign sidebar) ── */

.site-rail {
  position: fixed;
  left: clamp(0.6rem, 1.8vw, 1.25rem);
  top: 0;
  bottom: 0;
  z-index: 40;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.25rem, 3vh, 2rem) 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}

body.scroll-unlocked .site-rail {
  opacity: 1;
}

.site-rail__mark {
  font-family: var(--font-retro-pixel);
  font-size: 0.45rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(210, 204, 192, 0.85);
  text-shadow: 0 0 10px rgba(184, 152, 106, 0.28);
}

.site-rail__line {
  flex: 1;
  width: 2px;
  margin: 0.85rem 0;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(184, 152, 106, 0.1) 85%);
}

.site-rail__index {
  font-family: var(--font-retro-pixel);
  font-size: 0.48rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--desk-text-muted);
  text-shadow: 0 0 8px rgba(184, 152, 106, 0.16);
  transition: color 0.35s ease;
}

body.in-projects .site-rail__index {
  color: rgba(220, 212, 196, 0.78);
}

/* ── Editorial project sections ── */

.scroll-panel--project {
  position: relative;
  min-height: 135vh;
  padding:
    clamp(8vh, 14vh, 16vh)
    clamp(1.25rem, 4vw, 3.5rem)
    clamp(10vh, 16vh, 20vh)
    clamp(2.75rem, 6vw, 5rem);
  background: transparent;
}

.panel-stage {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
}

.panel-index {
  display: block;
  font-family: var(--font-retro-pixel);
  font-size: clamp(0.42rem, 1.1vw, 0.52rem);
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--desk-text-muted);
  text-shadow: 0 0 8px rgba(184, 152, 106, 0.2);
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.scroll-panel--project::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, var(--scene-tint), transparent 70%);
  opacity: 0.9;
}

.panel-line {
  will-change: transform, opacity;
  transform: scale(var(--text-scale, 1));
  transform-origin: left center;
}

/* ── Retro CRT / pixel / Y2K section typography ── */

@keyframes crt-phosphor-flicker {
  0%, 100% { opacity: 1; }
  42% { opacity: 0.94; }
  43% { opacity: 1; }
  89% { opacity: 0.97; }
}

@keyframes crt-chroma-glitch {
  0%, 94%, 100% { text-shadow: var(--crt-glow); }
  95% {
    text-shadow:
      3px 0 rgba(200, 160, 130, 0.42),
      -3px 0 rgba(150, 165, 185, 0.38),
      0 0 16px var(--desk-glow-soft);
  }
  96% {
    text-shadow:
      -2px 1px rgba(200, 160, 130, 0.32),
      2px -1px rgba(150, 165, 185, 0.28),
      0 0 12px rgba(180, 170, 155, 0.22);
  }
}

.panel-line--title,
.scroll-panel--scene-about .panel-line--title-vertical {
  position: relative;
  font-family: var(--font-retro-crt);
  font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 9rem);
  line-height: 0.95;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--desk-text);
  text-shadow: var(--crt-glow);
  -webkit-font-smoothing: antialiased;
  animation: crt-phosphor-flicker 4.8s linear infinite;
}

@media (prefers-reduced-motion: no-preference) {
  .panel-line--title,
  .scroll-panel--scene-about .panel-line--title-vertical {
    animation:
      crt-phosphor-flicker 4.8s linear infinite,
      crt-chroma-glitch 9s steps(1, end) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-line--title,
  .scroll-panel--scene-about .panel-line--title-vertical {
    animation: none;
  }
}

.panel-line--title::after,
.scroll-panel--scene-about .panel-line--title-vertical::after {
  content: "";
  position: absolute;
  inset: -2px -4px;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0, 0, 0, 0.14) 2px 3px
  );
  mix-blend-mode: soft-light;
  opacity: 0.42;
}

.panel-line--title {
  max-width: 92%;
  margin-bottom: clamp(4vh, 8vh, 10vh);
}

.panel-line--body {
  position: relative;
  z-index: 3;
  font-family: var(--font-retro-mono);
  font-weight: 400;
  font-size: clamp(1.05rem, 3.2vw, 2.35rem);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--desk-text-soft);
  text-shadow:
    0 0 6px var(--desk-glow-soft),
    0 1px 2px rgba(0, 0, 0, 0.55);
  max-width: min(68vw, 820px);
  margin-top: clamp(-6vh, -4vh, -2rem);
}

.scroll-panel--scene-about .panel-line--title-vertical {
  position: absolute;
  top: clamp(4vh, 10vh, 14vh);
  right: clamp(0.25rem, 1.5vw, 1rem);
  margin: 0;
  max-width: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg) scale(var(--text-scale, 1));
  transform-origin: center center;
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 0.92;
  z-index: 4;
  pointer-events: none;
}

.scroll-panel--scene-paint .panel-line,
.scroll-panel--scene-rednotes .panel-line,
.scroll-panel--scene-social .panel-line,
.scroll-panel--scene-academic .panel-line,
.scroll-panel--scene-contact .panel-line,
.scroll-panel--scene-ai .panel-line,
.scroll-panel--scene-taskbar .panel-line--body {
  transform-origin: right center;
}

.scroll-panel--scene-about .panel-stage--about {
  padding-right: clamp(3.5rem, 8vw, 6rem);
}

.scroll-panel--scene-about .panel-index {
  position: relative;
  z-index: 4;
}

.scroll-panel--scene-cascade .panel-line--title,
.scroll-panel--scene-explorer .panel-line--title,
.scroll-panel--scene-icons .panel-line--title,
.scroll-panel--scene-gallery .panel-line--title,
.scroll-panel--scene-taskbar .panel-line--title {
  width: fit-content;
  max-width: 92%;
  margin-right: auto;
}

.scroll-panel--scene-paint .panel-line--title,
.scroll-panel--scene-rednotes .panel-line--title,
.scroll-panel--scene-social .panel-line--title,
.scroll-panel--scene-academic .panel-line--title,
.scroll-panel--scene-contact .panel-line--title,
.scroll-panel--scene-ai .panel-line--title {
  width: fit-content;
  max-width: 92%;
  margin-left: auto;
  text-align: right;
}

.scroll-panel--scene-paint .panel-index,
.scroll-panel--scene-rednotes .panel-index,
.scroll-panel--scene-social .panel-index,
.scroll-panel--scene-academic .panel-index,
.scroll-panel--scene-contact .panel-index,
.scroll-panel--scene-ai .panel-index {
  text-align: right;
}

.scroll-panel--scene-cascade .panel-line--body,
.scroll-panel--scene-about .panel-line--body,
.scroll-panel--scene-explorer .panel-line--body,
.scroll-panel--scene-icons .panel-line--body,
.scroll-panel--scene-gallery .panel-line--body {
  margin-left: clamp(0.5rem, 4vw, 3rem);
}

.scroll-panel--scene-paint .panel-line--body,
.scroll-panel--scene-rednotes .panel-line--body,
.scroll-panel--scene-social .panel-line--body,
.scroll-panel--scene-academic .panel-line--body,
.scroll-panel--scene-contact .panel-line--body,
.scroll-panel--scene-ai .panel-line--body,
.scroll-panel--scene-taskbar .panel-line--body {
  margin-left: auto;
  margin-right: clamp(0.5rem, 5vw, 4rem);
  text-align: right;
}

/* ── Hero header intro animation ── */

.desk-header {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 30;
  width: min(34rem, 88vw);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.96);
  transition:
    top 0.95s var(--intro-ease),
    left 0.95s var(--intro-ease),
    transform 0.95s var(--intro-ease),
    text-align 0.6s ease,
    opacity 0.85s var(--intro-ease),
    visibility 0s linear 0.7s;
}

body.title-visible .desk-header {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition:
    top 0.95s var(--intro-ease),
    left 0.95s var(--intro-ease),
    transform 0.95s var(--intro-ease),
    text-align 0.6s ease,
    opacity 0.85s var(--intro-ease),
    visibility 0s linear 0s;
}

body.scroll-unlocked.title-settled .desk-header {
  position: relative;
  top: auto;
  left: auto;
  width: min(26rem, 100%);
  text-align: left;
  transform: none;
}

.desk-enter-hint {
  margin-top: 1.4rem;
  font-family: var(--font-hand);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 600;
  font-style: italic;
  color: rgba(220, 212, 196, 0.72);
  opacity: 0;
  transition:
    opacity 0.85s var(--intro-ease),
    color 0.28s ease,
    transform 0.28s var(--intro-ease),
    text-shadow 0.28s ease,
    letter-spacing 0.28s ease;
}

body.title-visible .desk-enter-hint {
  opacity: 1;
  animation: hint-breathe 2.4s ease-in-out 0.85s infinite;
}

body.desk-enter-ready:not(.scroll-unlocked) .desk-eyebrow,
body.desk-enter-ready:not(.scroll-unlocked) .desk-title,
body.desk-enter-ready:not(.scroll-unlocked) .desk-subtitle,
body.desk-enter-ready:not(.scroll-unlocked) .desk-enter-hint {
  transition:
    color 0.28s ease,
    transform 0.28s var(--intro-ease),
    text-shadow 0.28s ease,
    letter-spacing 0.28s ease,
    opacity 0.28s ease;
}

body.desk-enter-ready:not(.scroll-unlocked) .desk-header:hover .desk-eyebrow,
body.desk-enter-ready:not(.scroll-unlocked) .desk-eyebrow:hover {
  color: #dcc8a0;
  transform: translateY(-1px);
}

body.desk-enter-ready:not(.scroll-unlocked) .desk-header:hover .desk-title,
body.desk-enter-ready:not(.scroll-unlocked) .desk-title:hover {
  transform: scale(1.015);
}

body.desk-enter-ready:not(.scroll-unlocked) .desk-header:hover .desk-title__emph,
body.desk-enter-ready:not(.scroll-unlocked) .desk-title__emph:hover {
  text-shadow:
    0 0 16px rgba(230, 200, 150, 0.55),
    0 0 28px rgba(210, 185, 140, 0.35);
}

body.desk-enter-ready:not(.scroll-unlocked) .desk-header:hover .desk-subtitle,
body.desk-enter-ready:not(.scroll-unlocked) .desk-subtitle:hover {
  color: rgba(238, 232, 218, 0.96);
  letter-spacing: 0.07em;
  transform: translateY(-1px);
}

body.desk-enter-ready:not(.scroll-unlocked) .desk-header:hover .desk-enter-hint,
body.desk-enter-ready:not(.scroll-unlocked) .desk-enter-hint:hover {
  color: rgba(252, 246, 236, 0.98);
  transform: translateY(-3px) scale(1.04);
  letter-spacing: 0.02em;
  text-shadow: 0 0 22px rgba(230, 210, 170, 0.52);
  animation: none;
  opacity: 1;
}

.desk-eyebrow {
  font-family: var(--font-hand);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

body.is-lit .desk-eyebrow { color: #c4b08a; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }

.desk-title {
  position: relative;
  font-family: var(--font-retro-crt);
  font-size: clamp(3rem, 8vw, 6.2rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desk-title::after {
  content: "";
  position: absolute;
  inset: -4px -6px;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0, 0, 0, 0.12) 2px 3px
  );
  mix-blend-mode: soft-light;
  opacity: 0.38;
}

body.is-lit .desk-title {
  color: var(--desk-text);
  text-shadow: var(--crt-glow);
}

.desk-title__emph {
  font-family: var(--font-retro-crt);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(230, 210, 180, 0.95);
  text-shadow:
    0 0 10px rgba(210, 185, 140, 0.38),
    0 0 18px rgba(180, 170, 150, 0.22),
    2px 0 rgba(200, 180, 160, 0.28),
    -2px 0 rgba(160, 175, 190, 0.24);
}

body.is-lit .desk-title__emph {
  color: rgba(232, 216, 188, 0.96);
}

.desk-subtitle {
  margin-top: 1rem;
  max-width: min(34rem, 92vw);
  font-family: var(--font-retro-mono);
  font-size: clamp(0.82rem, 1.35vw, 1rem);
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1.55;
  text-transform: uppercase;
}

body.is-lit .desk-subtitle {
  color: rgba(220, 212, 196, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

body.title-visible .desk-subtitle { margin-left: auto; margin-right: auto; }
body.scroll-unlocked.title-settled .desk-subtitle { margin-left: 0; margin-right: 0; }

/* Dreamy bubble trail — title-centered page */
.desk-bubble-layer {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

body.desk-awake.desk-enter-ready:not(.scroll-unlocked) .desk-bubble-layer {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease 0.2s, visibility 0s linear 0s;
}

body.scroll-unlocked .desk-bubble-layer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.desk-bubble {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  mix-blend-mode: screen;
  animation: desk-bubble-float var(--bubble-life, 2.6s) ease-out forwards;
}

.desk-bubble::before {
  content: "";
  position: absolute;
  inset: 14% 22% 42% 18%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  filter: blur(1px);
}

.desk-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.28),
    0 0 14px var(--bubble-glow, rgba(255, 190, 220, 0.38));
}

@keyframes desk-bubble-float {
  0% {
    transform: translate3d(var(--bubble-x, 0), var(--bubble-y, 0), 0) scale(0.15);
    opacity: 0.88;
  }
  70% {
    opacity: 0.62;
  }
  100% {
    transform: translate3d(
      calc(var(--bubble-x, 0) + var(--bubble-drift, 0px)),
      calc(var(--bubble-y, 0) - var(--bubble-rise, 90px)),
      0
    ) scale(1.08);
    opacity: 0;
  }
}

.scroll-cue {
  position: absolute;
  bottom: clamp(2rem, 5vh, 3rem);
  left: clamp(1.5rem, 4vw, 4rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-retro-pixel);
  font-size: 0.48rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--desk-text-muted);
  text-shadow: 0 0 8px rgba(184, 152, 106, 0.18);
  opacity: 0;
  animation: cue-fade 2s ease-in-out 0.5s infinite;
}

body.scroll-unlocked .scroll-cue { opacity: 1; }

@keyframes cue-fade {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(4px); }
}

.scroll-cue__line {
  display: block;
  width: 48px;
  height: 1px;
  background: rgba(220, 212, 196, 0.42);
}

/* ── Retro scenes — Windows desktop compositions ── */

.retro-scene {
  position: relative;
  z-index: 2;
  min-height: clamp(440px, 64vh, 720px);
  margin: clamp(2vh, 5vh, 7vh) 0;
  will-change: transform, opacity;
  transform:
    perspective(1400px)
    rotateX(var(--net-tilt-x, 0deg))
    rotateY(var(--net-tilt-y, 0deg))
    scale(var(--text-scale, 1))
    translate3d(0, var(--net-parallax, 0px), 0);
  transform-origin: left center;
  transform-style: preserve-3d;
}

body.scroll-unlocked .panel-stage {
  transform: perspective(1600px) rotateY(calc(var(--net-tilt-y, 0deg) * 0.35));
  transform-origin: center center;
}

.retro-scene > .retro-win,
.retro-scene > .retro-pixel-load,
.retro-scene > .retro-cascade,
.retro-scene > .retro-taskbar,
.retro-scene > .about-folders,
.retro-scene > .about-stack,
.retro-scene > .about-trash-slot,
.retro-scene > .miniso-trash-slot,
.retro-scene > .rednotes-trash-slot,
.retro-scene > .cosmo-trash-slot,
.retro-scene > .hnu-trash-slot,
.retro-scene > .inde-trash-slot,
.retro-scene > .cosmo-meme-slot,
.retro-scene > .about-meme-row,
.retro-scene > .about-meme-stack,
.retro-scene > .miniso-bottom-band,
.retro-scene > .miniso-daily-row,
.retro-scene > .miniso-meme-slot,
.retro-scene > .mac-trash {
  position: absolute;
  top: var(--y, 0);
  left: var(--x, auto);
  right: var(--x-right, auto);
  bottom: var(--y-bottom, auto);
  width: var(--w, min(420px, 75vw));
  z-index: var(--z, 1);
}

.retro-scene > .about-folders {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  /* Let clicks pass through to windows underneath (e.g. Education close). */
  pointer-events: none;
}

.about-folders__hint,
.about-folders__row,
.about-folders .retro-folder {
  pointer-events: auto;
}

.about-folders__row {
  display: flex;
  gap: clamp(0.65rem, 1.8vw, 1.25rem);
  align-items: flex-end;
}

.about-folders__hint {
  position: relative;
  margin: 0;
  padding: 4px 10px;
  font-family: var(--win-face);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  background: rgba(58, 64, 72, 0.62);
  border: 1px solid rgba(154, 160, 168, 0.38);
  border-radius: 2px;
}

/* ── About Me — iPod-style meme player (grey metal) ── */

.about-meme-player {
  pointer-events: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5));
}

@keyframes about-meme-player-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  45% { transform: translateY(-9px) rotate(1deg); }
  70% { transform: translateY(-5px) rotate(-0.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .about-meme-player {
    animation: none;
  }
}

.about-meme-player__ipod {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: clamp(118px, 11vw, 142px);
  cursor: move;
  padding: 0.55rem 0.52rem 0.62rem;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(124deg, transparent 61%, rgba(0, 0, 0, 0.14) 61.15%, transparent 61.4%),
    linear-gradient(38deg, transparent 44%, rgba(255, 255, 255, 0.035) 44.2%, transparent 44.6%),
    radial-gradient(ellipse 85% 42% at 20% 92%, rgba(36, 32, 28, 0.22), transparent 72%),
    radial-gradient(ellipse 55% 35% at 82% 8%, rgba(0, 0, 0, 0.14), transparent 68%),
    var(--metal-stripe),
    linear-gradient(
      168deg,
      #aeb4bc 0%,
      #8a929c 22%,
      #626a74 46%,
      #727a84 72%,
      #969ea8 100%
    );
  border: 2px solid #2a3038;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -5px 14px rgba(0, 0, 0, 0.32),
    0 4px 0 #3a424a,
    0 12px 28px rgba(0, 0, 0, 0.5);
}

.about-meme-player__ipod::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.26),
    inset -2px -3px 5px rgba(255, 255, 255, 0.06);
}

.about-meme-player__ipod::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    repeating-linear-gradient(
      91deg,
      transparent 0 14px,
      rgba(0, 0, 0, 0.035) 14px 15px
    ),
    radial-gradient(circle at 12% 18%, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px),
    radial-gradient(circle at 88% 76%, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px);
  mix-blend-mode: multiply;
  opacity: 0.72;
}

.about-meme-player__screen-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0.32rem;
  border-radius: 5px;
  background: #0c0e12;
  border: 2px solid #06080a;
  box-shadow:
    inset 0 0 0 1px #2a3038,
    inset 0 4px 12px rgba(0, 0, 0, 0.78),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

.about-meme-player__screen-wrap::after {
  content: "";
  position: absolute;
  inset: 0.12rem;
  border-radius: 3px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 2px 0 0 rgba(255, 255, 255, 0.03);
  opacity: 0.85;
}

.about-meme-player__screen {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #06080a;
  border: 1px solid #050608;
}

.about-meme-player__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}

.about-meme-player.is-advancing .about-meme-player__img {
  animation: meme-player-flash 0.38s ease;
}

@keyframes meme-player-flash {
  0% { opacity: 0.2; filter: saturate(0.5) brightness(1.35); }
  100% { opacity: 1; filter: saturate(0.9) contrast(1.05); }
}

.about-meme-player__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0, 0, 0, 0.14) 2px 3px
  );
  opacity: 0.38;
}

.about-meme-player__counter {
  position: absolute;
  right: 0.16rem;
  bottom: 0.12rem;
  padding: 0.04rem 0.22rem;
  font-family: var(--font-retro-mono);
  font-size: 7px;
  letter-spacing: 0.08em;
  color: #c8d8e8;
  background: rgba(0, 0, 0, 0.68);
  border: 1px solid rgba(160, 180, 200, 0.28);
}

.about-meme-player__wheel {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.55rem;
  height: 3.55rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 40% 28%, #c8ced4 0%, #a0a8b0 38%, #787f88 100%);
  border: 2px solid #3a424a;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    inset 0 -6px 12px rgba(0, 0, 0, 0.26),
    0 2px 5px rgba(0, 0, 0, 0.38);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.about-meme-player__wheel::before {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 42% 58%, rgba(48, 40, 32, 0.16), transparent 58%),
    radial-gradient(circle at 68% 32%, rgba(0, 0, 0, 0.08), transparent 45%);
  z-index: 1;
}

.about-meme-player__wheel::after {
  content: "";
  position: absolute;
  inset: 0.12rem;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.12);
}

.about-meme-player__wheel-ring {
  position: absolute;
  inset: 0.28rem;
  border-radius: 50%;
  border: 1px solid rgba(40, 44, 50, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 2px 6px rgba(0, 0, 0, 0.18);
}

.about-meme-player__wheel-center {
  position: relative;
  z-index: 2;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background:
    linear-gradient(165deg, #b8bec6 0%, #8a929c 52%, #6a727c 100%);
  border: 1px solid #3a424a;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 6px rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.32);
}

.about-meme-player__wheel:hover,
.about-meme-player__wheel:focus-visible {
  transform: scale(1.04);
  outline: none;
}

.about-meme-player__wheel:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

.about-meme-player__wheel:active .about-meme-player__wheel-center {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

.retro-scene--about > .about-trash-slot {
  top: calc(var(--education-block-h) + clamp(0.55rem, 1.2vh, 0.85rem));
  left: 27%;
  right: auto;
  bottom: auto;
  width: min(500px, 46vw);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
}

/* ── MINISO section layout ── */

.scroll-panel--scene-miniso {
  --scene-tint: rgba(168, 176, 188, 0.08);
  --accent: #a8b0bc;
  min-height: 100vh;
  overflow: hidden;
}

.scroll-panel--scene-miniso .panel-stage--miniso {
  padding-right: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}

.scroll-panel--scene-miniso .panel-line--body {
  margin-top: clamp(-3vh, -1.25rem, -0.35rem);
  max-width: min(62vw, 720px);
}

.scroll-panel--scene-miniso .panel-line--title-vertical {
  position: absolute;
  top: clamp(4vh, 10vh, 14vh);
  right: clamp(0.25rem, 1.5vw, 1rem);
  margin: 0;
  max-width: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg) scale(var(--text-scale, 1));
  transform-origin: center center;
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 0.92;
  z-index: 4;
  pointer-events: none;
}

.retro-scene--miniso {
  --x: 0;
  --y: 0;
  --miniso-media-ratio: 4 / 3;
  --miniso-preview-ratio: 3 / 4;
  --miniso-portrait-width: min(233px, 19.8vw);
  --miniso-portrait-height: clamp(274px, 30.4vw, 356px);
  --miniso-right-rail: clamp(5rem, 9.5vw, 7.25rem);
  --miniso-list-width: min(240px, 22vw);
  --miniso-project-span: min(686px, 66vw);
  --miniso-daily-arrows: 2.7rem;
  --miniso-daily-frame-width: min(240px, 20vw);
  --miniso-daily-width: calc(var(--miniso-daily-frame-width) + var(--miniso-daily-arrows));
  --miniso-phone-scale: 0.6;
  min-height: clamp(440px, 62vh, 680px);
  max-height: clamp(440px, 62vh, 680px);
  height: clamp(440px, 62vh, 680px);
  margin: clamp(0.5vh, 1.5vh, 2.5vh) 0 clamp(1vh, 2vh, 3vh);
  overflow: hidden;
}

.retro-scene--miniso > .retro-win--miniso-project {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: fit-content;
  max-width: min(686px, 66vw);
  max-height: 100%;
  height: auto;
  overflow: visible;
}

.retro-scene--miniso > .miniso-trash-slot {
  top: calc(var(--miniso-portrait-height) + 22px + 28px + clamp(0.4rem, 0.9vh, 0.65rem));
  left: 0;
  right: auto;
  bottom: auto;
  width: auto;
  z-index: 12;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
}

.retro-scene--miniso > .retro-win--miniso-list {
  top: clamp(1.35rem, 3.5vh, 2rem);
  left: auto;
  right: var(--miniso-right-rail);
  bottom: auto;
  width: min(240px, 22vw);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-scene--miniso > .retro-win--miniso-project-list {
  top: calc(clamp(1.35rem, 3.5vh, 2rem) + clamp(118px, 16vh, 148px));
  left: auto;
  right: var(--miniso-right-rail);
  bottom: auto;
  width: min(240px, 22vw);
  max-height: clamp(200px, 28vh, 260px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-win--miniso-project {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  width: fit-content;
  overflow: visible;
}

.miniso-project {
  display: grid;
  grid-template-columns: var(--miniso-portrait-width) minmax(0, 1.5fr);
  align-items: start;
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  background: var(--win-gray);
}

.miniso-project__media {
  display: flex;
  justify-content: center;
  align-self: start;
  height: var(--miniso-portrait-height);
}

.miniso-project__media .media-slot {
  margin: 4px 2px 4px 4px;
  width: var(--miniso-portrait-width);
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.miniso-project__frame.miniso-media--portrait {
  aspect-ratio: var(--miniso-preview-ratio);
  height: 100%;
  max-height: var(--miniso-portrait-height);
}

.miniso-project__details {
  margin: 4px 4px 4px 0;
  padding: 8px 12px;
  background: #fff;
  border: 2px inset var(--win-gray);
  height: var(--miniso-portrait-height);
  max-height: var(--miniso-portrait-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  font-size: 12px;
  min-width: 0;
  max-width: none;
  width: 100%;
  align-self: start;
  box-sizing: border-box;
}

.miniso-project__row:not(.miniso-project__row--contribution) dt,
.miniso-project__row:not(.miniso-project__row--contribution) dd {
  white-space: nowrap;
}

.miniso-project__row--contribution dd[data-miniso-field="results"] {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── Site-wide resizable retro windows ── */

.retro-resizable-win {
  position: relative;
  box-sizing: border-box;
}

.retro-scene > .retro-resize-pinned {
  right: auto !important;
  bottom: auto !important;
}

.retro-scene > .retro-resize-pinned.retro-resize-sized {
  max-width: none !important;
}

.miniso-daily-row.retro-resize-pinned,
.miniso-meme-slot.retro-resize-pinned,
.retro-folder.retro-resize-pinned,
.mac-trash.retro-resize-pinned,
.scene-sticker.retro-resize-pinned,
.about-meme-row.retro-resize-pinned {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  pointer-events: auto;
  animation: none !important;
}

.miniso-meme-slot.retro-resize-pinned {
  transform: none !important;
  transform-origin: top left;
}

.retro-scene > .miniso-meme-slot.retro-resize-pinned {
  max-width: none !important;
}

.retro-win.retro-resize-pinned {
  position: absolute !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  animation: none !important;
  transform: none !important;
}

.retro-win--miniso-project.retro-resize-pinned .miniso-project {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  align-items: stretch;
}

.retro-win--miniso-project.retro-resize-pinned .miniso-project__media {
  height: auto;
  align-self: stretch;
}

.retro-win--miniso-project.retro-resize-pinned .miniso-project__media .media-slot,
.retro-win--miniso-project.retro-resize-pinned .miniso-project__frame {
  height: 100%;
  max-height: none;
}

.retro-win--miniso-project.retro-resize-pinned .miniso-project__details {
  height: auto;
  max-height: none;
  max-width: none;
  min-width: 0;
  align-self: stretch;
}

.retro-win--miniso-list.retro-resize-pinned,
.retro-win--miniso-project-list.retro-resize-pinned {
  max-height: none !important;
}

.retro-win--miniso-doc.retro-resize-pinned {
  max-height: none !important;
  transform: none !important;
}

.retro-win--miniso-doc.retro-resize-pinned.is-open {
  transform: none !important;
}

.retro-win--miniso-doc.retro-resize-pinned .miniso-doc-viewer__body {
  flex: 1;
  min-height: 0;
}

.retro-win--miniso-doc.retro-resize-pinned .miniso-doc-viewer__frame {
  min-height: 0;
  height: 100%;
}

.retro-win--miniso-doc.retro-resize-pinned .miniso-doc-viewer__notepad {
  min-height: 0;
  height: 100%;
  overflow: auto;
}

.miniso-daily-row.retro-resizable-win {
  position: relative;
  height: auto;
  min-height: 160px;
  overflow: hidden;
}

.miniso-daily-row.retro-resizable-win .miniso-album {
  position: relative;
  z-index: 85;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.miniso-daily-row.retro-resizable-win:not(.retro-resize-pinned) .miniso-album {
  height: auto;
}

.miniso-daily-row.retro-resizable-win .miniso-album__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.retro-resize-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 80;
}

.retro-resize-handle {
  position: absolute;
  pointer-events: auto;
  z-index: 81;
  background: transparent;
}

.retro-resize-handle--n {
  top: 0;
  left: 4px;
  right: 4px;
  height: 7px;
  cursor: n-resize !important;
}

.retro-resize-handle--s {
  bottom: 0;
  left: 4px;
  right: 4px;
  height: 7px;
  cursor: s-resize !important;
}

.retro-resize-handle--e {
  right: 0;
  top: 4px;
  bottom: 4px;
  width: 7px;
  cursor: e-resize !important;
}

.retro-resize-handle--w {
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 7px;
  cursor: w-resize !important;
}

.retro-resize-handle--nw {
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  cursor: nw-resize !important;
}

.retro-resize-handle--ne {
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  cursor: ne-resize !important;
}

.retro-resize-handle--sw {
  bottom: 0;
  left: 0;
  width: 12px;
  height: 12px;
  cursor: sw-resize !important;
}

.retro-resize-handle--se {
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize !important;
  background:
    linear-gradient(135deg, transparent 0 40%, #9a9690 40% 44%, transparent 44% 56%, #9a9690 56% 60%, transparent 60% 72%, #9a9690 72% 76%, transparent 76%);
}

.miniso-daily-row .retro-resize-handle--se {
  z-index: 70;
}

body.retro-is-resizing,
body.retro-is-dragging,
body.retro-block-scroll {
  user-select: none;
  touch-action: none;
}

body.retro-block-scroll .scroll-site {
  overflow: hidden !important;
}

.miniso-project__meta {
  margin: 0;
}

.miniso-project__row {
  margin-bottom: 0.65rem;
}

.miniso-project__row:last-child {
  margin-bottom: 0;
}

.miniso-project__row dt {
  margin: 0 0 0.15rem;
  font-family: var(--win-face);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #3a4048;
  text-transform: uppercase;
}

.miniso-project__row dd {
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  color: #1a1a18;
}

.miniso-project__row--contribution dt {
  margin-bottom: 0.35rem;
}

.miniso-project__row dd[data-miniso-field="results"] {
  padding-left: 0.1rem;
  line-height: 1.55;
}

.retro-win--miniso-list {
  min-height: auto;
}

.miniso-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 4px;
  background: #fff;
  border-top: 1px solid var(--win-dark);
}

.miniso-list__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 7px 8px;
  text-align: left;
  font-family: "Courier New", monospace;
  font-size: 10px;
  line-height: 1.35;
  color: #111;
  background: transparent;
  border: none;
  border-bottom: 1px solid #d8d4cc;
  cursor: var(--cursor-arrow);
  transition: background 0.15s ease, color 0.15s ease;
}

.miniso-list__folder {
  margin: 0;
  padding: 5px 8px 3px;
  font-family: var(--win-face);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #3a4048;
  background: #ece8e0;
  border-bottom: 1px solid #d8d4cc;
}

.miniso-list__icon {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1rem;
  font-family: var(--win-face);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(180deg, #c0392b 0%, #922b21 100%);
  border: 1px solid #641e16;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.miniso-list__icon--txt {
  color: #1a1a18;
  background: linear-gradient(180deg, #f8f8f8 0%, #d8d4cc 100%);
  border-color: #9a9690;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.miniso-list__icon--folder {
  width: 1.1rem;
  height: 0.9rem;
  background: linear-gradient(180deg, #ffe066 0%, #f0c020 55%, #d4a010 100%);
  border: 1px solid #a87808;
  border-radius: 1px 3px 2px 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  position: relative;
}

.miniso-list__icon--folder::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 1px;
  width: 0.55rem;
  height: 4px;
  background: linear-gradient(180deg, #ffe066 0%, #f0c020 100%);
  border: 1px solid #a87808;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}

.miniso-list__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.miniso-list__lock {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  padding: 1px 5px;
  font-family: var(--win-face);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #5a4030;
  background: linear-gradient(180deg, #ece8e0 0%, #d0ccc4 100%);
  border: 1px solid #9a9690;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.miniso-list__lock-icon {
  display: inline-block;
  width: 7px;
  height: 8px;
  background: linear-gradient(180deg, #c8a020 0%, #907010 100%);
  border: 1px solid #604808;
  border-radius: 1px;
  position: relative;
}

.miniso-list__lock-icon::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 5px;
  height: 4px;
  transform: translateX(-50%);
  border: 1px solid #604808;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: transparent;
}

.miniso-list__item--locked {
  cursor: not-allowed;
  opacity: 0.72;
  color: #666;
}

.miniso-list__item--locked .miniso-list__icon--folder {
  filter: grayscale(0.35);
}

.miniso-list__item.is-active .miniso-list__lock {
  color: #ece8e0;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.miniso-list__item:last-child {
  border-bottom: none;
}

.miniso-list__item:hover,
.miniso-list__item:focus-visible {
  background: rgba(58, 64, 72, 0.12);
  outline: none;
}

.miniso-list__item.is-active {
  background: #2a3038;
  color: #f0f2f5;
}

.retro-scene--miniso > .miniso-bottom-band {
  top: auto;
  left: var(--miniso-project-span);
  right: calc(var(--miniso-list-width) + var(--miniso-right-rail));
  bottom: clamp(0.35rem, 1.2vh, 0.75rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.45rem, 1.1vw, 0.75rem);
  pointer-events: none;
  z-index: 4;
}

.miniso-bottom-band .miniso-daily-row {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: var(--miniso-daily-width);
  flex-shrink: 0;
  pointer-events: auto;
}

.miniso-bottom-band .miniso-meme-slot {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  flex-shrink: 0;
  pointer-events: none;
  transform: scale(var(--miniso-phone-scale));
  transform-origin: bottom left;
}

.miniso-bottom-band .miniso-meme-player {
  pointer-events: auto;
}

.miniso-meme-player__head,
.miniso-meme-player__nav,
.miniso-meme-player__keys {
  cursor: move;
}

.miniso-meme-player__screen,
.miniso-meme-player__screen-wrap,
.miniso-meme-player__img {
  cursor: var(--cursor-arrow);
}

.miniso-daily-row .miniso-album {
  position: relative;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  pointer-events: auto;
}

.retro-scene--miniso .miniso-album.retro-win--viewer {
  min-height: 0 !important;
  height: auto;
}

.miniso-album__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  background: var(--win-gray);
  overflow: hidden;
  box-sizing: border-box;
}

.miniso-album__frame {
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.miniso-album__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35rem;
  min-width: 1.35rem;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--win-face);
  font-size: 1.1rem;
  line-height: 1;
  color: #2a3038;
  background: linear-gradient(180deg, #e8e4dc 0%, #c8c4bc 100%);
  border: none;
  border-right: 1px solid #9a9690;
  cursor: var(--cursor-arrow);
}

.miniso-album__arrow--next {
  border-right: none;
  border-left: 1px solid #9a9690;
}

.miniso-album__arrow:hover,
.miniso-album__arrow:focus-visible {
  background: linear-gradient(180deg, #f4f0e8 0%, #d8d4cc 100%);
  outline: none;
}

.miniso-album__arrow:active {
  background: #b8b4ac;
}

.miniso-album__footer {
  display: flex;
  justify-content: center;
  padding: 3px 6px 5px;
  background: var(--win-gray);
  border-top: 1px solid #9a9690;
}

.miniso-album__counter {
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #3a4048;
}

.miniso-album.is-turning .miniso-album__frame img {
  animation: meme-player-flash 0.32s ease;
}

.retro-scene--miniso > .retro-win--miniso-list {
  max-height: clamp(118px, 16vh, 148px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.retro-win--miniso-list .miniso-list,
.retro-win--miniso-project-list .miniso-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.retro-win--miniso-project-list {
  min-height: auto;
}

.retro-scene--miniso > .retro-win--miniso-doc {
  top: clamp(1.35rem, 3.5vh, 2rem);
  left: auto;
  right: clamp(5rem, 9.5vw, 7.25rem);
  bottom: auto;
  width: min(230px, 21vw);
  min-height: auto;
  max-height: clamp(280px, 38vh, 420px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.94) translateX(12px);
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    width 0.28s ease;
}

.retro-win--miniso-doc.is-open {
  opacity: 1;
  transform: scale(1) translateX(0);
  width: min(420px, 36vw);
  pointer-events: auto;
}

.retro-win--miniso-doc[hidden] {
  display: none !important;
}

.retro-win--miniso-doc.is-open[hidden] {
  display: flex !important;
}

.miniso-doc-viewer__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #525659;
}

.miniso-doc-viewer.is-notepad .miniso-doc-viewer__body {
  background: #fff;
  border-top: 1px solid var(--win-dark);
}

.miniso-doc-viewer__frame {
  display: block;
  width: 100%;
  min-height: clamp(220px, 30vh, 340px);
  border: none;
  background: #fff;
}

.miniso-doc-viewer__notepad {
  min-height: clamp(220px, 30vh, 340px);
  padding: 8px 10px;
  background: #fff;
}

.miniso-doc-viewer__text {
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 10px;
  line-height: 1.45;
  color: #111;
  white-space: pre-wrap;
  word-break: break-word;
}

.retro-win__toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-gray);
  font-size: 10px;
  font-family: var(--win-face);
  color: #111;
  cursor: pointer;
}

.retro-win__toolbar-btn:hover,
.retro-win__toolbar-btn:focus-visible {
  background: #e8e4dc;
  outline: none;
}

.retro-win__toolbar-btn:active {
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
}

.retro-win__toolbar-count {
  flex-shrink: 0;
  padding: 1px 5px;
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: #333;
  border: 2px inset var(--win-gray);
  background: #fff;
}

.retro-win__control-btn {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.retro-win__control-btn span {
  display: block;
  width: 16px;
  height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35);
}

.retro-win__control-btn span:nth-child(1) {
  background: linear-gradient(180deg, #c0392b, #922b21);
}

.retro-win__control-btn span:nth-child(2),
.retro-win__control-btn span:nth-child(3) {
  background: linear-gradient(180deg, #c8c4bc, #a8a49c);
}

.miniso-project__frame.is-turning img {
  animation: meme-player-flash 0.32s ease;
}


/* ── MINISO media — unified 4:3 ── */

.retro-scene--miniso .miniso-media {
  aspect-ratio: var(--miniso-media-ratio);
  overflow: hidden;
  background: #0a0c10;
}

.retro-scene--miniso .miniso-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.retro-scene--miniso .miniso-media--portrait {
  aspect-ratio: var(--miniso-preview-ratio);
}

.retro-scene--miniso .miniso-album__frame.miniso-media {
  aspect-ratio: auto;
}

.retro-scene--miniso .miniso-album__frame.miniso-media--portrait {
  width: 100%;
  margin-inline: auto;
}

.retro-scene--miniso .miniso-album__frame img {
  object-fit: contain;
  object-position: center;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--miniso-daily-frame-max-height, none);
}

/* ── MINISO Nokia-style phone meme player (CSS frame, like iPod) ── */

.miniso-meme-player {
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.52));
}

.miniso-meme-player__phone {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  width: clamp(104px, 9.5vw, 132px);
  padding: 0.42rem 0.38rem 0.5rem;
  border-radius: 14px 14px 22px 22px;
  overflow: hidden;
  background:
    linear-gradient(124deg, transparent 61%, rgba(0, 0, 0, 0.12) 61.15%, transparent 61.4%),
    radial-gradient(ellipse 85% 42% at 20% 92%, rgba(36, 32, 28, 0.2), transparent 72%),
    radial-gradient(ellipse 55% 35% at 82% 8%, rgba(0, 0, 0, 0.12), transparent 68%),
    var(--metal-stripe),
    linear-gradient(168deg, #b4bac2 0%, #8a929c 24%, #686f78 50%, #7a828c 76%, #9aa2ac 100%);
  border: 2px solid #2a3038;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -5px 14px rgba(0, 0, 0, 0.3),
    0 4px 0 #3a424a,
    0 12px 28px rgba(0, 0, 0, 0.48);
}

.miniso-meme-player__phone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.24),
    inset -2px -3px 5px rgba(255, 255, 255, 0.06);
}

.miniso-meme-player__phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    repeating-linear-gradient(91deg, transparent 0 14px, rgba(0, 0, 0, 0.03) 14px 15px),
    radial-gradient(circle at 12% 18%, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.miniso-meme-player__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.75rem 1fr 1.1rem;
  align-items: center;
  gap: 0.15rem;
  min-height: 0.85rem;
}

.miniso-meme-player__speaker {
  width: 0.55rem;
  height: 0.16rem;
  border-radius: 1px;
  background: #2a3038;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.miniso-meme-player__brand {
  font-family: var(--font-retro-mono);
  font-size: 0.38rem;
  letter-spacing: 0.22em;
  text-align: center;
  color: #4a525c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.miniso-meme-player__camera {
  justify-self: end;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a828c 0%, #1a1e24 100%);
  border: 1px solid #4a525c;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.35);
}

.miniso-meme-player__screen-wrap {
  position: relative;
  z-index: 1;
  padding: 0.22rem;
  border-radius: 4px;
  background: #080a0e;
  border: 2px solid #06080a;
  box-shadow:
    inset 0 0 0 1px #2a3038,
    inset 0 4px 12px rgba(0, 0, 0, 0.78),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

.miniso-meme-player__screen {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #06080a;
  border: 1px solid #050608;
}

.miniso-meme-player__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.05);
}

.miniso-meme-player.is-advancing .miniso-meme-player__img,
[data-meme-player].is-advancing .miniso-meme-player__img {
  animation: meme-player-flash 0.38s ease;
}

.miniso-meme-player__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.14) 2px 3px);
  opacity: 0.34;
}

.miniso-meme-player__counter {
  position: absolute;
  right: 0.12rem;
  bottom: 0.1rem;
  padding: 0.03rem 0.2rem;
  font-family: var(--font-retro-mono);
  font-size: 6px;
  letter-spacing: 0.08em;
  color: #c8d8e8;
  background: rgba(0, 0, 0, 0.68);
  border: 1px solid rgba(160, 180, 200, 0.28);
}

.miniso-meme-player__nav {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35rem 1fr 1.35rem;
  align-items: center;
  gap: 0.18rem;
}

.miniso-meme-player__nav-btn {
  display: grid;
  place-items: center;
  height: 1.15rem;
  padding: 0;
  font-size: 0.42rem;
  line-height: 1;
  color: #2a3038;
  background: linear-gradient(180deg, #d8d4cc 0%, #a8a49c 100%);
  border: 1px solid #5a626c;
  border-radius: 3px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 2px 0 #5a626c;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.miniso-meme-player__nav-btn:hover,
.miniso-meme-player__nav-btn:focus-visible {
  background: linear-gradient(180deg, #ece8e0 0%, #b8b4ac 100%);
  outline: none;
}

.miniso-meme-player__nav-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22);
}

.miniso-meme-player__dpad {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 28%, #c4cad0 0%, #9098a0 42%, #727a84 100%);
  border: 1px solid #4a525c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -4px 8px rgba(0, 0, 0, 0.22);
}

.miniso-meme-player__dpad-ring {
  position: absolute;
  inset: 0.18rem;
  border-radius: 50%;
  border: 1px solid rgba(40, 44, 50, 0.45);
}

.miniso-meme-player__dpad-center {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: linear-gradient(165deg, #b8bec6 0%, #7a828c 100%);
  border: 1px solid #3a424a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.miniso-meme-player__keys {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.12rem;
  margin-top: 0.08rem;
}

.miniso-meme-player__keys span {
  height: 0.42rem;
  border-radius: 2px;
  background: linear-gradient(180deg, #ece8e0 0%, #b0aca4 100%);
  border: 1px solid #6a727c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.about-trash-slot .mac-trash,
.miniso-trash-slot .mac-trash,
.rednotes-trash-slot .mac-trash,
.cosmo-trash-slot .mac-trash,
.hnu-trash-slot .mac-trash,
.inde-trash-slot .mac-trash {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  pointer-events: auto;
}

.about-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vh, 1.25rem);
}

.about-stack > .retro-win {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
}

.retro-scene > .scene-sticker {
  position: absolute;
  top: var(--y, 0);
  left: var(--x, auto);
  right: var(--x-right, auto);
  bottom: var(--y-bottom, auto);
  width: calc(var(--w, clamp(72px, 16vw, 130px)) * var(--sticker-scale));
  z-index: var(--z, 1);
  transform: rotate(var(--rot, 0deg)) translate(var(--nudge-x, 0px), var(--nudge-y, 0px));
}

/* ── Meme stickers — desktop decorations ── */

.scene-sticker {
  --nudge-x: 0px;
  --nudge-y: 0px;
  --w: clamp(72px, 16vw, 130px);
  margin: 0;
  pointer-events: auto;
  cursor: move;
  user-select: none;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
  opacity: var(--opacity, 0.94);
  transition: opacity 0.4s ease, transform 0.4s var(--page-ease);
}

.scene-sticker img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.scene-sticker--icon {
  --w: clamp(64px, 11vw, 100px);
}

.scene-sticker--tall {
  --w: clamp(80px, 14vw, 118px);
}

.scene-sticker--tall img {
  max-height: calc(var(--w) * 1.45);
  object-fit: contain;
}

.retro-scene > .scene-sticker--peek {
  transform: rotate(var(--rot, 0deg)) translate(calc(var(--peek-x, 0px) + var(--nudge-x, 0px)), calc(var(--peek-y, 0px) + var(--nudge-y, 0px)));
}

.scene-sticker--float {
  animation: sticker-float 5s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}


@keyframes sticker-float {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translate(var(--nudge-x, 0px), var(--nudge-y, 0px)); }
  50% { transform: rotate(var(--rot, 0deg)) translate(var(--nudge-x, 0px), calc(var(--nudge-y, 0px) - 6px)); }
}

/* Per-section placement tweaks */
.retro-scene--cascade .scene-sticker { --float-delay: 0.2s; }
.retro-scene--paint .scene-sticker { --peek-x: -8px; --peek-y: 4px; }
.retro-scene--explorer .scene-sticker { --peek-x: 12px; }
.retro-scene--social .scene-sticker { --float-delay: 0.8s; }
.retro-scene--ai .scene-sticker { opacity: 0.88; }

.scene-sticker--wide {
  --w: clamp(88px, 18vw, 140px);
}

.scene-sticker--wide img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 3px;
}

.scene-sticker--ascii {
  --w: clamp(56px, 10vw, 80px);
  opacity: 0.82;
  mix-blend-mode: screen;
}

.scene-sticker--ascii img {
  filter: invert(1) contrast(1.1);
}

/* ── Panel-level stickers (title / body whitespace) ── */

.panel-sticker {
  --nudge-x: 0px;
  --nudge-y: 0px;
  position: absolute;
  top: var(--y, auto);
  left: var(--x, auto);
  right: var(--x-right, auto);
  bottom: var(--y-bottom, auto);
  width: calc(var(--w, clamp(72px, 14vw, 120px)) * var(--sticker-scale));
  margin: 0;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  transform: rotate(var(--rot, 0deg)) translate(var(--nudge-x, 0px), var(--nudge-y, 0px));
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
  opacity: 0.9;
}

.panel-sticker img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.panel-sticker--wide {
  --w: clamp(88px, 16vw, 134px);
}

.panel-sticker--wide img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.panel-sticker--icon {
  --w: clamp(64px, 11vw, 96px);
}

.panel-sticker--float {
  animation: sticker-float 5.5s ease-in-out infinite;
  animation-delay: var(--float-delay, 0.3s);
}

.scroll-panel--hero .panel-sticker {
  z-index: 5;
  opacity: 0.78;
}

.scroll-panel--hero .panel-sticker img {
  mix-blend-mode: lighten;
}

.retro-scene--cascade { min-height: clamp(480px, 68vh, 760px); }
.retro-scene--about {
  --education-block-h: clamp(380px, 58vh, 640px);
  min-height: clamp(560px, 75vh, 840px);
}

.retro-scene--about > .about-meme-row {
  top: calc(clamp(380px, 58vh, 640px) * 0.38);
  left: auto;
  right: clamp(7.75rem, 12.5vw, 9.25rem);
  bottom: auto;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  pointer-events: none;
}

.about-meme-row .mac-trash--beside-memes {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  flex-shrink: 0;
  pointer-events: auto;
}
.retro-scene--paint { min-height: clamp(460px, 66vh, 740px); }

/* ── Rednotes section layout ── */

.scroll-panel--scene-rednotes {
  min-height: 100vh;
  overflow: hidden;
}

.scroll-panel--scene-rednotes .panel-stage--rednotes {
  padding-right: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}

.retro-scene--rednotes {
  --rednotes-gap: clamp(0.45rem, 1vw, 0.75rem);
  --rednotes-folder-height: clamp(150px, 20vh, 188px);
  --rednotes-note-height: clamp(380px, 54vh, 540px);
  --rednotes-meme-size: 108px;
  --rednotes-meme-frame: calc(var(--rednotes-meme-size) + 14px);
  --rednotes-nav-size: 22px;
  --rednotes-msg-width: calc(var(--rednotes-meme-frame) + 2 * var(--rednotes-nav-size) + 14px);
  --rednotes-col-width: min(calc((100% - var(--rednotes-msg-width) - 3 * var(--rednotes-gap)) / 3), 340px);
  min-height: clamp(560px, 76vh, 860px);
  height: clamp(560px, 76vh, 860px);
  max-height: clamp(560px, 76vh, 860px);
}

.retro-scene--rednotes > .retro-win--rednotes-note:nth-child(1) {
  --x: 0;
  --y: calc(var(--rednotes-folder-height) + var(--rednotes-gap));
  --w: var(--rednotes-col-width);
  --eco-float-delay: 0.15s;
  --eco-glitch-delay: 0.45s;
  --eco-grain-delay: 0.3s;
}

.retro-scene--rednotes > .retro-win--rednotes-note:nth-child(2) {
  --x: calc(var(--rednotes-col-width) + var(--rednotes-gap));
  --y: 0;
  --w: var(--rednotes-col-width);
  --eco-float-delay: 1.05s;
  --eco-glitch-delay: 1.35s;
  --eco-grain-delay: 0.78s;
}

.retro-scene--rednotes > .retro-win--rednotes-note:nth-child(3) {
  --x: calc(2 * (var(--rednotes-col-width) + var(--rednotes-gap)));
  --y: 0;
  --w: var(--rednotes-col-width);
  --eco-float-delay: 1.95s;
  --eco-glitch-delay: 2.25s;
  --eco-grain-delay: 1.26s;
}

.retro-scene--rednotes > .retro-win--rednotes-message {
  --x-right: auto;
  --y-bottom: auto;
  --x: calc(3 * (var(--rednotes-col-width) + var(--rednotes-gap)));
  --y: 0;
  --w: var(--rednotes-msg-width);
  top: var(--y);
  left: var(--x);
  right: auto;
  bottom: auto;
  transform-origin: top left;
  --eco-float-delay: 0.75s;
  --eco-glitch-delay: 1.65s;
  --eco-grain-delay: 0.92s;
  --eco-float-dur: 5.4s;
}

.retro-scene--rednotes > .retro-win--rednotes-folder-list {
  --x: 0;
  --y: 0;
  --w: var(--rednotes-col-width);
  --eco-float-delay: 1.35s;
  --eco-glitch-delay: 2.1s;
  --eco-grain-delay: 0.88s;
  max-height: var(--rednotes-folder-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-win--rednotes-folder-list {
  min-height: auto;
}

.retro-win--rednotes-folder-list .miniso-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.retro-win--rednotes-folder-list.retro-resize-pinned {
  max-height: none !important;
}

.retro-win--rednotes-note.is-folder-flash {
  animation: rednotes-win-flash 0.58s ease !important;
}

@keyframes rednotes-win-flash {
  0%,
  100% {
    filter: none;
  }
  12%,
  36%,
  60% {
    filter: brightness(1.42) saturate(1.15);
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.72),
      0 0 0 2px #ffe066,
      0 0 20px rgba(255, 224, 102, 0.62),
      2px 2px 0 rgba(0, 0, 0, 0.4),
      0 18px 48px rgba(0, 0, 0, 0.55);
  }
  24%,
  48%,
  72% {
    filter: none;
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.4),
      2px 2px 0 rgba(0, 0, 0, 0.4),
      0 18px 48px rgba(0, 0, 0, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .retro-win--rednotes-note.is-folder-flash {
    animation: none !important;
    outline: 2px solid #ffe066;
    outline-offset: 2px;
  }
}

.retro-scene--rednotes > .rednotes-trash-slot {
  top: calc(var(--rednotes-note-height) + 22px + clamp(0.4rem, 0.9vh, 0.65rem));
  left: auto;
  right: 0;
  bottom: auto;
  width: auto;
  z-index: 12;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
}

.retro-win--rednotes-note {
  min-height: var(--rednotes-note-height) !important;
  max-height: var(--rednotes-note-height);
  height: var(--rednotes-note-height);
  transform-origin: top left;
}

.retro-win--rednotes-note.retro-resize-pinned {
  min-height: 180px !important;
  max-height: none !important;
}

.retro-win--rednotes-message {
  min-height: 0 !important;
  height: auto !important;
  max-height: none;
  flex: none;
  min-width: var(--rednotes-msg-width);
  overflow: visible;
  transform-origin: top left;
}

.retro-win--rednotes-message:not(.retro-resize-pinned) {
  width: var(--rednotes-msg-width);
}

.retro-win--rednotes-message.retro-resize-pinned {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.retro-win--rednotes-message > .retro-win__chrome,
.retro-win--rednotes-message > .rednotes-message__compose,
.retro-win--rednotes-message > .retro-win__dialog-actions {
  flex: none;
}

.rednotes-explorer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 4px;
  background: var(--win-gray);
  border: 2px inset var(--win-gray);
  overflow: hidden;
}

.rednotes-explorer--flat .rednotes-tabs {
  display: none;
}

.rednotes-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 4px 4px 0;
  background: var(--win-gray);
  border-bottom: 1px solid var(--win-dark);
  overflow-x: auto;
  scrollbar-width: thin;
}

.rednotes-tab {
  position: relative;
  top: 1px;
  flex: 1 1 0;
  min-width: 0;
  padding: 3px 6px 4px;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  border-bottom: none;
  background: #c0c0c0;
  font-family: var(--win-face);
  font-size: 9px;
  line-height: 1.2;
  color: #000;
  cursor: var(--cursor-arrow);
  white-space: normal;
  text-align: center;
}

.rednotes-tab.is-active {
  top: 0;
  padding-bottom: 5px;
  background: #fff;
  border-color: var(--win-light) var(--win-dark) #fff var(--win-light);
  font-weight: 700;
  z-index: 1;
}

.rednotes-tab:hover,
.rednotes-tab:focus-visible {
  background: #ececec;
  outline: none;
}

.rednotes-tab.is-active:hover,
.rednotes-tab.is-active:focus-visible {
  background: #fff;
}

.rednotes-panes {
  flex: 1;
  min-height: 0;
  background: #fff;
}

.rednotes-pane {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--win-dark) var(--win-gray);
}

.rednotes-pane.is-hidden {
  display: none;
}

.rednotes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
  padding: 8px 8px 12px;
}

.rednotes-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 4px 3px 6px;
  border: 1px solid transparent;
  border-radius: 0;
  text-decoration: none;
  color: #000;
  cursor: pointer;
  background: transparent;
}

.rednotes-tag-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px 4px;
  background: #f0f0f0;
  border-bottom: 1px solid #c0c0c0;
}

.rednotes-tag-chip {
  display: inline-block;
  padding: 2px 7px;
  font-family: var(--win-face);
  font-size: 9px;
  line-height: 1.25;
  color: #222;
  background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
  border: 1px solid #808080;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  pointer-events: none;
  white-space: nowrap;
}

.rednotes-item:hover,
.rednotes-item:focus-visible {
  background: rgba(0, 0, 128, 0.08);
  border-color: rgba(0, 0, 128, 0.35);
  outline: none;
}

.rednotes-item__thumb {
  position: relative;
  width: 100%;
  height: var(--rednotes-thumb-h, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: #ececec;
  border: 1px solid #c0c0c0;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.65);
  overflow: hidden;
}

.rednotes-item__frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  border: 2px solid #000;
  background: #000;
  line-height: 0;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.28);
}

.rednotes-item__frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--rednotes-frame-max-w, 84px));
  max-height: var(--rednotes-frame-max-h, 112px);
  object-fit: contain;
  object-position: center center;
}

.rednotes-item__badge {
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 1px 5px;
  background: rgba(255, 36, 66, 0.92);
  color: #fff;
  font-family: var(--win-face);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.88;
  pointer-events: none;
}

.rednotes-item:hover .rednotes-item__badge,
.rednotes-item:focus-visible .rednotes-item__badge {
  opacity: 1;
}

.rednotes-item__label {
  width: 100%;
  font-family: var(--win-face);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  word-break: break-all;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.rednotes-message__compose {
  padding: 4px 8px 0;
  background: var(--win-gray);
  overflow: visible;
}

.rednotes-message__to {
  display: block;
  margin: 0 0 4px;
  padding: 2px 5px;
  background: #fff;
  border: 2px inset var(--win-gray);
  font-family: var(--win-face);
  font-size: 10px;
  line-height: 1.25;
}

.rednotes-message__to span {
  color: #000080;
  font-weight: 700;
}

.rednotes-message__preview {
  display: grid;
  grid-template-columns: var(--rednotes-nav-size) minmax(0, var(--rednotes-meme-frame)) var(--rednotes-nav-size);
  align-items: center;
  justify-content: center;
  column-gap: 5px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.rednotes-message__screen {
  position: relative;
  width: var(--rednotes-meme-frame, 122px);
  height: var(--rednotes-meme-frame, 122px);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  box-sizing: border-box;
  background: #ececec;
  border: 2px inset var(--win-gray);
  overflow: hidden;
  line-height: 0;
}

.rednotes-message__img {
  width: 100%;
  height: 100%;
  max-width: var(--rednotes-meme-size, 108px);
  max-height: var(--rednotes-meme-size, 108px);
  object-fit: contain;
  object-position: center center;
  display: block;
}

.rednotes-message__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.12) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.35;
}

.rednotes-message__counter {
  position: absolute;
  right: 6px;
  bottom: 5px;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.72);
  color: #9fd;
  font-family: "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.rednotes-message__nav {
  width: var(--rednotes-nav-size);
  height: var(--rednotes-nav-size);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-gray);
  font-family: var(--win-face);
  font-size: 14px;
  line-height: 1;
  color: #000;
  cursor: var(--cursor-arrow);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.rednotes-message__nav--prev {
  padding-right: 1px;
}

.rednotes-message__nav--next {
  padding-left: 1px;
}

.rednotes-message__nav:hover,
.rednotes-message__nav:focus-visible {
  background: #e8e8e8;
  outline: none;
}

.rednotes-message__status {
  margin: 2px 0 0;
  font-family: var(--win-face);
  font-size: 9px;
  line-height: 1.2;
  color: #444;
  text-align: center;
}

.retro-win--rednotes-message .retro-win__dialog-actions {
  padding: 3px 6px 5px;
  gap: 0.35rem;
  margin: 0;
}

.retro-win--rednotes-message .retro-btn {
  min-width: 58px;
  padding: 2px 8px;
  font-size: 10px;
}

.retro-win--rednotes-message.is-sending .rednotes-message__status {
  color: #000080;
}

.retro-win--rednotes-message.is-sent .rednotes-message__status {
  color: #006400;
  font-weight: 700;
}

.retro-win--rednotes-note.retro-resize-pinned .rednotes-explorer {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── 时尚 COSMO — WeChat post archive ── */

.scroll-panel--scene-cosmo .panel-stage--cosmo {
  padding-right: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}

.retro-scene--cosmo {
  --cosmo-gap: clamp(0.45rem, 1vw, 0.75rem);
  --cosmo-list-width: min(340px, 34vw);
  --cosmo-reader-width: min(calc(100% - var(--cosmo-list-width) - var(--cosmo-gap)), 480px);
  --cosmo-posts-height: clamp(400px, 58vh, 560px);
  --cosmo-reader-height: clamp(360px, 52vh, 520px);
  --cosmo-trash-gap: 4px;
  min-height: calc(max(var(--cosmo-posts-height), var(--cosmo-reader-height)) + 96px);
  height: auto;
  max-height: none;
}

.retro-scene--cosmo > .retro-win--cosmo-posts {
  --x: 0;
  --y: 0;
  --w: var(--cosmo-list-width);
  --eco-float-delay: 0.2s;
  --eco-glitch-delay: 0.55s;
  --eco-grain-delay: 0.34s;
  height: var(--cosmo-posts-height);
  max-height: var(--cosmo-posts-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-scene--cosmo > .retro-win--cosmo-reader {
  --x: calc(var(--cosmo-list-width) + var(--cosmo-gap));
  --y: 0;
  --w: var(--cosmo-reader-width);
  --eco-float-delay: 1.1s;
  --eco-glitch-delay: 1.75s;
  --eco-grain-delay: 0.82s;
  height: auto;
  max-height: var(--cosmo-reader-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-scene--cosmo > .cosmo-trash-slot {
  top: calc(max(var(--cosmo-posts-height), var(--cosmo-reader-height)) + var(--cosmo-trash-gap));
  left: auto;
  right: 0;
  bottom: auto;
  width: auto;
  z-index: 12;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
}

.retro-scene--cosmo > .cosmo-meme-slot {
  top: 0.75rem;
  left: auto;
  right: 0;
  bottom: auto;
  width: auto;
  z-index: 5;
  pointer-events: auto;
  --eco-float-delay: 0.85s;
  --eco-glitch-delay: 1.45s;
  --eco-grain-delay: 0.62s;
}

/* ── HNU Youth Media — gazette rack + WordPad reader ── */

.scroll-panel--scene-hnu .panel-stage--hnu {
  padding-right: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}

.retro-scene--hnu {
  --hnu-gap: clamp(0.45rem, 1vw, 0.75rem);
  --hnu-rack-width: min(280px, 30vw);
  --hnu-wordpad-width: min(calc(100% - var(--hnu-rack-width) - var(--hnu-gap)), 560px);
  --hnu-scene-height: clamp(420px, 58vh, 580px);
  --hnu-trash-gap: 8px;
  min-height: calc(var(--hnu-scene-height) + 96px);
  height: auto;
  max-height: none;
}

.retro-scene--hnu > .retro-win--hnu-rack {
  --x: 0;
  --y: 0;
  --w: var(--hnu-rack-width);
  --eco-float-delay: 0.25s;
  --eco-glitch-delay: 0.6s;
  --eco-grain-delay: 0.38s;
  height: var(--hnu-scene-height);
  max-height: var(--hnu-scene-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-scene--hnu > .retro-win--hnu-wordpad {
  --x: calc(var(--hnu-rack-width) + var(--hnu-gap));
  --y: 0;
  --w: var(--hnu-wordpad-width);
  --eco-float-delay: 1.05s;
  --eco-glitch-delay: 1.65s;
  --eco-grain-delay: 0.78s;
  height: var(--hnu-scene-height);
  max-height: var(--hnu-scene-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-scene--hnu > .hnu-trash-slot {
  top: calc(var(--hnu-scene-height) + var(--hnu-trash-gap));
  left: auto;
  right: 0;
  bottom: auto;
  width: auto;
  z-index: 12;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
}

.hnu-trash-slot .mac-trash,
.inde-trash-slot .mac-trash {
  pointer-events: auto;
}

.retro-win--hnu-rack,
.retro-win--hnu-wordpad {
  position: absolute;
}

.retro-win--hnu-rack .retro-win__toolbar-count,
.retro-win--hnu-wordpad .retro-win__toolbar-count {
  margin-left: auto;
}

.hnu-rack {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.55rem 0.5rem 0.65rem;
  background: linear-gradient(180deg, #d8dce4 0%, #c8ced8 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.hnu-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.hnu-card__num {
  font-family: var(--font-retro-mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  color: #555;
}

.hnu-card__cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.25rem;
  min-height: clamp(118px, 16vh, 148px);
  padding: 0.55rem 0.6rem 0.65rem;
  border: 2px solid rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
    linear-gradient(168deg, color-mix(in srgb, var(--hnu-accent, #3a4f6a) 88%, #fff 12%) 0%, var(--hnu-accent, #3a4f6a) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    2px 3px 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hnu-card__badge {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  padding: 0.12rem 0.35rem;
  font-family: var(--win-face);
  font-size: 8px;
  letter-spacing: 0.04em;
  color: #2a2010;
  background: linear-gradient(180deg, #ffe88a 0%, #e8c040 100%);
  border: 1px solid #9a7820;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.hnu-card__series {
  font-family: var(--win-face);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.hnu-card__title {
  font-family: "Times New Roman", Georgia, serif;
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.hnu-card__meta {
  font-family: var(--win-face);
  font-size: 9px;
  color: #444;
}

.hnu-card:hover .hnu-card__cover,
.hnu-card:focus-visible .hnu-card__cover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    3px 5px 0 rgba(0, 0, 0, 0.32);
}

.hnu-card.is-active .hnu-card__cover {
  outline: 2px solid #000080;
  outline-offset: 1px;
}

.hnu-wordpad__toolbar .hnu-wordpad__nav {
  min-width: 1.35rem;
  padding: 0 0.2rem;
  font-size: 10px;
  cursor: pointer;
}

.hnu-wordpad__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 4px;
  background: #fff;
  border: 2px inset var(--win-gray);
}

.retro-win--hnu-wordpad.retro-resize-pinned .hnu-wordpad__body {
  flex: 1 1 auto;
}

.hnu-article {
  padding: 12px 14px 10px;
  font-family: "Times New Roman", Georgia, serif;
  color: #111;
}

.hnu-article--empty {
  min-height: clamp(180px, 28vh, 280px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--win-face);
  font-size: 11px;
  color: #666;
  text-align: center;
}

.hnu-article__meta {
  margin: 0 0 0.5rem;
  font-family: var(--win-face);
  font-size: 9px;
  letter-spacing: 0.03em;
  color: #666;
}

.hnu-article__title {
  margin: 0 0 0.55rem;
  font-size: clamp(16px, 1.65vw, 20px);
  line-height: 1.32;
  font-weight: 700;
}

.hnu-article__byline {
  margin: 0 0 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #ddd;
  font-family: var(--win-face);
  font-size: 9px;
  line-height: 1.45;
  color: #555;
}

.hnu-article__lede {
  margin: 0 0 0.85rem;
  font-size: 12px;
  line-height: 1.62;
  font-weight: 700;
  color: #222;
}

.hnu-article__body p {
  margin: 0 0 0.75rem;
  font-size: 11px;
  line-height: 1.62;
  color: #333;
}

.hnu-article__quote {
  margin: 0.85rem 0;
  padding: 0.55rem 0.65rem 0.55rem 0.75rem;
  border-left: 3px solid #000080;
  background: #f4f4f8;
  font-size: 11px;
  line-height: 1.55;
  font-style: italic;
  color: #1a1a44;
}

.hnu-article__section {
  margin: 0.85rem 0 0.65rem;
}

.hnu-article__section-title {
  margin: 0 0 0.4rem;
  font-family: var(--win-face);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #444;
}

.hnu-article__highlights {
  margin: 0;
  padding-left: 1.1rem;
  font-family: var(--win-face);
  font-size: 10px;
  line-height: 1.55;
  color: #333;
}

.hnu-article__highlights li {
  margin-bottom: 0.35rem;
}

.hnu-article__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.55rem;
  border-top: 1px solid #ddd;
}

.hnu-article__link {
  text-decoration: none;
}

.hnu-article__hint {
  font-family: var(--win-face);
  font-size: 9px;
  color: #000080;
}

.retro-scene--hnu > .retro-win--hnu-rack.retro-resize-pinned,
.retro-scene--hnu > .retro-win--hnu-wordpad.retro-resize-pinned,
.retro-win--hnu-rack.retro-resize-pinned,
.retro-win--hnu-wordpad.retro-resize-pinned {
  height: auto !important;
  max-height: none !important;
}

.retro-win--hnu-rack.retro-resize-pinned .hnu-rack,
.retro-win--hnu-wordpad.retro-resize-pinned .hnu-wordpad__body {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── Inde Study — explorer + Notepad + Acrobat Reader ── */

.scroll-panel--scene-inde .panel-stage--inde {
  padding-right: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}

.retro-scene--inde {
  --inde-gap: clamp(0.45rem, 1vw, 0.75rem);
  --inde-col-width: min(250px, 27vw);
  --inde-acrobat-inset: clamp(2.5rem, 10vw, 6rem);
  --inde-acrobat-width: min(calc(100% - var(--inde-col-width) - var(--inde-gap) - var(--inde-acrobat-inset)), 580px);
  --inde-scene-height: clamp(440px, 60vh, 600px);
  --inde-explorer-height: calc(var(--inde-scene-height) * 0.44);
  --inde-notepad-height: calc(var(--inde-scene-height) - var(--inde-explorer-height) - var(--inde-gap));
  --inde-trash-gap: 8px;
  min-height: calc(var(--inde-scene-height) + 96px);
  height: auto;
  max-height: none;
}

.retro-scene--inde > .retro-win--inde-explorer {
  --x-right: 0;
  --y: 0;
  --w: var(--inde-col-width);
  left: auto;
  --eco-float-delay: 0.2s;
  --eco-glitch-delay: 0.55s;
  --eco-grain-delay: 0.34s;
  height: var(--inde-explorer-height);
  max-height: var(--inde-explorer-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-scene--inde > .retro-win--inde-notepad {
  --x-right: 0;
  --y: calc(var(--inde-explorer-height) + var(--inde-gap));
  --w: var(--inde-col-width);
  left: auto;
  --eco-float-delay: 0.65s;
  --eco-glitch-delay: 1.05s;
  --eco-grain-delay: 0.48s;
  height: var(--inde-notepad-height);
  max-height: var(--inde-notepad-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-scene--inde > .retro-win--inde-acrobat {
  --x: var(--inde-acrobat-inset);
  --y: 0;
  --w: var(--inde-acrobat-width);
  --eco-float-delay: 1.15s;
  --eco-glitch-delay: 1.75s;
  --eco-grain-delay: 0.82s;
  height: var(--inde-scene-height);
  max-height: var(--inde-scene-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-scene--inde > .inde-trash-slot {
  top: calc(var(--inde-scene-height) + var(--inde-trash-gap));
  left: 0;
  right: auto;
  bottom: auto;
  width: auto;
  z-index: 12;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
}

.inde-trash-slot .mac-trash {
  pointer-events: auto;
}

.retro-win--inde-explorer,
.retro-win--inde-notepad,
.retro-win--inde-acrobat {
  position: absolute;
}

.inde-explorer {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 0.2rem 0;
  background: #fff;
  border-top: 1px solid var(--win-dark);
}

.inde-file {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.42rem 0.5rem;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.inde-file__icon {
  flex-shrink: 0;
}

.inde-file__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.inde-file__kind {
  font-family: var(--win-face);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666;
}

.inde-file__name {
  font-family: var(--win-face);
  font-size: 10px;
  line-height: 1.35;
  color: #111;
  word-break: break-word;
}

.inde-file__meta {
  flex-shrink: 0;
  font-family: var(--win-face);
  font-size: 8px;
  color: #777;
}

.inde-file:hover,
.inde-file:focus-visible {
  background: #000080;
  color: #fff;
}

.inde-file:hover .inde-file__kind,
.inde-file:hover .inde-file__name,
.inde-file:hover .inde-file__meta,
.inde-file:focus-visible .inde-file__kind,
.inde-file:focus-visible .inde-file__name,
.inde-file:focus-visible .inde-file__meta {
  color: #fff;
}

.inde-file.is-active {
  background: #d8dce8;
}

.inde-file.is-active .inde-file__kind {
  color: #444;
}

.retro-win--inde-acrobat.is-inde-flash,
.retro-win--inde-notepad.is-inde-flash {
  animation: inde-win-flash 0.58s ease !important;
}

@keyframes inde-win-flash {
  0%,
  100% {
    filter: none;
  }
  12%,
  36%,
  60% {
    filter: brightness(1.42) saturate(1.15);
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.72),
      0 0 0 2px #ffe066,
      0 0 20px rgba(255, 224, 102, 0.62),
      2px 2px 0 rgba(0, 0, 0, 0.4),
      0 18px 48px rgba(0, 0, 0, 0.55);
  }
  24%,
  48%,
  72% {
    filter: none;
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.4),
      2px 2px 0 rgba(0, 0, 0, 0.4),
      0 18px 48px rgba(0, 0, 0, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .retro-win--inde-acrobat.is-inde-flash,
  .retro-win--inde-notepad.is-inde-flash {
    animation: none !important;
    outline: 2px solid #ffe066;
    outline-offset: 2px;
  }
}

.inde-notepad__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 8px 10px;
  background: #fff;
  border-top: 1px solid var(--win-dark);
  font-family: "Courier New", monospace;
  font-size: 10px;
  line-height: 1.48;
  color: #111;
  white-space: pre-wrap;
  word-break: break-word;
}

.inde-acrobat__meta {
  font-family: var(--win-face);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #222;
  padding: 0 0.25rem;
  white-space: nowrap;
}

.inde-acrobat__toolbar .retro-win__address {
  margin-left: auto;
}

.inde-acrobat__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #525659;
  border-top: 1px solid #2a2a2a;
}

.inde-acrobat__preview {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.65rem 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

.inde-acrobat__slide {
  margin: 0;
  background: #3d4043;
  border: 1px solid #2a2a2a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.inde-acrobat__slide-img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

.inde-acrobat__slide-cap {
  padding: 0.28rem 0.45rem;
  font-family: var(--font-retro-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(230, 226, 218, 0.72);
  background: linear-gradient(180deg, #4a4d51, #3a3d40);
  border-top: 1px solid #2a2a2a;
}

.inde-acrobat__preview-empty {
  margin: auto;
  padding: 1rem;
  font-family: var(--font-retro-mono);
  font-size: 0.72rem;
  color: rgba(230, 226, 218, 0.78);
  text-align: center;
}

.inde-acrobat__download-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.45rem 0.65rem;
  background: linear-gradient(180deg, #ece9e0, #c8c4bc);
  border-top: 1px solid #2a2a2a;
}

.inde-acrobat__preview-note {
  margin: 0;
  font-family: var(--font-retro-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: #3a3a3a;
}

.inde-acrobat__download-btn {
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.inde-acrobat__frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(240px, 34vh, 420px);
  border: none;
  background: #525659;
}

.inde-acrobat__statusbar {
  border-top: 1px solid var(--win-dark);
}

.retro-scene--inde > .retro-win--inde-explorer.retro-resize-pinned,
.retro-scene--inde > .retro-win--inde-notepad.retro-resize-pinned,
.retro-scene--inde > .retro-win--inde-acrobat.retro-resize-pinned,
.retro-win--inde-explorer.retro-resize-pinned,
.retro-win--inde-notepad.retro-resize-pinned,
.retro-win--inde-acrobat.retro-resize-pinned {
  height: auto !important;
  max-height: none !important;
}

.retro-win--inde-explorer.retro-resize-pinned .inde-explorer,
.retro-win--inde-notepad.retro-resize-pinned .inde-notepad__body,
.retro-win--inde-acrobat.retro-resize-pinned .inde-acrobat__body {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── Contact — dial-up address card + MSN ping ── */

.scroll-panel--scene-contact .panel-stage--contact {
  padding-right: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}

.retro-scene--contact {
  --contact-gap: clamp(0.55rem, 1.2vw, 0.85rem);
  --contact-main-width: min(440px, 90vw);
  --contact-ping-width: min(280px, 78vw);
  --contact-scene-height: clamp(320px, 46vh, 460px);
  min-height: calc(var(--contact-scene-height) + 48px);
  height: auto;
}

.retro-scene--contact > .retro-win--contact-main {
  --x: clamp(1.5rem, 12vw, 6rem);
  --y: 0;
  --w: var(--contact-main-width);
  --eco-float-delay: 0.25s;
  --eco-glitch-delay: 0.62s;
  --eco-grain-delay: 0.38s;
  min-height: auto;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-scene--contact > .retro-win--contact-ping {
  --x-right: 0;
  --y: calc(var(--contact-scene-height) * 0.12);
  --w: var(--contact-ping-width);
  --eco-float-delay: 1.05s;
  --eco-glitch-delay: 1.55s;
  --eco-grain-delay: 0.82s;
  min-height: auto;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.retro-win--contact-main,
.retro-win--contact-ping {
  position: absolute;
  transform-origin: top left;
}

.contact-toolbar__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  font-family: var(--win-face);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #1a4020;
}

.contact-toolbar__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3cb371;
  box-shadow: 0 0 6px rgba(60, 179, 113, 0.85);
  animation: contact-led-pulse 1.6s ease-in-out infinite;
}

@keyframes contact-led-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.88); }
}

.contact-card {
  position: relative;
  isolation: isolate;
  margin: 4px;
  padding: 0.65rem 0.75rem 0.75rem;
  background:
    linear-gradient(180deg, rgba(232, 228, 248, 0.96) 0%, rgba(208, 204, 224, 0.98) 100%);
  border: 2px inset var(--win-gray);
  overflow: hidden;
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.14;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.14) 0,
    rgba(0, 0, 0, 0.14) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

.contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: var(--eco-grain-noise);
  background-size: 88px 88px;
  opacity: 0.08;
  mix-blend-mode: overlay;
}

.contact-card__banner {
  position: relative;
  z-index: 3;
  margin: 0 0 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed rgba(58, 64, 72, 0.35);
  font-family: var(--font-retro-mono);
  font-size: clamp(10px, 1vw, 11px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a4460;
  text-shadow: 0 0 12px rgba(176, 168, 196, 0.45);
}

.contact-list {
  position: relative;
  z-index: 3;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.contact-list__item {
  display: grid;
  grid-template-columns: minmax(4.8rem, 5.6rem) 1fr auto;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.42rem 0.48rem;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(90, 96, 104, 0.28);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 0 rgba(0, 0, 0, 0.08);
}

.contact-list__label {
  font-family: var(--font-retro-pixel);
  font-size: clamp(0.34rem, 0.9vw, 0.4rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #3a4048;
}

.contact-list__value {
  font-family: var(--font-retro-mono);
  font-size: clamp(11px, 1.05vw, 12px);
  line-height: 1.35;
  color: #101018;
  text-align: left;
  word-break: break-word;
}

.contact-list__value--link {
  color: #000080;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.contact-list__value--link:hover,
.contact-list__value--link:focus-visible {
  color: #2a0080;
  text-shadow: 0 0 8px rgba(120, 100, 200, 0.35);
}

.contact-list__value--copy {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.contact-list__value--copy:hover,
.contact-list__value--copy:focus-visible {
  color: #2a0080;
  text-shadow: 0 0 8px rgba(120, 100, 200, 0.35);
}

.contact-list__hint {
  font-family: var(--win-face);
  font-size: 9px;
  color: #1a4020;
  letter-spacing: 0.04em;
}

.contact-statusbar span:last-child {
  animation: crt-phosphor-flicker 4.2s linear infinite;
}

.contact-ping__body {
  margin: 4px;
}

.contact-ping__avatar {
  background:
    linear-gradient(135deg, #c8b8e8 0%, #8a78b8 52%, #5a5088 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.contact-ping__actions .retro-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.retro-scene--contact > .retro-win--contact-main.retro-resize-pinned,
.retro-scene--contact > .retro-win--contact-ping.retro-resize-pinned,
.retro-win--contact-main.retro-resize-pinned,
.retro-win--contact-ping.retro-resize-pinned {
  height: auto !important;
  max-height: none !important;
}

.retro-win--contact-main.retro-resize-pinned .contact-card {
  flex: 1 1 auto;
  min-height: 0;
}

.cosmo-meme-slot .cosmo-meme-player {
  pointer-events: auto;
}

.cosmo-meme-player {
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.52));
}

.cosmo-meme-player__console {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.32rem;
  width: clamp(168px, 16vw, 208px);
  padding: 0.5rem 0.46rem 0.55rem;
  border-radius: 16px 16px 20px 20px;
  overflow: hidden;
  background:
    linear-gradient(124deg, transparent 61%, rgba(0, 0, 0, 0.12) 61.15%, transparent 61.4%),
    radial-gradient(ellipse 85% 42% at 20% 92%, rgba(36, 32, 28, 0.2), transparent 72%),
    radial-gradient(ellipse 55% 35% at 82% 8%, rgba(0, 0, 0, 0.12), transparent 68%),
    var(--metal-stripe),
    linear-gradient(168deg, #b4bac2 0%, #8a929c 24%, #686f78 50%, #7a828c 76%, #9aa2ac 100%);
  border: 2px solid #2a3038;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -5px 14px rgba(0, 0, 0, 0.3),
    0 4px 0 #3a424a,
    0 12px 28px rgba(0, 0, 0, 0.48);
}

.cosmo-meme-player__console::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.24),
    inset -2px -3px 5px rgba(255, 255, 255, 0.06);
}

.cosmo-meme-player__console::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    repeating-linear-gradient(91deg, transparent 0 14px, rgba(0, 0, 0, 0.03) 14px 15px),
    radial-gradient(circle at 12% 18%, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.cosmo-meme-player__shoulders {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 0.55rem;
  padding: 0 0.12rem;
}

.cosmo-meme-player__shoulder {
  display: grid;
  place-items: center;
  min-width: 1.15rem;
  height: 0.52rem;
  font-family: var(--font-retro-mono);
  font-size: 0.34rem;
  letter-spacing: 0.06em;
  color: #3a424a;
  background: linear-gradient(180deg, #a8aeb6 0%, #727a84 100%);
  border: 1px solid #4a525c;
  border-radius: 3px 3px 1px 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 0 #3a424a;
}

.cosmo-meme-player__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.55rem 1fr 0.55rem;
  align-items: center;
  gap: 0.2rem;
  min-height: 0.75rem;
}

.cosmo-meme-player__led {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7dff9a 0%, #18a838 55%, #0a6020 100%);
  border: 1px solid #1a4828;
  box-shadow: 0 0 6px rgba(48, 220, 96, 0.55);
}

.cosmo-meme-player__brand {
  font-family: var(--font-retro-mono);
  font-size: 0.42rem;
  letter-spacing: 0.18em;
  text-align: center;
  color: #4a525c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.cosmo-meme-player__power {
  justify-self: end;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c8ced6 0%, #5a626c 100%);
  border: 1px solid #3a424a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.cosmo-meme-player__screen-wrap {
  position: relative;
  z-index: 1;
  padding: 0.24rem;
  border-radius: 5px;
  background: #080a0e;
  border: 2px solid #06080a;
  box-shadow:
    inset 0 0 0 1px #2a3038,
    inset 0 4px 12px rgba(0, 0, 0, 0.78),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

.cosmo-meme-player__screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #06080a;
  border: 1px solid #050608;
}

.cosmo-meme-player__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.05);
}

.cosmo-meme-player.is-advancing .cosmo-meme-player__img,
[data-meme-player].is-advancing .cosmo-meme-player__img {
  animation: meme-player-flash 0.38s ease;
}

.cosmo-meme-player__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.14) 2px 3px);
  opacity: 0.34;
}

.cosmo-meme-player__counter {
  position: absolute;
  right: 0.12rem;
  bottom: 0.1rem;
  padding: 0.03rem 0.2rem;
  font-family: var(--font-retro-mono);
  font-size: 6px;
  letter-spacing: 0.08em;
  color: #c8d8e8;
  background: rgba(0, 0, 0, 0.68);
  border: 1px solid rgba(160, 180, 200, 0.28);
}

.cosmo-meme-player__controls {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5rem 1fr 1.5rem;
  align-items: center;
  gap: 0.22rem;
}

.cosmo-meme-player__nav-btn {
  display: grid;
  place-items: center;
  height: 1.25rem;
  padding: 0;
  font-size: 0.46rem;
  line-height: 1;
  color: #2a3038;
  background: linear-gradient(180deg, #d8d4cc 0%, #a8a49c 100%);
  border: 1px solid #5a626c;
  border-radius: 3px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 2px 0 #5a626c;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.cosmo-meme-player__nav-btn:hover,
.cosmo-meme-player__nav-btn:focus-visible {
  background: linear-gradient(180deg, #ece8e0 0%, #b8b4ac 100%);
  outline: none;
}

.cosmo-meme-player__nav-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22);
}

.cosmo-meme-player__center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.cosmo-meme-player__dpad {
  position: relative;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 3px;
  background: radial-gradient(circle at 40% 28%, #c4cad0 0%, #9098a0 42%, #727a84 100%);
  border: 1px solid #4a525c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 6px rgba(0, 0, 0, 0.22);
}

.cosmo-meme-player__dpad::before,
.cosmo-meme-player__dpad::after {
  content: "";
  position: absolute;
  background: rgba(42, 48, 56, 0.55);
  border-radius: 1px;
}

.cosmo-meme-player__dpad::before {
  top: 50%;
  left: 0.18rem;
  right: 0.18rem;
  height: 0.18rem;
  transform: translateY(-50%);
}

.cosmo-meme-player__dpad::after {
  left: 50%;
  top: 0.18rem;
  bottom: 0.18rem;
  width: 0.18rem;
  transform: translateX(-50%);
}

.cosmo-meme-player__ab {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.cosmo-meme-player__ab span {
  display: grid;
  place-items: center;
  width: 0.62rem;
  height: 0.62rem;
  font-family: var(--font-retro-mono);
  font-size: 0.34rem;
  font-weight: 700;
  color: #2a3038;
  background: linear-gradient(180deg, #ece8e0 0%, #b0aca4 100%);
  border: 1px solid #6a727c;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 0 #5a626c;
}

.cosmo-meme-slot.retro-resize-pinned,
.about-meme-row.retro-resize-pinned {
  animation: none !important;
  transform: none !important;
}

.cosmo-meme-player__head,
.cosmo-meme-player__shoulders {
  cursor: move;
}

.retro-win--cosmo-posts,
.retro-win--cosmo-reader {
  min-height: auto;
  transform-origin: top left;
}

.retro-win--cosmo-reader:not(.retro-resize-pinned) {
  height: auto !important;
}

.retro-win--cosmo-posts.retro-resize-pinned,
.retro-win--cosmo-reader.retro-resize-pinned {
  max-height: none !important;
}

.cosmo-explorer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid var(--win-dark);
}

.cosmo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 4px 0;
  background: var(--win-gray);
  border-bottom: 1px solid var(--win-dark);
}

.cosmo-tab {
  padding: 3px 8px;
  font-family: var(--win-face);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #222;
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  cursor: var(--cursor-arrow);
}

.cosmo-tab.is-active {
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
  background: #fff;
  margin-bottom: -1px;
  padding-bottom: 4px;
}

.cosmo-tab:hover,
.cosmo-tab:focus-visible {
  outline: none;
  background: #ece8e0;
}

.cosmo-posts {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px;
}

.cosmo-posts__empty {
  margin: 0;
  padding: 1rem 0.75rem;
  font-family: var(--win-face);
  font-size: 10px;
  color: #666;
}

.cosmo-post {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  padding: 7px 8px;
  text-align: left;
  font-family: "Courier New", monospace;
  font-size: 10px;
  line-height: 1.35;
  color: #111;
  background: transparent;
  border: none;
  border-bottom: 1px solid #d8d4cc;
  cursor: var(--cursor-arrow);
  transition: background 0.15s ease, color 0.15s ease;
}

.cosmo-post:last-child {
  border-bottom: none;
}

.cosmo-post__icon {
  margin-top: 2px;
}

.cosmo-post__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cosmo-post__series {
  font-family: var(--win-face);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5a4030;
  text-transform: uppercase;
}

.cosmo-post__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cosmo-post__heart {
  flex-shrink: 0;
  align-self: center;
  position: relative;
  width: 13px;
  height: 12px;
  margin-top: 1px;
}

.cosmo-post__heart::before,
.cosmo-post__heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 7px;
  height: 11px;
  background: linear-gradient(180deg, #ff4d4d 0%, #e01010 55%, #b00808 100%);
  border-radius: 7px 7px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 220, 0.65),
    0 0 4px rgba(255, 48, 48, 0.55);
}

.cosmo-post__heart::before {
  left: 6px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.cosmo-post__heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

.cosmo-post.is-active .cosmo-post__heart::before,
.cosmo-post.is-active .cosmo-post__heart::after {
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 220, 0.72),
    0 0 6px rgba(255, 72, 72, 0.72);
}

.cosmo-post__open {
  flex-shrink: 0;
  font-size: 11px;
  color: #000080;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cosmo-post:hover .cosmo-post__open,
.cosmo-post.is-active .cosmo-post__open,
.cosmo-post:focus-visible .cosmo-post__open {
  opacity: 1;
}

.cosmo-post:hover,
.cosmo-post:focus-visible {
  background: rgba(58, 64, 72, 0.1);
  outline: none;
}

.cosmo-post.is-active {
  background: #2a3038;
  color: #f0f2f5;
}

.cosmo-post.is-active .cosmo-post__series {
  color: #d8c4a8;
}

.cosmo-reader__body {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 4px;
  background: #fff;
  border: 2px inset var(--win-gray);
}

.retro-win--cosmo-reader.retro-resize-pinned .cosmo-reader__body {
  flex: 1 1 auto;
}

.cosmo-reader__empty {
  min-height: clamp(180px, 28vh, 280px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.25rem;
  font-family: var(--win-face);
  font-size: 11px;
  color: #666;
  text-align: center;
}

.cosmo-reader__ie-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-family: "Times New Roman", serif;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #1a6fd4 0%, #0d4a9a 100%);
  border: 1px solid #083870;
  border-radius: 50%;
}

.cosmo-reader__article {
  padding: 10px 12px 6px;
}

.cosmo-reader__meta {
  margin: 0 0 0.55rem;
  font-family: var(--win-face);
  font-size: 9px;
  letter-spacing: 0.03em;
  color: #666;
}

.cosmo-reader__title {
  margin: 0 0 0.75rem;
  font-family: "Times New Roman", Georgia, serif;
  font-size: clamp(15px, 1.55vw, 18px);
  line-height: 1.35;
  font-weight: 700;
  color: #111;
}

.cosmo-reader__lede {
  margin: 0 0 0.65rem;
  font-family: "Courier New", monospace;
  font-size: 11px;
  line-height: 1.55;
  color: #333;
}

.cosmo-reader__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding-bottom: 2px;
}

.cosmo-reader__link {
  text-decoration: none;
}

.cosmo-reader__hint {
  font-family: var(--win-face);
  font-size: 9px;
  color: #000080;
}

.cosmo-reader__status {
  display: flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--win-gray);
  border-top: 1px solid var(--win-dark);
  font-family: var(--win-face);
  font-size: 9px;
  color: #222;
}

.retro-win--cosmo-posts .retro-win__toolbar-count,
.retro-win--cosmo-reader .retro-win__toolbar-count {
  margin-left: auto;
}

.retro-win--cosmo-posts.retro-resize-pinned .cosmo-explorer,
.retro-win--cosmo-reader.retro-resize-pinned .cosmo-reader__body {
  flex: 1 1 auto;
  min-height: 0;
}

.retro-scene--explorer { min-height: clamp(420px, 62vh, 680px); }
.retro-scene--social { min-height: clamp(400px, 58vh, 640px); }
.retro-scene--icons { min-height: clamp(380px, 56vh, 600px); }
.retro-scene--academic { min-height: clamp(440px, 62vh, 700px); }
.retro-scene--gallery { min-height: clamp(500px, 70vh, 780px); }
.retro-scene--ai { min-height: clamp(480px, 68vh, 760px); }
.retro-scene--taskbar { min-height: clamp(460px, 66vh, 740px); padding-bottom: 42px; }

/* ── Desk ecosystem — float + border glitch ── */

@keyframes eco-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(0, -5px, 0); }
  65% { transform: translate3d(0, -7px, 0); }
}

@keyframes eco-phosphor {
  0%, 100% { opacity: 1; }
  42% { opacity: 0.97; }
  43% { opacity: 1; }
  88% { opacity: 0.96; }
  89% { opacity: 1; }
}

@keyframes eco-border-glitch {
  0%, 91%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    box-shadow: none;
  }
  92% {
    opacity: 0.92;
    transform: translate3d(-2px, 0, 0);
    box-shadow:
      inset 0 0 0 2px rgba(210, 195, 165, 0.52),
      -3px 0 0 rgba(200, 160, 130, 0.32),
      3px 0 0 rgba(150, 165, 185, 0.28);
  }
  93% {
    opacity: 0.78;
    transform: translate3d(2px, 1px, 0) skewX(0.4deg);
    box-shadow:
      inset 0 0 0 2px rgba(230, 210, 170, 0.38),
      inset 0 12px 0 rgba(200, 160, 130, 0.12);
  }
  94% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes eco-chroma-jolt {
  0%, 94%, 100% { filter: none; }
  95% {
    filter:
      drop-shadow(2px 0 rgba(200, 160, 130, 0.22))
      drop-shadow(-2px 0 rgba(150, 165, 185, 0.2));
  }
  96% { filter: none; }
}

@keyframes eco-grain-shift {
  0%, 100%, 38%, 44%, 85%, 91% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    background-position: 0 0, 0 0;
    clip-path: inset(0 0 0 0);
  }
  39% {
    opacity: 0.2;
    transform: translate3d(-2px, 1px, 0);
    background-position: 14px 6px, -10px 8px;
    clip-path: inset(0 0 0 0);
  }
  40% {
    opacity: 0.14;
    transform: translate3d(3px, -2px, 0);
    background-position: -11px 13px, 9px -7px;
    clip-path: inset(3px 0 0 0);
  }
  41% {
    opacity: 0.1;
    transform: translate3d(-1px, 2px, 0) skewX(0.2deg);
    background-position: 7px -9px, -6px 12px;
    clip-path: inset(0 2px 0 0);
  }
  42% {
    opacity: 0.16;
    transform: translate3d(2px, 1px, 0);
    background-position: -8px 5px, 13px -4px;
    clip-path: inset(0 0 4px 0);
  }
  86% {
    opacity: 0.18;
    transform: translate3d(1px, -2px, 0);
    background-position: 10px 11px, -12px -5px;
    clip-path: inset(0 0 0 0);
  }
  87% {
    opacity: 0.11;
    transform: translate3d(-3px, 1px, 0);
    background-position: -7px -8px, 8px 10px;
    clip-path: inset(2px 0 0 0);
  }
  88% {
    opacity: 0.15;
    transform: translate3d(2px, 3px, 0) skewX(-0.25deg);
    background-position: 5px 9px, -9px 6px;
    clip-path: inset(0 0 0 3px);
  }
  89% {
    opacity: 0.08;
    transform: translate3d(-1px, -1px, 0);
    background-position: -13px 4px, 6px -11px;
    clip-path: inset(0 0 2px 0);
  }
}

.retro-win,
.retro-folder,
.mac-trash,
.about-folders__hint,
.retro-taskbar,
.travel-city-folder,
.cosmo-meme-slot,
.miniso-meme-slot,
.about-meme-row {
  isolation: isolate;
  animation:
    eco-drift var(--eco-float-dur, 6s) ease-in-out infinite,
    eco-phosphor var(--eco-flicker-dur, 4.2s) linear infinite,
    eco-chroma-jolt var(--eco-glitch-dur, 5.6s) steps(1, end) infinite;
  animation-delay: var(--eco-float-delay, 0s), var(--eco-flicker-delay, 0s), var(--eco-glitch-delay, 0s);
}

.retro-win::before,
.retro-folder::before,
.mac-trash::before,
.about-folders__hint::before,
.retro-taskbar::before,
.travel-city-folder::before,
.polaroid-stack:not(.is-flipping) .polaroid-card.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 58;
  border-radius: inherit;
  opacity: 0;
  background-image: var(--eco-grain-noise), var(--eco-grain-noise);
  background-size: 88px 88px, 88px 88px;
  mix-blend-mode: overlay;
  animation: eco-grain-shift var(--eco-grain-dur, 4.4s) steps(1, end) infinite;
  animation-delay: var(--eco-grain-delay, 0s);
}

.retro-win::after,
.retro-folder::after,
.mac-trash::after,
.about-folders__hint::after,
.retro-taskbar::after,
.travel-city-folder::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 60;
  border-radius: inherit;
  animation: eco-border-glitch var(--eco-glitch-dur, 5.6s) steps(1, end) infinite;
  animation-delay: var(--eco-glitch-delay, 0s);
}

.retro-win:nth-child(3n+1),
.retro-folder:nth-child(3n+1) {
  --eco-float-delay: 0s;
  --eco-flicker-delay: 0.15s;
  --eco-glitch-delay: 0.3s;
  --eco-grain-delay: 0.22s;
}
.retro-win:nth-child(3n+2),
.retro-folder:nth-child(3n+2) {
  --eco-float-delay: 0.9s;
  --eco-flicker-delay: 0.55s;
  --eco-glitch-delay: 1.1s;
  --eco-grain-delay: 0.68s;
}
.retro-win:nth-child(3n),
.retro-folder:nth-child(3n) {
  --eco-float-delay: 1.8s;
  --eco-flicker-delay: 0.95s;
  --eco-glitch-delay: 2s;
  --eco-grain-delay: 1.24s;
}

.about-stack > .retro-win:nth-child(1) { --eco-float-delay: 0.2s; --eco-glitch-delay: 0.5s; --eco-grain-delay: 0.35s; }
.about-stack > .retro-win:nth-child(2) { --eco-float-delay: 1.3s; --eco-glitch-delay: 1.6s; --eco-grain-delay: 0.82s; }
.about-stack > .retro-win:nth-child(3) { --eco-float-delay: 2.4s; --eco-glitch-delay: 2.7s; --eco-grain-delay: 1.45s; }

.mac-trash { --eco-float-delay: 0.6s; --eco-glitch-delay: 1.4s; --eco-grain-delay: 0.48s; --eco-float-dur: 5.2s; }
.about-folders__hint { --eco-float-delay: 0.4s; --eco-glitch-delay: 0.8s; --eco-grain-delay: 0.38s; --eco-float-dur: 4.8s; }
.retro-taskbar { --eco-float-delay: 1.1s; --eco-glitch-delay: 2.2s; --eco-grain-delay: 0.92s; --eco-float-dur: 7.2s; }

.polaroid-stack:not(.is-flipping) .polaroid-card.is-active {
  --eco-grain-delay: 0.55s;
}

.retro-folder:active,
.mac-trash:active,
.retro-win:active,
.travel-city-folder:active {
  animation-play-state: paused;
}

.retro-win:active::before,
.retro-folder:active::before,
.mac-trash:active::before,
.travel-city-folder:active::before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .retro-win,
  .retro-folder,
  .mac-trash,
  .about-folders__hint,
  .retro-taskbar,
  .travel-city-folder,
  .cosmo-meme-slot,
  .miniso-meme-slot,
  .about-meme-row,
  .polaroid-stack:not(.is-flipping) .polaroid-card.is-active {
    animation: none !important;
  }

  .retro-win::before,
  .retro-folder::before,
  .mac-trash::before,
  .about-folders__hint::before,
  .retro-taskbar::before,
  .travel-city-folder::before,
  .polaroid-stack:not(.is-flipping) .polaroid-card.is-active::before,
  .retro-win::after,
  .retro-folder::after,
  .mac-trash::after,
  .about-folders__hint::after,
  .retro-taskbar::after,
  .travel-city-folder::after,
  .polaroid-stack:not(.is-flipping) .polaroid-card.is-active::after,
  .retro-folder__icon::after,
  .travel-city-folder__icon::after {
    display: none;
  }

  .retro-folder__icon,
  .travel-city-folder__icon {
    animation: none !important;
  }
}

/* ── Win95 windows ── */

.retro-win {
  display: flex;
  flex-direction: column;
  min-height: clamp(140px, 20vh, 280px);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--win-gray), var(--win-gray)) padding-box,
    var(--win-border-grad) border-box;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.35),
    2px 2px 0 rgba(0, 0, 0, 0.35),
    0 24px 60px rgba(0, 0, 0, 0.5);
  font-family: var(--win-face);
  font-size: 11px;
  color: #000;
}

.retro-win--inactive {
  opacity: 0.88;
  filter: saturate(0.75);
}

.retro-win--active {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.4),
    0 32px 80px rgba(0, 0, 0, 0.65);
}

.retro-win--viewer { min-height: clamp(160px, 22vh, 240px); }

.retro-scene--miniso .retro-win--viewer.miniso-album {
  min-height: 0 !important;
}
.retro-win--dialog-ok { min-height: auto; }
.retro-win--error { min-height: auto; width: 220px !important; }
.retro-win--msn { min-height: auto; }

.retro-win__titlebar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 22px;
  padding: 2px 3px;
  background: linear-gradient(90deg, #2a3038 0%, var(--win-title) 42%, #5a6068 78%, #7a8088 100%);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  cursor: move;
}

.retro-win__titlebar .retro-win__controls,
.retro-win__titlebar .retro-win__control-btn,
.retro-win__titlebar button {
  cursor: var(--cursor-arrow);
}

.retro-win__titlebar--inactive {
  background: linear-gradient(90deg, #4a5058 0%, #6a7078 100%);
  color: #e8e4dc;
}

.retro-win__titlebar--xp {
  height: 28px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #9aa0a8 0%, #6a7078 40%, #5a6068 88%, #3a4048 100%);
  padding-top: 4px;
}

.retro-win--xp-skin {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--win-gray), var(--win-gray)) padding-box,
    linear-gradient(145deg, #b8bcc2, #7a8088, #3a4048, #8a9098) border-box;
}

.retro-win__title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.retro-win__controls {
  display: flex;
  gap: 2px;
}

.retro-win__controls span,
.retro-win__ctrl {
  display: block;
  width: 16px;
  height: 14px;
  padding: 0;
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  font-family: var(--win-face);
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  color: #000;
  cursor: var(--cursor-arrow);
}

.retro-win__ctrl--dummy {
  pointer-events: none;
}

.retro-win__ctrl--close:hover,
.retro-btn:hover,
.retro-folder:hover,
.polaroid-stack__nav:hover,
.travel-city-folder:hover,
.travel-explorer__tree-item:hover,
.travel-photo-icon:hover,
.ceramics-viewer__nav:hover,
.travel-lightbox__nav:hover,
.travel-explorer__back:hover {
  filter: brightness(0.94);
}

.retro-win__ctrl--close:active,
.retro-btn:active,
.retro-folder:active,
.polaroid-stack__nav:active,
.travel-city-folder:active,
.ceramics-viewer__nav:active,
.travel-lightbox__nav:active {
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
  transform: translate(1px, 1px);
}

.retro-win--closed {
  display: none !important;
}

.miniso-daily-row.retro-win--closed {
  display: none !important;
}

/* ── Mac-style trash + crumple / restore ── */

.retro-scene > .mac-trash,
.about-meme-row .mac-trash,
.about-trash-slot .mac-trash,
.miniso-trash-slot .mac-trash,
.rednotes-trash-slot .mac-trash,
.cosmo-trash-slot .mac-trash,
.hnu-trash-slot .mac-trash,
.inde-trash-slot .mac-trash {
  width: clamp(72px, 8vw, 92px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  margin: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: move;
  color: #fff;
  font-family: var(--win-face);
  font-size: 11px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: auto;
}

.retro-scene > .mac-trash:hover,
.retro-scene > .mac-trash:focus-visible,
.about-meme-row .mac-trash:hover,
.about-meme-row .mac-trash:focus-visible,
.about-trash-slot .mac-trash:hover,
.about-trash-slot .mac-trash:focus-visible,
.miniso-trash-slot .mac-trash:hover,
.miniso-trash-slot .mac-trash:focus-visible,
.rednotes-trash-slot .mac-trash:hover,
.rednotes-trash-slot .mac-trash:focus-visible,
.cosmo-trash-slot .mac-trash:hover,
.cosmo-trash-slot .mac-trash:focus-visible,
.hnu-trash-slot .mac-trash:hover,
.hnu-trash-slot .mac-trash:focus-visible,
.inde-trash-slot .mac-trash:hover,
.inde-trash-slot .mac-trash:focus-visible {
  background: transparent;
  border-color: transparent;
  outline: none;
}

.mac-trash__icon {
  position: relative;
  display: block;
  width: clamp(42px, 5vw, 50px);
  height: clamp(48px, 5.8vw, 56px);
  background: transparent;
  border: none;
  box-shadow: none;
}

.mac-trash__body {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 2px;
  height: 72%;
  border-radius: 3px 3px 5px 5px;
  background: var(--metal-stripe), var(--metal-face);
  border: 1px solid var(--metal-border);
  box-shadow: var(--metal-inset), var(--metal-drop);
}

.mac-trash__lid {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 6%;
  height: 14%;
  border-radius: 2px 2px 0 0;
  background: var(--metal-tab);
  border: 1px solid var(--metal-border);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.mac-trash__paper {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 18%;
  height: 28%;
  border-radius: 1px;
  background: #f5f0e6;
  border: 1px solid #c8bfb0;
  opacity: 0;
  transform: translateY(6px) scale(0.85);
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.mac-trash--has-items .mac-trash__lid {
  transform: rotate(-18deg) translateY(-1px);
}

.mac-trash--has-items .mac-trash__paper {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mac-trash__label {
  display: block;
  line-height: 1.15;
  word-break: break-word;
}

.mac-trash__badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  padding: 1px 4px;
  font-size: 9px;
  line-height: 1.2;
  color: #fff;
  background: #c0392b;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
}

.mac-trash--bounce .mac-trash__icon {
  animation: mac-trash-bounce 0.42s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes mac-trash-bounce {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.08) translateY(-2px); }
  75% { transform: scale(0.98); }
}

.desk-trash-flyer {
  position: fixed;
  z-index: 180;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
}

.desk-trash-flyer__win {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.retro-win--restoring {
  display: flex !important;
  z-index: 8 !important;
}

.trash-modal-root {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vh, 2rem);
}

.trash-modal-root[hidden] {
  display: none;
}

.trash-modal-root__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

.trash-modal-root__panel {
  position: relative;
  z-index: 1;
  width: min(520px, 92vw);
  min-height: auto;
  display: flex;
  flex-direction: column;
}

.trash-folder__hint {
  margin: 0;
  padding: 8px 12px 6px;
  font-family: var(--win-face);
  font-size: 10px;
  color: #444;
  background: var(--win-gray);
  border-bottom: 1px solid var(--win-dark);
}

.trash-folder__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
  padding: 16px;
  min-height: 140px;
  max-height: min(50vh, 360px);
  overflow-y: auto;
  background: var(--win-gray);
}

.trash-folder__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  font-family: var(--win-face);
  font-size: 11px;
  color: #666;
}

.trash-folder__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  margin: 0;
  background: transparent;
  border: 1px dotted transparent;
  border-radius: 2px;
  cursor: var(--cursor-arrow);
  color: #000;
  font-family: var(--win-face);
  font-size: 10px;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.trash-folder__item:hover,
.trash-folder__item:focus-visible {
  background: rgba(0, 0, 128, 0.12);
  border-color: rgba(0, 0, 128, 0.35);
  outline: none;
}

.trash-folder__item:active {
  background: rgba(0, 0, 128, 0.22);
}

.trash-folder__item-icon {
  display: block;
  width: 40px;
  height: 34px;
  background:
    linear-gradient(180deg, #fff 0%, #ececec 100%);
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  box-shadow: inset 1px 1px 0 #fff;
  position: relative;
}

.trash-folder__item-icon::before {
  content: "";
  position: absolute;
  inset: 6px 5px 5px;
  background: repeating-linear-gradient(
    180deg,
    #ddd 0 2px,
    transparent 2px 5px
  );
  opacity: 0.65;
}

.trash-folder__item-label {
  display: block;
  line-height: 1.2;
  word-break: break-word;
}

.retro-win__titlebar--xp .retro-win__controls span {
  width: 21px;
  height: 21px;
  border-radius: 4px;
  line-height: 17px;
}

.retro-win__menu,
.retro-win__toolbar {
  display: flex;
  gap: 0.75rem;
  padding: 2px 6px;
  background: var(--win-gray);
  border-bottom: 1px solid var(--win-dark);
  font-size: 11px;
}

.retro-win__toolbar span:not(.retro-win__address):not(.retro-win__toolbar-count) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-gray);
  font-size: 10px;
}

.retro-win__address {
  flex: 1;
  padding: 1px 4px;
  border: 2px inset var(--win-gray);
  background: #fff;
  font-size: 10px;
}

.retro-win__transport {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 8px 6px;
  background: linear-gradient(180deg, #3a6ea5 0%, #003c74 100%);
  color: #fff;
  font-size: 10px;
}

.retro-win__status {
  margin-left: auto;
  font-size: 9px;
  color: #7cfc7c;
}

.retro-win__vol {
  flex: 1;
  height: 8px;
  margin-left: 0.5rem;
  background: #1a1a1a;
  border: 1px inset #666;
}

.retro-win__progress { padding: 8px 12px 4px; }

.retro-win__progress span {
  display: block;
  height: 14px;
  border: 2px inset var(--win-gray);
  background: repeating-linear-gradient(90deg, #000080 0 12px, #fff 12px 24px);
  background-size: 24px 100%;
  animation: progress-slide 1.2s linear infinite;
}

@keyframes progress-slide {
  from { background-position: 0 0; }
  to { background-position: 24px 0; }
}

.media-slot {
  flex: 1;
  margin: 4px;
  min-height: 100px;
  background: #fff;
  border: 2px inset var(--win-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-slot--text {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 10px 12px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
}

.media-slot--compact { min-height: 64px; }

.media-slot__placeholder {
  font-family: var(--win-face);
  font-size: 11px;
  color: #888;
  text-align: center;
  padding: 0.75rem;
}

.media-slot img,
.media-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-slot:has(img) .media-slot__placeholder,
.media-slot:has(video) .media-slot__placeholder {
  display: none;
}

/* ── Paint full chrome ── */

.retro-win__paint-body {
  display: flex;
  flex: 1;
  min-height: 160px;
}

.retro-win__paint-body--compact { min-height: 120px; }

.retro-win__paint-tools {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 34px;
  padding: 4px 3px;
  background: var(--win-gray);
  border-right: 1px solid var(--win-dark);
}

.retro-win__paint-tools span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-gray);
  font-size: 11px;
}

.retro-win__paint-colors {
  display: flex;
  gap: 2px;
  padding: 4px 6px 6px;
  background: var(--win-gray);
  border-top: 1px solid var(--win-dark);
}

.retro-win__paint-colors span {
  width: 18px;
  height: 18px;
  border: 1px solid #000;
}

.retro-win__paint-colors span:nth-child(1) { background: #000; }
.retro-win__paint-colors span:nth-child(2) { background: #808080; }
.retro-win__paint-colors span:nth-child(3) { background: #800000; }
.retro-win__paint-colors span:nth-child(4) { background: #808000; }
.retro-win__paint-colors span:nth-child(5) { background: #008000; }
.retro-win__paint-colors span:nth-child(6) { background: #008080; }
.retro-win__paint-colors span:nth-child(7) { background: #000080; }
.retro-win__paint-colors span:nth-child(8) { background: #ff0000; }

/* ── Explorer full chrome ── */

.retro-win__links {
  display: flex;
  gap: 0.75rem;
  padding: 2px 8px 4px;
  background: var(--win-gray);
  border-bottom: 1px solid var(--win-dark);
  font-size: 10px;
  color: #000080;
}

.retro-win__links span:first-child {
  color: #000;
  font-weight: 700;
}

/* ── Instagram.exe frame ── */

.retro-win__ig-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 8px 10px;
  background: var(--win-gray);
  border-bottom: 1px solid var(--win-dark);
}

.retro-win__ig-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px inset var(--win-gray);
  background: linear-gradient(135deg, #aeb4bc, #7a8088, #5a6068);
}

.retro-win__ig-stats {
  font-size: 10px;
  color: #333;
}

.retro-win__ig-tabs {
  display: flex;
  gap: 0;
  background: var(--win-gray);
  border-top: 1px solid var(--win-dark);
}

.retro-win__ig-tabs span {
  flex: 1;
  padding: 4px 8px;
  text-align: center;
  font-size: 10px;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-gray);
}

.retro-win__ig-tabs span.is-active {
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
  background: #fff;
}

/* ── MSN messenger popup ── */

.retro-win__msn-body {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 10px 12px;
  background: #fff;
  margin: 4px;
  border: 2px inset var(--win-gray);
  font-size: 11px;
  line-height: 1.4;
}

.retro-win__msn-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: linear-gradient(135deg, #8a9098, #5a6068);
  border: 1px solid #3a4048;
}

/* ── Dialog + error boxes ── */

.retro-win__dialog-body {
  padding: 12px 14px 8px;
  background: var(--win-gray);
  font-size: 11px;
}

.retro-win__dialog-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 8px 12px 10px;
  background: var(--win-gray);
}

.retro-btn {
  min-width: 68px;
  padding: 3px 12px;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-gray);
  font-family: var(--win-face);
  font-size: 11px;
  color: #000;
}

.retro-btn--default {
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.15);
}

.retro-win__error-body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 12px 6px;
  background: var(--win-gray);
  font-size: 11px;
}

.retro-win__error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #c00;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid #800;
}

/* ── Error cascade (AI section) ── */

.retro-cascade {
  --x: 58%;
  --y: 48%;
  --w: 280px;
  --z: 6;
  height: 200px;
  pointer-events: none;
}

.retro-cascade__item {
  position: absolute;
  top: calc(var(--cascade, 0) * 22px);
  left: calc(var(--cascade, 0) * 22px);
  width: 200px !important;
  opacity: calc(1 - var(--cascade, 0) * 0.08);
}

/* ── Pixel loading bar ── */

.retro-pixel-load {
  --x: 52%;
  --y: 72%;
  --w: 240px;
  --z: 5;
  padding: 8px 10px;
  background: #000;
  border: 3px solid #fff;
  image-rendering: pixelated;
}

.retro-pixel-load__label {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  margin-bottom: 6px;
}

.retro-pixel-load__bar {
  display: block;
  height: 18px;
  background: repeating-linear-gradient(90deg, #fff 0 14px, #000 14px 28px);
  background-size: 28px 100%;
  animation: pixel-load 0.8s steps(4) infinite;
}

@keyframes pixel-load {
  from { background-position: 0 0; }
  to { background-position: 56px 0; }
}

/* ── Taskbar ── */

.retro-taskbar {
  --x: 0;
  --y: auto;
  --x-right: 0;
  position: relative;
  bottom: 0;
  top: auto !important;
  width: 100% !important;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 3px 6px;
  background: var(--win-gray);
  border-top: 2px solid var(--win-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  z-index: 10;
}

.retro-taskbar__start {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-gray);
  font-family: var(--win-face);
  font-size: 11px;
  font-weight: 700;
}

.retro-taskbar__start::before {
  content: "⊞";
  font-size: 13px;
}

.retro-taskbar__item {
  padding: 3px 10px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-gray);
  font-size: 10px;
}

.retro-taskbar__item.is-active {
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
  background: #ececec;
}

.retro-taskbar__clock {
  margin-left: auto;
  padding: 3px 8px;
  border: 2px inset var(--win-gray);
  background: var(--win-gray);
  font-size: 10px;
}

/* ── Notepad scrollbar decoration ── */

.retro-win__scrollbar {
  position: absolute;
  right: 2px;
  top: 48px;
  bottom: 4px;
  width: 16px;
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
}

.retro-win__scrollbar::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 2px;
  right: 2px;
  height: 40px;
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
}

.retro-win--notepad { position: relative; }

/* ── About Me — polaroid stack ── */

.retro-win--polaroid {
  min-height: auto;
}

.retro-win--polaroid .polaroid-stack__stage,
.retro-win--polaroid .polaroid-stack__dots,
.retro-win--polaroid .polaroid-stack__hint {
  cursor: var(--cursor-arrow);
}

.retro-win--polaroid .retro-win__titlebar {
  justify-content: flex-start;
  gap: 0.5rem;
}

.polaroid-stack__counter {
  margin-left: auto;
  margin-right: 0.35rem;
  font-size: 10px;
  color: #fff;
  opacity: 0.85;
}

.polaroid-stack__stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 8px 6px 4px;
  background: var(--win-gray);
}

.polaroid-stack__deck {
  position: relative;
  flex: 1;
  height: clamp(168px, 24vh, 220px);
  perspective: 900px;
}

.polaroid-card {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 8px 8px 28px;
  background: linear-gradient(180deg, #faf6ee 0%, #ede4d4 100%);
  border: 1px solid #d4c8b4;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.35);
  transform-origin: center bottom;
  transition:
    transform 0.45s var(--page-ease),
    opacity 0.35s ease,
    z-index 0s linear 0.2s;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Polaroid photo — retro CCD dreamcore ── */

.polaroid-card__frame {
  position: relative;
  width: 100%;
  height: calc(100% - 18px);
  overflow: hidden;
  isolation: isolate;
  background: #141820;
  box-shadow:
    inset 2px 0 10px rgba(255, 70, 110, 0.07),
    inset -2px 0 10px rgba(70, 170, 255, 0.06);
}

.polaroid-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter:
    contrast(0.93)
    saturate(0.6)
    brightness(1.12)
    sepia(0.16)
    hue-rotate(352deg);
}

.polaroid-card__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.14;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 1px,
      rgba(0, 0, 0, 0.22) 1px 2px
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.polaroid-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 88% 78% at 50% 42%, rgba(230, 210, 180, 0.18), transparent 58%),
    radial-gradient(ellipse 62% 52% at 78% 82%, rgba(180, 175, 165, 0.12), transparent 54%),
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(16, 16, 20, 0.48) 100%);
  mix-blend-mode: soft-light;
  box-shadow:
    inset 0 0 32px rgba(210, 185, 140, 0.1),
    inset 0 0 72px rgba(120, 125, 135, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
  .polaroid-card__frame::after {
    animation: polaroid-ccd-drift 9s ease-in-out infinite;
  }
}

@keyframes polaroid-ccd-drift {
  0%, 100% {
    opacity: 0.88;
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    opacity: 1;
    filter: hue-rotate(8deg) brightness(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid-card__frame::after {
    animation: none;
  }
}

.polaroid-card__stamp {
  position: absolute;
  right: 7px;
  bottom: 6px;
  z-index: 4;
  font-family: var(--font-retro-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: rgba(255, 108, 78, 0.68);
  text-shadow:
    0 0 6px rgba(255, 70, 50, 0.28),
    1px 1px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.82;
}

.polaroid-card figcaption {
  margin-top: 6px;
  font-family: var(--font-hand);
  font-size: 12px;
  color: #444;
  text-align: center;
  line-height: 1.1;
}

.polaroid-card.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  transform: translate(0, 0) rotate(0deg) scale(1);
  transition: transform 0.45s var(--page-ease), opacity 0.35s ease;
}

.polaroid-stack:not(.is-flipping) .polaroid-card.is-active {
  animation:
    eco-drift 5.8s ease-in-out infinite,
    eco-phosphor 4s linear infinite,
    eco-chroma-jolt 5.4s steps(1, end) infinite;
  animation-delay: 0.35s, 0.2s, 0.9s;
}

.polaroid-stack:not(.is-flipping) .polaroid-card.is-active::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 5;
  animation: eco-border-glitch 5.4s steps(1, end) infinite;
  animation-delay: 0.9s;
}

.polaroid-card.is-behind-1 {
  opacity: 0.92;
  z-index: 2;
  transform: translate(10px, -8px) rotate(4deg) scale(0.96);
}

.polaroid-card.is-behind-2 {
  opacity: 0.78;
  z-index: 1;
  transform: translate(-8px, -14px) rotate(-3deg) scale(0.92);
}

.polaroid-stack.is-flipping .polaroid-card.is-active {
  animation: polaroid-flip-out 0.42s var(--page-ease) forwards;
}

.polaroid-stack.is-flipping .polaroid-card.is-entering {
  animation: polaroid-flip-in 0.42s var(--page-ease) forwards;
  z-index: 4;
  opacity: 1;
}

@keyframes polaroid-flip-out {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(-18px, 8px) rotate(-12deg) scale(0.88); opacity: 0; }
}

@keyframes polaroid-flip-in {
  0% { transform: translate(18px, 12px) rotate(10deg) scale(0.88); opacity: 0; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
}

.polaroid-stack__nav {
  flex-shrink: 0;
  width: 22px;
  height: 52px;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-gray);
  font-family: var(--win-face);
  font-size: 18px;
  line-height: 1;
  color: #000;
  cursor: var(--cursor-arrow);
}

.polaroid-stack__nav:hover {
  background: #d4d4d4;
}

.polaroid-stack__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px 2px;
  background: var(--win-gray);
}

.polaroid-stack__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #888;
  border: 1px solid #666;
}

.polaroid-stack__dot.is-active {
  background: #000080;
  border-color: #000060;
}

.polaroid-stack__hint {
  padding: 0 8px 6px;
  background: var(--win-gray);
  font-family: var(--win-face);
  font-size: 9px;
  color: #666;
  text-align: center;
}

/* ── About Me — education window ── */

.retro-win--education {
  min-height: clamp(380px, 58vh, 640px);
}

.education-content {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 14px 16px 18px;
  overflow-y: auto;
}

.education-entry {
  padding: 0 0 14px;
  margin: 0 0 14px;
  border-bottom: 1px dashed #ccc;
}

.education-entry:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.education-entry__school {
  font-family: var(--win-face);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: #111;
  margin-bottom: 4px;
}

.education-entry__detail {
  font-family: var(--win-face);
  font-size: 12px;
  color: #333;
  line-height: 1.45;
}

.education-entry__note {
  margin-top: 6px;
  font-family: var(--win-face);
  font-size: 11px;
  color: #666;
  font-style: italic;
  line-height: 1.4;
}

.education-entry--muted .education-entry__school {
  color: #444;
}

.retro-win__statusbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2px 8px 3px;
  background: var(--win-gray);
  border-top: 1px solid var(--win-dark);
  font-family: var(--win-face);
  font-size: 10px;
  color: #000;
}

.retro-win__statusbar-grow {
  flex: 1;
}

/* ── About Me — desktop folders ── */

.retro-folder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: clamp(72px, 8vw, 92px);
  padding: 6px 4px;
  margin: 0;
  background: transparent;
  cursor: move;
  text-decoration: none;
  color: #fff;
  font-family: var(--win-face);
  font-size: 11px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.retro-folder:hover,
.retro-folder:focus-visible {
  background: rgba(74, 80, 88, 0.32);
  border-color: rgba(154, 160, 168, 0.42);
  outline: none;
}

.retro-folder__icon {
  display: block;
  width: clamp(40px, 5vw, 48px);
  height: clamp(34px, 4.2vw, 40px);
  background: var(--folder-face);
  border: 1px solid var(--folder-border);
  border-radius: 0 3px 3px 3px;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.38),
    inset -1px -2px 0 rgba(0, 0, 0, 0.14),
    2px 3px 6px rgba(0, 0, 0, 0.35);
  position: relative;
  animation: eco-phosphor 3.6s linear infinite;
  animation-delay: var(--eco-flicker-delay, 0s);
}

.retro-folder__icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  animation: eco-border-glitch 5.2s steps(1, end) infinite;
  animation-delay: var(--eco-glitch-delay, 0s);
}

.retro-folder__icon::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -1px;
  width: 55%;
  height: 8px;
  background: var(--folder-tab);
  border: 1px solid var(--folder-border);
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}

.retro-folder__label {
  display: block;
  line-height: 1.15;
  word-break: break-word;
}

/* ── About Me — scrollable notepad ── */

.media-slot--notepad {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
}

.notepad-view {
  flex: 1;
  min-height: 108px;
  max-height: 132px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 4px 10px 12px;
  background: #fff;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: #808080 #c0c0c0;
}

.notepad-view__text {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: #111;
  white-space: pre-wrap;
}

.notepad-view::-webkit-scrollbar {
  width: 16px;
}

.notepad-view::-webkit-scrollbar-track {
  background: #dfdfdf;
  border-left: 1px solid #808080;
}

.notepad-view::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.notepad-view::-webkit-scrollbar-button {
  height: 16px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
}

.education-entry__label {
  font-family: var(--win-face);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 4px;
}

.education-content:not(:has(.education-entry)) .media-slot__placeholder {
  display: block;
}

.education-content:has(.education-entry) .media-slot__placeholder {
  display: none;
}

.about-notepad-body:has(.notepad-view) .media-slot__placeholder {
  display: none;
}

/* ── About Me — folder modals ── */

body.about-modal-open .scroll-site {
  overflow: hidden;
}

.about-modal-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vh, 2rem);
}

.about-modal-root[hidden] {
  display: none;
}

.about-modal-root__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.about-modal-root__panel {
  position: relative;
  z-index: 1;
  width: min(920px, 94vw);
  max-height: min(88vh, 820px);
  display: flex;
  flex-direction: column;
  min-height: auto;
}

.about-modal-root__panel.retro-resize-pinned,
.trash-modal-root__panel.retro-resize-pinned {
  position: absolute !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

.retro-win--modal-wide {
  width: min(980px, 96vw);
}

.retro-win--modal-tall {
  max-height: min(90vh, 860px);
}

.about-modal-root__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--win-gray);
}

/* Ceramics large preview */

.ceramics-viewer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 12px;
  min-height: 0;
  background: #1a1a1a;
}

.ceramics-viewer__stage {
  flex: 0 1 auto;
  width: fit-content;
  max-width: min(760px, 82vw);
  margin: 0;
}

.ceramics-viewer__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(760px, 82vw);
  max-height: min(62vh, 560px);
  object-fit: contain;
  background: #000;
  border: 2px inset var(--win-gray);
}

.ceramics-viewer__caption {
  margin-top: 8px;
  text-align: center;
  font-family: var(--win-face);
  font-size: 11px;
  color: #ddd;
}

.ceramics-viewer__nav {
  flex-shrink: 0;
  width: 28px;
  height: 64px;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-gray);
  font-size: 22px;
  cursor: var(--cursor-arrow);
}

.ceramics-viewer__count {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--win-face);
  font-size: 11px;
  color: #ccc;
}

/* Travel album explorer */

.travel-explorer {
  padding: 10px;
  background: #fff;
  min-height: min(68vh, 600px);
}

.travel-explorer__hero {
  padding: 12px 14px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #e8e4dc 0%, #f0ece4 100%);
  border: 2px inset var(--win-gray);
  font-family: var(--win-face);
  font-size: 12px;
  line-height: 1.45;
}

.travel-explorer__tagline {
  margin-top: 4px;
  color: #555;
}

.travel-explorer__city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px 10px;
}

.travel-city-folder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: var(--cursor-arrow);
  font-family: var(--win-face);
  font-size: 11px;
  color: #000;
}

.travel-city-folder:hover,
.travel-city-folder:focus-visible {
  background: rgba(74, 80, 88, 0.14);
  border-color: rgba(154, 160, 168, 0.28);
  outline: none;
}

.travel-city-folder__icon {
  width: 44px;
  height: 36px;
  background: var(--folder-face);
  border: 1px solid var(--folder-border);
  border-radius: 0 3px 3px 3px;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.38),
    inset -1px -2px 0 rgba(0, 0, 0, 0.14),
    2px 3px 6px rgba(0, 0, 0, 0.35);
  position: relative;
  animation: eco-phosphor 3.6s linear infinite;
  animation-delay: var(--eco-flicker-delay, 0s);
}

.travel-city-folder__icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  animation: eco-border-glitch 5.2s steps(1, end) infinite;
  animation-delay: var(--eco-glitch-delay, 0s);
}

.travel-city-folder__icon::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -1px;
  width: 55%;
  height: 7px;
  background: var(--folder-tab);
  border: 1px solid var(--folder-border);
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}

.travel-city-folder__name {
  text-align: center;
  line-height: 1.15;
}

.travel-city-folder__count {
  font-size: 10px;
  color: #666;
}

.travel-explorer__toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 6px 8px;
  margin-bottom: 8px;
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
}

.travel-explorer__path {
  flex: 1;
  padding: 2px 6px;
  background: #fff;
  border: 2px inset var(--win-gray);
  font-family: var(--win-face);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.travel-explorer__split {
  display: grid;
  grid-template-columns: minmax(140px, 24%) 1fr;
  gap: 8px;
  min-height: min(58vh, 520px);
}

.travel-explorer__tree {
  padding: 8px;
  background: #fff;
  border: 2px inset var(--win-gray);
  overflow-y: auto;
}

.travel-explorer__tree-title {
  font-family: var(--win-face);
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #444;
}

.travel-explorer__tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.travel-explorer__tree-item {
  display: block;
  width: 100%;
  padding: 4px 6px;
  margin-bottom: 2px;
  border: none;
  background: transparent;
  text-align: left;
  font-family: var(--win-face);
  font-size: 11px;
  cursor: var(--cursor-arrow);
}

.travel-explorer__tree-item.is-active,
.travel-explorer__tree-item:hover {
  background: #000080;
  color: #fff;
}

.travel-explorer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  align-content: start;
  padding: 8px;
  background: #fff;
  border: 2px inset var(--win-gray);
  overflow-y: auto;
  max-height: min(58vh, 520px);
}

.travel-photo-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid transparent;
  background: transparent;
  cursor: var(--cursor-arrow);
}

.travel-photo-icon:hover {
  background: rgba(0, 0, 128, 0.1);
  border-color: rgba(0, 0, 128, 0.2);
}

.travel-photo-icon img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid #999;
  background: #eee;
}

.travel-photo-icon__label {
  font-family: var(--win-face);
  font-size: 9px;
  color: #333;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.travel-lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 12px;
  min-height: min(68vh, 600px);
  background: #1a1a1a;
}

.travel-lightbox__figure {
  margin: 0;
  max-width: min(820px, 86vw);
}

.travel-lightbox__img {
  display: block;
  width: 100%;
  max-height: min(58vh, 540px);
  object-fit: contain;
  background: #000;
  border: 2px inset var(--win-gray);
}

.travel-lightbox__figure figcaption {
  margin-top: 8px;
  text-align: center;
  font-family: var(--win-face);
  font-size: 11px;
  color: #ddd;
}

.travel-lightbox__nav {
  flex-shrink: 0;
  width: 28px;
  height: 64px;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-gray);
  font-size: 22px;
  cursor: var(--cursor-arrow);
}

/* Docu-fiction preview */

.docu-player {
  position: relative;
  padding: 8px;
  background: #000;
}

.docu-player__video {
  display: block;
  width: 100%;
  max-height: min(62vh, 560px);
  background: #000;
}

.docu-player__end {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.82);
  text-align: center;
}

.docu-player__end[hidden] {
  display: none !important;
}

.docu-player__end p {
  max-width: 420px;
  font-family: var(--win-face);
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
}

.about-modal-fallback {
  padding: 1.5rem;
  font-family: var(--win-face);
  font-size: 12px;
}

.about-load-error {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--win-face);
  font-size: 11px;
  line-height: 1.45;
  color: #800;
}

/* ── Responsive ── */

@media (max-width: 960px) {
  .site-rail {
    left: 0.65rem;
    right: 0.65rem;
    top: 0.65rem;
    bottom: auto;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    z-index: 45;
  }

  .site-rail__mark {
    flex-shrink: 0;
  }

  .site-rail__signal {
    display: none;
  }

  .site-rail__line {
    flex: 1;
    width: auto;
    height: 2px;
    margin: 0;
    min-width: 2rem;
  }

  .site-rail__index {
    flex-shrink: 0;
  }

  .scroll-panel--hero {
    padding:
      clamp(4.5rem, 11vh, 5.5rem)
      clamp(1rem, 4vw, 1.5rem)
      clamp(2rem, 5vh, 3rem)
      clamp(1rem, 4vw, 1.5rem);
  }

  .scroll-panel--project {
    min-height: auto;
    padding:
      clamp(4.75rem, 11vh, 5.75rem)
      clamp(1rem, 4vw, 1.25rem)
      clamp(2.5rem, 6vh, 3.5rem)
      clamp(1rem, 4vw, 1.25rem);
  }

  body.scroll-unlocked .scroll-site {
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
  }

  .scroll-panel {
    scroll-snap-stop: normal;
  }

  .scroll-panel--project .panel-line--title,
  .scroll-panel--project .panel-line--title-vertical {
    margin-bottom: clamp(1rem, 3vh, 1.75rem);
    padding-right: 0;
  }

  .scroll-panel--project .panel-index {
    margin-bottom: 0.35rem;
  }

  .panel-line--title {
    max-width: 100%;
  }

  .panel-line--body {
    max-width: 100%;
    margin-top: clamp(1rem, 3vh, 2rem);
  }

  .scroll-panel--project .panel-line--title,
  .scroll-panel--project .panel-line--body,
  .scroll-panel--project .panel-index {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .retro-scene {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 0;
  }

  .scroll-panel--scene-about .panel-line--title-vertical {
    position: relative;
    top: auto;
    right: auto;
    writing-mode: horizontal-tb;
    transform: scale(var(--text-scale, 1));
    transform-origin: left center;
    margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
  }

  .scroll-panel--scene-about .panel-stage--about {
    padding-right: 0;
  }

  .retro-scene > .retro-win,
  .retro-scene > .retro-pixel-load,
  .retro-scene > .retro-cascade,
  .retro-scene > .retro-taskbar,
  .retro-scene > .about-folders,
  .retro-scene > .about-stack,
  .retro-scene > .about-trash-slot,
  .retro-scene > .miniso-trash-slot,
  .retro-scene > .rednotes-trash-slot,
  .retro-scene > .cosmo-trash-slot,
  .retro-scene > .hnu-trash-slot,
  .retro-scene > .inde-trash-slot,
  .retro-scene > .about-meme-row,
  .retro-scene > .about-meme-stack,
  .retro-scene > .miniso-bottom-band,
  .retro-scene > .miniso-daily-row,
  .retro-scene > .miniso-meme-slot,
  .retro-scene > .cosmo-meme-slot,
  .retro-scene > .mac-trash,
  .retro-scene > .scene-sticker {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(100%, 480px) !important;
    margin: 0 auto;
    transform: none !important;
    animation: none !important;
  }

  .retro-scene > .retro-win.retro-resize-pinned,
  .retro-scene > .miniso-daily-row.retro-resize-pinned,
  .retro-scene > .miniso-meme-slot.retro-resize-pinned,
  .retro-scene > .cosmo-meme-slot.retro-resize-pinned,
  .retro-scene > .about-meme-row.retro-resize-pinned,
  .retro-scene > .mac-trash.retro-resize-pinned,
  .retro-scene > .retro-folder.retro-resize-pinned,
  .retro-scene > .scene-sticker.retro-resize-pinned {
    position: absolute !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    animation: none !important;
    transform: none !important;
  }

  .retro-scene > .mac-trash {
    width: auto !important;
    margin-top: 0.75rem;
  }

  .retro-scene > .scene-sticker {
    width: min(42vw, 126px) !important;
    margin-top: -0.5rem;
    opacity: 0.85;
  }

  .retro-scene--about > .about-meme-row {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    max-width: none;
    margin: 0.5rem auto 0;
    justify-content: center;
  }

  .about-meme-player__ipod {
    width: min(132px, 38vw);
  }

  .retro-scene--about > .about-trash-slot,
  .retro-scene--miniso > .miniso-trash-slot,
  .retro-scene--rednotes > .rednotes-trash-slot,
  .retro-scene--cosmo > .cosmo-trash-slot,
  .retro-scene--hnu > .hnu-trash-slot,
  .retro-scene--inde > .inde-trash-slot {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: min(100%, 480px) !important;
    margin: 0 auto;
  }

  .retro-scene--rednotes {
    height: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .retro-scene--rednotes > .retro-win--rednotes-note,
  .retro-scene--rednotes > .retro-win--rednotes-message,
  .retro-scene--rednotes > .retro-win--rednotes-folder-list {
    --x: auto !important;
    --y: auto !important;
    --w: min(100%, 480px) !important;
    height: auto !important;
    max-height: none;
    min-height: clamp(280px, 42vh, 420px) !important;
  }

  .scroll-panel--scene-rednotes .panel-stage--rednotes {
    padding-right: 0;
  }

  .retro-scene--cosmo {
    height: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .retro-scene--cosmo > .retro-win--cosmo-posts,
  .retro-scene--cosmo > .retro-win--cosmo-reader {
    --x: auto !important;
    --y: auto !important;
    --w: min(100%, 480px) !important;
    max-height: none !important;
    height: auto !important;
    min-height: clamp(280px, 42vh, 420px) !important;
  }

  .scroll-panel--scene-cosmo .panel-stage--cosmo {
    padding-right: 0;
  }

  .retro-scene--hnu {
    height: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .retro-scene--hnu > .retro-win--hnu-rack,
  .retro-scene--hnu > .retro-win--hnu-wordpad {
    --x: auto !important;
    --y: auto !important;
    --w: min(100%, 520px) !important;
    max-height: none !important;
    height: auto !important;
    min-height: clamp(280px, 42vh, 420px) !important;
  }

  .scroll-panel--scene-hnu .panel-stage--hnu {
    padding-right: 0;
  }

  .retro-scene--inde {
    height: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .retro-scene--inde > .retro-win--inde-explorer,
  .retro-scene--inde > .retro-win--inde-notepad,
  .retro-scene--inde > .retro-win--inde-acrobat {
    --x: auto !important;
    --y: auto !important;
    --w: min(100%, 540px) !important;
    max-height: none !important;
    height: auto !important;
    min-height: clamp(220px, 34vh, 360px) !important;
  }

  .scroll-panel--scene-inde .panel-stage--inde {
    padding-right: 0;
  }

  .retro-scene--contact {
    height: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .retro-scene--contact > .retro-win--contact-main,
  .retro-scene--contact > .retro-win--contact-ping {
    --x: auto !important;
    --y: auto !important;
    --x-right: auto !important;
    --w: min(100%, 480px) !important;
    max-height: none !important;
    height: auto !important;
    min-height: auto !important;
  }

  .scroll-panel--scene-contact .panel-stage--contact {
    padding-right: 0;
  }

  .retro-scene--cosmo > .cosmo-meme-slot {
    width: auto !important;
    margin: 0.35rem auto 0;
    display: flex;
    justify-content: center;
  }

  .cosmo-meme-player__console {
    width: min(208px, 58vw);
  }

  .cosmo-meme-player {
    animation: none;
  }

  .about-meme-player {
    animation: none;
  }

  .scroll-panel--scene-miniso .panel-line--title-vertical {
    position: relative;
    top: auto;
    right: auto;
    writing-mode: horizontal-tb;
    transform: scale(var(--text-scale, 1));
    transform-origin: left center;
    margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
  }

  .scroll-panel--scene-miniso .panel-stage--miniso {
    padding-right: 0;
  }

  .miniso-project {
    grid-template-columns: 1fr;
  }

  .retro-scene--miniso > .retro-win--miniso-project-list {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: min(100%, 320px) !important;
    max-height: none;
    margin: 0.5rem auto 0;
  }

  .retro-scene--miniso > .miniso-bottom-band {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    flex-direction: column;
    align-items: center;
    width: min(100%, 360px) !important;
    margin: 0.75rem auto 0;
    gap: 0.65rem;
  }

  .miniso-bottom-band .miniso-daily-row {
    width: min(100%, 320px) !important;
  }

  .miniso-bottom-band .miniso-meme-slot {
    transform: scale(0.6);
    transform-origin: center;
  }

  .retro-scene--miniso > .retro-win--miniso-doc,
  .retro-win--miniso-doc.is-open {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: min(100%, 480px) !important;
    margin: 0 auto;
    transform: none !important;
  }

  .miniso-meme-player {
    animation: none;
  }

  .panel-sticker {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: min(38vw, 116px) !important;
    margin: 0.5rem auto 0;
    transform: none !important;
    animation: none !important;
  }

  .scroll-panel--hero .panel-sticker {
    display: none;
  }

  .retro-cascade {
    display: none;
  }

  .retro-scene--taskbar {
    padding-bottom: 0;
  }

  .retro-scene > .about-folders {
    align-items: center;
  }

  .about-folders__row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .about-folders__hint {
    text-align: center;
  }

  .polaroid-stack__nav {
    display: none;
  }

  .polaroid-stack__deck {
    height: clamp(200px, 52vw, 280px);
  }

  .travel-explorer__split {
    grid-template-columns: 1fr;
  }

  .travel-explorer__grid {
    max-height: 50vh;
  }

  .about-modal-root__panel {
    width: 98vw;
    max-height: 92vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none !important; }

  body.scroll-unlocked .grain,
  body.scroll-unlocked .network-fx,
  body.scroll-unlocked .site-bg__layer.is-active .site-bg__video,
  .network-fx__scanlines,
  .network-fx__grain,
  .network-fx__rgb,
  .network-fx__vignette {
    animation: none !important;
    opacity: 0.12 !important;
  }

  body.scroll-unlocked .network-fx {
    opacity: 0 !important;
  }

  .retro-scene,
  body.scroll-unlocked .panel-stage {
    transform: scale(var(--text-scale, 1)) !important;
  }

  .scroll-site {
    overflow-y: auto !important;
    visibility: visible !important;
    pointer-events: auto !important;
    scroll-behavior: auto;
  }

  .desk-header {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body.desk-awake:not(.scroll-unlocked) .site-bg__layer[data-bg-id="desk"] { opacity: 1 !important; }
  body.scroll-unlocked .site-bg__layer.is-active { opacity: 1 !important; }
  body.scroll-unlocked .site-bg__layer:not(.is-active) { opacity: 0 !important; }

  .scroll-cue,
  .retro-win__progress span,
  .scene-sticker--float,
  .desk-westie__sprite,
  .desk-westie__tail,
  .desk-westie__thought {
    animation: none !important;
  }
}

/* ── Desk Westie pet ── */

.desk-westie {
  position: absolute;
  z-index: 11;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: var(--cursor-arrow);
  pointer-events: auto;
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.38));
}

.desk-westie--visible {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

.desk-westie--entering.desk-westie--enter-bottom {
  transform: translate(-50%, calc(-100% + 28px)) scale(0.5);
}

.desk-westie--entering.desk-westie--enter-left {
  transform: translate(calc(-50% - 36px), -100%) scale(0.55);
}

.desk-westie--entering.desk-westie--enter-right {
  transform: translate(calc(-50% + 36px), -100%) scale(0.55);
}

.desk-westie__shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  transform: translateX(-50%) scale(1);
  filter: blur(2px);
  transition: transform 0.35s ease;
}

.desk-westie__clip {
  width: 52px;
  height: 52px;
  overflow: visible;
}

.desk-westie__sprite {
  position: relative;
  width: 52px;
  height: 52px;
  transform-origin: center bottom;
}

.desk-westie__fx {
  position: absolute;
  left: 50%;
  top: 20%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}

.desk-westie__heart,
.desk-westie__sparkle {
  position: absolute;
  left: var(--hx, 0);
  bottom: 0;
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transform: translateX(-50%) scale(var(--scale, 1));
  animation: westie-fx-rise 1.1s ease-out var(--delay, 0s) forwards;
}

.desk-westie__heart {
  color: #ff6b9d;
  text-shadow: 0 0 8px rgba(255, 90, 150, 0.65);
}

.desk-westie__sparkle {
  color: #ffe680;
  font-size: 10px;
  text-shadow: 0 0 6px rgba(255, 230, 130, 0.75);
}

@keyframes westie-fx-rise {
  0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(calc(-1 * var(--lift, 36px))) scale(1); }
}

.desk-westie__svg {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.desk-westie[data-facing="left"]:not([data-mode="sleep-title"]) .desk-westie__clip {
  transform: scaleX(-1);
}

/* ── Mode: perch on window frame ── */

.desk-westie[data-mode="perch-window"] {
  z-index: 12;
}

.desk-westie[data-mode="perch-window"] .desk-westie__sprite {
  animation: westie-perch-dangle 2.2s ease-in-out infinite;
}

.desk-westie[data-mode="perch-window"] .desk-westie__paw--fl,
.desk-westie[data-mode="perch-window"] .desk-westie__paw--fr {
  animation: westie-paw-dangle 1.6s ease-in-out infinite;
}

/* ── Mode: travel (walk / run) ── */

.desk-westie[data-mode="travel"][data-move="walk"] .desk-westie__sprite {
  animation: westie-walk-bob 0.55s ease-in-out infinite;
}

.desk-westie[data-mode="travel"][data-move="walk"] .desk-westie__shadow {
  animation: westie-shadow-walk 0.55s ease-in-out infinite;
}

.desk-westie[data-mode="travel"][data-move="run"] .desk-westie__sprite {
  animation: westie-run-bounce 0.38s ease-in-out infinite;
}

.desk-westie[data-mode="travel"][data-move="run"] .desk-westie__shadow {
  animation: westie-shadow-run 0.38s ease-in-out infinite;
}

.desk-westie[data-mode="travel"] .desk-westie__tail {
  animation: westie-tail-wag 0.48s ease-in-out infinite;
}

/* ── Mode: sleep beside title ── */

.desk-westie[data-mode="sleep-title"] {
  transform: translate(-50%, -50%) scale(1);
}

.desk-westie[data-mode="sleep-title"].desk-westie--visible {
  transform: translate(-50%, -50%) scale(1);
}

.desk-westie[data-mode="sleep-title"] .desk-westie__sprite {
  transform: rotate(-88deg) scale(0.88);
  transform-origin: center center;
}

.desk-westie[data-mode="sleep-title"][data-facing="left"] .desk-westie__sprite {
  transform: rotate(88deg) scale(0.88);
}

.desk-westie[data-mode="sleep-title"] .desk-westie__shadow {
  width: 54px;
  opacity: 0.55;
}

/* ── Mode: trash peek ── */

.desk-westie[data-mode="trash-peek"] {
  z-index: 12;
  transform: translate(-50%, -42%) scale(1);
}

.desk-westie[data-mode="trash-peek"].desk-westie--visible {
  transform: translate(-50%, -42%) scale(1);
}

.desk-westie[data-mode="trash-peek"] .desk-westie__clip {
  height: 30px;
  overflow: hidden;
}

.desk-westie[data-mode="trash-peek"] .desk-westie__sprite {
  transform: translateY(22px);
}

.desk-westie[data-mode="trash-peek"] .desk-westie__shadow {
  display: none;
}

.desk-westie[data-mode="trash-peek"] .desk-westie__sprite {
  animation: westie-trash-peek 2.8s ease-in-out infinite;
}

/* ── Mode: folder peek ── */

.desk-westie[data-mode="folder-peek"] {
  z-index: 12;
  transform: translate(-50%, -46%) scale(0.94);
}

.desk-westie[data-mode="folder-peek"].desk-westie--visible {
  transform: translate(-50%, -46%) scale(0.94);
}

.desk-westie[data-mode="folder-peek"] .desk-westie__clip {
  height: 28px;
  overflow: hidden;
}

.desk-westie[data-mode="folder-peek"] .desk-westie__sprite {
  transform: translateY(18px);
  animation: westie-folder-peek 2.4s ease-in-out infinite;
}

.desk-westie[data-mode="folder-peek"] .desk-westie__shadow {
  display: none;
}

/* ── Props: dog can & ball ── */

.desk-westie__props {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.desk-westie__can,
.desk-westie__ball {
  display: none;
  position: absolute;
}

.desk-westie__can {
  left: -16px;
  bottom: 3px;
  width: 20px;
  height: 15px;
  background: linear-gradient(180deg, #d64545 0%, #a93226 100%);
  border: 1px solid #7b241c;
  border-radius: 2px 2px 3px 3px;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.28);
}

.desk-westie__can::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 2px;
  right: 2px;
  height: 4px;
  background: linear-gradient(180deg, #ecf0f1, #bdc3c7);
  border: 1px solid #7f8c8d;
  border-radius: 1px 1px 0 0;
}

.desk-westie__can::after {
  content: "DOG";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-retro-pixel);
  font-size: 0.26rem;
  color: #ffe680;
  letter-spacing: -0.06em;
  padding-top: 2px;
}

.desk-westie[data-mode="eat-can"] .desk-westie__can {
  display: block;
}

.desk-westie[data-facing="left"][data-mode="eat-can"] .desk-westie__can {
  left: auto;
  right: -16px;
}

.desk-westie__ball {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff9c4, #ff7043 52%, #e64a19);
  border: 1px solid #bf360c;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.12);
}

.desk-westie[data-mode="play-ball"] .desk-westie__ball {
  display: block;
}

.desk-westie[data-facing="right"][data-mode="play-ball"] .desk-westie__ball {
  left: 22px;
  bottom: 5px;
}

.desk-westie[data-facing="left"][data-mode="play-ball"] .desk-westie__ball {
  right: 22px;
  bottom: 5px;
  left: auto;
}

/* ── Mode: eat can ── */

.desk-westie[data-mode="eat-can"] .desk-westie__sprite {
  animation: westie-eat-munch 0.52s ease-in-out infinite;
}

.desk-westie[data-mode="eat-can"] .desk-westie__tongue {
  opacity: 1;
}

.desk-westie[data-mode="eat-can"] .desk-westie__tail {
  animation: westie-tail-wag 0.7s ease-in-out infinite;
}

/* ── Mode: sniff ── */

.desk-westie[data-mode="sniff"] .desk-westie__sprite {
  animation: westie-sniff 1.15s ease-in-out infinite;
  transform-origin: center bottom;
}

/* ── Mode: play ball ── */

.desk-westie[data-mode="play-ball"] .desk-westie__sprite {
  animation: westie-play-bounce 0.62s cubic-bezier(0.34, 1.2, 0.64, 1) infinite;
}

.desk-westie[data-mode="play-ball"] .desk-westie__ball {
  animation: westie-ball-bounce 0.55s ease-in-out infinite;
}

.desk-westie[data-mode="play-ball"] .desk-westie__tongue {
  opacity: 1;
}

/* ── Mode: play ── */

.desk-westie[data-mode="play"] .desk-westie__sprite {
  animation: westie-play-bounce 0.62s cubic-bezier(0.34, 1.2, 0.64, 1) infinite;
}

.desk-westie__tail {
  transform-origin: 52px 44px;
}

.desk-westie[data-mode="play"] .desk-westie__tail {
  animation: westie-tail-wag 0.42s ease-in-out infinite;
}

.desk-westie[data-mode="play"] .desk-westie__tongue {
  opacity: 1;
}

.desk-westie[data-mode="play"] .desk-westie__shadow {
  animation: westie-shadow-play 0.62s ease-in-out infinite;
}

/* ── Mode: idle companion ── */

.desk-westie[data-mode="idle"] .desk-westie__tail {
  animation: westie-tail-wag 1.4s ease-in-out infinite;
}

.desk-westie[data-mode="idle"] .desk-westie__sprite {
  animation: westie-idle-breathe 3s ease-in-out infinite;
}

/* ── Sleep state (eyes + zzz) ── */

.desk-westie--sleeping .desk-westie__eye {
  transform: scaleY(0.2);
  transform-origin: center;
}

.desk-westie--sleeping .desk-westie__tongue {
  opacity: 0;
}

.desk-westie--sleeping[data-mode="trash-peek"] .desk-westie__sprite,
.desk-westie--sleeping[data-mode="sleep-title"] .desk-westie__sprite {
  animation: westie-sleep-breathe 2.8s ease-in-out infinite;
}

.desk-westie__thought {
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%) scale(0.75);
  padding: 2px 6px;
  font-family: var(--font-retro-pixel);
  font-size: 0.38rem;
  line-height: 1.4;
  color: #fff;
  background: rgba(0, 40, 28, 0.84);
  border: 1px solid rgba(90, 120, 100, 0.55);
  box-shadow: 0 0 4px rgba(45, 72, 58, 0.28);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
}

.desk-westie__thought--show {
  animation: westie-thought-pop 1.25s ease forwards;
}

.desk-westie__thought[data-kind="heart"] {
  background: rgba(120, 20, 60, 0.82);
  border-color: rgba(255, 170, 210, 0.45);
}

.desk-westie__thought[data-kind="sparkle"] {
  background: rgba(60, 40, 10, 0.82);
  border-color: rgba(255, 230, 140, 0.45);
}

.desk-westie__thought--sleep {
  opacity: 1;
  animation: westie-thought-float 2s ease-in-out infinite;
}

.desk-westie__thought--activity {
  opacity: 1;
  background: rgba(42, 48, 56, 0.88);
  border-color: rgba(90, 120, 100, 0.45);
  animation: westie-thought-float 1.8s ease-in-out infinite;
}

.desk-westie--petted .desk-westie__sprite {
  animation: westie-pet-bounce 0.48s cubic-bezier(0.34, 1.45, 0.64, 1) !important;
}

.desk-westie__tongue {
  opacity: 0;
  transition: opacity 0.2s ease;
}

@keyframes westie-perch-dangle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(2px); }
}

@keyframes westie-paw-dangle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@keyframes westie-trash-peek {
  0%, 100% { transform: translateY(22px); }
  45% { transform: translateY(19px); }
  55% { transform: translateY(19px); }
}

@keyframes westie-folder-peek {
  0%, 100% { transform: translateY(18px); }
  40% { transform: translateY(15px) rotate(-2deg); }
  60% { transform: translateY(15px) rotate(2deg); }
}

@keyframes westie-walk-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(-1deg); }
}

@keyframes westie-run-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes westie-shadow-walk {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(0.9); }
}

@keyframes westie-shadow-run {
  0%, 100% { transform: translateX(-50%) scale(0.92); }
  50% { transform: translateX(-50%) scale(0.68); }
}

@keyframes westie-play-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-14px) rotate(-4deg); }
  55% { transform: translateY(-6px) rotate(3deg); }
  75% { transform: translateY(-10px) rotate(-2deg); }
}

@keyframes westie-tail-wag {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(12deg); }
}

@keyframes westie-shadow-play {
  0%, 100% { transform: translateX(-50%) scale(1); }
  30% { transform: translateX(-50%) scale(0.72); }
  55% { transform: translateX(-50%) scale(0.88); }
}

@keyframes westie-idle-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025) translateY(-1px); }
}

@keyframes westie-sleep-breathe {
  0%, 100% { transform: inherit; }
  50% { filter: brightness(1.02); }
}

@keyframes westie-thought-float {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50% { transform: translateX(-50%) translateY(-4px); opacity: 1; }
}

@keyframes westie-thought-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  18% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.95); }
}

@keyframes westie-pet-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-10px) scale(1.08); }
}

@keyframes westie-eat-munch {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(3px) rotate(5deg); }
  55% { transform: translateY(1px) rotate(2deg); }
}

@keyframes westie-sniff {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(4px) rotate(8deg) scale(0.98); }
}

@keyframes westie-ball-bounce {
  0%, 100% { transform: translateY(0) translateX(0); }
  35% { transform: translateY(-10px) translateX(4px); }
  70% { transform: translateY(-2px) translateX(-3px); }
}

@media (max-width: 720px) {
  .desk-westie {
    width: 44px;
    height: 44px;
  }

  .desk-westie__clip,
  .desk-westie__sprite {
    width: 44px;
    height: 44px;
  }

  .desk-westie__shadow {
    width: 28px;
  }

  .desk-westie[data-mode="trash-peek"] .desk-westie__clip {
    height: 26px;
  }

  .desk-westie[data-mode="trash-peek"] .desk-westie__sprite {
    transform: translateY(18px);
  }

  .desk-westie[data-mode="folder-peek"] .desk-westie__clip {
    height: 24px;
  }

  .desk-westie[data-mode="folder-peek"] .desk-westie__sprite {
    transform: translateY(16px);
  }
}

/* ── Desktop recommendation (WeChat / mobile) ── */

.desktop-notice {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 10, 18, 0.72);
}

.desktop-notice[hidden] {
  display: none !important;
}

.desktop-notice__panel {
  width: min(100%, 22rem);
  border: 2px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #808080,
    4px 4px 0 rgba(0, 0, 0, 0.35);
  background: #c0c0c0;
  font-family: var(--font-ui, "Tahoma", "MS Sans Serif", sans-serif);
}

.desktop-notice__titlebar {
  padding: 0.35rem 0.55rem;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.desktop-notice__body {
  padding: 1rem 0.85rem 0.9rem;
  color: #111;
}

.desktop-notice__lead {
  margin: 0 0 0.55rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.desktop-notice__copy {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

.desktop-notice__copy--en {
  opacity: 0.72;
  margin-bottom: 0.85rem;
}

.desktop-notice__actions {
  display: flex;
  justify-content: flex-end;
}

.desktop-notice__btn {
  min-width: 6.5rem;
  padding: 0.35rem 0.75rem;
  border: 2px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #808080;
  background: #c0c0c0;
  color: #111;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.desktop-notice__btn:active {
  box-shadow:
    inset -1px -1px 0 #fff,
    inset 1px 1px 0 #808080;
}

/* ── Mobile swipe cards (≤960px) ── */

@media (max-width: 960px) {
  body.mobile-carousel .scroll-panel--project {
    min-height: auto;
    padding-bottom: clamp(2rem, 6vh, 3rem);
  }

  body.mobile-carousel .panel-line--body {
    margin-top: clamp(0.75rem, 2vh, 1.25rem);
  }

  body.mobile-carousel .retro-scene {
    display: block;
    min-height: 0;
    height: auto;
    max-height: none;
    gap: 0;
    padding-bottom: 0;
  }

  body.mobile-carousel .retro-scene__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
  }

  body.mobile-carousel .retro-scene__nav {
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 2px solid #000;
    box-shadow:
      inset 1px 1px 0 #fff,
      inset -1px -1px 0 #808080;
    background: #c0c0c0;
    color: #111;
    font-family: var(--win-face, "Tahoma", sans-serif);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
  }

  body.mobile-carousel .retro-scene__nav:disabled {
    opacity: 0.45;
    cursor: default;
  }

  body.mobile-carousel .retro-scene__nav:not(:disabled):active {
    box-shadow:
      inset -1px -1px 0 #fff,
      inset 1px 1px 0 #808080;
  }

  body.mobile-carousel .retro-scene__carousel {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 6vw;
    padding: 0.15rem 6vw 0.85rem;
    margin: 0;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
  }

  body.mobile-carousel .retro-scene__carousel::-webkit-scrollbar {
    display: none;
  }

  body.mobile-carousel .retro-scene__card {
    flex: 0 0 min(92vw, 480px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    height: auto;
  }

  body.mobile-carousel .retro-scene__card > * {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    animation: none !important;
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.28),
      0 0 0 1px rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: visible;
  }

  body.mobile-carousel .retro-scene__card > .retro-resize-pinned,
  body.mobile-carousel .retro-scene__card > .miniso-daily-row.retro-resize-pinned,
  body.mobile-carousel .retro-scene__card > .miniso-meme-slot.retro-resize-pinned,
  body.mobile-carousel .retro-scene__card > .cosmo-meme-slot.retro-resize-pinned,
  body.mobile-carousel .retro-scene__card > .about-meme-row.retro-resize-pinned,
  body.mobile-carousel .retro-scene__card > .retro-folder.retro-resize-pinned,
  body.mobile-carousel .retro-scene__card > .scene-sticker.retro-resize-pinned {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }

  body.mobile-carousel .retro-scene__counter {
    margin: 0;
    min-width: 3.5rem;
    text-align: center;
    font-family: var(--win-face, "Tahoma", sans-serif);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.82);
  }

  body.mobile-carousel .retro-scene__card .about-meme-row,
  body.mobile-carousel .retro-scene__card .cosmo-meme-slot,
  body.mobile-carousel .retro-scene__card .miniso-bottom-band,
  body.mobile-carousel .retro-scene__card .about-folders {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.mobile-carousel .miniso-bottom-band {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  body.mobile-carousel .miniso-bottom-band .miniso-meme-slot {
    transform: scale(0.82);
    transform-origin: center top;
  }

  body.mobile-carousel .retro-scene__card .retro-win,
  body.mobile-carousel .retro-scene__card .about-stack,
  body.mobile-carousel .retro-scene__card .about-folders,
  body.mobile-carousel .retro-scene__card .miniso-bottom-band {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible;
  }

  body.mobile-carousel .retro-scene__card .retro-win__chrome + * {
    max-height: none;
  }

  body.mobile-carousel .retro-scene__card .miniso-project {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    width: 100%;
  }

  body.mobile-carousel .retro-scene__card .miniso-project__media,
  body.mobile-carousel .retro-scene__card .miniso-project__details {
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
  }

  body.mobile-carousel .retro-scene__card .miniso-project__media .media-slot,
  body.mobile-carousel .retro-scene__card .miniso-project__frame {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
  }

  body.mobile-carousel .retro-scene__card .miniso-project__frame img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  body.mobile-carousel .retro-scene__card .miniso-project__details {
    margin-top: 0.35rem;
    overflow: visible;
  }

  body.mobile-carousel .retro-scene__card .miniso-project__row:not(.miniso-project__row--contribution) dt,
  body.mobile-carousel .retro-scene__card .miniso-project__row:not(.miniso-project__row--contribution) dd {
    white-space: normal;
  }

  body.mobile-carousel .retro-scene__card .media-slot img,
  body.mobile-carousel .retro-scene__card .miniso-album__frame img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  body.mobile-carousel .retro-scene__card .cosmo-explorer,
  body.mobile-carousel .retro-scene__card .cosmo-reader__body,
  body.mobile-carousel .retro-scene__card .miniso-list,
  body.mobile-carousel .retro-scene__card .education-content,
  body.mobile-carousel .retro-scene__card .about-notepad-body {
    max-height: none;
    overflow: visible;
  }

  body.mobile-carousel .retro-scene > .retro-win--miniso-doc.is-open,
  body.mobile-carousel .retro-scene > .retro-win--miniso-doc:not([hidden]) {
    position: fixed !important;
    inset: 0.75rem !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 10040;
  }

  body.mobile-carousel .about-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  body.mobile-carousel .about-folders__row {
    flex-wrap: wrap;
    justify-content: center;
  }
}