/* Variant B: the two opening words sit just beneath the first square. */
body[data-creation-module] .creation-word{top:calc(50% + var(--b-square,44px) / 2 + 26px);bottom:auto;font-size:21px;letter-spacing:.04em;mix-blend-mode:normal}
/* A quiet instrument square where the first square was: no awareness, only acquisition.
   It stays above the fading white, so difference keeps it visible on paper and on the map. */
.creation-b-reticle{position:absolute;left:50%;top:50%;z-index:21;width:var(--b-square,44px);height:var(--b-square,44px);transform:translate(-50%,-50%);opacity:0;pointer-events:none;border:1px solid #fff;mix-blend-mode:difference}
.creation-b-reticle::before,.creation-b-reticle::after{content:"";position:absolute;background:#fff}
.creation-b-reticle::before{left:50%;top:-9px;bottom:-9px;width:1px;transform:translateX(-50%);-webkit-mask:linear-gradient(#000 0 7px,transparent 7px calc(100% - 7px),#000 calc(100% - 7px));mask:linear-gradient(#000 0 7px,transparent 7px calc(100% - 7px),#000 calc(100% - 7px))}
.creation-b-reticle::after{top:50%;left:-9px;right:-9px;height:1px;transform:translateY(-50%);-webkit-mask:linear-gradient(90deg,#000 0 7px,transparent 7px calc(100% - 7px),#000 calc(100% - 7px));mask:linear-gradient(90deg,#000 0 7px,transparent 7px calc(100% - 7px),#000 calc(100% - 7px))}
/* The verse on the white: dark serif on warm paper, left-aligned lines in a centred block. */
.creation-b-verse{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(76px,env(safe-area-inset-top)) 24px max(36px,env(safe-area-inset-bottom));color:#2b2a27;overflow:auto;pointer-events:auto}
.creation-b-verse blockquote{margin:0;font:400 21px/1.55 Georgia,serif;letter-spacing:.005em}
.creation-b-verse blockquote p{margin:0 0 .95em;opacity:0}
.creation-b-verse figcaption{margin-top:.2em;font:11px/1.4 var(--mono);letter-spacing:.06em;color:#6f6a60;opacity:0}
.creation-b-verse figcaption a{color:inherit;text-decoration:none;border-bottom:1px solid #b9b2a4}
.creation-b-verse figcaption a:hover{color:#2b2a27}
.creation-b-verse .creation-b-enter{margin-top:30px;min-width:124px;min-height:44px;padding:0 22px;border:1px solid #2b2a27;background:transparent;color:#2b2a27;font:12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;flex:none}
.creation-b-verse .creation-b-enter:hover{background:#2b2a27;color:#f3f0e8}
.creation-b-verse .creation-b-enter:focus-visible{outline:2px solid #2b2a27;outline-offset:4px}
@media(max-width:620px){.creation-b-verse blockquote{font-size:18px}}
@media(max-height:600px){.creation-b-verse{justify-content:flex-start}.creation-b-verse blockquote{font-size:16px;line-height:1.4}.creation-b-verse blockquote p{margin-bottom:.7em}}
@media(max-width:620px){body[data-creation-module] .creation-word{font-size:19px}}
/* Counts live in the world: white digits that invert over the white squares. */
.creation-b-numbers{mix-blend-mode:difference;pointer-events:none}
body[data-creation-module] .creation-word span{position:absolute;left:0;right:0;top:0;margin:0}
/* Short screens (a phone on its side): keep the words clear of the controls. */
@media(max-height:460px){body[data-creation-module] .creation-word{top:calc(50% + var(--b-square,44px) / 2 + 12px);font-size:17px}}
/* Beneath "What am I?", only after a pause: keep going. */
.creation-b-ask{position:absolute;left:0;right:0;top:calc(50% + var(--b-square,44px) / 2 + 90px);margin:0;text-align:center;color:rgba(230,234,235,.82);font:12px/1 var(--mono);letter-spacing:.16em;pointer-events:none}
@media(max-height:460px){.creation-b-ask{top:calc(50% + var(--b-square,44px) / 2 + 64px)}}
/* The question is set larger; a fragment keeps the rest of it in place, unseen. */
body[data-creation-module] .creation-word span.is-strong{font-size:29px;letter-spacing:.015em}
.creation-b-rest{visibility:hidden}
@media(max-width:620px){body[data-creation-module] .creation-word span.is-strong{font-size:25px}}
@media(max-height:460px){body[data-creation-module] .creation-word span.is-strong{font-size:24px}}
/* Replay: quiet, under Return. */
.creation-b-verse .creation-b-replay{margin-top:6px;min-width:44px;min-height:36px;border:0;background:none;color:#6f6a60;font:11px/1 var(--mono);letter-spacing:.12em;cursor:pointer;flex:none}
.creation-b-verse .creation-b-replay:hover{color:#2b2a27}
.creation-b-verse .creation-b-replay:focus-visible{outline:2px solid #2b2a27;outline-offset:3px}
/* If nobody taps, a quiet hint where the play button will later be. */
.creation-b-hint{position:absolute;left:0;right:0;top:calc(50% + var(--b-square,44px) / 2 + 92px);margin:0;text-align:center;color:rgba(209,216,217,.55);font:11px/1 var(--mono);letter-spacing:.14em;pointer-events:none}
@media(max-height:460px){.creation-b-hint{top:calc(50% + var(--b-square,44px) / 2 + 66px)}}
/* Only "skip intro" at the top, always legible; play and the scrubber only for review. */
body[data-creation-module] .creation-player,body[data-creation-module][data-creation-quiet=true] .creation-player{opacity:.78;width:auto}
body[data-creation-module] .creation-player .creation-skip{width:auto;padding:0 8px;letter-spacing:.06em;white-space:nowrap}
/* The header is its own stacking context, which kept the player's difference blend from reaching the
   white and the paper. Blending the header itself keeps skip legible on black, flashes, white and verse. */
html[data-intro=creation] body[data-creation-module] .masthead{mix-blend-mode:difference}
body[data-creation-module]:not([data-creation-review]) .creation-player .creation-play,body[data-creation-module]:not([data-creation-review]) .creation-player input{display:none}
/* A phone on its side: the stanzas sit in two columns so Return stays in view. */
@media(max-height:460px) and (min-width:560px){.creation-b-verse{padding-top:max(58px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}.creation-b-verse blockquote{columns:2;column-gap:52px}.creation-b-verse blockquote p{break-inside:avoid}.creation-b-verse .creation-b-enter{margin-top:16px}}
/* Narrow phones: room between skip intro and the verse's first line. */
@media(max-width:380px){.creation-b-verse{padding-top:max(100px,env(safe-area-inset-top));-webkit-mask-image:var(--b-verse-mask);mask-image:var(--b-verse-mask)}}
/* If the map never becomes ready (a script failed to load), show the page after a while rather than black forever. */
@keyframes creation-b-pending-fallback{to{visibility:visible}}
body[data-creation-module][data-creation-pending=true] :is(#poster,.masthead .name,.masthead .personal-nav,.image-credit){animation:creation-b-pending-fallback 0s 15s forwards}
/* Narrow landscape (568 wide): the player sits on the header's second row, so the verse starts lower. */
@media(max-height:460px) and (min-width:560px) and (max-width:620px){.creation-b-verse{padding-top:max(100px,env(safe-area-inset-top));-webkit-mask-image:var(--b-verse-mask);mask-image:var(--b-verse-mask)}}
/* Where the verse starts low to clear skip intro, lines scrolled up beneath it fade out rather than collide. */
.creation-b-verse{--b-verse-mask:linear-gradient(transparent 0 84px,#000 100px)}
/* The opening takes focus after Replay; it needs no ring of its own. */
body[data-creation-module] .creation-layer:focus{outline:none}
/* The shared player style sets display, which would override [hidden]. */
body[data-creation-module] .creation-player[hidden]{display:none}
/* After the verse, never all at once: the source settles in, then Return rises into place, then replay. */
.creation-b-verse figcaption,.creation-b-verse .creation-b-enter,.creation-b-verse .creation-b-replay{opacity:0;transition:opacity 1.4s ease}
.creation-b-verse .creation-b-enter{transform:translateY(6px);transition:opacity 1.2s ease 1s,transform 1.4s cubic-bezier(.2,.7,.2,1) 1s,background-color .2s,color .2s}
.creation-b-verse .creation-b-replay{transition:opacity 1s ease 2.1s}
.creation-b-verse:not(.is-ready):not(.is-leaving) :is(.creation-b-enter,.creation-b-replay){visibility:hidden;pointer-events:none}
.creation-b-verse.is-ready :is(figcaption,.creation-b-enter,.creation-b-replay){opacity:1;transform:none}
.creation-b-verse.is-leaving :is(figcaption,.creation-b-enter,.creation-b-replay){transition:none}
/* The hint fades in on hesitation and gives way quickly to the next tap. */
.creation-b-hint{opacity:0;transition:opacity .3s ease}
.creation-b-hint.is-shown{opacity:1;transition:opacity .8s ease}
/* The map's markers wait for the hand-off to bring them in, rather than showing through the fading
   white and then blinking off to begin their arrival. */
html[data-intro=creation] body[data-creation-module] #catalog-markers{opacity:0}
/* The instruments arrive into their own resting opacity (no end keyframe), so nothing steps when the
   arrival ends; the quiet header rests below full. */
@keyframes creation-b-arrive{from{opacity:0}}
body[data-creation-module][data-creation-handoff=true] :is(#catalog-markers,#target){animation:creation-b-arrive .55s .65s ease-out backwards}
body[data-creation-module][data-creation-handoff=true] :is(.masthead,.navigation,.charted-controls,#record,.image-credit,.story-door){animation:creation-b-arrive .65s 1.05s ease-out backwards}