@font-face {
  font-family: "Geely Design Type";
  src: url("../fonts/GeelyDesignType-L.TTF") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Geely Design Type";
  src: url("../fonts/GeelyDesignType-R.TTF") format("truetype");
  font-weight: 400 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Geely Design Type";
  src: url("../fonts/GeelyDesignType-B.TTF") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: block;
}
:root {
  --ink: #24222d;
  --paper: #fff8e7;
  --panel: #fffafd;
  --blue: #2878db;
  --red: #e64b65;
  --green: #79d36f;
  --shadow: 5px 5px 0 rgba(36,34,45,.72);
  --hero-width: min(92vw, calc(88vh * 1.5));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Geely Design Type", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background: #ded2f6;
  overflow-x: hidden;
  cursor: 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='%23fff' stroke='%232866d8' stroke-width='1.4' d='M5 2l18 18-9 1.2 5.2 7.2-3.5 2.1-5.1-7.4-5.6 6z'/%3E%3Cpath fill='%23fff' d='M7 6l12 12-6.6.8 3.4 4.8-1 .6-3.8-5.3-4 4.3z'/%3E%3C/svg%3E") 5 2, auto;
}
body::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .1; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: soft-light; }
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  color: #2f5dff;
  background: #f1eee7;
  cursor: pointer;
  transition: opacity .62s ease, visibility .62s ease;
}
.boot-window {
  width: min(520px, calc(100vw - 42px));
  padding: 28px;
  border: 1.5px solid #2f5dff;
  border-radius: 7px;
  background: rgba(241,238,231,.92);
  box-shadow:
    0 0 12px rgba(255,255,255,.9),
    0 0 34px rgba(49,92,255,.2);
}
.boot-brand {
  margin: 0 0 18px;
  font: 900 16px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  letter-spacing: .04em;
  text-shadow:
    0 0 4px rgba(255,255,255,.96),
    0 0 18px rgba(114,178,255,.72);
}
.boot-monitor {
  min-height: 108px;
  padding: 18px;
  border: 1px solid rgba(47,93,255,.5);
  background: rgba(255,255,255,.16);
  font: 800 13px/1.7 "Geely Design Type", "Microsoft YaHei", sans-serif;
}
.boot-monitor p { margin: 0; }
.boot-cursor {
  display: inline-block;
  width: 10px;
  height: 18px;
  margin-right: 8px;
  background: #2f5dff;
  vertical-align: -4px;
  animation: bootBlink .82s steps(1, end) infinite;
}
.boot-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}
.boot-progress {
  height: 10px;
  border: 1px solid #2f5dff;
  overflow: visible;
}
.boot-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #2f5dff;
  transform-origin: left;
  transform: scaleX(.08);
}
body.boot-running .boot-progress span {
  animation: bootLoad 1.55s cubic-bezier(.68, 0, .18, 1) forwards;
}
.boot-percent {
  color: #2f5dff;
  font: 900 13px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  text-align: right;
  text-shadow:
    0 0 4px rgba(255,255,255,.96),
    0 0 12px rgba(255,255,255,.82),
    0 0 20px rgba(114,178,255,.72);
}
.boot-start {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  margin: 18px auto 0;
  padding: 0 18px;
  border: 1.5px solid #2f5dff;
  border-radius: 5px;
  color: #2f5dff;
  background: rgba(255,255,255,.16);
  font: 900 13px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  text-shadow:
    0 0 4px rgba(255,255,255,.96),
    0 0 12px rgba(255,255,255,.82);
  cursor: pointer;
}
.boot-start:hover {
  color: #fff;
  background: #3d63ff;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
}
.boot-start:active { filter: brightness(.9); }
body.boot-running .boot-start {
  opacity: .32;
  pointer-events: auto;
}
body.is-booting .desktop-bar {
  opacity: 0;
  visibility: hidden;
}
body.boot-shattering .boot-window {
  opacity: 0;
}
body.boot-complete .boot-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot-shard {
  position: fixed;
  z-index: 10000;
  width: 6px;
  height: 6px;
  pointer-events: none;
  image-rendering: pixelated;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(47,93,255,.45), 0 0 12px rgba(255,255,255,.88);
  animation: bootShard .82s cubic-bezier(.18,.78,.28,1) forwards;
}
.boot-shard.blue { background: #2f5dff; }
.boot-shard.cyan { background: #8bdcff; }
.boot-shard.paper { background: #f1eee7; }
@keyframes bootBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes bootLoad {
  from { transform: scaleX(.08); }
  to { transform: scaleX(1); }
}
@keyframes bootShard {
  from { transform: translate(0,0) rotate(0deg) scale(1); opacity: .96; }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.18); opacity: 0; }
}
a, button { color: inherit; font: inherit; cursor: inherit; }
h1,h2,h3,h4,p { margin-top: 0; }
.desktop-page { min-height: 100vh; overflow-x: hidden; overflow-y: auto; background: #f1eee7; }
.desktop-bar {
  height: 76px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(34px, 5.6vw, 86px);
  border: 0;
  background: transparent;
  pointer-events: none;
  isolation: isolate;
}
.desktop-bar::before {
  content: "";
  position: absolute;
  left: clamp(12px, 2.6vw, 38px);
  right: clamp(12px, 2.6vw, 38px);
  top: 0;
  height: calc(100% - 8px);
  z-index: 0;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.42)),
    rgba(241,238,231,.28);
  border: 1px solid rgba(255,255,255,.42);
  border-top: 0;
  box-shadow:
    0 12px 28px rgba(80,92,120,.08),
    inset 0 1px 0 rgba(255,255,255,.72),
    0 0 22px rgba(255,255,255,.38);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  pointer-events: none;
}
.desktop-bar > * {
  position: relative;
  z-index: 1;
}
.brand,
nav button,
nav a,
.language-switch button {
  color: #2f5dff;
  text-shadow:
    0 0 4px rgba(255,255,255,.96),
    0 0 12px rgba(255,255,255,.82),
    0 0 20px rgba(114,178,255,.72);
}
.brand {
  display: inline-flex;
  align-items: center;
  height: 25px;
  border: 0;
  background: transparent;
  text-decoration: none;
  font: 800 14px/1 "Geely Design Type", "Arial", "Microsoft YaHei", sans-serif;
  letter-spacing: .04em;
  pointer-events: auto;
  animation: none;
}
.brand-mark { display: none; }
.language-switch {
  position: absolute;
  z-index: 260;
  left: calc(50% - 36px);
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 48px 48px;
  width: 96px;
  height: 25px;
  border: 1px solid #2f5dff;
  border-radius: 3px 0 0 3px;
  overflow: visible;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 8px rgba(255,255,255,.42);
  pointer-events: auto;
  animation: none;
}
.language-switch button {
  display: grid;
  place-items: center;
  position: relative;
  border: 0;
  padding: 0;
  color: #2f5dff;
  background: transparent;
  font: 800 13px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  cursor: pointer;
}
.language-switch button[data-tooltip]::after,
.theme-toggle span[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 54%;
  top: calc(100% + 10px);
  z-index: 10000;
  min-width: 136px;
  padding: 7px 10px;
  border: 1px solid #2f5dff;
  border-radius: 5px;
  color: #2f5dff;
  background: rgba(241,238,231,.94);
  box-shadow:
    0 0 8px rgba(255,255,255,.86),
    0 0 18px rgba(100,163,255,.36);
  font: 900 12px/1.2 "Geely Design Type", "Microsoft YaHei", sans-serif;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.language-switch button[data-tooltip]:hover::after,
.theme-toggle span[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.language-switch button:not(.is-active):hover {
  color: #fff;
  text-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 18px rgba(80,150,255,.95),
    0 0 34px rgba(255,240,132,.72);
}
.language-switch button:first-child {
  color: #2f5dff;
  background: transparent;
  text-shadow:
    0 0 4px rgba(255,255,255,.96),
    0 0 12px rgba(255,255,255,.82);
}
.language-switch button.is-active {
  color: #fff;
  background: #3d63ff;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
}
html.theme-night,
html.theme-night body,
html.theme-night .desktop-stage,
html.theme-night .scroll-story,
html.theme-night .reference-section,
html.theme-night body.work-detail-page,
html.theme-night body.reference-about-page {
  background: #151823;
}
.theme-toggle {
  position: absolute;
  z-index: 260;
  left: calc(50% + 12px);
  top: 55%;
  display: grid;
  grid-template-columns: 36px 36px;
  width: 72px;
  height: 25px;
  padding: 0;
  border: 1px solid #2f5dff;
  border-left: 0;
  border-radius: 0 3px 3px 0;
  color: #2f5dff;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 8px rgba(255,255,255,.42);
  pointer-events: none;
  transform: translateY(-50%);
  animation: none;
}
.language-switch button:active,
.theme-toggle:active {
  filter: brightness(.9);
}
.theme-toggle span {
  position: relative;
  display: grid;
  place-items: center;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  color: #2f5dff;
  font: 900 13px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  text-shadow:
    0 0 4px rgba(255,255,255,.96),
    0 0 12px rgba(255,255,255,.82),
    0 0 20px rgba(114,178,255,.72);
  line-height: 0;
}
.theme-icon svg {
  width: 13px;
  height: 13px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-icon-moon svg {
  transform: translateX(-1px) translateY(.5px) scale(1.12);
  transform-origin: 50% 50%;
}
.theme-toggle span:first-child {
  color: #fff;
  background: #3d63ff;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
}
.theme-toggle span:last-child {
  background: transparent;
}
.menu-toggle {
  display: none;
  position: absolute;
  z-index: 260;
  min-height: 25px;
  padding: 0 14px;
  border: 1.5px solid #2f5dff;
  border-radius: 5px;
  color: #2f5dff;
  background: rgba(241,238,231,.72);
  box-shadow:
    0 0 8px rgba(255,255,255,.78),
    0 0 18px rgba(100,163,255,.36);
  font: 900 13px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  pointer-events: auto;
}
.theme-toggle:hover span {
  color: #fff;
  text-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 18px rgba(80,150,255,.95),
    0 0 34px rgba(255,240,132,.72);
}
.theme-toggle:hover span:first-child,
body.theme-night .theme-toggle:hover span:last-child {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
}
body.theme-night,
html.theme-night body,
body.theme-night .desktop-stage,
html.theme-night .desktop-stage,
body.theme-night .scroll-story,
html.theme-night .scroll-story,
body.theme-night .reference-section,
html.theme-night .reference-section,
body.theme-night.work-detail-page,
html.theme-night body.work-detail-page,
body.theme-night.reference-about-page,
html.theme-night body.reference-about-page {
  background: #151823;
}
body.theme-night .theme-toggle span:first-child,
html.theme-night .theme-toggle span:first-child {
  color: #2f5dff;
  background: transparent;
  text-shadow:
    0 0 4px rgba(255,255,255,.96),
    0 0 12px rgba(255,255,255,.82),
    0 0 20px rgba(114,178,255,.72);
}
body.theme-night .theme-toggle span:last-child,
html.theme-night .theme-toggle span:last-child {
  color: #fff;
  background: #3d63ff;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
}
nav { display: flex; align-items: center; gap: clamp(34px, 5vw, 78px); pointer-events: auto; animation: none; transform: none; }
nav button, nav a {
  border: 0;
  background: transparent;
  text-decoration: none;
  font: 900 15px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  letter-spacing: .02em;
}
nav button:hover, nav a:hover, .brand:hover {
  color: #fff;
  text-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 18px rgba(80,150,255,.95),
    0 0 34px rgba(255,240,132,.72);
}
nav button::after,
nav a::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: 6px;
  background: currentColor;
  box-shadow: 0 0 8px rgba(255,255,255,.9);
  transition: width .22s ease;
}
nav button:hover::after,
nav a:hover::after { width: 100%; }
@keyframes navFloat { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.language-switch { transform: translate(-50%, -50%); }
@keyframes languageFloat { 0%, 100% { transform: translateX(-50%) translateY(-2px); } 50% { transform: translateX(-50%) translateY(4px); } }
@keyframes themeFloat { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.language-switch { animation: none; }
.desktop-stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #f1eee7;
  isolation: isolate;
}
.hero-window,
.desktop-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hero-width);
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
  border-radius: 26px;
}
.hero-window {
  z-index: -1;
  border: 1px solid rgba(255,255,255,.62);
  background: transparent;
  box-shadow:
    0 18px 48px rgba(116,104,86,.12),
    0 0 0 8px rgba(241,238,231,.18);
}
.desktop-bg {
  z-index: -2;
  overflow: hidden;
  background: url("../images/desktop-bg-clean.png") center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
}
.connection-lines {
  position: absolute;
  z-index: 18;
  pointer-events: none;
  overflow: visible;
}
.connection-lines path {
  fill: none;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.9));
}
.connection-dot {
  fill: rgba(255,70,86,.82);
  stroke: rgba(255,255,255,.78);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.85));
}
.center-dot {
  fill: rgba(255,70,86,.92);
}
.mac-controls {
  position: absolute;
  right: 22px;
  top: 18px;
  z-index: 130;
  display: flex;
  gap: 10px;
}
.mac-controls span {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  box-shadow:
    inset -3px -4px 7px rgba(120,80,120,.22),
    inset 4px 4px 8px rgba(255,255,255,.88),
    0 0 8px rgba(255,255,255,.82);
}
.mac-controls span:nth-child(1) { background: radial-gradient(circle at 32% 28%, #fff7f2, #ff6f87 45%, #e84865); }
.mac-controls span:nth-child(2) { background: radial-gradient(circle at 32% 28%, #fff8df, #ffd76b 45%, #eeb33f); }
.mac-controls span:nth-child(3) { background: radial-gradient(circle at 32% 28%, #f3fff1, #8be680 45%, #45bf70); }
.decor-layer { position: absolute; z-index: 12; display: block; object-fit: contain; pointer-events: none; user-select: none; image-rendering: auto; filter: drop-shadow(0 7px 10px rgba(40,80,120,.16)); }
.desktop-layer { position: absolute; z-index: 20; display: block; padding: 0; border: 0; background: transparent; touch-action: none; user-select: none; filter: drop-shadow(0 8px 12px rgba(40,80,120,.24)); }
.desktop-layer img { display: block; width: 100%; height: 100%; pointer-events: none; object-fit: fill; }
.desktop-layer .asset-frame { position: relative; z-index: 2; }
.asset-slot { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; background: #000; }
.asset-slot img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.desktop-layer.is-armed { filter: brightness(1.08) drop-shadow(0 0 12px rgba(255,255,255,.9)); }
.desktop-layer.is-dragging { z-index: 140; filter: brightness(1.08) drop-shadow(0 14px 18px rgba(30,70,130,.36)); }
.desktop-layer.is-dragging.is-over-trash { opacity: .46; filter: brightness(1.04) drop-shadow(0 0 10px rgba(255,255,255,.72)); }
.desktop-layer.is-released { animation: releaseBounce .42s cubic-bezier(.2,1.35,.34,1); }
.desktop-layer.is-trashed { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s; }
.desktop-layer.is-restoring {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  animation: layerRestoreFade .62s ease var(--restore-delay, 0ms) forwards;
}
.layer-trash.is-trash-target { z-index: 145; filter: brightness(1.15) drop-shadow(0 0 12px rgba(55, 101, 255, .78)) drop-shadow(0 10px 16px rgba(40,80,120,.3)); }
.trash-reset-tip {
  position: absolute;
  z-index: 150;
  display: block;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  color: var(--blue);
  background: transparent;
  text-shadow: 0 0 8px rgba(55, 101, 255, .78), 0 0 18px rgba(55, 101, 255, .34);
  box-shadow: none;
  font-family: inherit;
  font-size: clamp(8px, .62vw, 9px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(4px);
  transition: color .16s ease, opacity .2s ease, transform .2s ease, text-shadow .16s ease;
}
.trash-reset-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.trash-reset-tip:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 22px rgba(55,101,255,.58);
}
@keyframes releaseBounce { 0% { scale: 1; } 48% { scale: 1.035; } 100% { scale: 1; } }
@keyframes layerRestoreFade {
  0% { opacity: 0; translate: 0 8px; scale: .98; filter: blur(1px) drop-shadow(0 0 0 rgba(55,101,255,0)); }
  100% { opacity: 1; translate: 0 0; scale: 1; filter: drop-shadow(0 8px 12px rgba(40,80,120,.24)); }
}
.layer-window-left { left: 4.5%; top: 12.4%; width: 18.75%; height: 31.15%; }
.layer-window-top { left: 80.7%; top: 1.66%; width: 12.83%; height: 22.66%; }
.layer-paper { left: 82.2%; top: 32.2%; width: 7.75%; height: 12.5%; }
.layer-window-mid { left: 80.01%; top: 42.19%; width: 14.84%; height: 19.24%; }
.layer-trash { left: 58.2%; top: 78.8%; width: 5.6%; height: 10.15%; }
.layer-photo-right { left: 66.99%; top: 74.71%; width: 10.35%; height: 13.57%; transform: rotate(15deg); transform-origin: 50% 50%; }
.layer-photo-left { left: 17.06%; top: 74.71%; width: 10.68%; height: 19.34%; transform: rotate(10deg); transform-origin: 50% 50%; }
.layer-window-left .asset-slot { left: 3.84%; top: 11.24%; width: 92.16%; height: 79.01%; }
.layer-window-top .asset-slot { left: 4.36%; top: 11.78%; width: 90.26%; height: 75.33%; }
.layer-window-mid .asset-slot { left: 3.4%; top: 20.89%; width: 92.77%; height: 56.89%; }
.layer-photo-left .asset-slot {
  left: 7.99%;
  top: 7.94%;
  width: 84.9%;
  height: 75.23%;
  transform: none;
  transform-origin: 50% 50%;
}
.layer-photo-right .asset-slot {
  left: 8.24%;
  top: 6.75%;
  width: 83.66%;
  height: 72.88%;
  transform: none;
  transform-origin: 50% 50%;
}
.portfolio-logo-layer { position: absolute; z-index: 80; left: 0; right: 0; margin-inline: auto; top: 32.5%; width: 82%; transform: translateY(-8px); transform-origin: 50% 50%; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 0 8px rgba(255,255,255,.9)) drop-shadow(0 0 22px rgba(255,255,255,.76)) drop-shadow(0 12px 28px rgba(116,104,86,.14)); animation: portfolioFloat 4.8s ease-in-out infinite; will-change: transform, filter; }
.portfolio-logo-layer:hover { filter: drop-shadow(0 0 10px rgba(255,255,255,.96)) drop-shadow(0 0 28px rgba(255,255,255,.9)) drop-shadow(0 14px 30px rgba(116,104,86,.16)); }
.portfolio-logo-layer:focus-visible { outline: 2px solid var(--blue); outline-offset: 8px; }
@keyframes portfolioFloat { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(10px); } }
.desktop-window {
  position: absolute;
  z-index: 90;
  left: 8%;
  top: 11%;
  width: min(680px, 72vw);
  max-height: min(680px, 76vh);
  display: none;
  border: 3px solid var(--ink);
  background: rgba(255,250,253,.96);
  box-shadow: var(--shadow), 0 18px 40px rgba(30,70,120,.28);
}
.desktop-window.active { display: block; }
.desktop-window:nth-of-type(2) { left: 18%; top: 16%; }
.resume-window { left: 23%; top: 8%; width: min(760px, 76vw); }
.contact-window { left: 54%; top: 20%; width: min(420px, 42vw); }
.trash-window { left: 10%; top: 48%; width: min(390px, 44vw); }
.window-titlebar { height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 0 12px; border-bottom: 3px solid var(--ink); color: #fff; background: linear-gradient(90deg, #1f65d3, #8cc7ff); font: 900 13px/1 "Courier New", monospace; }
.window-titlebar div { display: flex; gap: 5px; }
.window-titlebar button { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 2px solid #315d91; background: #fffaf0; color: var(--ink); font-weight: 900; line-height: 1; }
.window-content { padding: 22px; max-height: calc(min(680px, 76vh) - 34px); overflow: auto; }
.window-content h1 { margin-bottom: 4px; font-size: clamp(34px, 5vw, 58px); line-height: 1; }
.window-content h1 small { font-size: 14px; font-weight: 500; }
.window-content h2 { margin: 18px 0 12px; font-size: 28px; }
.window-content h2 small { float: right; margin-top: 10px; font: 900 11px/1 "Geely Design Type", sans-serif; }
.window-content h3 { position: relative; margin: 14px 0 6px; padding-left: 14px; font-size: 20px; }
.window-content h3::before { content: ""; position: absolute; left: 0; top: 3px; width: 4px; height: 22px; background: #f0113f; }
.window-content p, .window-content li, .window-content time { color: #555; font-size: 14px; line-height: 1.65; }
.role { margin-bottom: 16px; font-size: 16px; letter-spacing: 3px; color: var(--ink); }
.contact-line { display: flex; flex-wrap: wrap; gap: 16px 34px; margin: 16px 0; color: #777; }
.file-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.file-grid a, .file-grid button, .xp-button { display: grid; place-items: center; min-height: 72px; padding: 12px; border: 3px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--ink); text-decoration: none; font-weight: 900; }
.resume-scroll article { padding-bottom: 10px; border-bottom: 1px dashed rgba(36,34,45,.24); }
.cursor-particle { position: fixed; z-index: 1000; width: 6px; height: 6px; pointer-events: none; image-rendering: pixelated; background: #fff; box-shadow: 0 0 0 1px rgba(40,118,216,.55), 0 0 10px rgba(255,255,255,.9); animation: particleFade .62s ease-out forwards; }
.cursor-particle.blue { background: #7fd2ff; }
.cursor-particle.yellow { background: #fff2a6; }
@keyframes particleFade { from { transform: translate(0,0) scale(1); opacity: .95; } to { transform: translate(var(--dx), var(--dy)) scale(.15); opacity: 0; } }
.logo-shard { position: fixed; z-index: 1001; width: 5px; height: 5px; pointer-events: none; image-rendering: pixelated; background: rgba(255,255,255,.96); box-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 18px rgba(126,210,255,.75); animation: logoShard .9s ease-out forwards; }
.logo-shard.blue { background: #8bdcff; }
.logo-shard.yellow { background: #fff1a5; }
@keyframes logoShard { from { transform: translate(0,0) rotate(0deg) scale(1); opacity: .95; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.2); opacity: 0; } }
.site-footer { display: none; }

.content-section {
  position: relative;
  min-height: 100vh;
  padding: clamp(96px, 13vh, 150px) clamp(22px, 7vw, 100px);
  color: #1f2d64;
  background:
    linear-gradient(180deg, rgba(119,201,255,.96), rgba(229,247,255,.98) 26%, rgba(255,255,255,.98));
}
.content-section + .content-section {
  border-top: 1px solid rgba(47,93,255,.16);
}
.section-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}
.section-kicker {
  margin-bottom: 18px;
  color: #2f5dff;
  font: 900 14px/1 "Geely Design Type", sans-serif;
  letter-spacing: .16em;
  text-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 22px rgba(93,161,255,.78);
}
.content-section h2 {
  margin-bottom: 28px;
  color: #1f2d64;
  font-size: clamp(38px, 6vw, 86px);
  line-height: .98;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(255,255,255,.9);
}
.content-section h2 small {
  display: block;
  margin-top: 10px;
  font-size: clamp(14px, 1.5vw, 20px);
  font-weight: 500;
}
.content-section p {
  max-width: 760px;
  color: #385175;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.9;
}
.project-strip,
.resume-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 42px;
}
.resume-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-strip article,
.resume-grid article,
.contact-card {
  padding: 24px;
  border: 2px solid rgba(47,93,255,.44);
  background: rgba(255,255,255,.68);
  box-shadow: 0 0 18px rgba(255,255,255,.8), 6px 6px 0 rgba(47,93,255,.12);
  backdrop-filter: blur(8px);
}
.project-strip span {
  color: #2f5dff;
  font: 900 13px/1 "Geely Design Type", sans-serif;
}
.project-strip h3,
.resume-grid h3 {
  margin: 12px 0 8px;
  font-size: 24px;
}
.project-strip p,
.resume-grid p,
.contact-card p {
  font-size: 14px;
  line-height: 1.75;
}
.compact-strip {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}
.compact-strip article {
  padding: 18px;
}
.split-section {
  display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(0, 1fr);
  gap: clamp(34px, 7vw, 100px);
  align-items: start;
}

/* Shared simple pages */
body:not(.desktop-page) { background: #fff; overflow-x: hidden; }
.site-header { height: 78px; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(24px,5vw,54px); border-bottom: 2px solid var(--ink); background: rgba(255,250,253,.95); }
.site-header nav a { text-decoration: none; font-size: 20px; font-weight: 900; }
.about-page {
  min-height: 100vh;
  color: #1f2d64;
  background:
    radial-gradient(circle at 78% 14%, rgba(139,220,255,.32), transparent 30%),
    linear-gradient(180deg, #f3f0e9 0%, #eaf8ff 100%);
}
.floating-header {
  position: sticky;
  top: 0;
  z-index: 80;
  border: 0;
  background: rgba(243,240,233,.78);
  backdrop-filter: blur(10px);
}
.about-document {
  padding: clamp(120px, 16vh, 180px) clamp(22px, 7vw, 100px);
}
.about-document h1 {
  margin: 0 0 14px;
  color: #1f2d64;
  font-size: clamp(52px, 8vw, 118px);
  line-height: .92;
}
.about-document h1 small {
  display: block;
  margin-top: 12px;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 500;
}
.about-document p {
  color: #385175;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.9;
}
.about-block {
  margin-top: clamp(72px, 12vh, 130px);
}
.resume-sheet { display: grid; grid-template-columns: minmax(220px,31%) minmax(0,1fr); gap: clamp(28px,5vw,58px); padding: clamp(44px,7vw,78px) clamp(18px,5vw,72px); background: #fff; }
.resume-sidebar { border-right: 2px solid #1f1f1f; padding-right: clamp(18px,4vw,42px); }
.resume-logo { margin-bottom: 60px; font: 800 13px/1 "Courier New", monospace; }
.resume-sidebar h1 { margin-bottom: 2px; font-size: 26px; line-height: 1.1; }
.resume-sidebar h1 small { margin-left: 8px; font-size: 11px; font-weight: 400; }
.resume-sidebar section { margin-top: 58px; }
.resume-sidebar h2, .block-head h2 { margin-bottom: 16px; font-size: 22px; line-height: 1.1; }
.resume-sidebar h2 small { float: right; margin-top: 7px; font: 800 10px/1 "Geely Design Type", sans-serif; }
.resume-sidebar p, .resume-content p, .resume-content li { color: #555; font-size: 13px; line-height: 1.55; }
.resume-content { padding-top: 22px; }
.resume-block { margin-top: 34px; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.block-head span { font: 900 11px/1 "Geely Design Type", sans-serif; }
.resume-item { display: grid; grid-template-columns: minmax(0,1fr) 120px; gap: 20px; margin: 14px 0; }
.resume-item h3, .experience-title h3 { position: relative; margin: 0 0 8px; padding-left: 14px; font-size: 20px; }
.resume-item h3::before, .experience-title h3::before { content: ""; position: absolute; left: 0; top: 3px; width: 4px; height: 22px; background: #f0113f; }
.resume-item time, .experience-title time { text-align: right; font-weight: 900; font-size: 17px; line-height: 1.8; }
.award-list p { display: grid; grid-template-columns: minmax(0,1fr) 110px; gap: 18px; margin: 4px 0; }
.experience-title { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 18px; align-items: start; }
.single-page { min-height: calc(100vh - 78px); }
.full-width { grid-column: 1 / -1; }
.inline-links { justify-content: flex-start; margin: 10px 0 24px; }

@media (max-width: 1040px) {
  .desktop-bar {
    height: 104px;
    padding: 18px 20px;
    align-items: flex-start;
  }
  .brand {
    position: absolute;
    left: 20px;
    top: 18px;
    height: 25px;
    align-items: center;
    animation: none;
    transform: none;
  }
  .language-switch {
    left: auto;
    right: 92px;
    top: 18px;
    transform: none;
  }
  .theme-toggle {
    left: auto;
    right: 20px;
    top: 18px;
    transform: none;
  }
  .desktop-bar nav {
    position: absolute;
    top: 62px;
    left: 20px;
    right: 20px;
    min-height: 22px;
    max-width: none;
    align-items: center;
    justify-content: space-around;
    animation: none;
    transform: none;
  }
  .desktop-bar nav button,
  .desktop-bar nav a,
  .reference-header nav a {
    font-size: 12px;
  }
  .reference-header {
    height: 104px;
    padding: 18px 20px;
    align-items: flex-start;
  }
  .reference-header .brand {
    position: absolute;
    left: 20px;
    top: 18px;
    height: 25px;
    align-items: center;
  }
  .reference-header .language-switch {
    left: auto;
    right: 92px;
    top: 18px;
    transform: none;
  }
  .reference-header .theme-toggle {
    left: auto;
    right: 20px;
    top: 18px;
    transform: none;
  }
  .reference-header nav {
    position: absolute;
    top: 62px;
    left: 20px;
    right: 20px;
    min-height: 22px;
    max-width: none;
    align-items: center;
    justify-content: space-around;
    animation: none;
    transform: none;
  }
}

@media (max-width: 900px) {
  :root { --hero-width: min(94vw, calc(78vh * 1.5)); }
  .desktop-bar { height: 104px; padding: 18px 20px; align-items: flex-start; }
  .brand {
    position: absolute;
    left: 20px;
    top: 18px;
    height: 25px;
    align-items: center;
    animation: none;
    transform: none;
  }
  .language-switch {
    left: auto;
    right: 92px;
    top: 18px;
    transform: none;
  }
  .theme-toggle {
    left: auto;
    right: 20px;
    top: 18px;
    transform: none;
  }
  .site-header { height: auto; min-height: 78px; align-items: flex-start; flex-direction: column; padding-block: 14px; }
  nav { gap: clamp(10px, 3vw, 16px); flex-wrap: wrap; }
  nav button, nav a { font-size: 18px; }
  .desktop-bar nav {
    position: absolute;
    top: 62px;
    left: 20px;
    right: 20px;
    min-height: 22px;
    max-width: none;
    align-items: center;
    justify-content: space-around;
    animation: none;
    transform: none;
  }
  .desktop-bar nav button,
  .desktop-bar nav a,
  .reference-header nav a { font-size: 12px; }
  .desktop-stage { height: 100vh; }
  .hero-window,
  .desktop-bg { width: min(94vw, calc(78vh * 1.5)); border-radius: 20px; }
  .project-strip,
  .resume-grid,
  .split-section { grid-template-columns: 1fr; }
  .content-section { padding: 92px clamp(18px, 4.5vw, 42px); }
  .reference-section { padding: clamp(70px, 9vh, 112px) 0; }
  .works-section.reference-section { padding-top: clamp(104px, 13vh, 150px); }
  .reference-inner { width: min(var(--hero-width), calc(100% - 36px)); }
  .works-grid { gap: 34px 22px; }
  .play-board { margin-top: 24px; min-height: 560px; }
  .contact-icons { gap: 28px; }
  .desktop-window, .resume-window, .contact-window, .trash-window { left: 5% !important; top: 8% !important; width: 90vw; max-height: 78%; }
  .file-grid { grid-template-columns: 1fr; }
  .resume-sheet { grid-template-columns: 1fr; }
  .resume-sidebar { border-right: 0; border-bottom: 2px solid #1f1f1f; padding-right: 0; padding-bottom: 28px; }
}
@media (max-width: 620px) {
  :root { --hero-width: 94vw; }
  .desktop-bar { height: 104px; padding: 18px 20px; }
  .brand {
    position: absolute;
    left: 20px;
    top: 18px;
    height: 22px;
    font-size: 12px;
    align-items: center;
    animation: none;
    transform: none;
  }
  .language-switch {
    left: auto;
    right: 92px;
    top: 18px;
    grid-template-columns: 48px 48px;
    width: 96px;
    height: 22px;
    animation: none;
    transform: none;
  }
  .theme-toggle {
    left: auto;
    right: 20px;
    top: 18px;
    width: 72px;
    height: 22px;
    grid-template-columns: 36px 36px;
    animation: none;
    transform: none;
  }
  .desktop-bar nav {
    position: absolute;
    top: 62px;
    left: 20px;
    right: 20px;
    min-height: 22px;
    max-width: none;
    align-items: center;
    justify-content: space-around;
    animation: none;
    transform: none;
  }
  .desktop-stage { height: 100vh; }
  .hero-window,
  .desktop-bg { width: 94vw; border-radius: 16px; }
  .mac-controls { right: 14px; top: 12px; gap: 7px; }
  .mac-controls span { width: 12px; height: 12px; }
  .content-section { padding: 78px 16px; }
  .content-section h2 { font-size: 38px; }
  .reference-section { padding: 58px 0; }
  .works-section.reference-section { padding-top: 88px; }
  .reference-inner { width: calc(100% - 28px); }
  .path-button,
  .back-top { min-height: 32px; padding: 0 14px; font-size: 17px; }
  .works-grid { gap: 24px; margin-top: 18px; }
  .work-card h2 { margin-top: 10px; font-size: 14px; }
  .work-card p { font-size: 12px; }
  .play-board { margin-top: 20px; min-height: 460px; background-size: 18px 18px; }
  .contact-icons { gap: 20px; margin: 22px 0 18px; }
  .contact-icons span { font-size: 44px; }
  .portfolio-logo-layer { top: 32.5%; width: 82%; }
  .layer-window-left { width: 28%; }
  .layer-window-top { width: 19%; left: 78%; }
  .layer-paper { width: 14%; left: 79%; }
  .layer-window-mid { width: 24%; left: 72%; }
  .layer-trash { width: 13%; }
  .layer-photo-left { width: 18%; }
  .layer-photo-right { width: 17%; }
  .window-content { padding: 16px; }
  .resume-item, .experience-title, .award-list p { grid-template-columns: 1fr; }
  .resume-item time, .experience-title time { text-align: left; }
}

/* Reference-style lower sections, keeping the original desktop hero unchanged */
.scroll-story {
  position: relative;
  background: #f1eee7;
}
.reference-section {
  position: relative;
  min-height: 100vh;
  padding: clamp(96px, 13vh, 150px) 0;
  color: #315cff;
  background: #f1eee7;
  overflow: hidden;
  --section-visibility: 0;
}
.reference-section::before {
  display: none;
}
.reference-section::after {
  display: none;
}
.works-section.reference-section {
  margin-top: -2px;
  padding-top: clamp(136px, 18vh, 210px);
  background: #f1eee7;
}
.reference-section + .reference-section { border-top: 0; }
.reference-inner {
  position: relative;
  z-index: 2;
  width: var(--hero-width);
  margin: 0 auto;
  padding-right: 0;
}
.path-button,
.back-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 22px;
  border: 1.5px solid #315cff;
  border-radius: 7px;
  color: #315cff;
  background: rgba(241,238,231,.72);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}
.back-top-icon {
  width: 17px;
  height: 17px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.9))
    drop-shadow(0 0 10px rgba(114,178,255,.45));
}
.path-button.wide { max-width: 100%; line-height: 1.25; }
.path-button.is-disabled {
  opacity: .34;
  cursor: default;
  pointer-events: none;
  user-select: none;
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 32px;
  margin-top: 24px;
}
.work-card {
  position: relative;
  display: block;
  color: #315cff;
  text-align: center;
  text-decoration: none;
  transition: filter .28s ease;
}
.work-card:hover {
  animation: selectedTilt 1.65s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(49,92,255,.34));
}
.work-card:hover .blue-placeholder {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.72) inset,
    0 0 24px rgba(49,92,255,.42),
    0 18px 34px rgba(49,92,255,.22);
  filter: saturate(1.1) brightness(1.04);
}
.work-card:hover .blue-placeholder.work-thumb {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.72) inset,
    0 12px 22px rgba(49,92,255,.12);
  filter: none;
}
.work-card:hover h2,
.work-card:hover p {
  text-shadow: 0 0 12px rgba(49,92,255,.42);
}
.blue-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1.64 / 1;
  border-radius: 10px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(135deg, #2347ff 0%, #4c7dff 54%, #78e3ff 100%);
  font: 900 clamp(48px, 8vw, 96px)/1 "Geely Design Type", sans-serif;
  letter-spacing: .05em;
  transition: box-shadow .28s ease, filter .28s ease;
}
.blue-placeholder.work-thumb {
  overflow: hidden;
  background: #f1eee7;
}
.blue-placeholder.work-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  image-rendering: auto;
  filter: none;
}
.blue-placeholder.work-thumb.shanshui-thumb img {
  height: 138%;
  object-position: center top;
}
.blue-placeholder.work-thumb.catshroom-thumb img {
  object-position: center top;
}
.catshroom-thumb-title {
  position: absolute;
  left: 50%;
  top: 7%;
  z-index: 2;
  width: 98%;
  color: #fff;
  font: 900 clamp(30px, 3.6vw, 52px)/.86 "Geely Design Type", "Arial Black", sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(0,0,0,.45),
    0 0 12px rgba(40,255,156,.46);
  transform: translateX(-50%);
  pointer-events: none;
}
.blue-placeholder.work-thumb.catshroom-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(241,238,231,.08), rgba(241,238,231,.08)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px);
  backdrop-filter: blur(.35px) saturate(.92);
  mix-blend-mode: soft-light;
}
.work-card.is-updating .blue-placeholder::after {
  content: "持续更新中...";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(49,92,255,.76);
  font: 900 clamp(20px, 3vw, 38px)/1.2 "Geely Design Type", "Microsoft YaHei", sans-serif;
  text-shadow: 0 0 12px rgba(255,255,255,.82);
  opacity: 0;
  transition: opacity .2s ease;
}
.work-card.is-updating:hover .blue-placeholder::after {
  opacity: 1;
}
.work-card h2 {
  margin: 14px 0 2px;
  color: #315cff;
  font-size: 16px;
  line-height: 1.2;
  text-shadow: none;
}
.work-card p,
.section-note {
  margin: 0;
  color: #315cff;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
}
.section-note {
  max-width: 760px;
  margin-top: 24px;
  font-size: 14px;
}
.play-board {
  position: relative;
  min-height: 640px;
  margin-top: 34px;
  border: 1.5px solid rgba(49,92,255,.56);
  background-image:
    linear-gradient(rgba(49,92,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49,92,255,.16) 1px, transparent 1px);
  background-size: 22px 22px;
  overflow: hidden;
}
.play-card {
  position: absolute;
  display: grid;
  place-items: center;
  width: 260px;
  aspect-ratio: 1.4;
  padding: 0;
  border: 1.5px solid #315cff;
  color: #fff;
  background: #315cff;
  box-shadow: 0 16px 20px rgba(49,92,255,.12);
  font: 900 18px/1.35 "Geely Design Type", "Microsoft YaHei", sans-serif;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
.play-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.play-card span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  text-shadow: 0 2px 10px rgba(20,45,160,.34);
  background: rgba(49,92,255,.08);
}
.play-card:hover {
  animation: selectedTilt 1.65s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(49,92,255,.38));
}
.card-a { left: 8%; top: 16%; --card-rot: 7deg; transform: rotate(var(--card-rot)); }
.card-b { left: 34%; top: 8%; --card-rot: -5deg; transform: rotate(var(--card-rot)); }
.card-c { right: 6%; top: 18%; --card-rot: 4deg; transform: rotate(var(--card-rot)); }
.card-d { left: 18%; bottom: 10%; --card-rot: -13deg; transform: rotate(var(--card-rot)); }
.card-e { right: 18%; bottom: 13%; --card-rot: 8deg; transform: rotate(var(--card-rot)); }
@keyframes selectedTilt {
  0%, 100% { transform: translateY(-1px) rotate(calc(var(--card-rot, 0deg) - .32deg)); }
  38% { transform: translateX(-1.4px) translateY(-2px) rotate(calc(var(--card-rot, 0deg) + .7deg)); }
  72% { transform: translateX(1.4px) translateY(-1.2px) rotate(calc(var(--card-rot, 0deg) - .52deg)); }
}
.contact-section.reference-section {
  min-height: auto;
  padding-bottom: clamp(42px, 7vh, 76px);
}
.contact-inner {
  min-height: 240px;
  padding-bottom: 24px;
}
.contact-icons {
  display: flex;
  gap: clamp(80px, 10vw, 150px);
  margin: 28px 0 22px;
}
.contact-section .back-top {
  position: relative;
  z-index: 5;
  margin-top: 6px;
}
.contact-section .back-top.reveal-item {
  opacity: 1;
  transform: none;
}
.contact-section .back-top.reveal-item.is-faded,
.contact-section .back-top.reveal-item.is-visible {
  opacity: 1;
  transform: none;
}
.contact-icons a {
  display: grid;
  grid-template-rows: 68px auto;
  gap: 8px;
  justify-items: center;
  align-items: start;
  color: #315cff;
  text-decoration: none;
  --card-rot: 0deg;
  cursor: pointer;
}
.contact-icons a:hover {
  animation: selectedTilt 1.65s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(49,92,255,.38));
}
.contact-icons span {
  font-size: 54px;
  font-weight: 800;
  line-height: .9;
}
.contact-icons .phone-icon,
.contact-icons .chat-icon,
.contact-icons .paper-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  font-size: 0;
  line-height: 1;
  position: relative;
  image-rendering: pixelated;
}
.contact-icons .phone-icon svg,
.contact-icons .chat-icon svg,
.contact-icons .paper-icon svg {
  width: 58px;
  height: 58px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.96))
    drop-shadow(0 0 12px rgba(114,178,255,.55));
}
.contact-icons .phone-icon svg {
  width: 60px;
  height: 60px;
}
.contact-icons .chat-icon svg {
  width: 56px;
  height: 64px;
  transform: translateY(1px) scaleY(1.18);
  transform-origin: 50% 50%;
}
.contact-icons .paper-icon svg {
  width: 62px;
  height: 62px;
  transform: translateY(3px) scaleY(.82);
  transform-origin: 50% 50%;
}
.contact-icons small {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}
.play-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  place-items: center;
  padding: 28px;
}
.play-modal.is-open { display: grid; }
.play-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(18,23,46,.34);
}
.play-modal-window {
  position: relative;
  z-index: 1;
  width: min(860px, 86vw);
  padding: 24px;
  border: 1.5px solid #315cff;
  border-radius: 8px;
  color: #315cff;
  background: #f1eee7;
  box-shadow: 0 0 30px rgba(49,92,255,.24);
}
.play-modal-window h2 {
  margin: 0 44px 16px 0;
  font-size: 24px;
  line-height: 1.2;
}
.play-modal-window img {
  display: block;
  width: 100%;
  aspect-ratio: 1.55 / 1;
  object-fit: cover;
  image-rendering: pixelated;
  border: 1.5px solid rgba(49,92,255,.55);
}
.play-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1.5px solid #315cff;
  border-radius: 6px;
  color: #315cff;
  background: #f1eee7;
  font-size: 24px;
  font-weight: 800;
}
.back-top { font-size: 20px; }
.reveal-item {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.2,.82,.22,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-item.is-faded {
  opacity: .12;
  transform: translateY(-18px);
}
.play-card.reveal-item {
  transform: translateY(34px) rotate(var(--card-rot, 0deg));
}
.play-card.reveal-item.is-visible {
  transform: translateY(0) rotate(var(--card-rot, 0deg));
}
.play-card.reveal-item.is-faded {
  opacity: .12;
  transform: translateY(-18px) rotate(var(--card-rot, 0deg));
}
.card-a { --card-rot: 7deg; }
.card-b { --card-rot: -5deg; }
.card-c { --card-rot: 4deg; }
.card-d { --card-rot: -13deg; }
.card-e { --card-rot: 8deg; }
.work-detail-page { background: #f1eee7; color: #315cff; }
.work-detail {
  width: min(1090px, calc(100% - 48px));
  margin: 0 auto;
  padding: 96px 0 120px;
}
.work-detail-gallery {
  width: min(1540px, calc(100% - 48px));
}
.work-detail h1,
.work-detail > p {
  margin-left: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1090px, calc(100vw - 48px))) / 2)));
}
.work-detail-gallery h1,
.work-detail-gallery > p {
  margin-left: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
}
.work-detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-left: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1090px, calc(100vw - 48px))) / 2)));
  margin-right: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1090px, calc(100vw - 48px))) / 2)));
  margin-bottom: 30px;
}
.work-detail-gallery .work-detail-nav {
  margin-left: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
  margin-right: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
}
.work-sibling-links {
  display: flex;
  align-items: center;
  gap: 12px;
}
.work-detail h1 {
  margin: 30px 0 18px;
  color: #315cff;
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: .98;
  font-weight: 600;
}
.work-detail p {
  max-width: 720px;
  color: #315cff;
  font-size: 17px;
  line-height: 1.8;
  font-weight: 700;
}
.work-detail h1,
.work-detail > p {
  margin-left: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1090px, calc(100vw - 48px))) / 2)));
}
.work-detail-gallery h1,
.work-detail-gallery > p {
  margin-left: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
}
.detail-cover {
  width: min(1292px, calc(100% - 128px));
  max-width: none;
  margin: 42px auto 38px;
}
.work-gallery {
  position: relative;
  width: min(1420px, 100%);
  margin: 42px auto 38px;
  padding: 0 64px;
}
.work-gallery-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  max-width: calc(100% - 148px);
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(49,92,255,.46);
  border-radius: 7px;
  color: #315cff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.38)),
    rgba(241,238,231,.72);
  box-shadow:
    0 8px 20px rgba(80,92,120,.08),
    inset 0 1px 0 rgba(255,255,255,.7),
    0 0 18px rgba(255,255,255,.34);
  backdrop-filter: blur(14px) saturate(1.28);
  -webkit-backdrop-filter: blur(14px) saturate(1.28);
  font: 900 13px/1.25 "Geely Design Type", "Microsoft YaHei", sans-serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(-6px);
  animation: galleryHintFloat 3.4s ease .35s forwards;
}
@keyframes galleryHintFloat {
  0% { opacity: 0; transform: translate(-50%, -50%) translateY(-6px); }
  12%, 72% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(-4px); visibility: hidden; }
}
.work-gallery-viewport {
  overflow: hidden;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  cursor: default;
}
.work-gallery-viewport.is-dragging {
  cursor: grabbing;
}
.work-gallery-track {
  display: flex;
  transition: transform .42s cubic-bezier(.2,.72,.2,1);
  will-change: transform;
}
.work-gallery-page {
  flex: 0 0 100%;
  display: block;
}
.work-gallery-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.work-gallery-video-page {
  position: relative;
  display: grid;
  place-items: center;
}
.work-gallery-video-swipe-zone {
  position: absolute;
  top: 0;
  bottom: 70px;
  z-index: 30;
  width: clamp(96px, 24vw, 320px);
  cursor: grab;
  touch-action: pan-y;
}
.work-gallery-video-swipe-zone.is-prev {
  left: 0;
}
.work-gallery-video-swipe-zone.is-next {
  right: 0;
}
.work-gallery-viewport.is-dragging .work-gallery-video-swipe-zone {
  cursor: grabbing;
}
.work-gallery-image {
  display: block;
  min-width: 0;
  padding: 0;
  border: 1.5px solid rgba(49,92,255,.64);
  border-radius: 8px;
  background: rgba(255,255,255,.16);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.58) inset,
    0 18px 30px rgba(49,92,255,.12);
  overflow: hidden;
  touch-action: pan-y;
  cursor: pointer;
  transition: filter .22s ease, box-shadow .22s ease, transform .22s ease;
}
.work-gallery-image:hover {
  filter: brightness(1.02);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.72) inset,
    0 0 22px rgba(49,92,255,.28),
    0 18px 30px rgba(49,92,255,.16);
}
.work-gallery-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.work-gallery-labeled-image {
  position: relative;
}
.work-gallery-labeled-image span {
  position: absolute;
  top: clamp(14px, 1.7vw, 26px);
  left: clamp(16px, 2vw, 32px);
  z-index: 2;
  padding: 7px 12px 8px;
  border: 1.5px solid rgba(49,92,255,.56);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.58) inset,
    0 0 18px rgba(255,255,255,.54),
    0 10px 18px rgba(49,92,255,.12);
  color: #315cff;
  font: 900 clamp(15px, 1.45vw, 24px)/1.15 "Geely Design Type", "Microsoft YaHei", sans-serif;
  letter-spacing: .02em;
  pointer-events: none;
}
.work-gallery-pair .work-gallery-image img {
  aspect-ratio: auto;
  height: auto;
}
.work-gallery-video {
  display: block;
  width: min(1380px, 100%);
  max-height: 82vh;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}
