:root {
  color-scheme: dark;
  --ink: #0b1319;
  --cream: #f7ebd7;
  --header-height: clamp(64px, 4.921875vw, 126px);
  font-family: Arial, "Microsoft JhengHei", "PingFang TC", sans-serif;
  background: var(--ink);
  color: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; }
body { min-height: 100svh; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button[aria-disabled="true"] { cursor: default; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #d8a75c; outline-offset: 6px; }

/* Native pointer uses the original brass key; its shaft tip is the click hotspot.
   This shared stylesheet is included only by customer pages, not the admin app. */
@media (hover: hover) and (pointer: fine) {
  :root { --soul-key-cursor: url("./assets/key-cursor.svg?v=6c4dba4135c9") 4 4; cursor: var(--soul-key-cursor), auto; }
  body { cursor: var(--soul-key-cursor), auto; }
  html body :is(a[href], button, [role="button"], summary, select,
    input[type="button"], input[type="submit"], input[type="reset"],
    input[type="checkbox"], input[type="radio"]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    cursor: var(--soul-key-cursor), pointer;
  }
  /* Text entry and native textarea resize handles keep their normal behaviour.
     Deliberate inline resize/drag cursors may override these non-important rules. */
  body :is(input:not([type]), input[type="text"], input[type="email"],
    input[type="password"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="number"], textarea,
    [contenteditable=""], [contenteditable="true"], [role="textbox"]) { cursor: text; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 20; top: -60px; left: 16px; padding: 12px 18px; color: #111; background: var(--cream); }
.skip-link:focus { top: 12px; }

.site-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  padding: 0 6.9% 0 7.12%;
  background: #fff;
  color: #58595b;
  border-bottom: 1px solid #e6e6e6;
}
.brand { flex: 0 0 auto; display: block; width: 15.49%; max-width: 341px; }
.brand img { display: block; width: 100%; height: auto; }
.desktop-nav { position: absolute; left: 32.55%; display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.65vw, 68px); }
.desktop-nav a, .desktop-nav button { border: 0; background: none; padding: 12px 0; color: #58595b; white-space: nowrap; font-size: clamp(14px, 1.055vw, 27px); line-height: 1.3; }
.desktop-nav a[aria-current] { color: #080808; font-weight: 700; }
.desktop-nav button { transition: color 180ms ease; }
.desktop-nav button:hover { color: #111; }
.header-actions { display: flex; gap: .7vw; margin-left: auto; padding-left: 4%; }
.outline-control { display: grid; place-items: center; min-width: 44px; min-height: 36px; width: 3.62vw; height: 2.38vw; border: 1px solid #a3a3a3; border-radius: 99px; background: #fff; color: #58595b; font-size: clamp(14px, 1.055vw, 27px); line-height: 1; transition: background 180ms ease, border-color 180ms ease; }
.outline-control:hover { background: #f6f5f3; border-color: #777; }
.cart svg { width: 1.6vw; min-width: 22px; height: auto; }

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: calc(100svh - var(--header-height));
  min-height: 46vw;
  overflow: hidden;
  background: var(--ink);
}
.hero-art { position: absolute; z-index: -3; width: 100.9%; height: 124.75%; left: -.45%; top: -19.96%; pointer-events: none; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-shade { position: absolute; z-index: -2; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 61%, rgba(11, 19, 25, .08) 73%, var(--ink) 100%); }
.hero-art img, .hero-shade { transition: filter 1.2s ease, opacity 1.2s ease; }

/* The scene shares the artwork's rendered rectangle; JS accounts for cover cropping. */
.animation-scene { position: absolute; z-index: -1; pointer-events: none; visibility: hidden; }
.animation-scene.is-ready { visibility: visible; }
.doorway-light, .door-fx {
  position: absolute; left: var(--door-left); top: var(--door-top);
  width: var(--door-width); height: var(--door-height); opacity: 0;
}
.doorway-light {
  background: linear-gradient(90deg, #fff5d1, #fffef3 65%, #fff6d6);
  box-shadow: 0 0 24px 7px #ffdda7, 0 0 75px 22px rgba(255,185,88,.62);
}
.door-fx { perspective: var(--door-perspective, 650px); perspective-origin: 50% 45%; }
.door-jamb {
  position: absolute; inset: -1px;
  border: 1px solid #4e4030;
  border-right-color: #f7d7a0;
  box-shadow: inset 3px 0 5px #392816, inset -3px 0 3px #fff1c3, 3px 0 7px #ffd09466;
}
.door-panel {
  position: absolute; inset: 0; transform-origin: left center;
  transform-style: preserve-3d;
  /* Filters/opacity belong on the faces: they flatten a 3D hinge parent. */
}
.door-face { position: absolute; inset: 0; backface-visibility: hidden; }
.door-face-front {
  background-image: var(--texture-image); background-repeat: no-repeat;
  background-size: var(--texture-size); background-position: var(--texture-position);
  box-shadow: inset -1px 0 1px #e4b879, inset 1px 0 1px #0b1416;
}
.door-face-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0009, #0003 65%, #dba75a22); opacity: 0; }
.door-face-back {
  transform: translateZ(calc(var(--door-depth) * -1)) rotateY(180deg);
  background: linear-gradient(90deg, #8a6439, #29302c 6%, #121d1e 48%, #31332a 94%, #bc935c);
  box-shadow: inset 0 0 0 1px #c39b68, inset 0 0 15px #02080b;
}
.door-face-back::after { content: ''; position: absolute; inset: 6% 10%; border: 1px solid #67624a; box-shadow: inset 2px 2px 3px #000b, 1px 0 #9b805733; background: repeating-linear-gradient(91deg, transparent 0 3px, #a18b6010 4px, transparent 5px 9px); }
.door-edge { position: absolute; background: linear-gradient(90deg, #e1bd80, #8e6a3e 17%, #383329 60%, #c9a065); }
.door-edge-right { left: 100%; top: 0; width: var(--door-depth); height: 100%; transform-origin: left center; transform: rotateY(90deg); box-shadow: inset 1px 0 #ffe6b6, inset -1px 0 #130f0b; }
.door-edge-left { left: 0; top: 0; width: var(--door-depth); height: 100%; transform-origin: left center; transform: rotateY(90deg); background: #171d1b; }
.door-edge-top, .door-edge-bottom { left: 0; width: 100%; height: var(--door-depth); transform-origin: center top; transform: rotateX(-90deg); background: linear-gradient(#b69666, #282b23); }
.door-edge-top { top: 0; }
.door-edge-bottom { top: 100%; }
.door-latch { position: absolute; left: 16%; top: 55%; width: 68%; height: 7%; border: 1px solid #c0aa7c; border-radius: 2px; background: linear-gradient(90deg, #5f5540, #e7d4a4 52%, #756244); box-shadow: 0 1px 2px #000a; }
.key-flight {
  position: absolute; left: var(--key-left); top: var(--key-top);
  width: var(--key-width); height: var(--key-height);
  transform: translate(-50%, -50%) scale(1);
  transform-origin: var(--key-tip-x) var(--key-tip-y);
  perspective: 800px; perspective-origin: var(--key-tip-x) var(--key-tip-y);
}
.key-actor { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: var(--key-tip-x) var(--key-tip-y); transform: rotateZ(-4deg) rotate3d(.906308, .422618, 0, 0deg); }
.key-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.key-face-front { backface-visibility: hidden; filter: contrast(1.1) saturate(.9) brightness(1.07); }
.key-face-back { transform: translateZ(calc(var(--key-depth) * -1)); filter: brightness(.66) contrast(1.2); }
.key-metal-side { position: absolute; height: var(--key-depth); transform-origin: left top; background: linear-gradient(#e4be7e, #9f733c 18%, #614322 55%, #c2914f 85%, #ebc585); }
.key-metal-sheen { position: absolute; inset: 0; -webkit-mask: url('./assets/key-isolated.png') center / 100% 100% no-repeat; mask: url('./assets/key-isolated.png') center / 100% 100% no-repeat; }
.key-metal-sheen { transform: translateZ(.15px); backface-visibility: hidden; background: linear-gradient(112deg, transparent 30%, #ffedb822 41%, #fff3c870 46%, #d8ac5830 50%, transparent 61%); background-size: 240% 100%; background-position: 100% 0; }
.light-bloom {
  position: absolute; left: var(--door-center-x); top: var(--door-center-y);
  width: 95vmax; aspect-ratio: 1; border-radius: 50%;
  opacity: 0; transform: translate(-50%, -50%) scale(.02);
  background: radial-gradient(circle, #fffef0 0 10%, rgba(255,241,198,.96) 22%, rgba(255,216,142,.62) 38%, rgba(239,177,84,.14) 57%, transparent 71%);
  mix-blend-mode: screen;
}

.hero-intro { position: absolute; top: 4.45%; width: 100%; text-align: center; }
h1 { margin: 0 auto; width: 34.1%; line-height: 0; }
.headline-art { width: 100%; height: auto; filter: drop-shadow(0 2px 5px rgba(221, 192, 144, .12)); }
.hero-description { margin: 1.85vw 0 0; font-size: clamp(12px, .78125vw, 20px); font-weight: 500; letter-spacing: .17em; line-height: 1.55; text-shadow: 0 0 10px rgba(255,255,255,.25); }
.hero-description > span { display: block; }
.word-space { margin-left: .5em; }
.hero-message { position: absolute; top: 64.05%; width: 100%; text-align: center; font-size: clamp(12px, .78125vw, 20px); letter-spacing: .17em; text-shadow: 0 0 12px rgba(255,255,255,.25); }
.hero-message p { margin: 0; }
.message-first { line-height: 1.65; }
.message-second { margin-top: .26vw !important; line-height: 1.55; }
.message-second strong { color: var(--cream); font-family: "Noto Serif TC", "Songti TC", "PMingLiU", "Times New Roman", serif; font-size: 2em; font-weight: 700; letter-spacing: .12em; }
.soul-mark { position: absolute; top: 72.65%; left: 48.875%; transform: translateX(-50%); width: 5.7%; height: auto; }
.enter-button { position: absolute; top: 87.2%; left: 48.875%; transform: translateX(-50%); display: grid; place-items: center; width: 21.2%; height: 7.67%; min-height: 44px; padding: 0; border: 1px solid #d9d0ba; border-radius: 999px; background: rgba(7,14,19,.28); color: var(--cream); transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease; }
.enter-button img { width: 79.3%; height: auto; }
.replay-label { display: none; color: var(--cream); font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-size: clamp(16px, 1.25vw, 30px); font-weight: 700; letter-spacing: .28em; padding-left: .28em; }
.enter-button:hover, .enter-button:focus-visible { border-color: #fff0d4; background: rgba(215,180,118,.07); box-shadow: 0 0 22px rgba(219,179,116,.11); }
.enter-button:active { background: rgba(215,180,118,.12); }


.hero-intro, .hero-message, .soul-mark { transition: opacity .8s ease, filter .8s ease; }
.enter-button { cursor: pointer; }
.hero.is-animating .hero-intro,
.hero.is-animating .hero-message,
.hero.is-animating .soul-mark { opacity: 0; filter: blur(3px); }
.hero.is-animating .enter-button { animation: buttonDepart .5s ease forwards; pointer-events: none; }
.hero.is-animating .key-flight { animation: keyFlight 3.1s cubic-bezier(.32,.02,.2,1) forwards; will-change: transform; }
.hero.is-animating .key-actor { animation: keyRoll 3.1s cubic-bezier(.32,.02,.2,1) forwards; will-change: transform; }
.hero.is-animating .key-metal-sheen { animation: keyMetalLight 3.1s ease-in-out forwards; }
.hero.is-animating .door-fx { opacity: 1; }
.hero.is-animating .door-panel { animation: doorOpen 1.9s cubic-bezier(.25,.1,.2,1) 2.7s forwards; }
.hero.is-animating .door-face-front::after { animation: doorShade 1.9s ease 2.7s forwards; }
.hero.is-animating .doorway-light { animation: doorwayIgnite 1.9s ease 2.7s forwards; }
.hero.is-animating .light-bloom { animation: lightExpand 3s cubic-bezier(.22,.7,.16,1) 3.2s forwards; }
.hero.is-complete .key-flight { opacity: 0; }
.hero.is-complete .doorway-light, .hero.is-complete .door-fx { opacity: 1; }
.hero.is-complete .door-panel { transform: rotateY(-108deg); }
.hero.is-complete .light-bloom { opacity: .16; transform: translate(-50%, -50%) scale(2.6); }
.hero.is-complete .enter-button { background: rgba(7,14,19,.65); }
.hero.is-complete .enter-button img { display: none; }
.hero.is-complete .replay-label { display: inline; }

@keyframes buttonDepart { to { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.95); } }
@keyframes keyFlight {
  /* The flight's origin is the tip, so shrinking and rolling cannot pull it left of the lock. */
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  25% { opacity: 1; transform: translate(calc(-50% + var(--key-flight-x) * .22), calc(-50% + var(--key-flight-y) * .85)) scale(.82); }
  65%, 79% { opacity: 1; transform: translate(calc(-50% + var(--key-flight-x)), calc(-50% + var(--key-flight-y))) scale(.16); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--key-flight-x)), calc(-50% + var(--key-flight-y))) scale(.04); }
}
@keyframes keyRoll {
  0% { transform: rotateZ(-4deg) rotate3d(.906308, .422618, 0, 0deg); }
  25% { transform: rotateZ(-4deg) rotate3d(.906308, .422618, 0, 200deg); }
  65% { transform: rotateZ(-4deg) rotate3d(.906308, .422618, 0, 680deg); }
  79%, 100% { transform: rotateZ(-4deg) rotate3d(.906308, .422618, 0, 720deg); }
}
@keyframes keyMetalLight { 0% { background-position: 100% 0; opacity: .35; } 40% { background-position: 0 0; opacity: .8; } 79%, 100% { background-position: 65% 0; opacity: .65; } }
@keyframes doorOpen {
  from { transform: rotateY(0); }
  to { transform: rotateY(-108deg); }
}
@keyframes doorShade { to { opacity: 1; } }
@keyframes doorwayIgnite { 0% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes lightExpand {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.02); }
  38% { opacity: .92; }
  64% { opacity: .9; transform: translate(-50%, -50%) scale(1.55); }
  100% { opacity: .88; transform: translate(-50%, -50%) scale(2.6); }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .site-header { padding-left: 4%; padding-right: 4%; }
  .brand { width: 18%; }
  .desktop-nav { position: static; gap: 18px; margin-left: 3%; }
  .desktop-nav a, .desktop-nav button { font-size: 12px; }
  .header-actions { padding-left: 2%; gap: 8px; }
  .outline-control { min-width: 38px; font-size: 12px; }
  .hero { min-height: 530px; }
  h1 { width: 44%; }
  .hero-description { font-size: 12px; }
  .hero-message { font-size: 12px; }
  .soul-mark { width: 7%; }
  .enter-button { width: 28%; }
}

/* The supplied mobile artboard intentionally has no navigation bar. */
@media (max-width: 767px) {
  .site-header { display: none; }
  .hero { height: 100svh; min-height: 177.777778vw; max-height: none; }
  .hero-art { width: 102.56%; height: 182.3289vw; left: -1.278%; top: -19.5769vw; }
  .hero-art img { object-fit: fill; }
  .hero-shade { background: linear-gradient(to bottom, rgba(11,19,25,.43) 0, transparent 55vw, transparent 124.44vw, var(--ink) 156.44vw); }
  .hero-intro { top: 16.4089vw; }
  h1 { width: 87%; }
  .hero-description { margin-top: 5.35vw; font-size: clamp(10px, 2.22vw, 17px); font-weight: 500; letter-spacing: .16em; line-height: 1.9; white-space: nowrap; }
  .word-space { margin-left: .36em; }
  .hero-message { top: 103.1111vw; font-size: clamp(11px, 2.5vw, 19.2px); letter-spacing: .15em; white-space: nowrap; }
  .message-first { line-height: 1.6; }
  .message-second { margin-top: .85vw !important; }
  .message-second strong { font-size: 1.9em; letter-spacing: .09em; }
  .message-comma { display: none; }
  .soul-mark { top: 122.2222vw; left: 50.7%; width: 14.5%; }
  .enter-button { top: 145.8311vw; left: 49.4%; width: 49.3%; height: 9.2444vw; min-height: 36px; }
  .enter-button img { width: 79.3%; }
  .replay-label { font-size: clamp(14px, 4vw, 20px); }
}

@media (max-width: 374px) {
  .hero-description { font-size: 9px; letter-spacing: .12em; }
  .hero-message { font-size: 10px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}