:root {
  --ui-bg: #07090a;
  --ui-text: #f0efea;
  --ui-hairline: rgba(225, 224, 218, 0.22);
  --ui-accent: rgba(137, 48, 45, 0.72);
  --ui-accent-quiet: rgba(137, 48, 45, 0.34);
  --hairline: rgba(225, 224, 218, 0.15);
  --accent-bright: rgba(178, 72, 68, 0.78);
  --ui-font-reading: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.game-frame {
  container-type: size;
}

.stage::after {
  content: "";
  position: absolute;
  z-index: 16;
  inset: 0;
  opacity: 0.075;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255, 255, 255, 0.04) 4px),
    repeating-linear-gradient(91deg, rgba(255, 255, 255, 0.018) 0, transparent 1px, transparent 6px);
}

/* UI Pass 1 title source, adapted to the existing title runtime. */
.title-screen {
  padding: 0;
  isolation: isolate;
  background-color: #060809;
}

.title-screen::before,
.title-screen::after {
  content: none;
}

.stage-vignette,
.scan-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage-vignette {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 27%, rgba(0, 0, 0, 0.12) 65%, rgba(0, 0, 0, 0.64)),
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.22) 100%);
}

.scan-texture {
  z-index: 8;
  opacity: 0.12;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255, 255, 255, 0.045) 4px);
}

.title-content--ui-pass-1 {
  position: absolute;
  inset: 0;
  height: 100%;
  align-self: auto;
  width: auto;
  max-width: none;
  padding: 0;
  display: block;
  animation: title-pass-enter 1.1s ease both;
}

.title-mark--screen {
  position: absolute;
  z-index: 3;
  top: 8.1%;
  left: 11%;
  width: 78%;
  max-width: 78%;
  color: #d9d9d5;
  text-align: center;
  text-shadow: 0 0 0.8cqw rgba(255, 255, 255, 0.08);
}

.title-mark-logo {
  overflow: visible;
}

.title-english {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35cqw;
  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  font-size: 7.2cqw;
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: 0.19em;
  transform: scaleX(0.79);
  transform-origin: center;
  white-space: nowrap;
}

.title-english::before,
.title-english::after {
  content: "";
  position: absolute;
  left: -7%;
  right: -5%;
  height: 1px;
  opacity: 0.72;
  background: linear-gradient(90deg, transparent, rgba(128, 45, 42, 0.62) 18%, rgba(128, 45, 42, 0.24) 72%, transparent);
}