.work-gallery-youtube {
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: none;
}
.work-gallery-video-embed {
  position: relative;
  width: min(1380px, 100%);
  aspect-ratio: 16 / 9;
  border: 1.5px solid rgba(49,92,255,.64);
  background: #111;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.7) inset,
    0 18px 30px rgba(49,92,255,.12);
  overflow: hidden;
}
.work-gallery-video-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #eef0f3;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
}
.work-gallery-video-poster > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .45s cubic-bezier(.2,.72,.2,1), filter .25s ease;
}
.work-gallery-video-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,25,70,.02) 45%, rgba(12,25,70,.25));
  pointer-events: none;
}
.work-gallery-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(62px, 7vw, 92px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 32px rgba(21,42,111,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background .25s ease;
}
.work-gallery-video-play svg {
  width: 52%;
  fill: #315cff;
}
.work-gallery-video-copy {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 2.5vw, 34px);
  z-index: 2;
  color: #fff;
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: .08em;
  transform: translateX(-50%);
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(9,22,64,.5);
}
.work-gallery-video-poster:hover > img {
  transform: scale(1.018);
  filter: brightness(1.03);
}
.work-gallery-video-poster:hover .work-gallery-video-play {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}
.work-gallery-video-embed .work-gallery-youtube {
  width: 100%;
  height: 100%;
}
.youtube-watch-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 4px;
  color: #fff;
  background: #315cff;
  box-shadow:
    0 4px 16px rgba(49,92,255,.38),
    0 0 12px rgba(255,255,255,.34);
  font: 800 13px/1.2 "Geely Design Type", "Microsoft YaHei", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.youtube-watch-link:hover {
  color: #fff;
  background: #1742e8;
}
.youtube-watch-link[hidden] {
  display: none;
}
.work-gallery-youtube-link {
  position: absolute;
  right: calc(50% - 50vw + clamp(34px, 5.6vw, 86px));
  top: 0;
  z-index: 40;
}
.work-06-page .work-gallery-youtube-link {
  top: 50px;
}
.work-gallery-video-page:has([data-youtube-player]) {
  box-sizing: border-box;
  padding-top: 52px;
}
.work-gallery-video:focus,
.work-gallery-video:focus-visible {
  outline: 0;
  box-shadow: none;
}
.catshroom-gallery-video {
  width: min(1380px, 100%);
  height: auto;
  max-height: none;
  aspect-ratio: 1184 / 720;
  object-fit: contain;
  background: #000;
}
.catshroom-card-section {
  width: min(1220px, 100%);
  margin: 28px auto 0;
  perspective: 1200px;
}
.catshroom-card-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 3.2vw, 38px);
  z-index: 230;
  transform: translateX(-50%);
  max-width: none;
  margin: 0;
  color: #315cff;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}
.catshroom-card-hint span {
  display: none;
}
.catshroom-card-stage {
  position: relative;
  min-height: clamp(450px, 40vw, 580px);
  border: 1.5px solid rgba(49,92,255,.56);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.74), rgba(255,255,255,.18) 26%, transparent 50%),
    linear-gradient(rgba(49,92,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49,92,255,.16) 1px, transparent 1px),
    rgba(241,238,231,.42);
  background-size: auto, 24px 24px, 24px 24px, auto;
  touch-action: pan-y;
  cursor: default;
}
.catshroom-card-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 205;
  pointer-events: none;
  opacity: 0;
  background: rgba(255,255,255,.42);
  transition: opacity .24s ease;
}
.catshroom-card-stage.has-active::after {
  opacity: 1;
}
.catshroom-card-stage.is-dragging {
  cursor: default;
}
.catshroom-card {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: clamp(138px, 14vw, 218px);
  aspect-ratio: 720 / 1008;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%) translate(var(--card-x, 0), calc(var(--card-y, 0px) + var(--card-lift, 0px))) rotate(var(--card-rot, 0deg)) scale(var(--card-scale, 1));
  transform-style: preserve-3d;
  transform-origin: center;
  opacity: var(--card-opacity, .82);
  z-index: var(--card-z, 1);
  will-change: transform;
  transition: transform .44s cubic-bezier(.2,.72,.2,1), filter .24s ease, opacity .24s ease;
}
.catshroom-pack-card {
  left: clamp(10px, 1.8vw, 22px);
  top: auto;
  bottom: clamp(34px, 4.6vw, 62px);
  width: clamp(132px, 12.4vw, 188px);
  aspect-ratio: 750 / 1300;
  z-index: 214;
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transform-origin: center bottom;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.74))
    drop-shadow(0 14px 18px rgba(34,48,86,.18));
  animation: packIdleWobble 3.2s ease-in-out infinite;
  --pack-shape: polygon(
    2% 8%, 6% 4%, 10% 5.5%, 14% 4%, 18% 5.5%, 22% 4%, 26% 5.5%, 30% 4%, 34% 5.5%, 38% 4%,
    42% 5.5%, 46% 4%, 50% 5.5%, 54% 4%, 58% 5.5%, 62% 4%, 66% 5.5%, 70% 4%, 74% 5.5%, 78% 4%,
    82% 5.5%, 86% 4%, 90% 5.5%, 94% 4%, 98% 8%,
    95% 18%, 96% 35%, 94% 50%, 96% 66%, 95% 84%, 99% 93%,
    94% 95.8%, 88% 95%, 82% 96.2%, 76% 95%, 70% 96.2%, 64% 95%, 58% 96.2%, 52% 95%,
    46% 96.2%, 40% 95%, 34% 96.2%, 28% 95%, 22% 96.2%, 16% 95%, 10% 96.2%, 4% 95.2%, 1% 93%,
    5% 84%, 4% 66%, 6% 50%, 4% 35%, 5% 18%
  );
}
.catshroom-pack-card::before,
.catshroom-pack-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.catshroom-pack-card::before {
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.62), rgba(255,255,255,.18) 38%, rgba(49,92,255,.16) 56%, transparent 72%);
  filter: blur(8px);
  opacity: .72;
  animation: packIdleGlow 2.8s ease-in-out infinite;
}
.catshroom-pack-card::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.34) 0 7px, rgba(18,32,20,.34) 7px 14px) top / 100% 22px no-repeat,
    repeating-linear-gradient(45deg, rgba(18,32,20,.34) 0 7px, rgba(255,255,255,.28) 7px 14px) bottom / 100% 22px no-repeat,
    linear-gradient(180deg, rgba(0,0,0,.52), rgba(255,255,255,.16) 4%, transparent 12%, transparent 88%, rgba(255,255,255,.14) 96%, rgba(0,0,0,.42)),
    linear-gradient(90deg, rgba(0,0,0,.24), rgba(255,255,255,.22) 7%, transparent 16%, transparent 84%, rgba(255,255,255,.16) 91%, rgba(0,0,0,.34));
  clip-path: var(--pack-shape);
  opacity: .72;
  mix-blend-mode: soft-light;
}
.catshroom-pack-card .catshroom-card-face {
  border-radius: 6px;
  transform: translateZ(10px);
  box-shadow:
    0 28px 36px rgba(22,52,36,.3),
    inset 13px 0 20px rgba(255,255,255,.18),
    inset -15px 0 22px rgba(11,40,21,.36),
    inset 0 16px 20px rgba(0,0,0,.16),
    inset 0 -18px 22px rgba(0,0,0,.18);
  clip-path: var(--pack-shape);
}
.catshroom-pack-card .catshroom-card-face::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 16%;
  z-index: 3;
  height: 12%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(17,47,25,.58), rgba(255,255,255,.42) 18%, rgba(49,92,255,.72) 52%, rgba(8,38,23,.56));
  clip-path: polygon(0 45%, 10% 42%, 20% 46%, 32% 43%, 44% 47%, 56% 43%, 68% 47%, 80% 42%, 90% 46%, 100% 43%, 100% 56%, 90% 53%, 80% 57%, 68% 53%, 56% 58%, 44% 54%, 32% 57%, 20% 54%, 10% 58%, 0 55%);
  filter: drop-shadow(0 2px 4px rgba(8,28,16,.32));
  transform: translateX(calc(var(--pack-swipe-x, 0px) * .06));
}
.catshroom-pack-card.is-active .catshroom-card-face::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 11%;
  height: 10%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.26), transparent 70%);
  filter: blur(.2px);
  pointer-events: none;
}
.catshroom-pack-card.is-active {
  left: 50%;
  bottom: auto;
  top: 52%;
  transform: translate(-50%, -44%) translateX(var(--pack-swipe-x, 0px)) translateZ(120px) rotate(0deg) scale(1.42);
  z-index: 260;
  animation: none;
}
.catshroom-pack-card.is-active.is-tearing {
  top: 63%;
  transform: translate(-50%, -24%) translateX(calc(var(--pack-swipe-x, 0px) * .18)) translateZ(180px) rotate(0deg) scale(3.18);
  transform-origin: center 18%;
  z-index: 272;
}
.catshroom-pack-card.is-tearing .catshroom-card-face {
  animation: packBodyOpen .62s cubic-bezier(.22,.8,.26,1) forwards;
  clip-path: polygon(
    2% 24%, 10% 23.2%, 18% 24.4%, 28% 23.6%, 38% 24.8%, 48% 23.8%, 58% 25%, 68% 23.7%, 78% 24.6%, 88% 23.4%, 96% 24.2%,
    95% 35%, 94% 50%, 96% 66%, 95% 84%, 99% 93%,
    94% 95.8%, 88% 95%, 82% 96.2%, 76% 95%, 70% 96.2%, 64% 95%, 58% 96.2%, 52% 95%,
    46% 96.2%, 40% 95%, 34% 96.2%, 28% 95%, 22% 96.2%, 16% 95%, 10% 96.2%, 4% 95.2%, 1% 93%,
    5% 84%, 4% 66%, 6% 50%, 4% 35%
  );
}
.catshroom-pack-card.is-tearing .catshroom-card-face::before {
  opacity: 1;
  animation: packTearSeam .48s cubic-bezier(.2,.74,.22,1) forwards;
}
.catshroom-pack-card.is-tearing .catshroom-card-face::after {
  animation: packTearFlash .6s ease-out forwards;
}
.catshroom-pack-card.is-tearing::after {
  opacity: calc(.78 - var(--pack-tear-progress, 0) * .78);
}
.catshroom-pack-card.is-tearing::before {
  inset: 0;
  z-index: 8;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 34%),
    url("../images/works/work-03-catshroom/cards/card-pack-cover.jpg") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 12px rgba(12,28,18,.26));
  opacity: 1;
  animation: packTopTearAway .62s cubic-bezier(.2,.76,.24,1) forwards;
  clip-path: polygon(
    2% 8%, 6% 4%, 10% 5.5%, 14% 4%, 18% 5.5%, 22% 4%, 26% 5.5%, 30% 4%, 34% 5.5%, 38% 4%,
    42% 5.5%, 46% 4%, 50% 5.5%, 54% 4%, 58% 5.5%, 62% 4%, 66% 5.5%, 70% 4%, 74% 5.5%, 78% 4%,
    82% 5.5%, 86% 4%, 90% 5.5%, 94% 4%, 98% 8%,
    96% 22.8%, 88% 22.1%, 80% 23.2%, 70% 22.4%, 60% 23.5%, 50% 22.6%, 40% 23.6%, 30% 22.5%, 20% 23.3%, 10% 22.2%, 3% 23%
  );
}
.pack-tear-label {
  display: none;
}
.pack-start-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 236;
  display: inline-block;
  width: max-content;
  color: #315cff;
  font: 900 14px/1.15 "Geely Design Type", "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}
.catshroom-pack-card.is-active .pack-start-label,
.catshroom-pack-card.is-tearing .pack-start-label,
.catshroom-pack-card.is-pack-leaving .pack-start-label,
.catshroom-card-stage.is-pack-open .pack-start-label {
  display: none;
}
.pack-swipe-cue {
  position: absolute;
  left: 50%;
  top: 10%;
  z-index: 235;
  width: 100%;
  height: 48px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .18s ease, transform .18s ease;
}
.catshroom-pack-card.is-active .pack-swipe-cue {
  opacity: 1;
}
.catshroom-pack-card.is-tearing .pack-swipe-cue,
.catshroom-pack-card.is-pack-leaving .pack-swipe-cue,
.catshroom-card-stage.is-pack-open .pack-swipe-cue {
  opacity: 0;
}
.pack-glow-line {
  position: absolute;
  left: -1%;
  right: -1%;
  top: 0;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(49,92,255,.08), rgba(255,255,255,1), rgba(49,92,255,.95), rgba(255,255,255,.96), rgba(49,92,255,.08));
  box-shadow:
    0 0 8px rgba(255,255,255,1),
    0 0 18px rgba(49,92,255,.72),
    0 0 30px rgba(49,92,255,.38);
}
.pack-glow-line::after {
  content: none;
  position: absolute;
  right: -2px;
  top: -5px;
  width: 14px;
  height: 14px;
  border-top: 3px solid rgba(255,255,255,.95);
  border-right: 3px solid rgba(255,255,255,.95);
  transform: rotate(45deg);
}
.pack-hand {
  position: absolute;
  left: 62%;
  top: 9px;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)) drop-shadow(0 0 8px rgba(49,92,255,.22));
  animation: packHandSlide 1.35s ease-in-out infinite;
}
.pack-cue-text {
  position: absolute;
  left: calc(8% + 10px);
  top: 13px;
  color: #fff;
  font: 900 10px/1.4 "Geely Design Type", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  text-shadow: 0 2px 5px rgba(0,0,0,.38), 0 0 12px rgba(49,92,255,.46);
  transform: none;
  white-space: nowrap;
}
.catshroom-pack-card.is-pack-leaving {
  animation: packLeave .5s cubic-bezier(.28,.66,.3,1) forwards;
  pointer-events: none;
}
.catshroom-card-stage.is-pack-open .catshroom-pack-card.is-active {
  transform: translate(-50%, -38%) translateX(var(--pack-swipe-x, 0px)) translateZ(70px) rotate(0deg) scale(1.02);
}
.catshroom-card-stage.is-pack-open .catshroom-card:not(.catshroom-pack-card):not(.is-pulled) {
  opacity: 0;
  pointer-events: none;
}
.catshroom-card-stage.is-pack-active .catshroom-card:not(.catshroom-pack-card):not(.is-peeking) {
  opacity: 1;
  filter: none;
  pointer-events: none;
}
.catshroom-card-slider {
  position: absolute;
  left: 57%;
  bottom: clamp(78px, 7vw, 108px);
  z-index: 218;
  width: min(560px, calc(100% - 340px));
  height: 86px;
  transform: translateX(-50%);
  touch-action: none;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.catshroom-card-slider-arc {
  display: none;
}
.catshroom-card-slider-arc::before {
  content: none;
}
.catshroom-card-slider-arc::after {
  content: none;
}
.catshroom-card-slider-dot {
  display: none;
}
.catshroom-card-slider-cue {
  position: absolute;
  left: var(--slider-cue-left, 22px);
  top: var(--slider-cue-top, 34px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: #315cff;
  pointer-events: none;
  opacity: .92;
  transform: translate(-50%, -50%);
  animation: cardSliderCue 1.75s ease-in-out infinite;
}
.catshroom-card-slider-hand {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)) drop-shadow(0 0 8px rgba(49,92,255,.22));
}
.catshroom-card-slider-dot:active,
.catshroom-card-slider.is-sliding .catshroom-card-slider-dot {
  cursor: grabbing;
}
.catshroom-card-slider.is-sliding .catshroom-card-slider-cue,
.catshroom-card-slider:hover .catshroom-card-slider-cue {
  opacity: 0;
}
.catshroom-card-stage.has-active .catshroom-card-slider,
.catshroom-card-stage.is-pack-open .catshroom-card-slider {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}
.catshroom-card.is-peeking {
  transform: translate(-50%, -50%) translate(var(--peek-x, 0), var(--peek-y, 322px)) rotate(0deg) scale(2.36);
  opacity: 1;
  z-index: var(--peek-z, 252);
  pointer-events: none;
  animation: cardPeekFromPack .5s cubic-bezier(.18,.84,.24,1) both;
}
.catshroom-card.is-peeking.is-flipped {
  transform: translate(-50%, -50%) translate(var(--peek-x, 0), var(--peek-y, 322px)) rotate(0deg) scale(2.36);
}
.catshroom-card-return {
  position: absolute;
  left: 50%;
  bottom: clamp(54px, 6vw, 76px);
  z-index: 270;
  display: none;
  padding: 8px 18px;
  border: 1.5px solid #315cff;
  border-radius: 8px;
  color: #315cff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.42)),
    rgba(241,238,231,.7);
  font: 800 14px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  box-shadow: 0 0 12px rgba(49,92,255,.16);
  transform: translateX(-50%);
}
.catshroom-card-stage.is-pack-open .catshroom-card-return {
  display: inline-flex;
}
.catshroom-card.is-pulled {
  transform: translate(-50%, -50%) translate(var(--pull-x, 0), var(--pull-y, -78px)) rotate(var(--pull-rot, 0deg)) scale(.98);
  opacity: 1;
  z-index: var(--pull-z, 240);
  pointer-events: auto;
  animation: pulledFan .46s cubic-bezier(.18,.84,.24,1.08) both;
  animation-delay: var(--pull-delay, 0ms);
  transition: filter .24s ease;
}
.catshroom-card.is-pulled.is-pulled-settled {
  animation: none;
  transition: transform .16s ease, filter .24s ease;
}
.catshroom-card.is-pulled::before {
  content: none;
}
.catshroom-card.is-pulled:hover,
.catshroom-card.is-pulled.is-hovered {
  --card-lift: 0px;
  z-index: 320;
  transform: translate(-50%, -50%) translate(var(--pull-x, 0), calc(var(--pull-y, -78px) - 18px)) rotate(var(--pull-rot, 0deg)) scale(.98);
  animation: pulledCardHoverWiggle .86s ease-in-out infinite;
  filter:
    drop-shadow(0 0 16px rgba(49,92,255,.36))
    drop-shadow(0 14px 18px rgba(49,92,255,.16));
}
.catshroom-card:hover {
  --card-lift: -22px;
  z-index: 210;
  filter:
    drop-shadow(0 0 16px rgba(49,92,255,.36))
    drop-shadow(0 14px 18px rgba(49,92,255,.16));
}
.catshroom-card.no-transition {
  transition: none;
}
.catshroom-card.is-active {
  transform: translate(-50%, -54%) translateZ(90px) rotateX(var(--active-tilt-x, 0deg)) rotateY(var(--active-tilt-y, 0deg)) scale(1.34);
  opacity: 1;
  z-index: 220;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.82));
}
.catshroom-card.is-flipped {
  transform: translate(-50%, -50%) translate(var(--card-x, 0), calc(var(--card-y, 0px) + var(--card-lift, 0px))) rotate(var(--card-rot, 0deg)) scale(var(--card-scale, 1));
}
.catshroom-pack-card.is-active.is-flipped {
  top: 52%;
  transform: translate(-50%, -44%) translateX(var(--pack-swipe-x, 0px)) translateZ(120px) rotate(0deg) scale(1.42);
}
.catshroom-pack-card.is-active.is-tearing.is-flipped {
  top: 63%;
  transform: translate(-50%, -24%) translateX(calc(var(--pack-swipe-x, 0px) * .18)) translateZ(180px) rotate(0deg) scale(3.18);
  transform-origin: center 18%;
  z-index: 272;
}
.catshroom-pack-card.is-flipped {
  transform: rotate(0deg) scale(1);
}
.catshroom-card.is-pulled.is-flipped {
  transform: translate(-50%, -50%) translate(var(--pull-x, 0), var(--pull-y, -78px)) rotate(var(--pull-rot, 0deg)) scale(.98);
}
.catshroom-card.is-pulled.is-flipped:hover,
.catshroom-card.is-pulled.is-flipped.is-hovered {
  z-index: 320;
  transform: translate(-50%, -50%) translate(var(--pull-x, 0), calc(var(--pull-y, -78px) - 18px)) rotate(var(--pull-rot, 0deg)) scale(.98);
  animation: pulledCardHoverWiggle .86s ease-in-out infinite;
}
.catshroom-card.is-active.is-flipped {
  transform: translate(-50%, -54%) translateZ(90px) rotateX(var(--active-tilt-x, 0deg)) rotateY(var(--active-tilt-y, 0deg)) scale(1.34);
}
.catshroom-card.catshroom-pack-card.is-active.is-flipped {
  top: 52%;
  transform: translate(-50%, -44%) translateX(var(--pack-swipe-x, 0px)) translateZ(120px) rotate(0deg) scale(1.55);
}
.catshroom-card.catshroom-pack-card.is-active.is-tearing.is-flipped {
  top: 63%;
  transform: translate(-50%, -24%) translateX(calc(var(--pack-swipe-x, 0px) * .18)) translateZ(180px) rotate(0deg) scale(3.18);
  transform-origin: center 18%;
  z-index: 272;
}
.catshroom-card.is-selecting {
  animation: cardSelectPop .48s cubic-bezier(.2,.86,.26,1.08);
}
.catshroom-card-stage.has-active .catshroom-card:not(.is-active) {
  opacity: 1;
  filter: none;
}
.catshroom-card.is-active .catshroom-card-face {
  box-shadow:
    calc(var(--active-shadow-x, 0px) * -1) calc(34px + var(--active-shadow-y, 0px)) 48px rgba(34,48,86,.34),
    calc(var(--active-shadow-x, 0px) * -1) calc(10px + var(--active-shadow-y, 0px)) 20px rgba(34,48,86,.2);
}
.catshroom-card-face {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 24px rgba(34,48,86,.18), 0 4px 10px rgba(34,48,86,.12);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .56s cubic-bezier(.2,.72,.2,1), box-shadow .24s ease;
}
.catshroom-card-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catshroom-card-front {
  padding: 0;
  background: transparent;
  transform: rotateY(180deg);
}
.catshroom-card-back {
  transform: rotateY(0deg);
}
.catshroom-card.is-flipped .catshroom-card-front {
  transform: rotateY(0deg);
}
.catshroom-card.is-flipped .catshroom-card-back {
  transform: rotateY(-180deg);
}
.catshroom-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes cardSelectPop {
  0% {
    transform: translate(-50%, -50%) translate(var(--card-x, 0), var(--card-y, 0px)) rotate(var(--card-rot, 0deg)) scale(var(--card-scale, 1));
  }
  62% {
    transform: translate(-50%, -56%) translateZ(110px) rotateX(0deg) rotateY(0deg) scale(1.4);
  }
  100% {
    transform: translate(-50%, -54%) translateZ(90px) rotateX(0deg) rotateY(0deg) scale(1.34);
  }
}

