:root {
  color-scheme: dark;
  --night: #05070c;
  --paper: #f4ead9;
  --muted: #b8aa95;
  --gold: #e5b85f;
  --gold-2: #fff0b0;
  --line: rgba(229, 184, 95, .32);
  --panel: rgba(8, 11, 17, .88);
}
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 50% 8%, #18202a 0, var(--night) 42rem);
  color: var(--paper);
  font-family: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
}

button, input, textarea { font: inherit; }
button { color: inherit; }

.interaction-light-burst{position:fixed;z-index:240;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;border:2px solid rgba(255,255,255,.96);border-radius:50%;background:#fff;box-shadow:0 0 18px 5px #fff,0 0 54px 22px rgba(225,246,255,.96),0 0 130px 55px rgba(192,228,255,.52);mix-blend-mode:screen;animation:interaction-light-burst .86s cubic-bezier(.12,.75,.18,1) forwards}.interaction-light-burst::before,.interaction-light-burst::after{content:"";position:absolute;left:50%;top:50%;width:92px;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translate(-50%,-50%);box-shadow:0 0 13px #fff}.interaction-light-burst::after{transform:translate(-50%,-50%) rotate(90deg)}.interaction-light-burst span{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;animation:interaction-spark .82s ease-out forwards}.interaction-light-burst span:nth-child(1){--spark-x:48px;--spark-y:-42px}.interaction-light-burst span:nth-child(2){--spark-x:-52px;--spark-y:-18px}.interaction-light-burst span:nth-child(3){--spark-x:28px;--spark-y:53px}@keyframes interaction-light-burst{0%{opacity:.98;transform:scale(.12)}32%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:scale(7.2)}}@keyframes interaction-spark{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.2)}}
.interaction-screen-flash{position:fixed;z-index:230;inset:0;pointer-events:none;background:radial-gradient(circle 125px at var(--touch-x) var(--touch-y),rgba(255,255,255,.62),rgba(225,244,255,.24) 24%,transparent 68%);mix-blend-mode:screen;animation:interaction-screen-flash .7s ease-out forwards}@keyframes interaction-screen-flash{0%{opacity:0}16%{opacity:1}100%{opacity:0}}
.story-shell :is(button,a).is-light-click{animation:interaction-control-light .72s ease-out}@keyframes interaction-control-light{0%{filter:brightness(1)}22%{filter:brightness(2.05);box-shadow:0 0 0 2px rgba(255,255,255,.92),0 0 34px 10px rgba(222,243,255,.72)}100%{filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){.interaction-light-burst,.interaction-screen-flash{animation-duration:.22s}.story-shell :is(button,a).is-light-click{animation-duration:.22s}}

.story-shell {
  position: relative;
  width: min(100%, 520px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 38%, rgba(230, 184, 91, .09), transparent 22rem),
    linear-gradient(180deg, #070a10, #090c13 58%, #05070b);
  border-inline: 1px solid rgba(229, 184, 95, .13);
  box-shadow: 0 0 100px rgba(0, 0, 0, .64);
}

.story-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.story-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 40px 40px 40px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 18px 12px;
  background: none;
  pointer-events: none;
}

.story-topbar a {
  pointer-events: auto;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(4,7,12,.58);
  backdrop-filter: blur(12px);
  color: var(--paper);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.story-topbar a:first-letter { color: var(--gold); }
.story-daily-share { position:absolute; left:calc(50% - 92px); top:16px; z-index:2; display:grid; place-items:center; width:34px; height:34px; padding:0; pointer-events:auto; cursor:pointer; border:1px solid rgba(255,233,0,.68); border-radius:50%; background:#fee500; box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 18px rgba(254,229,0,.13); }
.story-daily-share svg { width:25px; height:25px; overflow:visible; }
.story-daily-share path { fill:#3c1e1e; }
.story-daily-share text { fill:#fee500; font:900 8px/1 system-ui,sans-serif; }
.story-daily-share:hover,.story-daily-share:focus-visible { outline:0; border-color:#fff6a2; background:#ffea22; box-shadow:0 0 24px rgba(254,229,0,.42); transform:translateY(-1px); }
.story-daily-share[aria-busy="true"] { animation:daily-share-pulse .72s ease-in-out infinite alternate; }
@keyframes daily-share-pulse { to { box-shadow:0 0 31px rgba(254,229,0,.62); transform:scale(1.06); } }
.story-language-picker { position:absolute; left:calc(50% - 50px); top:16px; z-index:2; display:block; width:34px; height:34px; pointer-events:auto; font-family:system-ui,sans-serif; }
.story-language-toggle { display:grid; place-items:center; width:34px; height:34px; padding:0; cursor:pointer; border:1px solid rgba(220,228,237,.3); border-radius:50%; background:rgba(21,25,32,.78); box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 0 12px rgba(255,255,255,.05); font-size:17px; line-height:1; }
.story-language-toggle:hover,.story-language-toggle:focus-visible,.story-language-toggle[aria-expanded="true"] { outline:0; border-color:#fff; background:rgba(76,84,95,.88); box-shadow:0 0 22px rgba(229,242,255,.26); }
.story-language-menu { position:absolute; top:42px; left:0; display:grid; width:132px; padding:6px; border:1px solid rgba(220,228,237,.25); border-radius:12px; background:rgba(4,7,12,.96); box-shadow:0 18px 48px rgba(0,0,0,.58); backdrop-filter:blur(16px); }
.story-language-menu[hidden] { display:none; }
.story-language-menu button { display:flex; align-items:center; gap:9px; width:100%; padding:9px 10px; cursor:pointer; border:0; border-radius:8px; background:transparent; color:#f4ead9; text-align:left; font:700 12px/1.2 system-ui,sans-serif; }
.story-language-menu button:hover,.story-language-menu button:focus-visible { outline:0; background:rgba(229,184,95,.14); color:#fff; }
.story-language-menu button span { font-size:17px; }
.story-topbar .story-home-shortcut { position:absolute; left:50%; top:14px; display:grid; place-items:center; width:38px; height:38px; padding:0; transform:translateX(-50%); border-color:rgba(220,228,237,.3); background:rgba(106,114,125,.2); box-shadow:0 8px 24px rgba(0,0,0,.25),inset 0 0 14px rgba(255,255,255,.04); }
.story-home-shortcut svg { width:17px; height:17px; fill:none; stroke:rgba(235,240,246,.92); stroke-width:1.65; stroke-linejoin:round; filter:drop-shadow(0 0 6px rgba(235,244,255,.28)); }
.story-home-shortcut:hover,.story-home-shortcut:focus-visible { outline:0; border-color:#fff; background:rgba(145,153,164,.3); }
.story-topbar div { pointer-events:auto; display: flex; gap: 8px; align-items: center; padding:4px 7px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(4,7,12,.58); backdrop-filter:blur(12px); font: 700 9px/1.2 system-ui, sans-serif; letter-spacing: .12em; }
.story-topbar div b { color: var(--gold); }
.story-topbar div span { color: rgba(244, 234, 217, .58); }
.story-topbar .story-daily-share,.story-topbar .story-language-picker,.story-topbar .story-home-shortcut { position:relative; left:auto; top:auto; transform:none; }
.story-topbar>a:first-child { white-space:nowrap; }
.story-topbar>div { min-width:0; justify-self:stretch; gap:5px; letter-spacing:0; }
.story-topbar>div b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-topbar>div #sceneTime { display:none; }
.story-topbar .story-home-shortcut { border-color:rgba(229,184,95,.7); background:rgba(32,29,23,.95); }
.story-topbar .story-daily-share,.story-topbar .story-language-picker,.story-topbar .story-language-toggle,.story-topbar .story-home-shortcut { width:40px; height:40px; }
.story-topbar .story-language-menu { top:48px; }
.story-topbar .story-language-menu button { min-height:44px; }
.story-topbar :is(.sound-toggle,.menu-toggle,.story-back) { width:40px; height:40px; flex-basis:40px; font-size:15px; }
.story-topbar>div { padding:3px; gap:3px; }
.sound-toggle,.menu-toggle,.story-back { width: 28px; height: 28px; flex:0 0 28px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(5,7,12,.66); color: #fff; cursor: pointer; font: 700 12px/1 system-ui,sans-serif; box-shadow: 0 0 16px rgba(255,255,255,.1); }
.story-back { border-color:rgba(229,184,95,.42); color:var(--gold-2); font-size:16px; }
.story-back:hover,.story-back:focus-visible { border-color:#fff; color:#fff; outline:0; box-shadow:0 0 20px rgba(255,255,255,.16); }
.story-back[hidden] { display:none; }
.sound-toggle[aria-pressed="false"] { opacity: .44; text-decoration: line-through; }
.story-menu { position:absolute; z-index:80; inset:0 0 0 auto; width:min(70%,330px); padding:22px; background:#05080e; border-left:1px solid rgba(255,255,255,.2); box-shadow:-28px 0 80px rgba(0,0,0,.62); animation:menu-in .28s ease both; }
@keyframes menu-in { from { transform:translateX(100%); } }
.story-menu::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 92% 8%,rgba(255,255,255,.72),rgba(213,239,255,.24) 18%,transparent 52%);opacity:0;mix-blend-mode:screen}.story-menu.is-impacting::before{animation:menu-light-impact .78s ease-out}.story-shell.is-menu-impact::before{content:"";position:absolute;z-index:79;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 12%,rgba(217,241,255,.22) 63%,rgba(255,255,255,.58));mix-blend-mode:screen;animation:menu-screen-impact .78s ease-out}@keyframes menu-light-impact{0%{opacity:0;transform:scale(.72)}20%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(1.35)}}@keyframes menu-screen-impact{0%{opacity:0}18%{opacity:.95}100%{opacity:0}}
.story-menu>div { display:flex; justify-content:space-between; align-items:center; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.13); color:#eef8ff; font:700 10px/1.4 system-ui,sans-serif; letter-spacing:.18em; }
.story-menu>div button { width:34px; height:34px; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:transparent; color:#fff; font-size:22px; cursor:pointer; }
.experience-mode-menu { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.13); }
.experience-mode-menu a { display:block; min-height:78px; padding:12px; border:1px solid rgba(255,255,255,.15); color:#fff; text-decoration:none; background:rgba(255,255,255,.025); }
.experience-mode-menu a.active { border-color:rgba(229,184,95,.56); background:rgba(229,184,95,.09); box-shadow:inset 0 0 24px rgba(229,184,95,.04); }
.experience-mode-menu b,.experience-mode-menu small { display:block; }.experience-mode-menu b{font-size:14px}.experience-mode-menu small{margin-top:6px;color:rgba(238,248,255,.52);font:500 9px/1.45 system-ui,sans-serif}
.story-menu>a,.story-menu>button { display:block; width:100%; padding:20px 4px; text-align:left; border:0; border-bottom:1px solid rgba(255,255,255,.13); background:transparent; color:#fff; text-decoration:none; cursor:pointer; }
.story-menu b,.story-menu small { display:block; }
.story-menu b { font-size:18px; font-weight:500; }
.story-menu small { margin-top:7px; color:rgba(238,248,255,.52); font:500 11px/1.5 system-ui,sans-serif; }
.story-menu { position:fixed; top:0; bottom:0; max-height:100dvh; overflow-y:auto; padding-top:max(22px,env(safe-area-inset-top)); padding-bottom:max(22px,env(safe-area-inset-bottom)); }
.story-menu>div button { width:44px; height:44px; }
.story-menu-backdrop { position:fixed; z-index:79; inset:0; width:100%; height:100%; padding:0; border:0; background:rgba(0,0,0,.58); backdrop-filter:blur(4px); }
.story-menu-backdrop[hidden],.story-menu[hidden] { display:none; }
@media (min-width:521px) { .story-menu { right:calc((100vw - 520px)/2); } }

.dual-guide-greeting { position:absolute; z-index:70; inset:0; display:grid; place-content:center; justify-items:center; padding:40px; pointer-events:none; text-align:center; background:radial-gradient(circle at 50% 48%,rgba(235,248,255,.22),rgba(6,10,16,.2) 24%,transparent 56%); opacity:0; }
.dual-guide-greeting[hidden] { display:none; }
.dual-guide-greeting.is-visible { animation:dual-greeting-in 1s ease forwards; }
.dual-guide-greeting i { width:10px; height:10px; margin-bottom:28px; border-radius:50%; background:#fff; box-shadow:0 0 16px #fff,0 0 55px 22px rgba(228,247,255,.72),0 0 150px 72px rgba(213,239,255,.26); animation:dual-greeting-light 2.1s ease-in-out infinite; }
.dual-guide-greeting span,.dual-guide-greeting small { font:700 9px/1.4 system-ui,sans-serif; letter-spacing:.22em; text-transform:uppercase; }
.dual-guide-greeting span { color:#f4d68f; text-shadow:0 0 16px rgba(229,184,95,.6); }
.dual-guide-greeting strong { max-width:440px; margin:17px 0 15px; color:#fff9ef; font:500 clamp(31px,8vw,48px)/1.38 "Noto Serif KR","Nanum Myeongjo",Georgia,serif; letter-spacing:-.045em; word-break:keep-all; text-shadow:0 2px 24px rgba(0,0,0,.8),0 0 28px rgba(235,248,255,.34); }
.dual-guide-greeting small { color:rgba(239,246,252,.62); letter-spacing:.13em; }
@keyframes dual-greeting-in { 0%{opacity:0;filter:blur(8px);transform:scale(.97)} 35%,82%{opacity:1;filter:none;transform:none} 100%{opacity:.92} }
@keyframes dual-greeting-light { 50%{transform:scale(1.5);box-shadow:0 0 22px #fff,0 0 78px 30px rgba(228,247,255,.84),0 0 190px 88px rgba(213,239,255,.34)} }

.story-progress {
  position: absolute;
  z-index: 21;
  top: calc(max(12px, env(safe-area-inset-top)) + 51px);
  left: 18px;
  right: 18px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.story-progress i { height: 2px; background: rgba(255, 255, 255, .12); transition: background .5s, box-shadow .5s; }
.story-progress i.is-done { background: rgba(229, 184, 95, .44); }
.story-progress i.is-current { background: var(--gold); box-shadow: 0 0 14px var(--gold); }

.story-screen {
  position: absolute;
  inset: 0;
  display: none;
  min-height: 100svh;
  padding: 94px 28px 34px;
  opacity: 0;
}

.story-screen.is-active { display: flex; animation: scene-in .6s ease forwards; }
.story-shell { min-height:100dvh; }
.story-screen { min-height:100dvh; padding-top:calc(94px + env(safe-area-inset-top)); }
.story-screen:is(.name-screen,.message-screen,.guide-screen,.result-screen) { padding-bottom:max(34px,env(safe-area-inset-bottom)); overflow-y:auto; }
.story-screen:is(.name-screen,.message-screen,.guide-screen) { justify-content:safe center; }
.story-screen:is(.name-screen,.message-screen,.guide-screen) h2 { word-break:keep-all; overflow-wrap:break-word; }
.story-shell :is(button,a,input,textarea):focus-visible { outline:2px solid #fff0b0; outline-offset:3px; }
.story-shell :is(button,a) { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
@keyframes scene-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

.kicker {
  margin: 0 0 14px;
  color: var(--gold);
  font: 700 10px/1.4 system-ui, sans-serif;
  letter-spacing: .2em;
}

h1, h2, p { margin-top: 0; }
h1, h2 { text-wrap: balance; letter-spacing: -.045em; }
h1 { margin-bottom: 18px; font-size: clamp(40px, 10vw, 62px); font-weight: 500; line-height: 1.15; }
h2 { margin-bottom: 15px; font-size: clamp(32px, 8vw, 46px); font-weight: 500; line-height: 1.2; }
p { color: rgba(244, 234, 217, .72); line-height: 1.75; }

.welcome-screen, .guide-screen, .name-screen, .message-screen, .prepare-screen, .result-screen {
  flex-direction: column;
  justify-content: center;
}

.welcome-screen { padding: 0; text-align: center; align-items: center; justify-content:flex-end; background:#03060b; }
.portal-entry-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 37%; filter:saturate(.78) contrast(1.06) brightness(.72); animation:portal-arrive 10s ease-out both; }
.portal-entry-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,5,11,.34),transparent 30%,transparent 52%,rgba(6,8,12,.9) 82%,#05070b 100%); pointer-events:none; }
.portal-entry-controls { position:relative; z-index:3; display:flex; width:100%; flex-direction:column; align-items:center; padding:0 24px max(34px,env(safe-area-inset-bottom)); }
.portal-entry-controls h1 { margin:0 0 24px; color:#fff7e8; font:500 clamp(28px,7vw,40px)/1.38 "Noto Serif KR",serif; letter-spacing:-.04em; text-shadow:0 3px 20px #000; }
.portal-entry-controls .primary-action { width:100%; max-width:420px; min-height:58px; font-size:17px; }
.portal-entry-controls small { margin-top:14px; color:rgba(244,234,217,.8); font:500 13px/1.6 system-ui,sans-serif; text-shadow:0 2px 14px #000; }
.portal-enter-action { display:flex; align-items:center; justify-content:space-between; width:min(100%,340px); min-height:42px; margin-top:8px; padding:0 5px; border:0; border-bottom:1px solid rgba(255,255,255,.34); background:transparent; color:#fff; font:700 11px/1.4 system-ui,sans-serif; cursor:pointer; text-shadow:0 2px 14px #000; }
@keyframes portal-arrive { from { transform:scale(1.06); filter:saturate(.72) contrast(1.04) brightness(.56); } to { transform:scale(1); filter:saturate(.78) contrast(1.06) brightness(.72); } }
.welcome-screen > small, .result-screen > small { margin-top: 16px; color: rgba(244, 234, 217, .42); font: 500 10px/1.5 system-ui, sans-serif; }

.welcome-orb, .message-light {
  width: 15px;
  height: 15px;
  margin-bottom: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px #fff, 0 0 38px #fff, 0 0 120px 42px rgba(235, 247, 255, .3);
  animation: orb-float 2.8s ease-in-out infinite;
}
@keyframes orb-float { 50% { transform: translateY(-12px) scale(.82); box-shadow: 0 0 10px #fff, 0 0 28px #fff, 0 0 86px 30px rgba(235, 247, 255, .24); } }

.primary-action, .secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100%, 340px);
  min-height: 56px;
  padding: 0 19px;
  border: 1px solid #edc676;
  background: linear-gradient(135deg, #e4b55d, #bd8135);
  color: #090b0f;
  font: 800 14px/1.3 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 14px 45px rgba(187, 126, 44, .18);
}

.secondary-action { margin-top: 10px; background: transparent; color: var(--paper); border-color: var(--line); box-shadow: none; }
.primary-action:disabled, .secondary-action:disabled { opacity: .45; cursor: not-allowed; }

.media-screen { padding: 0; background: #020306; }
.media-screen video { width: 100%; height: 100svh; object-fit: cover; background: #020306; }
.white-light-video { filter: saturate(1.04) contrast(1.06) brightness(.94); }
.chase-light-video { filter:saturate(.82) contrast(1.12) brightness(.82) hue-rotate(4deg); }
.reveal-video { filter:saturate(1.12) contrast(1.07) brightness(.88); }
.media-screen::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:screen; background:radial-gradient(circle at 50% 49%,rgba(255,255,255,.25),rgba(235,247,255,.06) 18%,transparent 46%); }
.media-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 3, 6, .2), transparent 35%, rgba(2, 3, 6, .88)); pointer-events: none; }
.timed-caption { position: absolute; z-index: 2; left: 25px; right: 25px; bottom: 68px; }
.timed-caption span { color: var(--gold); font: 700 9px/1.4 system-ui, sans-serif; letter-spacing: .17em; }
.timed-caption p { margin: 9px 0 0; color: var(--paper); font-size: 26px; line-height: 1.45; text-shadow: 0 3px 20px #000; }
.skip-action { position: absolute; z-index: 4; right: 18px; bottom: 22px; border: 0; background: transparent; color: rgba(244, 234, 217, .72); font: 600 11px system-ui, sans-serif; text-decoration: underline; cursor: pointer; }
.scene-gate { position:absolute; z-index:9; left:18px; right:18px; bottom:20px; padding:16px; border:1px solid rgba(255,255,255,.34); background:linear-gradient(135deg,rgba(3,6,11,.54),rgba(3,6,11,.34)); box-shadow:0 0 38px rgba(220,244,255,.1),0 16px 44px rgba(0,0,0,.34); backdrop-filter:blur(6px); animation:gate-in .5s ease both; }
@keyframes gate-in { from { opacity:0; transform:translateY(16px); } }
.scene-gate p { margin:0 0 11px; color:#fff; font-size:17px; line-height:1.5; }
.scene-gate button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:0 14px; border:1px solid rgba(238,248,255,.58); background:rgba(225,243,255,.14); color:#fff; font:800 13px/1.4 system-ui,sans-serif; cursor:pointer; box-shadow:inset 0 0 24px rgba(224,243,255,.05),0 0 22px rgba(255,255,255,.08); text-shadow:0 2px 12px #000; }
.scene-gate[hidden] { display:none !important; }
.darkness-gate { bottom:30px; text-align:left; }

.darkness-screen { align-items: center; justify-content: center; flex-direction: column; text-align: center; background: #010204; }
.darkness-screen p { margin-bottom: 9px; color: rgba(244, 234, 217, .48); }
.darkness-screen strong { font-size: 24px; font-weight: 500; }
.darkness-screen small { margin-top: 22px; color: var(--gold); font: 600 10px system-ui, sans-serif; }
.vanishing-light { width: 8px; height: 8px; margin-bottom: 38px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 28px var(--gold); animation: vanish 3s ease forwards; }
.vanishing-light { background:#fff; box-shadow:0 0 18px #fff,0 0 58px rgba(235,247,255,.72); }
@keyframes vanish { 0% { opacity: 1; transform: scale(1); } 45% { opacity: .2; transform: scale(.6); } 75%, 100% { opacity: 0; transform: scale(.05); } }

.guide-screen { justify-content: flex-start; overflow-y: auto; }
.guide-screen > p:not(.kicker) { margin-bottom: 18px; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding-bottom: 24px; }
.guide-card { padding: 0 0 15px; overflow: hidden; text-align: left; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); cursor: pointer; transition: transform .25s, border-color .25s, box-shadow .25s; }
.guide-card:hover, .guide-card:focus-visible { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 18px 50px rgba(0, 0, 0, .38), 0 0 24px rgba(229, 184, 95, .1); outline: 0; }
.guide-card img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; margin-bottom: 13px; }
.guide-card span, .guide-card strong, .guide-card small { display: block; margin-inline: 13px; }
.guide-card span { color: var(--gold); font: 700 8px system-ui, sans-serif; letter-spacing: .16em; }
.guide-card strong { margin-top: 6px; font-size: 23px; font-weight: 500; }
.guide-card small { margin-top: 5px; color: var(--muted); font: 500 10px/1.4 system-ui, sans-serif; }
.selected-guide-video-screen { padding:0; overflow:hidden; background:#020306; }
.selected-guide-video-screen video { width:100%; height:100%; object-fit:cover; object-position:center; background:#020306; }
.selected-guide-video-screen video::cue { color:#fff8e8; background:rgba(2,3,6,.78); font-family:system-ui,sans-serif; font-size:18px; font-weight:800; line-height:1.42; text-shadow:0 2px 4px #000,0 0 12px rgba(0,0,0,.92); }
.selected-guide-video-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(2,3,6,.2),transparent 34%,transparent 64%,rgba(2,3,6,.74) 100%); }
.selected-guide-video-label { position:absolute; z-index:3; top:82px; left:20px; display:grid; gap:5px; color:#fff; text-shadow:0 2px 14px #000; }
.selected-guide-video-label span { color:var(--gold-2); font:800 9px/1.4 system-ui,sans-serif; letter-spacing:.16em; }
.selected-guide-video-label b { font:600 13px/1.4 system-ui,sans-serif; }
.guide-video-skip { position:absolute; z-index:12; top:78px; right:18px; display:flex; align-items:center; gap:6px; min-height:30px; padding:0 10px; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:rgba(3,6,11,.78); backdrop-filter:blur(10px); color:rgba(255,255,255,.82); font:700 10px/1 system-ui,sans-serif; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.24); }
.guide-video-skip:hover,.guide-video-skip:focus-visible { border-color:#fff; color:#fff; outline:0; }.guide-video-skip[hidden]{display:none}.guide-video-skip span{font-size:16px}

.greeting-screen, .entry-talk-screen { flex-direction:column; justify-content:flex-end; padding:82px 0 24px; overflow-y:auto; background:linear-gradient(180deg,#02040a,#070a11 64%,#05070b); }
.living-guide { position:absolute; inset:0 0 auto; height:58%; overflow:hidden; background:#02040a; }
.living-guide.compact { height:46%; }
.living-guide video,.living-guide img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; filter:saturate(.92) contrast(1.12) brightness(.72); }
.living-guide video:not([src]),.living-guide video.is-unavailable { display:none; }
.living-guide video[src]:not(.is-unavailable) + img { display:none; }
.white-guide-light { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(2,5,10,.02) 30%,rgba(2,5,10,.44) 66%,#05070b 96%); }
.guide-dialogue { position:relative; z-index:3; margin:0 22px 12px; padding:18px 18px 16px; border:1px solid rgba(255,255,255,.2); background:rgba(4,7,12,.86); box-shadow:0 18px 52px rgba(0,0,0,.48),0 0 30px rgba(255,255,255,.05); backdrop-filter:blur(13px); }
.guide-dialogue>span { color:#eef8ff; font:700 9px/1.4 system-ui,sans-serif; letter-spacing:.16em; }
.guide-dialogue h2 { margin:7px 0 12px; font-size:25px; }
.guide-dialogue blockquote { margin:0; color:#fff; font-size:17px; line-height:1.75; word-break:keep-all; }
.voice-replay { margin-top:12px; padding:0; border:0; background:transparent; color:rgba(238,248,255,.72); font:700 10px/1.4 system-ui,sans-serif; cursor:pointer; }
.dialogue-options { position:relative; z-index:4; display:grid; gap:7px; margin:0 22px; }
.dialogue-options button { min-height:44px; padding:10px 13px; text-align:left; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.045); color:#f5f8fb; font:600 12px/1.45 system-ui,sans-serif; cursor:pointer; }
.dialogue-options button:hover,.dialogue-options button:focus-visible { border-color:#fff; background:rgba(255,255,255,.1); outline:0; box-shadow:0 0 22px rgba(255,255,255,.1); }
.entry-talk-screen { overflow:hidden; padding:76px 0 max(18px,env(safe-area-inset-bottom)); isolation:isolate; }
.entry-talk-screen .living-guide.compact { inset:0; height:100%; }
.entry-talk-screen .living-guide video,.entry-talk-screen .living-guide img { filter:saturate(1) contrast(1.06) brightness(.8); }
.entry-talk-screen .white-guide-light { background:linear-gradient(180deg,rgba(2,5,10,.02) 0,rgba(2,5,10,.03) 48%,rgba(2,5,10,.16) 66%,rgba(2,5,10,.5) 100%); }
.entry-talk-screen .guide-dialogue { margin:0 18px 8px; padding:13px 15px 12px; border-color:rgba(255,255,255,.3); background:linear-gradient(135deg,rgba(3,6,11,.3),rgba(3,6,11,.4)); box-shadow:0 12px 34px rgba(0,0,0,.26); backdrop-filter:blur(4px); text-shadow:0 2px 14px #000; }
.entry-talk-screen .guide-dialogue h2 { margin:5px 0 7px; font-size:22px; line-height:1.35; }
.entry-talk-screen .guide-dialogue blockquote { font-size:14px; line-height:1.62; }
.entry-talk-screen .entry-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:0 18px; }
.entry-talk-screen .entry-options button { min-height:46px; padding:8px 11px; border-color:rgba(255,255,255,.28); background:rgba(3,6,11,.28); box-shadow:0 8px 22px rgba(0,0,0,.18); backdrop-filter:blur(4px); text-shadow:0 2px 10px #000; }
.entry-talk-screen .entry-options[hidden],.entry-follow-action[hidden] { display:none; }
.entry-follow-action { position:relative; z-index:4; margin:0 18px; text-align:center; }
.entry-follow-action button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:58px; padding:13px 18px; border:1px solid rgba(245,250,255,.72); background:linear-gradient(90deg,rgba(239,247,255,.92),#fff); color:#111822; font:800 14px/1.4 system-ui,sans-serif; cursor:pointer; box-shadow:0 0 26px rgba(222,243,255,.24),0 12px 30px rgba(0,0,0,.3); }
.entry-follow-action button:hover,.entry-follow-action button:focus-visible { outline:0; box-shadow:0 0 38px rgba(236,249,255,.42),0 14px 34px rgba(0,0,0,.36); }
.entry-follow-action button:disabled { opacity:.72; cursor:wait; }
.entry-follow-action button b { font-size:20px; }
.entry-follow-action small { display:block; margin-top:8px; color:rgba(241,247,255,.68); font:600 10px/1.45 system-ui,sans-serif; text-shadow:0 2px 8px #000; }
.entry-talk-screen .living-guide video,.entry-talk-screen .living-guide img { transition:transform .76s cubic-bezier(.2,.7,.2,1),filter .76s ease; }
.entry-talk-screen.is-following .living-guide video,.entry-talk-screen.is-following .living-guide img { transform:scale(1.085) translateY(-1.5%); filter:saturate(1.08) contrast(1.08) brightness(1); }
.entry-talk-screen.is-following .white-guide-light { animation:follow-light-flare .76s ease forwards; }
@keyframes follow-light-flare { 50% { background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.5),rgba(185,225,255,.1) 28%,rgba(2,5,10,.08) 62%); } 100% { background:linear-gradient(180deg,rgba(2,5,10,.02) 0,rgba(2,5,10,.03) 48%,rgba(2,5,10,.16) 66%,rgba(2,5,10,.5) 100%); } }

.guide-avatar { width: 114px; height: 150px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 70px 70px 8px 8px; box-shadow: 0 0 46px rgba(229, 184, 95, .12); }
.guide-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.name-screen p { max-width: 390px; }

.story-field { display: block; width: 100%; margin: 10px 0 18px; }
.story-field > span { display: block; margin-bottom: 8px; color: var(--gold); font: 700 9px system-ui, sans-serif; letter-spacing: .14em; }
.story-field input, .story-field textarea { width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: 0; outline: 0; background: rgba(1, 3, 7, .72); color: var(--paper); font: 500 16px/1.55 system-ui, sans-serif; resize: none; }
.story-field > small { display:block; margin-top:7px; color:#8f877b; font:10px/1.5 system-ui,sans-serif; }
.profile-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.story-field input:focus, .story-field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(229, 184, 95, .09); }

.question-screen { flex-direction:column; justify-content:flex-end; overflow:hidden; padding:0; background:#02050a; }
.question-cinema { position:absolute; inset:0; overflow:hidden; background:#02050a; }
.question-cinema img,.question-cinema video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.question-cinema img { animation:question-camera 14s ease-in-out infinite alternate; filter:saturate(.82) contrast(1.12) brightness(.76); }
.question-cinema video { display:none; filter:saturate(.9) contrast(1.1) brightness(.76); }
.question-cinema.has-video video { display:block; }
.question-cinema.has-video img { opacity:0; }
.question-cinema::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,5,10,.2) 0,rgba(2,5,10,.03) 34%,rgba(2,5,10,.22) 67%,rgba(5,8,14,.62) 100%); }
.question-cinema.is-changing img { animation:question-cut .72s ease both,question-camera 14s .72s ease-in-out infinite alternate; }
@keyframes question-camera { from { transform:scale(1.02) translate3d(-.6%,0,0); } to { transform:scale(1.1) translate3d(.8%,-1.2%,0); } }
@keyframes question-cut { from { opacity:.25; transform:scale(1.13); filter:blur(7px) saturate(.65) brightness(.5); } }
.question-light-trail { position:absolute; z-index:1; left:50%; top:18%; width:5px; height:38%; border-radius:50%; background:rgba(255,255,255,.72); box-shadow:0 0 12px #fff,0 0 42px 10px rgba(229,246,255,.34),0 0 110px 30px rgba(229,246,255,.14); opacity:.38; transform:translateX(-50%); animation:trail-breathe 4s ease-in-out infinite; mix-blend-mode:screen; }
@keyframes trail-breathe { 50% { opacity:.74; transform:translateX(-50%) scaleY(1.08); box-shadow:0 0 18px #fff,0 0 64px 14px rgba(229,246,255,.46),0 0 150px 44px rgba(229,246,255,.2); } }
.question-particles { position:absolute; z-index:1; inset:0; pointer-events:none; }
.question-particles i { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:0 0 12px #fff; opacity:0; animation:particle-rise 5.6s linear infinite; }
.question-particles i:nth-child(1){left:17%;top:58%;animation-delay:-1s}.question-particles i:nth-child(2){left:72%;top:46%;animation-delay:-3.4s}.question-particles i:nth-child(3){left:48%;top:68%;animation-delay:-4.7s}.question-particles i:nth-child(4){left:83%;top:63%;animation-delay:-2.1s}.question-particles i:nth-child(5){left:31%;top:39%;animation-delay:-.2s}
@keyframes particle-rise { 0%{opacity:0;transform:translateY(30px) scale(.5)} 28%{opacity:.7} 78%{opacity:.28} 100%{opacity:0;transform:translateY(-150px) scale(1.3)} }
.question-story-panel { position:relative; z-index:3; height:30svh; max-height:30svh; overflow-y:auto; overscroll-behavior:contain; padding:14px 22px max(24px,env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(5,8,14,.12),rgba(5,8,14,.52) 22%,rgba(5,8,14,.7)); border-top:1px solid rgba(255,255,255,.2); box-shadow:0 -14px 38px rgba(0,0,0,.2); backdrop-filter:blur(4px); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.5) transparent; transition:height .42s cubic-bezier(.2,.75,.2,1),max-height .42s cubic-bezier(.2,.75,.2,1); }
.question-story-panel.is-expanded { height:68svh; max-height:68svh; }
.question-story-panel { height:50dvh; max-height:calc(100dvh - 250px); padding-top:18px; border-radius:24px 24px 0 0; border-color:rgba(229,184,95,.36); background:linear-gradient(180deg,rgba(15,19,26,.9),rgba(5,8,14,.96)); box-shadow:0 -18px 54px rgba(0,0,0,.36); }
.question-story-panel.is-expanded { height:calc(100dvh - 100px - env(safe-area-inset-top)); max-height:calc(100dvh - 100px - env(safe-area-inset-top)); }
.question-screen:has(.question-story-panel.is-expanded) .question-guide { visibility:hidden; }
.question-panel-toggle { position:sticky; z-index:9; top:-14px; display:flex; align-items:center; justify-content:center; width:54px; height:28px; margin:-14px auto 8px; padding:0; border:0; border-radius:0 0 18px 18px; background:rgba(154,162,173,.22); cursor:pointer; backdrop-filter:blur(8px); box-shadow:0 6px 18px rgba(0,0,0,.24); }
.question-panel-toggle::before { content:""; width:12px; height:12px; margin-top:6px; border-top:2px solid rgba(226,231,238,.9); border-left:2px solid rgba(226,231,238,.9); transform:rotate(45deg); transition:transform .3s ease,margin .3s ease; filter:drop-shadow(0 0 5px rgba(235,243,255,.35)); }
.question-panel-toggle[aria-expanded="true"]::before { margin-top:-5px; transform:rotate(225deg); }
.question-panel-toggle:hover,.question-panel-toggle:focus-visible { outline:0; background:rgba(189,197,207,.34); }
.question-panel-toggle { width:72px; height:40px; top:-18px; margin:-18px auto 12px; }
.question-guide { position:absolute; z-index:4; top:84px; left:18px; right:18px; display:grid; grid-template-columns:115px 1fr; align-items:center; gap:14px; min-height:130px; pointer-events:none; filter:drop-shadow(0 14px 22px rgba(0,0,0,.64)); }
.question-guide img { width:115px; height:130px; object-fit:contain; object-position:center; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%); }
.question-guide span { color:var(--gold-2); font:800 11px system-ui,sans-serif; letter-spacing:.14em; text-shadow:0 2px 12px #000; }
.question-guide p { max-width:285px; margin:7px 0 0; color:#fff; font-size:15px; line-height:1.65; word-break:keep-all; text-shadow:0 2px 6px #000,0 0 18px #000; }
.question-count { color: rgba(244, 234, 217, .44); font: 700 10px system-ui, sans-serif; letter-spacing: .17em; }
.question-screen h2 { margin:8px 0 14px; font-size:28px; }
.direct-answer-toggle { position:sticky; z-index:5; top:22px; display:grid; grid-template-columns:28px 1fr; align-items:center; width:100%; min-height:64px; margin:0 0 10px; padding:10px 12px; text-align:left; border:1px solid rgba(229,184,95,.42); background:rgba(10,12,16,.9); color:var(--paper); cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.3); backdrop-filter:blur(10px); }
.direct-answer-toggle>span { grid-row:1 / 3; color:var(--gold-2); font-size:18px; text-shadow:0 0 14px var(--gold); }
.direct-answer-toggle b { font:800 13px/1.45 system-ui,sans-serif; }
.direct-answer-toggle small { margin-top:2px; color:rgba(244,234,217,.56); font:500 10px/1.4 system-ui,sans-serif; }
.direct-answer-toggle:hover,.direct-answer-toggle:focus-visible,.direct-answer-toggle[aria-expanded="true"] { border-color:var(--gold-2); background:rgba(32,26,17,.94); outline:0; }
.direct-answer-composer { margin:0 0 12px; padding:0 1px 10px; border-bottom:1px solid rgba(255,255,255,.13); }
.direct-answer-composer[hidden] { display:none; }
.question-options { display: grid; gap: 8px; }
.question-options button { min-height:46px; padding:10px 13px; text-align:left; border:1px solid rgba(255,255,255,.24); background:rgba(3,7,12,.28); color:var(--paper); font:600 13px/1.5 system-ui,sans-serif; cursor:pointer; backdrop-filter:blur(3px); text-shadow:0 2px 12px #000; }
.question-options button:hover, .question-options button:focus-visible { border-color: var(--gold); background: rgba(229, 184, 95, .09); outline: 0; }
.optional-answer { margin: 0; }
.optional-answer textarea { min-height: 150px; max-height:42svh; resize:vertical; background:rgba(1,3,7,.42); font-size: 14px; line-height:1.7; }
.written-answer-count { align-self:flex-end; margin-top:6px; color:rgba(244,234,217,.52); font:600 10px/1.4 system-ui,sans-serif; }
.question-count { color:#dbc290; font-size:11px; }
.question-screen h2 { font-size:clamp(24px,6.5vw,31px); line-height:1.4; margin-bottom:18px; }
.direct-answer-toggle { top:22px; border-radius:12px; }
.direct-answer-toggle small { color:#c4b9a7; font-size:12px; }
.question-options { gap:10px; }
.question-options.is-compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
.question-options button { min-height:54px; border-radius:12px; font-size:15px; background:rgba(255,255,255,.035); border-color:rgba(229,211,177,.23); transition:border-color .18s,background .18s; }
.question-options button:hover { background:rgba(229,184,95,.12); }
.optional-answer textarea { font-size:16px; border-radius:12px; }
.story-input-hint { margin:-6px 0 18px; color:#d7c6a9; font:500 13px/1.7 system-ui,sans-serif; }
.prayer-field textarea[aria-invalid="true"] { border-color:#f2b99e; box-shadow:0 0 0 3px rgba(242,185,158,.12); }
.story-field>span,.story-field>small { font-size:12px; line-height:1.6; }

.message-screen { justify-content: flex-start; overflow-y: auto; }
.message-light { margin: 4px 0 28px; }
.prayer-field { position: relative; }
.prayer-field textarea { min-height: 142px; font-family: inherit; font-size: 22px; line-height: 1.6; }
.prayer-field small { position: absolute; right: 10px; bottom: 10px; color: rgba(244, 234, 217, .48); font: 600 10px system-ui, sans-serif; }

.prepare-screen { align-items: center; text-align: center; }
.passage-light { width:18px; height:18px; margin-bottom:34px; border-radius:50%; background:#fff; box-shadow:0 0 18px #fff,0 0 62px 22px rgba(235,247,255,.44),0 0 150px 58px rgba(235,247,255,.22); animation:passage 2.4s ease-in-out infinite; }
@keyframes passage { 50% { transform:scale(1.6); box-shadow:0 0 24px #fff,0 0 90px 34px rgba(235,247,255,.5),0 0 190px 74px rgba(235,247,255,.26); } }
.voice-pulse { display: flex; align-items: center; gap: 6px; height: 70px; margin-bottom: 25px; }
.voice-pulse i { display: block; width: 4px; height: 18px; background: var(--gold); box-shadow: 0 0 14px var(--gold); animation: voice 1s ease-in-out infinite alternate; }
.voice-pulse i:nth-child(2) { height: 38px; animation-delay: -.45s; }
.voice-pulse i:nth-child(3) { height: 26px; animation-delay: -.75s; }
@keyframes voice { to { height: 58px; opacity: .38; } }

.finale-screen { background: #010204; }
.finale-screen video { opacity: .94; filter:saturate(0) contrast(1.2) brightness(1.8); }
.finale-bloom { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 48%, #fff 0 2%, #f7fcff 7%, rgba(229,246,255,.78) 22%, rgba(218,241,255,.28) 42%, transparent 68%); animation: bloom 8s ease-in forwards; pointer-events: none; mix-blend-mode:screen; }
@keyframes bloom { 0% { opacity: .12; transform: scale(.25); } 45% { opacity: .58; transform: scale(.8); } 100% { opacity: 1; transform: scale(1.8); } }
.finale-copy { position: absolute; z-index: 3; left: 26px; right: 26px; bottom: 68px; text-shadow: 0 3px 22px #000; }
.finale-screen .scene-gate { z-index:10; }
.finale-copy span { color: #eef9ff; font: 700 9px system-ui, sans-serif; letter-spacing: .16em; }
.finale-copy blockquote { margin: 12px 0 0; color: #fff; font-size: 25px; line-height: 1.55; }

.result-screen { text-align: center; align-items: center; justify-content:flex-start; overflow-y:auto; }
.result-portrait { width: 112px; height: 112px; margin-bottom: 22px; overflow: hidden; border: 1px solid var(--gold); border-radius: 50%; box-shadow: 0 0 48px rgba(229, 184, 95, .24); }
.result-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.result-screen p { max-width: 380px; }
.result-screen .result-offer { padding:14px 16px; border:1px solid rgba(229,184,95,.24); background:rgba(229,184,95,.06); color:rgba(244,234,217,.78); font:600 12px/1.7 system-ui,sans-serif; }
.result-free-word-action{display:grid;grid-template-columns:26px 1fr 22px;gap:4px 10px;width:min(100%,400px);min-height:76px;margin-top:15px;padding:15px 17px;border:1px solid rgba(229,184,95,.66);background:linear-gradient(110deg,rgba(177,119,35,.2),rgba(255,255,255,.045));color:var(--paper);text-align:left;cursor:pointer;box-shadow:0 14px 40px rgba(0,0,0,.28)}
.result-free-word-action>span{grid-row:1/3;align-self:center;color:#fff;font-size:15px;text-shadow:0 0 14px #fff}.result-free-word-action>b{align-self:end;color:#ffe5ae;font:800 13px/1.4 system-ui,sans-serif}.result-free-word-action>small{align-self:start;color:rgba(244,234,217,.54);font:600 9px/1.5 system-ui,sans-serif}.result-free-word-action>i{grid-column:3;grid-row:1/3;align-self:center;color:var(--gold-2);font:normal 19px/1 serif}.result-free-word-action:hover,.result-free-word-action:focus-visible{border-color:#fff0c8;background:rgba(229,184,95,.14);outline:0;box-shadow:0 0 34px rgba(255,255,255,.1)}
.scripture-treasure { width:100%; margin-top:14px; }
.prototype-book-item { margin-bottom:16px; border:1px solid rgba(229,184,95,.16); background:rgba(3,6,11,.45); }
.teaser-book-item { max-width:400px; margin-inline:auto; }
.scripture-book-button { display:block; width:100%; padding:0 0 16px; border:1px solid rgba(229,184,95,.28); background:linear-gradient(180deg,rgba(7,10,16,.42),rgba(7,10,16,.9)); color:var(--paper); cursor:pointer; overflow:hidden; }
.book-stage { position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; background:#02050a; }
.book-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; transition:opacity .9s ease,transform 1.4s cubic-bezier(.2,.8,.2,1),filter .9s ease; }
.book-open { opacity:0; transform:scale(1.08); filter:brightness(.72); }
.book-light { position:absolute; z-index:3; left:50%; bottom:20%; width:10px; height:8px; border-radius:50%; background:#fff; opacity:.62; transform:translateX(-50%); box-shadow:0 0 15px #fff,0 0 48px 18px rgba(235,248,255,.6),0 0 110px 48px rgba(220,242,255,.26); animation:book-breathe 2.8s ease-in-out infinite; }
@keyframes book-breathe { 50% { opacity:1; transform:translateX(-50%) scale(1.35); box-shadow:0 0 24px #fff,0 0 74px 28px rgba(235,248,255,.72),0 0 150px 64px rgba(220,242,255,.34); } }
.book-particle { position:absolute; z-index:4; width:4px; height:4px; border-radius:50%; background:#fff; box-shadow:0 0 12px #fff; animation:book-particle 3.6s linear infinite; }
.book-particle.p1 { left:38%; bottom:20%; }.book-particle.p2 { left:56%; bottom:17%; animation-delay:-1.2s; }.book-particle.p3 { left:68%; bottom:22%; animation-delay:-2.5s; }
@keyframes book-particle { from { opacity:0; transform:translateY(0) scale(.6); } 30% { opacity:.9; } to { opacity:0; transform:translateY(-120px) scale(1.4); } }
.scripture-book-button>b,.scripture-book-button>small { display:block; margin-inline:18px; }
.scripture-book-button>b { margin-top:14px; color:var(--gold-2); font-size:18px; font-weight:500; }
.scripture-book-button>small { margin-top:5px; color:rgba(244,234,217,.55); font:600 10px/1.4 system-ui,sans-serif; letter-spacing:.06em; }
.scripture-book-button:hover,.scripture-book-button:focus-visible { border-color:var(--gold-2); outline:0; box-shadow:0 0 32px rgba(229,184,95,.13); }
.prototype-book-item.is-open .book-closed { opacity:0; transform:scale(.94); }
.prototype-book-item.is-open .book-open { opacity:1; transform:scale(1); filter:brightness(1); }
.prototype-book-item.is-open .book-light { bottom:42%; width:18px; height:18px; animation:book-open-light 1.7s ease-out forwards; }
@keyframes book-open-light { 0% { opacity:.5; transform:translateX(-50%) scale(.5); } 58% { opacity:1; transform:translateX(-50%) scale(3.2); } 100% { opacity:.72; transform:translateX(-50%) scale(1.3); } }
.scripture-letters { display:grid; gap:16px; margin-top:18px; }
.scripture-letters[hidden] { display:none; }
.scripture-letter { position:relative; min-height:320px; opacity:0; transform:translateY(28px) scale(.97); animation:letter-reveal .85s ease forwards; filter:drop-shadow(0 18px 30px rgba(0,0,0,.42)); }
.scripture-letter:nth-child(2) { animation-delay:.18s; }.scripture-letter:nth-child(3) { animation-delay:.36s; }
@keyframes letter-reveal { to { opacity:1; transform:none; } }
.scripture-letter>img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.scripture-letter>div { position:relative; z-index:1; display:flex; min-height:320px; padding:54px 50px 48px; flex-direction:column; align-items:center; justify-content:center; color:#302315; }
.scripture-letter span { color:#7c5a27; font:800 9px/1.5 system-ui,sans-serif; letter-spacing:.08em; }
.scripture-letter h3 { margin:8px 0 13px; color:#3e2b15; font-size:24px; }
.scripture-letter blockquote { margin:0; font-size:17px; line-height:1.7; font-weight:700; }
.scripture-letter p { margin:14px 0 0; color:#5d4830; font:600 11px/1.65 system-ui,sans-serif; }
.scripture-letter section,.scripture-letter footer { margin-top:14px; padding-top:12px; border-top:1px solid rgba(91,63,30,.22); }
.scripture-letter section b,.scripture-letter footer b { color:#795526; font:800 9px/1.4 system-ui,sans-serif; letter-spacing:.08em; }
.result-screen .primary-action { margin-top:10px; text-decoration:none; }
.result-screen button.primary-action { background:transparent; color:var(--paper); }
html[lang="en"] h1,html[lang="en"] h2{letter-spacing:-.03em;word-break:normal;text-wrap:balance}
html[lang="en"] .timed-caption p{font-size:clamp(28px,7vw,45px);line-height:1.16}
html[lang="en"] .guide-dialogue h2,html[lang="en"] .question-story-panel h2{font-size:clamp(24px,5.8vw,36px);line-height:1.2}
html[lang="en"] .dialogue-options button,html[lang="en"] .question-options button{font-size:12px;line-height:1.45}
html[lang="en"] .direct-answer-toggle b{font-size:11px}
html[lang="en"] .story-menu small{line-height:1.35}

.story-status { position: fixed; z-index: 50; left: 50%; bottom: 18px; width: min(430px, calc(100% - 32px)); transform: translateX(-50%); pointer-events: none; color: var(--paper); background: rgba(5,8,13,.9); border: 1px solid rgba(215,165,67,.5); border-radius: 999px; padding: 9px 14px; text-align: center; font: 700 11px/1.45 system-ui,sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.story-status:empty { display: none; }
.video-skip{position:absolute;z-index:12;top:78px;right:18px;display:flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(3,6,11,.78);backdrop-filter:blur(10px);color:rgba(255,255,255,.82);font:700 10px/1 system-ui,sans-serif;letter-spacing:-.02em;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.24)}.video-skip:hover,.video-skip:focus-visible{border-color:#fff;background:rgba(3,6,11,.94);color:#fff;outline:0}.video-skip span{font-size:16px;line-height:1}.video-skip[hidden]{display:none}

@media (min-width: 760px) {
  body { padding: 20px 0; }
  .story-shell { min-height: calc(100svh - 40px); border-radius: 26px; }
  .story-screen, .media-screen video { min-height: calc(100svh - 40px); height: calc(100svh - 40px); }
}

@media (max-width: 430px) {
  .story-topbar { padding-inline:12px; }
  .story-topbar>a:first-child span { display:none; }
  .story-topbar div { gap:5px; }
  .story-topbar div span { display:none; }
  .story-topbar>div #sceneLabel { display:none; }
  .profile-fields { grid-template-columns:1fr; gap:0; }
  .living-guide { height:54%; }
  .guide-dialogue { margin-inline:16px; padding:15px; }
  .dialogue-options { margin-inline:16px; }
  .greeting-screen,.entry-talk-screen { padding-bottom:18px; }
  .entry-talk-screen .guide-dialogue { margin-inline:12px; padding:11px 12px; }
  .entry-talk-screen .guide-dialogue h2 { font-size:20px; }
  .entry-talk-screen .guide-dialogue blockquote { font-size:13px; }
  .entry-talk-screen .entry-options { margin-inline:12px; gap:6px; }
  .entry-talk-screen .entry-options button { min-height:44px; padding:7px 9px; font-size:11px; }
  .entry-follow-action { margin-inline:12px; }
  .entry-follow-action button { min-height:54px; padding:11px 14px; font-size:13px; }
  .question-guide { top:76px; left:12px; right:12px; grid-template-columns:104px 1fr; gap:10px; min-height:118px; }
  .question-guide img { width:104px; height:118px; }
  .question-guide p { font-size:13px; }
  .question-story-panel { padding-inline:15px; }
  .scripture-letter>div { padding-inline:38px; }
}

@media (max-width:360px) {
  .story-topbar { padding-inline:10px; gap:4px; grid-template-columns:auto 36px 36px 36px minmax(0,1fr); }
  .story-topbar>a:first-child { padding-inline:8px; }
  .story-topbar :is(.story-daily-share,.story-language-picker,.story-language-toggle,.story-home-shortcut) { width:36px; height:36px; }
  .story-topbar :is(.sound-toggle,.menu-toggle,.story-back) { width:36px; height:36px; flex-basis:36px; }
}

@media (max-height:560px) {
  .question-story-panel { height:48dvh; max-height:calc(100dvh - 160px); }
  .question-story-panel.is-expanded { height:calc(100dvh - 92px); max-height:calc(100dvh - 92px); }
  .question-guide { min-height:60px; grid-template-columns:52px 1fr; }
  .question-guide img { width:52px; height:64px; }
  .question-guide p { font-size:12px; }
  .question-story-panel:focus-within { max-height:calc(100dvh - 92px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration:.01ms!important; scroll-behavior: auto !important; }
}