.title-english::before { top: 28%; }
.title-english::after { top: 70%; transform: translateX(8%); }
.title-row { position: relative; display: flex; justify-content: center; align-items: baseline; }
.title-row--top { gap: 0.65em; }
.title-row--bottom { letter-spacing: 0.145em; }
.lie { position: relative; display: inline-flex; color: #deded9; }
.lie::before,
.lie::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.lie::before { color: rgba(112, 25, 24, 0.5); transform: translate(-0.055em, 0.018em); clip-path: polygon(0 18%, 100% 18%, 100% 34%, 0 34%); }
.lie::after { color: rgba(151, 54, 50, 0.48); transform: translate(0.07em, 0.025em); clip-path: polygon(0 57%, 100% 57%, 100% 73%, 0 73%); }

.title-chinese {
  margin-top: 2.2cqw;
  font-family: "Songti SC", "Noto Serif SC", STSong, serif;
  font-size: 3.25cqw;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: rgba(222, 220, 214, 0.78);
}

.opening-question {
  position: absolute;
  z-index: 3;
  top: 64.3%;
  left: 21%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.45cqw;
  font-family: "Songti SC", "Noto Serif SC", STSong, serif;
  font-size: 3.05cqw;
  line-height: 1.3;
  letter-spacing: 0.14em;
  color: rgba(225, 222, 214, 0.82);
  text-shadow: 0 0.3cqw 0.8cqw rgba(0, 0, 0, 0.72);
}

.title-actions {
  position: absolute;
  z-index: 4;
  left: 8.7%;
  right: 8.7%;
  bottom: 7.1%;
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
}

.title-action {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 11.8cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.9cqw;
  border: 0;
  color: rgba(215, 213, 207, 0.69);
  background: transparent;
  cursor: pointer;
  transition: color 220ms ease, transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.title-action::before {
  content: "";
  position: absolute;
  inset: 0 1.6%;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(225, 224, 218, 0.025) 18%, rgba(225, 224, 218, 0.072) 50%, rgba(225, 224, 218, 0.025) 82%, transparent);
  transition: opacity 220ms ease;
}

.title-action::after {
  content: "";
  position: absolute;
  left: 3.4%;
  right: 3.4%;
  bottom: 0;
  height: 1px;
  opacity: 0.34;
  background: linear-gradient(90deg, transparent, var(--hairline) 15%, var(--hairline) 85%, transparent);
}

.title-action--primary { min-height: 13cqw; color: rgba(215, 213, 207, 0.62); }
.title-action--primary::after { opacity: 0.2; }
.action-label { font-family: "Songti SC", "Noto Serif SC", STSong, serif; font-size: 3.45cqw; line-height: 1; letter-spacing: 0.12em; transition: color 220ms ease, letter-spacing 320ms ease, transform 320ms ease, text-shadow 220ms ease; }
.title-action--primary .action-label { font-size: 3.8cqw; }
.action-caption { font-size: 1.8cqw; line-height: 1; letter-spacing: 0.12em; color: rgba(173, 172, 168, 0.4); }
.title-action--disabled { color: rgba(199, 198, 193, 0.33); cursor: default; }
.title-action--disabled::before { display: none; }
.title-action--disabled::after { opacity: 0.14; }
.title-action--disabled .action-caption { color: rgba(173, 172, 168, 0.22); }
.title-action--collection { color: rgba(211, 209, 203, 0.58); }
.title-action--collection .action-caption { white-space: nowrap; letter-spacing: 0.14em; color: rgba(173, 172, 168, 0.36); }
.title-action--collection-hint { animation: collection-title-hint 560ms ease-out both; }
.title-action--collection-hint::before { animation: collection-title-hint-fill 560ms ease-out both; }
.title-action--collection-hint::after { animation: collection-title-hint-line 560ms ease-out both; }

.corner-marks { position: absolute; inset: 0 1.6%; pointer-events: none; }
.corner { position: absolute; width: 3.2cqw; height: 2.1cqw; opacity: 0.92; }
.corner::before,
.corner::after { content: ""; position: absolute; background: currentColor; }
.corner::before { width: 100%; height: 1px; }
.corner::after { width: 1px; height: 100%; }
.corner--tl,
.corner--tr { top: 0; color: var(--accent-bright); }
.corner--bl,
.corner--br { bottom: 0; color: rgba(215, 214, 209, 0.62); }
.corner--tl,
.corner--bl { left: 0; }
.corner--tr,
.corner--br { right: 0; transform: scaleX(-1); }
.corner--bl { transform: scaleY(-1); }
.corner--br { transform: scale(-1); }
.corner-marks--quiet .corner { opacity: 0.22; color: rgba(215, 214, 209, 0.56); }
.corner-marks--quiet .corner--bl,
.corner-marks--quiet .corner--br { display: none; }
.title-action--primary .corner { color: rgba(215, 214, 209, 0.56); opacity: 0.18; }

@media (hover: hover) and (pointer: fine) {
  .title-action:not(:disabled):hover { color: rgba(237, 235, 229, 0.88); }
  .title-action:not(:disabled):hover::before { opacity: 1; }
  .title-action:not(:disabled):hover .action-label { letter-spacing: 0.135em; transform: scale(1.012); text-shadow: 0 0 1.4cqw rgba(239, 237, 230, 0.12); }
  .title-action:not(:disabled):hover .corner { opacity: 0.58; }
}

.title-action:not(:disabled):active { color: #c66761; transform: translateY(1px); }

/* Approved sting animation applied to the existing non-skippable story node. */
.interstitial-screen { background: radial-gradient(ellipse at 50% 47%, rgba(24, 26, 26, 0.44), #060809 44%, #010202 100%); }
.sting-ambient { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 4px, rgba(255,255,255,.018) 5px), radial-gradient(ellipse at 50% 48%, rgba(57,49,47,.15), transparent 54%); animation: ambient-in 3s linear forwards; }
.sting-pulse { position: absolute; top: 51%; left: 50%; width: 29cqw; height: 1px; opacity: 0; background: rgba(123,42,39,.54); transform: translate3d(-50%,-50%,0) scaleX(0); transform-origin: center; animation: pulse-line 3.2s cubic-bezier(.22,.67,.18,1) forwards; }
.title-mark--sting { position: absolute; top: 37.5%; left: 10%; width: 80%; max-width: 80%; opacity: 1; color: rgba(226,225,220,.98); }
.title-mark--sting .title-english { font-size: 7.55cqw; font-weight: 200; letter-spacing: .205em; transform: scaleX(.74); text-shadow: 0 0 1.05cqw rgba(235,233,225,.13); }
.title-mark--sting .sting-piece { --piece-x:0cqw; --piece-y:0cqw; --piece-scale:4; --piece-delay:0ms; --piece-duration:3s; position:relative; display:inline-block; opacity:0; transform-origin:center; animation:sting-piece-arrive var(--piece-duration) cubic-bezier(.16,.74,.18,1) var(--piece-delay) both; }
.title-mark--sting .sting-piece--do { --piece-x:-38cqw; --piece-y:-23cqw; --piece-scale:7.6; --piece-duration:2.48s; }
.title-mark--sting .sting-piece--you { --piece-x:42cqw; --piece-y:-16cqw; --piece-scale:3.35; --piece-duration:3.12s; --piece-delay:20ms; }
.title-mark--sting .sting-piece--be { --piece-x:-46cqw; --piece-y:28cqw; --piece-scale:5.9; --piece-duration:2.72s; --piece-delay:85ms; }
.title-mark--sting .sting-piece--l { --piece-x:-23cqw; --piece-y:33cqw; --piece-scale:8.8; --piece-duration:3.12s; }
.title-mark--sting .sting-piece--i { --piece-x:0cqw; --piece-y:45cqw; --piece-scale:10.4; --piece-duration:2.42s; --piece-delay:115ms; }
.title-mark--sting .sting-piece--e { --piece-x:17cqw; --piece-y:21cqw; --piece-scale:4.05; --piece-duration:2.95s; --piece-delay:45ms; }
.title-mark--sting .sting-piece--ve { --piece-x:38cqw; --piece-y:13cqw; --piece-scale:2.85; --piece-duration:2.28s; --piece-delay:135ms; }
.title-mark--sting .sting-piece--me { --piece-x:52cqw; --piece-y:38cqw; --piece-scale:7.25; --piece-duration:3.08s; --piece-delay:55ms; }
.title-mark--sting .lie::before,
.title-mark--sting .lie::after { display: none; }
.title-mark--sting .title-chinese { opacity: 0; animation: sting-cn-soft 3.2s ease-out forwards; }
.sting-scan { position:absolute; top:47.8%; left:8%; right:8%; height:1px; opacity:0; background:linear-gradient(90deg,transparent,rgba(148,58,54,.42),rgba(226,220,211,.1),transparent); animation:sting-scan-fluid 3.2s ease-in-out forwards; }

/* Approved dialogue/narration skin. Existing geometry and hit behavior are retained. */
.dialogue-box {
  left: 14px;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  min-height: 22%;
  max-height: 30%;
  padding: 14px 16px 18px;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  color: var(--ui-text);
  background: linear-gradient(180deg, rgba(8,10,11,.82), rgba(3,5,6,.96)), repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.018) 4px);
  box-shadow: 0 -14px 38px rgba(0,0,0,.22), inset 1px 0 rgba(255,255,255,.018), inset -1px 0 rgba(255,255,255,.012);
  cursor: pointer;
}

.dialogue-box::before,
.dialogue-box::after { content:""; position:absolute; inset:0; pointer-events:none; }
.dialogue-box::before { z-index:-1; opacity:.94; background:linear-gradient(90deg,var(--ui-hairline),transparent 24%) 0 0/42% 1px no-repeat,linear-gradient(270deg,rgba(221,220,214,.07),transparent 18%) 100% 0/34% 1px no-repeat,linear-gradient(90deg,rgba(221,220,214,.055),transparent 22%) 0 100%/34% 1px no-repeat,linear-gradient(270deg,rgba(221,220,214,.13),transparent 26%) 100% 100%/46% 1px no-repeat,linear-gradient(var(--ui-hairline),var(--ui-hairline)) 0 0/1px 22px no-repeat,linear-gradient(var(--ui-hairline),var(--ui-hairline)) 100% 100%/1px 22px no-repeat; }
.dialogue-box::after { z-index:-1; opacity:.82; background:linear-gradient(90deg,var(--ui-accent),transparent) 1px 1px/28px 1px no-repeat,linear-gradient(var(--ui-accent-quiet),var(--ui-accent-quiet)) 1px 1px/1px 10px no-repeat,repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.016) 4px); }
.speaker-name { min-height:20px; margin-bottom:8px; color:rgba(239,238,232,.9); font-family:var(--ui-font-reading); font-size:13px; font-weight:500; letter-spacing:.12em; text-shadow:1px 0 rgba(117,39,37,.26); }
.dialogue-text { max-height:calc(1.64em * 3); overflow:hidden; color:rgba(239,238,232,.9); font-family:var(--ui-font-reading); font-size:clamp(16px,4vw,17px); font-weight:400; line-height:1.64; letter-spacing:.025em; white-space:pre-wrap; text-wrap:pretty; text-shadow:0 1px 8px rgba(0,0,0,.3),1px 0 rgba(116,39,37,.08); }
.dialogue-box.is-narration .speaker-name { color:transparent; text-shadow:none; }
.continue-hint { right:16px; bottom:8px; width:28px; height:1px; opacity:.24; background:linear-gradient(90deg,transparent,rgba(226,225,219,.58) 70%,var(--ui-accent-quiet) 71%); transform-origin:right; animation:continue-breathe 1.8s ease-in-out infinite; }

