@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root{--step:calc(clamp(96px,13vw,190px) + clamp(18px,7vw,110px))}
body.early{--void:#000;background:#000}
.early #sky{opacity:.35}
.early main{display:block;padding:0}
.star-track{position:absolute;inset:0}
.slot{position:absolute;top:43%;left:calc(50% + var(--place,0) * var(--step));margin:0;transform:translate(-50%,-50%);text-align:center;transition:left 1.35s cubic-bezier(.65,0,.2,1),opacity .8s ease}
.slot .star{animation:none}
.slot .numeral{animation:none;margin-top:2px;transition:opacity .7s}
.early .star.dim{animation:none;opacity:.1}
.first-star{view-transition-name:first-star}
.page-one .slot{--place:0}
.page-one.departing .slot{--place:-1}
.page-one:not(.departing) .star{animation:opening-arrive 2s ease both}
.page-two .second-star{animation:kindle 1.6s ease .3s both}
.page-two .second-caption{animation:opening-arrive 1.4s ease .7s both}
.page-three .slot{transition:left 2s cubic-bezier(.65,0,.2,1),opacity .8s ease}
.page-three.gathering .slot{left:50%}
.page-three.gathering .numeral{opacity:0}
.page-three.gathering .third-star{opacity:1;transition:opacity .8s}
.page-three.merged .slot:not(.centre){opacity:0}
.page-three.merged .centre .star{filter:brightness(1.65) drop-shadow(0 0 10px #fff0d92b);transform:scale(1.14);transition:filter 1.2s,transform 1.2s}
.page-three.merged .centre .numeral{opacity:.65}
.page-three.asking .slot{top:27%;transition:top 1.4s ease}
.opening-line{position:absolute;top:59%;left:7%;right:7%;margin:0;text-align:center;font:italic clamp(19px,2.7vw,30px)/1.6 var(--serif);opacity:0;transition:opacity .7s}
.opening-line.shown{opacity:1}
.riddle-card{position:absolute;top:49%;left:50%;transform:translateX(-50%);width:min(90vw,760px);padding:20px;text-align:center;opacity:0;transition:opacity .45s}
.riddle-card.shown{opacity:1}
.question-line{user-select:text;margin:0 0 24px;outline:none;font:clamp(21px,3vw,32px)/1.6 var(--serif)}
.ink{position:relative;display:inline-block;white-space:pre;color:#000;background:#000;min-width:1.4em}
.ink::after{content:"\002b\0034";position:absolute;left:0;top:0;color:#000;pointer-events:none}
.ink.selected::after{color:var(--fire);text-shadow:0 0 9px #fff8ec55}
.riddle-card form{display:flex;justify-content:center;gap:18px;align-items:center}
.riddle-card input{width:min(48vw,270px);background:transparent;border:0;border-bottom:1px solid #c9a45c66;color:var(--bone);padding:9px;font:24px var(--serif);text-align:center;border-radius:0;outline-offset:5px}
.riddle-card input:focus{outline:none;border-bottom-color:var(--gold)}
.riddle-card button,.riddle-card a{background:none;border:0;color:var(--gold);font:10px var(--mono);letter-spacing:.18em;cursor:pointer;padding:14px 4px;text-decoration:none}
.riddle-card button:disabled{opacity:.4;cursor:wait}
.answer-feedback{min-height:2.8em;font:italic 17px/1.5 var(--serif);color:var(--muted);margin:22px 0 0}
.kept-earth{position:absolute;bottom:5%;left:0;right:0;margin:0;text-align:center;font:14px var(--serif);letter-spacing:.25em;color:#e9e4d866}
.kept-earth b{font-weight:400;color:var(--gold)}
[hidden]{display:none!important}
body.sunlit{background:#eee7d8;color:#24202a;transition:background .26s ease .12s}
.sun-scene{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;background:radial-gradient(ellipse at 50% 38%,#fffcef,#f0e5ce 43%,#d8cbb3);transition:opacity .22s ease .12s;z-index:1}
.sun{width:clamp(150px,23vw,280px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle closest-side,#fffefb 40%,#fffaec 66%,#fff0cc 78.5%,#fde6b4 80%,#fbe4b399 83%,#f8e2b340 93%,#f6e1b300);box-shadow:0 0 110px #fff6dc,0 0 220px #ecc98a55;margin-bottom:50px;transition:transform .38s cubic-bezier(.7,0,1,1),filter .3s}
.sun-off{background:none;border:0;border-bottom:1px solid #7c663d66;padding:15px 7px;font:20px var(--serif);color:#302b24;cursor:pointer;letter-spacing:.06em}
.sun-off:hover{color:#8b5c23;border-color:currentColor}
.sunlit.extinguished{background:#000}
.extinguished .sun-scene{opacity:0;pointer-events:none}
.extinguished .sun{transform:scale(.01);filter:brightness(2)}
.sun-light{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity .7s ease}
.radiant .sun-light{opacity:1}
.radiant .sun{opacity:0;transition:opacity .7s ease}
.extinguished .sun-scene.radiant{opacity:1}
.extinguished .radiant .sun-off{opacity:0;transition:opacity .16s ease}
.radiant~.dark-thought{z-index:2;background:none;pointer-events:none}
.dark-thought{position:fixed;inset:0;display:grid;place-items:center;margin:0;background:#000;color:var(--bone);font:italic clamp(24px,4vw,38px) var(--serif);opacity:0;transition:opacity .9s;z-index:0}
.dark-thought.shown{opacity:1;transition-duration:.25s}
.dark-word{opacity:0;transition:opacity .25s}
.dark-word.shown{opacity:1}
@keyframes opening-arrive{from{opacity:0}to{opacity:1}}
@keyframes kindle{from{opacity:.03;filter:brightness(.3)}to{opacity:1;filter:brightness(1)}}
@media(max-height:560px){.page-three.asking .slot{top:22%}.page-three.asking .star{--size:90px}.riddle-card{top:39%;padding:12px}.question-line{margin-bottom:10px;font-size:22px}.kept-earth{bottom:2%}.answer-feedback{margin-top:10px;font-size:15px}}
.journey-setup{position:fixed;z-index:3;right:24px;bottom:20px;max-width:340px;color:#665b48;font:10px/1.8 var(--mono);text-align:right}
.journey-setup summary{cursor:pointer;list-style:none;letter-spacing:.12em}.journey-setup summary::-webkit-details-marker{display:none}
.journey-setup p{padding:12px;background:#eee7d8ed;border:1px solid #665b4833;text-align:left;margin:10px 0 0}
.extinguished .journey-setup{opacity:0;pointer-events:none;transition:opacity .2s}