/* Playground painting camera: keep one purple artwork visible through the
   transparent LCD opening while retaining the full painting viewer on click. */
.play-note-widget {
  right: 3.8%;
  bottom: 2%;
  width: clamp(150px, 13.8vw, 190px);
  aspect-ratio: 1136 / 1385;
  filter: drop-shadow(0 10px 12px rgba(31, 46, 100, .18));
  transform:
    translate3d(var(--note-drag-x), calc(var(--note-drag-y) + 20px), 0)
    rotate(0deg);
}

.play-note-widget:hover {
  filter: drop-shadow(0 13px 16px rgba(31, 46, 100, .23));
}

.play-note-widget > .play-note-widget-slot {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  cursor: grab;
}

.play-note-widget > .play-note-widget-slot:active {
  cursor: grabbing;
}

.play-note-camera-screen {
  position: absolute;
  left: 25.18%;
  top: 39.57%;
  z-index: 1;
  display: block;
  width: 46.04%;
  height: 34.87%;
  overflow: hidden;
  border-radius: 8%;
  background: #f1eee7;
  transform: none;
  pointer-events: none;
}

.play-note-camera-screen > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  image-rendering: auto;
  transform: scale(1.32);
}

.play-note-camera-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.play-note-widget.is-switching > .play-note-widget-slot {
  animation: playNoteCameraSwap .28s ease;
}

/* Final work-page copy alignment: match the header/title content edges. */
.work-detail-gallery > .work-summary-description {
  --work-summary-edge: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin-left: var(--work-summary-edge);
  margin-right: var(--work-summary-edge);
  font-weight: 500;
  line-height: 1.9;
  text-align: justify;
  text-align-last: left;
}

/* Work 03/04 project statements: follow the title edges without changing the galleries. */
.work-detail-gallery .work-project-description {
  --work-copy-edge: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin: clamp(28px, 3.2vw, 48px) var(--work-copy-edge) 0;
  color: #315cff;
}

.work-detail-gallery .work-project-description p {
  width: 100%;
  max-width: none;
  margin: 0;
  color: inherit;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.9;
  font-weight: 500;
  letter-spacing: .015em;
  text-align: justify;
  text-align-last: left;
}

.work-detail-gallery .work-project-description p + p {
  margin-top: 1.05em;
}

.work-detail-gallery .work-project-description .work-project-meaning {
  padding-left: 0;
  font-weight: 650;
}

/* Zheyou Mountain AR fair — editorial board v3 */
.work-02-page .zys-board-v3 {
  --zys-coral: #ff766f;
  --zys-cream: #fff8ed;
  --zys-green: #b8d46b;
  position: relative;
  isolation: isolate;
  width: min(100%, 1320px);
  margin: clamp(54px, 7vw, 104px) auto 0;
  overflow: hidden;
  color: #fff;
  border-radius: 30px;
  background:
    radial-gradient(circle at 72% 15%, rgba(255, 118, 111, .11), transparent 31%),
    linear-gradient(180deg, #100f11 0%, #09090a 100%);
  box-shadow: 0 30px 80px rgba(24, 17, 13, .18);
}

.work-02-page .zys-board-v3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 48px 48px;
}

.work-02-page .zys-board-v3-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.work-02-page .zys-v3-panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.work-02-page .zys-v3-panel:last-child { border-bottom: 0; }

.work-02-page .zys-v3-panel::before,
.work-02-page .zys-v3-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.work-02-page .zys-v3-panel-a { height: 790px; }
.work-02-page .zys-v3-panel-b { height: 1240px; }
.work-02-page .zys-v3-panel-c { height: 570px; }

.work-02-page .zys-v3-panel-a::before {
  left: 86px;
  top: 532px;
  width: 330px;
  height: 210px;
  border-left: 17px solid rgba(255,255,255,.88);
  border-bottom: 17px solid rgba(255,255,255,.88);
  transform: skewY(-43deg);
  transform-origin: left bottom;
}

.work-02-page .zys-v3-panel-b::before {
  right: 25px;
  bottom: 52px;
  width: 260px;
  height: 250px;
  border-right: 17px solid rgba(255,255,255,.88);
  border-bottom: 17px solid rgba(255,255,255,.88);
}

.work-02-page .zys-v3-panel-c::before {
  right: 22px;
  top: 40px;
  width: 265px;
  height: 212px;
  border-right: 17px solid rgba(255,255,255,.88);
  border-top: 17px solid rgba(255,255,255,.88);
}

.work-02-page .zys-v3-heading {
  position: absolute;
  z-index: 8;
  color: #080808;
  line-height: .84;
  text-transform: uppercase;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.12));
}

.work-02-page .zys-v3-heading strong,
.work-02-page .zys-v3-heading h3 {
  display: block;
  width: max-content;
  margin: 0;
  padding: 9px 14px 11px;
  background: #fff;
  font-weight: 900;
  letter-spacing: -.055em;
}

.work-02-page .zys-v3-heading strong { font-size: clamp(58px, 7.5vw, 100px); }
.work-02-page .zys-v3-heading h3 { font-size: clamp(42px, 5.3vw, 72px); }
.work-02-page .zys-v3-heading-a { left: 18px; top: 355px; }
.work-02-page .zys-v3-heading-b { left: 338px; top: 185px; }
.work-02-page .zys-v3-heading-c { left: 14px; top: 378px; }

.work-02-page .zys-v3-note {
  position: absolute;
  z-index: 7;
  margin: 0;
  padding: 12px 16px 13px;
  color: #161311;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,248,237,.94);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  font-size: 14px;
  line-height: 1.45;
}

.work-02-page .zys-v3-note b {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  background: var(--zys-green);
  font-size: 11px;
  letter-spacing: .08em;
}

.work-02-page .zys-v3-note-a { left: 454px; top: 350px; width: 270px; }
.work-02-page .zys-v3-note-b { left: 646px; top: 304px; width: 328px; }
.work-02-page .zys-v3-note-c { left: 376px; top: 108px; width: 280px; }

.work-02-page .zys-v3-panel button {
  border: 0;
  color: inherit;
  background: none;
  cursor: zoom-in;
}

.work-02-page .zys-v3-entry-stack {
  position: absolute;
  left: 116px;
  top: 50px;
  z-index: 3;
  width: 425px;
  height: 430px;
}

.work-02-page .zys-v3-raw {
  position: absolute;
  width: 225px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 34px rgba(0,0,0,.42);
}

.work-02-page .zys-v3-raw img,
.work-02-page .zys-v3-b-flow img,
.work-02-page .zys-v3-fortunes img,
.work-02-page .zys-v3-c-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-02-page .zys-v3-entry-a { left: 0; top: 16px; transform: rotate(-4deg); }
.work-02-page .zys-v3-entry-b { right: 0; top: 0; transform: rotate(3deg); }

.work-02-page .zys-v3-entry-mockup {
  position: absolute;
  width: 210px;
  height: 390px;
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.42));
}

.work-02-page .zys-v3-entry-mockup img {
  position: absolute;
  left: -100px;
  top: -8px;
  display: block;
  width: 410px;
  height: 410px;
  object-fit: contain;
}

.work-02-page .zys-v3-entry-mockup.zys-v3-entry-b img {
  left: -96px;
}

.work-02-page .zys-v3-a-devices {
  position: absolute;
  left: 515px;
  top: 34px;
  z-index: 3;
  width: 510px;
  height: 520px;
}

.work-02-page .zys-v3-phone {
  position: absolute;
  display: block;
  padding: 0;
}

.work-02-page .zys-v3-phone-blue { width: 180px; height: 270px; }

.work-02-page .zys-v3-a-screen {
  position: absolute;
  display: block;
  width: 130px;
  height: 266px;
  padding: 0;
  overflow: hidden;
  border: 5px solid #17161a !important;
  border-radius: 23px;
  background: #111;
  box-shadow: 0 15px 26px rgba(0,0,0,.38);
}

.work-02-page .zys-v3-a-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-02-page .zys-v3-frame,
.work-02-page .zys-v3-pair-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.work-02-page .zys-v3-phone-blue .zys-v3-screen {
  position: absolute;
  left: 31.3%;
  top: 6%;
  z-index: 1;
  width: 36.5%;
  height: 87.5%;
  border-radius: 13% / 5%;
  object-fit: cover;
}

.work-02-page .zys-v3-phone-blue .zys-v3-frame {
  inset: auto;
  left: -26%;
  top: -5%;
  width: 152%;
  height: 110%;
}

.work-02-page .zys-v3-a-phone-1 { left: 4px; top: 0; transform: rotate(-2deg); }
.work-02-page .zys-v3-a-phone-2 { left: 190px; top: -8px; }
.work-02-page .zys-v3-a-phone-3 { left: 376px; top: 2px; transform: rotate(2deg); }
.work-02-page .zys-v3-a-phone-4 { left: 24px; top: 244px; transform: rotate(-1deg); }
.work-02-page .zys-v3-a-phone-5 { left: 210px; top: 238px; }
.work-02-page .zys-v3-a-phone-6 { left: 396px; top: 246px; transform: rotate(1deg); }

.work-02-page .zys-v3-panel-a::after {
  left: 420px;
  top: 130px;
  width: 730px;
  height: 400px;
  border-top: 1px solid rgba(255,255,255,.7);
  border-right: 1px solid rgba(255,255,255,.7);
  border-radius: 0 22px 0 0;
}

.work-02-page .zys-v3-silver-front {
  left: 42px;
  top: 45px;
  z-index: 3;
  width: 340px;
  height: 475px;
  transform: rotate(-2deg);
}

.work-02-page .zys-v3-silver-front .zys-v3-screen {
  position: absolute;
  left: 28.4%;
  top: 12.7%;
  z-index: 1;
  width: 46.6%;
  height: 73.2%;
  border-radius: 12% / 5%;
  object-fit: cover;
}

.work-02-page .zys-v3-pair {
  position: absolute;
  right: 8px;
  top: 35px;
  z-index: 3;
  width: 610px;
  height: 455px;
}

.work-02-page .zys-v3-pair-screen {
  position: absolute;
  z-index: 1;
  padding: 0;
  overflow: hidden;
}

.work-02-page .zys-v3-pair-screen img { width: 100%; height: 100%; object-fit: cover; }
.work-02-page .zys-v3-pair-screen-top {
  left: 10%; top: 16%; width: 66%; height: 43%;
  clip-path: polygon(21% 0, 100% 25%, 77% 100%, 0 71%);
}
.work-02-page .zys-v3-pair-screen-bottom {
  left: 14%; top: 47%; width: 72%; height: 38%;
  clip-path: polygon(24% 0, 100% 28%, 72% 100%, 0 72%);
}

.work-02-page .zys-v3-b-flow {
  position: absolute;
  left: 58px;
  right: 58px;
  top: 500px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 13px;
  align-items: end;
}

.work-02-page .zys-v3-b-flow::before {
  content: "";
  position: absolute;
  left: 5%; right: 5%; top: -17px;
  height: 1px;
  background: rgba(255,255,255,.72);
}

.work-02-page .zys-v3-b-flow button {
  position: relative;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 635 / 1297;
  border: 5px solid #151419;
  border-radius: 24px;
  background: #111;
  box-shadow: 0 14px 25px rgba(0,0,0,.35);
}

.work-02-page .zys-v3-b-flow button:nth-child(1),
.work-02-page .zys-v3-b-flow button:nth-child(2),
.work-02-page .zys-v3-b-flow button:nth-child(3) { transform: translateY(-2px); }
.work-02-page .zys-v3-b-flow button:nth-child(7) { grid-column: 2; }

.work-02-page .zys-v3-fortunes {
  position: absolute;
  left: 70px;
  right: 70px;
  top: 900px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: start;
}

.work-02-page .zys-v3-fortunes button {
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1070 / 1288;
  border-radius: 10px;
  box-shadow: 0 15px 28px rgba(0,0,0,.35);
}

.work-02-page .zys-v3-silver-back {
  position: absolute;
  left: 155px;
  top: 38px;
  z-index: 1;
  width: 405px;
  height: 490px;
  object-fit: contain;
  transform: rotate(-8deg);
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.4));
}

.work-02-page .zys-v3-silver-angle {
  left: 24px;
  top: 12px;
  z-index: 3;
  width: 420px;
  height: 515px;
  transform: rotate(-8deg);
}

.work-02-page .zys-v3-silver-angle .zys-v3-screen {
  position: absolute;
  left: 20%;
  top: 16.7%;
  z-index: 1;
  width: 63%;
  height: 67%;
  object-fit: cover;
  clip-path: polygon(19% 0, 100% 17%, 78% 100%, 0 80%);
}

.work-02-page .zys-v3-c-photo {
  position: absolute;
  right: 55px;
  top: 176px;
  z-index: 4;
  width: 215px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 633 / 1296;
  border: 6px solid #151419;
  border-radius: 28px;
  box-shadow: 0 18px 30px rgba(0,0,0,.42);
}

.work-02-page .zys-v3-panel button:hover { filter: brightness(1.055); }

@media (max-width: 900px) {
  .work-02-page .zys-board-v3 {
    width: calc(100% + 24px);
    margin-left: -12px;
    border-radius: 20px;
  }
  .work-02-page .zys-v3-panel-a { height: 760px; }
  .work-02-page .zys-v3-panel-b { height: 1120px; }
  .work-02-page .zys-v3-panel-c { height: 550px; }
  .work-02-page .zys-v3-entry-stack { left: 5%; top: 30px; width: 38%; height: 285px; }
  .work-02-page .zys-v3-raw { width: 60%; }
  .work-02-page .zys-v3-a-devices { left: 39%; top: 20px; width: 59%; height: 470px; }
  .work-02-page .zys-v3-phone-blue { width: 34%; height: 245px; }
  .work-02-page .zys-v3-a-phone-1 { left: 0; }
  .work-02-page .zys-v3-a-phone-2 { left: 32%; }
  .work-02-page .zys-v3-a-phone-3 { left: 64%; }
  .work-02-page .zys-v3-a-phone-4 { left: 5%; top: 220px; }
  .work-02-page .zys-v3-a-phone-5 { left: 37%; top: 216px; }
  .work-02-page .zys-v3-a-phone-6 { left: 69%; top: 220px; }
  .work-02-page .zys-v3-heading-a { left: 3%; top: 330px; }
  .work-02-page .zys-v3-note-a { left: 35%; top: 510px; width: 43%; }
  .work-02-page .zys-v3-silver-front { left: 0; top: 28px; width: 34%; height: 365px; }
  .work-02-page .zys-v3-pair { right: 0; top: 30px; width: 65%; height: 395px; }
  .work-02-page .zys-v3-heading-b { left: 27%; top: 135px; }
  .work-02-page .zys-v3-note-b { left: 48%; top: 255px; width: 40%; }
  .work-02-page .zys-v3-b-flow { left: 4%; right: 4%; top: 430px; gap: 7px; }
  .work-02-page .zys-v3-b-flow button { border-width: 3px; border-radius: 15px; }
  .work-02-page .zys-v3-fortunes { left: 5%; right: 5%; top: 830px; gap: 8px; }
  .work-02-page .zys-v3-silver-back { left: 11%; top: 25px; width: 43%; height: 430px; }
  .work-02-page .zys-v3-silver-angle { left: -2%; top: 10px; width: 48%; height: 450px; }
  .work-02-page .zys-v3-heading-c { left: 2%; top: 300px; }
  .work-02-page .zys-v3-note-c { left: 39%; top: 70px; width: 29%; }
  .work-02-page .zys-v3-c-photo { right: 4%; top: 175px; width: 24%; border-radius: 18px; }
}

@media (max-width: 560px) {
  .work-02-page .zys-v3-panel-a { height: 600px; }
  .work-02-page .zys-v3-panel-b { height: 865px; }
  .work-02-page .zys-v3-panel-c { height: 430px; }
  .work-02-page .zys-v3-heading strong { font-size: 42px; }
  .work-02-page .zys-v3-heading h3 { font-size: 30px; }
  .work-02-page .zys-v3-heading strong,
  .work-02-page .zys-v3-heading h3 { padding: 6px 9px 7px; }
  .work-02-page .zys-v3-note { padding: 8px 10px; font-size: 9px; }
  .work-02-page .zys-v3-note b { font-size: 8px; }
  .work-02-page .zys-v3-entry-stack { height: 210px; }
  .work-02-page .zys-v3-a-devices { height: 360px; }
  .work-02-page .zys-v3-phone-blue { height: 180px; }
  .work-02-page .zys-v3-a-phone-4,
  .work-02-page .zys-v3-a-phone-5,
  .work-02-page .zys-v3-a-phone-6 { top: 158px; }
  .work-02-page .zys-v3-heading-a { top: 255px; }
  .work-02-page .zys-v3-note-a { top: 395px; }
  .work-02-page .zys-v3-b-flow { top: 335px; gap: 3px; }
  .work-02-page .zys-v3-b-flow button { border-width: 2px; border-radius: 10px; }
  .work-02-page .zys-v3-fortunes { top: 645px; gap: 4px; }
  .work-02-page .zys-v3-silver-front { height: 285px; }
  .work-02-page .zys-v3-pair { height: 305px; }
  .work-02-page .zys-v3-heading-b { top: 105px; }
  .work-02-page .zys-v3-note-b { top: 200px; }
  .work-02-page .zys-v3-silver-back { height: 330px; }
  .work-02-page .zys-v3-silver-angle { height: 350px; }
  .work-02-page .zys-v3-heading-c { top: 235px; }
  .work-02-page .zys-v3-c-photo { top: 135px; border-width: 3px; }
}

/* Work 02: exact-screen silver device mockups and editorial scale jumps. */
.zys-ui-a-layout {
  grid-template-columns: minmax(210px, .58fr) minmax(0, 1.72fr);
  align-items: start;
}

.zys-ui-a-showcase {
  display: grid;
  gap: clamp(34px, 5vw, 64px);
  min-width: 0;
}

.zys-ui-device-scene {
  position: relative;
  min-width: 0;
}

.zys-device {
  position: relative;
  z-index: 2;
  padding: clamp(7px, .8vw, 11px);
  overflow: visible;
  background:
    linear-gradient(116deg, #f9f9f7 0%, #a9aaa7 17%, #f7f7f4 38%, #878986 61%, #f1f1ee 82%, #a3a5a2 100%);
  border: 1px solid rgba(45, 38, 34, .46);
  border-radius: clamp(28px, 4vw, 50px);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.78),
    inset 0 0 0 4px rgba(52,48,45,.34),
    0 26px 40px rgba(82,39,35,.28);
}

.zys-device::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: clamp(13px, 1.7vw, 22px);
  left: 50%;
  width: 29%;
  height: clamp(10px, 1.5vw, 18px);
  background: #111;
  border-radius: 999px;
  transform: translateX(-50%);
  pointer-events: none;
}

