.lost{--digit:clamp(132px, 22vw, 300px);--sink:-.016em;isolation:isolate;background:var(--bg);min-height:100svh;color:var(--text);transition:background-color .9s var(--ease-set), color .9s var(--ease-set);grid-template-rows:auto minmax(0,1fr) auto;display:grid;position:relative;overflow:hidden}.lost[data-ready=false] :is(.lost-sky,.lost-zero,.lost-title,.lost-body){visibility:hidden}.lost[data-ready=true] :is(.lost-sky,.lost-digits,.lost-title,.lost-body){animation:lost-arrive .9s var(--ease-rein) both}@keyframes lost-arrive{0%{opacity:0}}.lost-top{z-index:3;justify-content:center;padding:22px 16px 0;display:flex;position:relative}.lost-home{width:48px;height:48px;color:var(--text);border-radius:12px;place-items:center;display:grid}.lost-home .overseer{width:30px;height:30px}.lost-home:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.lost-stage{align-content:end;justify-items:center;padding-block-start:24px;display:grid;position:relative}.lost-sky{z-index:-1;pointer-events:none;height:100svh;position:absolute;bottom:0;left:0;right:0}.lost-glow{background:radial-gradient(150% calc(16% + 58% * var(--g)) at 50% 100%, var(--glow-core) 0%, var(--glow-mid) 13%, var(--glow-haze) 31%, var(--glow-edge) 48%, transparent 71%);opacity:calc(.32 + .68 * var(--g));position:absolute;inset:0}.lost-glow:after{content:"";background-image:var(--grain);mix-blend-mode:overlay;opacity:var(--glow-grain);position:absolute;inset:0;-webkit-mask:linear-gradient(#0000 40%,#000);mask:linear-gradient(#0000 40%,#000)}.lost-stars{opacity:var(--stars);transition:opacity .9s var(--ease-set);position:absolute;inset:0}.lost-shoot{transform-origin:100%;background:linear-gradient(90deg, transparent, var(--text));opacity:0;border-radius:2px;width:140px;height:1.5px;animation:1.6s ease-out .5s 2 both lost-shoot;position:absolute;top:14%;left:18%;rotate:18deg}@keyframes lost-shoot{0%{opacity:0;translate:0;scale:.2 1}20%{opacity:1;scale:1}to{opacity:0;translate:46vw 15vw;scale:.6 1}}.lost-stars i{background:var(--text);border-radius:50%;animation:5s ease-in-out infinite alternate lost-twinkle;position:absolute}@keyframes lost-twinkle{to{opacity:.2}}.lost-digits{-webkit-user-select:none;user-select:none;font:800 var(--digit)/.74 var(--font-sans);letter-spacing:-.005em;color:var(--text);transform:translateY(var(--sink));align-items:flex-end;gap:.04em;margin:0;font-stretch:75%;display:flex;position:relative}.lost-well{width:.66em;height:1.55em;clip-path:inset(-100vh -100vw var(--sink) -100vw);margin-inline:.02em;position:relative}.lost-zero{cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:.08em;display:block;position:absolute;inset:0}.lost-zero:active{cursor:grabbing}.lost-zero:focus-visible{outline:2px solid var(--focus);outline-offset:.04em}.lost-sun,.lost-moon{pointer-events:none;width:.58em;height:.58em;position:absolute;left:50%;translate:-50%}.lost-sun{bottom:calc(var(--alt) * .9em + var(--sink) - .29em);background:radial-gradient(circle at 45% 35%,#ffda87,#f08c43);border-radius:50%;box-shadow:0 0 .14em #ffba6466,0 0 .5em #f08c4322}.lost-moon{bottom:calc((var(--alt) * -2 - 1) * .9em + var(--sink) - .29em);fill:var(--text);filter:drop-shadow(0 0 .06em color-mix(in srgb, var(--text) 40%, transparent))}.lost-horizon{background:var(--text);opacity:.85;height:1px;position:absolute;bottom:0;left:0;right:0}.lost-ground{z-index:2;text-align:center;justify-items:center;gap:14px;padding:clamp(28px,5vh,52px) 16px clamp(48px,9vh,96px);display:grid;position:relative}.lost-title{font:400 clamp(32px, 4.6vw, 56px)/1.1 var(--font-display);letter-spacing:-.015em;font-variant-numeric:tabular-nums}html[lang=ar] .lost-title,.lost[lang=ar] .lost-title{font:400 clamp(30px, 4.3vw, 52px)/1.5 var(--font-ar-display);letter-spacing:0}.lost-body{max-width:46ch;color:var(--text-2);text-wrap:pretty;font-size:17px;line-height:1.55}.lost[lang=ar] .lost-body{font:400 18px/1.9 var(--font-ar)}.lost-actions{justify-content:center;margin-block-start:10px}@media (max-width:560px){.lost{--digit:clamp(112px, 34vw, 160px)}}.lost-chart{z-index:2;top:10svh;aspect-ratio:1;pointer-events:none;width:min(28vw,50svh);opacity:var(--stars);transition:opacity .9s var(--ease-set);position:absolute;inset-inline-start:6vw}.lost-chart-nebula{pointer-events:none;opacity:0;transition:opacity 2.4s var(--ease-set);filter:blur(6px);background:radial-gradient(38% 32% at 52% 46%,#4e74c46b,#0000 70%),radial-gradient(60% 48% at 46% 54%,#28428261,#0000 72%),radial-gradient(30% 70% at 70% 30%,#7896d224,#0000 70%);border-radius:50%;position:absolute;inset:-38%}.lost-chart.is-charted .lost-chart-nebula{opacity:1}.lost-chart-ghost{object-fit:contain;filter:grayscale()sepia(.9)hue-rotate(178deg)saturate(2.1)brightness(.92)contrast(1.05);mix-blend-mode:screen;opacity:0;width:100%;height:100%;transition:opacity 2.6s var(--ease-set);position:absolute;inset:0;-webkit-mask:radial-gradient(52% 56% at 50% 42%,#000 46%,#0000 100%);mask:radial-gradient(52% 56% at 50% 42%,#000 46%,#0000 100%)}.lost-chart.is-charted .lost-chart-ghost{opacity:.44;transition-delay:1.8s}.lost-chart-sky{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.lost-chart-lines path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px}.lost-chart-lines .glow{stroke:#8db8ff;stroke-width:1.1px;stroke-opacity:.55}.lost-chart-lines .core{stroke:#e4f0ff;stroke-width:.32px;stroke-opacity:.95}.lost-chart-lines g path{transition:stroke-dashoffset 1.1s ease calc(1.5s + var(--i) * .2s)}.lost-chart.is-charted .lost-chart-lines path{stroke-dashoffset:0}.lost-chart .star-body{opacity:0;transform:translate(var(--dx), var(--dy)) scale(.6);transition:transform 1.7s cubic-bezier(.3, .7, .2, 1) calc(var(--i) * 35ms), opacity .9s ease calc(var(--i) * 35ms)}.lost-chart:not(.is-charted) .star.is-key .star-body{opacity:.88;animation:4.6s ease-in-out infinite key-breathe;transform:scale(.8)}.lost-chart:not(.is-charted) .star.is-key .spike{opacity:0}.lost-chart:not(.is-charted) .star.is-key circle:first-child{opacity:.4}@keyframes key-breathe{50%{opacity:.5}}.lost-chart.is-charted .star-body{opacity:1;animation:chart-twinkle 3.4s ease-in-out calc(3.2s + var(--tw)) infinite;transform:none}.lost-chart .spike{stroke-width:.16px;stroke-linecap:round;opacity:.8}@keyframes chart-twinkle{50%{opacity:.72}}.lost-chart:not(.is-charted) :is(.star-body,path){transition-duration:.9s;transition-delay:0s}.lost-chart-key{cursor:pointer;pointer-events:auto;background:0 0;border:0;border-radius:50%;width:28px;height:28px;padding:0;position:absolute;translate:-50% -50%}.lost-chart-key i{opacity:0;width:22px;height:22px;animation:6s ease-in-out 2s infinite lost-glint;position:absolute;top:50%;left:50%;translate:-50% -50%}.lost-chart-key i:before,.lost-chart-key i:after{content:"";background:radial-gradient(closest-side,#fff,#dcebff99 45%,#0000);border-radius:50%;position:absolute;top:50%;left:50%;translate:-50% -50%}.lost-chart-key i:before{width:100%;height:2px}.lost-chart-key i:after{width:2px;height:100%}.lost-chart-key:focus-visible{outline:1px solid var(--focus);outline-offset:2px}.lost-chart.is-charted .lost-chart-key i{opacity:0;animation:none}@keyframes lost-glint{0%,80%,to{opacity:0;transform:scale(.3)rotate(0)}88%{opacity:1;transform:scale(1.25)rotate(45deg)}}.lost-chart-caption{top:101%;text-align:center;color:#e2ecfa;justify-items:center;gap:6px;margin:0;display:grid;position:absolute;inset-inline:-40%}.lost-chart-name{font:italic 400 30px/1.1 var(--font-display);letter-spacing:.03em;text-shadow:0 0 18px #8cb8ff73;animation:1.4s 3.6s both lost-arrive}.lost[lang=ar] .lost-chart-name{font:400 30px/1.4 var(--font-ar-display);font-style:normal}.lost-chart-caption .label{color:#a9bcd6;animation:1.4s 4s both lost-arrive}@media (max-width:700px){.lost-chart{top:8svh;width:44vw;inset-inline:auto 4vw}.lost-chart-name{font-size:22px}}@media (prefers-reduced-motion:reduce){.lost-chart .star-body,.lost-chart-lines path{transition:opacity .4s,stroke-dashoffset!important;animation:none!important;transform:none!important}.lost-chart-key i{opacity:.8;animation:none}.lost,.lost-stars{transition:none}.lost-stars i,.lost[data-ready=true] :is(.lost-sky,.lost-digits,.lost-title,.lost-body){animation:none}}