/* Approved choice states, while the runtime still owns effects and the 450ms handoff. */
.choice-panel { left:22px; right:22px; bottom:29%; gap:12px; }
.choice-question { margin-bottom:2px; color:rgba(239,238,232,.72); font-family:var(--ui-font-reading); font-size:14px; font-weight:400; line-height:1.4; letter-spacing:.06em; text-align:center; }
.choice-btn { position:relative; padding:13px 14px; overflow:hidden; isolation:isolate; border:0; border-radius:0; color:rgba(235,234,228,.78); background:linear-gradient(180deg,rgba(7,9,10,.79),rgba(4,6,7,.91)),repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.014) 4px); box-shadow:0 8px 24px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.012); font-family:var(--ui-font-reading); font-size:15.5px; font-weight:400; letter-spacing:.03em; transform:translate3d(0,0,0); transition:opacity 220ms ease,transform 190ms cubic-bezier(.2,.72,.2,1),color 170ms ease,box-shadow 190ms ease; }
.choice-label { position:relative; z-index:2; display:inline-block; transition:letter-spacing 190ms ease,text-shadow 170ms ease; }
.choice-label::after { content:""; position:absolute; left:8%; right:8%; bottom:-8px; height:1px; opacity:0; background:linear-gradient(90deg,transparent,rgba(229,228,222,.56) 28%,rgba(229,228,222,.32) 72%,transparent); transform:scaleX(.22); transition:opacity 170ms ease,transform 220ms ease; }
.choice-btn::before,
.choice-btn::after { content:""; position:absolute; inset:0; pointer-events:none; }
.choice-btn::before { z-index:1; opacity:.62; background:linear-gradient(90deg,rgba(221,220,214,.16),transparent 20%) 0 0/50% 1px no-repeat,linear-gradient(270deg,rgba(221,220,214,.075),transparent 18%) 100% 0/36% 1px no-repeat,linear-gradient(90deg,rgba(221,220,214,.06),transparent 18%) 0 100%/32% 1px no-repeat,linear-gradient(270deg,rgba(221,220,214,.13),transparent 20%) 100% 100%/48% 1px no-repeat; }
.choice-btn::after { z-index:0; opacity:0; background:linear-gradient(180deg,rgba(19,21,22,.34),rgba(14,16,17,.42)); transition:opacity 180ms ease; }
@media (hover:hover) {
  .choice-btn:not(:disabled):hover { color:rgba(246,245,239,.98); transform:translate3d(0,0,0) scale(1.006); }
  .choice-btn:not(:disabled):hover::after { opacity:.58; }
  .choice-btn:not(:disabled):hover .choice-label::after { opacity:.76; transform:scaleX(1); }
}
.choice-btn.pressed { color:rgba(244,243,237,.95); transform:translate3d(0,1px,0) scale(.994); }
.choice-btn.pressed::after { opacity:.86; }
.choice-btn.pressed .choice-label::after { opacity:.9; transform:scaleX(.92); }
.choice-btn.locked { color:rgba(240,239,233,.92); transform:translate3d(0,0,0); }
.choice-btn.locked::after { opacity:.66; }
.choice-btn.locked .choice-label::after { opacity:.66; transform:scaleX(1); }
.choice-btn.selected { color:rgba(226,190,185,.96); background:linear-gradient(180deg,rgba(7,9,10,.79),rgba(4,6,7,.91)); border:0; box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.028); transform:translate3d(0,0,0) scale(1.003); }
.choice-btn.selected::after { opacity:1; }
.choice-btn.selected .choice-label::after { opacity:.72; transform:scaleX(1); background:linear-gradient(90deg,transparent,rgba(151,55,51,.62) 28%,rgba(229,228,222,.34) 72%,transparent); }
.choice-btn.dimmed { opacity:.28; filter:none; }
.choice-btn:disabled { cursor:default; }