.zys-device::after {
  content: "";
  position: absolute;
  top: 23%;
  right: -4px;
  width: 4px;
  height: 17%;
  background: linear-gradient(#777, #f3f3ef, #777);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 30px 0 #aaa;
  pointer-events: none;
}

.zys-device > img,
.zys-device:hover > img,
.zys-device:focus-visible > img {
  width: 100%;
  border-radius: clamp(22px, 3.3vw, 42px);
  filter: none;
}

.zys-device-hero {
  width: min(44%, 340px);
  margin: 0 8% 0 auto;
  transform: rotate(9deg) perspective(900px) rotateY(-8deg);
}

.zys-device-hero:hover,
.zys-device-hero:focus-visible {
  transform: translateY(-7px) rotate(9deg) perspective(900px) rotateY(-8deg);
}

.zys-ui-device-scene-a {
  min-height: clamp(450px, 58vw, 700px);
  padding-top: 3%;
}

.zys-ui-device-scene-a::before {
  content: "";
  position: absolute;
  left: 2%;
  top: 16%;
  width: 66%;
  height: 58%;
  background: linear-gradient(145deg, rgba(255,243,223,.86), rgba(244,138,120,.3));
  border: 1px solid rgba(127,45,44,.22);
  border-radius: 34px;
  transform: rotate(-7deg);
}

.zys-ui-device-scene-a::after {
  content: "↘";
  position: absolute;
  left: 4%;
  bottom: -2%;
  color: var(--zys-cream);
  font-size: clamp(110px, 20vw, 230px);
  font-weight: 300;
  line-height: .72;
  opacity: .92;
  transform: rotate(5deg);
}

.zys-ui-device-caption {
  position: absolute;
  z-index: 4;
  display: grid;
  max-width: 230px;
  padding: 13px 15px;
  color: var(--zys-deep);
  background: var(--zys-cream);
  border: 1px solid rgba(127,45,44,.25);
  box-shadow: 8px 8px 0 rgba(127,45,44,.16);
  font-size: clamp(10px, 1vw, 13px);
  line-height: 1.5;
}

.zys-ui-device-caption b {
  margin-bottom: 4px;
  font-size: 1.08em;
}

.zys-ui-device-scene-a .zys-ui-device-caption {
  left: 4%;
  top: 7%;
  transform: rotate(-3deg);
}

.zys-ui-a-flow {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
}

.zys-ui-a-flow .zys-ui-shot:nth-child(even) {
  transform: translateY(16%);
}

.zys-ui-chapter-a .zys-ui-chapter-heading,
.zys-ui-chapter-c .zys-ui-chapter-heading {
  transform: translateX(-2%);
}

.zys-ui-b-hero {
  grid-template-columns: minmax(150px, .48fr) minmax(0, 1.52fr);
  align-items: center;
}

.zys-ui-b-feature {
  min-height: clamp(520px, 64vw, 760px);
  padding: 0;
  overflow: visible;
  transform: rotate(-2deg);
}

.zys-device-pair {
  position: absolute;
  inset: 3% 3% -4% 3%;
}

.zys-device-pair .zys-device {
  position: absolute;
  width: min(42%, 330px);
}

.zys-device-pair-back {
  left: 16%;
  top: 9%;
  transform: rotate(-13deg) perspective(1000px) rotateY(8deg);
}

.zys-device-pair-front {
  right: 10%;
  bottom: 2%;
  transform: rotate(10deg) perspective(1000px) rotateY(-8deg);
}

.zys-device-pair-back:hover,
.zys-device-pair-back:focus-visible {
  transform: translateY(-6px) rotate(-13deg) perspective(1000px) rotateY(8deg);
}

.zys-device-pair-front:hover,
.zys-device-pair-front:focus-visible {
  transform: translateY(-6px) rotate(10deg) perspective(1000px) rotateY(-8deg);
}

.zys-ui-b-feature > span {
  left: 2%;
  bottom: 5%;
  z-index: 6;
}

.zys-ui-chapter-b .zys-ui-chapter-heading {
  margin-left: 35%;
}

.zys-ui-chapter-b::after {
  content: "↙";
  position: absolute;
  right: -1%;
  top: 35%;
  z-index: 1;
  color: rgba(255,243,223,.88);
  font-size: clamp(140px, 23vw, 270px);
  font-weight: 300;
  line-height: .75;
  transform: rotate(-8deg);
  pointer-events: none;
}

.zys-ui-c-layout {
  grid-template-columns: .72fr .92fr .62fr;
}

.zys-ui-device-scene-c {
  min-height: clamp(430px, 50vw, 610px);
}

.zys-device-c {
  width: min(72%, 340px);
  margin: 5% auto 0;
  transform: rotate(-8deg) perspective(900px) rotateY(7deg);
}

.zys-device-c:hover,
.zys-device-c:focus-visible {
  transform: translateY(-7px) rotate(-8deg) perspective(900px) rotateY(7deg);
}

.zys-ui-device-scene-c .zys-ui-device-caption {
  left: -3%;
  bottom: 3%;
  transform: rotate(2deg);
}

@media (max-width: 900px) {
  .zys-ui-device-scene-a { min-height: 510px; }
  .zys-device-hero { width: min(50%, 290px); }
  .zys-ui-a-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zys-ui-b-feature { min-height: 500px; }
  .zys-ui-c-layout { grid-template-columns: .7fr 1fr .65fr; }
}

@media (max-width: 700px) {
  .zys-ui-a-layout { grid-template-columns: 1fr; }
  .zys-ui-a-showcase { gap: 26px; }
  .zys-ui-device-scene-a { min-height: min(132vw, 580px); }
  .zys-device-hero { width: min(54%, 260px); margin-right: 7%; }
  .zys-ui-device-scene-a::before { left: 0; width: 72%; }
  .zys-ui-device-scene-a::after { font-size: 34vw; }
  .zys-ui-device-caption { max-width: 46%; }
  .zys-ui-a-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zys-ui-a-flow .zys-ui-shot:nth-child(even) { transform: none; }

  .zys-ui-chapter-b .zys-ui-chapter-heading { margin-left: 0; }
  .zys-ui-b-hero { grid-template-columns: 1fr; }
  .zys-ui-b-start { width: 44%; margin-left: 3%; }
  .zys-ui-b-feature { grid-column: 1; grid-row: auto; min-height: min(132vw, 580px); }
  .zys-device-pair .zys-device { width: 47%; }
  .zys-device-pair-back { left: 7%; }
  .zys-device-pair-front { right: 4%; }
  .zys-ui-chapter-b::after { display: none; }

  .zys-ui-c-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zys-ui-device-scene-c { grid-column: 1 / -1; min-height: min(125vw, 540px); }
  .zys-device-c { width: min(55%, 270px); }
  .zys-ui-c-poster { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .zys-device,
  .zys-device:hover,
  .zys-device:focus-visible {
    transition: none;
  }
}

/* Work 02 editorial board v2 — Group 317/324 composition language. */
.zys-ui-case {
  --zys-board: #5e2028;
  --zys-board-deep: #3e141c;
  --zys-board-line: rgba(255, 239, 218, .72);
  --zys-paper: #fff0d7;
  --zys-accent: #ff8878;
  color: var(--zys-paper);
  background:
    linear-gradient(rgba(255,240,215,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,240,215,.065) 1px, transparent 1px),
    radial-gradient(circle at 80% 7%, rgba(255,136,120,.2), transparent 28%),
    linear-gradient(180deg, var(--zys-board-deep), var(--zys-board) 42%, #6c2630 72%, var(--zys-board-deep));
  background-size: 54px 54px, 54px 54px, auto, auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.zys-ui-case::before,
.zys-ui-case::after {
  z-index: 0;
  border-color: rgba(255,240,215,.14);
}

.zys-ui-case-header {
  z-index: 2;
  padding: clamp(46px, 6vw, 72px) clamp(28px, 5vw, 62px) clamp(34px, 4vw, 50px);
  color: var(--zys-paper);
  border-bottom-color: rgba(255,240,215,.22);
}

.zys-ui-case-header h2 {
  max-width: none;
  color: var(--zys-paper);
  font-size: clamp(44px, 7.5vw, 86px);
  letter-spacing: -.08em;
}

.zys-ui-case-header span { color: rgba(255,240,215,.8); }
.zys-ui-case-header::after { background: repeating-linear-gradient(90deg, var(--zys-accent) 0 14px, transparent 14px 23px); }

.zys-ui-chapter {
  isolation: isolate;
  overflow: hidden;
  color: var(--zys-paper);
  border-top-color: rgba(255,240,215,.18) !important;
}

.zys-ui-chapter-a { min-height: clamp(1100px, 116vw, 1400px); }
.zys-ui-chapter-b { min-height: clamp(1450px, 152vw, 1820px); background: rgba(255,255,255,.015); }
.zys-ui-chapter-c { min-height: clamp(860px, 92vw, 1080px); }

.zys-ui-chapter-heading {
  z-index: 12;
  display: block;
  width: min(48%, 460px);
  margin: 0;
}

.zys-ui-chapter-heading strong,
.zys-ui-chapter-heading h3,
.zys-ui-chapter-heading p {
  width: fit-content;
  color: var(--zys-board-deep);
  background: var(--zys-paper);
  box-shadow: 8px 8px 0 rgba(255,136,120,.55);
}

.zys-ui-chapter-heading strong {
  display: block;
  margin: 0;
  padding: .06em .12em .1em;
  font-size: clamp(72px, 12vw, 138px);
  line-height: .78;
  letter-spacing: -.1em;
  text-shadow: none;
}

.zys-ui-chapter-heading h3 {
  margin: 9px 0 0;
  padding: .12em .25em .16em;
  font-size: clamp(38px, 6vw, 70px);
  line-height: .9;
}

.zys-ui-chapter-heading p {
  max-width: 28em;
  margin: 9px 0 0;
  padding: 10px 13px;
  font-size: clamp(11px, 1.1vw, 14px);
  line-height: 1.55;
}

.zys-ui-play-note {
  color: var(--zys-paper);
  background: #16755c;
  border-color: rgba(255,240,215,.8);
  box-shadow: 8px 9px 0 rgba(15,5,9,.26);
}

.zys-ui-shot img {
  filter: drop-shadow(0 18px 19px rgba(14,4,8,.42));
}

.zys-ui-chapter-a .zys-ui-chapter-heading {
  position: absolute;
  left: -1%;
  top: 14%;
  transform: rotate(-1deg);
}

.zys-ui-chapter-a .zys-ui-play-note {
  top: 36%;
  left: 5%;
  right: auto;
  width: min(30%, 280px);
}

.zys-ui-a-layout {
  position: absolute;
  inset: 5% 3% 4% 3%;
  display: block;
}

.zys-ui-entry-stack {
  position: absolute;
  left: 5%;
  top: 3%;
  width: 36%;
  min-height: 60%;
}

.zys-ui-entry { width: 66%; }
.zys-ui-entry-back { left: -4%; top: 3%; transform: rotate(-7deg); }
.zys-ui-entry-front { right: -2%; bottom: 6%; transform: rotate(7deg); }

.zys-ui-a-showcase {
  position: absolute;
  inset: 0;
  display: block;
}

.zys-ui-device-scene-a {
  position: absolute;
  right: 0;
  top: 0;
  width: 66%;
  min-height: 54%;
}

.zys-ui-device-scene-a::before {
  left: 17%;
  top: 12%;
  width: 72%;
  height: 66%;
  background: linear-gradient(145deg, rgba(255,240,215,.2), rgba(255,136,120,.3));
  border-color: rgba(255,240,215,.24);
}

.zys-device-hero {
  width: min(48%, 370px);
  margin: 0 7% 0 auto;
}

.zys-ui-device-scene-a .zys-ui-device-caption {
  left: 11%;
  top: 4%;
}

.zys-ui-a-flow {
  position: absolute;
  right: 2%;
  bottom: 3%;
  width: 62%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(13px, 1.8vw, 22px);
  align-items: center;
}

.zys-ui-a-flow::before,
.zys-ui-b-flow::before {
  background: var(--zys-board-line);
}

.zys-ui-a-flow .zys-ui-shot:nth-child(5) { grid-column: 2; }
.zys-ui-a-flow .zys-ui-shot:nth-child(even) { transform: translateY(12%); }

.zys-ui-device-scene-a::after {
  content: "↓";
  left: 3%;
  bottom: -42%;
  font-size: clamp(170px, 25vw, 300px);
  transform: rotate(42deg);
}

.zys-ui-route { background: var(--zys-board-line); }
.zys-ui-route::before,
.zys-ui-route::after { background: var(--zys-paper); border-color: var(--zys-accent); }

.zys-ui-chapter-b .zys-ui-chapter-heading {
  position: absolute;
  left: 27%;
  top: 28%;
  margin: 0;
  transform: rotate(-2deg);
}

.zys-ui-chapter-b .zys-ui-play-note {
  top: 31%;
  right: 6%;
  width: min(28%, 280px);
}

.zys-ui-b-hero {
  position: absolute;
  inset: 4% 4% auto 4%;
  display: block;
  height: 52%;
  margin: 0;
}

.zys-ui-b-start {
  position: absolute;
  left: 0;
  top: 2%;
  width: 25%;
  transform: rotate(-3deg);
}

.zys-ui-b-feature {
  position: absolute;
  right: 0;
  top: 0;
  width: 69%;
  min-height: 64%;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,.09) 42% 54%, transparent 54%),
    #7d3038;
  border-color: var(--zys-paper);
}

.zys-device-pair .zys-device { width: min(43%, 345px); }
.zys-device-pair-back { left: 12%; top: 7%; transform: rotate(-16deg) perspective(1000px) rotateY(8deg); }
.zys-device-pair-front { right: 7%; bottom: -1%; transform: rotate(11deg) perspective(1000px) rotateY(-8deg); }

.zys-ui-b-flow {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 51%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.55vw, 19px);
  margin: 0;
}

.zys-ui-b-flow .zys-ui-shot:nth-child(n+7) { transform: translateX(54%); }

.zys-ui-fortunes {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 5%;
  padding: clamp(13px, 2vw, 22px);
  background: rgba(255,240,215,.09);
  border-color: rgba(255,240,215,.2);
}

.zys-ui-chapter-b::after {
  content: "↓";
  right: -1%;
  top: auto;
  bottom: -3%;
  color: var(--zys-paper);
  font-size: clamp(190px, 27vw, 330px);
  transform: rotate(-42deg);
}

.zys-ui-chapter-c .zys-ui-chapter-heading {
  position: absolute;
  left: -1%;
  top: 20%;
  transform: rotate(-1deg);
}

.zys-ui-chapter-c .zys-ui-play-note {
  top: 55%;
  left: 5%;
  right: auto;
  width: min(31%, 300px);
}

.zys-ui-c-layout {
  position: absolute;
  inset: 6% 4% 4%;
  display: block;
  padding: 0;
}

.zys-ui-c-poster {
  position: absolute;
  left: 7%;
  top: 2%;
  width: 43%;
  min-height: 74%;
  opacity: .68;
  transform: rotate(-5deg);
}

.zys-ui-device-scene-c {
  position: absolute;
  right: 20%;
  top: 12%;
  width: 34%;
  min-height: 68%;
}

.zys-device-c { width: min(76%, 350px); }

.zys-ui-c-photo {
  position: absolute;
  right: 0;
  bottom: 4%;
  width: 24%;
  transform: rotate(4deg);
}

.zys-ui-c-poster::before { content: "山城记忆"; }

@media (max-width: 900px) and (min-width: 701px) {
  .zys-ui-chapter-a { min-height: 1180px; }
  .zys-ui-chapter-b { min-height: 1500px; }
  .zys-ui-chapter-c { min-height: 930px; }
  .zys-ui-chapter-heading strong { font-size: clamp(68px, 11vw, 104px); }
  .zys-ui-chapter-heading h3 { font-size: clamp(34px, 5.4vw, 54px); }
}

@media (max-width: 700px) {
  .zys-ui-case {
    border-radius: 0;
    background-size: 34px 34px, 34px 34px, auto, auto;
  }

  .zys-ui-case-header { padding-bottom: 42px; }
  .zys-ui-chapter {
    min-height: 0;
    padding: 48px 18px 74px;
    overflow: hidden;
  }

  .zys-ui-chapter-heading,
  .zys-ui-chapter-a .zys-ui-chapter-heading,
  .zys-ui-chapter-b .zys-ui-chapter-heading,
  .zys-ui-chapter-c .zys-ui-chapter-heading {
    position: relative;
    left: auto;
    top: auto;
    width: 92%;
    margin: 0 0 28px;
    transform: none;
  }

  .zys-ui-chapter-heading strong { font-size: clamp(66px, 23vw, 90px); }
  .zys-ui-chapter-heading h3 { font-size: clamp(34px, 13vw, 50px); }

  .zys-ui-chapter .zys-ui-play-note,
  .zys-ui-chapter-a .zys-ui-play-note,
  .zys-ui-chapter-b .zys-ui-play-note,
  .zys-ui-chapter-c .zys-ui-play-note {
    position: relative;
    inset: auto;
    width: auto;
    margin: 0 0 34px;
  }

  .zys-ui-a-layout,
  .zys-ui-b-hero,
  .zys-ui-c-layout {
    position: relative;
    inset: auto;
    display: block;
    height: auto;
  }

  .zys-ui-entry-stack {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: min(124vw, 520px);
  }

  .zys-ui-a-showcase { position: relative; inset: auto; }
  .zys-ui-device-scene-a { position: relative; inset: auto; width: 100%; min-height: min(125vw, 540px); }
  .zys-ui-a-flow { position: relative; inset: auto; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zys-ui-a-flow .zys-ui-shot:nth-child(5) { grid-column: auto; }

  .zys-ui-b-start { position: relative; inset: auto; width: 48%; margin: 0 auto 28px 4%; }
  .zys-ui-b-feature { position: relative; inset: auto; width: 100%; min-height: min(128vw, 560px); }
  .zys-ui-b-flow { position: relative; inset: auto; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 40px; }
  .zys-ui-b-flow .zys-ui-shot:nth-child(n+7) { transform: none; }
  .zys-ui-fortunes { position: relative; inset: auto; margin-top: 36px; }

  .zys-ui-c-poster { position: relative; inset: auto; width: 100%; min-height: 300px; margin-bottom: 34px; }
  .zys-ui-device-scene-c { position: relative; inset: auto; width: 100%; min-height: min(123vw, 520px); }
  .zys-ui-c-photo { position: relative; inset: auto; width: 58%; margin: 0 0 0 auto; }

  .zys-ui-device-scene-a::after,
  .zys-ui-chapter-b::after { display: none; }
}

/* Work 02 UI case study: warm temple-fair editorial flow. */
.zys-ui-case {
  --zys-red: #d9574f;
  --zys-deep: #7f2d2c;
  --zys-coral: #f48a78;
  --zys-peach: #f7bca9;
  --zys-cream: #fff3df;
  --zys-ink: #4b2423;
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 36px auto 0;
  overflow: hidden;
  color: var(--zys-ink);
  background:
    linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px),
    radial-gradient(circle at 15% 6%, rgba(255,243,223,.9) 0 9%, transparent 9.2%),
    linear-gradient(145deg, #f9c8b7 0%, #f4a895 50%, #ef8d7d 100%);
  background-size: 46px 46px, 46px 46px, auto, auto;
  border: 1px solid rgba(127,45,44,.2);
  border-radius: 34px;
  box-shadow: 0 26px 60px rgba(110,43,39,.18);
}

.zys-ui-case::before,
.zys-ui-case::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 2px solid rgba(255,243,223,.48);
  border-radius: 50%;
  pointer-events: none;
}

.zys-ui-case::before {
  top: 8%;
  right: -13%;
  width: 42%;
  aspect-ratio: 1;
}

.zys-ui-case::after {
  left: -17%;
  bottom: 19%;
  width: 48%;
  aspect-ratio: 1;
}

.zys-ui-case-header {
  position: relative;
  padding: clamp(44px, 6vw, 76px) clamp(30px, 5.5vw, 72px) clamp(30px, 4vw, 52px);
  border-bottom: 1px solid rgba(127,45,44,.22);
}

.zys-ui-case-header::after {
  content: "";
  position: absolute;
  right: clamp(30px, 5.5vw, 72px);
  bottom: -8px;
  width: clamp(110px, 18vw, 190px);
  height: 15px;
  background: repeating-linear-gradient(90deg, var(--zys-deep) 0 12px, transparent 12px 20px);
  opacity: .7;
}

.zys-ui-case-header p {
  margin: 0 0 10px;
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 800;
  letter-spacing: .17em;
}

.zys-ui-case-header h2 {
  margin: 0;
  max-width: 9em;
  color: var(--zys-deep);
  font-size: clamp(40px, 7vw, 78px);
  line-height: .96;
  letter-spacing: -.07em;
}

.zys-ui-case-header span {
  display: block;
  max-width: 38em;
  margin-top: 20px;
  font-size: clamp(13px, 1.5vw, 17px);
  line-height: 1.8;
}

.zys-ui-chapter {
  position: relative;
  padding: clamp(54px, 7vw, 88px) clamp(28px, 5vw, 64px) clamp(70px, 8vw, 104px);
}

.zys-ui-chapter + .zys-ui-chapter {
  border-top: 1px solid rgba(127,45,44,.22);
}

.zys-ui-chapter-heading {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  width: fit-content;
  max-width: 100%;
  margin-bottom: clamp(34px, 5vw, 60px);
}

.zys-ui-chapter-heading strong {
  grid-row: 1 / 3;
  margin-right: 16px;
  color: var(--zys-cream);
  font-size: clamp(54px, 9vw, 104px);
  font-weight: 950;
  line-height: .78;
  letter-spacing: -.09em;
  text-shadow: 3px 3px 0 var(--zys-deep);
}

.zys-ui-chapter-heading h3 {
  margin: 0;
  color: var(--zys-deep);
  font-size: clamp(30px, 4.7vw, 58px);
  line-height: .9;
  letter-spacing: -.06em;
}

.zys-ui-chapter-heading p {
  max-width: 35em;
  margin: 11px 0 0;
  font-size: clamp(12px, 1.2vw, 15px);
  line-height: 1.65;
}

.zys-ui-play-note {
  position: absolute;
  top: clamp(66px, 8vw, 102px);
  right: clamp(28px, 5vw, 64px);
  z-index: 5;
  display: grid;
  width: min(31%, 300px);
  padding: 14px 16px 16px;
  color: #fff8e9;
  background: #16755c;
  border: 2px solid rgba(255,243,223,.72);
  border-radius: 18px 18px 18px 4px;
  box-shadow: 8px 9px 0 rgba(127,45,44,.18);
  transform: rotate(1.5deg);
}

.zys-ui-play-note b {
  font-size: clamp(12px, 1.25vw, 15px);
  line-height: 1.25;
}

.zys-ui-play-note span {
  margin-top: 7px;
  font-size: clamp(10px, 1vw, 12px);
  line-height: 1.6;
  opacity: .9;
}

.zys-ui-shot {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.zys-ui-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8.5% / 4.2%;
  filter: drop-shadow(0 16px 18px rgba(93,42,39,.22));
  transition: transform .28s ease, filter .28s ease;
}

.zys-ui-shot:hover img,
.zys-ui-shot:focus-visible img {
  transform: translateY(-6px);
  filter: drop-shadow(0 22px 22px rgba(93,42,39,.28));
}

.zys-ui-shot:focus-visible {
  outline: 3px solid var(--zys-cream);
  outline-offset: 5px;
  border-radius: 22px;
}

.zys-ui-a-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(220px, .82fr) minmax(0, 1.6fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
}

.zys-ui-entry-stack {
  position: relative;
  min-height: 580px;
}

.zys-ui-entry {
  position: absolute;
  width: 70%;
}

.zys-ui-entry img {
  border-radius: 28px;
}

.zys-ui-entry-back {
  top: 0;
  left: 0;
  transform: rotate(-5deg);
}

.zys-ui-entry-front {
  right: 0;
  bottom: 0;
  z-index: 2;
  transform: rotate(6deg);
}

.zys-ui-orbit {
  position: absolute;
  right: 2%;
  top: 17%;
  width: 46%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,243,223,.8);
  border-radius: 50%;
}

.zys-ui-orbit::before,
.zys-ui-orbit::after {
  content: "";
  position: absolute;
  width: 12px;
  aspect-ratio: 1;
  background: var(--zys-cream);
  border: 4px solid var(--zys-red);
  border-radius: 50%;
}

.zys-ui-orbit::before { left: -7px; top: 48%; }
.zys-ui-orbit::after { right: 8%; bottom: -3px; }

.zys-ui-flow {
  position: relative;
  display: grid;
  gap: clamp(12px, 1.7vw, 20px);
}

.zys-ui-a-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}

.zys-ui-a-flow::before,
.zys-ui-b-flow::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  z-index: -1;
  height: 2px;
  background: rgba(255,243,223,.8);
}

.zys-ui-a-flow .zys-ui-shot::after,
.zys-ui-b-flow .zys-ui-shot::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  z-index: 3;
  width: 8px;
  aspect-ratio: 1;
  background: var(--zys-cream);
  border: 2px solid var(--zys-red);
  border-radius: 50%;
  transform: translate(50%, -50%);
}

.zys-ui-a-flow .is-lead {
  grid-row: span 2;
  transform: scale(1.1) rotate(-2deg);
  transform-origin: center;
}

.zys-ui-route {
  position: absolute;
  z-index: 0;
  display: block;
  width: 2px;
  background: rgba(255,243,223,.82);
  pointer-events: none;
}

.zys-ui-route::before,
.zys-ui-route::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 12px;
  aspect-ratio: 1;
  background: var(--zys-cream);
  border: 3px solid var(--zys-red);
  border-radius: 50%;
  transform: translateX(-50%);
}

.zys-ui-route::before { top: -6px; }
.zys-ui-route::after { bottom: -6px; }
.zys-ui-route-a { right: 5%; bottom: -34px; height: 78px; }
.zys-ui-route-b { left: 7%; bottom: -34px; height: 78px; }
.zys-ui-route-c { display: none; }

.zys-ui-chapter-b {
  background: linear-gradient(160deg, rgba(255,243,223,.24), rgba(217,87,79,.06));
}

.zys-ui-b-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .72fr 1.38fr .7fr;
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
  margin-bottom: clamp(44px, 6vw, 72px);
}

.zys-ui-b-start { transform: rotate(-5deg); }
.zys-ui-b-result { transform: rotate(5deg); }

.zys-ui-b-feature {
  position: relative;
  min-height: 400px;
  padding: 12% 10%;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,.22) 42% 54%, transparent 54%),
    var(--zys-deep);
  border: 8px solid var(--zys-cream);
  border-radius: 34px;
  box-shadow: 0 22px 34px rgba(93,42,39,.24);
  transform: rotate(-3deg);
}

.zys-ui-b-feature > span {
  position: absolute;
  left: -7%;
  bottom: 8%;
  z-index: 3;
  padding: 8px 15px;
  color: var(--zys-deep);
  background: var(--zys-cream);
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotate(-4deg);
}

.zys-ui-b-feature .zys-ui-shot {
  width: 56%;
  margin: -4% auto 0;
  transform: rotate(8deg);
}

.zys-ui-b-flow {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  margin-bottom: clamp(38px, 5vw, 58px);
}

.zys-ui-b-flow .zys-ui-shot:nth-child(n+7) {
  transform: translateX(54%);
}

.zys-ui-fortunes {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(16px, 2.5vw, 28px);
  background: rgba(255,243,223,.55);
  border: 1px solid rgba(127,45,44,.2);
  border-radius: 26px;
}

.zys-ui-fortunes .zys-ui-shot img {
  border-radius: 12px;
  filter: drop-shadow(0 10px 10px rgba(93,42,39,.14));
}

.zys-ui-chapter-c {
  min-height: 740px;
}

.zys-ui-c-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .9fr .68fr .68fr;
  gap: clamp(20px, 4vw, 52px);
  align-items: center;
  padding-top: 12px;
}

.zys-ui-c-poster {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,243,223,.95) 0 19%, transparent 19.5%),
    repeating-radial-gradient(circle at 50% 45%, transparent 0 38px, rgba(255,243,223,.24) 39px 41px),
    var(--zys-deep);
  border: 8px solid var(--zys-cream);
  border-radius: 36px;
  box-shadow: 0 22px 34px rgba(93,42,39,.22);
  transform: rotate(-4deg);
}

.zys-ui-c-poster::before {
  content: "山城记忆";
  position: absolute;
  left: 12%;
  bottom: 9%;
  color: var(--zys-cream);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 900;
  writing-mode: vertical-rl;
  letter-spacing: .1em;
}

.zys-ui-c-poster span {
  position: absolute;
  top: 8%;
  right: 10%;
  color: var(--zys-coral);
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 950;
  line-height: .88;
  text-align: right;
  text-shadow: 2px 2px 0 var(--zys-cream);
}

.zys-ui-c-start { transform: rotate(4deg); }
.zys-ui-c-photo { transform: rotate(-2deg); }

@media (max-width: 900px) {
  .zys-ui-case { border-radius: 26px; }
  .zys-ui-a-layout { grid-template-columns: minmax(190px, .7fr) minmax(0, 1.4fr); }
  .zys-ui-entry-stack { min-height: 470px; }
  .zys-ui-a-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zys-ui-a-flow .is-lead { grid-row: span 2; }
  .zys-ui-b-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .zys-ui-b-flow .zys-ui-shot:nth-child(n+7) { transform: none; }
  .zys-ui-b-feature { min-height: 330px; }
  .zys-ui-c-poster { min-height: 430px; }
}

@media (max-width: 700px) {
  .zys-ui-case {
    width: 100%;
    margin-top: 22px;
    border-radius: 20px;
    background-size: 30px 30px, 30px 30px, auto, auto;
  }

  .zys-ui-case-header,
  .zys-ui-chapter {
    padding-left: 18px;
    padding-right: 18px;
  }

  .zys-ui-case-header { padding-top: 38px; }
  .zys-ui-chapter { padding-top: 52px; padding-bottom: 66px; }
  .zys-ui-chapter-heading { grid-template-columns: 1fr; align-items: start; }
  .zys-ui-chapter-heading strong { grid-row: auto; margin: 0 0 14px; font-size: clamp(56px, 22vw, 82px); }
  .zys-ui-chapter-heading h3 { font-size: clamp(34px, 12vw, 48px); }
  .zys-ui-play-note {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin: -16px 0 34px;
    transform: none;
  }

  .zys-ui-a-layout { grid-template-columns: 1fr; }
  .zys-ui-entry-stack { min-height: min(122vw, 560px); }
  .zys-ui-entry { width: 62%; }
  .zys-ui-a-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .zys-ui-a-flow .is-lead { grid-row: auto; transform: none; }

  .zys-ui-b-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zys-ui-b-feature { grid-column: 1 / -1; grid-row: 1; min-height: 300px; }
  .zys-ui-b-start,
  .zys-ui-b-result { transform: none; }
  .zys-ui-b-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .zys-ui-fortunes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .zys-ui-c-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zys-ui-c-poster { grid-column: 1 / -1; min-height: 300px; }
  .zys-ui-c-start,
  .zys-ui-c-photo { transform: none; }
  .zys-ui-chapter-c { min-height: 0; }
  .zys-ui-route { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .zys-ui-shot img { transition: none; }
}

.play-note-camera-screen > .play-note-camera-art {
  position: absolute;
  inset: 0;
}

@keyframes playNoteCameraSwap {
  0% { opacity: .4; }
  100% { opacity: 1; }
}
@keyframes packIdleWobble {
  0%, 100% { transform: rotate(-.7deg) scale(1); }
  34% { transform: translateY(-3px) rotate(1deg) scale(1.012); }
  68% { transform: translateY(1px) rotate(-.35deg) scale(1.004); }
}
@keyframes packIdleGlow {
  0%, 100% { opacity: .48; transform: scale(.96); }
  50% { opacity: .86; transform: scale(1.05); }
}
@keyframes packBodyOpen {
  0% {
    transform: translateZ(10px) translateY(0) scaleY(1);
    filter: brightness(1);
  }
  58% {
    transform: translateZ(12px) translateY(16px) scaleY(.98);
    filter: brightness(.98);
  }
  100% {
    transform: translateZ(12px) translateY(24px) scaleY(.96);
    filter: brightness(.96);
  }
}
@keyframes packTopTearAway {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scaleY(1);
  }
  62% {
    transform: translateY(-34px) translateX(calc(var(--pack-swipe-x, 0px) * .08)) rotate(-3deg) scaleY(.92);
  }
  100% {
    transform: translateY(-62px) translateX(calc(var(--pack-swipe-x, 0px) * .12)) rotate(-5deg) scaleY(.84);
  }
}
@keyframes packTearSeam {
  0% {
    top: 17%;
    opacity: 0;
    transform: translateX(0) scaleX(.16);
  }
  62% {
    top: 21%;
    opacity: .76;
    transform: translateX(calc(var(--pack-swipe-x, 0px) * .04)) scaleX(.9);
  }
  100% {
    top: 24%;
    opacity: .64;
    transform: translateX(calc(var(--pack-swipe-x, 0px) * .05)) scaleX(1);
  }
}
@keyframes packTearFlash {
  0%, 70% {
    opacity: 0;
  }
  82% {
    opacity: .72;
    background:
      radial-gradient(circle at 50% 24%, rgba(255,255,255,.74), rgba(255,255,255,.2) 14%, transparent 28%),
      linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
    filter: blur(.8px);
  }
  100% {
    opacity: 0;
  }
}
@keyframes packLeave {
  0% {
    opacity: 1;
    transform: translate(-50%, -24%) translateX(calc(var(--pack-swipe-x, 0px) * .18)) translateZ(180px) rotate(0deg) scale(3.18);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 34%) translateZ(30px) rotateX(10deg) rotateY(-7deg) scale(.92);
  }
}
@keyframes pulledFan {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 76px) rotate(0deg) scale(.82);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 54px) rotate(0deg) scale(.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--pull-x, 0), var(--pull-y, -78px)) rotate(var(--pull-rot, 0deg)) scale(.98);
  }
}
@keyframes cardPeekFromPack {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 382px) rotate(0deg) scale(2.04);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--peek-x, 0), var(--peek-y, 322px)) rotate(0deg) scale(2.36);
  }
}
@keyframes cardSliderCue {
  0%, 100% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(-3deg);
  }
  48% {
    transform: translate(-50%, -50%) translate(96px, 10px) rotate(2deg);
  }
}
@keyframes pulledCardHoverWiggle {
  0%, 100% {
    transform: translate(-50%, -50%) translate(var(--pull-x, 0), calc(var(--pull-y, -78px) - 18px)) rotate(var(--pull-rot, 0deg)) scale(.98);
  }
  28% {
    transform: translate(-50%, -50%) translate(var(--pull-x, 0), calc(var(--pull-y, -78px) - 21px)) rotate(calc(var(--pull-rot, 0deg) - .8deg)) scale(.98);
  }
  58% {
    transform: translate(-50%, -50%) translate(var(--pull-x, 0), calc(var(--pull-y, -78px) - 16px)) rotate(calc(var(--pull-rot, 0deg) + .7deg)) scale(.98);
  }
}
@keyframes packHandSlide {
  0%, 100% { transform: translateX(0) rotate(-18deg); opacity: .92; }
  52% { transform: translateX(56px) rotate(-10deg); opacity: 1; }
}
.catshroom-card-stage.is-dragging .catshroom-card,
.catshroom-card-stage.is-dragging .catshroom-card:hover {
  filter: none;
  transition: none;
}
.catshroom-card-stage.is-dragging .catshroom-card-face {
  box-shadow: none;
}
.work-triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  width: min(1420px, 100%);
  margin: 42px auto 38px;
}
.work-triptych .work-gallery-image img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}
.work-gallery-image {
  cursor: zoom-in;
}
.work-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid #315cff;
  border-radius: 8px;
  color: #315cff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.34)),
    rgba(241,238,231,.72);
  box-shadow:
    0 0 8px rgba(255,255,255,.78),
    0 0 18px rgba(100,163,255,.22);
  transform: translateY(-50%);
}
.work-gallery-arrow.is-prev { left: 0; }
.work-gallery-arrow.is-next { right: 0; }
.work-gallery-arrow svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.work-gallery-arrow:hover {
  color: #fff;
  background: #3d63ff;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
}
.work-gallery-arrow:disabled {
  opacity: .32;
  pointer-events: none;
}
.work-image-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  place-items: center;
  padding: 28px;
}
.work-image-modal.is-open { display: grid; }
.work-image-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(18,23,46,.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.work-image-modal-window {
  position: relative;
  z-index: 1;
  width: min(1560px, 94vw);
  max-height: 90vh;
  padding: 14px;
  border: 1.5px solid #315cff;
  border-radius: 8px;
  background: rgba(241,238,231,.96);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.62) inset,
    0 0 34px rgba(49,92,255,.28);
}
.work-image-modal-window img {
  display: block;
  width: 100%;
  max-height: calc(90vh - 30px);
  object-fit: contain;
  image-rendering: auto;
}
.work-image-modal.is-shanshui-modal {
  box-sizing: border-box;
}
.work-image-modal.is-shanshui-modal .work-image-modal-window {
  box-sizing: border-box;
  width: fit-content;
  max-width: 94vw;
  max-height: 90vh;
}
.work-image-modal.is-shanshui-modal .work-image-modal-window img {
  width: auto;
  max-width: calc(94vw - 28px);
  height: auto;
  max-height: calc(90vh - 28px);
}
.work-image-close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid #315cff;
  border-radius: 7px;
  color: #315cff;
  background: #f1eee7;
  box-shadow: 0 0 18px rgba(49,92,255,.24);
  font-size: 24px;
  font-weight: 800;
}
.reference-about-page {
  color: #315cff;
  background: #f1eee7;
}
.reference-about-page::after {
  display: none;
}
.reference-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 76px;
  margin: 0;
  padding: 0 clamp(34px, 5.6vw, 86px);
  border: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
