:root { color-scheme: light; --ink: #50342b; --cream: #fff9ee; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; background: #e9dac7; color: var(--ink); }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { font-family: Georgia, 'Times New Roman', serif; }
button, input { font: inherit; }
#journey { height: 550svh; }
.viewport { position: sticky; top: 0; width: 100%; height: 100svh; height: 100dvh; overflow: hidden; isolation: isolate; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
.toggle-controls { position: absolute; right: 16px; top: max(16px,env(safe-area-inset-top)); z-index: 3; background: #fff8e9e8; box-shadow: 0 2px 14px #32221720; }
.brand { position: absolute; top: max(21px, env(safe-area-inset-top)); left: 24px; display: flex; flex-direction: column; gap: 6px; color: #fff8eb; text-shadow: 0 1px 8px #36281b90; pointer-events: none; }
.brand-name { font-size: 15px; letter-spacing: .28em; }
.study { font-family: system-ui,sans-serif; font-size: 9px; letter-spacing: .15em; }
.names { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); width: min(38vw,240px); text-align: center; pointer-events: none; text-shadow: 0 1px 14px #fff2d6; }
.names p, .ending p { font-family: system-ui,sans-serif; font-size: 9px; letter-spacing: .2em; }
h1 { margin: 10px 0; font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: .95; }
h1>span { display: block; }
h1 i { display: block; font-size: .48em; line-height: 1.4; color: #a45b4e; }
.names>span { display: block; width: 86%; margin: 12px auto 0; line-height: 1.5; font-style: italic; font-size: 13px; }
.scroll-hint { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); display: grid; justify-items: center; gap: 13px; padding: 13px 20px; border-radius: 40px; color: #fff9ee; background: #392a2160; backdrop-filter: blur(4px); pointer-events: none; font: 10px system-ui,sans-serif; letter-spacing: .18em; }
.hint-line { height: 30px; width: 1px; background: linear-gradient(transparent,#fff); animation: hint 1.6s ease-in-out infinite; }
.ending { position: absolute; top: 13%; left: 50%; transform: translateX(-50%); width: min(40vw,240px); text-align: center; color: #fff6df; text-shadow: 0 2px 12px #151827; opacity: 0; visibility: hidden; pointer-events: none; }
.ending h2 { font-weight: 400; font-size: clamp(24px, 4vw, 34px); line-height: 1.3; margin: 12px 0; }
.ending>span { font-style: italic; font-size: 13px; }






.controls { position: absolute; bottom: max(22px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(90vw, 480px); background: #fff9eeeF; border: 1px solid #fff9ee; box-shadow: 0 8px 35px #37251e25; padding: 14px 17px 10px; border-radius: 16px; display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.scene-label { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
#scene-number { font: 9px system-ui,sans-serif; letter-spacing: .16em; opacity: .65; }
#scene-name { font-size: 14px; }
.buttons { display: flex; gap: 6px; align-items: center; }
button { min-height: 40px; padding: 9px 12px; border: 1px solid #664a3630; border-radius: 22px; cursor: pointer; background: transparent; color: #50342b; font: 11px system-ui,sans-serif; }
#play { background: #4b6751; border-color: #4b6751; color: #fff9ee; }
button:focus-visible, input:focus-visible { outline: 3px solid #c66f54; outline-offset: 3px; }
#scrubber { grid-column: 1/-1; width: 100%; height: 18px; margin: 0; accent-color: #526e56; cursor: pointer; }
.progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #fff3; }
.progress span { display: block; width: 0; height: 100%; background: #efc989; }
.loading { position: absolute; inset: 0; margin: 0; background: #f7ebdb; display: grid; place-items: center; font-style: italic; z-index: 5; }
.no-script { position: fixed; inset: 0; padding: 40px; background: #f7ebdb; }
@keyframes hint { 0%,100% { transform: translateY(-3px); opacity: .5; } 50% { transform: translateY(3px); opacity: 1; } }
@media (max-width: 600px) { .brand { left: 17px; top: max(17px,env(safe-area-inset-top)); } .brand-name { font-size: 12px; } .study { font-size: 8px; } .names { top: 14%; width: 37vw; } .names p { font-size: 7px; letter-spacing: .10em; } .names>span { font-size: 11px; } .ending { width: 42vw; top: 16%; } .ending h2 { font-size: 23px; } .ending p { font-size: 7px; } .ending>span { font-size: 10px; } .controls { padding: 11px 12px 8px; } .scroll-hint { bottom: 14%; font-size: 8px; letter-spacing: .10em; white-space: nowrap; } .toggle-controls { font-size: 9px; padding: 7px 10px; min-height: 34px; } }
@media (prefers-reduced-motion: reduce) { .hint-line { animation: none; } }

.names { width: min(30vw,210px); }
h1 { font-size: clamp(30px,4vw,48px); }
h1>span,h1 i { display:block; }

.family-info { position:absolute; inset:0; pointer-events:none; color:#fff3d9; text-align:center; text-shadow:0 2px 12px #071329; }
.family-info>h2 { position:absolute; top:20%; left:50%; transform:translateX(-50%); width:min(58vw,900px); margin:0; font-size:clamp(20px,1.8vw,28px); line-height:1.3; font-weight:400; }
.family-names { position:absolute; left:50%; top:29%; width:min(46vw,720px); transform:translateX(-50%); display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.family-names article { opacity:0; min-width:0; }
.family-names h3 { margin:0 0 14px; font-size:clamp(36px,4.4vw,66px); line-height:1.1; font-weight:400; }
.family-names .relation { margin:0 0 12px; font-size:clamp(16px,1.6vw,23px); }
.parents { display:grid; gap:7px; }
.parents p { margin:0; font-size:clamp(16px,1.6vw,24px); line-height:1.35; overflow-wrap:break-word; }
.parents>span { font-size:clamp(15px,1.5vw,21px); line-height:1; color:#e7c58b; }
.family-mobile>h2 { top:12%; width:90%; font-size:19px; }
.family-mobile .family-names { top:51%; width:88%; grid-template-columns:1fr; gap:22px; }
.family-mobile .family-names h3 { font-size:30px; margin-bottom:5px; }
.family-mobile .family-names .relation { font-size:14px; margin-bottom:7px; }
.family-mobile .parents { gap:3px; }
.family-mobile .parents p { font-size:16px; line-height:1.3; }
.family-mobile .parents>span { font-size:14px; }

#journey { height:850svh; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.chapter-status { position:absolute; left:50%; bottom:18%; transform:translateX(-50%); width:min(85vw,420px); padding:16px 22px; border-radius:18px; text-align:center; background:#fff4dfef; font-size:16px; box-shadow:0 8px 30px #20170f30; }

.music-toggle { position: fixed; z-index: 20; top: max(60px, calc(env(safe-area-inset-top) + 44px)); right: 16px; min-height: 40px; padding: 10px 14px; color: #174f42; background: #fff8e9f0; border: 1px solid #b28c4f66; box-shadow: 0 2px 14px #32221720; }
.music-toggle[aria-pressed="true"] { background: #174f42; color: #fff8e9; }
@media (max-width:600px) { .music-toggle { font-size: 10px; min-height: 36px; padding: 9px 12px; } }

/* Public demo overlay. The CTA floats above the painting, without a dock. */
#toggle-controls, #preview-controls { display:none !important; }
.invitation-purchase { position:fixed; z-index:25; left:16px; bottom:max(16px,env(safe-area-inset-bottom)); pointer-events:none; }
.invitation-buy { display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 15px; border:1px solid #b49b6f; border-radius:28px; background:#fff8e9f5; color:#174f42; box-shadow:0 3px 14px #1c302137; text-decoration:none; font:500 12px system-ui,sans-serif; white-space:nowrap; pointer-events:auto; }
.invitation-buy strong { font-size:12px; font-weight:700; border-left:1px solid #174f4255; padding-left:9px; }
.invitation-buy:focus-visible { outline:3px solid #bd7348; outline-offset:3px; }
.invitation-watermark-ghost { position:fixed; z-index:8; top:54%; left:50%; transform:translate(-50%,-50%) rotate(-12deg); width:min(66vw,330px); height:auto; opacity:.28; pointer-events:none; user-select:none; filter:drop-shadow(0 0 2px #fff7e7); }
.music-toggle { top:max(16px,env(safe-area-inset-top)); }
@media(max-width:600px) { .invitation-purchase {left:10px;bottom:max(10px,env(safe-area-inset-bottom));} .invitation-buy {font-size:10px;padding:9px 11px;gap:7px;} .invitation-buy strong {font-size:10px;padding-left:7px;} }
@media(max-width:600px) { .demo-presentation #courtyard-entry .entry-continue {bottom:74px;} }

/* The old yellow line measured only the cinematic chapter, not the full invitation. */
.progress { display: none !important; }
.keep-scrolling { position: absolute; right: 22px; bottom: 20px; z-index: 24; margin: 0; padding: 9px 12px; border: 1px solid #fff9; border-radius: 10px; background: rgb(255 248 233 / 66%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: #174f42; box-shadow: 0 1px 6px #173e3426; font: 600 13px/1.3 system-ui,sans-serif; letter-spacing: .01em; pointer-events: none; box-sizing: border-box; }
.keep-scrolling[hidden] { display: none; }
@media (max-width: 600px) { .keep-scrolling { left: auto; right: 10px; bottom: max(16px,calc(env(safe-area-inset-bottom) + 6px)); transform: none; max-width: calc(100% - 210px); white-space: nowrap; font-size: 12.5px; padding: 8px 10px; } }
@media (max-width: 360px) { .keep-scrolling { font-size: 11px; padding: 8px 4px; } }