.view--story .view__panel { padding: 0; max-width: none; height: 100%; overflow: hidden; }
.view--story > .view__back { z-index: 20; color: rgba(255,255,255,.82); mix-blend-mode: difference; }
.story { position: relative; min-height: 100dvh; overflow: hidden; isolation: isolate; background: #000; color: #f8fcff; }
.story__threshold,.story__inside { position: absolute; inset: 0; }
.story__threshold { overflow: hidden; background: #050a12; transition: opacity 300ms ease,filter 300ms ease; }
.story__threshold::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,transparent 49.85%,rgba(160,232,255,.13) 50%,transparent 50.15%),linear-gradient(transparent 49.85%,rgba(160,232,255,.1) 50%,transparent 50.15%); opacity:.3; transition:opacity 1000ms ease; }
.story__threshold::after { content:""; position:absolute; inset:-2px; z-index:3; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 50% 43%,transparent 0 15%,rgba(0,0,0,.28) 34%,rgba(0,0,0,.88) 68%,#000 100%); transition:opacity 1000ms cubic-bezier(.4,0,.2,1); }
.story__environment { position:absolute; inset:-7%; z-index:0; overflow:hidden; transform:rotate(-1.2deg) scale(1.04); transition:transform 1850ms var(--ease-in-out),filter 1000ms cubic-bezier(.4,0,.2,1); }
.story__environment img { width:100%; height:100%; object-fit:cover; object-position:center; }
.story__darkness { position:absolute; inset:-2px; z-index:1; pointer-events:none; opacity:0; background:#000; transition:opacity 1000ms cubic-bezier(.4,0,.2,1); }
.story__figure { position:absolute; z-index:2; left:50%; bottom:1%; height:90%; aspect-ratio:600/902; overflow:hidden; transform:translateX(-50%); transform-origin:50% 6%; filter:drop-shadow(0 22px 36px rgba(0,0,0,.52)); transition:transform 1850ms var(--ease-in-out),filter 1000ms cubic-bezier(.4,0,.2,1); will-change:transform; }
.story__avatar-frames { display:block; width:900%; height:100%; max-width:none; object-fit:fill; transform:translateX(0); }
.story[data-avatar-frame="1"] .story__avatar-frames { transform:translateX(-11.111111%); }
.story[data-avatar-frame="2"] .story__avatar-frames { transform:translateX(-22.222222%); }
.story[data-avatar-frame="3"] .story__avatar-frames { transform:translateX(-33.333333%); }
.story[data-avatar-frame="4"] .story__avatar-frames { transform:translateX(-44.444444%); }
.story[data-avatar-frame="5"] .story__avatar-frames { transform:translateX(-55.555556%); }
.story[data-avatar-frame="6"] .story__avatar-frames { transform:translateX(-66.666667%); }
.story[data-avatar-frame="7"] .story__avatar-frames { transform:translateX(-77.777778%); }
.story[data-avatar-frame="8"] .story__avatar-frames { transform:translateX(-88.888889%); }
.story.is-zooming .story__environment { transform:rotate(2.2deg) scale(1.15) translate3d(-1%,1%,0); }
.story.is-zooming .story__figure { transform:translateX(-50%) translateY(4vh) scale(2.4); }
.story.is-dimming .story__environment { filter:brightness(.08) saturate(.35); }
.story.is-dimming .story__darkness,.story.is-dimming .story__threshold::after { opacity:1; }
.story.is-dimming .story__threshold::before { opacity:0; }
.story.is-dimming .story__figure { filter:brightness(.78) saturate(.82) drop-shadow(0 0 25px rgba(255,186,93,.14)); }
.story__words { position:absolute; z-index:6; left:50%; top:65%; margin:0; padding-left:.32em; transform:translate(-50%,10px); font:500 clamp(1.5rem,3.7vw,3.7rem)/1 var(--sans); letter-spacing:.32em; color:#fff; text-shadow:0 0 8px #fff,0 0 30px #62dcff,0 0 90px #2aa9ff; opacity:0; transition:opacity 150ms ease,transform 300ms ease; white-space:nowrap; }
.story[data-avatar-frame="8"] .story__words { opacity:1; transform:translate(-50%,0); }
.story__signal { position:absolute; z-index:6; left:50%; bottom:5vh; transform:translateX(-50%); margin:0; padding-left:.22em; font:500 .7rem/1 var(--mono); letter-spacing:.22em; color:rgba(190,241,255,.7); opacity:0; transition:opacity 150ms ease; }
.story[data-avatar-frame="8"] .story__signal { opacity:1; }
.story__rings { position:absolute; z-index:5; left:50%; top:50%; width:min(72vw,720px); aspect-ratio:1; transform:translate(-50%,-50%); opacity:0; }
.story__rings i { position:absolute; inset:var(--inset); border:1px solid rgba(174,239,255,.78); border-radius:50%; box-shadow:0 0 18px rgba(82,211,255,.35),inset 0 0 18px rgba(82,211,255,.2); }
.story__rings i:nth-child(1){--inset:0}.story__rings i:nth-child(2){--inset:13%;border-style:dashed}.story__rings i:nth-child(3){--inset:28%}.story__rings i:nth-child(4){--inset:42%;background:#fff;filter:blur(6px)}
.story__scan { position:absolute; z-index:4; inset:0; opacity:0; }
.story__scan i { position:absolute; left:50%; top:50%; width:140vw; height:1px; transform-origin:left; background:linear-gradient(90deg,#fff,rgba(82,211,255,.6),transparent 64%); box-shadow:0 0 20px #77e5ff; transform:rotate(var(--r)); }
.story__scan i:nth-child(1){--r:0deg}.story__scan i:nth-child(2){--r:90deg}.story__scan i:nth-child(3){--r:37deg}.story__scan i:nth-child(4){--r:143deg}
.story.is-linking .story__rings,.story.is-linking .story__scan { animation:story-interface 2.2s ease both; }
@keyframes story-interface { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-20deg)} 18%{opacity:1} 82%{opacity:.85;transform:translate(-50%,-50%) scale(1.9) rotate(18deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(3)} }
.story__scan { transform:none!important; }
.story__link-gif { position:absolute; inset:0; z-index:10; background:#fff; opacity:0; pointer-events:none; transition:opacity 180ms ease; overflow:hidden; }
.story__link-gif img { display:block; width:100%; height:100%; object-fit:cover; image-rendering:auto; }
.story.is-linking .story__link-gif { opacity:1; }
.story.is-linking .story__threshold { opacity:0; }
.story.is-inside .story__link-gif { opacity:0; filter:blur(20px); }
.story__inside { display:grid; place-items:center; padding:6vw; color:#15202b; background:#fbfdff; opacity:0; pointer-events:none; transform:scale(1.06); transition:opacity 150ms ease,transform 150ms ease; }
.story__whiteworld { position:absolute; inset:0; overflow:hidden; background:radial-gradient(ellipse at 50% 72%,#fff 0 18%,#e8f7ff 42%,#fbfdff 72%); }
.story__whiteworld::before { content:""; position:absolute; left:-10%; right:-10%; top:68%; height:1px; background:#98d7ec; box-shadow:0 0 30px 12px rgba(114,208,235,.22); }
.story__whiteworld i { position:absolute; width:25vw; height:25vw; border:1px solid rgba(82,180,210,.16); transform:rotate(45deg); animation:white-drift 14s linear infinite; }
.story__whiteworld i:nth-child(1){left:8%;top:22%}.story__whiteworld i:nth-child(2){right:4%;top:14%;animation-delay:-5s}.story__whiteworld i:nth-child(3){left:42%;bottom:-15%;animation-delay:-9s}
@keyframes white-drift { 50%{transform:rotate(70deg) translateY(-24px)} }
.story__inside>.sys,.story__inside>.story__after{position:relative;z-index:1;grid-area:1/1}
/* The System window, as it greets a player: a dark pane with a blue edge, a typed line, then the status sheet. */
.sys{width:min(600px,92vw);max-height:calc(100dvh - 12vw);overflow:auto;padding:20px 26px;color:#dff1ff;text-align:left;font-family:var(--sans);background:linear-gradient(180deg,rgba(10,24,52,.94),rgba(6,16,38,.95));border:1px solid rgba(140,200,255,.9);box-shadow:0 0 0 1px rgba(30,80,150,.55),0 0 34px rgba(80,160,255,.45),inset 0 0 44px rgba(60,130,255,.12);opacity:0}
.story.is-inside .sys{animation:sys-open 640ms cubic-bezier(.2,.8,.2,1) 420ms both}
@keyframes sys-open{0%{opacity:0;transform:scale(.6,.02);filter:brightness(3)}45%{opacity:1;transform:scale(1,.02);filter:brightness(2)}100%{opacity:1;transform:none;filter:none}}
.story.is-accepted .sys{animation:sys-close 320ms ease-out both;pointer-events:none}
@keyframes sys-close{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(1,.02)}}
.sys__head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(140,200,255,.35);font:600 .7rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#9fd2ff}
.sys__mark{position:relative;width:22px;height:22px;border:1px solid #9fd2ff;transform:rotate(45deg);box-shadow:0 0 12px rgba(120,190,255,.7)}
.sys__mark::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;transform:rotate(-45deg);font:700 .85rem/1 var(--sans);color:#fff}
.sys__id{margin-left:auto;color:rgba(159,210,255,.6)}
.sys__line{margin:16px 0 14px;min-height:1.7em;font-size:clamp(1rem,1.5vw,1.2rem);color:#fff}
.sys__caret{display:inline-block;width:.5em;height:1em;margin-left:3px;vertical-align:-.12em;background:#9fd2ff;animation:sys-caret 1s step-end infinite}
.story.is-accepted .sys__caret{display:none}
@keyframes sys-caret{50%{opacity:0}}
.sys__status{display:grid;gap:7px;margin:0}
.sys__status div,.sys__row{display:grid;grid-template-columns:6rem 1fr;gap:12px;align-items:baseline}
.sys__row{margin-top:12px}
.sys__status dt,.sys__key{font:600 .64rem/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7fbfff}
.sys__status dd{margin:0;font-size:.95rem}
.sys__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sys__tags li{padding:4px 8px;border:1px solid rgba(140,200,255,.45);background:rgba(80,150,255,.12);font:500 .66rem/1 var(--mono);letter-spacing:.06em;color:#e6f3ff}
.sys__tags--quests li{border-color:rgba(255,200,120,.55);background:rgba(255,180,90,.12);color:#ffe9c4}
.sys__foot{margin:14px 0 0;font-size:.85rem;color:rgba(223,241,255,.7)}
.sys__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sys__btn{min-height:44px;padding:10px 18px;border:1px solid #9fd2ff;background:rgba(120,190,255,.18);color:#fff;font:600 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 14px rgba(120,190,255,.3)}
.sys__btn--ghost{background:transparent;box-shadow:none;color:#9fd2ff}
@media(hover:hover) and (pointer:fine){.sys__btn:hover{background:rgba(120,190,255,.32)}.sys__btn--ghost:hover{background:rgba(120,190,255,.12)}}
.sys__btn:focus-visible,.story__memory:focus-visible,.story__archive-back:focus-visible{outline:2px solid #ffb15c;outline-offset:3px}
/* After Accept the white world speaks for itself. */
.story__after{display:grid;justify-items:center;gap:14px;text-align:center;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity 500ms ease 300ms,transform 500ms ease 300ms}
.story.is-accepted .story__after{opacity:1;transform:none;pointer-events:auto}
/* The memory archive button, work in progress, which runs from the pointer. */
.story__memory{position:absolute;left:24px;bottom:24px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border:1px dashed rgba(57,137,166,.6);background:rgba(255,255,255,.72);color:#276d86;font:600 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transform:translate(var(--dx,0px),var(--dy,0px));transition:transform 220ms cubic-bezier(.2,.8,.2,1)}
.story__memory b{padding:3px 5px;border-radius:2px;background:#ffb15c;color:#241d10;font-size:.55rem}
.story__memory-hint{position:absolute;left:24px;bottom:72px;z-index:3;margin:0;max-width:22rem;font:400 .9rem/1.4 var(--sans);color:#3989a6}
.story__memory-hint:empty{display:none}
/* The old story, framed whole, with the way back on top. */
.story__archive{position:absolute;inset:0;z-index:15;background:#000;opacity:0;transition:opacity 320ms ease}
.story__archive.is-open{opacity:1}
.story__archive[hidden]{display:none}
.story__archive-frame{display:block;width:100%;height:100%;border:0;background:#000}
.story__archive-back{position:absolute;right:22px;top:18px;z-index:2;min-height:44px;padding:10px 14px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.6);color:#fff;font:600 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.story__kicker{margin:0;font:600 .72rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#3989a6}.story__inside h1{margin:0;font:400 clamp(2.5rem,7vw,7rem)/.94 var(--display);letter-spacing:-.035em}.story__inside>p:not(.story__kicker){max-width:38rem;margin:0;font-size:clamp(1rem,1.6vw,1.25rem);color:#536674}.story__replay,.story__skip{min-height:44px;border:1px solid currentColor;background:transparent;font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.story__replay{margin-top:18px;padding:12px 18px;color:#276d86}.story__skip{position:absolute;z-index:12;right:22px;bottom:22px;padding:10px 14px;color:rgba(255,255,255,.76)}
.story.is-inside .story__threshold{opacity:0;filter:blur(30px);pointer-events:none}.story.is-inside .story__inside{opacity:1;pointer-events:auto;transform:none;transition-duration:1.1s}.story.is-inside .story__skip{display:none}
@media(max-width:700px){.sys{padding:16px 16px 14px}.sys__status div,.sys__row{grid-template-columns:1fr;gap:2px}.story__memory{left:16px;bottom:16px}.story__memory-hint{left:16px;bottom:64px;max-width:calc(100vw - 32px)}.story__archive-back{right:12px;top:auto;bottom:14px}.story__figure{height:88%;bottom:0}.story.is-zooming .story__figure{transform:translateX(-50%) translateY(2vh) scale(2.1)}.story__environment{inset:-10%}.story__words{top:67%;font-size:1.35rem;letter-spacing:.2em;padding-left:.2em}.story__inside{padding:20vw 8vw}}
@media(prefers-reduced-motion:reduce){.story__threshold,.story__link-gif{display:none}.story__inside{opacity:1;pointer-events:auto;transform:none}.story__skip{display:none}.story__whiteworld i{animation:none}.story.is-inside .sys{animation:none;opacity:1}.story.is-accepted .sys{animation:none;opacity:0}.story__memory{transition:none}}