.reference-header::before {
  content: "";
  position: absolute;
  left: clamp(12px, 2.6vw, 38px);
  right: clamp(12px, 2.6vw, 38px);
  top: 0;
  height: calc(100% - 8px);
  z-index: 0;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.42)),
    rgba(241,238,231,.28);
  border: 1px solid rgba(255,255,255,.42);
  border-top: 0;
  box-shadow:
    0 12px 28px rgba(80,92,120,.08),
    inset 0 1px 0 rgba(255,255,255,.72),
    0 0 22px rgba(255,255,255,.38);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  pointer-events: none;
}
.reference-header .brand,
.reference-header nav,
.reference-header .language-switch {
  pointer-events: auto;
}
.reference-header .brand,
.reference-header nav a,
.reference-header .language-switch button {
  color: #2f5dff;
  text-shadow:
    0 0 4px rgba(255,255,255,.96),
    0 0 12px rgba(255,255,255,.82),
    0 0 20px rgba(114,178,255,.72);
}
.reference-header .brand {
  height: 25px;
  font: 800 14px/1 "Geely Design Type", "Arial", "Microsoft YaHei", sans-serif;
  letter-spacing: .04em;
  animation: none;
  transform: none;
}
.reference-header nav a {
  font: 900 15px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  letter-spacing: .02em;
}
.reference-header .language-switch button {
  font: 800 13px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
}
.reference-header .language-switch {
  position: absolute;
  z-index: 260;
  left: calc(50% - 36px);
  top: 50%;
  transform: translate(-50%, -50%);
  animation: none;
  box-shadow: 0 0 8px rgba(255,255,255,.42);
  background: rgba(241,238,231,.28);
  border-color: #2f5dff;
}
.reference-header .language-switch button:first-child {
  color: #2f5dff;
  background: transparent;
  text-shadow:
    0 0 4px rgba(255,255,255,.96),
    0 0 12px rgba(255,255,255,.82);
}
.reference-header .language-switch button.is-active {
  color: #fff;
  background: #3d63ff;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
}
.reference-header .language-switch button:not(.is-active):hover {
  color: #fff;
  text-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 18px rgba(80,150,255,.95),
    0 0 34px rgba(255,240,132,.72);
}
.reference-header .theme-toggle {
  z-index: 260;
  left: calc(50% + 12px);
  top: 50%;
  transform: translateY(-50%);
  animation: none;
}
.reference-header nav {
  display: flex;
  justify-self: auto;
  animation: none;
  transform: none;
}
.reference-about {
  width: min(1090px, calc(100% - 48px));
  margin: 0 auto;
  padding: 140px 0 120px;
}
.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 44%) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 72px);
  align-items: center;
  margin-top: 86px;
}
.about-portrait {
  position: relative;
  margin: 0;
  border: 4px solid #315cff;
  background: rgba(255,255,255,.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.9),
    0 0 0 6px rgba(49,92,255,.12),
    0 0 18px rgba(49,92,255,.22);
  text-align: center;
  image-rendering: pixelated;
}
.about-portrait::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px dashed rgba(49,92,255,.82);
  pointer-events: none;
}
.portrait-image-slot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: .76;
  overflow: hidden;
  background: #d6e5ff;
}
.portrait-image-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait-role-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-grid;
  place-items: center;
  min-height: 25px;
  padding: 0 14px;
  border: 1px solid #2f5dff;
  border-radius: 3px;
  color: #fff;
  background: #3d63ff;
  box-shadow: 0 0 8px rgba(255,255,255,.42);
  text-shadow: 0 0 8px rgba(255,255,255,.9);
  font: 800 12px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  white-space: nowrap;
}
.about-portrait figcaption {
  padding: 18px;
  color: #315cff;
  font-weight: 900;
}
.about-copy h1 {
  margin: 0 0 30px;
  color: #315cff;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.48;
  font-weight: 900;
}
.about-copy p,
.reference-about .contact-line {
  max-width: 680px;
  color: #315cff;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 800;
}
.about-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  margin-top: 90px;
  text-align: center;
}
.about-timeline span,
.about-skill-strip p {
  color: #315cff;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}
.about-skill-strip {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1.5px solid rgba(49,92,255,.38);
}
@media (max-width: 900px) {
  .reference-header {
    height: 104px;
    min-height: 0;
    padding: 18px 20px;
    align-items: flex-start;
  }
  .reference-header .brand {
    position: absolute;
    left: 20px;
    top: 18px;
    height: 25px;
    align-items: center;
  }
  .reference-header nav {
    position: absolute;
    top: 62px;
    left: 20px;
    right: 20px;
    min-height: 22px;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    max-width: none;
    animation: none;
    transform: none;
  }
  .reference-header .language-switch {
    left: auto;
    right: 92px;
    top: 18px;
    transform: none;
  }
  .reference-header .theme-toggle {
    left: auto;
    right: 20px;
    top: 18px;
    transform: none;
  }
  .about-hero-grid,
  .about-timeline {
    grid-template-columns: 1fr;
  }
  .works-grid { grid-template-columns: 1fr; }
  .play-board { min-height: 520px; }
  .play-card { width: 210px; }
  .card-a { left: 5%; top: 10%; }
  .card-b { left: 28%; top: 26%; }
  .card-c { right: 4%; top: 44%; }
  .card-d { left: 8%; bottom: 14%; }
  .card-e { right: 8%; bottom: 2%; }
  .contact-icons { flex-wrap: wrap; gap: 28px; }
  .reference-inner {
    padding-right: 0;
  }
  .reference-about {
    width: min(100% - 36px, 1090px);
    padding: 104px 0 82px;
  }
  .about-hero-grid {
    gap: 30px;
    margin-top: 56px;
  }
  .about-timeline {
    gap: 16px;
    margin-top: 52px;
  }
}
@media (max-width: 620px) {
  .reference-header {
    height: 104px;
    padding: 18px 20px;
    align-items: flex-start;
  }
  .reference-header .brand {
    position: absolute;
    left: 20px;
    top: 18px;
    height: 22px;
    font-size: 12px;
    align-items: center;
    animation: none;
    transform: none;
  }
  .reference-header .language-switch {
    left: auto;
    right: 92px;
    top: 18px;
    grid-template-columns: 48px 48px;
    width: 96px;
    height: 22px;
    animation: none;
    transform: none;
  }
  .reference-header .theme-toggle {
    left: auto;
    right: 20px;
    top: 18px;
    width: 72px;
    height: 22px;
    grid-template-columns: 36px 36px;
    animation: none;
    transform: none;
  }
  .reference-header nav {
    position: absolute;
    top: 62px;
    left: 20px;
    right: 20px;
    min-height: 22px;
    max-width: none;
    align-items: center;
    justify-content: space-around;
    animation: none;
    transform: none;
  }
  .reference-about {
    width: calc(100% - 28px);
    padding: 88px 0 64px;
  }
  .about-hero-grid {
    gap: 22px;
    margin-top: 42px;
  }
  .about-copy h1 {
    margin-bottom: 20px;
  }
  .about-timeline {
    gap: 12px;
    margin-top: 38px;
  }
}

@media (max-width: 600px) {
  .desktop-bar,
  .reference-header {
    height: 92px;
  }
  .brand,
  .reference-header .brand {
    top: 16px;
    max-width: calc(100% - 190px);
  }
  .language-switch,
  .reference-header .language-switch {
    right: 84px;
    top: 16px;
    grid-template-columns: 42px 42px;
    width: 84px;
    height: 22px;
  }
  .theme-toggle,
  .reference-header .theme-toggle {
    right: 20px;
    top: 16px;
    width: 64px;
    height: 22px;
    grid-template-columns: 32px 32px;
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    left: auto;
    right: 20px;
    top: 52px;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .desktop-bar nav,
  .reference-header nav {
    top: 88px;
    left: auto;
    right: 20px;
    display: grid;
    justify-items: end;
    gap: 9px;
    min-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .26s ease, transform .26s ease;
  }
  body.site-menu-open .desktop-bar nav,
  body.site-menu-open .reference-header nav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .desktop-bar nav button,
  .desktop-bar nav a,
  .reference-header nav a {
    font-size: 12px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .22s ease, transform .22s ease;
  }
  body.site-menu-open .desktop-bar,
  body.site-menu-open .reference-header {
    height: 166px;
  }
  body.site-menu-open .desktop-bar nav button,
  body.site-menu-open .desktop-bar nav a,
  body.site-menu-open .reference-header nav a {
    opacity: 1;
    transform: translateY(0);
  }
  body.site-menu-open .desktop-bar nav > :nth-child(1),
  body.site-menu-open .reference-header nav > :nth-child(1) { transition-delay: .02s; }
  body.site-menu-open .desktop-bar nav > :nth-child(2),
  body.site-menu-open .reference-header nav > :nth-child(2) { transition-delay: .07s; }
  body.site-menu-open .desktop-bar nav > :nth-child(3),
  body.site-menu-open .reference-header nav > :nth-child(3) { transition-delay: .12s; }
  body.site-menu-open .desktop-bar nav > :nth-child(4),
  body.site-menu-open .reference-header nav > :nth-child(4) { transition-delay: .17s; }
}

/* Compact scrolling rhythm */
.reference-section {
  min-height: auto;
  padding: clamp(52px, 7vh, 88px) 0;
}
.works-section.reference-section {
  padding-top: clamp(92px, 11vh, 132px);
}
.reference-section + .reference-section {
  margin-top: 0;
}
.works-grid {
  gap: clamp(24px, 3.2vw, 36px) clamp(18px, 2.6vw, 28px);
  margin-top: 18px;
}
.work-card h2 {
  margin-top: 10px;
}
.section-note {
  margin-top: 14px;
}
.play-board {
  min-height: clamp(430px, 52vh, 560px);
  margin-top: 18px;
}
.contact-section.reference-section {
  padding-top: clamp(38px, 5vh, 64px);
  padding-bottom: clamp(28px, 4vh, 54px);
}
.contact-inner {
  min-height: 170px;
  padding-bottom: 10px;
}
.contact-icons {
  gap: clamp(82px, 10vw, 150px);
  margin: 18px 0 12px;
}
.reference-about {
  padding-top: clamp(104px, 12vh, 132px);
  padding-bottom: clamp(58px, 7vh, 84px);
}
.about-hero-grid {
  margin-top: clamp(42px, 5vh, 64px);
  gap: clamp(24px, 4vw, 48px);
}
.about-timeline {
  margin-top: clamp(38px, 5vh, 58px);
}

@media (max-width: 1040px) {
  .reference-section {
    padding-top: 42px;
    padding-bottom: 42px;
  }
  .works-section.reference-section {
    padding-top: 86px;
  }
  .works-grid {
    gap: 20px 16px;
    margin-top: 14px;
  }
  .play-board {
    min-height: 420px;
    margin-top: 14px;
  }
  .contact-section.reference-section {
    padding-top: 30px;
    padding-bottom: 34px;
  }
}

@media (max-width: 620px) {
  .reference-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .works-section.reference-section {
    padding-top: 72px;
  }
  .works-grid {
    gap: 14px;
    margin-top: 10px;
  }
  .work-card h2 {
    margin-top: 7px;
  }
  .work-card p {
    line-height: 1.28;
  }
  .section-note {
    margin-top: 10px;
    line-height: 1.4;
  }
  .play-board {
    min-height: 340px;
    margin-top: 12px;
  }
  .contact-section.reference-section {
    padding-top: 22px;
    padding-bottom: 26px;
  }
  .contact-inner {
    min-height: 140px;
  }
  .contact-icons {
    gap: 12px;
    margin: 12px 0 8px;
  }
  .reference-about {
    padding-top: 86px;
    padding-bottom: 48px;
  }
  .about-hero-grid {
    margin-top: 28px;
    gap: 16px;
  }
  .about-timeline {
    margin-top: 28px;
  }
  .work-gallery {
    padding: 0 42px;
  }
  .detail-cover {
    width: calc(100% - 84px);
  }
  .work-gallery-arrow {
    width: 34px;
    height: 34px;
  }
  .work-triptych {
    grid-template-columns: 1fr;
  }
  .work-gallery-pair {
    grid-template-columns: 1fr;
  }
  .work-gallery.is-mobile-single .work-gallery-pair,
  .work-gallery.is-mobile-single .work-triptych {
    display: contents;
  }
  .work-gallery.is-mobile-single .work-gallery-image,
  .work-gallery.is-mobile-single .work-gallery-video-page {
    flex: 0 0 100%;
  }
  .work-detail-nav {
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
  }
  .work-detail-gallery .work-detail-nav {
    margin-left: 0;
    margin-right: 0;
  }
  .work-sibling-links {
    margin-left: auto;
    gap: 8px;
  }
  .work-detail-nav .path-button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 14px;
  }
  .catshroom-card-stage {
    min-height: 430px;
  }
  .catshroom-card {
    width: clamp(96px, 28vw, 145px);
  }
  .catshroom-card.is-active,
  .catshroom-card.is-active.is-flipped {
    transform: translate(-50%, -54%) translateZ(70px) rotateX(var(--active-tilt-x, 0deg)) rotateY(var(--active-tilt-y, 0deg)) scale(1.26);
  }
  .catshroom-card-hint span {
    display: inline;
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .reference-section {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .works-section.reference-section {
    padding-top: 66px;
  }
  .play-board {
    min-height: 300px;
  }
  .reference-about,
  .work-detail {
    padding-top: 82px;
  }
}

@media (max-width: 1040px) {
  .desktop-stage {
    min-height: 82vh;
    height: 82vh;
  }
  .hero-window,
  .desktop-bg {
    top: 54%;
    width: min(94vw, calc(70vh * 1.5));
  }
  .desktop-stage,
  .reference-section,
  .work-detail,
  .reference-about {
    scroll-margin-top: 116px;
  }
  .works-section.reference-section {
    padding-top: clamp(112px, 13vh, 152px);
  }
  .reference-section {
    padding-top: clamp(76px, 9vh, 112px);
    padding-bottom: clamp(64px, 8vh, 104px);
  }
  .reference-inner {
    width: min(var(--hero-width), calc(100% - clamp(30px, 5vw, 48px)));
  }
  .works-grid {
    gap: clamp(28px, 4vw, 38px) clamp(18px, 3vw, 26px);
  }
  .play-board {
    margin-top: 24px;
    min-height: clamp(500px, 62vh, 600px);
  }
  .contact-icons {
    gap: clamp(54px, 7vw, 96px);
  }
  .reference-about {
    padding-top: 118px;
  }
}

@media (max-width: 620px) {
  .desktop-stage {
    min-height: 76vh;
    height: 76vh;
  }
  .hero-window,
  .desktop-bg {
    top: 55%;
    width: min(94vw, calc(62vh * 1.5));
  }
  .desktop-stage,
  .reference-section,
  .work-detail,
  .reference-about {
    scroll-margin-top: 104px;
  }
  .works-section.reference-section {
    padding-top: 94px;
  }
  .reference-section {
    padding-top: 54px;
    padding-bottom: 54px;
  }
  .reference-inner {
    width: calc(100% - 28px);
  }
  .works-grid {
    gap: 22px;
    margin-top: 16px;
  }
  .play-board {
    margin-top: 18px;
    min-height: 440px;
  }
  .contact-inner {
    min-height: 190px;
    padding-bottom: 12px;
  }
  .contact-icons {
    gap: 44px;
    margin: 18px 0 14px;
  }
  .reference-about {
    padding-top: 100px;
  }
  .about-hero-grid {
    gap: 20px;
    margin-top: 36px;
  }
}

@media (max-width: 560px) {
  .desktop-stage {
    min-height: 72vh;
    height: 72vh;
  }
  .hero-window,
  .desktop-bg {
    top: 56%;
    width: min(94vw, calc(58vh * 1.5));
  }
  .desktop-stage,
  .reference-section,
  .work-detail,
  .reference-about {
    scroll-margin-top: 98px;
  }
  body.site-menu-open .desktop-stage,
  body.site-menu-open .reference-section,
  body.site-menu-open .work-detail,
  body.site-menu-open .reference-about {
    scroll-margin-top: 198px;
  }
  .works-section.reference-section {
    padding-top: 88px;
  }
  .reference-about,
  .work-detail {
    padding-top: 96px;
  }
  body.site-menu-open .reference-about,
  body.site-menu-open .work-detail {
    padding-top: 172px;
  }
  .language-switch button[data-tooltip]::after,
  .theme-toggle span[data-tooltip]::after {
    z-index: 10001;
  }
  .menu-toggle {
    z-index: 240;
  }
  .desktop-bar nav,
  .reference-header nav {
    top: 82px;
    right: 20px;
    left: auto;
    width: max-content;
    min-width: 0;
    justify-items: end;
    align-items: start;
    justify-content: end;
    gap: 4px;
    text-align: right;
  }
  .desktop-bar nav button,
  .desktop-bar nav a,
  .reference-header nav a {
    display: block;
    width: max-content;
    justify-self: end;
    min-height: 28px;
    font: 900 13px/28px "Geely Design Type", "Microsoft YaHei", sans-serif;
    white-space: nowrap;
    text-align: right;
  }
  body.site-menu-open .desktop-bar nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
  }
  body.site-menu-open .desktop-bar nav button,
  body.site-menu-open .desktop-bar nav a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: max-content;
    min-height: 28px;
    min-width: 0;
    margin-left: auto;
    padding: 0;
    font: 900 13px/28px "Geely Design Type", "Microsoft YaHei", sans-serif;
    white-space: nowrap;
    text-align: right;
  }
  body.site-menu-open .reference-header nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
  }
  body.site-menu-open .reference-header nav a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: max-content;
    min-height: 28px;
    min-width: 0;
    margin-left: auto;
    padding: 0;
    font: 900 13px/28px "Geely Design Type", "Microsoft YaHei", sans-serif;
    white-space: nowrap;
    text-align: right;
  }
  .language-switch button[data-tooltip]::after,
  .theme-toggle span[data-tooltip]::after {
    top: calc(100% + 4px);
  }
}

/* Final compact scrolling rhythm */
.reference-section {
  min-height: auto;
  padding: clamp(52px, 7vh, 88px) 0;
}
.works-section.reference-section {
  padding-top: clamp(92px, 11vh, 132px);
}
.works-grid {
  gap: clamp(24px, 3.2vw, 36px) clamp(18px, 2.6vw, 28px);
  margin-top: 18px;
}
.work-card h2 { margin-top: 10px; }
.section-note { margin-top: 14px; }
.play-board {
  min-height: clamp(430px, 52vh, 560px);
  margin-top: 18px;
}
.contact-section.reference-section {
  padding-top: clamp(38px, 5vh, 64px);
  padding-bottom: clamp(28px, 4vh, 54px);
}
.contact-inner {
  min-height: 170px;
  padding-bottom: 10px;
}
.contact-icons {
  gap: clamp(82px, 10vw, 150px);
  margin: 18px 0 12px;
}
.reference-about {
  padding-top: clamp(104px, 12vh, 132px);
  padding-bottom: clamp(58px, 7vh, 84px);
}
.about-hero-grid {
  margin-top: clamp(42px, 5vh, 64px);
  gap: clamp(24px, 4vw, 48px);
}
.about-timeline { margin-top: clamp(38px, 5vh, 58px); }

@media (max-width: 1040px) {
  .reference-section {
    padding-top: 42px;
    padding-bottom: 42px;
  }
  .works-section.reference-section { padding-top: 86px; }
  .works-grid { gap: 20px 16px; margin-top: 14px; }
  .play-board { min-height: 420px; margin-top: 14px; }
  .contact-section.reference-section { padding-top: 30px; padding-bottom: 34px; }
}

@media (max-width: 620px) {
  .reference-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .works-section.reference-section { padding-top: 72px; }
  .works-grid { gap: 14px; margin-top: 10px; }
  .work-card h2 { margin-top: 7px; }
  .work-card p { line-height: 1.28; }
  .section-note { margin-top: 10px; line-height: 1.4; }
  .play-board { min-height: 340px; margin-top: 12px; }
  .contact-section.reference-section { padding-top: 22px; padding-bottom: 26px; }
  .contact-inner { min-height: 140px; }
  .contact-icons { gap: 44px; margin: 12px 0 8px; }
  .reference-about { padding-top: 86px; padding-bottom: 48px; }
  .about-hero-grid { margin-top: 28px; gap: 16px; }
  .about-timeline { margin-top: 28px; }
}

@media (max-width: 560px) {
  .reference-section {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .works-section.reference-section { padding-top: 66px; }
  .play-board { min-height: 300px; }
  .reference-about,
  .work-detail { padding-top: 82px; }
}

/* Final hero vertical fit */
@media (max-width: 1040px) {
  .desktop-stage {
    min-height: calc(62.7vw + 92px);
    height: calc(62.7vw + 92px);
  }
  .hero-window,
  .desktop-bg {
    top: calc(50% + 28px);
    width: 94vw;
  }
}

@media (max-width: 620px) {
  .desktop-stage {
    min-height: calc(62.7vw + 76px);
    height: calc(62.7vw + 76px);
  }
  .hero-window,
  .desktop-bg {
    top: calc(50% + 24px);
    width: 94vw;
  }
}

@media (max-width: 560px) {
  .desktop-stage {
    min-height: calc(62.7vw + 64px);
    height: calc(62.7vw + 64px);
  }
  .hero-window,
  .desktop-bg {
    top: calc(50% + 20px);
  }
}

@media (max-width: 600px) {
  .desktop-bar,
  .reference-header {
    --mobile-menu-box-width: 50px;
    --mobile-menu-item-width: 42px;
    --mobile-menu-right: 16px;
    --mobile-menu-center-x: calc(var(--mobile-menu-right) + var(--mobile-menu-box-width) / 2);
  }

  .desktop-bar::before,
  .reference-header::before {
    top: 0;
    height: 48px;
    border-radius: 0 0 12px 12px;
  }

  .menu-toggle {
    padding: 0 10px;
    background: transparent;
    box-shadow: none;
    right: var(--mobile-menu-right);
    top: 56px;
  }

  .desktop-bar::after,
  .reference-header::after {
    content: "";
    position: absolute;
    right: var(--mobile-menu-center-x);
    top: 52px;
    z-index: 0;
    width: var(--mobile-menu-box-width);
    height: 38px;
    border-radius: 10px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34)),
      rgba(241,238,231,.26);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow:
      0 10px 22px rgba(80,92,120,.08),
      inset 0 1px 0 rgba(255,255,255,.68),
      0 0 16px rgba(255,255,255,.32);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    pointer-events: none;
    transition: height .24s ease, width .24s ease;
    transform: translateX(50%);
  }

  body.site-menu-open .desktop-bar::after,
  body.site-menu-open .reference-header::after {
    width: var(--mobile-menu-box-width);
    height: 152px;
  }

  .desktop-bar nav,
  .reference-header nav {
    padding: 0;
    background: transparent;
    box-shadow: none;
    right: var(--mobile-menu-center-x);
    top: 88px;
    z-index: 1;
    transform: translateX(50%);
  }

  .desktop-bar nav button,
  .desktop-bar nav a,
  .reference-header nav a {
    background: transparent;
  }

  .menu-toggle {
    right: var(--mobile-menu-center-x);
    top: 56px;
    width: var(--mobile-menu-item-width);
    max-width: var(--mobile-menu-item-width);
    height: 28px;
    min-height: 28px;
    padding: 0;
    justify-content: center;
    font: 900 13px/28px "Geely Design Type", "Microsoft YaHei", sans-serif;
    text-align: center;
    text-shadow:
      0 0 4px rgba(255,255,255,.96),
      0 0 12px rgba(255,255,255,.82),
      0 0 20px rgba(114,178,255,.72);
    transform: translateX(50%);
  }

  .desktop-bar nav,
  .reference-header nav {
    right: var(--mobile-menu-center-x);
    top: 88px;
    gap: 0;
    transform: translateX(50%);
  }

  body.site-menu-open .desktop-bar nav,
  body.site-menu-open .reference-header nav {
    transform: translateX(50%);
  }

  .desktop-bar nav button,
  .desktop-bar nav a,
  .reference-header nav a,
  body.site-menu-open .desktop-bar nav button,
  body.site-menu-open .desktop-bar nav a,
  body.site-menu-open .reference-header nav a {
    width: var(--mobile-menu-item-width);
    max-width: var(--mobile-menu-item-width);
    height: 28px;
    min-height: 28px;
    padding: 0;
    justify-content: center;
    font: 900 13px/28px "Geely Design Type", "Microsoft YaHei", sans-serif;
    text-align: center;
    text-shadow:
      0 0 4px rgba(255,255,255,.96),
      0 0 12px rgba(255,255,255,.82),
      0 0 20px rgba(114,178,255,.72);
    overflow: visible;
  }

  .desktop-bar nav button::after,
  .desktop-bar nav a::after,
  .reference-header nav a::after {
    display: none;
  }
}

/* Final interaction/spacing overrides */
.theme-toggle,
.theme-toggle span {
  pointer-events: auto;
}

.contact-icons {
  gap: 58px;
}

.contact-section.reference-section {
  padding-bottom: 68px;
}

.mobile-experience-note {
  display: none;
  margin: 14px 0 0;
  color: #2f5dff !important;
  -webkit-text-fill-color: #2f5dff;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
  text-align: center;
  text-shadow: none;
  opacity: 1;
  filter: none;
}

.playground-section .section-note {
  color: #2f5dff;
  text-shadow: none;
}

/* Final playground draft collage */
.playground-section .section-note {
  max-width: 760px;
}
.play-board {
  min-height: clamp(650px, 72vw, 820px);
  margin-top: 24px;
  border: 1.5px solid rgba(49,92,255,.72);
  border-radius: 16px 16px 0 0;
  background:
    linear-gradient(rgba(241,238,231,.74), rgba(241,238,231,.74)),
    linear-gradient(rgba(49,92,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49,92,255,.18) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.58) inset,
    0 24px 46px rgba(49,92,255,.08);
  overflow: hidden;
}
.play-board::before {
  content: "";
  position: absolute;
  inset: 18px 18px auto auto;
  width: 118px;
  height: 84px;
  border: 2px solid rgba(49,92,255,.8);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 12px 0 0;
  opacity: .52;
  pointer-events: none;
}
.play-board::after {
  content: "";
  position: absolute;
  right: 54px;
  bottom: 28px;
  width: 86px;
  height: 38px;
  border: 2px solid rgba(49,92,255,.82);
  border-radius: 50%;
  transform: rotate(-7deg);
  opacity: .72;
  pointer-events: none;
}
.play-card {
  position: absolute;
  display: block;
  width: var(--play-w, 330px);
  aspect-ratio: var(--play-ratio, 1.55);
  padding: 12px 12px 38px;
  border: 1px solid rgba(36,34,45,.26);
  border-radius: 0;
  color: #315cff;
  background: #fffaf0;
  box-shadow:
    0 2px 0 rgba(36,34,45,.08),
    0 16px 28px rgba(34,34,34,.13);
  transform: rotate(var(--card-rot, 0deg));
  transform-origin: 50% 52%;
  transition: transform .24s ease, filter .24s ease, box-shadow .24s ease;
  cursor: pointer;
}
.play-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -25px;
  z-index: 4;
  width: 42px;
  height: 48px;
  border: 3px solid #315cff;
  border-bottom: 0;
  border-radius: 10px 10px 4px 4px;
  transform: translateX(-50%) rotate(var(--clip-rot, 4deg));
  box-shadow: 0 0 0 5px rgba(241,238,231,.78);
  pointer-events: none;
}
.play-card::after {
  content: "";
  position: absolute;
  inset: 12px 12px 38px;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 36%),
    repeating-linear-gradient(0deg, rgba(49,92,255,.06) 0 1px, transparent 1px 4px);
  pointer-events: none;
  mix-blend-mode: screen;
}
.play-card img {
  position: relative;
  display: block;
  inset: auto;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  filter: saturate(.92) contrast(.96);
}
.play-card span {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  z-index: 3;
  display: block;
  width: auto;
  height: auto;
  color: #315cff;
  text-align: left;
  text-shadow: none;
  background: transparent;
  font: 900 12px/1.05 "Geely Design Type", "Microsoft YaHei", sans-serif;
  letter-spacing: .04em;
}
.play-card:hover {
  animation: none;
  z-index: 20;
  filter: drop-shadow(0 0 16px rgba(49,92,255,.26));
  box-shadow:
    0 2px 0 rgba(36,34,45,.08),
    0 22px 34px rgba(34,34,34,.17);
  transform: translateY(-8px) rotate(calc(var(--card-rot, 0deg) + .8deg));
}
.play-card.reveal-item,
.play-card.reveal-item.is-visible {
  transform: rotate(var(--card-rot, 0deg));
}
.play-card.reveal-item.is-visible:hover {
  transform: translateY(-8px) rotate(calc(var(--card-rot, 0deg) + .8deg));
}
.play-card.reveal-item.is-faded {
  opacity: .12;
  transform: translateY(-18px) rotate(var(--card-rot, 0deg));
}
.play-board .card-a {
  left: 5%;
  top: 16%;
  --play-w: clamp(310px, 32vw, 470px);
  --play-ratio: 1.78;
  --card-rot: -8deg;
  --clip-rot: -11deg;
}
.play-board .card-b {
  left: 34%;
  top: 5%;
  --play-w: clamp(250px, 25vw, 360px);
  --play-ratio: 1.78;
  --card-rot: 6deg;
  --clip-rot: 5deg;
}
.play-board .card-c {
  right: 4%;
  top: 14%;
  --play-w: clamp(330px, 36vw, 540px);
  --play-ratio: 2.7;
  --card-rot: 4deg;
  --clip-rot: 9deg;
}
.play-board .card-d {
  left: 2%;
  bottom: 5%;
  --play-w: clamp(360px, 43vw, 620px);
  --play-ratio: 1.78;
  --card-rot: -13deg;
  --clip-rot: -7deg;
}
.play-board .card-e {
  right: 16%;
  bottom: 9%;
  --play-w: clamp(300px, 32vw, 470px);
  --play-ratio: 1.78;
  --card-rot: 8deg;
  --clip-rot: 12deg;
}
.play-doodle,
.play-note {
  position: absolute;
  z-index: 14;
  color: #315cff;
  pointer-events: none;
}
.play-note {
  font: 900 12px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  letter-spacing: .04em;
}
.note-a { left: 8%; top: 11%; }
.note-b { left: 41%; top: 49%; }
.note-c { right: 21%; top: 9%; }
.note-d { right: 7%; top: 48%; }
.doodle-pin {
  width: 54px;
  height: 58px;
  border: 4px solid #315cff;
  border-radius: 12px 12px 4px 4px;
  transform: rotate(var(--doodle-rot, 0deg));
}
.doodle-pin::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 45px;
  width: 18px;
  height: 44px;
  border: 4px solid #315cff;
  border-top: 0;
  border-radius: 0 0 18px 18px;
}
.pin-a { left: 3%; top: 29%; --doodle-rot: 83deg; }
.pin-b { left: 47%; top: 58%; --doodle-rot: 96deg; }
.pin-c { right: 1%; top: 28%; --doodle-rot: -82deg; }
.doodle-arrow {
  width: 46px;
  height: 34px;
  border-top: 3px solid #315cff;
  border-left: 3px solid #315cff;
  transform: rotate(var(--doodle-rot, 0deg));
}
.doodle-arrow::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -9px;
  width: 14px;
  height: 14px;
  border-top: 3px solid #315cff;
  border-right: 3px solid #315cff;
  transform: rotate(45deg);
}
.arrow-a { left: 24%; top: 12%; --doodle-rot: 18deg; }
.arrow-b { right: 10%; top: 39%; --doodle-rot: -18deg; }
.doodle-bread {
  right: 7%;
  bottom: 8%;
  width: 96px;
  height: 42px;
  border: 3px solid #315cff;
  border-radius: 48% 48% 42% 42%;
  transform: rotate(-8deg);
}
.doodle-bread::before {
  content: "· · ·";
  position: absolute;
  left: 28px;
  top: 12px;
  font: 900 18px/1 "Geely Design Type", sans-serif;
}
.play-modal-window {
  width: min(1180px, 90vw);
}
.play-modal-window img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  image-rendering: auto;
  background: #fffaf0;
}

@media (max-width: 900px) {
  .play-board {
    min-height: 680px;
  }
  .play-note,
  .play-doodle {
    transform: scale(.82) rotate(var(--doodle-rot, 0deg));
  }
  .play-board .card-a { left: 2%; top: 8%; --play-w: 58%; }
  .play-board .card-b { left: 43%; top: 20%; --play-w: 46%; }
  .play-board .card-c { right: 3%; top: 43%; --play-w: 54%; }
  .play-board .card-d { left: 4%; bottom: 8%; --play-w: 56%; }
  .play-board .card-e { right: 4%; bottom: 2%; --play-w: 42%; }
}

@media (max-width: 620px) {
  .play-board {
    min-height: 560px;
    background-size: auto, 18px 18px, 18px 18px;
  }
  .play-card {
    padding: 8px 8px 28px;
  }
  .play-card::before,
  .play-note,
  .play-doodle {
    display: none;
  }
  .play-card span {
    left: 10px;
    right: 10px;
    bottom: 7px;
    font-size: 10px;
  }
  .play-card::after {
    inset: 8px 8px 28px;
  }
  .play-board .card-a { left: 2%; top: 6%; --play-w: 68%; --card-rot: -7deg; }
  .play-board .card-b { right: 3%; left: auto; top: 22%; --play-w: 50%; --card-rot: 6deg; }
  .play-board .card-c { left: 4%; right: auto; top: 42%; --play-w: 62%; --card-rot: 4deg; }
  .play-board .card-d { left: 1%; bottom: 9%; --play-w: 66%; --card-rot: -10deg; }
  .play-board .card-e { right: 2%; bottom: 2%; --play-w: 48%; --card-rot: 8deg; }
}

