/* The opening occupies the entire map viewport; no stage, frame or inset. */
body[data-creation=true] #survey{background:#000}
.creation-layer{position:absolute;inset:0;z-index:20;background:#000;overflow:hidden;touch-action:none;pointer-events:auto}
.creation-layer[hidden]{display:none}
.creation-layer canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.creation-layer .creation-number{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:difference}
.creation-layer .creation-number[hidden],.creation-word[hidden]{display:none}
.creation-word{position:absolute;left:20px;right:20px;top:calc(50% + 78px);margin:0;color:#eeeae4;text-align:center;font:400 clamp(28px,3.5vw,42px)/1.4 Georgia,serif;letter-spacing:.025em;pointer-events:none}
.creation-player{display:flex;align-items:center;gap:4px;flex:none;color:#d1d8d9;pointer-events:auto;opacity:.64;transition:opacity .2s;width:188px}
.creation-player:hover,.creation-player:focus-within{opacity:1}
.creation-player button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:44px;border:0;background:none;color:inherit;font:11px/1.4 var(--mono);cursor:pointer;padding:0}
.creation-player .creation-play{width:64px}
.creation-player .creation-skip{width:44px}
.creation-icon{width:12px;font:12px/1 var(--mono);text-align:center}
.creation-player input{appearance:none;-webkit-appearance:none;width:68px;min-width:44px;height:44px;margin:0;background:transparent;cursor:ew-resize}
.creation-player input::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,#d1d8d9 0 var(--intro-progress,0%),#637077 var(--intro-progress,0%) 100%)}
.creation-player input::-moz-range-track{height:1px;background:#637077}
.creation-player input::-moz-range-progress{height:1px;background:#d1d8d9}
.creation-player input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:6px;height:6px;border-radius:50%;border:0;background:#d1d8d9;margin-top:-2.5px;opacity:.55}
.creation-player input::-moz-range-thumb{width:6px;height:6px;border-radius:50%;border:0;background:#d1d8d9;opacity:.55}
.creation-player :disabled{cursor:default;opacity:.3}
.creation-player :focus-visible{outline:2px solid #efd6a9;outline-offset:2px}
body[data-creation=true] .masthead{gap:12px}
html[data-intro=creation] .creation-player{mix-blend-mode:difference;color:#fff}
html[data-intro=creation] .masthead{z-index:30!important;opacity:1!important;visibility:visible!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;pointer-events:none}
html[data-intro=creation] .masthead .name,html[data-intro=creation] .masthead .personal-nav{visibility:hidden;pointer-events:none}
html[data-intro=creation] .navigation,html[data-intro=creation] .charted-controls,html[data-intro=creation] .intro-caption,html[data-intro=creation] .intro-skip,html[data-intro=creation] #hint,html[data-intro=creation] #target,html[data-intro=creation] #record,html[data-intro=creation] .story-door,html[data-intro=creation] .image-credit,html[data-intro=creation] .discovery-route{visibility:hidden!important;pointer-events:none!important}
body[data-creation-quiet=true] .creation-player{opacity:.5;transition:none}
body[data-creation-quiet=true] .creation-play,body[data-creation-quiet=true] .creation-player input{visibility:hidden}
body[data-creation-quiet=true] .creation-player:hover .creation-play,body[data-creation-quiet=true] .creation-player:hover input,body[data-creation-quiet=true] .creation-player:focus-within .creation-play,body[data-creation-quiet=true] .creation-player:focus-within input{visibility:visible}
body[data-creation-quiet=true] .creation-player:hover,body[data-creation-quiet=true] .creation-player:focus-within{opacity:1}
body[data-creation-pending=true] #poster,body[data-creation-pending=true] #sky,body[data-creation-pending=true] .masthead .name,body[data-creation-pending=true] .masthead .personal-nav,body[data-creation-pending=true] .creation-play,body[data-creation-pending=true] .creation-player input,body[data-creation-pending=true] .navigation,body[data-creation-pending=true] .charted-controls,body[data-creation-pending=true] .story-door,body[data-creation-pending=true] .image-credit,body[data-creation-pending=true] #hint{visibility:hidden}
body[data-creation-pending=true] .masthead{opacity:1!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
/* The white pop cuts to the photograph; the machine UI arrives afterward.
   These finite CSS animations leave no extra RAF loop or rendering context. */
@keyframes creation-instruments-arrive{from{opacity:0}to{opacity:1}}
body[data-creation-handoff=true] #catalog-markers,body[data-creation-handoff=true] #target{animation:creation-instruments-arrive .55s .65s ease-out backwards}
body[data-creation-handoff=true] .masthead,body[data-creation-handoff=true] .navigation,body[data-creation-handoff=true] .charted-controls,body[data-creation-handoff=true] #record,body[data-creation-handoff=true] .image-credit,body[data-creation-handoff=true] .story-door{animation:creation-instruments-arrive .65s 1.05s ease-out backwards}
@media(max-width:620px){
  body[data-creation=true] .masthead{left:16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 6px;padding:7px 9px 2px;max-width:calc(100% - 32px)}
  body[data-creation=true] .masthead .name{grid-column:1/-1}
  body[data-creation=true] .masthead .personal-nav{justify-self:start;gap:3px}
  body[data-creation=true] .personal-nav button{font-size:11px;padding-inline:3px}
  body[data-creation=true] .creation-player{grid-column:2;grid-row:2;justify-self:end;width:148px;gap:2px}
  body[data-creation=true] .creation-player .creation-play{width:56px}
  body[data-creation=true] .creation-player input{width:44px}
  .creation-word{font-size:30px;top:calc(50% + 65px)}
}
@media(max-height:460px){.creation-word{top:calc(50% + 50px);font-size:25px}}
@media(prefers-reduced-motion:reduce){.creation-player{transition:none}body[data-creation-handoff=true] :is(#sky,#poster,#catalog-markers,#target,.masthead,.navigation,.charted-controls,#record,.image-credit,.story-door){animation:none}}