#opening{position:fixed;inset:0;z-index:100;background:#020304;color:#d7d2ca;overflow:hidden;font-family:"Microsoft YaHei",sans-serif}
#opening[hidden]{display:none}#opening canvas{position:absolute;inset:0;width:100%;height:100%}
.opening-skip{position:absolute;right:30px;bottom:24px;border:0;background:none;color:#9c978f;font:11px sans-serif;letter-spacing:2px;cursor:pointer;z-index:6;padding:14px}
.opening-flash{position:absolute;inset:0;background:#fff8e9;opacity:0;pointer-events:none;z-index:4}
.opening-letter-prologue{position:absolute;inset:0;z-index:7;pointer-events:none;perspective:1100px}
.opening-letter-prologue[hidden]{display:none}
.opening-letter{position:absolute;left:50%;bottom:-5vh;width:min(520px,62vw);min-height:390px;margin:0;padding:58px 58px 94px;color:#30271f;background:linear-gradient(102deg,#cfc2aa 0%,#e4dac7 48%,#c9b99f 100%);border:1px solid #8f8069;box-shadow:0 28px 80px #000c,0 0 55px #ffc76f17;transform:translateX(-50%) rotateX(7deg) rotateZ(-.7deg);transform-origin:50% 100%;font:15px/1.65 Georgia,"Times New Roman",serif;letter-spacing:.025em;opacity:1}
.opening-letter:before,.opening-letter:after{content:"";position:absolute;bottom:24px;width:42px;height:76px;background:linear-gradient(90deg,#8f806c,#c7b9a1 60%,#897965);border:1px solid #574a3b;box-shadow:0 9px 20px #0005}
.opening-letter:before{left:-19px;transform:rotate(-11deg);clip-path:polygon(16% 0,86% 8%,100% 100%,0 92%)}
.opening-letter:after{right:-19px;transform:rotate(11deg);clip-path:polygon(14% 8%,84% 0,100% 92%,0 100%)}
.opening-letter-prologue.is-reading .opening-letter{animation:letter-lift .9s cubic-bezier(.2,.75,.2,1) both}
.opening-letter-prologue.is-settled .opening-letter{animation:none;opacity:1;transform:translateX(-50%) rotateX(7deg) rotateZ(-.7deg)}
.letter-line{margin:0 0 20px;opacity:0;transform:translateY(7px);text-shadow:0 1px #fff5}
.letter-pause{margin-block:25px;letter-spacing:.35em}
.letter-signature{margin-top:35px;text-align:right;font-style:italic}
.opening-letter-prologue.is-reading .letter-line{animation:letter-line-in 1.05s ease var(--line-delay) forwards}
.opening-letter-prompt{position:absolute;left:50%;bottom:24px;transform:translate(-50%,8px);border:0;background:#080604b8;color:#d9c3a0;padding:11px 16px;font:10px/1 Arial,sans-serif;letter-spacing:2.5px;white-space:nowrap;opacity:0;pointer-events:none;text-shadow:0 1px 10px #000;transition:opacity .8s,transform .8s}
.opening-letter-prompt kbd{display:inline-grid;place-items:center;min-width:23px;height:23px;margin:0 4px;border:1px solid #d9c3a0;border-bottom-width:2px;border-radius:2px;background:#1a120a;color:#f2dec0;font:11px/1 Arial,sans-serif}
.opening-letter-prologue.is-ready .opening-letter-prompt{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.opening-letter-prologue.is-ready .letter-line{animation:none;opacity:1;transform:translateY(0)}
.opening-letter-prologue.is-ready .opening-letter-prompt{transition:none}
.opening-letter-prologue.is-lowering .opening-letter{animation:none;opacity:0;transform:translate(-50%,46%) rotateX(19deg) scale(.72);transition:opacity .9s ease,transform 1s cubic-bezier(.35,0,.6,1)}
.opening-letter-prologue.is-lowering .opening-letter-prompt{opacity:0;transform:translate(-50%,8px);pointer-events:none}
#opening[data-phase="prologue"] .opening-skip,#opening[data-phase="letter-lowering"] .opening-skip{display:none}
@keyframes letter-lift{from{opacity:0;transform:translate(-50%,18%) rotateX(14deg) rotateZ(-.7deg) scale(.94)}to{opacity:1;transform:translateX(-50%) rotateX(7deg) rotateZ(-.7deg)}}
@keyframes letter-line-in{to{opacity:1;transform:translateY(0)}}
.game-light-fade{position:fixed;inset:0;z-index:9999;background:#020304;opacity:1;pointer-events:none;transition:opacity 1.45s cubic-bezier(.22,.75,.25,1)}
.game-light-fade.is-revealing{opacity:0}
.title-background{position:absolute;inset:0;background:radial-gradient(ellipse at 18% 35%,#96989355,transparent 45%),linear-gradient(103deg,#484b49 0%,#232526 24%,#17191c 52%,#0b0d0f 100%);opacity:0;transition:opacity 1.8s ease,transform 8s ease;transform:scale(1.035)}
.title-background:before{content:"";position:absolute;inset:82% 0 0;background:repeating-linear-gradient(0deg,#d3dbd90a 0px,#090b0c05 3px,#c6cfcc0b 4px,transparent 8px),linear-gradient(90deg,#e0e4df30,transparent 36%,#ffffff09 82%,transparent);filter:blur(2px)}
.title-background canvas{z-index:1}.title-background:after{z-index:2;pointer-events:none}
.title-background:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0002,#0005 38%,#0008 52%,#0001),linear-gradient(0deg,#0008,transparent 45%)}
.title-content{position:absolute;inset:10% auto 6% 7%;width:33%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;opacity:0;transform:translateY(18px);pointer-events:none;text-shadow:0 2px 20px #0008}
.title-content h1{width:100%;margin:0 0 24px;line-height:0;filter:drop-shadow(0 4px 18px #0005)}
.title-portrait{position:absolute;right:12%;bottom:0;width:53%;height:86%;z-index:2;opacity:0;transform:translate(28px,16px);pointer-events:none;filter:drop-shadow(-20px 8px 24px #0005)}
#opening.is-menu .title-portrait.is-ready{opacity:1;transform:translate(0,0);transition:opacity 1.8s ease 1.9s,transform 2.1s ease 1.9s}
.title-content h1 svg{display:block;width:100%;height:auto;overflow:visible}
.title-content .subtitle{display:block;width:clamp(112px,11vw,165px);margin-bottom:30px;line-height:0;filter:drop-shadow(0 2px 4px #0008)}
.title-content .subtitle svg{display:block;width:100%;height:auto}
.title-nav{display:flex;flex-direction:column;align-items:center;gap:10px}.title-nav button{color:#ddd;font:12px "Segoe UI",Arial,sans-serif;letter-spacing:3px;white-space:nowrap;border:0;background:transparent;padding:12px 26px;cursor:pointer;transition:color .2s,transform .2s}
.title-nav button:first-child{color:#fff;border-bottom:1px solid #ffffff50}.title-nav button:hover{color:white;transform:translateX(4px)}.title-nav button:focus-visible{outline:1px solid white;outline-offset:3px}
.title-credit{position:absolute;bottom:28px;left:0;right:0;text-align:center;font:9px sans-serif;letter-spacing:3px;color:#aaa}
#opening.is-menu .title-background{opacity:1;transform:scale(1)}#opening.is-menu .title-content{opacity:1;transform:translateY(0);transition:opacity 1.4s ease 2.5s,transform 1.6s ease 2.5s;pointer-events:auto}
#opening.is-menu .title-background:after{background:linear-gradient(90deg,#0008,#0006 36%,#0003 60%,#0002),linear-gradient(0deg,#0009,transparent 45%)}
#opening.is-menu .opening-skip{display:none}
.opening-settings{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:#020304b8;backdrop-filter:blur(9px)}
.opening-settings[hidden]{display:none}
.opening-settings section{width:min(520px,calc(100vw - 38px));padding:34px 38px 30px;border:1px solid #8b755233;background:linear-gradient(145deg,#15120ee8,#080706f2);box-shadow:0 26px 80px #000;color:#d6c8b0}
.opening-settings h2{margin:0 0 30px;font:400 18px/1 Georgia,serif;letter-spacing:6px;text-align:center;color:#ead9ba}
.opening-settings label{display:grid;grid-template-columns:190px minmax(120px,1fr) 48px;align-items:center;gap:14px;min-height:48px;border-top:1px solid #ffffff0d;font:9px/1.4 Arial,sans-serif;letter-spacing:2px}
.opening-settings label:last-of-type{grid-template-columns:190px 1fr}
.opening-settings input{width:100%;accent-color:#c6a66c}.opening-settings output{text-align:right;color:#9f8b6c;font:10px monospace;letter-spacing:0}
.opening-settings select{width:100%;padding:8px 10px;border:1px solid #7a674844;background:#0b0907;color:#d6c8b0;font:10px Arial,sans-serif;letter-spacing:2px}
.opening-settings [data-settings-close]{display:block;margin:28px auto 0;padding:10px 24px;border:0;border-bottom:1px solid #a88d62;color:#d9c6a4;background:transparent;font:10px Arial,sans-serif;letter-spacing:3px}
.opening-settings [data-settings-close]:hover{color:#fff0d1}
/* Shared manga-paper UI: hard ink, imperfect panels and quiet screentone. */
#opening{--manga-paper:#e2ddd2;--manga-paper-dark:#c7c0b3;--manga-ink:#191918;--manga-fade:#68645e}
.opening-settings{background:#020304d9;backdrop-filter:blur(4px) grayscale(.8)}
.opening-settings section{position:relative;overflow:hidden;width:min(540px,calc(100vw - 38px));padding:38px 42px 34px;border:2px solid var(--manga-ink);color:var(--manga-ink);background-color:var(--manga-paper);background-image:linear-gradient(96deg,#fff3,transparent 32%,#0000000a 75%,#fff2),repeating-linear-gradient(0deg,transparent 0 10px,#17171708 11px 12px);box-shadow:7px 8px 0 #090909,10px 11px 0 var(--manga-paper-dark);clip-path:polygon(.8% 0,100% 1.2%,99.1% 99.4%,0 98.5%)}
.opening-settings section:before{content:"";position:absolute;right:-30px;top:-30px;width:190px;height:155px;opacity:.18;background:radial-gradient(circle,#111 0 1px,transparent 1.3px);background-size:6px 6px;transform:rotate(-8deg);pointer-events:none}
.opening-settings section:after{content:"";position:absolute;inset:9px 10px 10px 8px;border:1px solid #1c1b19;clip-path:polygon(0 1%,99% 0,100% 98%,1% 100%);pointer-events:none}
.opening-settings section>*{position:relative;z-index:1}
.opening-settings h2{margin-bottom:31px;color:var(--manga-ink);font:700 20px/1 Georgia,"Times New Roman",serif;letter-spacing:7px;text-shadow:2px 2px 0 #fff8}
.opening-settings label{grid-template-columns:190px minmax(120px,1fr) 48px;min-height:51px;border-top:2px solid #252421;color:var(--manga-ink);font-weight:700}
.opening-settings output{color:var(--manga-ink);font-weight:700}
.opening-settings input[type="range"]{appearance:none;height:18px;background:transparent;accent-color:var(--manga-ink)}
.opening-settings input[type="range"]::-webkit-slider-runnable-track{height:5px;border:1px solid var(--manga-ink);background:linear-gradient(90deg,#242321,#242321) 0/var(--range-fill,50%) 100% no-repeat,#aaa49a;box-shadow:2px 2px 0 #fff9}
.opening-settings input[type="range"]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;margin-top:-7px;border:2px solid var(--manga-ink);border-radius:50%;background:var(--manga-paper);box-shadow:2px 2px 0 var(--manga-ink)}
.opening-settings input[type="range"]::-moz-range-track{height:5px;border:1px solid var(--manga-ink);background:#aaa49a}.opening-settings input[type="range"]::-moz-range-thumb{width:15px;height:15px;border:2px solid var(--manga-ink);border-radius:50%;background:var(--manga-paper);box-shadow:2px 2px 0 var(--manga-ink)}
.opening-settings select{border:2px solid var(--manga-ink);background:var(--manga-paper);color:var(--manga-ink);font-weight:700;box-shadow:3px 3px 0 var(--manga-ink)}
.opening-settings [data-settings-close]{margin-top:30px;padding:10px 28px;border:2px solid var(--manga-ink);background:var(--manga-ink);color:var(--manga-paper);font-weight:700;box-shadow:4px 4px 0 #8c877e;transform:rotate(-.35deg)}
.opening-settings [data-settings-close]:hover{color:#fff;background:#35332f;transform:rotate(.25deg) translateY(-1px)}
.title-nav button{position:relative;text-shadow:2px 2px 0 #000;transform:rotate(-.15deg)}
.title-nav button:before{content:"▸";position:absolute;left:6px;opacity:0;color:#eee;transform:translateX(-7px);transition:.2s}
.title-nav button:hover:before,.title-nav button:focus-visible:before{opacity:1;transform:translateX(0)}
.title-nav button:hover{color:#fff;background:#e5e0d014;transform:rotate(.2deg) translateX(5px)}
.opening-letter-prompt{border:2px solid #171716;background:var(--manga-paper);color:var(--manga-ink);box-shadow:4px 4px 0 #111;clip-path:polygon(1% 0,100% 5%,98% 100%,0 94%);text-shadow:none;font-weight:700}
.opening-letter-prompt kbd{border:2px solid var(--manga-ink);background:var(--manga-ink);color:var(--manga-paper)}
#opening-gallery{background:var(--manga-paper);color:var(--manga-ink);border:2px solid var(--manga-ink);box-shadow:8px 8px 0 #111;clip-path:polygon(.5% 0,100% .8%,99.4% 100%,0 99%)}
#opening-gallery button{color:var(--manga-ink)}#opening-gallery::backdrop{background:#000d;backdrop-filter:blur(3px) grayscale(1)}
.opening-grid img{background:#bbb5a9;border:2px solid var(--manga-ink);filter:grayscale(1) contrast(1.08)}.opening-grid figcaption{color:var(--manga-ink);font-weight:700}
.opening-error{position:absolute;top:24px;left:24px;right:24px;font-size:12px;color:#777;z-index:8;text-align:center}
#opening-gallery{width:min(850px,92vw);max-height:85vh;background:#161819;color:white;border:1px solid #555;padding:26px}
#opening-gallery::backdrop{background:#000b;backdrop-filter:blur(8px)}#opening-gallery h2{font:18px serif;letter-spacing:4px}#opening-gallery button{float:right;color:white;border:0;background:none;font-size:24px;cursor:pointer}.opening-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.opening-grid figure{margin:0}.opening-grid img{width:100%;height:150px;object-fit:contain;background:#222}.opening-grid figcaption{font-size:10px;text-align:center;color:#aaa;margin-top:8px}
@media(max-width:600px){.opening-settings section{padding:28px 22px 24px}.opening-settings label,.opening-settings label:last-of-type{grid-template-columns:1fr;gap:8px;padding:12px 0}.opening-settings output{text-align:left}.opening-letter{bottom:-2vh;width:calc(100vw - 34px);min-height:360px;padding:42px 32px 78px;font-size:13px;line-height:1.55}.letter-line{margin-bottom:16px}.letter-signature{margin-top:25px}.opening-letter-prompt{bottom:15px;font-size:9px;letter-spacing:1.5px}.title-background{background-position:49% center}.title-content{left:5%;width:43%;inset-block:16% 4%}.title-content h1{width:100%}.title-content .subtitle{font-size:10px;letter-spacing:6px;margin-bottom:30px}.title-nav button{font-size:11px;letter-spacing:2px;padding:12px 14px}.title-portrait{right:-4%;width:70%;height:80%}.title-credit{font-size:8px;letter-spacing:1px}.opening-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.title-background,#opening.is-menu .title-content,#opening.is-menu .title-portrait.is-ready{transition:none;transform:none}.opening-letter-prologue.is-reading .opening-letter,.opening-letter-prologue.is-reading .letter-line{animation:none;opacity:1;transform:none}.opening-letter-prologue.is-reading .opening-letter{transform:translateX(-50%)}}

/* Gallery-style UI: translucent black panels with quiet white keylines. */
.opening-settings{background:#0009;backdrop-filter:blur(8px) grayscale(.65)}
.opening-settings section{overflow:visible;border:1px solid #ffffff80;color:#eee;background:#070707dc;background-image:linear-gradient(120deg,#ffffff08,transparent 38%,#ffffff04);box-shadow:0 18px 55px #000c;clip-path:none}
.opening-settings section:before{display:none}.opening-settings section:after{inset:8px;border:1px solid #ffffff18;clip-path:none}
.opening-settings h2{color:#f2f2f0;text-shadow:none;font-weight:400}
.opening-settings label{border-top:1px solid #ffffff24;color:#dededb;font-weight:500}
.opening-settings output{color:#fff;font-weight:500}
.opening-settings input[type="range"]::-webkit-slider-runnable-track{border:1px solid #ffffff70;background:linear-gradient(90deg,#ededeb,#ededeb) 0/var(--range-fill,50%) 100% no-repeat,#ffffff20;box-shadow:none}
.opening-settings input[type="range"]::-webkit-slider-thumb{border:1px solid #fff;background:#111;box-shadow:0 0 0 2px #000,0 0 0 3px #ffffff50}
.opening-settings input[type="range"]::-moz-range-track{border:1px solid #ffffff70;background:#ffffff20}.opening-settings input[type="range"]::-moz-range-thumb{border:1px solid #fff;background:#111;box-shadow:0 0 0 2px #000}
.opening-settings select{border:1px solid #ffffff70;background:#080808;color:#eee;font-weight:500;box-shadow:none}
.opening-settings [data-settings-close]{border:1px solid #ffffff80;background:#0a0a0ae6;color:#eee;font-weight:500;box-shadow:none;transform:none}
.opening-settings [data-settings-close]:hover{color:#050505;background:#eee;transform:none}
#opening-gallery{background:#070707e8;color:#eee;border:1px solid #ffffff80;box-shadow:0 18px 55px #000c;clip-path:none;backdrop-filter:blur(10px)}
#opening-gallery button{color:#eee}#opening-gallery::backdrop{background:#000b;backdrop-filter:blur(7px) grayscale(.7)}
#opening-gallery h2{color:#eee}.opening-grid img{background:#111;border:1px solid #ffffff55;filter:grayscale(1) contrast(1.08)}.opening-grid figcaption{color:#bbb;font-weight:400}
.opening-settings .settings-actions{display:flex;justify-content:center;gap:12px;margin-top:30px}
.opening-settings .settings-actions button{display:block;margin:0;padding:11px 25px;border:1px solid #ffffff80;background:#090909e8;color:#eee;font:500 10px/1 Arial,sans-serif;letter-spacing:3px;box-shadow:none;transform:none}
.opening-settings .settings-actions button:hover,.opening-settings .settings-actions button:focus-visible{color:#050505;background:#eee;outline:none}
.opening-settings [data-settings-reset]{opacity:.76}.opening-settings [data-settings-reset]:hover,.opening-settings [data-settings-reset]:focus-visible{opacity:1}

/* Start Game chapter 01: transparent manga artwork, independently animated bubbles and type. */
.opening-story{position:absolute;inset:0;z-index:20;display:grid;place-items:center;overflow:hidden;background:#000;color:#111;cursor:pointer;isolation:isolate}
.opening-story[hidden]{display:none}
#opening[data-phase="story"] .opening-skip{display:none}
.story-frame{position:relative;width:min(80vw,173.4vh,1360px);aspect-ratio:2.55/1;container-type:inline-size;border:3px solid #ededeb;box-shadow:0 0 0 2px #111,0 22px 70px #000;overflow:hidden}
.story-frame:after{content:"";position:absolute;inset:3px;border:2px solid #111;pointer-events:none;z-index:4}
.story-art{position:absolute;inset:0;background:url('./assets/story-fantasy-background-transparent.png') center/cover no-repeat;opacity:0;transform:scale(1.035);filter:grayscale(1) contrast(1.04);will-change:opacity,transform}
.opening-story.is-playing .story-art{animation:story-art-in 1.25s cubic-bezier(.2,.72,.22,1) forwards}
.story-bubble{position:absolute;display:grid;place-items:center;box-sizing:border-box;opacity:0;transform:scale(.82) translateY(14px);background:radial-gradient(circle at 38% 30%,#fff 0 42%,#f3f3f1 78%,#ddd 100%);border:clamp(2px,.25cqw,5px) solid #111;box-shadow:clamp(4px,.55cqw,10px) clamp(4px,.55cqw,10px) 0 #1118;filter:drop-shadow(0 10px 22px #0007);z-index:2}
.story-bubble p{position:relative;z-index:2;margin:0;padding:8%;white-space:pre-line;text-align:center;font:italic clamp(10px,2.25cqw,31px)/1.25 Georgia,"Times New Roman",serif;letter-spacing:-.02em}
.story-bubble p:not(:empty):after{content:"";display:inline-block;width:1px;height:.9em;margin-left:3px;background:#111;vertical-align:-.06em;animation:story-caret .68s steps(1) infinite}
.opening-story.is-ready .story-bubble p:after{display:none}
.story-bubble-one{left:27%;top:13%;width:31%;height:48%;border-radius:53% 48% 51% 46%/50% 54% 47% 51%}
.story-bubble-two{left:48%;top:44%;width:27%;height:42%;border-radius:48% 54% 48% 53%/49% 51% 54% 46%;z-index:3}
.story-bubble.is-visible{animation:story-bubble-in .58s cubic-bezier(.16,.84,.22,1.15) forwards}
.story-girl-background{position:absolute;inset:-3%;z-index:0;background:url('./assets/story-girl-background.png') center/cover no-repeat;opacity:0;transform:translate(var(--story-bg-x,0),var(--story-bg-y,0)) scale(1.08);transition:transform .7s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity}
.opening-story.is-playing .story-girl-background{animation:story-girl-bg-in 1.35s ease-out forwards}
.story-girl-parallax{position:absolute;inset:0;z-index:1;transform:translate(var(--story-girl-x,0),var(--story-girl-y,0));transition:transform .55s cubic-bezier(.2,.7,.2,1);will-change:transform}
.story-girl-rig{position:absolute;inset:0;opacity:0;transform:translateY(5%) scale(.965);transform-origin:50% 78%;will-change:transform,opacity}
.opening-story.is-playing .story-girl-rig{animation:story-girl-enter 1.35s cubic-bezier(.16,.78,.2,1) .2s forwards}
.story-girl-body,.story-girl-hair{position:absolute;left:50%;bottom:-8%;height:110%;width:auto;max-width:none;transform:translateX(-50%);transform-origin:50% 75%;filter:grayscale(1) contrast(1.04);user-select:none;-webkit-user-drag:none}
.story-girl-body{animation:story-girl-breathe 5.2s ease-in-out 1.55s infinite}
.story-girl-hair{opacity:.72;clip-path:polygon(0 0,100% 0,100% 69%,75% 74%,52% 67%,28% 75%,0 68%);transform-origin:52% 17%;animation:story-girl-hair 5.2s ease-in-out 1.55s infinite}
.story-girl-dialogue{position:absolute;z-index:3;display:grid;place-items:center;box-sizing:border-box;opacity:0;transform:scale(.84) translateY(12px);background:radial-gradient(circle at 40% 30%,#fff 0 45%,#f4f4f2 82%,#ddd 100%);border:clamp(2px,.22cqw,4px) solid #111;box-shadow:clamp(3px,.4cqw,7px) clamp(3px,.4cqw,7px) 0 #1118;filter:drop-shadow(0 10px 20px #0008)}
.story-girl-dialogue p{margin:0;padding:12%;white-space:pre-line;text-align:center;font:clamp(11px,2.35cqw,32px)/1.42 "Segoe Print","Comic Sans MS",cursive;color:#111}
.story-girl-dialogue p:not(:empty):after{content:"";display:inline-block;width:1px;height:.9em;margin-left:3px;background:#111;vertical-align:-.06em;animation:story-caret .68s steps(1) infinite}.opening-story.is-ready .story-girl-dialogue p:after{display:none}
.story-girl-dialogue-left{left:2.5%;top:18%;width:22%;height:61%;border-radius:49% 52% 48% 51%/47% 51% 50% 53%}
.story-girl-dialogue-left:after{content:"";position:absolute;right:-12%;top:47%;width:16%;height:17%;background:#f5f5f3;clip-path:polygon(0 0,100% 50%,0 100%)}
.story-girl-dialogue-right{right:2.5%;top:9%;width:21%;height:61%;border-radius:50% 47% 52% 48%/49% 53% 47% 51%}
.story-girl-dialogue-right:before{content:"";position:absolute;left:-12%;top:50%;width:16%;height:17%;background:#f5f5f3;clip-path:polygon(100% 0,0 50%,100% 100%)}
.story-girl-dialogue.is-visible{animation:story-bubble-in .58s cubic-bezier(.16,.84,.22,1.15) forwards}
.story-memory-frame{width:min(90vw,113.16vh,1450px);height:auto;aspect-ratio:1.38;background:#000;border:0;box-shadow:none;overflow:hidden}.story-memory-frame:after{display:none}
.story-memory-panel{position:absolute;z-index:1;overflow:hidden;opacity:0;background:#111;border:clamp(2px,.3cqw,5px) solid #111;box-shadow:0 8px 18px #0005;transform-origin:50% 50%;will-change:opacity,transform}.story-memory-panel.is-visible{animation:story-memory-panel-in .78s cubic-bezier(.16,.82,.22,1) forwards}
.story-memory-p1{--panel-tilt:-1.35deg;left:1.2%;top:10.5%;width:32%;height:80%;transform:translateY(4%) rotate(-1.35deg) scale(.96)}.story-memory-p2{--panel-tilt:.65deg;left:34%;top:2%;width:39%;height:95%;z-index:2;transform:translateY(4%) rotate(.65deg) scale(.96)}.story-memory-p3{--panel-tilt:-.55deg;right:1%;top:4%;width:27%;height:92%;z-index:1;transform:translateY(4%) rotate(-.55deg) scale(.96)}
.story-memory-bg{position:absolute;inset:-3%;z-index:0;opacity:1;background-position:center;background-size:cover;background-repeat:no-repeat;transform:translate(var(--story-bg-x,0),var(--story-bg-y,0)) scale(1.09);transition:transform .7s cubic-bezier(.2,.7,.2,1);will-change:transform}
.story-memory-p1 .story-memory-bg{background-image:url('./assets/story-memory-p1-bg.png');background-position:48% center}.story-memory-p2 .story-memory-bg{background-image:url('./assets/story-girl-background.png');background-position:center}.story-memory-p3 .story-memory-bg{background-image:url('./assets/story-memory-p3-bg.png');background-position:53% center}
.story-memory-parallax{position:absolute;inset:0;z-index:1;opacity:1;transform:translate(var(--story-girl-x,0),var(--story-girl-y,0));transition:transform .55s cubic-bezier(.2,.7,.2,1);will-change:transform}
.story-memory-parallax img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none;filter:grayscale(1) contrast(1.03)}
.story-memory-page{left:88%;bottom:-1%;width:auto;height:101%;animation:story-memory-page-float 5.6s ease-in-out 1.5s infinite;transform:translateX(-50%);transform-origin:46% 56%}
.story-memory-girl-close{left:50%;bottom:-1%;height:104%;transform:translateX(-50%);animation:story-memory-close-breathe 5.2s ease-in-out 1.5s infinite;transform-origin:50% 74%}
.story-memory-girl-back{left:50%;bottom:-1%;height:101%;transform:translateX(-50%);animation:story-memory-back-sway 6s ease-in-out 1.5s infinite;transform-origin:51% 78%}
.story-memory-dialogue{position:absolute;z-index:3;display:grid;place-items:center;box-sizing:border-box;opacity:0;transform:scale(.84) translateY(12px);background:radial-gradient(circle at 40% 30%,#fff 0 45%,#f4f4f2 82%,#ddd 100%);border:clamp(2px,.22cqw,4px) solid #111;box-shadow:clamp(3px,.4cqw,7px) clamp(3px,.4cqw,7px) 0 #1118;filter:drop-shadow(0 10px 20px #0008)}
.story-memory-dialogue p{margin:0;padding:9%;white-space:pre-line;text-align:center;font:clamp(10px,1.93cqw,28px)/1.28 "Segoe Print","Comic Sans MS",cursive;color:#111}.story-memory-dialogue p:not(:empty):after{content:"";display:inline-block;width:1px;height:.9em;margin-left:3px;background:#111;vertical-align:-.06em;animation:story-caret .68s steps(1) infinite}.opening-story.is-ready .story-memory-dialogue p:after{display:none}
.story-memory-dialogue.is-visible{animation:story-bubble-in .58s cubic-bezier(.16,.84,.22,1.15) forwards}
.story-memory-dialogue-p1{left:26%;top:39%;width:27%;height:38%;z-index:5;border-radius:51% 47% 52% 48%/49% 53% 47% 51%}.story-memory-dialogue-p1:before{content:"";position:absolute;left:-9%;top:52%;width:13%;height:17%;background:#f5f5f3;clip-path:polygon(100% 0,0 50%,100% 100%)}
.story-memory-dialogue-p2{left:66%;top:15%;width:19%;height:32%;z-index:6;border-radius:50% 47% 52% 48%/49% 53% 47% 51%}.story-memory-dialogue-p2:before{display:none}
.story-memory-dialogue-p3{left:65%;top:51%;width:23%;height:34%;z-index:6;border-radius:49% 52% 48% 51%/47% 51% 50% 53%}.story-memory-dialogue-p3:after{display:none}
.story-continue{position:absolute;left:50%;bottom:3.5%;z-index:3;transform:translateX(-50%);padding:9px 15px;border:1px solid #ffffff70;background:#050505b8;color:#eee;font:9px/1 Arial,sans-serif;letter-spacing:3px;opacity:0;transition:opacity .5s,color .2s,background .2s;cursor:pointer}
.story-continue:not(:disabled){opacity:.78}.story-continue:not(:disabled):hover,.story-continue:not(:disabled):focus-visible{opacity:1;color:#050505;background:#eee;outline:none}.story-continue kbd{font:inherit}
@keyframes story-art-in{0%{opacity:0;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes story-bubble-in{0%{opacity:0;transform:scale(.82) translateY(14px)}65%{opacity:1;transform:scale(1.025) translateY(-2px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes story-girl-bg-in{0%{opacity:0;transform:translate(var(--story-bg-x,0),var(--story-bg-y,0)) scale(1.14)}100%{opacity:1;transform:translate(var(--story-bg-x,0),var(--story-bg-y,0)) scale(1.08)}}
@keyframes story-girl-enter{0%{opacity:0;transform:translateY(6%) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes story-girl-breathe{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(-.45%) scale(1.006)}}
@keyframes story-girl-hair{0%,100%{transform:translateX(-50%) rotate(-.08deg) translateY(0)}48%{transform:translateX(-50%) rotate(.38deg) translateY(-.25%)}55%{transform:translateX(-50%) rotate(.26deg) translateY(-.15%)}}
@keyframes story-memory-panel-in{0%{opacity:0;transform:translateY(5%) rotate(0) scale(.95)}70%{opacity:1;transform:translateY(-.5%) rotate(var(--panel-tilt,0deg)) scale(1.01)}100%{opacity:1;transform:translateY(0) rotate(var(--panel-tilt,0deg)) scale(1)}}
@keyframes story-memory-bg-in{0%{opacity:0;transform:translate(var(--story-bg-x,0),var(--story-bg-y,0)) scale(1.15)}100%{opacity:1;transform:translate(var(--story-bg-x,0),var(--story-bg-y,0)) scale(1.09)}}
@keyframes story-memory-layer-in{0%{opacity:0;transform:translate(var(--story-girl-x,0),calc(var(--story-girl-y,0) + 4%)) scale(.965)}100%{opacity:1;transform:translate(var(--story-girl-x,0),var(--story-girl-y,0)) scale(1)}}
@keyframes story-memory-page-float{0%,100%{transform:translateX(-50%) translateY(0) rotate(-.12deg)}50%{transform:translateX(-50%) translateY(-.55%) rotate(.18deg)}}
@keyframes story-memory-close-breathe{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(-.4%) scale(1.006)}}
@keyframes story-memory-back-sway{0%,100%{transform:translateX(-50%) rotate(-.08deg)}50%{transform:translateX(-50%) rotate(.26deg) translateY(-.3%)}}
@keyframes story-caret{50%{opacity:0}}
@media(max-width:700px){.story-frame{width:min(94vw,173.4vh,1360px)}.story-memory-frame{width:min(96vw,110.4vh,1450px)}.story-continue{bottom:4%;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.opening-story.is-playing .story-art,.opening-story.is-playing .story-girl-background,.opening-story.is-playing .story-girl-rig,.story-memory-panel.is-visible,.story-bubble.is-visible,.story-girl-dialogue.is-visible,.story-memory-dialogue.is-visible{animation:none;opacity:1;transform:none}.story-girl-body,.story-girl-hair,.story-memory-page,.story-memory-girl-close,.story-memory-girl-back{animation:none;opacity:1}.story-girl-body,.story-girl-hair,.story-memory-girl-close,.story-memory-girl-back{transform:translateX(-50%)}}

/* The readable letter remains accessible, while the visible paper is 3D. */
.opening-letter-prologue .opening-letter{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;animation:none!important}
.opening-letter:before,.opening-letter:after{display:none}
.prologue-explore{position:absolute;inset:0;z-index:8;pointer-events:none;color:#ede4d1;font:12px/1.6 Georgia,serif}
.prologue-explore[hidden],.memory-inspector[hidden],.journey-interact[hidden]{display:none}
.journey-caption{position:absolute;top:7%;left:10%;right:10%;text-align:center;letter-spacing:2px;text-shadow:0 2px 8px #000;margin:0}
.journey-actions{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;max-width:90vw;pointer-events:auto}
.journey-interact{padding:9px 17px;border:1px solid #b5aa90;background:#15130fe0;color:#eee5d3;font:12px/1.6 inherit;white-space:nowrap}
.journey-interact kbd{display:inline-block;margin-right:8px;border:1px solid #b5aa90;padding:0 7px;color:#fff}
.journey-interact:hover{background:#ede4d1;color:#171512}
.journey-help{position:absolute;bottom:15px;left:12px;right:12px;text-align:center;font:10px/1.6 Arial,sans-serif;color:#c0b59f;letter-spacing:2px}
.journey-walk{position:absolute;left:20px;bottom:62px;display:grid;grid-template-columns:repeat(3,36px);gap:4px;pointer-events:auto}
.journey-walk button{width:36px;height:34px;border:1px solid #aaa18d55;background:#14110c99;color:#ddd1b8;font-size:18px;touch-action:none;user-select:none}
.journey-walk button:first-child{grid-column:2}.journey-walk button:nth-child(2){grid-column:1}.journey-walk button:active{background:#75664c}
#opening[data-phase^="journey-"] .opening-skip{display:none}
.memory-inspector{position:absolute;inset:0;z-index:15;background:#000b;display:grid;place-items:center;backdrop-filter:blur(5px);pointer-events:auto}
.memory-inspector section{position:relative;width:min(760px,92vw);padding:20px;background:transparent;border:0;color:#eee7d9;box-shadow:none}
.memory-inspector h2{font:18px Georgia,serif;letter-spacing:5px;margin:5px 0 10px;text-align:center}
#opening .memory-inspector canvas{position:relative;display:block;inset:auto;width:100%;height:min(55vh,480px);touch-action:none}
.memory-inspector p,.memory-inspector small{display:block;text-align:center;margin:8px 0;font-size:12px;letter-spacing:1px}
.memory-inspector small{color:#b1aa9a;font-size:10px}.memory-close{position:absolute;z-index:2;right:12px;top:8px;color:#eee;font-size:28px}
.memory-action{display:block;margin:16px auto 12px;padding:9px 17px;border:1px solid #aaa;background:#151515c9;color:#f1f1ed;font:12px/1.6 Georgia,serif;letter-spacing:1px;cursor:pointer}
.memory-action[hidden]{display:none}.memory-action kbd{margin-right:8px;padding:1px 6px;border:1px solid #aaa;font:inherit}.memory-action:hover:not(:disabled),.memory-action:focus-visible{background:#eee;color:#151515}.memory-action:disabled{opacity:.6;cursor:default}
@media(max-width:600px){.journey-caption{font-size:12px;letter-spacing:1px}.journey-walk{left:10px;bottom:38px;grid-template-columns:repeat(3,29px)}.journey-walk button{width:29px;height:29px}.journey-actions{bottom:16%;width:92vw}.journey-help{font-size:9px;letter-spacing:.6px}}

.journey-reticle{position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border:1px solid #fff9;border-radius:50%;box-shadow:0 1px 4px #000;pointer-events:none}
.journey-reticle[hidden]{display:none}.journey-reticle.is-targeted{background:#eee5d3;border-color:#eee5d3;box-shadow:0 0 7px #e8d6a888}

#opening[data-phase^="journey-"] .title-background{pointer-events:none}