/* Playground placement pass: image-first, no decorative clips/doodles, no cropping */
.play-board {
  width: min(1040px, 100%);
  min-height: clamp(480px, 50vw, 610px);
  margin-inline: auto;
}
.play-board::before,
.play-board::after,
.play-card::before,
.play-card::after,
.play-doodle,
.play-note {
  content: none;
  display: none;
}
.play-card {
  display: block;
  padding: 10px;
  background: #fffaf0;
  aspect-ratio: var(--play-ratio, 1.7778);
  overflow: visible;
}
.play-card img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  image-rendering: auto;
  filter: none;
  background: #fffaf0;
}
.play-card span {
  display: none;
}
.play-card.is-selected {
  z-index: 18;
  box-shadow:
    0 0 0 2px rgba(49,92,255,.72),
    0 0 22px rgba(49,92,255,.18),
    0 18px 30px rgba(34,34,34,.14);
}
.play-board .card-a {
  left: 4%;
  top: 12%;
  --play-w: clamp(360px, 40vw, 560px);
  --play-ratio: 1.7798;
  --card-rot: -7deg;
}
.play-board .card-b {
  left: 34%;
  top: 6%;
  --play-w: clamp(320px, 32vw, 450px);
  --play-ratio: 1.7798;
  --card-rot: 5deg;
}
.play-board .card-c {
  right: 3%;
  top: 18%;
  --play-w: clamp(390px, 42vw, 620px);
  --play-ratio: 2.568;
  --card-rot: 3deg;
}
.play-board .card-d {
  left: 2%;
  bottom: 6%;
  --play-w: clamp(390px, 45vw, 640px);
  --play-ratio: 1.7798;
  --card-rot: -11deg;
}
.play-board .card-e {
  right: 14%;
  bottom: 9%;
  --play-w: clamp(320px, 34vw, 480px);
  --play-ratio: 1.7772;
  --card-rot: 7deg;
}
.play-modal-window img {
  object-fit: contain;
}
.play-detail {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(260px, 1fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  padding: clamp(22px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: transparent;
  transition: opacity .24s ease, visibility 0s linear .24s;
}
.play-board.is-detail-open .play-card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.play-board.is-detail-open .play-detail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.play-detail-image {
  position: absolute;
  left: 50%;
  top: calc(clamp(8px, 1.2vw, 18px) - 120px);
  z-index: var(--detail-z, 1);
  display: block;
  width: min(392px, 94%);
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(36,34,45,.24);
  background: #fffaf0;
  box-shadow:
    0 2px 0 rgba(36,34,45,.08),
    0 16px 28px rgba(34,34,34,.13);
  opacity: var(--detail-opacity, 1);
  transform:
    translateX(calc(-50% + var(--detail-list-x, 0) * 1px))
    translateY(calc(var(--detail-list-index, 0) * var(--detail-stack-step, clamp(108px, 9.2vw, 128px))))
    rotate(calc(var(--detail-list-rot, -3) * 1deg))
    scale(var(--detail-scale, 1));
  transition: transform .38s cubic-bezier(.2,.72,.2,1), opacity .24s ease, filter .24s ease;
  cursor: zoom-in;
}
.play-detail.is-wenwen .play-detail-image {
  top: calc(clamp(8px, 1.2vw, 18px) - 130px);
}
.play-detail.is-dandelion {
  --detail-stack-step: clamp(82px, 7vw, 98px);
}
.play-detail.is-ifcv,
.play-detail.is-shuangtan {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(260px, 1fr) auto;
  gap: clamp(16px, 2.4vw, 30px);
  align-content: center;
  justify-items: center;
}
.play-detail.is-ifcv .play-detail-gallery,
.play-detail.is-shuangtan .play-detail-gallery {
  width: min(860px, 88%);
  min-height: min(42vh, 360px);
}
.play-detail.is-ifcv .play-detail-viewport,
.play-detail.is-shuangtan .play-detail-viewport {
  inset: 0;
}
.play-detail.is-ifcv .play-detail-image,
.play-detail.is-shuangtan .play-detail-image {
  left: 50%;
  top: 50%;
  width: min(760px, 96%);
  transform:
    translate(-50%, -50%)
    rotate(-2deg)
    scale(var(--detail-scale, 1));
}
.play-detail.is-shuangtan .play-detail-image {
  width: min(520px, 58%);
  padding: 0;
  border: 1.5px solid rgba(24,24,28,.88);
  background: transparent;
  box-shadow: none;
}
.play-detail.is-shuangtan .play-detail-image img {
  max-height: min(38vh, 340px);
  background: transparent;
}
.play-detail.is-ifcv .play-detail-copy,
.play-detail.is-shuangtan .play-detail-copy {
  align-items: center;
  width: min(760px, 88%);
  padding: 0;
  transform: translateY(-20px);
  text-align: center;
}
.play-detail.is-ifcv .play-detail-back,
.play-detail.is-shuangtan .play-detail-back {
  align-self: center;
  margin-bottom: 18px;
}
.play-detail.is-ifcv .play-detail-heading,
.play-detail.is-shuangtan .play-detail-heading {
  justify-content: center;
}
.play-detail-image:not(.is-active) {
  cursor: pointer;
}
.play-detail-image:hover {
  animation: playDetailWiggle .9s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(49,92,255,.22));
}
.play-detail.is-ifcv .play-detail-image:hover,
.play-detail.is-shuangtan .play-detail-image:hover {
  animation: playDetailIfcvWiggle .9s ease-in-out infinite;
}
.play-detail-image img {
  display: block;
  width: 100%;
  max-height: min(34vh, 300px);
  object-fit: contain;
  image-rendering: auto;
  background: #fffaf0;
}
.play-detail-gallery {
  position: relative;
  min-width: 0;
  min-height: min(50vh, 440px);
}
.play-detail-viewport {
  position: absolute;
  inset: 0 clamp(34px, 3.6vw, 52px) 0 0;
  overflow: visible;
  touch-action: pan-y;
}
.play-detail-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.play-detail-arrow {
  position: absolute;
  top: 50%;
  z-index: 70;
  display: none;
  place-items: center;
  width: 34px;
  height: 52px;
  padding: 0;
  border: 1.5px solid #315cff;
  border-radius: 8px;
  color: #315cff;
  background: rgba(255,255,255,.68);
  transform: translateY(-50%);
  cursor: pointer;
}
.play-detail-arrow.is-prev {
  left: 0;
}
.play-detail-arrow.is-next {
  right: 0;
}
.play-detail-arrow:disabled {
  opacity: .28;
  pointer-events: none;
}
.play-detail-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.play-detail.is-gallery-focused .play-detail-arrow {
  display: grid;
}
.play-detail.is-gallery-focused .play-detail-image {
  top: 50%;
  transform:
    translate(-50%, -50%)
    rotate(calc(-3deg + var(--detail-offset, 0) * 1.4deg))
    scale(var(--detail-scale, 1));
}
.play-detail.is-gallery-focused .play-detail-image:not(.is-active) {
  pointer-events: none;
}
@keyframes playDetailWiggle {
  0%, 100% {
    transform:
      translateX(calc(-50% + var(--detail-list-x, 0) * 1px))
      translateY(calc(var(--detail-list-index, 0) * var(--detail-stack-step, clamp(108px, 9.2vw, 128px))))
      rotate(calc(var(--detail-list-rot, -3) * 1deg))
      scale(var(--detail-scale, 1));
  }
  50% {
    transform:
      translateX(calc(-50% + var(--detail-list-x, 0) * 1px))
      translateY(calc(var(--detail-list-index, 0) * var(--detail-stack-step, clamp(108px, 9.2vw, 128px)) - 3px))
      rotate(calc((var(--detail-list-rot, -3) + .6) * 1deg))
      scale(var(--detail-hover-scale, 1.01));
  }
}
@keyframes playDetailIfcvWiggle {
  0%, 100% {
    transform:
      translate(-50%, -50%)
      rotate(-2deg)
      scale(var(--detail-scale, 1));
  }
  50% {
    transform:
      translate(-50%, calc(-50% - 4px))
      rotate(-1.4deg)
      scale(var(--detail-hover-scale, 1.01));
  }
}
.play-detail.is-gallery-focused .play-detail-image.is-active:hover {
  animation: playDetailFocusedWiggle .9s ease-in-out infinite;
}
@keyframes playDetailFocusedWiggle {
  0%, 100% {
    transform:
      translate(-50%, -50%)
      rotate(calc(-3deg + var(--detail-offset, 0) * 1.4deg))
      scale(var(--detail-scale, 1));
  }
  50% {
    transform:
      translate(-50%, calc(-50% - 4px))
      rotate(calc(-2.2deg + var(--detail-offset, 0) * 1.4deg))
      scale(var(--detail-hover-scale, 1.01));
  }
}
.play-detail-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 190px;
  padding: clamp(12px, 2vw, 24px);
  color: #315cff;
  transform: translate(-40px, -60px);
}
.play-detail-back {
  align-self: flex-start;
  margin: 0 0 clamp(22px, 4vw, 42px);
  padding: 5px 12px 6px;
  border: 1.5px solid #315cff;
  border-radius: 6px;
  color: #315cff;
  background: rgba(255,255,255,.58);
  font: 900 13px/1.1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  cursor: pointer;
}
.play-detail-back:hover {
  background: #315cff;
  color: #fff;
}
.play-detail-copy small {
  margin-bottom: 12px;
  font: 900 11px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  letter-spacing: .12em;
}
.play-detail-heading {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 22px);
  margin: 0 0 18px;
  flex-wrap: nowrap;
}
.play-detail-copy h3 {
  margin: 0;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: .95;
  white-space: nowrap;
}
.play-detail-subtitle {
  display: inline;
  max-width: none;
  margin: 0;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.35;
  font-weight: 700;
  color: #315cff;
  white-space: nowrap;
}
.play-detail-copy p {
  max-width: 620px;
  margin: 0;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.75;
}
.play-detail-copy .play-detail-subtitle {
  color: #315cff;
  font-size: clamp(19px, 1.9vw, 27px);
}

@media (max-width: 900px) {
  .play-board .play-card {
    pointer-events: none;
    cursor: default;
  }
  .play-board .play-card:hover {
    animation: none;
    filter: none;
  }
  .play-board {
    width: min(100%, 820px);
    min-height: 520px;
  }
  .play-detail {
    grid-template-columns: 1fr;
    align-content: center;
    padding: 28px;
  }
  .play-board .card-a { left: 2%; top: 7%; --play-w: 62%; }
  .play-board .card-b { left: 42%; top: 19%; --play-w: 52%; }
  .play-board .card-c { right: 2%; top: 42%; --play-w: 58%; }
  .play-board .card-d { left: 3%; bottom: 8%; --play-w: 60%; }
  .play-board .card-e { right: 3%; bottom: 3%; --play-w: 46%; }
}

@media (max-width: 620px) {
  .play-board {
    min-height: 460px;
  }
  .play-detail {
    gap: 12px;
    padding: 18px;
  }
  .play-detail-image {
    width: min(82%, 330px);
    padding: 7px;
  }
  .play-detail-image img {
    max-height: 170px;
  }
  .play-detail-copy {
    min-height: 0;
    padding: 8px 4px 4px;
  }
  .play-detail-back {
    margin-bottom: 14px;
    font-size: 12px;
  }
  .play-detail-copy h3 {
    font-size: 22px;
  }
  .play-detail-copy p {
    font-size: 13px;
    line-height: 1.55;
  }
  .play-card {
    padding: 7px;
  }
  .play-card img {
    inset: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
  }
  .play-board .card-a { left: 2%; top: 5%; --play-w: 70%; }
  .play-board .card-b { right: 2%; left: auto; top: 22%; --play-w: 52%; }
  .play-board .card-c { left: 3%; right: auto; top: 43%; --play-w: 66%; }
  .play-board .card-d { left: 1%; bottom: 10%; --play-w: 68%; }
  .play-board .card-e { right: 2%; bottom: 3%; --play-w: 50%; }
}

/* Playground default layout + centered popup gallery */
.playground-section.reference-section,
.playground-section .reference-inner {
  overflow: visible;
}
.playground-section.reference-section {
  margin-bottom: 60px;
}
.play-board {
  width: min(1120px, 100%);
  min-height: clamp(520px, 48vw, 620px);
  overflow: visible;
  border: 2px solid rgba(49,92,255,.86);
  border-radius: 18px;
  background:
    linear-gradient(rgba(49,92,255,.22) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(49,92,255,.22) 1.5px, transparent 1.5px);
  background-color: transparent;
  background-size: 24px 24px, 24px 24px;
}
.play-card {
  padding: 12px;
  border: 1.5px solid rgba(36,34,45,.18);
  background: #fffaf0;
  overflow: visible;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 24px rgba(34,34,34,.14);
}
.play-card img {
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  border: 0;
}
.play-board .card-a {
  left: -6%;
  top: auto;
  right: auto;
  bottom: calc(-5% + 60px);
  --play-w: 48%;
  --play-ratio: 1.7798;
  --card-rot: 6deg;
  z-index: 5;
}
.play-board .card-a::after {
  content: "";
  position: absolute;
  left: -12%;
  top: 34%;
  z-index: -1;
  display: block;
  width: 96%;
  aspect-ratio: 1.7798;
  padding: 12px;
  box-sizing: border-box;
  overflow: visible;
  border: 1.5px solid rgba(36,34,45,.18);
  background: #fffaf0 url("../images/playground/other-design-02.png") center / calc(100% - 24px) calc(100% - 24px) no-repeat;
  box-shadow: 0 16px 22px rgba(34,34,34,.12);
  transform: rotate(-6deg);
}
.play-board .card-b {
  left: auto;
  right: -2%;
  top: -1%;
  bottom: auto;
  --play-w: 38%;
  --play-ratio: 1.7798;
  --card-rot: -7deg;
  z-index: 6;
}
.play-board .card-c {
  left: 5%;
  right: auto;
  top: calc(8% - 30px);
  bottom: auto;
  --play-w: 51%;
  --play-ratio: 2.568;
  --card-rot: 5deg;
  z-index: 5;
}
.play-board .card-d {
  left: auto;
  right: -4%;
  top: 32%;
  bottom: auto;
  --play-w: 41%;
  --play-ratio: 1.7798;
  --card-rot: 8deg;
  z-index: 7;
}
.play-board .card-e {
  left: auto;
  right: 18%;
  top: auto;
  bottom: -3%;
  --play-w: 38%;
  --play-ratio: 1.7772;
  --card-rot: -1deg;
  z-index: 8;
}
.play-board.is-detail-open .playground-mascot {
  opacity: 1;
  visibility: visible;
}
.play-detail.is-gallery-focused ~ .playground-mascot {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.play-detail {
  font-family: inherit;
  color: #315cff;
}
.play-detail-copy,
.play-detail-back,
.play-detail-copy small {
  font-family: inherit;
}
.play-detail-copy h3 {
  letter-spacing: 0;
}
.playground-mascot {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  right: -3%;
  bottom: calc(-6% + 8px);
  z-index: 75;
  width: clamp(85px, 12.25vw, 146px);
  height: auto;
  cursor: pointer;
  user-select: none;
}
.playground-mascot img {
  display: block;
  width: 100%;
  height: auto;
}
.playground-mascot.is-driving {
  animation: playgroundMascotDrive .58s cubic-bezier(.25,.8,.35,1);
}
@keyframes playgroundMascotDrive {
  0% { transform: translateX(0) rotate(0); }
  42% { transform: translateX(var(--mascot-drive, 24px)) rotate(var(--mascot-turn-out, 4deg)); }
  72% { transform: translateX(var(--mascot-drive-back, 18px)) rotate(var(--mascot-turn-back, -2deg)); }
  100% { transform: translateX(0) rotate(0); }
}
.play-card:hover {
  z-index: 30;
}

/* Final tilt adjustment: other-design and game cards turn 10deg counter-clockwise. */
.play-board .card-a { --card-rot: -4deg; }
.play-board .card-e { --card-rot: -11deg; }
.play-modal {
  z-index: 900;
}
.play-modal-window {
  width: min(1180px, 90vw);
  padding: clamp(18px, 2vw, 28px);
  border-radius: 0;
  background: #f7f7f5;
}
.play-modal-close {
  z-index: 30;
  pointer-events: auto;
}
.play-modal-window h2 {
  margin-bottom: 12px;
}
.play-modal-gallery {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  touch-action: pan-y;
}
.play-modal-gallery > img {
  position: relative;
  z-index: 5;
  display: block;
  width: min(1120px, 82vw);
  max-height: min(66vh, 720px);
  aspect-ratio: auto;
  object-fit: contain;
  border: 1.5px solid rgba(36,34,45,.86);
  background: #fff;
  box-shadow: 0 16px 34px rgba(34,34,34,.12);
}
.play-modal-gallery > img[hidden] {
  display: none;
}
.play-modal-video {
  position: relative;
  z-index: 5;
  display: block;
  width: min(1120px, 82vw);
  aspect-ratio: 16 / 9;
  max-height: min(66vh, 720px);
  border: 1.5px solid rgba(36,34,45,.92);
  background: #000;
  box-shadow: 0 16px 34px rgba(34,34,34,.12);
}
.play-modal-video[hidden] {
  display: none;
}
.play-modal-stack {
  position: absolute;
  left: clamp(-28px, -2vw, -12px);
  top: clamp(18px, 4vh, 46px);
  z-index: 1;
  width: min(330px, 26vw);
  height: 72%;
  pointer-events: none;
}
.play-modal-stack span {
  position: absolute;
  width: 100%;
  aspect-ratio: 1.7798;
  border: 1.5px solid rgba(36,34,45,.22);
  background: #fff;
  box-shadow: 0 10px 18px rgba(34,34,34,.06);
}
.play-modal-stack span:nth-child(1) { top: 0; left: 0; transform: rotate(8deg); }
.play-modal-stack span:nth-child(2) { top: 34%; left: 4%; transform: rotate(-4deg); }
.play-modal-stack span:nth-child(3) { bottom: 0; left: 8%; transform: rotate(6deg); }
.play-modal-arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1.5px solid rgba(36,34,45,.88);
  background: rgba(255,255,255,.92);
  color: #111;
  transform: translateY(-50%);
  cursor: pointer;
}
.play-modal-gallery.has-multiple .play-modal-arrow {
  display: grid;
}
.play-modal-arrow.is-prev {
  left: -8px;
}
.play-modal-arrow.is-next {
  right: -8px;
}
.play-modal-arrow:disabled {
  opacity: .28;
  pointer-events: none;
}
.play-modal-arrow svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
}
.play-modal-window h2 {
  display: none;
}
.play-modal-copy {
  display: none;
  color: #202020;
  font-family: "Courier New", monospace;
}
.play-modal-copy strong {
  display: block;
  margin-bottom: 34px;
  font-size: clamp(32px, 4.8vw, 58px);
  line-height: 1;
  letter-spacing: .02em;
}
.play-modal-copy p {
  max-width: 420px;
  margin: 0;
  font-size: clamp(18px, 1.9vw, 28px);
  line-height: 1.8;
}
.play-modal-gallery.is-overview {
  grid-template-columns: minmax(300px, 36%) minmax(360px, 1fr);
  place-items: center;
  align-items: center;
  column-gap: clamp(34px, 7vw, 120px);
  min-height: min(70vh, 760px);
}
.play-modal-gallery.is-overview > img,
.play-modal-gallery.is-overview .play-modal-arrow {
  display: none;
}
.play-modal-gallery.is-overview .play-modal-stack {
  position: relative;
  left: auto;
  top: auto;
  z-index: 3;
  display: block;
  width: min(410px, 30vw);
  height: min(64vh, 610px);
  pointer-events: auto;
}
.play-modal-stack-card {
  position: absolute;
  left: var(--modal-stack-x, 0);
  top: var(--modal-stack-y, 0);
  z-index: var(--modal-stack-z, 1);
  width: min(360px, 100%);
  aspect-ratio: 1.7798;
  padding: 10px;
  border: 1.5px solid rgba(36,34,45,.82);
  background: #fffaf0;
  box-shadow: 0 12px 20px rgba(34,34,34,.12);
  transform: rotate(var(--modal-stack-rot, 0deg));
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.play-modal-stack-card:hover {
  filter: drop-shadow(0 0 14px rgba(49,92,255,.22));
  box-shadow: 0 16px 26px rgba(34,34,34,.16);
  transform: translateY(-5px) rotate(calc(var(--modal-stack-rot, 0deg) + .7deg));
}
.play-modal-stack-card img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 0;
}
.play-modal-gallery.is-overview .play-modal-copy {
  display: block;
  justify-self: start;
  align-self: start;
  margin-top: clamp(28px, 8vh, 80px);
}
.play-modal-gallery.is-focused {
  display: grid;
  place-items: center;
  min-height: 0;
  padding-inline: clamp(42px, 4vw, 66px);
}
.play-modal-gallery.is-focused .play-modal-stack,
.play-modal-gallery.is-focused .play-modal-copy {
  display: none;
}
.play-modal-gallery.is-focused > img {
  display: block;
  width: min(1140px, calc(86vw - clamp(84px, 8vw, 132px)));
  max-height: min(74vh, 820px);
  border: 1.5px solid rgba(36,34,45,.92);
  background: #fff;
  object-fit: contain;
}
.play-modal-gallery.is-focused .play-modal-video {
  width: min(1140px, calc(86vw - clamp(84px, 8vw, 132px)));
  max-height: min(74vh, 820px);
}
.play-modal-gallery.is-overview.has-multiple .play-modal-arrow {
  display: none;
}
.play-modal-gallery.is-focused.has-multiple .play-modal-arrow {
  display: grid;
}

/* Enlarged image viewer: the paper frame follows the image instead of keeping
   the wide overview panel, so every page stays visually centred. */
.play-modal-window:has(.play-modal-gallery.is-focused) {
  width: fit-content;
  max-width: 90vw;
  margin-inline: auto;
}
.play-modal-gallery.is-focused {
  width: fit-content;
  max-width: calc(90vw - clamp(36px, 4vw, 56px));
  padding-inline: clamp(58px, 5vw, 82px);
}
.play-modal-gallery.is-focused > img {
  width: auto;
  max-width: min(1120px, calc(90vw - clamp(152px, 10vw, 220px)));
  height: auto;
  max-height: min(74vh, 820px);
}
.play-modal-gallery.is-focused .play-modal-video {
  width: min(1120px, calc(90vw - clamp(152px, 10vw, 220px)));
}
.play-modal-gallery.is-focused > img[hidden] {
  display: none;
}
.play-modal-gallery.is-focused .play-modal-arrow.is-prev {
  left: clamp(10px, 1.2vw, 20px);
}
.play-modal-gallery.is-focused .play-modal-arrow.is-next {
  right: clamp(10px, 1.2vw, 20px);
}

/* Keep the game video centred inside the enlarged viewer. */
.play-modal:has(.play-modal-gallery.is-focused.is-video) {
  box-sizing: border-box;
}
.play-modal-window:has(.play-modal-gallery.is-focused.is-video) {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: min(1180px, 90vw);
  max-width: 90vw;
}
.play-modal-gallery.is-focused.is-video {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: clamp(58px, 5vw, 82px);
  place-items: center;
}
.play-modal-gallery.is-focused.is-video .play-modal-video {
  width: 100%;
  max-width: 1120px;
  justify-self: center;
  margin-inline: auto;
  transform: none;
}
.play-modal-gallery.is-focused.is-video .play-modal-arrow.is-prev {
  left: calc(clamp(10px, 1.2vw, 20px) - 20px);
}
.play-modal-gallery.is-focused.is-video .play-modal-arrow.is-next {
  right: calc(clamp(10px, 1.2vw, 20px) - 20px);
}
.play-modal-youtube-link {
  position: absolute;
  right: calc(clamp(58px, 5vw, 82px) + clamp(18px, 2vw, 28px) + 12px);
  top: 12px;
  z-index: 8;
}

/* Focused playground images: keep the paper frame close to both landscape
   and portrait artwork while retaining a clear lane for the page arrows. */
.play-modal-window:has(.play-modal-gallery.is-focused:not(.is-video)) {
  box-sizing: border-box;
  padding: clamp(10px, 1vw, 14px);
  transform: scale(1.15);
}
.play-modal-gallery.is-focused:not(.is-video) {
  max-width: calc(90vw - clamp(20px, 2vw, 28px));
  padding-inline: clamp(52px, 4vw, 64px);
}
.play-modal-gallery.is-focused:not(.is-video) > img {
  max-width: min(1120px, calc(90vw - clamp(104px, 9.2vw, 140px)));
}
.play-modal-gallery.is-focused:not(.is-video) .play-modal-arrow.is-prev {
  left: 0;
}
.play-modal-gallery.is-focused:not(.is-video) .play-modal-arrow.is-next {
  right: 0;
}
.play-modal-window:has(.play-modal-gallery.is-focused.is-portrait:not(.is-video)) {
  transform: scale(1.22);
}

/* Double-carbon project: keep all four pages visible as a horizontal stack
   before the user selects one to enlarge. */
.play-detail.is-shuangtan .play-detail-gallery {
  width: min(920px, 94%);
  min-height: min(38vh, 350px);
}
.play-detail.is-shuangtan .play-detail-image {
  top: 50%;
  width: fit-content;
  max-width: 34%;
  padding: 5px;
  border: 1px solid rgba(36,34,45,.52);
  background: #fffaf0;
  box-shadow: 0 12px 20px rgba(34,34,34,.12);
  transform:
    translate(calc(-50% + var(--detail-row-x, 0) * 1px), -50%)
    rotate(calc(var(--detail-list-rot, 0) * .7deg))
    scale(var(--detail-scale, 1));
}
.play-detail.is-shuangtan .play-detail-image img {
  width: auto;
  max-width: 100%;
  height: min(28vh, 230px);
  max-height: none;
  background: #fff;
}
.play-detail.is-shuangtan .play-detail-image:hover {
  z-index: 200;
  animation: none;
  filter: drop-shadow(0 0 14px rgba(49,92,255,.2));
}
.play-detail.is-shuangtan .play-detail-copy {
  position: relative;
}
.play-detail.is-shuangtan .play-detail-back {
  position: absolute;
  top: 6px;
  left: calc(50% + clamp(238px, 21vw, 310px));
  z-index: 5;
  margin: 0;
  white-space: nowrap;
}
.play-detail.is-ifcv .play-detail-copy {
  position: relative;
}
.play-detail.is-ifcv .play-detail-back {
  position: absolute;
  top: 8px;
  left: calc(50% + clamp(320px, 27vw, 360px));
  z-index: 5;
  margin: 0;
  white-space: nowrap;
}

/* Keep every playground detail action on the same line as its title.
   The description below follows the exact left and right edges of that row. */
.play-detail-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: clamp(14px, 1.8vw, 24px);
  row-gap: clamp(16px, 2vw, 24px);
  align-items: start;
  width: min(780px, calc(100% + 160px));
  max-width: calc(100vw - 80px);
  box-sizing: border-box;
}
.play-detail-heading {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-content: flex-start;
  margin: 0;
}
.play-detail-back,
.play-detail.is-ifcv .play-detail-back,
.play-detail.is-shuangtan .play-detail-back {
  position: static;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  margin: 0;
  transform: translate(-100px, -45px);
  white-space: nowrap;
}
.play-detail.is-ifcv .play-detail-back,
.play-detail.is-shuangtan .play-detail-back {
  transform: translate(-100px, -15px);
}
.play-detail-copy > [data-play-detail-desc] {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  text-align: justify;
  text-align-last: left;
}
.play-detail.is-ifcv .play-detail-copy,
.play-detail.is-shuangtan .play-detail-copy {
  width: min(920px, 88%);
  align-items: start;
  text-align: left;
}
.play-detail.is-ifcv .play-detail-heading,
.play-detail.is-shuangtan .play-detail-heading {
  justify-content: flex-start;
}
.play-detail.is-shuangtan.is-gallery-focused .play-detail-image {
  transform:
    translate(-50%, -50%)
    rotate(calc(-3deg + var(--detail-offset, 0) * 1.4deg))
    scale(var(--detail-scale, 1));
}

@media (max-width: 900px) {
  .play-board {
    width: min(100%, 820px);
    min-height: 520px;
  }
  .play-board .card-a { left: 2%; top: 20%; --play-w: 48%; }
  .play-board .card-b { left: 26%; top: 2%; --play-w: 50%; }
  .play-board .card-c { right: 2%; top: 30%; --play-w: 52%; }
  .play-board .card-d { left: 10%; bottom: 8%; --play-w: 48%; }
  .play-board .card-e { right: 4%; bottom: 4%; --play-w: 42%; }
  .play-modal-arrow.is-prev { left: 10px; }
  .play-modal-arrow.is-next { right: 10px; }
}

@media (max-width: 620px) {
  .play-board {
    min-height: 430px;
  }
  .play-modal-window {
    width: 92vw;
  }
  .play-modal-gallery > img {
    width: 82vw;
    max-height: 62vh;
  }
  .play-modal-stack {
    display: none;
  }
}

/* Final hero offset below glass header */
.hero-window,
.desktop-bg {
  top: calc(50% + 18px);
}

@media (max-width: 1040px) {
  .hero-window,
  .desktop-bg {
    top: calc(50% + 44px);
  }
}

@media (max-width: 620px) {
  .hero-window,
  .desktop-bg {
    top: calc(50% + 40px);
  }
}

@media (max-width: 560px) {
  .hero-window,
  .desktop-bg {
    top: calc(50% + 34px);
  }

  .mobile-experience-note {
    display: block;
  }
}

/* Final narrow playground summary */
@media (max-width: 900px) {
  .playground-section .reference-inner {
    width: min(360px, calc(100% - 34px));
    overflow: visible;
  }
  .playground-section .path-button.wide {
    display: flex;
    justify-content: center;
    width: min(326px, 100%);
    min-height: 40px;
    margin: 0 auto 26px;
    border-radius: 10px;
    font-size: 17px;
  }
  .playground-section .section-note {
    max-width: 326px;
    margin: 0 auto 34px;
    color: #315cff;
    font-size: 17px;
    line-height: 1.65;
    text-align: left;
  }
  .play-board {
    width: min(326px, 100%);
    min-height: 250px;
    margin: 0 auto 28px;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  .play-board .play-card {
    padding: 8px;
    pointer-events: none;
    cursor: default;
    box-shadow:
      0 1px 0 rgba(255,255,255,.88) inset,
      0 12px 18px rgba(34,34,34,.13);
  }
  .play-board .play-card:hover {
    animation: none;
    filter: none;
  }
  .play-board .play-card span,
  .playground-mascot,
  .play-board .card-a::after {
    display: none;
  }
  .play-board .card-a {
    left: 58px;
    top: 76px;
    right: auto;
    bottom: auto;
    --play-w: 220px;
    --card-rot: 2deg;
    z-index: 8;
  }
  .play-board .card-b {
    left: 114px;
    top: 118px;
    right: auto;
    bottom: auto;
    --play-w: 150px;
    --card-rot: -2deg;
    z-index: 4;
  }
  .play-board .card-c {
    left: 80px;
    top: 34px;
    right: auto;
    bottom: auto;
    --play-w: 190px;
    --card-rot: -3deg;
    z-index: 6;
  }
  .play-board .card-d {
    left: 42px;
    top: 58px;
    right: auto;
    bottom: auto;
    --play-w: 186px;
    --card-rot: 4deg;
    z-index: 5;
  }
  .play-board .card-e {
    left: 28px;
    top: 96px;
    right: auto;
    bottom: auto;
    --play-w: 176px;
    --card-rot: -1deg;
    z-index: 3;
  }
  .play-board .play-card img {
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
  }
  .mobile-experience-note {
    display: block;
    margin-top: 10px;
    color: #315cff;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
  }
}

/* Keep narrow playground aligned with the other homepage sections */
@media (max-width: 900px) {
  .playground-section .reference-inner {
    width: min(var(--hero-width), calc(100% - 36px));
  }
  .playground-section .path-button.wide {
    display: inline-flex;
    justify-content: center;
    width: fit-content;
    min-height: 32px;
    margin: 0;
    border-radius: 999px;
    font-size: inherit;
  }
  .playground-section .section-note {
    max-width: 760px;
    margin: 14px 0 26px;
    font-size: 14px;
    line-height: 1.55;
  }
  .play-board {
    width: min(100%, 520px);
    min-height: 330px;
    margin: 0 auto 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .play-board::before,
  .play-board::after {
    display: none;
  }
  .play-board .card-a {
    left: 50%;
    top: 128px;
    --play-w: min(100%, 520px);
    transform: translateX(-50%) rotate(2deg);
  }
  .play-board .card-b {
    left: 50%;
    top: 88px;
    --play-w: min(78%, 405px);
    transform: translateX(-50%) rotate(-2deg);
  }
  .play-board .card-c {
    left: 50%;
    top: 42px;
    --play-w: min(84%, 438px);
    transform: translateX(-50%) rotate(-3deg);
  }
  .play-board .card-d {
    left: 50%;
    top: 76px;
    --play-w: min(82%, 426px);
    transform: translateX(-50%) rotate(4deg);
  }
  .play-board .card-e {
    left: 50%;
    top: 112px;
    --play-w: min(80%, 416px);
    transform: translateX(-50%) rotate(-1deg);
  }
}

/* Final mobile playground lock: same title rhythm as contact, centered full-width stack */
@media (max-width: 900px) {
  .playground-section .path-button.wide {
    width: auto !important;
    inline-size: max-content;
    max-width: 100%;
    min-height: 38px;
    padding: 0 22px;
    border-radius: 7px;
    font-size: 21px;
  }
  .playground-section .section-note {
    margin-top: 18px;
    margin-bottom: 30px;
  }
  .play-board {
    width: 100%;
    min-height: 360px;
    margin: 0 auto 24px;
    overflow: visible;
  }
  .play-board .play-card {
    left: 0;
    right: auto;
    bottom: auto;
    margin-inline: auto;
  }
  .play-board .card-a {
    left: 6%;
    right: auto;
    top: 128px;
    bottom: auto;
    --play-w: min(78%, 430px);
    transform: rotate(2deg);
    z-index: 8;
  }
  .play-board .card-b {
    left: auto;
    right: 4%;
    top: 18px;
    bottom: auto;
    --play-w: min(68%, 370px);
    transform: rotate(-2deg);
    z-index: 6;
  }
  .play-board .card-c {
    left: 8%;
    right: auto;
    top: 54px;
    bottom: auto;
    --play-w: min(72%, 395px);
    transform: rotate(-3deg);
    z-index: 5;
  }
  .play-board .card-d {
    left: auto;
    right: 0;
    top: 88px;
    bottom: auto;
    --play-w: min(74%, 410px);
    transform: rotate(4deg);
    z-index: 7;
  }
  .play-board .card-e {
    left: 0;
    right: auto;
    top: 184px;
    bottom: auto;
    --play-w: min(70%, 390px);
    transform: rotate(-1deg);
    z-index: 4;
  }
}

/* Work 02: title-first, full-width long-form project story. */
.work-detail-long {
  width: min(1180px, calc(100% - 48px));
}
.work-detail-long .work-long-content {
  width: min(1040px, 100%);
  margin-inline: auto;
}
.work-detail-long .work-long-intro h1,
.work-detail-long .work-long-intro p {
  width: 100%;
  max-width: none;
  margin-left: 0;
}
.work-detail-long .work-long-intro h1,
.work-detail-long .work-long-intro p {
  margin-left: calc(50% - 50vw + clamp(34px, 5.6vw, 86px));
}
.work-detail-long .work-long-intro .work-long-description {
  box-sizing: border-box;
  width: calc(100vw - (2 * clamp(34px, 5.6vw, 86px)));
  text-align: justify;
  text-align-last: left;
}
.work-detail-long .work-long-images {
  display: grid;
  width: 100%;
  gap: 24px;
  margin-top: 36px;
  margin-inline: auto;
  justify-items: center;
}
.work-detail-long .work-long-images img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}
.work-detail-long .work-long-weixin-video {
  display: grid;
  width: 100%;
  justify-items: center;
  gap: 10px;
}
.work-detail-long .work-long-weixin-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #202020;
}
.work-detail-long .work-long-weixin-video a {
  justify-self: end;
  color: #315cff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.work-detail-long .work-detail-nav {
  margin-left: calc(
    clamp(34px, 5.6vw, 86px) -
    ((100vw - min(1180px, calc(100vw - 48px))) / 2)
  );
}

@media (min-width: 761px) {
  .work-detail-long .work-detail-nav {
    margin-right: calc(
      clamp(34px, 5.6vw, 86px) -
      ((100vw - min(1180px, calc(100vw - 48px))) / 2)
    );
  }
}