/* Ending viewer: full CG first, minimal Chinese-only information. */
.ending-screen.ending-viewer { inset:0; padding:0; display:block; isolation:isolate; background:#030405; }
.ending-visual,
.ending-grade,
.ending-scan { position:absolute; inset:0; width:100%; height:100%; }
.ending-visual { z-index:0; background-position:center; background-size:cover; background-repeat:no-repeat; filter:saturate(.82) contrast(1.02) brightness(.92); transform:scale(1.012); }
.ending-grade { z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(2,3,4,.1),transparent 15%,transparent 72%,rgba(2,3,4,.56)),radial-gradient(ellipse at 50% 46%,transparent 64%,rgba(2,3,4,.17)); }
.ending-scan { z-index:2; opacity:.045; pointer-events:none; mix-blend-mode:soft-light; background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.04) 4px),repeating-linear-gradient(91deg,rgba(255,255,255,.016) 0,transparent 1px,transparent 6px); }
.ending-content { position:absolute; z-index:3; left:6.8%; right:6.8%; bottom:max(4.8%,env(safe-area-inset-bottom,0px)); display:flex; align-items:flex-end; justify-content:space-between; gap:4cqw; }
.ending-copy { min-width:0; max-width:59%; }
.is-from-collection .ending-copy { max-width:82%; }
.ending-name { margin:0; color:rgba(239,238,232,.84); font-size:3.4cqw; font-weight:400; line-height:1; letter-spacing:.2em; text-shadow:0 1px 8px rgba(0,0,0,.76); }
.ending-achieved { margin:0 0 2.1cqw; color:rgba(222,190,185,.58); font-size:2.15cqw; font-weight:400; line-height:1; letter-spacing:.2em; text-shadow:0 1px 8px rgba(0,0,0,.76); }
.ending-description { margin:2cqw 0 0; color:rgba(233,232,226,.56); font-size:2.35cqw; font-weight:400; line-height:1.55; letter-spacing:.055em; text-shadow:0 1px 8px rgba(0,0,0,.82); }
.ending-actions { display:flex; align-items:center; gap:5.8cqw; }
.is-from-collection .ending-actions { display:none; }
.ending-action { position:relative; min-height:8.8cqw; padding:0; border:0; color:rgba(232,231,225,.62); background:transparent; cursor:pointer; letter-spacing:.12em; }
.ending-action-label { font-size:2.8cqw; text-shadow:0 1px 8px rgba(0,0,0,.76); }
.ending-action--quiet { color:rgba(225,224,218,.42); }
.collection-return { position:absolute; z-index:4; top:max(4.8%,env(safe-area-inset-top,0px)); left:6.8%; min-height:8.8cqw; padding:0; border:0; display:inline-flex; align-items:center; gap:2.8cqw; color:rgba(239,238,232,.64); background:transparent; cursor:pointer; font-size:2.8cqw; letter-spacing:.12em; }
.collection-return[hidden] { display:none; }
.collection-return-mark,
.title-return-mark { position:relative; width:5.8cqw; height:1px; background:linear-gradient(90deg,var(--ui-accent),rgba(239,238,232,.44)); }
.collection-return-mark::before,
.collection-return-mark::after,
.title-return-mark::before,
.title-return-mark::after { content:""; position:absolute; left:0; width:2.25cqw; height:1px; background:rgba(185,90,84,.92); transform-origin:left center; }
.collection-return-mark::before,
.title-return-mark::before { transform:rotate(39deg); }
.collection-return-mark::after,
.title-return-mark::after { transform:rotate(-39deg); }
.is-entering .ending-visual { animation:ending-visual-enter 1.2s cubic-bezier(.2,.7,.2,1) both; }
.is-entering .ending-content { animation:ending-content-enter 760ms cubic-bezier(.2,.72,.2,1) 360ms both; }

/* Collection uses real localStorage unlocks; locked rows never receive image URLs. */
.collection-screen { inset:0; padding:0; display:block; background:#060809; }
.collection-shell { position:absolute; inset:0; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 70% 8%,rgba(88,91,88,.08),transparent 44%),#060809; }
.collection-texture { position:absolute; inset:0; z-index:0; opacity:.16; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.025) 4px),repeating-linear-gradient(91deg,rgba(255,255,255,.012) 0,transparent 1px,transparent 7px); }
.collection-header { position:absolute; z-index:2; top:max(4.8%,env(safe-area-inset-top,0px)); left:6.8%; right:6.8%; }
.title-return { min-height:8.8cqw; padding:0; border:0; display:inline-flex; align-items:center; gap:2.8cqw; color:rgba(239,238,232,.52); background:transparent; font-size:2.8cqw; letter-spacing:.12em; cursor:pointer; }
.collection-heading { margin-top:2.2cqw; display:flex; align-items:baseline; justify-content:space-between; }
.collection-heading h1 { margin:0; font-size:6.4cqw; font-weight:400; line-height:1; letter-spacing:.18em; }
.collection-count { color:rgba(233,232,226,.36); font-size:2.45cqw; letter-spacing:.18em; }
.record-list { position:absolute; z-index:1; top:21.8%; left:6.8%; right:6.8%; bottom:4.8%; display:grid; grid-template-rows:repeat(5,1fr); gap:1.3cqw; }
.record { position:relative; min-height:0; overflow:hidden; display:grid; grid-template-columns:38% 62%; padding:0; border:1px solid rgba(225,224,218,.16); width:100%; color:rgba(239,238,232,.76); background:rgba(13,13,13,.84); text-align:left; isolation:isolate; transition:border-color 220ms ease,background-color 220ms ease; }
.record::before { content:""; position:absolute; z-index:4; inset:0; pointer-events:none; background:linear-gradient(rgba(225,224,218,.28),rgba(225,224,218,.28)) 1.15cqw 1.15cqw/3.1cqw 1px no-repeat,linear-gradient(rgba(225,224,218,.28),rgba(225,224,218,.28)) 1.15cqw 1.15cqw/1px 2.25cqw no-repeat,linear-gradient(rgba(225,224,218,.16),rgba(225,224,218,.16)) calc(100% - 1.15cqw) calc(100% - 1.15cqw)/3.1cqw 1px no-repeat,linear-gradient(rgba(225,224,218,.16),rgba(225,224,218,.16)) calc(100% - 1.15cqw) calc(100% - 1.15cqw)/1px 2.25cqw no-repeat; }
.record::after { content:""; position:absolute; z-index:4; left:0; right:0; bottom:0; height:1px; pointer-events:none; background:linear-gradient(90deg,rgba(225,224,218,.26),rgba(225,224,218,.055) 43%,transparent); }
.record-info { position:relative; z-index:2; min-width:0; height:100%; padding:2.15cqw 3.1cqw 1.9cqw; display:grid; grid-template-rows:auto auto 1fr; align-content:start; border-right:1px solid rgba(225,224,218,.13); background:linear-gradient(105deg,rgba(22,22,22,.94),rgba(12,12,12,.8)); }
.record-meta { min-width:0; display:flex; align-items:baseline; gap:2.2cqw; color:rgba(225,224,218,.42); }
.record-number { flex:0 0 auto; font-size:3.55cqw; font-weight:300; line-height:1; letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.record-file-label { overflow:hidden; color:rgba(220,225,223,.3); font-size:1.75cqw; line-height:1; letter-spacing:.15em; white-space:nowrap; }
.record-title { align-self:end; margin-top:.9cqw; overflow:hidden; color:rgba(239,238,232,.82); font-size:2.85cqw; font-weight:400; line-height:1.15; letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,0,.72); }
.record-summary { align-self:end; margin-top:.75cqw; overflow:hidden; display:-webkit-box; color:rgba(225,229,226,.38); font-size:1.58cqw; font-weight:400; line-height:1.35; letter-spacing:.035em; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.record-media { position:relative; min-width:0; height:100%; overflow:hidden; background:#090909; }
.record-visual,
.record-grade,
.empty-file-lines { position:absolute; inset:0; width:100%; height:100%; }
.record-visual { z-index:0; background-size:cover; background-position:center 42%; filter:saturate(.72) brightness(.67) contrast(1.04); transform:scale(1.015); transition:transform 540ms cubic-bezier(.2,.72,.2,1),filter 260ms ease; }
.record-grade { z-index:1; background:linear-gradient(90deg,rgba(3,4,5,.3),rgba(3,4,5,.04) 34%,rgba(3,4,5,.22)); }
.record[data-ending-id="BE"] .record-visual { background-position:center 68%; filter:saturate(.7) brightness(.72) contrast(1.05); }
.record[data-ending-id="HE"] .record-visual { background-position:center 33%; }
.record[data-ending-id="NE2"] .record-visual { background-position:center 39%; filter:saturate(.82) brightness(1.16) contrast(1.12); }
.record[data-ending-id="NE1"] .record-visual { background-position:center 76%; filter:saturate(.8) brightness(.92) contrast(1.09); }
.record[data-ending-id="TE"] .record-visual { background-position:center 35%; }
.record[data-ending-id="NE2"] .record-grade { background:linear-gradient(90deg,rgba(3,4,5,.18),rgba(3,4,5,.015) 48%,rgba(3,4,5,.13)); }
.record[data-ending-id="NE1"] .record-grade { background:linear-gradient(90deg,rgba(3,4,5,.28),rgba(3,4,5,.04) 52%,rgba(3,4,5,.16)); }
.is-locked { color:rgba(233,232,226,.38); cursor:default; background:rgba(11,11,11,.9); }
.is-locked .record-info { background:linear-gradient(105deg,rgba(18,18,18,.88),rgba(11,11,11,.82)); }
.is-locked .record-number { color:rgba(225,224,218,.28); }
.is-locked .record-title { color:rgba(239,238,232,.38); text-shadow:none; }
.is-locked .record-summary { color:rgba(225,229,226,.22); }
.record-media--empty { background:radial-gradient(ellipse at 72% 44%,rgba(225,224,218,.055),transparent 40%),linear-gradient(115deg,rgba(36,36,35,.2),rgba(9,9,9,.32)); }
.record-media--empty::after { content:""; position:absolute; z-index:2; inset:1.2cqw; border:1px solid rgba(225,224,218,.08); pointer-events:none; }
.empty-file-lines { opacity:.5; background:repeating-linear-gradient(0deg,transparent 0,transparent 13px,rgba(225,224,218,.022) 14px),linear-gradient(90deg,transparent 8%,rgba(225,224,218,.075) 8%,rgba(225,224,218,.075) 38%,transparent 38%) 0 38%/100% 1px no-repeat,linear-gradient(90deg,transparent 8%,rgba(225,224,218,.045) 8%,rgba(225,224,218,.045) 66%,transparent 66%) 0 60%/100% 1px no-repeat; }
.empty-file-label { position:absolute; z-index:3; right:3cqw; bottom:2.15cqw; color:rgba(225,224,218,.13); font-size:1.55cqw; letter-spacing:.18em; }
@media (hover:hover) {
  .is-unlocked:hover { border-color:rgba(225,224,218,.32); background:rgba(17,17,17,.92); }
  .is-unlocked:hover .record-visual { transform:scale(1.045); filter:saturate(.82) brightness(.8) contrast(1.05); }
  .is-unlocked[data-ending-id="NE2"]:hover .record-visual { filter:saturate(.88) brightness(1.24) contrast(1.12); }
  .is-unlocked[data-ending-id="NE1"]:hover .record-visual { filter:saturate(.86) brightness(1) contrast(1.09); }
}

@keyframes title-pass-enter { from { opacity:0; } to { opacity:1; } }
@keyframes collection-title-hint {
  0% { color: rgba(211, 209, 203, 0.58); }
  34% { color: rgba(237, 235, 229, 0.8); }
  100% { color: rgba(211, 209, 203, 0.58); }
}
@keyframes collection-title-hint-fill {
  0% { opacity: 0; }
  38% { opacity: 0.78; }
  100% { opacity: 0; }
}
@keyframes collection-title-hint-line {
  0% { opacity: 0.34; }
  38% { opacity: 0.64; }
  100% { opacity: 0.34; }
}
@keyframes ambient-in { 0% { opacity:0; } 30%,100% { opacity:1; } }
@keyframes pulse-line { 0%,14% { opacity:0; transform:translate3d(-50%,-50%,0) scaleX(0); } 48% { opacity:.66; } 100% { opacity:.18; transform:translate3d(-50%,-50%,0) scaleX(1); } }
@keyframes sting-piece-arrive { 0% { opacity:0; transform:translate3d(var(--piece-x),var(--piece-y),0) scale(var(--piece-scale)); filter:blur(1.5px); } 72% { opacity:.9; } 100% { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); } }
@keyframes sting-cn-soft { 0%,66% { opacity:0; filter:blur(2px); } 100% { opacity:1; filter:blur(0); } }
@keyframes sting-scan-fluid { 0%,30% { opacity:0; transform:translateY(-8cqw); } 60% { opacity:.55; } 100% { opacity:0; transform:translateY(8cqw); } }
@keyframes continue-breathe { 0%,100% { opacity:.16; transform:scaleX(.45); } 50% { opacity:.52; transform:scaleX(1); } }
@keyframes ending-visual-enter { from { opacity:.54; transform:scale(1.045); filter:saturate(.64) contrast(1.04) brightness(.68); } to { opacity:1; transform:scale(1.012); filter:saturate(.82) contrast(1.02) brightness(.92); } }
@keyframes ending-content-enter { from { opacity:0; transform:translateY(2.8cqw); filter:blur(2px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes locked-breathe { 0%,100% { opacity:.16; transform:scaleX(.78); } 50% { opacity:.4; transform:scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .title-content--ui-pass-1,
  .title-action--collection-hint,
  .title-action--collection-hint::before,
  .title-action--collection-hint::after,
  .sting-ambient,
  .sting-pulse,
  .title-mark--sting .sting-piece,
  .title-mark--sting .title-chinese,
  .sting-scan,
  .continue-hint,
  .is-entering .ending-visual,
  .is-entering .ending-content,
  .locked-scan { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}