@media (max-width: 760px) {
  .work-detail-long {
    width: min(100% - 28px, 1180px);
  }
  .work-detail-long .work-long-images {
    gap: 14px;
    margin-top: 26px;
  }
}

/* Blue acrylic pins hold the five playground photo cards in place. */
.play-card .play-card-pin {
  position: absolute;
  left: var(--play-pin-x, 50%);
  top: var(--play-pin-y, -11px);
  z-index: 12;
  display: block;
  width: clamp(29px, 2.5vw, 37px);
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 5px 5px rgba(27,39,92,.22))
    drop-shadow(0 0 8px rgba(49,92,255,.2));
  transform: translateX(-50%) rotate(var(--play-pin-rot, 0deg));
  transform-origin: 50% 66%;
  pointer-events: none;
  user-select: none;
}

.play-card .play-card-pin[data-pin-variant="silver"] {
  background-image: url("../images/decorations/f494d38ea6f7f0ce32b7d313c038f40e.png");
}

.play-board .card-a {
  --play-pin-x: 21%;
  --play-pin-rot: -8deg;
}
.play-board .card-b {
  --play-pin-x: 76%;
  --play-pin-rot: 7deg;
}
.play-board .card-c {
  --play-pin-x: 51%;
  --play-pin-y: -13px;
  --play-pin-rot: -3deg;
}
.play-board .card-d {
  --play-pin-x: 23%;
  --play-pin-rot: 6deg;
}
.play-board .card-e {
  --play-pin-x: 73%;
  --play-pin-rot: -6deg;
}

@media (max-width: 900px) {
  .play-card .play-card-pin {
    top: -10px;
    width: clamp(25px, 6vw, 31px);
  }
}

/* Loose button findings scattered between the playground photo cards. */
.play-button-scatter {
  position: absolute;
  inset: 0;
  z-index: auto;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.play-button-scatter img {
  position: absolute;
  z-index: 30;
  display: block;
  width: var(--button-size, 48px);
  height: auto;
  filter:
    drop-shadow(0 4px 6px rgba(28, 39, 78, .14))
    drop-shadow(0 10px 14px rgba(28, 39, 78, .08));
  transform: rotate(var(--button-rotate, 0deg));
  transform-origin: center;
  user-select: none;
}

.play-button-scatter img[data-play-button-slot="1"] {
  left: 5.5%;
  top: 3%;
  --button-size: clamp(48px, 5.4vw, 66px);
  --button-rotate: -16deg;
  --button-z: 9;
}

.play-button-scatter img[data-play-button-slot="2"] {
  left: 45%;
  top: -7%;
  --button-size: clamp(34px, 4vw, 48px);
  --button-rotate: 18deg;
}

.play-button-scatter img[data-play-button-slot="3"] {
  left: 60%;
  top: 8%;
  --button-size: clamp(42px, 4.7vw, 58px);
  --button-rotate: -12deg;
  --button-z: 10;
}

.play-button-scatter img[data-play-button-slot="4"] {
  right: 13%;
  top: -9%;
  --button-size: clamp(47px, 5.5vw, 68px);
  --button-rotate: 10deg;
}

.play-button-scatter img[data-play-button-slot="5"] {
  left: -2%;
  top: 43%;
  --button-size: clamp(39px, 4.7vw, 57px);
  --button-rotate: 14deg;
  --button-z: 10;
}

.play-button-scatter img[data-play-button-slot="6"] {
  right: 11%;
  top: 30%;
  --button-size: clamp(37px, 4.4vw, 54px);
  --button-rotate: -9deg;
}

.play-button-scatter img[data-play-button-slot="7"] {
  left: 55%;
  top: 42%;
  --button-size: clamp(56px, 6.8vw, 82px);
  --button-rotate: -18deg;
  --button-z: 10;
}

.play-button-scatter img[data-play-button-slot="8"] {
  left: 59%;
  top: 57%;
  --button-size: clamp(29px, 3.5vw, 42px);
  --button-rotate: 24deg;
}

.play-button-scatter img[data-play-button-slot="9"] {
  left: 43%;
  bottom: -5%;
  --button-size: clamp(42px, 5vw, 60px);
  --button-rotate: -11deg;
  --button-z: 10;
}

.play-button-scatter img[data-play-button-slot="10"] {
  left: -9%;
  bottom: 24%;
  --button-size: clamp(40px, 4.8vw, 58px);
  --button-rotate: -20deg;
}

.play-button-scatter img[data-play-button-slot="11"] {
  right: 18%;
  top: 64%;
  bottom: auto;
  --button-size: clamp(34px, 4.1vw, 50px);
  --button-rotate: -21deg;
  --button-z: 10;
}

.play-button-scatter .play-music-decoration {
  left: calc(54% - 16px);
  right: auto;
  top: calc(55% + 8px);
  bottom: auto;
  z-index: 3;
  --button-size: clamp(110px, 13.3vw, 158px);
  --button-rotate: 9deg;
  transform: translate(-50%, -50%) rotate(var(--button-rotate));
}

.play-board.is-detail-open .play-button-scatter {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 900px) {
  .play-button-scatter img {
    display: none;
  }

  .play-button-scatter img[data-play-button-slot="1"],
  .play-button-scatter img[data-play-button-slot="4"],
  .play-button-scatter img[data-play-button-slot="6"],
  .play-button-scatter img[data-play-button-slot="9"],
  .play-button-scatter img[data-play-button-slot="11"] {
    display: block;
    width: min(var(--button-size), 42px);
  }
}

@media (max-width: 620px) {
  .play-button-scatter img[data-play-button-slot="4"],
  .play-button-scatter img[data-play-button-slot="9"] {
    display: none;
  }
}

/* Keep the playground mascot above every decorative layer and fully clickable. */
.play-board.is-detail-open .playground-mascot {
  z-index: 120;
  pointer-events: auto;
  touch-action: manipulation;
}

.play-detail-button-scatter {
  position: absolute;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.play-detail-button-scatter img {
  position: absolute;
  display: block;
  width: var(--detail-button-size, 44px);
  height: auto;
  filter:
    drop-shadow(0 4px 6px rgba(28, 39, 78, .13))
    drop-shadow(0 9px 13px rgba(28, 39, 78, .07));
  transform:
    rotate(var(--detail-button-rotate, 0deg))
    scale(var(--detail-button-scale, 1));
  pointer-events: none;
  user-select: none;
}

.play-detail-button-scatter img[data-detail-button-slot="1"] {
  left: 2%;
  top: 8%;
  --detail-button-size: clamp(34px, 4vw, 52px);
}

.play-detail-button-scatter img[data-detail-button-slot="2"] {
  right: 3%;
  top: 13%;
  --detail-button-size: clamp(42px, 5vw, 64px);
}

.play-detail-button-scatter img[data-detail-button-slot="3"] {
  left: 5%;
  bottom: 7%;
  --detail-button-size: clamp(37px, 4.5vw, 58px);
}

.play-detail-button-scatter img[data-detail-button-slot="4"] {
  right: 13%;
  bottom: 5%;
  --detail-button-size: clamp(29px, 3.5vw, 45px);
}

.play-detail-button-scatter img[data-detail-button-slot="5"] {
  left: 49%;
  top: 3%;
  --detail-button-size: clamp(31px, 3.8vw, 49px);
}

.play-detail.is-gallery-focused .play-detail-button-scatter {
  opacity: 0;
  visibility: hidden;
}

.play-detail .play-detail-copy {
  position: relative;
  z-index: 130;
}

/* Work-page footer: reuse the homepage control and align it with NAN CHUNXI. */
.work-detail-footer {
  display: flex;
  width: max-content;
  margin-top: clamp(58px, 7vw, 96px);
  margin-left: calc(
    clamp(34px, 5.6vw, 86px) -
    ((100vw - min(1090px, calc(100vw - 48px))) / 2)
  );
}

.work-detail-gallery .work-detail-footer {
  margin-left: calc(
    clamp(34px, 5.6vw, 86px) -
    ((100vw - min(1540px, calc(100vw - 48px))) / 2)
  );
}

.work-detail-long .work-detail-footer {
  margin-left: calc(
    clamp(34px, 5.6vw, 86px) -
    ((100vw - min(1180px, calc(100vw - 48px))) / 2)
  );
}

@media (max-width: 900px) {
  .work-detail-footer,
  .work-detail-gallery .work-detail-footer {
    margin-left: -4px;
  }
}

@media (max-width: 760px) {
  .work-detail-long .work-detail-footer {
    margin-left: 6px;
  }
}

/* Work 01: keep the CMF video on the same horizontal line as image slides. */
.work-01-page .work-gallery-video-page:has([data-youtube-player]) {
  padding-top: 0;
}

.work-01-page .work-gallery-youtube-link {
  top: -40px;
}

/* Work 02: match the sibling navigation edges used by gallery work pages. */
.work-02-page .work-detail-long {
  width: min(1540px, calc(100% - 48px));
}

.work-02-page .work-detail-nav {
  margin-left: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
  margin-right: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
}

.work-02-page .work-detail-footer {
  margin-left: calc(
    clamp(34px, 5.6vw, 86px) -
    ((100vw - min(1540px, calc(100vw - 48px))) / 2)
  );
}

/* Work 02 is one continuous vertical presentation: remove seams between media. */
.work-02-page .work-long-images {
  gap: 0;
  row-gap: 0;
}

/* Work 02: linked Weixin poster placed after the first project image. */
.work-02-page .work-long-weixin-video {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #202020;
  cursor: pointer;
}

.work-02-page .work-long-weixin-video img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .35s ease, filter .25s ease;
}

.work-02-page .work-long-weixin-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(62px, 7vw, 92px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 32px rgba(21,42,111,.24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background .25s ease;
}

.work-02-page .work-long-weixin-video-play svg {
  width: 52%;
  fill: #315cff;
}

.work-02-page .work-long-weixin-video:hover img {
  filter: brightness(1.04);
  transform: scale(1.012);
}

.work-02-page .work-long-weixin-video:hover .work-long-weixin-video-play {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}

@media (max-width: 760px) {
  .work-02-page .work-detail-nav {
    margin-left: 0;
    margin-right: 0;
  }
  .work-02-page .work-detail-footer {
    margin-left: 6px;
  }
}

/* Catshroom mobile: keep the card carousel swipeable without enabling
   the desktop-only pack opening sequence. */
.catshroom-card-hint .catshroom-card-hint-default {
  display: inline;
}

.catshroom-card-hint .catshroom-card-hint-mobile {
  display: none;
}

@media (max-width: 760px) {
  .catshroom-card-hint .catshroom-card-hint-default {
    display: none;
  }

  .catshroom-card-hint .catshroom-card-hint-mobile {
    display: inline;
  }

  .catshroom-pack-card:not(.is-active) {
    bottom: calc(clamp(34px, 4.6vw, 62px) + 60px);
  }

  .catshroom-card-slider {
    left: auto;
    right: 18px;
    bottom: 62px;
    width: max(116px, calc(100% - 180px));
    transform: none;
  }

  .catshroom-card-stage {
    touch-action: pan-y;
  }

  .catshroom-card-stage.is-dragging {
    cursor: grabbing;
  }

  .catshroom-card-stage.is-mobile-pack-notice .catshroom-card-hint-default {
    display: none;
  }

  .catshroom-card-stage.is-mobile-pack-notice .catshroom-card-hint-mobile {
    display: inline;
    animation: catshroomMobileHintFlash .68s ease-out;
  }

  .catshroom-card-stage.is-mobile-pack-notice .pack-swipe-cue {
    display: none;
  }

  .catshroom-card-stage .pack-start-label {
    display: none;
  }
}

@keyframes catshroomMobileHintFlash {
  0%, 100% {
    opacity: 1;
    text-shadow: none;
  }
  28%, 72% {
    opacity: .18;
    text-shadow: 0 0 12px rgba(49,92,255,.34);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 18px rgba(49,92,255,.52);
  }
}

/* A short follow delay makes the card stack feel weighted while dragging;
   release still uses the existing longer snap transition. */
.catshroom-card-stage.is-dragging .catshroom-card,
.catshroom-card-stage.is-dragging .catshroom-card:hover {
  transition: transform .09s cubic-bezier(.2,.58,.28,1), opacity .12s linear;
}

/* Align the CMF and AIC external-watch buttons with the right edge of
   their sibling-work navigation controls. */
.work-01-page .work-gallery-youtube-link,
.work-06-page .work-gallery-youtube-link {
  right: calc(
    max(
      clamp(34px, 5.6vw, 86px),
      ((100vw - min(1540px, calc(100vw - 48px))) / 2)
    ) -
    ((100vw - min(1420px, calc(100vw - 48px))) / 2)
  );
}

@media (max-width: 760px) {
  .work-01-page .work-gallery-youtube-link,
  .work-06-page .work-gallery-youtube-link {
    right: 0;
  }
}

/* Every work-page footer follows the exact left edge of its top
   "返回主页" control. */
.work-detail-footer {
  margin-left: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1090px, calc(100vw - 48px))) / 2)));
}

.work-detail-gallery .work-detail-footer {
  margin-left: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
}

.work-detail-long .work-detail-footer {
  margin-left: calc(
    clamp(34px, 5.6vw, 86px) -
    ((100vw - min(1180px, calc(100vw - 48px))) / 2)
  );
}

.work-02-page .work-detail-footer {
  margin-left: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
}

@media (max-width: 760px) {
  .work-detail-footer,
  .work-detail-gallery .work-detail-footer,
  .work-detail-long .work-detail-footer,
  .work-02-page .work-detail-footer {
    margin-left: 0;
  }
}

/* Full work-image viewer: zoom, pan, wheel and pinch controls. */
.work-image-modal .work-image-modal-window.is-zoom-viewer,
.work-image-modal.is-shanshui-modal .work-image-modal-window.is-zoom-viewer {
  width: min(1560px, 94vw);
  max-width: 94vw;
  height: 90vh;
  max-height: 90vh;
  padding: 14px;
  overflow: hidden;
}

.work-image-viewer {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  background:
    linear-gradient(45deg, rgba(49,92,255,.045) 25%, transparent 25% 75%, rgba(49,92,255,.045) 75%),
    linear-gradient(45deg, rgba(49,92,255,.045) 25%, transparent 25% 75%, rgba(49,92,255,.045) 75%),
    rgba(255,255,255,.55);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  touch-action: none;
  cursor: grab;
}

.work-image-viewer:active,
.work-image-viewer.is-zoomed:active {
  cursor: grabbing;
}

.work-image-modal-window.is-zoom-viewer .work-image-viewer img,
.work-image-modal.is-shanshui-modal .work-image-modal-window.is-zoom-viewer .work-image-viewer img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.work-image-viewer-toolbar {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(49,92,255,.42);
  border-radius: 8px;
  background: rgba(241,238,231,.88);
  box-shadow: 0 8px 24px rgba(25,44,104,.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.work-image-viewer-toolbar button {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(49,92,255,.48);
  border-radius: 5px;
  color: #315cff;
  background: rgba(255,255,255,.78);
  font: 800 14px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.work-image-viewer-toolbar button:hover {
  color: #fff;
  background: #315cff;
}

.work-image-viewer-toolbar .work-image-viewer-percent {
  min-width: 62px;
}

.work-long-images > img.is-work-image-zoomable {
  cursor: zoom-in;
}

.work-image-modal-window.is-zoom-viewer > .work-image-close {
  top: 12px;
  right: 12px;
  z-index: 20;
}

.play-modal-gallery.is-image-viewer {
  touch-action: none;
  cursor: grab;
  overflow: hidden;
}

.play-modal-gallery.is-image-viewer.is-image-panning,
.play-modal-gallery.is-image-viewer:active {
  cursor: grabbing;
}

.play-modal-gallery.is-image-viewer > img {
  transform-origin: center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.play-image-viewer-toolbar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 24;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(49,92,255,.42);
  border-radius: 8px;
  background: rgba(241,238,231,.9);
  box-shadow: 0 8px 24px rgba(25,44,104,.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.play-modal-gallery.is-image-viewer .play-image-viewer-toolbar {
  display: flex;
}

.play-image-viewer-toolbar button {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(49,92,255,.48);
  border-radius: 5px;
  color: #315cff;
  background: rgba(255,255,255,.82);
  font: 800 14px/1 "Geely Design Type", "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.play-image-viewer-toolbar button:hover {
  color: #fff;
  background: #315cff;
}

.play-image-viewer-toolbar .play-image-viewer-percent {
  min-width: 62px;
}

@media (max-width: 760px) {
  .work-image-modal {
    padding: 12px;
  }

  .work-image-modal .work-image-modal-window.is-zoom-viewer,
  .work-image-modal.is-shanshui-modal .work-image-modal-window.is-zoom-viewer {
    width: 100%;
    max-width: 100%;
    height: 88vh;
    max-height: 88vh;
    padding: 8px;
  }

  .work-image-viewer-toolbar {
    bottom: 14px;
  }

  .work-image-modal-window.is-zoom-viewer > .work-image-close {
    top: 8px;
    right: 8px;
  }

  .play-image-viewer-toolbar {
    bottom: 12px;
  }
}

/* Contact pixel icons: keep all three assets on one consistent visual baseline. */
.contact-icons a {
  grid-template-rows: 76px auto;
}

.contact-icons .phone-icon,
.contact-icons .chat-icon,
.contact-icons .paper-icon {
  width: 92px;
  height: 76px;
  overflow: visible;
}

.contact-icons .contact-pixel-icon {
  display: block;
  width: auto;
  height: 72px;
  max-width: 92px;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 3px 0 rgba(25,44,104,.1))
    drop-shadow(0 8px 12px rgba(49,92,255,.14));
}

.contact-icons .phone-icon .contact-pixel-icon,
.contact-icons .chat-icon .contact-pixel-icon,
.contact-icons .paper-icon .contact-pixel-icon {
  width: auto;
  height: 72px;
  transform: none;
}

/* Interactive inspiration clip in the open space beside the playground cards. */
.play-note-widget {
  --note-drag-x: 0px;
  --note-drag-y: 0px;
  position: absolute;
  right: 8.2%;
  bottom: 7%;
  z-index: 90;
  display: block;
  width: clamp(124px, 12.2vw, 154px);
  aspect-ratio: .78;
  padding: 0;
  border: 0;
  color: #315cff;
  background: transparent;
  font-family: "Geely Design Type", "Microsoft YaHei", sans-serif;
  text-align: left;
  touch-action: none;
  cursor: grab;
  transform: translate3d(var(--note-drag-x), var(--note-drag-y), 0) rotate(2.4deg);
  transition:
    filter .2s ease,
    opacity .2s ease,
    visibility .2s ease;
}

.play-note-widget:active {
  cursor: grabbing;
}

.play-note-widget.is-rebounding {
  transition:
    transform .48s cubic-bezier(.2,.82,.25,1.18),
    filter .2s ease,
    opacity .2s ease,
    visibility .2s ease;
}

.play-note-widget:hover {
  filter: drop-shadow(0 10px 14px rgba(49,92,255,.2));
}

.play-note-widget-sheet {
  position: absolute;
  inset: 10% 9% 2% 5%;
  border: 1px solid rgba(31,46,100,.18);
  background:
    repeating-linear-gradient(0deg, rgba(49,92,255,.13) 0 1px, transparent 1px 13px),
    #f8f5ed;
  box-shadow: 0 10px 18px rgba(28,39,78,.13);
  transform: rotate(-5deg);
}

.play-note-widget-card {
  position: absolute;
  inset: 6% 4% 4% 9%;
  display: grid;
  grid-template-rows: auto 1fr 1fr auto;
  gap: 6px;
  box-sizing: border-box;
  padding: 14px 12px 10px;
  overflow: hidden;
  border: 1.5px solid rgba(49,92,255,.72);
  border-radius: 3px 3px 12px 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 4px, transparent 4px 11px),
    #81a4ff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.84) inset,
    0 12px 18px rgba(28,39,78,.16);
}

.play-note-widget-card::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(49,92,255,.3);
  background: #f1eee7;
  transform: rotate(45deg);
}

.play-note-widget-tab {
  position: absolute;
  right: -13px;
  top: 26%;
  z-index: 3;
  padding: 5px 4px;
  border: 1px solid #315cff;
  border-radius: 0 6px 6px 0;
  color: #315cff;
  background: #f1eee7;
  font: 800 8px/1 "Courier New", monospace;
  letter-spacing: .04em;
  writing-mode: vertical-rl;
}

.play-note-widget-index {
  position: relative;
  z-index: 2;
  justify-self: end;
  color: #fff;
  font: 800 8px/1 "Courier New", monospace;
  letter-spacing: .08em;
}

.play-note-widget-slot {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 0;
  border: 1px solid rgba(49,92,255,.24);
  color: #315cff;
  background:
    linear-gradient(rgba(49,92,255,.06) 1px, transparent 1px),
    #fffdf8;
  background-size: 100% 12px;
  box-shadow: 0 4px 8px rgba(25,44,104,.08);
  font: 900 clamp(10px, 1vw, 13px)/1 "Courier New", monospace;
  letter-spacing: .04em;
  transition: transform .24s cubic-bezier(.2,.75,.25,1), opacity .18s ease;
}

.play-note-widget-slot.is-top {
  transform: rotate(-1deg);
}

.play-note-widget-slot.is-bottom {
  transform: rotate(1deg);
}

.play-note-widget.is-switching .play-note-widget-slot.is-top {
  animation: playNoteSlotTop .34s ease;
}

.play-note-widget.is-switching .play-note-widget-slot.is-bottom {
  animation: playNoteSlotBottom .34s .04s ease;
}

.play-note-widget-footer {
  position: relative;
  z-index: 2;
  color: #fff;
  font: 800 6px/1 "Courier New", monospace;
  letter-spacing: .03em;
  white-space: nowrap;
}

.play-note-widget-clip {
  position: absolute;
  left: 50%;
  top: -5px;
  z-index: 5;
  width: 30px;
  height: 22px;
  border: 3px solid #8c919c;
  border-bottom-width: 7px;
  border-radius: 9px 9px 3px 3px;
  box-sizing: border-box;
  background: rgba(255,255,255,.2);
  box-shadow:
    0 2px 0 rgba(255,255,255,.8) inset,
    0 4px 7px rgba(28,39,78,.22);
  transform: translateX(-50%) rotate(-2deg);
}

.play-note-widget-clip::before,
.play-note-widget-clip::after {
  content: "";
  position: absolute;
  top: 11px;
  width: 3px;
  height: 17px;
  border-radius: 2px;
  background: #737985;
}

.play-note-widget-clip::before {
  left: 4px;
  transform: rotate(15deg);
}

.play-note-widget-clip::after {
  right: 4px;
  transform: rotate(-15deg);
}

.play-board.is-detail-open .play-note-widget {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes playNoteSlotTop {
  0% { opacity: .15; transform: translateY(-9px) rotate(-3deg); }
  100% { opacity: 1; transform: translateY(0) rotate(-1deg); }
}

@keyframes playNoteSlotBottom {
  0% { opacity: .15; transform: translateY(9px) rotate(3deg); }
  100% { opacity: 1; transform: translateY(0) rotate(1deg); }
}

@media (max-width: 900px) {
  .play-note-widget {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .play-note-widget,
  .play-note-widget-slot {
    animation: none !important;
    transition: none !important;
  }
}

/* Viewer polish: keep every work close glyph visible and share one fine surface. */
.work-image-modal-window.is-zoom-viewer > .work-image-close {
  display: grid;
  place-items: center;
  color: #315cff;
  -webkit-text-fill-color: #315cff;
}

.work-image-modal-window.is-zoom-viewer > .work-image-close svg {
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.play-modal:has(.play-modal-gallery.is-image-viewer) .play-modal-backdrop {
  background: rgba(18,23,46,.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.play-modal-window:has(.play-modal-gallery.is-image-viewer) {
  border: 1.5px solid #315cff;
  border-radius: 8px;
  background: rgba(241,238,231,.96);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.62) inset,
    0 0 34px rgba(49,92,255,.28);
}

.play-modal-gallery.is-image-viewer {
  border-radius: 5px;
  background:
    linear-gradient(45deg, rgba(49,92,255,.045) 25%, transparent 25% 75%, rgba(49,92,255,.045) 75%),
    linear-gradient(45deg, rgba(49,92,255,.045) 25%, transparent 25% 75%, rgba(49,92,255,.045) 75%),
    rgba(255,255,255,.55);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
}

/* Desktop segmented control: language and theme read as one continuous unit. */
@media (min-width: 1041px) {
  .desktop-bar .language-switch,
  .reference-header .language-switch {
    top: 50%;
    height: 26px;
    box-sizing: border-box;
    border-right: 0;
    border-radius: 4px 0 0 4px;
    box-shadow: -3px 0 8px rgba(255,255,255,.42);
  }

  .desktop-bar .theme-toggle,
  .reference-header .theme-toggle {
    top: 50%;
    height: 26px;
    box-sizing: border-box;
    border-left: 0;
    border-radius: 0 4px 4px 0;
    box-shadow: 3px 0 8px rgba(255,255,255,.42);
    transform: translateY(-50%);
  }

  .desktop-bar .language-switch button,
  .reference-header .language-switch button,
  .desktop-bar .theme-toggle span,
  .reference-header .theme-toggle span {
    height: 24px;
    min-height: 24px;
    box-sizing: border-box;
  }

  .desktop-bar .language-switch button:first-child,
  .reference-header .language-switch button:first-child {
    border-radius: 3px 0 0 3px;
  }

  .desktop-bar .theme-toggle span:last-child,
  .reference-header .theme-toggle span:last-child {
    border-radius: 0 3px 3px 0;
  }

  .desktop-bar .theme-icon-moon svg,
  .reference-header .theme-icon-moon svg {
    transform: translate(1px, -1.5px) scale(1.12);
  }
}

/* Reference-proportioned playground note: tall layered folder with two slots. */
.play-note-widget {
  right: 7.4%;
  bottom: 1.5%;
  width: clamp(118px, 10.8vw, 142px);
  aspect-ratio: .48;
  transform: translate3d(var(--note-drag-x), var(--note-drag-y), 0) rotate(1.8deg);
}

.play-note-widget-sticky {
  position: absolute;
  left: 4%;
  right: -4%;
  top: 0;
  z-index: 1;
  height: 27%;
  overflow: hidden;
  border: 1px solid rgba(49,92,255,.38);
  background: #fff69a;
  box-shadow: 0 8px 12px rgba(28,39,78,.13);
  transform: rotate(-5deg);
}

.play-note-widget-sticky::before {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: 12px;
  height: 5px;
  border-top: 2px dashed #315cff;
  border-bottom: 2px dashed #315cff;
  opacity: .72;
}

.play-note-widget-sticky span {
  position: absolute;
  left: 12%;
  right: 10%;
  bottom: 12%;
  color: #315cff;
  font: 900 clamp(9px, .85vw, 12px)/1 "Courier New", monospace;
  letter-spacing: .14em;
  text-align: center;
  text-shadow:
    2px 0 0 rgba(49,92,255,.38),
    -2px 0 0 rgba(49,92,255,.2);
  transform: rotate(2deg);
}

.play-note-widget-sheet {
  inset: 23% 0 0 0;
  overflow: visible;
  border: 1.5px solid rgba(49,92,255,.72);
  border-radius: 4px 4px 17px 4px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 22%),
    #7196ff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.78) inset,
    0 14px 20px rgba(28,39,78,.18);
  transform: rotate(1deg);
}

.play-note-widget-sheet::before,
.play-note-widget-sheet::after {
  position: absolute;
  left: 10%;
  z-index: 0;
  display: grid;
  place-items: center;
  width: 52%;
  aspect-ratio: 1;
  border: 1px solid rgba(34,34,34,.2);
  border-radius: 50%;
  color: #202020;
  background: #fffdf8;
  font: 900 clamp(22px, 2.3vw, 32px)/1 "Courier New", monospace;
  box-shadow: 0 5px 9px rgba(28,39,78,.1);
}

.play-note-widget-sheet::before {
  content: "05";
  top: 28%;
  transform: rotate(-7deg);
}

.play-note-widget-sheet::after {
  content: "24";
  bottom: 4%;
  transform: rotate(5deg);
}

.play-note-widget-card {
  inset: 29% 15% 8% 25%;
  z-index: 3;
  grid-template-rows: 1fr 1fr auto;
  gap: 7px;
  padding: 12px 9px 9px;
  border-color: rgba(49,92,255,.78);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 3px, transparent 3px 10px),
    repeating-linear-gradient(0deg, rgba(49,92,255,.16) 0 1px, transparent 1px 13px),
    #8eb0ff;
  transform: rotate(-1deg);
}

.play-note-widget-card::after {
  display: none;
}

.play-note-widget-slot {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(49,92,255,.24);
  font-size: clamp(9px, .9vw, 12px);
  background:
    linear-gradient(rgba(49,92,255,.055) 1px, transparent 1px),
    rgba(255,253,248,.97);
  background-size: 100% 11px;
  cursor: zoom-in;
}

.play-note-widget-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  transition: transform .25s ease, filter .25s ease;
}

.play-note-widget-slot:hover img {
  transform: scale(1.045);
  filter: saturate(1.04);
}

.play-note-widget-index {
  display: none;
}

.play-note-widget-footer {
  font-size: 5px;
  line-height: 1.15;
  white-space: normal;
}

.play-note-widget-tab {
  right: -11px;
  top: 43%;
  z-index: 6;
  padding: 6px 4px;
  background: #f1eee7;
  font-size: 7px;
}

.play-note-widget-clip {
  left: 50%;
  top: 19%;
  z-index: 7;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 0;
  background: url("../images/decorations/f494d38ea6f7f0ce32b7d313c038f40e.png") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 6px rgba(28,39,78,.2));
  transform: translateX(-50%) rotate(-4deg);
}

.play-note-widget-clip::before,
.play-note-widget-clip::after {
  display: none;
}

.play-note-widget-ribbon {
  position: absolute;
  left: -23%;
  top: 56%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 134%;
  height: 25px;
  box-sizing: border-box;
  padding: 0 8px;
  color: #fff;
  background:
    radial-gradient(circle, rgba(255,255,255,.92) 0 1.5px, transparent 1.8px) 8px 50% / 12px 12px repeat-x,
    #7196ff;
  box-shadow: 0 5px 10px rgba(28,39,78,.14);
  transform: rotate(67deg);
  transform-origin: center;
  pointer-events: none;
}

.play-note-widget-ribbon b,
.play-note-widget-ribbon i {
  padding: 2px 4px;
  background: rgba(113,150,255,.92);
  font: 900 7px/1 "Courier New", monospace;
  font-style: normal;
  white-space: nowrap;
}

/* Keep the focused playground artwork sharp: size the viewer directly instead
   of scaling the already-rendered modal surface. */
.play-modal-window:has(.play-modal-gallery.is-focused:not(.is-video)),
.play-modal-window:has(.play-modal-gallery.is-focused.is-portrait:not(.is-video)) {
  transform: none;
}

.play-modal-gallery.is-focused:not(.is-video) > img {
  image-rendering: auto;
}

/* Playground focused artwork: enlarge the fitted paper viewer by about 30%
   while keeping the close control and zoom toolbar inside the viewport. */
@media (min-width: 621px) {
  .play-modal-window:has(.play-modal-gallery.is-focused:not(.is-video)) {
    max-width: 96vw;
  }

  .play-modal-gallery.is-focused:not(.is-video) {
    max-width: calc(96vw - clamp(20px, 2vw, 28px));
  }

  .play-modal-gallery.is-focused:not(.is-video) > img {
    max-width: min(1456px, calc(96vw - clamp(124px, 9.2vw, 160px)));
    max-height: min(86vh, 1066px);
  }
}

/* Simplified playground painting ticket: one artwork window inside the
   supplied perforated paper frame. */
.play-note-widget {
  right: 5.8%;
  bottom: 1.5%;
  width: clamp(178px, 15.5vw, 220px);
  aspect-ratio: .92;
  overflow: visible;
  filter: drop-shadow(0 9px 12px rgba(31,46,100,.16));
  transform: translate3d(var(--note-drag-x), calc(var(--note-drag-y) + 20px), 0) rotate(40deg);
}

.play-note-widget:hover {
  filter: drop-shadow(0 12px 16px rgba(31,46,100,.2));
}

.play-note-ticket {
  position: absolute;
  display: block;
  width: 68%;
  aspect-ratio: 711 / 864;
  transform-origin: 50% 54%;
  transition: transform .25s ease, filter .25s ease;
}

.play-note-ticket.is-back {
  left: 1%;
  top: 0;
  z-index: 1;
  transform: rotate(-11deg);
}

.play-note-ticket.is-front {
  right: 0;
  bottom: 0;
  z-index: 2;
  transform: rotate(12deg);
}

.play-note-ticket.is-front::before {
  content: "my paintings";
  position: absolute;
  left: calc(13% + 10px);
  bottom: calc(9% + 10px);
  z-index: 4;
  color: #315cff;
  font: 700 clamp(8px, .78vw, 11px)/1 "Segoe Print", "Comic Sans MS", cursive;
  letter-spacing: .04em;
  white-space: nowrap;
  transform: rotate(0deg);
  transform-origin: left bottom;
  text-shadow: .5px .5px 0 rgba(49,92,255,.14);
  pointer-events: none;
}

.play-note-ticket:hover {
  z-index: 4;
  filter: drop-shadow(0 8px 10px rgba(31,46,100,.2));
}

.play-note-ticket::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  z-index: 5;
  width: clamp(27px, 2.25vw, 33px);
  aspect-ratio: 1;
  background: url("../images/decorations/f494d38ea6f7f0ce32b7d313c038f40e.png") center / contain no-repeat;
  filter: drop-shadow(0 5px 5px rgba(27,39,92,.2));
  transform: translateX(-50%) rotate(-3deg);
  pointer-events: none;
}

.play-note-ticket.is-back::after {
  display: none;
}

.play-note-ticket.is-front::after {
  left: 48%;
  transform: translateX(-50%) rotate(7deg);
}

.play-note-ticket.is-back:hover {
  transform: rotate(-8deg) translateY(-3px);
}

.play-note-ticket.is-front:hover {
  transform: rotate(9deg) translateY(-3px);
}

.play-note-widget-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.play-note-ticket > .play-note-widget-slot {
  position: absolute;
  left: 11.25%;
  top: 7.87%;
  z-index: 1;
  width: 71.73%;
  height: 59.38%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #fff;
  box-shadow: none;
  transform: none;
  cursor: zoom-in;
}

.play-note-ticket > .play-note-widget-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}

.play-note-widget.is-switching .play-note-widget-slot {
  animation: playNoteTicketSwap .28s ease;
}

@keyframes playNoteTicketSwap {
  0% { opacity: .25; transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}

/* Keep the interactive octopus above the painting tickets and decorations. */
.playground-mascot,
.play-board.is-detail-open .playground-mascot {
  z-index: 240;
  pointer-events: auto;
}

/* Narrow screens: keep the three contact icons on one uninterrupted row. */
@media (max-width: 620px) {
  .contact-icons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: clamp(6px, 2.5vw, 12px);
    align-items: start;
    justify-content: stretch;
    flex-wrap: nowrap;
  }

  .contact-icons a {
    min-width: 0;
    grid-template-rows: clamp(54px, 18vw, 68px) auto;
    gap: 6px;
  }

  .contact-icons .phone-icon,
  .contact-icons .chat-icon,
  .contact-icons .paper-icon {
    width: clamp(64px, 22vw, 82px);
    height: clamp(54px, 18vw, 68px);
  }

  .contact-icons .contact-pixel-icon,
  .contact-icons .phone-icon .contact-pixel-icon,
  .contact-icons .chat-icon .contact-pixel-icon,
  .contact-icons .paper-icon .contact-pixel-icon {
    height: clamp(52px, 17vw, 66px);
    max-width: clamp(64px, 22vw, 82px);
  }

  .contact-icons small {
    max-width: 100%;
    font-size: clamp(9px, 2.8vw, 11px);
  }
}

/* Final playground painting device override.
   Keep the complete Stardust asset visible and place one purple painting
   only inside its transparent LCD opening. */
.play-note-widget {
  right: 3.8%;
  bottom: 2%;
  width: clamp(180px, 16.5vw, 240px);
  aspect-ratio: 1370 / 1148;
  filter: drop-shadow(0 10px 12px rgba(31, 46, 100, .18));
  transform:
    translate3d(var(--note-drag-x), calc(var(--note-drag-y) + 20px), 0)
    rotate(0deg);
}

.play-note-widget:hover {
  filter: drop-shadow(0 13px 16px rgba(31, 46, 100, .23));
}

.play-note-widget > .play-note-widget-slot {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  cursor: grab;
}

.play-note-widget > .play-note-widget-slot:active {
  cursor: grabbing;
}

.play-note-camera-screen {
  position: absolute;
  left: 28%;
  top: 22%;
  z-index: 1;
  display: block;
  width: 34%;
  height: 56%;
  overflow: hidden;
  border-radius: 0;
  background: #ded2f6;
  clip-path: none;
  transform: rotate(13deg);
  pointer-events: none;
}

.play-note-camera-screen > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 47%;
  image-rendering: auto;
  transform: scale(1.45);
  transition: opacity .24s ease;
}

.play-note-camera-art.is-purple {
  opacity: 1;
}

.play-note-camera-art.is-yellow {
  opacity: 0;
}

.play-note-widget-slot:hover .play-note-camera-art.is-purple {
  opacity: 0;
}

.play-note-widget-slot:hover .play-note-camera-art.is-yellow {
  opacity: 1;
}

.play-note-widget-slot:hover .play-note-camera-art {
  transform: scale(1.45);
}

.play-note-camera-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.play-note-widget.is-switching > .play-note-widget-slot {
  animation: playNoteCameraSwap .28s ease;
}

/* Work 02 first image keeps a clean edge without the former coral glow. */
.work-02-page .work-long-image-intro {
  position: relative;
  z-index: 1;
  border-radius: clamp(16px, 1.8vw, 28px) clamp(16px, 1.8vw, 28px) 0 0;
  box-shadow: none;
}

/* Final cross-page maintenance overrides — 2026-08-02. */
.desktop-bar::before {
  top: calc(-48px - env(safe-area-inset-top, 0px));
  height: calc(100% + 40px + env(safe-area-inset-top, 0px));
}

.theme-toggle {
  top: 50%;
}

.theme-icon-moon svg {
  transform: translate(1px, -1px) scale(1.08);
}

@media (max-width: 1040px) {
  .theme-toggle,
  .reference-header .theme-toggle {
    top: 18px;
  }
}

.work-detail-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.work-footer-next {
  flex: 0 0 auto;
}

.work-summary-description,
.work-project-description p,
.work-detail-long .work-long-description {
  font-size: 15px;
  line-height: 1.9;
  font-weight: 400;
}

.work-project-description strong,
.work-project-description b,
.work-summary-description strong,
.work-summary-description b,
.work-detail-long .work-long-description strong,
.work-detail-long .work-long-description b,
.work-project-description .work-project-meaning {
  font-weight: 700;
}

@media (max-width: 620px) {
  .work-summary-description,
  .work-project-description p,
  .work-detail-long .work-long-description {
    font-size: 14px;
  }
}

/* Decode and scale the source bitmap itself instead of preserving a cached,
   viewport-sized GPU layer when the viewer zooms in. */
.work-image-modal-window.is-zoom-viewer .work-image-viewer img,
.work-image-modal.is-shanshui-modal .work-image-modal-window.is-zoom-viewer .work-image-viewer img {
  image-rendering: auto !important;
  will-change: auto;
  backface-visibility: visible;
  contain: none;
}

.site-loading-overlay {
  --asset-progress: 0%;
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #315cff;
  background: #f1eee7;
  opacity: 1;
  visibility: visible;
  transition: opacity .28s ease, visibility 0s linear .28s;
}

.site-loading-overlay.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loading-card {
  width: min(360px, calc(100vw - 48px));
  padding: 22px;
  border: 1.5px solid #315cff;
  border-radius: 10px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 18px 44px rgba(49,92,255,.16);
}

.site-loading-card strong,
.site-loading-card span {
  display: block;
}

.site-loading-card strong {
  margin-bottom: 14px;
  font: 800 13px/1.7 "Geely Design Type", "Microsoft YaHei", sans-serif;
}

.site-loading-track {
  height: 8px;
  overflow: hidden;
  border: 1px solid #315cff;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
}

.site-loading-track::before {
  content: "";
  display: block;
  width: var(--asset-progress);
  height: 100%;
  background: #315cff;
  transition: width .18s ease;
}

.site-loading-card span {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  place-items: center;
  padding: 24px;
}

.contact-modal.is-open {
  display: grid;
}

body.contact-modal-open {
  overflow: hidden;
}

.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(18,23,46,.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.contact-modal-window {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(760px, 92vw);
  max-height: 90vh;
  padding: 22px;
  overflow: hidden;
  border: 1.5px solid #315cff;
  border-radius: 10px;
  color: #315cff;
  background: #f1eee7;
  box-shadow: 0 20px 60px rgba(30,48,110,.3);
}

.contact-modal-window h2 {
  margin: 0 48px 16px 0;
  font-size: 22px;
}

.contact-modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.5px solid #315cff;
  border-radius: 50%;
  color: #315cff;
  background: #fff;
  font-size: 25px;
  line-height: 1;
}

.contact-wechat-window {
  width: min(430px, 92vw);
  text-align: center;
}

.contact-qr-image {
  display: block;
  width: min(300px, 72vw);
  height: auto;
  margin: 0 auto 16px;
  border: 10px solid #fff;
  image-rendering: auto;
}

.contact-wechat-window p {
  margin: 0;
  font-size: 15px;
}

.contact-pdf-window iframe {
  display: block;
  width: 100%;
  height: min(68vh, 760px);
  border: 1px solid rgba(49,92,255,.3);
  background: #fff;
}

.contact-download-button {
  display: inline-flex;
  min-height: 38px;
  margin-top: 12px;
  padding: 0 18px;
  align-items: center;
  border: 1.5px solid #315cff;
  border-radius: 7px;
  color: #fff;
  background: #315cff;
  font-weight: 800;
  text-decoration: none;
}

.contact-copy-toast {
  position: fixed;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom, 0px));
  z-index: 1400;
  padding: 11px 18px;
  border: 1.5px solid #315cff;
  border-radius: 999px;
  color: #315cff;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(30,48,110,.22);
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .2s ease;
}

.contact-copy-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.work-image-modal.is-image-loading .work-image-viewer img {
  opacity: .25;
}

.work-image-viewer img {
  transition: opacity .16s ease;
}

.about-skills {
  max-width: 680px;
  margin-top: 22px;
  padding: 18px;
  border: 1.5px solid #315cff;
  border-radius: 10px;
  background: rgba(255,255,255,.42);
  box-shadow: 6px 6px 0 rgba(49,92,255,.13);
}

.about-skills > strong {
  display: block;
  margin-bottom: 12px;
  color: #315cff;
  font-size: 17px;
}

.about-skills > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.about-skills span {
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  background: #315cff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.about-octopus {
  display: block;
  width: clamp(92px, 10vw, 138px);
  height: auto;
  margin: 24px 0 0 auto;
  filter: drop-shadow(0 10px 15px rgba(49,92,255,.2));
}

@media (max-width: 620px) {
  .contact-modal {
    padding: 12px;
  }

  .contact-modal-window {
    width: 100%;
    max-height: 88vh;
    padding: 16px;
  }

  .contact-pdf-window iframe {
    height: 68vh;
  }

  .about-skills {
    padding: 14px;
  }
}

/* About page follow-up: place Cyrus after the experience timeline. */
.reference-about {
  position: relative;
}

.reference-about > .about-octopus {
  position: absolute;
  right: 0;
  bottom: clamp(58px, 7vh, 84px);
  margin: 0;
}

@media (max-width: 620px) {
  .reference-about > .about-octopus {
    bottom: 48px;
  }
}

@media (max-width: 600px) {
  .reference-about > .about-octopus {
    bottom: 48px;
  }
}

/* Keep EN / 中文 / sun / moon on one exact baseline at every breakpoint. */
.desktop-bar .language-switch,
.reference-header .language-switch,
.desktop-bar .theme-toggle,
.reference-header .theme-toggle {
  box-sizing: border-box;
  height: 28px;
}

.desktop-bar .language-switch button,
.reference-header .language-switch button,
.desktop-bar .theme-toggle span,
.reference-header .theme-toggle span {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0;
  line-height: 1;
}

.desktop-bar .language-switch,
.reference-header .language-switch {
  border-right: 0;
}

.desktop-bar .theme-toggle,
.reference-header .theme-toggle {
  border-left: 0;
}

.desktop-bar .theme-icon svg,
.reference-header .theme-icon svg {
  margin: 0;
}

@media (min-width: 1041px) {
  .desktop-bar .language-switch,
  .reference-header .language-switch,
  .desktop-bar .theme-toggle,
  .reference-header .theme-toggle {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Wide about page: keep the portrait fixed and align copy with the header About link. */
@media (min-width: 1041px) {
  .reference-about {
    width: auto;
    margin-left: max(24px, calc((100% - 1090px) / 2));
    margin-right: clamp(34px, 5.6vw, 86px);
  }

  .reference-about .about-hero-grid {
    grid-template-columns: minmax(280px, min(44%, 479.6px)) minmax(0, 1fr);
  }

  .reference-about .about-copy {
    padding-right: 0;
  }

  .reference-about .about-copy p,
  .reference-about .contact-line {
    max-width: none;
  }

  .reference-about .about-timeline {
    width: 1090px;
    max-width: 100%;
  }
}

@media (max-width: 1040px) {
  .desktop-bar .language-switch,
  .reference-header .language-switch,
  .desktop-bar .theme-toggle,
  .reference-header .theme-toggle {
    top: 18px;
    transform: none;
  }
}

/* Restore the title glass to its original visible footprint. The separate
   fixed strip only covers the normally invisible area above the viewport. */
.desktop-bar::before,
.reference-header::before {
  top: 0;
  height: calc(100% - 8px);
}

body.desktop-page::before,
body.work-detail-page::before,
body.reference-about-page::before {
  content: "";
  position: fixed;
  left: clamp(12px, 2.6vw, 38px);
  right: clamp(12px, 2.6vw, 38px);
  top: calc(-64px - env(safe-area-inset-top, 0px));
  z-index: 159;
  height: calc(64px + env(safe-area-inset-top, 0px));
  border: 1px solid rgba(255,255,255,.42);
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.68)),
    rgba(241,238,231,.28);
  pointer-events: none;
}

/* Match the footer navigation to the top controls: back-to-top stays on the
   title edge and the next-work button meets the About edge on the right. */
.work-detail-footer {
  width: auto;
  margin-right: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1090px, calc(100vw - 48px))) / 2)));
}

.work-detail-gallery .work-detail-footer {
  margin-right: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
}

.work-detail-long .work-detail-footer {
  margin-right: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1180px, calc(100vw - 48px))) / 2)));
}

.work-02-page .work-detail-footer {
  margin-right: max(0px, calc(clamp(34px, 5.6vw, 86px) - ((100vw - min(1540px, calc(100vw - 48px))) / 2)));
}

.work-footer-next {
  margin-left: auto;
}

@media (max-width: 760px) {
  .work-detail-footer,
  .work-detail-gallery .work-detail-footer,
  .work-detail-long .work-detail-footer,
  .work-02-page .work-detail-footer {
    margin-right: 0;
  }

  .work-footer-next {
    min-height: 30px;
    padding: 0 10px;
    font-size: 14px;
  }
}

/* All six work descriptions share one typographic system. Keep these
   selectors specific so historical gallery and mobile rules cannot diverge. */
.work-detail-gallery > .work-summary-description,
.work-detail-gallery .work-project-description > p,
.work-detail-long .work-long-intro > .work-long-description {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.9;
  font-weight: 400;
  letter-spacing: .015em;
}

/* All modal/viewer close controls use the same circular frame. */
.play-modal-close,
.work-image-close,
.contact-modal-close {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid #315cff;
  border-radius: 50%;
  color: #315cff;
  background: #fff;
  line-height: 1;
  box-shadow: 0 0 18px rgba(49,92,255,.18);
}

/* About desktop copy: align its right edge with the header's About label. */
@media (min-width: 901px) {
  .reference-about .about-copy {
    box-sizing: border-box;
    padding-right: 14px;
  }
}

/* Segmented-control bug fix: lock both halves as a non-overlapping pair. */
@media (min-width: 561px) and (max-width: 1040px) {
  .desktop-bar .language-switch,
  .reference-header .language-switch {
    left: auto;
    right: 92px;
    width: 96px;
    grid-template-columns: 48px 48px;
  }

  .desktop-bar .theme-toggle,
  .reference-header .theme-toggle {
    left: auto;
    right: 20px;
    width: 72px;
    grid-template-columns: 36px 36px;
  }
}

@media (max-width: 600px) {
  .desktop-bar .language-switch,
  .reference-header .language-switch {
    left: auto;
    right: 84px;
    width: 84px;
    grid-template-columns: 42px 42px;
  }

  .desktop-bar .theme-toggle,
  .reference-header .theme-toggle {
    left: auto;
    right: 20px;
    width: 64px;
    grid-template-columns: 32px 32px;
  }
}

.desktop-bar .language-switch button,
.reference-header .language-switch button,
.desktop-bar .theme-toggle span,
.reference-header .theme-toggle span {
  min-width: 0;
  max-width: none;
  overflow: visible;
}

/* Restore the title glass to its original visible position. */
.desktop-bar::before,
.reference-header::before {
  top: 0;
  height: calc(100% - 8px);
}

/* Desktop fix: use explicit adjacent coordinates after removing translateX. */
@media (min-width: 1041px) {
  .desktop-bar .language-switch,
  .reference-header .language-switch {
    left: calc(50% - 84px);
    right: auto;
    width: 96px;
    grid-template-columns: 48px 48px;
    transform: translateY(-50%);
  }

  .desktop-bar .theme-toggle,
  .reference-header .theme-toggle {
    left: calc(50% + 12px);
    right: auto;
    width: 72px;
    grid-template-columns: 36px 36px;
    transform: translateY(-50%);
  }
}

/* Final wide-screen edge alignment, after the historical 14px copy inset. */
@media (min-width: 1041px) {
  .reference-about .about-copy {
    padding-right: 0;
  }

  .reference-about .about-copy p,
  .reference-about .contact-line,
  .reference-about .about-skills {
    max-width: none;
  }
}

/* Medium header: two visible rows need the glass to wrap the full title line. */
@media (min-width: 601px) and (max-width: 1040px) {
  .desktop-bar,
  .reference-header {
    height: 104px;
    padding: 18px 20px;
    align-items: flex-start;
  }
}

/* Every non-mobile header uses the complete single-line layout. */
@media (min-width: 601px) and (max-width: 1040px) {
  .desktop-bar,
  .reference-header {
    height: 76px;
    padding: 0 clamp(34px, 5.6vw, 86px);
    align-items: center;
  }

  .desktop-bar .brand,
  .reference-header .brand {
    position: relative;
    left: auto;
    top: auto;
    height: 25px;
  }

  .desktop-bar .language-switch,
  .reference-header .language-switch {
    left: calc(50% - 84px);
    right: auto;
    top: 50%;
    width: 96px;
    grid-template-columns: 48px 48px;
    transform: translateY(-50%);
  }

  .desktop-bar .theme-toggle,
  .reference-header .theme-toggle {
    left: calc(50% + 12px);
    right: auto;
    top: 50%;
    width: 72px;
    grid-template-columns: 36px 36px;
    transform: translateY(-50%);
  }

  .desktop-bar nav,
  .reference-header nav {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    min-height: 0;
    max-width: none;
    justify-content: flex-start;
  }

  .desktop-bar nav button,
  .desktop-bar nav a,
  .reference-header nav a {
    font-size: 15px;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .desktop-bar,
  .reference-header {
    padding-right: 44px;
    padding-left: 44px;
  }

  .desktop-bar nav,
  .reference-header nav {
    gap: clamp(14px, 2vw, 24px);
  }

  .desktop-bar nav button,
  .desktop-bar nav a,
  .reference-header nav a {
    font-size: 14px;
  }
}

/* Single-line header: distribute the brand, controls and navigation as
   three blocks with two equal flexible spaces between them. */
@media (min-width: 601px) {
  .desktop-bar,
  .reference-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto minmax(0, 1fr) auto;
    column-gap: 0;
  }

  .desktop-bar .brand,
  .reference-header .brand {
    grid-column: 1;
    justify-self: start;
    align-self: center;
    height: 28px;
  }

  .desktop-bar .language-switch,
  .reference-header .language-switch {
    position: relative;
    grid-column: 3;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    align-self: center;
  }

  .desktop-bar .theme-toggle,
  .reference-header .theme-toggle {
    position: relative;
    grid-column: 4;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    align-self: center;
  }

  .desktop-bar nav,
  .reference-header nav {
    grid-column: 6;
    justify-self: end;
    align-self: center;
    height: 28px;
    align-items: center;
  }

  .desktop-bar nav button,
  .desktop-bar nav a,
  .reference-header nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 28px;
  }

  .desktop-bar nav button::after,
  .desktop-bar nav a::after,
  .reference-header nav a::after {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-top: 0;
  }
}

/* Work-card project titles: increase exactly 2px at each existing breakpoint. */
.works-grid .work-card h2 {
  margin-bottom: 6px;
  font-size: 20px;
}

@media (max-width: 620px) {
  .works-grid {
    row-gap: 44px;
  }

  .works-grid .work-card h2 {
    font-size: 18px;
  }
}

.works-grid .work-card p {
  font-size: 15px;
}

/* This project keeps its original image and typography without hover glow. */
.works-grid .zheyoushan-card:hover {
  filter: none;
}

.works-grid .zheyoushan-card:hover .blue-placeholder,
.works-grid .zheyoushan-card:hover .blue-placeholder.work-thumb {
  box-shadow: none;
  filter: none;
}

.works-grid .zheyoushan-card:hover h2,
.works-grid .zheyoushan-card:hover p {
  text-shadow: none;
}

.reference-about .about-copy p {
  font-size: 17px;
  font-weight: 400;
}

.reference-about .about-copy p strong {
  font-weight: 800;
}

.reference-about .about-hero-grid {
  align-items: start;
}

.reference-about .about-copy {
  transform: translateY(-3px);
}

.reference-about .about-copy h1 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  white-space: nowrap;
}

.reference-about .about-copy h1 small {
  display: inline;
  margin-top: 0;
}

.reference-about .about-timeline {
  margin-top: clamp(54px, 6vh, 72px);
}

@media (max-width: 620px) {
  .reference-about .about-timeline {
    margin-top: 40px;
  }
}

/* Mobile title glass stops above the separate menu control. */
@media (max-width: 600px) {
  .desktop-bar,
  .reference-header {
    top: 15px;
  }

  .desktop-bar .brand,
  .reference-header .brand {
    left: 28px;
    top: 8px;
    height: 28px;
    display: inline-flex;
    align-items: center;
  }

  .desktop-bar .language-switch,
  .reference-header .language-switch,
  .desktop-bar .theme-toggle,
  .reference-header .theme-toggle {
    top: 8px;
  }

  .desktop-bar .language-switch,
  .reference-header .language-switch {
    right: 92px;
  }

  .desktop-bar .theme-toggle,
  .reference-header .theme-toggle {
    right: 28px;
  }

  .desktop-bar::before,
  .reference-header::before {
    top: -15px;
    height: 63px;
  }
}

/* About resources: skills, contact shortcuts and Cyrus share one visual row. */
.reference-about .about-resource-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, auto) minmax(116px, 150px);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(54px, 7vh, 82px);
}

.reference-about .about-resource-row .about-skills {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

.reference-about .about-contact-icons {
  justify-content: center;
  align-items: start;
  gap: clamp(20px, 2.2vw, 38px);
  margin: 0;
}

.reference-about .about-resource-row .about-octopus {
  position: static;
  width: clamp(108px, 9vw, 138px);
  margin: 0;
  justify-self: end;
  align-self: center;
}

.reference-about .about-contact-group {
  display: contents;
}

.reference-about .about-resource-row + .about-timeline {
  margin-top: clamp(46px, 5vh, 64px);
}

@media (max-width: 1040px) {
  .reference-about .about-resource-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px 24px;
    margin-top: 44px;
  }

  .reference-about .about-resource-row .about-skills {
    grid-column: 1 / -1;
  }

  .reference-about .about-contact-icons {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .reference-about .about-resource-row {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 24px 14px;
    margin-top: 36px;
  }

  .reference-about .about-contact-icons {
    gap: clamp(10px, 3vw, 20px);
    min-width: 0;
  }

  .reference-about .about-contact-icons a {
    min-width: 0;
  }

  .reference-about .about-contact-icons small {
    font-size: 10px;
  }

  .reference-about .about-resource-row .about-octopus {
    width: 92px;
  }

  .reference-about .about-resource-row + .about-timeline {
    margin-top: 38px;
  }
}

/* The experience row now sits before the skills/contact/Cyrus row. */
.reference-about .about-hero-grid + .about-timeline {
  width: 100%;
  max-width: none;
  margin-top: clamp(46px, 5vh, 64px);
}

.reference-about .about-timeline + .about-resource-row {
  margin-top: clamp(46px, 5vh, 64px);
}

.reference-about .about-timeline span {
  font-size: 14px;
}

.reference-about .about-timeline-title {
  grid-column: 1 / -1;
  color: #315cff;
  font-size: 17px;
  line-height: 1.2;
  text-align: left;
}

@media (max-width: 620px) {
  .reference-about .about-hero-grid + .about-timeline {
    position: relative;
    width: min(100%, 360px);
    grid-template-columns: 1fr;
    gap: 32px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 38px;
    box-sizing: border-box;
    text-align: left;
  }

  .reference-about .about-hero-grid + .about-timeline::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: rgba(49, 92, 255, .38);
  }

  .reference-about .about-hero-grid + .about-timeline span {
    position: relative;
    text-align: left;
  }

  .reference-about .about-hero-grid + .about-timeline span::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 5px;
    width: 9px;
    height: 9px;
    border: 2px solid #315cff;
    background: #fff;
    box-shadow: 3px 3px 0 rgba(49, 92, 255, .14);
    box-sizing: border-box;
  }
}

/* Centered segmented timeline on narrow screens. */
@media (max-width: 620px) {
  .reference-about {
    display: flex;
    flex-direction: column;
  }

  .reference-about > .path-button {
    align-self: flex-start;
  }

  .reference-about > .about-hero-grid {
    order: 1;
  }

  .reference-about > .about-resource-row {
    display: contents;
  }

  .reference-about > .about-timeline {
    order: 2;
  }

  .reference-about .about-resource-row > .about-skills {
    order: 3;
    margin-top: 14px;
  }

  .reference-about .about-contact-group {
    order: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 14px;
    align-items: center;
    width: 100%;
    margin-top: 26px;
  }

  .reference-about .about-contact-group .about-contact-icons {
    justify-content: space-around;
    width: 100%;
  }

  .reference-about .about-contact-group .about-octopus {
    position: static;
    width: 92px;
    margin: 0;
    justify-self: end;
  }

  .reference-about .about-hero-grid + .about-timeline {
    gap: 8px;
    margin-top: 28px;
    padding-left: 0;
    text-align: center;
  }

  .reference-about .about-hero-grid + .about-timeline::before {
    content: none;
  }

  .reference-about .about-hero-grid + .about-timeline span {
    padding-top: 45px;
    text-align: center;
  }

  .reference-about .about-hero-grid + .about-timeline span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    width: 2px;
    height: 31px;
    border: 0;
    border-radius: 0;
    background: #315cff;
    box-shadow: none;
    transform: translateX(-50%);
  }

  .reference-about .about-hero-grid + .about-timeline span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #315cff;
    box-shadow: 0 31px 0 #315cff;
    transform: translateX(-50%);
  }

  .reference-about .about-hero-grid + .about-timeline span:first-of-type {
    padding-top: 0;
  }

  .reference-about .about-hero-grid + .about-timeline span:first-of-type::before,
  .reference-about .about-hero-grid + .about-timeline span:first-of-type::after {
    content: none;
  }
}

@media (max-width: 620px) {
  .reference-about .about-hero-grid + .about-timeline {
    width: 100%;
  }

  .reference-about .about-timeline-title {
    width: 100%;
    padding-left: 16px;
    box-sizing: border-box;
  }

  .reference-about .about-hero-grid + .about-timeline span {
    width: min(100%, 360px);
    justify-self: center;
  }
}

.reference-about .timeline-link {
  display: none;
}

/* Narrow timeline follows a text-line-text path and turns back on row two. */
@media (max-width: 830px) {
  .reference-about .about-hero-grid + .about-timeline {
    display: grid;
    grid-template-columns:
      max-content minmax(24px, 1fr)
      max-content minmax(24px, 1fr)
      max-content;
    grid-template-rows: auto auto auto;
    gap: 12px;
    justify-content: stretch;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .reference-about .about-timeline-title {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    padding-left: 0;
  }

  .reference-about .about-hero-grid + .about-timeline span {
    position: relative;
    width: auto;
    min-width: 0;
    padding: 0;
    font-size: clamp(11px, 2.3vw, 14px);
    white-space: nowrap;
    align-self: center;
    justify-self: stretch;
    text-align: center;
    z-index: 2;
  }

  .reference-about .about-hero-grid + .about-timeline span::before,
  .reference-about .about-hero-grid + .about-timeline span::after {
    content: none;
  }

  .reference-about .about-hero-grid + .about-timeline span:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .reference-about .about-hero-grid + .about-timeline span:nth-of-type(2) { grid-column: 3; grid-row: 2; }
  .reference-about .about-hero-grid + .about-timeline span:nth-of-type(3) { grid-column: 5; grid-row: 2; }
  .reference-about .about-hero-grid + .about-timeline span:nth-of-type(4) { grid-column: 3; grid-row: 3; }
  .reference-about .about-hero-grid + .about-timeline span:nth-of-type(5) { grid-column: 1; grid-row: 3; }

  .reference-about .about-hero-grid + .about-timeline span:nth-of-type(1),
  .reference-about .about-hero-grid + .about-timeline span:nth-of-type(5) {
    text-align: left;
  }

  .reference-about .about-hero-grid + .about-timeline span:nth-of-type(4),
  .reference-about .about-hero-grid + .about-timeline span:nth-of-type(5),
  .reference-about .timeline-link-three {
    margin-top: 46px;
  }

  .reference-about .timeline-link {
    display: block;
    position: relative;
    align-self: center;
    height: 2px;
    background: #315cff;
    z-index: 1;
  }

  .reference-about .timeline-link-one { grid-column: 2; grid-row: 2; }
  .reference-about .timeline-link-two { grid-column: 4; grid-row: 2; }
  .reference-about .timeline-link-three { grid-column: 2; grid-row: 3; }

  .reference-about .timeline-link-one::before,
  .reference-about .timeline-link-two::before,
  .reference-about .timeline-link-three::before,
  .reference-about .timeline-link-one::after,
  .reference-about .timeline-link-two::after,
  .reference-about .timeline-link-three::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #315cff;
    transform: translateY(-50%);
  }

  .reference-about .timeline-link-one::before,
  .reference-about .timeline-link-two::before,
  .reference-about .timeline-link-three::before { left: -1px; }

  .reference-about .timeline-link-one::after,
  .reference-about .timeline-link-two::after,
  .reference-about .timeline-link-three::after { right: -1px; }

  .reference-about .timeline-link-turn {
    display: block;
    grid-column: 4 / 6;
    grid-row: 2 / 4;
    align-self: stretch;
    justify-self: stretch;
    width: auto;
    height: auto;
    margin: 20px -10px 20px 0;
    border-right: 2px solid #315cff;
    border-bottom: 2px solid #315cff;
    background: transparent;
  }

  .reference-about .timeline-link-turn::before,
  .reference-about .timeline-link-turn::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #315cff;
  }

  .reference-about .timeline-link-turn::before {
    top: -3px;
    right: -5px;
  }

  .reference-about .timeline-link-turn::after {
    left: -4px;
    bottom: -5px;
  }
}

/* When portrait and copy stack, both use the same full-width edges. */
@media (max-width: 900px) {
  .reference-about .about-copy {
    width: 100%;
    padding-right: 0;
    box-sizing: border-box;
  }

  .reference-about .about-copy p {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 831px) and (max-width: 900px) {
  .reference-about .about-hero-grid + .about-timeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 12px;
    width: 100%;
  }

  .reference-about .about-timeline-title {
    grid-column: 1 / -1;
  }
}

@media (min-width: 901px) {
  .reference-about .about-hero-grid + .about-timeline {
    row-gap: 12px;
  }
}

/* Phone-width snake timeline must fit without horizontal overflow. */
@media (max-width: 480px) {
  .reference-about .about-hero-grid + .about-timeline {
    grid-template-columns:
      minmax(0, 1fr) 16px
      minmax(0, 1fr) 16px
      minmax(0, 1fr);
    column-gap: 6px;
    row-gap: 10px;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
  }

  .reference-about .about-hero-grid + .about-timeline span {
    font-size: clamp(10.5px, 2.7vw, 11.5px);
    line-height: 1.45;
    letter-spacing: -0.1px;
  }

  .reference-about .about-hero-grid + .about-timeline span:nth-of-type(4),
  .reference-about .about-hero-grid + .about-timeline span:nth-of-type(5),
  .reference-about .timeline-link-three {
    margin-top: 30px;
  }

  .reference-about .timeline-link-turn {
    margin: 18px 4px 18px 0;
  }
}

/* Keep the three stacked about-page section gaps identical on narrow screens. */
@media (max-width: 620px) {
  .reference-about .about-hero-grid + .about-timeline,
  .reference-about .about-resource-row > .about-skills,
  .reference-about .about-contact-group {
    margin-top: 30px;
  }
}