/* Queer Domains · one stylesheet for every page except the AR and moderation extras.
   Assembled 8 October 2026 from the earlier separate files, in their original order,
   so every rule keeps the same priority. Sections below are marked with their old file names. */

/* ═══════════ Base: fonts, layout and components · was style.css ═══════════ */
@font-face{font-family:HelveticaNeue;src:url('./assets/HelveticaNeue-Thin.otf') format('opentype');font-weight:100;font-display:swap}
@font-face{font-family:HelveticaNeue;src:url('./assets/HelveticaNeue-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:HelveticaNeue;src:url('./assets/HelveticaNeue-Medium.otf') format('opentype');font-weight:500;font-display:swap}
:root{font-family:HelveticaNeue,'Helvetica Neue',Arial,sans-serif;font-weight:300;color-scheme:light;--bg:#ff7be7;--fg:#fff;--muted:#fff;--line:#ffffff66;--focus:#fff;background:var(--bg);color:var(--fg)}

*{box-sizing:border-box}body{margin:0;min-width:300px;background:var(--bg);transition:background-color .35s,color .35s}button,input{font:inherit}button{color:inherit;background:none;border:0;cursor:pointer;font-weight:300}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,a:focus-visible{outline:1px solid var(--focus);outline-offset:5px}button:hover:not(:disabled){text-decoration:underline;text-underline-offset:5px}fieldset{border:0;margin:0;padding:0}p,h1,h2{margin:0}button,label{touch-action:manipulation}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{display:flex;justify-content:space-between;align-items:flex-start;padding:32px 40px 0;gap:32px}.identity{width:min(440px,52vw)}.brand-lockup{position:relative;padding-right:28px}.brand-star{position:absolute;right:-20px;top:-17px;width:clamp(38px,4vw,52px);height:clamp(38px,4vw,52px);pointer-events:none}.brand-star img{width:100%;height:100%;object-fit:contain}.wordmark{display:block;position:relative;width:100%;aspect-ratio:8.1;overflow:hidden}.wordmark img{position:absolute;width:144.5%;height:auto;max-width:none;left:-22%;top:50%;transform:translateY(-50%)}.identity p{font-weight:100;font-size:clamp(18px,1.75vw,25px);margin-top:12px;line-height:1.3;white-space:nowrap}.light-logo{display:none}.appearance{display:flex;align-items:center;gap:20px;font-size:15px;padding-top:5px}.appearance>span{color:var(--muted)}.theme-choice{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:40px;position:relative}.theme-choice input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch{display:block;width:37px;height:20px;border:1px solid var(--line);border-radius:20px;padding:3px}.switch>span{display:block;width:12px;height:12px;background:var(--fg);border-radius:50%;transition:transform .25s}.theme-choice input:checked+.switch>span{transform:translateX(17px)}.theme-choice input:focus-visible+.switch{outline:1px solid var(--focus);outline-offset:5px}#theme-name{min-width:32px}
.domain{display:grid;grid-template-columns:1fr 1fr;gap:4.4vw;margin:64px 40px 32px;align-items:start}.story{min-height:550px;display:flex;flex-direction:column}.title-row{min-height:61px;border-bottom:1px solid var(--line);padding:10px 32px 20px}h1{font-size:clamp(24px,2.2vw,32px);font-weight:100;line-height:1.3}h1 span{margin-right:7px;font-weight:500}.description{padding:44px 32px 0}h2,.description p{font-size:clamp(22px,2vw,28px);font-weight:100;line-height:1.5}.description h2{font-weight:500}.description p{margin-top:25px;max-width:420px}dl{margin:52px 0 0;font-size:17px;line-height:1.5}dt{color:var(--muted);margin-bottom:8px}dd{margin:0}.encounter{min-width:0}.viewer-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid var(--line);min-height:44px;margin-bottom:24px;font-size:15px}.viewer-heading button{padding:10px 0 10px 12px}.backdrop-choice{display:flex;align-items:center;gap:12px}.backdrop-choice label{position:relative;display:flex;align-items:center;min-height:40px;cursor:pointer}.backdrop-choice input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.backdrop-choice input+span{color:var(--muted)}.backdrop-choice input:checked+span{color:var(--fg);text-decoration:underline;text-underline-offset:5px}.backdrop-choice input:focus-visible+span{outline:1px solid var(--focus);outline-offset:5px}.separator{color:var(--muted)}.viewer{position:relative;aspect-ratio:1;isolation:isolate;background:transparent}.viewer:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 49% 47%,#3b3b3f 0%,#2a2b2e 35%,#1b1c1d 75%,#171718 100%);opacity:1;transition:opacity .5s}:root[data-backdrop=clear] .viewer:before{opacity:0}canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}canvas:active{cursor:grabbing}canvas:focus-visible{outline:1px solid var(--focus);outline-offset:5px}.loading,.model-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px;font-size:16px;z-index:1}.loading{color:#ddd;pointer-events:none}:root[data-backdrop=clear] .loading{color:var(--fg)}.model-error{flex-direction:column;background:var(--bg)}.model-error button{text-decoration:underline}.viewer-foot{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:19px 0 17px;font-size:14px;color:var(--muted);line-height:1.4}.sound{display:flex;align-items:center;gap:20px;min-height:70px}.audio-toggle{display:flex;align-items:center;gap:10px;min-height:44px;padding:0;min-width:83px;font-size:18px}.audio-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2}.audio-track{flex:1;display:flex;align-items:center}input[type=range]{width:100%;height:24px;background:transparent;appearance:none;cursor:pointer;margin:0}input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line)}input[type=range]::-webkit-slider-thumb{appearance:none;width:8px;height:8px;background:var(--fg);border-radius:50%;margin-top:-3.5px}input[type=range]::-moz-range-track{height:1px;background:var(--line)}input[type=range]::-moz-range-thumb{width:8px;height:8px;border:0;background:var(--fg);border-radius:50%}.audio-time{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}#audio-error{font-size:14px;line-height:1.5}.noscript{padding:30px}
@media(min-width:1550px){.site-header,.domain{max-width:1600px;margin-left:auto;margin-right:auto}.site-header{padding-top:45px}.domain{padding:0 40px;margin-top:80px}.viewer{max-height:690px}.story{min-height:660px}}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){.site-header{padding:25px 24px 0;gap:20px}.identity{width:min(420px,65vw)}.identity p{font-size:18px;white-space:normal}.appearance>span{display:none}.appearance{gap:0;padding:0}.domain{grid-template-columns:1fr;gap:35px;margin:40px 24px 25px}.story{min-height:0;position:relative}.title-row{padding:0 0 20px;min-height:0}h1{font-size:28px}.description{padding:23px 0 0}.description h2,.description p{font-size:24px}.description p{margin-top:9px}dl{display:flex;gap:15px;margin-top:22px;font-size:16px}dt{margin:0}.viewer-heading{margin-bottom:18px}.viewer-foot{font-size:13px}.sound{gap:14px}.audio-toggle{font-size:17px;min-width:77px}}
@media(max-width:420px){.site-header{padding:23px 18px 0}.identity{width:70vw}.identity p{font-size:16px}.theme-choice{gap:7px}#theme-name{display:none}.domain{margin:35px 18px 20px}.viewer-heading{font-size:14px}.viewer-foot{font-size:12px}.backdrop-choice{gap:9px}.audio-time{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*:before{transition:none!important}}
/* Shared navigation and archive pages */
a{color:inherit}.top-navigation{display:flex;align-items:center;gap:30px;padding-top:5px}.top-navigation .appearance{padding-top:0}.info-link{font-size:16px;line-height:40px;text-decoration:none}.info-link:hover,.info-link[aria-current=page]{text-decoration:underline;text-underline-offset:5px}.return-navigation{margin:42px 40px 0;font-size:15px}.return-navigation a,.info-heading a{text-decoration:none;color:var(--muted)}.return-navigation a:hover,.info-heading a:hover{text-decoration:underline;text-underline-offset:5px}.domain-detail{margin-top:24px}.archive-page,.info-page{margin:64px 40px 40px}.archive-toolbar{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:0 0 20px;border-bottom:1px solid var(--line)}.archive-toolbar h1,.info-heading h1{font-size:24px;font-weight:100}.domain-count{font-size:14px;color:var(--muted);margin-left:12px}.archive-view-choice{display:flex;align-items:center;gap:13px;font-size:16px}.archive-view-choice label{position:relative;cursor:pointer;min-height:40px;display:flex;align-items:center}.archive-view-choice input{position:absolute;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}.archive-view-choice span{color:var(--muted)}.archive-view-choice input:checked+span{color:var(--fg);text-decoration:underline;text-underline-offset:6px}.archive-view-choice input:focus-visible+span{outline:1px solid var(--focus);outline-offset:6px}.constellation-stage{height:clamp(340px,60vh,780px);position:relative;overflow:hidden}.constellation-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.domain-point{position:absolute;left:47%;top:47%;width:140px;min-height:115px;transform:translate(-50%,-28px);text-align:center;text-decoration:none;display:flex;align-items:center;flex-direction:column}.point-symbol{width:56px;height:56px;display:block}.point-symbol img{width:100%;height:100%;object-fit:contain}.constellation-ready .point-symbol{visibility:hidden}.point-title{font-size:21px;font-weight:100;margin-top:7px}.point-place{font-size:14px;color:var(--muted);margin-top:7px}.domain-point:hover .point-title,.domain-point:focus-visible .point-title{text-decoration:underline;text-underline-offset:6px}.constellation-hint{text-align:center;font-size:14px;color:var(--muted);padding:10px 0 22px}.domain-list-row{display:grid;grid-template-columns:50px 1fr 120px 90px 25px;gap:22px;align-items:center;text-decoration:none;padding:32px 0;border-bottom:1px solid var(--line)}.list-number,.list-place,.list-year{font-size:16px;color:var(--muted)}.list-story{display:flex;flex-direction:column;gap:10px}.list-title{font-size:28px;font-weight:100}.list-description{font-size:17px;color:var(--muted);line-height:1.4}.list-open{font-size:24px}.domain-list-row:hover .list-title{text-decoration:underline;text-underline-offset:6px}.info-page{display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,2fr);gap:7vw;padding-top:24px;border-top:1px solid var(--line)}.info-heading a{display:inline-block;margin-top:28px;font-size:16px}.info-copy{max-width:880px}.info-copy p{font-size:clamp(24px,2.3vw,34px);font-weight:100;line-height:1.55;margin-bottom:1.3em}.info-copy strong{font-weight:500}
@media(min-width:1550px){.archive-page,.info-page{max-width:1520px;margin-left:auto;margin-right:auto}.return-navigation{max-width:1520px;margin-left:auto;margin-right:auto}}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){.top-navigation{gap:18px;padding:0}.site-header .identity{width:min(420px,58vw)}.site-header{gap:20px}.archive-page,.info-page{margin:40px 24px 25px}.return-navigation{margin:30px 24px 0}.domain-detail{margin-top:24px}.archive-toolbar h1{font-size:22px}.archive-view-choice{font-size:14px;gap:10px}.domain-list-row{grid-template-columns:25px 1fr 50px;gap:12px;padding:24px 0}.list-place{grid-column:2}.list-year{grid-column:3;grid-row:2}.list-open{grid-column:3;grid-row:1;text-align:right}.list-title{font-size:26px}.list-description{font-size:16px}.info-page{grid-template-columns:1fr;gap:36px}.info-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.info-heading a{margin:0}.info-copy p{font-size:25px}}
@media(max-width:480px){.site-header{flex-wrap:wrap;row-gap:15px}.site-header .identity{width:calc(100% - 20px);max-width:350px}.top-navigation{margin-left:auto}.archive-page,.info-page{margin:28px 18px 24px}.return-navigation{margin-left:18px;margin-right:18px}.archive-toolbar{gap:12px}.domain-count{margin-left:4px}.constellation-stage{height:48vh;min-height:320px}.info-copy p{font-size:23px}}
/* Immersive map preview */
.map-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:54px;font-size:14px;color:var(--muted)}.map-toolbar button{min-height:44px;padding:0}.constellation-stage{height:clamp(400px,64vh,800px);background:radial-gradient(ellipse at 50% 48%,rgba(135,135,145,.06),transparent 70%)}.constellation-stage canvas{pointer-events:auto;touch-action:none;cursor:grab}.constellation-stage canvas:active{cursor:grabbing}#map-points{position:absolute;inset:0;pointer-events:none}.map-point{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);pointer-events:auto;display:grid;place-items:center;padding:0;border-radius:50%;overflow:visible}.map-point:hover{text-decoration:none!important}.map-point-fallback{font-size:21px;line-height:1}.constellation-ready .map-point-fallback{visibility:hidden}.map-point-label{position:absolute;top:45px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:14px;font-weight:300;opacity:0;pointer-events:none;background:var(--bg);padding:3px 7px}.map-point:hover .map-point-label,.map-point:focus-visible .map-point-label,.map-point.is-selected .map-point-label,.real-domain .map-point-label{opacity:1}.real-domain .map-point-label{font-size:20px;font-weight:100}.map-point.is-selected{outline:1px solid var(--line);outline-offset:4px}.map-footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding:18px 0;font-size:14px;line-height:1.5;color:var(--muted)}.preview-card{position:absolute;bottom:20px;left:20px;width:min(310px,calc(100% - 40px));padding:24px;background:var(--bg);border:1px solid var(--line);z-index:5}.preview-card .preview-kicker{font-size:13px;color:var(--muted);margin-bottom:14px}.preview-card h2{font-size:23px;margin-bottom:15px;font-weight:300}.preview-card p{font-size:16px;line-height:1.5}.preview-card a{display:inline-block;font-size:15px;margin-top:22px;text-underline-offset:4px}#close-preview{position:absolute;right:5px;top:5px;width:40px;height:40px;font-size:24px}#map-fallback{position:absolute;top:8px;left:10px;right:10px;font-size:14px;text-align:center;color:var(--muted)}
@media(max-width:480px){.archive-toolbar{flex-wrap:wrap}.archive-view-choice{margin-left:auto}.constellation-stage{height:58vh;min-height:410px}.map-footer{font-size:13px}.map-toolbar{font-size:13px}.map-point-label{font-size:12px}.real-domain .map-point-label{font-size:17px}}
.preview-card{max-height:calc(100% - 32px);overflow:auto;overscroll-behavior:contain}.preview-model{position:relative;aspect-ratio:1.5;margin:6px -8px 17px;background:radial-gradient(ellipse at center,rgba(128,128,128,.12),transparent 75%);border-bottom:1px solid var(--line)}.constellation-stage .preview-model canvas{position:relative;inset:auto;width:100%;height:100%;pointer-events:auto;touch-action:none}.preview-model #preview-model-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;font-size:14px;color:var(--muted);pointer-events:none}#preview-location{font-size:14px;color:var(--muted);margin-top:9px}.preview-card #preview-description{font-size:15px;line-height:1.45}
body[data-domain] .description dl{display:grid;grid-template-columns:100px 1fr;gap:12px 22px}body[data-domain] .description dt{margin:0}body[data-domain="the-glory"] .description a{text-underline-offset:4px}#preview-creator{font-size:14px;color:var(--muted);margin-top:7px}

/* List entries share the interactive contribution preview. */
button.domain-list-row{width:100%;text-align:left;color:var(--fg)}button.domain-list-row:hover{text-decoration:none}.domain-list-row{grid-template-columns:50px 1fr 120px 90px 65px}.list-open{font-size:14px;text-align:right}.domain-list-row[aria-expanded=true] .list-title{text-decoration:underline;text-underline-offset:6px}.preview-card.list-preview{position:fixed;left:auto;right:24px;top:50%;bottom:auto;transform:translateY(-50%);width:min(360px,calc(100vw - 36px));max-height:calc(100dvh - 48px);box-shadow:0 10px 60px #0003}.list-preview .preview-model canvas{position:relative;width:100%;height:100%;touch-action:none}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){.domain-list-row{grid-template-columns:25px 1fr 65px}}
@media(max-width:480px){.preview-card.list-preview{right:18px}}

/* Keep the growing map quiet at a distance; reveal names on approach or selection. */
.real-domain .map-point-label{opacity:0}.real-domain.show-title .map-point-label,.map-point:hover .map-point-label,.map-point:focus-visible .map-point-label,.map-point.is-selected .map-point-label{opacity:1}

.map-point:not(.real-domain){width:28px;height:28px}

/* Local contribution flow */
.top-navigation{flex-wrap:wrap;justify-content:flex-end;gap:12px 22px}.add-domain-link{white-space:nowrap}.contribute-page{margin:56px 40px 50px}.contribute-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px;gap:20px}.contribute-heading a{font-size:15px;color:var(--muted);text-decoration:none}.local-notice{font-size:16px;line-height:1.6;color:var(--muted);max-width:780px;margin:24px 0 34px}.contribute-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7vw;align-items:start}.form-step>label,.form-pair label{display:block;font-weight:500;font-size:17px;margin:24px 0 10px}.form-step>label:first-child{margin-top:0}.form-step label span{font-weight:300;color:var(--muted)}.form-step input:not([type=file]),.form-step textarea{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--fg);font:inherit;font-size:20px;padding:10px 0;line-height:1.5}.form-step textarea{resize:vertical;min-height:130px}.form-step input:focus,.form-step textarea:focus{outline:1px solid var(--focus);outline-offset:5px}.form-step input[type=file]{display:block;width:100%;padding:14px 0;color:var(--muted);font-size:15px}.form-step input::file-selector-button{font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--fg);padding:10px 15px;margin-right:12px;cursor:pointer}.field-help{font-size:14px;color:var(--muted);line-height:1.5}.form-pair{display:grid;grid-template-columns:1fr 2fr;gap:26px}.form-pair>div{min-width:0}.primary-action{display:inline-block;border:1px solid var(--fg);padding:13px 20px;font-size:17px;min-height:48px;margin-top:28px}.primary-action:hover:not(:disabled){background:var(--fg);color:var(--bg);text-decoration:none}.upload-preview{position:sticky;top:28px}.upload-preview h2{font-size:23px}.upload-preview .preview-model{margin:18px 0 12px;aspect-ratio:1}.upload-preview canvas{width:100%;height:100%}.upload-preview audio{width:100%;margin-top:12px}#sound-preview{margin-top:24px;font-size:16px}#review-details h2{font-size:30px;margin:12px 0 24px}#review-description{font-size:22px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}#review-metadata{display:grid;grid-template-columns:80px 1fr;gap:12px 22px;margin-top:28px}.form-actions{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}#form-error,#form-status{margin-top:22px;font-size:16px;line-height:1.5}#form-error{border-left:2px solid var(--fg);padding-left:14px}.local-badge{font-size:14px;color:var(--muted)}.detail-local-note{margin:24px 40px 0}.local-management{margin:28px 40px 48px;font-size:15px}.local-management button{padding:12px 0;text-decoration:underline;text-underline-offset:4px}.local-management #remove-confirm{border-top:1px solid var(--line);padding-top:20px;margin-top:14px}.local-management #cancel-remove{margin-left:24px}#local-title{font-weight:100;margin:0}#local-description{white-space:pre-wrap;overflow-wrap:anywhere}.list-story{min-width:0;overflow-wrap:anywhere}.description dd{overflow-wrap:anywhere}
@media(min-width:1550px){.contribute-page{max-width:1520px;margin-left:auto;margin-right:auto}}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){.contribute-page{margin:36px 24px}.contribute-grid{grid-template-columns:1fr;gap:36px}.upload-preview{position:static}.upload-preview .preview-model{max-height:460px}.top-navigation{gap:8px 14px}.info-link{font-size:14px}.detail-local-note,.local-management{margin-left:24px;margin-right:24px}}
@media(max-width:480px){.contribute-page{margin:28px 18px}.contribute-heading h1{font-size:26px}.form-pair{grid-template-columns:1fr}.form-pair label{margin-top:20px}.top-navigation{width:100%;justify-content:space-between}.detail-local-note,.local-management{margin-left:18px;margin-right:18px}}

.list-creator{display:block;font-size:15px;color:var(--muted);margin-top:6px;line-height:1.4}

:root[data-backdrop=clear] .preview-model{background:transparent}

/* Names fade in as you approach a star. */
.map-point-label{transition:opacity .35s}
/* Touch screens: taps are picked on the canvas, so a swipe can start anywhere, even on a star. */
.touch-map .map-point{pointer-events:none}
/* Phones and small tablets: the constellation bleeds edge to edge and softly into the page. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 #constellation-view .constellation-stage{width:100vw;margin-left:calc(50% - 50vw);height:82svh;min-height:460px;max-height:860px}
 #constellation-view .constellation-stage>canvas{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)}
 .constellation-stage .preview-card{bottom:max(20px,env(safe-area-inset-bottom))}
}
/* Star buttons share one layer beneath the preview card. */
#map-points{z-index:1}.constellation-stage .preview-card{z-index:5}

/* ═══════════ Pink, green and white palette · was rainbow.css ═══════════ */
/* Local-only colour study: pink, green and white. */
.experiment-banner{display:flex;justify-content:space-between;gap:16px;padding:10px 40px;font-size:12px;line-height:1.4;position:relative;z-index:2;pointer-events:none}.experiment-appearance{gap:10px}.experiment-appearance select{font:inherit;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:9px 4px;cursor:pointer}.experiment-appearance select:focus-visible{outline:1px solid var(--focus);outline-offset:4px}
:root[data-theme=rainbow]{--bg:#ff7be7;--fg:#fff;--muted:#fff;--line:#ffffff66;--focus:#fff;color:#fff;color-scheme:light}
:root[data-theme=rainbow] body{background:radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%);background-attachment:fixed;min-height:100vh}

:root[data-theme=rainbow] .identity,:root[data-theme=rainbow] .top-navigation{pointer-events:auto}
:root[data-theme=rainbow] .wordmark{background:transparent}
:root[data-theme=rainbow] .wordmark img{visibility:visible}
:root[data-theme=rainbow] .identity p{font-weight:300}
:root[data-theme=rainbow] .top-navigation{background:none}
:root[data-theme=rainbow] .experiment-appearance option{background:#ff7be7;color:#fff}


:root[data-theme=rainbow] .archive-toolbar>*{pointer-events:auto}


:root[data-theme=rainbow] .map-toolbar button{pointer-events:auto}

:root[data-theme=rainbow] .map-point-label{background:none;border:0;box-shadow:none;color:#fff;padding:4px 0;font-size:14px;font-weight:300;top:28px}
:root[data-theme=rainbow] .map-point.is-selected{outline:none}
:root[data-theme=rainbow] .map-point:focus-visible{outline:1px solid #fff;outline-offset:2px}
:root[data-theme=rainbow] .preview-card{left:auto;right:40px;bottom:100px;background:#ff7be7;color:#fff;border:0;box-shadow:none;backdrop-filter:none;padding:24px;z-index:5}
:root[data-theme=rainbow] .preview-card.list-preview{bottom:auto}
:root[data-theme=rainbow] .preview-card a{color:#fff;text-underline-offset:6px}
:root[data-theme=rainbow] .preview-model{background:transparent!important;border:0}
:root[data-theme=rainbow] .viewer:before{opacity:0!important}
:root[data-theme=rainbow] .backdrop-choice{visibility:hidden;pointer-events:none}
:root[data-theme=rainbow] .viewer-heading:before{content:'Transparent backdrop';position:absolute;font-size:14px}
:root[data-theme=rainbow] .viewer-heading,:root[data-theme=rainbow] .viewer-foot,:root[data-theme=rainbow] .title-row,:root[data-theme=rainbow] .info-page{border:0}
:root[data-theme=rainbow] .story,:root[data-theme=rainbow] .info-copy,:root[data-theme=rainbow] #domain-form{background:none;box-shadow:none}
:root[data-theme=rainbow] #list-view{position:relative;z-index:2}
:root[data-theme=rainbow] .domain-list-row{background:none;border:0;border-bottom:1px solid #ffffff66;padding:28px 0}
:root[data-theme=rainbow] .domain-list-row:hover .list-title{color:#bfff8b}
:root[data-theme=rainbow] input::placeholder,:root[data-theme=rainbow] textarea::placeholder{color:#ffffffb3}
:root[data-theme=rainbow] .primary-action{border:1px solid #fff;color:#fff;background:none}
:root[data-theme=rainbow] .primary-action:hover{background:#ff7be7;color:#fff}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){.experiment-banner{padding:10px 24px}.site-header{flex-wrap:wrap}.site-header .identity{width:min(440px,85vw)}.top-navigation{margin-left:auto}:root[data-theme=rainbow] .map-toolbar,:root[data-theme=rainbow] .preview-card{right:24px;bottom:96px}}
@media(max-width:480px){.experiment-banner{padding:8px 18px;font-size:11px}.experiment-banner span{max-width:160px;text-align:right}:root[data-theme=rainbow] .map-toolbar,:root[data-theme=rainbow] .preview-card{right:18px;width:calc(100% - 36px);max-height:calc(100dvh - 160px)}}

/* Original two-position switch with a separate colour option. */
.site-header .top-navigation>.info-link{font-size:14px;font-weight:300}
.experiment-theme-controls{gap:14px}
#rainbow-mode{font:inherit;font-weight:300;color:var(--fg);background:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:0 0 0 14px;min-height:24px;cursor:pointer}
#rainbow-mode[aria-pressed=true]{text-decoration:underline;text-underline-offset:5px}
#rainbow-mode:focus-visible{outline:1px solid var(--fg);outline-offset:4px}

:root[data-theme=rainbow] .constellation-stage{background:transparent}

/* Reference palette: a vertical pink-to-green wash for contribution panels. */
:root[data-theme=rainbow] .preview-card{background:linear-gradient(180deg,#ff7be7 0%,#bfff8b 100%);border:1px solid #fff;box-shadow:none;left:20px;right:auto;bottom:20px;padding:24px;max-height:calc(100% - 40px)}
:root[data-theme=rainbow] .preview-card.list-preview{left:auto;right:24px;bottom:auto;max-height:calc(100dvh - 48px)}
:root[data-theme=rainbow] .domain-list-row{background:linear-gradient(180deg,#ff7be7 0%,#bfff8b 100%);padding:24px;margin-bottom:12px;border:1px solid #fff}
:root[data-theme=rainbow] .preview-model{background:transparent!important}
@media(max-width:480px){:root[data-theme=rainbow] .preview-card{width:calc(100% - 40px)}:root[data-theme=rainbow] .preview-card.list-preview{right:18px;width:calc(100vw - 36px)}}

/* Paint the root canvas too, including body margins and overscroll edges. */
:root[data-theme=rainbow]{background:radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%) fixed;background-size:100vw 100vh;min-height:100%}
:root[data-theme=rainbow] body{background:transparent;display:flow-root;min-height:100vh;min-height:100dvh}

/* Upload actions share a transparent outline and reversed colour wash. */
:root[data-theme=rainbow] .form-step input::file-selector-button{background:transparent;color:#fff;border-color:#fff;cursor:pointer}
:root[data-theme=rainbow] .contribute-page .primary-action{background:transparent;color:#fff;border-color:#fff}
:root[data-theme=rainbow] .form-step input::file-selector-button:hover,
:root[data-theme=rainbow] .form-step input:focus-visible::file-selector-button,
:root[data-theme=rainbow] .contribute-page .primary-action:hover:not(:disabled),
:root[data-theme=rainbow] .contribute-page .primary-action:focus-visible{background:linear-gradient(90deg,#ff7be7 0%,#bfff8b 100%);color:#fff;border-color:#fff;text-decoration:none}

/* Small opaque labels stay legible against reflective stars. */
:root[data-theme=rainbow] .map-point-label{top:42px;background:linear-gradient(90deg,#ff7be7 0%,#bfff8b 100%);color:#fff;padding:5px 9px;font-size:14px;font-weight:500;line-height:1.25;border:1px solid #ffffffa6;border-radius:0;box-shadow:none}

/* A single viewport backdrop remains continuous on long iPhone pages. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 :root[data-theme=rainbow]{background:#bfff8b}
 :root[data-theme=rainbow] body{isolation:isolate;background:transparent}
 :root[data-theme=rainbow] body::before{content:'';position:fixed;inset:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%);background-repeat:no-repeat}
}

/* ═══════════ Home constellation layouts (phone full screen, computer edge to edge) · was mobile-modes.css ═══════════ */
/* Home page constellation layouts: full screen on phones, edge to edge on computers. */
.domain-bar,.map-close,.map-hint,.map-invite{display:none}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 /* Shared bottom bar: previous / current Domain / next */
 .map-immersive .domain-bar:not([hidden]){display:grid;grid-template-columns:52px 1fr 52px auto;align-items:center;position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:6;background:var(--bg);border:1px solid var(--line);min-height:62px}
 .bar-step{font-size:30px;line-height:1;height:60px;font-weight:100}
 .bar-name{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;padding:6px 4px;border-left:1px solid var(--line);border-right:1px solid var(--line);overflow:hidden}
 .bar-title{font-size:17px;font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .bar-count{font-size:12px;color:var(--muted)}
 .bar-reset{font-size:13px;padding:0 14px;height:60px;border-left:1px solid var(--line);color:var(--muted)}
 .map-immersive .constellation-stage .preview-card{bottom:calc(86px + env(safe-area-inset-bottom));left:12px;right:12px;width:auto;max-height:min(52dvh,calc(100% - 200px))}
 .map-immersive .constellation-stage .preview-model{aspect-ratio:1.9}
 .map-immersive .map-hint{display:block;position:absolute;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;margin:0;padding:8px 14px;font-size:13px;white-space:nowrap;background:var(--bg);border:1px solid var(--line);opacity:0;transition:opacity .6s;pointer-events:none}
 .map-immersive .map-hint.is-visible{opacity:1}
 .map-immersive #constellation-view .constellation-stage>canvas{-webkit-mask-image:none;mask-image:none}
 .map-immersive .map-footer,.map-immersive .map-toolbar{visibility:hidden}
 .map-immersive,.map-immersive body{overflow:hidden;overscroll-behavior:none}

 /* A · Full screen: the map is the phone home page, the header floats above it. */
 .map-fullscreen.map-immersive #constellation-view .constellation-stage{position:fixed;inset:0;width:100%;height:100%;min-height:0;max-height:none;margin:0;z-index:0}
 .map-fullscreen.map-immersive .site-header,.map-fullscreen.map-immersive .archive-toolbar{position:relative;z-index:2;pointer-events:none}
 .map-fullscreen.map-immersive .site-header a,.map-fullscreen.map-immersive .site-header button,.map-fullscreen.map-immersive .site-header label,.map-fullscreen.map-immersive .archive-toolbar label{pointer-events:auto}
 .map-fullscreen.map-immersive .map-toolbar,.map-fullscreen.map-immersive .map-footer{display:none}
 .map-fullscreen.map-immersive #main{position:static}

 /* B · Step in: the map waits in the page, a tap opens it over everything. */
 .map-step-in:not(.map-immersive) .map-invite{display:block;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);margin:0;padding:9px 16px;font-size:14px;white-space:nowrap;border:1px solid var(--line);background:var(--bg);pointer-events:none;z-index:3;animation:qd-invite 3.2s ease-in-out infinite}
 .map-step-in.map-immersive #constellation-view .constellation-stage{position:fixed;inset:0;width:100%;height:100%;min-height:0;max-height:none;margin:0;z-index:100;background:var(--bg)}
 :root[data-theme=rainbow].map-step-in.map-immersive #constellation-view .constellation-stage{background:radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%)}
 .map-step-in.map-immersive .map-close{display:grid;place-items:center;position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:7;width:48px;height:48px;font-size:28px;font-weight:100;background:var(--bg);border:1px solid var(--line)}
}
@keyframes qd-invite{0%,100%{opacity:.65}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.map-invite{animation:none}}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 /* A · a soft veil behind the header keeps its words readable over passing stars. */
 .map-fullscreen.map-immersive .constellation-stage:before{content:'';position:absolute;left:0;right:0;top:0;height:var(--veil,250px);z-index:3;pointer-events:none;background:var(--bg);-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);transition:opacity .4s}
 :root[data-theme=rainbow].map-fullscreen.map-immersive .constellation-stage:before{background:radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%) fixed;background-size:100vw 100vh}
 .map-fullscreen.map-immersive .site-header,.map-fullscreen.map-immersive .archive-toolbar{transition:opacity .4s}
 .map-focus .site-header,.map-focus .archive-toolbar{opacity:0;pointer-events:none!important}
 .map-focus .site-header *,.map-focus .archive-toolbar *{pointer-events:none!important}
 .map-focus .constellation-stage:before{opacity:0}
}

/* Desktop edge (Test A on computers): the constellation runs edge to edge and full height,
   the header floats over it, and the Domain bar sits at the bottom. */
@media(min-width:801px){
 .map-edge body{position:relative}
 .map-edge #constellation-view{display:flex;flex-direction:column;min-height:var(--edge-rest,60vh)}
 .map-edge #constellation-view .constellation-stage{position:absolute;top:0;left:0;width:100%;height:100vh;height:100dvh;min-height:620px;z-index:0}
 .map-edge .site-header,.map-edge .archive-toolbar,.map-edge .map-toolbar,.map-edge .map-footer{position:relative;z-index:2;pointer-events:none}
 .map-edge .site-header a,.map-edge .site-header button,.map-edge .site-header label,.map-edge .archive-toolbar label{pointer-events:auto}
 .map-edge #map-reset{display:none}
 .map-edge .map-footer{margin-top:auto;border-top:0}
 /* Soft veils keep the header and footer words readable over passing stars. */
 .map-edge .constellation-stage:before,.map-edge .constellation-stage:after{content:'';position:absolute;left:0;right:0;z-index:3;pointer-events:none;background:var(--bg)}
 .map-edge .constellation-stage:before{top:0;height:var(--veil,300px);-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
 .map-edge .constellation-stage:after{bottom:0;height:150px;-webkit-mask-image:linear-gradient(transparent,#000 75%);mask-image:linear-gradient(transparent,#000 75%)}
 :root[data-theme=rainbow].map-edge .constellation-stage:before,:root[data-theme=rainbow].map-edge .constellation-stage:after{background:radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%) fixed;background-size:100vw 100vh}
 .map-edge .domain-bar:not([hidden]){display:grid;grid-template-columns:56px 1fr 56px auto;align-items:center;position:absolute;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 80px));bottom:92px;z-index:6;background:var(--bg);border:1px solid var(--line);min-height:62px}
 .map-edge .bar-step{font-size:30px;line-height:1;height:60px;font-weight:100}
 .map-edge .bar-name{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;padding:6px 8px;border-left:1px solid var(--line);border-right:1px solid var(--line);overflow:hidden}
 .map-edge .bar-title{font-size:18px;font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .map-edge .bar-count{font-size:12px;color:var(--muted)}
 .map-edge .bar-reset{font-size:13px;padding:0 16px;height:60px;border-left:1px solid var(--line);color:var(--muted)}
 .map-edge .bar-step:hover,.map-edge .bar-name:hover .bar-title,.map-edge .bar-reset:hover{text-decoration:underline;text-underline-offset:5px}
 .map-edge .constellation-stage .preview-card{left:40px;bottom:92px;max-height:calc(100% - var(--veil,300px) - 100px)}
 :root[data-theme=rainbow].map-edge .domain-bar{border-color:#fff}
}
@media(min-width:1550px){.map-edge .constellation-stage .preview-card{left:max(40px,calc(50vw - 760px))}}

/* Compact desktop navigation occupies its own lower-right corner. */
@media(min-width:801px){
 .map-edge .domain-bar:not([hidden]){left:auto;right:40px;bottom:28px;transform:none;width:340px;grid-template-columns:44px minmax(0,1fr) 44px auto;min-height:48px}
 .map-edge .bar-step,.map-edge .bar-reset{height:48px}
 .map-edge .bar-name{min-height:48px;padding:4px 8px}
 .map-edge .bar-title{font-size:15px}
 .map-edge .bar-count{font-size:11px}
 .map-edge .bar-reset{padding:0 12px;font-size:12px}
 :root[data-theme=rainbow].map-edge .domain-bar{background:linear-gradient(90deg,#ff7be7cc,#bfff8bcc);border-color:#ffffffa6}
}
/* Match the fixed page backdrop without iOS background-attachment tiling. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 :root[data-theme=rainbow].map-fullscreen.map-immersive .constellation-stage:before{background-attachment:scroll;background-size:100vw 100lvh;background-repeat:no-repeat;background-position:0 0}
}
@media(min-width:801px){.map-edge .map-footer p:last-child{display:none}}

/* ═══════════ Readability and Safari edge colour · was readability.css ═══════════ */
/* Separate typography study; original palette and layout retained. */
:root[data-theme=rainbow] body{text-shadow:0 1px 1.5px rgba(35,52,31,.32),0 0 5px rgba(35,52,31,.12)}
:root[data-theme=rainbow] .info-link,:root[data-theme=rainbow] .archive-view-choice,:root[data-theme=rainbow] .bar-title,:root[data-theme=rainbow] .bar-count,:root[data-theme=rainbow] .bar-reset,:root[data-theme=rainbow] .preview-card a,:root[data-theme=rainbow] .preview-kicker{font-weight:500}
:root[data-theme=rainbow] .story p,:root[data-theme=rainbow] .info-copy p{font-weight:300}
:root[data-theme=rainbow] .map-point-label{text-shadow:0 1px 1px rgba(35,52,31,.38)}

/* Follow the transparent lettering, not its rectangular image bounds. */
:root[data-theme=rainbow] .wordmark{filter:drop-shadow(0 1px 1.5px rgba(35,52,31,.32)) drop-shadow(0 0 5px rgba(35,52,31,.12))}
/* Keep the gradient on the root canvas, including exposed mobile edges. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 :root[data-theme=rainbow]{background:radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%) fixed;background-size:100vw 100lvh;background-repeat:no-repeat}
 .site-header{padding-top:calc(25px + env(safe-area-inset-top));padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
}
@media(max-width:420px){.site-header{padding-top:calc(23px + env(safe-area-inset-top));padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}}

/* Rainbow is also the browser canvas fallback during loading and overscroll. */
:root,:root[data-theme=rainbow]{color-scheme:light;background-color:#bfff8b}

/* Safari paints its own toolbar extensions with a flat root colour.
   Match that colour at both page edges, with a soft fade to the existing
   pink centre. Use the dynamic viewport so the join follows toolbar resizing.
   Apply identical paint to the header veil to prevent a second seam. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 :root[data-ios-safari=true][data-theme=rainbow]{
  --safari-page-gradient:linear-gradient(180deg,#bfff8b 0%,rgba(191,255,139,0) 16%,rgba(191,255,139,0) 80%,#bfff8b 96%,#bfff8b 100%),radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%);
  background-image:var(--safari-page-gradient);background-size:100vw 100vh;background-size:100vw 100dvh;
 }
 :root[data-ios-safari=true][data-theme=rainbow] body::before{
  height:100vh;height:100dvh;background-image:var(--safari-page-gradient);background-size:100vw 100vh;background-size:100vw 100dvh;
 }
 :root[data-ios-safari=true][data-theme=rainbow].map-fullscreen.map-immersive .constellation-stage:before{
  background-image:var(--safari-page-gradient);background-size:100vw 100vh;background-size:100vw 100dvh;
 }
}

.domain-ar-row{display:flex;justify-content:flex-end;padding:18px 0}.domain-ar-link{display:inline-block;color:inherit;text-decoration:none;border:1px solid currentColor;padding:12px 20px;font-size:16px;font-weight:500}.domain-ar-link:hover{background:linear-gradient(90deg,#ff7be7,#bfff8b)}.domain-ar-link:focus-visible{outline:2px solid white;outline-offset:4px}

/* ═══════════ Page backdrop and full-page model surface · was surface.css ═══════════ */
/* Surface study: published typography, stable paint and a page-wide model. */
:root[data-theme=rainbow],html{background-color:#bfff8b}
:root[data-theme=rainbow] body::before,body::before{content:'';position:fixed;inset:0;height:100lvh!important;z-index:-1;pointer-events:none;background-image:linear-gradient(180deg,#bfff8b 0%,rgba(191,255,139,0) 16%,rgba(191,255,139,0) 80%,#bfff8b 96%),radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%)!important;background-size:100vw 100lvh!important;background-repeat:no-repeat}
html,body{isolation:isolate}body{background:transparent!important}
:root[data-ios-safari=true][data-theme=rainbow]{background-size:100vw 100lvh!important}
body.page-model .site-header,body.page-model main{position:relative;z-index:1}
body.page-model #model-canvas{position:fixed;inset:0;width:100vw;height:100%;z-index:0;pointer-events:none}
body.page-model .viewer{isolation:auto;touch-action:none;cursor:grab}
body.page-model .viewer:before{display:none}
body.page-model .viewer:focus-visible{outline:1px solid white;outline-offset:4px}

/* On touch devices the browser scrolls the canvas with the page. */
body.contained-model .viewer{overflow:hidden;touch-action:none}
body.contained-model #model-canvas{position:static;width:100%;height:100%;pointer-events:none}

/* Safari's browser extension must sample a solid edge rather than the
   scrolling root gradient. The visible page keeps its fixed gradient. */
@media (max-width:800px), (pointer:coarse) {
 html[data-ios-safari=true]{background:#bfff8b!important}
 html[data-ios-safari=true] body{background-color:#bfff8b!important}
 html[data-ios-safari=true] body::before{background-color:#bfff8b}
 html[data-ios-safari=true] body::after{
  content:'';position:fixed;top:0;left:0;right:0;
  height:env(safe-area-inset-top,0px);background-color:#bfff8b;
  z-index:2147483646;pointer-events:none;
 }
}

/* ═══════════ Travel controls in the constellation · was journey.css ═══════════ */
.journey-navigation{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0 22px;font-size:14px}.journey-navigation button{color:inherit;font:inherit;background:transparent;border:1px solid #fff8;padding:10px 14px;cursor:pointer}.journey-navigation span{opacity:.85}.map-point-label{transition:opacity .4s!important}.explore-point .map-point-label{opacity:1!important;white-space:nowrap}@media(max-width:600px){.journey-navigation{font-size:12px;flex-wrap:wrap}.journey-navigation span{max-width:180px}}
.journey-navigation{position:relative;z-index:40;pointer-events:auto}.map-point.show-title .map-point-label{opacity:1;visibility:visible}.map-point:hover .map-point-label,.map-point:focus-visible .map-point-label{opacity:1;visibility:visible}

.journey-navigation[hidden]{display:none}

/* Keep mobile travel controls separate from the active Domain preview. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 .journey-navigation{flex-wrap:nowrap;gap:8px;margin:10px 0 16px;font-size:13px}
 .journey-navigation button{min-height:44px;padding:10px 14px;white-space:nowrap}
 .journey-navigation button:last-child{margin-left:auto}
 .journey-navigation span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 :root:has(#preview-card:not([hidden])) .journey-navigation{visibility:hidden;pointer-events:none}
}

/* ═══════════ Updates of 4 October 2026 · was fixes.css ═══════════ */
/* Updates, 4 October 2026: phone travel controls and reversed card gradient. */

/* Preview cards and List View rows keep the pink-to-green wash, reversed,
   so the pink sits behind the description, place and creator at the bottom. */
:root[data-theme=rainbow] .preview-card,
:root[data-theme=rainbow] .domain-list-row{background:linear-gradient(180deg,#bfff8b 0%,#ff7be7 100%)}

/* Phone: the travel controls sit just above the Domain bar, with the other controls,
   instead of floating over the stars. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 .map-fullscreen.map-immersive .journey-navigation{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));margin:0;z-index:7;pointer-events:none}
 .map-fullscreen.map-immersive .journey-navigation button{pointer-events:auto;background:#ff7be7;border:1px solid #fff;min-height:44px}
 .map-fullscreen.map-immersive .map-hint{bottom:calc(144px + env(safe-area-inset-bottom))}
}

/* Phone: easier tapping. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 /* Return links keep their look, but the area a thumb can hit grows to about 44px tall. */
 .return-navigation a,.contribute-heading>a,.info-heading>a{display:inline-block;padding:14px 12px 14px 0;margin:-14px -12px -14px 0}
 header #back{position:relative;top:0;right:0}header #back::after{content:'';position:absolute;inset:-14px 0}
 /* "Explore Domain" becomes a full-width footer button on the preview, styled like the Domain bar.
    It stays in view while the preview scrolls on small phones, and text scrolls cleanly beneath it. */
 .preview-card #preview-link{display:flex;align-items:center;justify-content:center;min-height:52px;margin:18px -24px -24px;padding:12px 16px;
  background:#ff7be7;border:0;border-top:1px solid #fff;color:#fff;text-decoration:none;font-size:16px;font-weight:500;position:sticky;bottom:-24px;z-index:1}
 .preview-card #preview-link:active{background:#f06ad8}
}

/* Add a Domain: compare the optimised scan with the original before saving. */
.version-choice{display:flex;align-items:center;gap:13px;margin:14px 0 0;padding:0;border:0;font-size:16px}
.version-choice label{position:relative;cursor:pointer;min-height:44px;display:flex;align-items:center}
.version-choice input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.version-choice input+span{color:var(--muted)}
.version-choice input:checked+span{color:var(--fg);text-decoration:underline;text-underline-offset:6px}
.version-choice input:focus-visible+span{outline:1px solid var(--focus,#fff);outline-offset:4px}
.optimise-summary{margin-top:10px}

/* Add a Domain: white controls to match the site, in place of the browser's grey ones. */
.form-step textarea::-webkit-scrollbar{width:10px;height:10px}
.form-step textarea::-webkit-scrollbar-thumb{background:#ffffff80;border-radius:5px}
.form-step textarea::-webkit-scrollbar-track,.form-step textarea::-webkit-scrollbar-corner{background:transparent}
.form-step textarea::-webkit-resizer{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M11 4L4 11M11 8L8 11' stroke='%23fff' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1px bottom 1px}
.year-field{position:relative;display:block}
.form-step .year-field input[type=number]{appearance:textfield;-moz-appearance:textfield;padding-right:34px}
.form-step .year-field input[type=number]::-webkit-inner-spin-button,.form-step .year-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.year-steps{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}
.year-steps button{display:grid;place-items:center;width:28px;height:18px;padding:0;color:#fff;background:none;border:0;cursor:pointer;opacity:.85}
.year-steps button:hover{opacity:1}
.year-steps svg{filter:drop-shadow(0 1px 1px rgba(35,52,31,.35))}
@media(pointer:coarse){.year-steps{display:none}.form-step .year-field input[type=number]{padding-right:0}}

/* ═══════════ Consent, guidelines and details pages · was community.css ═══════════ */
/* Consent step on Add a Domain, and the community guidelines page. */
.consent-step{margin:34px 0 6px;padding-top:26px;border-top:1px solid rgba(255,255,255,.55);max-width:620px}
.consent-step h3{font-size:24px;font-weight:500;margin:0 0 10px}
.consent-step>p{font-size:16px;line-height:1.55;margin:0 0 10px}
.consent-check{display:flex;gap:14px;align-items:flex-start;padding:10px 0;min-height:44px;cursor:pointer;font-size:17px;line-height:1.45}
.consent-check input,.credit-choice input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border:1.5px solid #fff;background:transparent;cursor:pointer;display:grid;place-items:center}
.consent-check input:checked{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ff7be7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.consent-check input:focus-visible,.credit-choice input:focus-visible{outline:1px solid #fff;outline-offset:3px}
.credit-choice{border:0;margin:18px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center}
.credit-choice legend{font-size:17px;padding:0;margin-bottom:6px;width:100%}
.credit-choice label{display:flex;gap:10px;align-items:center;min-height:44px;cursor:pointer;font-size:17px}
.credit-choice input{border-radius:50%}
.credit-choice input:checked{box-shadow:inset 0 0 0 4px #ff7be7;background:#fff}
.credit-choice input:disabled,.credit-choice input:disabled+span{opacity:.55;cursor:not-allowed}
.consent-note{font-size:15px;line-height:1.6;color:var(--muted);margin:12px 0 0}
.consent-note a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.consent-step+.form-actions .primary-action:disabled{opacity:.5;cursor:not-allowed}

.guidelines-copy{max-width:760px}
.guidelines-copy p,.guidelines-copy li{font-size:clamp(18px,1.5vw,21px);font-weight:300;line-height:1.6}
.guidelines-copy .guidelines-lead{font-size:clamp(22px,2vw,28px);font-weight:100;line-height:1.5;margin-bottom:1.4em}
.guidelines-copy h2{font-size:clamp(20px,1.7vw,24px);font-weight:500;margin:1.8em 0 .5em}
.guidelines-copy ul{margin:.4em 0 0;padding-left:1.2em}
.guidelines-copy li{margin:.25em 0}
.guidelines-copy li::marker{content:"✦  ";font-size:.8em}
.guidelines-copy a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.guidelines-copy .guidelines-close{margin-top:2.2em}
.info-copy a{color:inherit;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.guidelines-copy p+p{margin-top:.8em}
.guidelines-copy li strong{font-weight:500}
.turnstile-box:not(:empty){margin:18px 0 4px;min-height:65px}
.thank-you{max-width:620px;margin-top:34px}
.thank-you h2{font-size:30px;font-weight:500;margin:0 0 18px}
.thank-you p{font-size:20px;line-height:1.55;margin:0 0 14px}
.thank-you-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:26px!important}
.thank-you a{color:inherit;text-decoration:underline;text-underline-offset:5px}
.consent-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.contribute-heading+.contribute-grid{margin-top:40px}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){.contribute-heading+.contribute-grid{margin-top:30px}}

/* ═══════════ Design polish rounds 1–3 (8 October 2026) · was polish.css ═══════════ */
/* Design polish, round 1 (8 October 2026). Loaded last on every page. */

/* 1 · Readability on the green edges of the gradient.
   Everyday text gets a slightly deeper version of the same soft green shadow;
   large display type keeps the original, lighter one. */
:root[data-theme=rainbow] body,body.ar-page{text-shadow:0 1px 2px rgba(35,52,31,.5),0 0 7px rgba(35,52,31,.24)}
:root[data-theme=rainbow] :is(h1,.identity p,.info-copy p,.description p,.guidelines-lead,.list-title,.preview-card h2,#review-description,.point-title),
body.ar-page :is(h1,header p){text-shadow:0 1px 1.5px rgba(35,52,31,.36),0 0 5px rgba(35,52,31,.14)}
/* No Thin type below 24px: it breaks up on the pale green. */
.upload-preview h2{font-weight:300}
.journey-navigation span{opacity:1}

/* 2 · Constellation preview card on computers: the model gives up height first,
   so the description and "Explore Domain" always stay in view. */
@media(min-width:801px){
 .map-edge .constellation-stage .preview-card{display:flex;flex-direction:column;overflow:auto;max-height:calc(100% - var(--card-top,300px) - 92px)}
 .map-edge .constellation-stage .preview-card>*{flex:none}
 .map-edge .constellation-stage .preview-model{flex:0 1 186px;min-height:84px;aspect-ratio:auto}
 /* A four-line teaser; the full story is one click away on the Domain page. */
 .map-edge .constellation-stage #preview-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
 /* While a Domain is open, the small map captions step back behind the card. */
 .map-edge .map-toolbar p,.map-edge .journey-navigation>span{transition:opacity .3s}
 .map-edge:has(#preview-card:not([hidden])) :is(.map-toolbar p,.journey-navigation>span){opacity:0}
}
/* Short laptop windows: a slightly tighter card. */
@media(min-width:801px) and (max-height:780px){
 .map-edge .constellation-stage .preview-card{padding:18px 22px}
 .map-edge .constellation-stage .preview-card .preview-kicker{display:none}
 .map-edge .constellation-stage .preview-card h2{margin-bottom:8px}
 .map-edge .constellation-stage .preview-card #preview-link{margin-top:14px}
 .map-edge .constellation-stage #preview-description{-webkit-line-clamp:3;line-clamp:3}
}

/* 3 · List View on computers: the open preview takes its own column beside the list,
   instead of covering the view switch and the place and year. */
@media(min-width:801px){
 #list-view:has(.list-preview:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) min(360px,34vw);column-gap:24px;align-items:start}
 #list-view:has(.list-preview:not([hidden]))>.domain-list-row{grid-column:1}
 #list-view .preview-card.list-preview{grid-column:2;grid-row:1/span 400;position:sticky;top:24px;right:auto;left:auto;transform:none;width:auto;margin:0;max-height:calc(100dvh - 48px)}
 :root[data-theme=rainbow] #list-view .preview-card.list-preview{right:auto}
}
@media(min-width:801px) and (max-width:1199px){
 #list-view:has(.list-preview:not([hidden])) .domain-list-row{grid-template-columns:25px 1fr 65px;gap:12px}
 #list-view:has(.list-preview:not([hidden])) .list-place{grid-column:2}
 #list-view:has(.list-preview:not([hidden])) .list-year{grid-column:3;grid-row:2}
 #list-view:has(.list-preview:not([hidden])) .list-open{grid-column:3;grid-row:1;text-align:right}
}
/* The chosen title stays white and underlined, never green on green. */
:root[data-theme=rainbow] .domain-list-row:hover .list-title{color:#fff}

/* 4 · The backdrop switch belongs to an earlier colour study; its label is retired. */
:root[data-theme=rainbow] .viewer-heading:before{content:none}

/* 6 · Add a Domain: messages and file pickers in the site's own style. */
.field-error{margin:10px 0 0;padding-left:12px;border-left:2px solid #fff;font-size:15px;font-weight:500;line-height:1.45}
.form-step [aria-invalid=true]{border-bottom:2px solid #fff!important}
.file-pick{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:12px 0 4px}
.file-pick .file-input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;padding:0;margin:0}
.file-button{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #fff;font-size:16px;cursor:pointer;white-space:nowrap}
.file-button:hover,.file-input:focus-visible+.file-button{background:linear-gradient(90deg,#ff7be7 0%,#bfff8b 100%)}
.file-input:focus-visible+.file-button{outline:1px solid #fff;outline-offset:4px}
.file-name{font-size:15px;min-width:0;overflow-wrap:anywhere}
.file-pick [aria-invalid=true]+.file-button{border-width:2px}
.form-step .file-pick+.field-error{margin-top:6px}

/* 5 · Page not found. */
.lost-page .info-copy p{margin-bottom:.9em}
#remove-sound{min-height:44px;padding:0;font-size:15px;text-decoration:underline;text-underline-offset:4px}


/* ───────────── Round 2 · consistency (8 October 2026) ───────────── */

/* 8–9 · One family of buttons. A box for the main action on each screen
   (↗ opens another page, → is the next step here, ✦ shares); underlined words for everything else. */
.primary-action,.domain-ar-link,.file-button,.journey-navigation button,body.ar-page .action{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;
 border:1px solid #fff;color:#fff;background:transparent;font-size:16px;font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer}
:root[data-theme=rainbow] .contribute-page .primary-action,:root[data-theme=rainbow] .primary-action{font-size:16px;font-weight:500;padding:12px 20px}
.primary-action:hover:not(:disabled),.domain-ar-link:hover,.file-button:hover,.journey-navigation button:hover,body.ar-page .action:hover:not(:disabled),
.primary-action:focus-visible,.domain-ar-link:focus-visible,.journey-navigation button:focus-visible{
 background:linear-gradient(90deg,#ff7be7 0%,#bfff8b 100%);color:#fff;text-decoration:none}
.primary-action:disabled,body.ar-page .action:disabled{opacity:.5;cursor:not-allowed}
/* Compact boxes inside the map's toolbar. */
.journey-navigation button{min-height:40px;padding:9px 16px;font-size:14px}
/* On phones the preview's main action stays the full-width pink bar, styled like the Domain bar. */
@media(min-width:801px){
 .preview-card #preview-link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;margin-top:20px;padding:10px 18px;border:1px solid #fff;font-size:15px;font-weight:500;text-decoration:none}
 .preview-card #preview-link:hover,.preview-card #preview-link:focus-visible{background:linear-gradient(90deg,#ff7be7 0%,#bfff8b 100%)}
}

/* 10 · One type scale.
   Page titles: Thin, 28–34px. Domain titles: Thin, larger. Lead paragraphs: Light, 22–28px.
   Body: Light, 18–21px. Thin is kept for large display type only. */
.archive-toolbar h1,.info-heading h1,.contribute-heading h1,.moderate-heading h1{font-size:clamp(28px,2.4vw,34px);font-weight:100;line-height:1.2}
.info-copy p,.guidelines-copy .guidelines-lead{font-size:clamp(22px,2vw,28px);font-weight:300;line-height:1.55}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 .archive-toolbar h1,.info-heading h1,.contribute-heading h1,.moderate-heading h1{font-size:26px}
 .info-copy p,.guidelines-copy .guidelines-lead{font-size:22px}
}

/* 11 · Domain pages: the title speaks for itself, the text lines up with "← All Domains",
   and the story reads at a comfortable width. */
.domain-detail #domain-title>span:not(#local-title),.domain-detail .description>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.domain-detail #domain-title{font-size:clamp(34px,3.2vw,46px);font-weight:100;line-height:1.15}
.domain-detail .title-row{padding:0 0 4px;min-height:0}
.domain-detail .description{padding:24px 0 0}
.domain-detail .description p{margin-top:0;max-width:560px}
/* The AR action joins the viewer's foot row; the place and year are already beside the story. */
.viewer-foot{align-items:center}
.viewer-foot>span{display:none}
.viewer-foot .domain-ar-row{padding:0;margin-left:auto;flex:none}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 .domain-detail #domain-title{font-size:34px}
 .domain-detail .description{padding-top:16px}
 .domain-detail .description p{font-size:22px}
}

/* 12 · Home on computers: fewer captions around the map. The count is in the heading,
   and "Preview points are illustrative" joins the hint line at the foot. */
@media(min-width:801px){
 .map-edge .map-toolbar p{visibility:hidden}
 .map-edge .map-footer{justify-content:flex-start;gap:0;flex-wrap:wrap;max-width:calc(100% - 400px)}
 .map-edge .map-footer p:last-child{display:block}
 .map-edge .map-footer p+p:before{content:"·";margin:0 .55em}
}

/* 13 · Arrow and close buttons never show an underline (it lingered after a tap on phones). */
.bar-step:hover,.map-edge .bar-step:hover,#close-preview:hover,.map-close:hover{text-decoration:none!important}
@media(hover:hover){.bar-step:hover,#close-preview:hover,.map-close:hover{background:rgba(255,255,255,.16)}}
@media(hover:none){.bar-reset:hover,.map-edge .bar-reset:hover,.bar-name:hover .bar-title,.map-edge .bar-name:hover .bar-title{text-decoration:none!important}}

/* 14 · The Domain bar's small words are a little larger. */
.bar-count,.map-edge .bar-count{font-size:13px}
.bar-reset{font-size:14px}
.map-edge .bar-reset{font-size:13px}

/* 15 · Phones: page headings and their link wrap cleanly; Add a Domain shows its preview area
   once there is something to preview, and "Drag to rotate" only when there is a model. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 .info-heading{flex-wrap:wrap;row-gap:6px}
 .info-heading a{white-space:nowrap}
 .contribute-grid:has(#review-details[hidden]) .upload-preview{display:none}
}
.upload-preview:has(#preview-model-status:not([hidden]))>p.field-help:not(.optimise-summary){visibility:hidden}
.mini-sound{min-height:56px}
.mini-sound .audio-toggle{font-size:17px}
#sound-preview>p{margin:0}

/* 16 · The AR page shares the site's header proportions and navigation style. */
body.ar-page header{padding:32px 40px 0}
body.ar-page .wordmark{width:min(440px,52vw)}
body.ar-page header p{font-size:clamp(18px,1.75vw,25px);margin:12px 0 0;line-height:1.3}
body.ar-page .test-label{top:37px;right:40px;font-size:14px;font-weight:500;text-decoration:none}
body.ar-page .test-label:hover{text-decoration:underline;text-underline-offset:5px}
body.ar-page .action{font-size:16px}
@media(max-width:700px){
 body.ar-page header{padding:calc(25px + env(safe-area-inset-top)) 24px 0}
 body.ar-page .wordmark{width:min(420px,calc(100% - 20px))}
 body.ar-page header p{font-size:18px}
 body.ar-page .test-label{margin-top:16px}
}
@media(max-width:420px){body.ar-page header{padding-left:18px;padding-right:18px}body.ar-page header p{font-size:16px}}

/* 17 · iPad and small tablets: the preview and the Domain bar keep a comfortable width, centred. */
@media(min-width:601px) and (max-width:800px){
 .map-immersive .constellation-stage .preview-card,
 .map-immersive .domain-bar:not([hidden]){left:50%;right:auto;width:min(560px,calc(100% - 24px));transform:translateX(-50%)}
}


/* ───────────── Round 3 · content and finish ───────────── */

/* 19 · List View on computers: number, place and year line up with the title,
   so rows of different lengths still read as one tidy table. */
@media(min-width:801px){
 .domain-list-row{align-items:start}
 .domain-list-row .list-number,.domain-list-row .list-place,.domain-list-row .list-year,.domain-list-row .list-open{padding-top:9px}
}
.domain-detail .description>h2+dl{margin-top:28px}
.map-edge .bar-count{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* List View: the heading's thin rule would show in the gap between the list and an open preview; the rows' own frames take its place. */
:root:has(#list-view:not([hidden])) .archive-toolbar{border-bottom-color:transparent}
/* Phones and tablets: the preview's "Explore Domain" bar sits flush at the bottom of the card
   (no negative offsets, which iPhone Safari drew with an empty band below), and the card doesn't bounce. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 .preview-card,:root[data-theme] .preview-card{padding-bottom:0;overscroll-behavior:none}
 .preview-card #preview-link{margin-bottom:0;bottom:0}
}

/* ─── Buttons: one dependable hover (8 October 2026) ─── */
:root{--qd-wash:linear-gradient(90deg,#ff7be7 0%,#bfff8b 100%)}
/* The hidden file inputs stay 1px, so the "Choose a scan / Choose a sound" boxes and "Remove sound" receive the pointer
   (an older full-width rule had stretched the invisible input over them). */
.form-step .file-pick .file-input{width:1px;height:1px;padding:0}
/* Every box button gets the same pink-to-green wash on hover, on every page (moderation used flat pink). */
@media(hover:hover){
 :root[data-theme] .primary-action:hover:not(:disabled),
 :root[data-theme] .domain-ar-link:hover,
 :root[data-theme] .file-button:hover,
 :root[data-theme] .journey-navigation button:hover{background:var(--qd-wash);color:#fff;text-decoration:none}
}
/* Phones and tablets: the wash shows while a finger presses the button, instead of staying stuck on after a tap.
   (":not(#qd-press)" only raises priority above the older hover rules; no element has that id.) */
@media(hover:none){
 :root[data-theme=rainbow] :is(.primary-action,.domain-ar-link,.file-button,.journey-navigation button):hover:not(:active):not(#qd-press){background:transparent}
 :root[data-theme=rainbow].map-fullscreen.map-immersive .journey-navigation button:hover:not(:active):not(#qd-press){background:#ff7be7}
 :root[data-theme=rainbow] :is(.primary-action:not(:disabled),.domain-ar-link,.file-button,.journey-navigation button):active:not(#qd-press){background:var(--qd-wash);color:#fff;text-decoration:none}
}
/* Small text links all underline on hover, like "← All Domains" on the Domain pages. */
.contribute-heading>a:hover{text-decoration:underline;text-underline-offset:5px}
/* Box buttons all carry the same soft shadow as the text around them
   (buttons had lost it, so "Preview Domain →" looked lighter than "Choose a scan"). */
:root[data-theme] :is(.primary-action,.domain-ar-link,.file-button,.journey-navigation button,.preview-card #preview-link){text-shadow:0 1px 2px rgba(35,52,31,.5),0 0 7px rgba(35,52,31,.24)}
/* Computers: the travel row ("One archive · …") only catches the pointer on its buttons,
   so the preview card's × (and the stars) beneath its empty space can be clicked. */
@media(min-width:801px){
 .map-edge .journey-navigation{pointer-events:none}
 .map-edge .journey-navigation button{pointer-events:auto}
}

/* ─── Interaction update (9 October 2026) ─── */
/* Zoomable previews (Add a Domain, moderation): a quiet "Reset view" appears once the view has changed. */
.preview-model .preview-reset{position:absolute;right:0;bottom:4px;z-index:2;min-height:40px;padding:8px 2px;font-size:14px;font-weight:500;color:#fff;background:none;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
/* Phones: the bar that leads to the consent boxes on Add a Domain, styled like the Domain bar. */
.share-nudge{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;justify-content:center;min-height:56px;padding:14px 18px;border:1px solid #fff;background:#ff7be7;color:#fff;font:inherit;font-size:16px;font-weight:500;text-align:center;text-shadow:0 1px 2px rgba(35,52,31,.5),0 0 7px rgba(35,52,31,.24);box-shadow:0 10px 40px rgba(35,52,31,.18);cursor:pointer}
.share-nudge[data-ready=true]{background:var(--qd-wash)}
.share-nudge:hover{text-decoration:none!important}
body.has-share-nudge{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
@media(min-width:801px){.share-nudge{display:none!important}}
/* Domain pages on phones and tablets: full-screen view of the scan. */
.viewer-fullscreen,.viewer-close,.viewer-listen{display:none}
body.contained-model .viewer-fullscreen{display:grid;place-items:center;position:absolute;right:8px;bottom:8px;z-index:3;width:44px;height:44px;padding:0;border:1px solid #fff;background:rgba(255,123,231,.35);color:#fff;cursor:pointer}
.viewer-fullscreen svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(35,52,31,.4))}
body.viewer-full{overflow:hidden}
body.viewer-full .viewer{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;height:100dvh;max-height:none;aspect-ratio:auto;
 background-image:linear-gradient(180deg,#bfff8b 0%,rgba(191,255,139,0) 16%,rgba(191,255,139,0) 80%,#bfff8b 96%),radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%);background-color:#bfff8b}
body.viewer-full .viewer-fullscreen{display:none}
body.viewer-full .viewer-close{display:grid;place-items:center;position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:3;width:48px;height:48px;padding:0;font-size:28px;font-weight:100;line-height:1;color:#fff;background:#ff7be7;border:1px solid #fff;cursor:pointer}
body.viewer-full .viewer-listen{display:flex;align-items:center;gap:10px;position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3;min-height:48px;padding:12px 22px;font:inherit;font-size:16px;font-weight:500;color:#fff;background:#ff7be7;border:1px solid #fff;cursor:pointer;text-shadow:0 1px 2px rgba(35,52,31,.5)}
.viewer-listen svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}
.viewer-listen .pause,.viewer-listen.is-playing .play{display:none}
.viewer-listen.is-playing .pause{display:inline}
.viewer-close:hover,.viewer-listen:hover,.viewer-fullscreen:hover{text-decoration:none!important}
#review-details,#consent-step{scroll-margin-top:20px}

/* ═══════════ Grey appearance (9 October 2026) ═══════════
   Chosen with the Appearance switch. A white page with black type, black lines, black 2D stars and
   black outlined buttons that fill black on hover; in the spirit of the first Light version.
   The scans themselves keep their real colours. */
.grey-logo,.grey-only{display:none}
:root[data-theme=grey]{--bg:#fff;--fg:#000;--muted:#000;--line:#000;--focus:#000;--qd-wash:#000;color:#000;color-scheme:light;background:#fff!important;background-image:none!important}
:root[data-theme=grey] body{background:#fff!important;color:#000}
:root[data-theme=grey] body::before,:root[data-theme=grey] body::after{background:#fff!important;background-image:none!important}
html[data-ios-safari=true][data-theme=grey],html[data-ios-safari=true][data-theme=grey] body{background:#fff!important}
:root[data-theme=grey] *{text-shadow:none!important}
:root[data-theme=grey] :is(.wordmark,.year-steps svg,.viewer-fullscreen svg){filter:none!important}
:root[data-theme=grey] ::placeholder{color:#000;opacity:.62}
/* Wordmark with the 2D asterisk beside it. */
:root[data-theme=grey] .dark-logo{display:none}
:root[data-theme=grey] .grey-logo,:root[data-theme=grey] .grey-only{display:block}
/* Quiet backgrounds: no tinted vignettes behind the map or the previews. */
:root[data-theme=grey] :is(.constellation-stage,.preview-model){background:transparent!important}
:root[data-theme=grey] .backdrop-choice{visibility:hidden;pointer-events:none}
/* List View keeps its thin rule under the heading, like the first version. */
:root[data-theme=grey]:has(#list-view:not([hidden])) .archive-toolbar{border-bottom-color:var(--line)}

/* Buttons: black outline; black fill with white words on hover (and while pressed on phones). */
:root[data-theme=grey] :is(.primary-action,.domain-ar-link,.file-button,.journey-navigation button){color:#000;border-color:#000;background:transparent}
:root[data-theme=grey] .contribute-page .primary-action{color:#000;border-color:#000;background:transparent}
@media(hover:hover){
 :root[data-theme=grey] :is(.primary-action:not(:disabled),.domain-ar-link,.file-button,.journey-navigation button):hover,
 :root[data-theme=grey] .contribute-page .primary-action:hover:not(:disabled),
 :root[data-theme=grey] .file-input:focus-visible+.file-button{background:#000!important;color:#fff!important;border-color:#000}
 :root[data-theme=grey] :is(.bar-step,#close-preview,.map-close):hover{background:#000;color:#fff}
}
:root[data-theme=grey] :is(.primary-action:not(:disabled),.domain-ar-link,.file-button,.journey-navigation button):active:not(#qd-press){background:#000;color:#fff}
@media(min-width:801px){
 :root[data-theme=grey] .preview-card #preview-link{border-color:#000;color:#000;background:transparent}
 :root[data-theme=grey] .preview-card #preview-link:hover,:root[data-theme=grey] .preview-card #preview-link:focus-visible{background:#000;color:#fff}
}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 /* Phones: the preview's "Explore Domain" bar, the travel buttons and the Domain bar are white with black lines. */
 :root[data-theme=grey] .preview-card #preview-link{background:#fff;color:#000;border-top:1px solid #000}
 :root[data-theme=grey] .preview-card #preview-link:active{background:#000;color:#fff}
 :root[data-theme=grey].map-fullscreen.map-immersive .journey-navigation button,
 :root[data-theme=grey].map-fullscreen.map-immersive body .journey-navigation button:hover:not(:active):not(#qd-press){background:#fff;border-color:#000;color:#000}
}

/* Forms: black boxes and lines; ticked boxes fill black with a white tick. */
:root[data-theme=grey] .consent-step{border-top-color:#000}
:root[data-theme=grey] :is(.consent-check input,.credit-choice input){border-color:#000}
:root[data-theme=grey] .consent-check input:checked{background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
:root[data-theme=grey] .credit-choice input:checked{background:#000;box-shadow:inset 0 0 0 4px #fff}
:root[data-theme=grey] :is(.consent-check input,.credit-choice input,.file-input):focus-visible{outline-color:#000}
:root[data-theme=grey] .field-error{border-left-color:#000}
:root[data-theme=grey] .form-step [aria-invalid=true]{border-bottom-color:#000!important}
:root[data-theme=grey] .year-steps button{color:#000}
:root[data-theme=grey] .form-step textarea::-webkit-scrollbar-thumb{background:#00000080}
:root[data-theme=grey] .form-step textarea::-webkit-resizer{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M11 4L4 11M11 8L8 11' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1px bottom 1px}
:root[data-theme=grey] .preview-model .preview-reset{color:#000}
/* Phones: the guide bar to the consent boxes. */
:root[data-theme=grey] .share-nudge{background:#fff;color:#000;border-color:#000;box-shadow:0 8px 30px rgba(0,0,0,.12)}
:root[data-theme=grey] .share-nudge[data-ready=true]{background:#000;color:#fff}

/* Domain pages: full-screen view on a white page. */
:root[data-theme=grey] body.contained-model .viewer-fullscreen{border-color:#000;background:rgba(255,255,255,.8);color:#000}
:root[data-theme=grey] body.viewer-full .viewer{background:#fff!important;background-image:none!important}
:root[data-theme=grey] body.viewer-full :is(.viewer-close,.viewer-listen){background:#fff;color:#000;border-color:#000}
/* Grey: star names a touch heavier so they read clearly on white. */
:root[data-theme=grey] .real-domain .map-point-label{font-weight:300}
:root[data-theme=grey] .moderate-tabs button{opacity:1}
@media(hover:hover){:root[data-theme=grey] .bar-reset:hover{background:#000;color:#fff;text-decoration:none}}
:root[data-theme=grey] .bar-reset:active{background:#000;color:#fff}
/* Grey: the Explore more name sits a little lower, so the brushstroke can circle the star freely. */
:root[data-theme=grey] .explore-point .map-point-label{top:62px}
@media(max-width:480px){:root[data-theme=grey] .explore-point .map-point-label{top:58px}}
/* Constellation names can sit above their star when the space below is taken. */
.map-point.label-above .map-point-label{top:auto;bottom:45px}
:root[data-theme=rainbow] .map-point.label-above .map-point-label{top:auto;bottom:42px}
:root[data-theme=grey] .explore-point.label-above .map-point-label{top:auto;bottom:62px}
@media(max-width:480px){:root[data-theme=grey] .explore-point.label-above .map-point-label{top:auto;bottom:58px}}
/* Grey: like Rainbow, the constellation dissolves softly into the page at every edge. */
:root[data-theme=grey] #constellation-view .constellation-stage>canvas{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
:root[data-theme=grey].map-immersive #constellation-view .constellation-stage>canvas,:root[data-theme=grey].map-edge #constellation-view .constellation-stage>canvas{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
/* Rainbow constellation, matching Grey: a green circle around the chosen star, room for the Explore more
   brushstroke, and the same soft fade at the left and right edges. */
:root[data-theme=rainbow][data-stars="2d"] .map-point.is-selected{outline:1px solid #bfff8b;outline-offset:4px}
:root[data-theme=rainbow][data-stars="2d"] .explore-point .map-point-label{top:62px}
:root[data-theme=rainbow][data-stars="2d"] .explore-point.label-above .map-point-label{top:auto;bottom:62px}
@media(max-width:480px){:root[data-theme=rainbow][data-stars="2d"] .explore-point .map-point-label{top:58px}:root[data-theme=rainbow][data-stars="2d"] .explore-point.label-above .map-point-label{top:auto;bottom:58px}}
:root[data-theme=rainbow][data-stars="2d"] #constellation-view .constellation-stage>canvas{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
:root[data-theme=rainbow][data-stars="2d"].map-immersive #constellation-view .constellation-stage>canvas,:root[data-theme=rainbow][data-stars="2d"].map-edge #constellation-view .constellation-stage>canvas{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
/* A name that would sit under the map's controls waits, hidden, until there is room. */
.map-point.label-hidden .map-point-label{opacity:0!important}

/* ═══════════ Polish, 14 October ═══════════ */
/* 1. Phones: the Appearance switch says which version is showing ("Rainbow" or "Grey"). */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){.appearance #theme-name{display:inline;font-size:13px;min-width:0}.theme-choice{gap:7px}}
@media(max-width:340px){.appearance #theme-name{display:none}}

/* 2. Phones: the preview card has a single line above "Explore Domain", not two. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){.preview-card .preview-model{border-bottom:0}}

/* 3. Touch screens: links inside text are easier to tap (a taller touch area; nothing moves). */
@media(pointer:coarse){
 :is(p,li,dd) a,.return-navigation a,.info-heading a{padding:10px 0;margin:-10px 0;-webkit-tap-highlight-color:transparent}
 .info-link{padding-inline:8px;margin-inline:-8px}
}

/* 4. AR page: the logo and "Back to Domain" match the rest of the site. */
body.ar-page .wordmark{width:calc(min(440px,85vw) - 28px)}
body.ar-page .test-label{font-size:16px;font-weight:300}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){body.ar-page .test-label{font-size:15px;display:inline-block;padding:10px 0;margin:6px 0 -10px}}

/* 5. Phones: the viewer hint sits on its own line under "View in AR". */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 .viewer-foot{flex-wrap:wrap;row-gap:14px}
 .viewer-foot .domain-ar-row{order:1;margin-left:auto}
 .viewer-foot #viewer-help{order:2;flex-basis:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}


/* ═══════════ Ideas 7–9 (being tried) ═══════════ */
/* 7. Next Domain, at the foot of each Domain page. */
.domain-next{margin:24px 40px 56px;border-top:1px solid var(--line)}
.domain-next a{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 20px;padding:26px 0 8px;text-decoration:none;color:inherit}
.domain-next-kicker{grid-column:1;font-size:14px;color:var(--muted)}
.domain-next-title{grid-column:1;font-size:clamp(26px,2.4vw,34px);font-weight:100;line-height:1.2}
.domain-next-arrow{grid-column:2;grid-row:1/3;font-size:clamp(26px,2.4vw,34px);font-weight:100;transition:transform .3s}
@media(hover:hover){.domain-next a:hover .domain-next-title{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}.domain-next a:hover .domain-next-arrow{transform:translateX(6px)}}
:root[data-theme=rainbow] .domain-next{border-top-color:rgba(255,255,255,.7)}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){.domain-next{margin:8px 24px 44px}}
@media(max-width:420px){.domain-next{margin:8px 18px 40px}.domain-next a{padding-top:22px}}

/* 8. Phones: very wide scans get a wider, shorter viewer. */
body.contained-model.viewer-wide .viewer{aspect-ratio:3/2}
body.contained-model.viewer-wider .viewer{aspect-ratio:5/3}

/* 9. Add a Domain: Your story · Your files · Consent. */
.add-progress{margin:18px 0 22px}
.add-progress ol{display:flex;gap:6px 22px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.add-progress button{display:flex;align-items:center;gap:8px;min-height:40px;padding:0;font:inherit;font-size:15px;color:inherit;opacity:.72;text-decoration:none!important;background:none}
.add-progress button:disabled{cursor:default}
.add-progress button.is-current{opacity:1}
.add-progress button.is-current span:last-child{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.add-progress button.is-done{opacity:1}
.add-progress-mark{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-size:12px;line-height:1}
.add-progress button.is-done .add-progress-mark{background:currentColor}
:root[data-theme=rainbow] .add-progress button.is-done .add-progress-mark{background:#fff;color:#ff7be7;text-shadow:none}
:root[data-theme=grey] .add-progress button.is-done .add-progress-mark{background:#000;color:#fff}
@media(hover:hover){.add-progress button:not(:disabled):hover span:last-child{text-decoration:underline;text-underline-offset:6px}}
/* On phones the line stays at the top while you fill in the form. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){
 .add-progress{position:sticky;top:0;z-index:20;margin:10px -24px 0;padding:6px 24px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
 .add-progress{transition:background-color .3s}
 :root[data-theme=rainbow] .add-progress.is-stuck{background:rgba(255,123,231,.3)}
 :root[data-theme=grey] .add-progress.is-stuck{background:rgba(255,255,255,.94);box-shadow:0 1px 0 #000}
 .add-progress ol{flex-wrap:nowrap;justify-content:space-between;gap:10px}
 .add-progress button{font-size:14px;gap:6px}
}
@media(max-width:420px){.add-progress{margin-inline:-18px;padding-inline:18px}.add-progress button{font-size:13px}.add-progress-mark{width:20px;height:20px;font-size:11px}}
/* Grey on phones: the lines above already close the page, so Next Domain doesn't add a second one. */
@media(max-width:800px),(pointer:coarse) and (max-height:500px){:root[data-theme=grey] .domain-next{border-top:0;margin-top:0}:root[data-theme=grey] .domain-next a{padding-top:14px}}

/* ═══════════ Phones on their side and iPads (16 October) ═══════════ */
/* Phone on its side: a slim header, the controls in one low row, and the preview as a panel on the right. */
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){
 .site-header{padding:calc(10px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));align-items:center;gap:16px}
 .site-header .identity{width:200px!important}
 .identity p{display:none}
 .top-navigation{flex-wrap:nowrap;gap:20px;padding-top:0}
 .archive-page{margin-top:6px;margin-left:max(20px,env(safe-area-inset-left));margin-right:max(20px,env(safe-area-inset-right))}
 .archive-toolbar{padding-bottom:8px}
 .archive-toolbar h1{font-size:22px}
 .map-fullscreen.map-immersive .journey-navigation{left:auto;right:max(12px,env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom))}
 .map-fullscreen.map-immersive .journey-navigation button{min-height:52px}
 .map-immersive .domain-bar:not([hidden]){left:max(12px,env(safe-area-inset-left));right:auto;transform:none;width:min(440px,calc(100% - 230px));bottom:calc(10px + env(safe-area-inset-bottom));min-height:52px}
 .map-immersive .bar-step,.map-immersive .bar-reset{height:50px}
 .map-immersive .bar-name{min-height:50px}
 .map-immersive .bar-count{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .map-fullscreen.map-immersive .map-hint{bottom:calc(74px + env(safe-area-inset-bottom))}
 .map-immersive .constellation-stage .preview-card{left:auto;right:max(12px,env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));bottom:calc(72px + env(safe-area-inset-bottom));width:min(46%,400px);max-height:none;transform:none;display:flex;flex-direction:column}
 .map-immersive .constellation-stage .preview-model{aspect-ratio:auto;flex:1 1 auto;min-height:90px}
 /* Domain pages: the 3D viewer fits on screen. */
 body.contained-model .viewer{aspect-ratio:auto;height:calc(100svh - 40px);max-height:none}
}
/* iPads and other large touch screens: a little larger text and controls, and the menu on one line. */
@media (pointer:coarse) and (min-width:801px) and (min-height:501px){
 .map-edge,.map-edge body{overscroll-behavior:none}
 .info-link{font-size:17px}
 .appearance>span{display:none}
 .map-edge .domain-bar:not([hidden]){min-height:70px;width:min(460px,calc(100% - 80px));left:auto;right:40px;transform:none}
 .map-edge .map-footer{max-width:calc(100% - 520px)}
 .map-edge .bar-step,.map-edge .bar-reset{height:68px}
 .map-edge .bar-name{min-height:68px}
 .map-edge .bar-title{font-size:20px}
 .map-edge .bar-count{font-size:14px}
 .map-edge .bar-reset{font-size:15px;padding:0 20px}
 :root[data-theme] .map-point-label{font-size:16px}
 :root[data-theme] .map-point.real-domain .map-point-label{font-size:17px}
 .map-toolbar,.map-footer{font-size:15px}
 .journey-navigation{font-size:16px}
 .journey-navigation button{min-height:48px;padding:12px 18px}
 .map-edge .constellation-stage .preview-card{width:min(330px,calc(100% - 80px));bottom:132px}
 .preview-card h2{font-size:26px}
 .preview-card p{font-size:17px}
}
/* iPad upright: Domain pages stack (story, then a large viewer), instead of two narrow columns. */
@media (pointer:coarse) and (min-width:801px) and (orientation:portrait){
 .domain{grid-template-columns:1fr;gap:28px}
 .story{min-height:0}
 .viewer{max-height:none}
}

/* Add a Domain: place suggestions under Location. */
.place-field{position:relative}
.place-list{position:absolute;left:0;right:0;top:100%;z-index:30;margin:4px 0 0;padding:4px 0;list-style:none;max-height:min(320px,50vh);overflow-y:auto;background:var(--bg);border:1px solid var(--line);font-size:16px;line-height:1.35}
.place-list li{padding:10px 14px;cursor:pointer}
.place-list .place-name{font-weight:500}
.place-list li[aria-selected=true]{background:var(--fg);color:var(--bg)}
@media(hover:hover){.place-list li:hover{background:var(--fg);color:var(--bg)}}
:root[data-theme=rainbow] .place-list{background:#ff7be7;border-color:#fff;box-shadow:0 10px 30px rgba(35,52,31,.18)}
:root[data-theme=rainbow] .place-list li[aria-selected=true]{background:#fff;color:#ff7be7;text-shadow:none}
@media(hover:hover){:root[data-theme=rainbow] .place-list li:hover{background:#fff;color:#ff7be7;text-shadow:none}}
:root[data-theme=grey] .place-list{background:#fff;border-color:#000}
:root[data-theme=grey] .place-list li[aria-selected=true]{background:#000;color:#fff}
@media(hover:hover){:root[data-theme=grey] .place-list li:hover{background:#000;color:#fff}}

/* ═══════════ Before publishing (18 October) ═══════════ */
/* List View: room for "London, United Kingdom" on one line. Phones keep their own layout. */
.domain-list-row{grid-template-columns:50px 1fr 200px 90px 65px}
@media(max-width:800px),(pointer:coarse) and (max-height:500px){.domain-list-row{grid-template-columns:25px 1fr 65px}}
/* Info: the small credit for the place list. */
.info-copy .info-credit{font-size:14px;line-height:1.5;margin-top:40px}

/* ═══════════ Add a Domain preview like the Domain view (19 October) ═══════════ */
/* Phones and tablets: a full-screen button, as on Domain pages. "Reset view" moves to the left to make room. */
.preview-fullscreen,.preview-close{display:none}
@media(max-width:800px),(pointer:coarse){
 .preview-model[data-inspect=on] .preview-fullscreen{display:grid;place-items:center;position:absolute;right:8px;bottom:8px;z-index:3;width:44px;height:44px;padding:0;border:1px solid #fff;background:rgba(255,123,231,.35);color:#fff;cursor:pointer}
 .preview-model[data-inspect=on] .preview-reset{right:auto;left:0}
}
.preview-fullscreen svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(35,52,31,.4))}
body.preview-full{overflow:hidden}
body.preview-full .preview-model{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;height:100dvh;max-height:none;aspect-ratio:auto;margin:0;
 border:0}
:root[data-theme] body.preview-full .preview-model{background:linear-gradient(180deg,#bfff8b 0%,rgba(191,255,139,0) 16%,rgba(191,255,139,0) 80%,#bfff8b 96%),radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%) #bfff8b!important}
body.preview-full .preview-fullscreen{display:none!important}
body.preview-full .preview-close{display:grid;place-items:center;position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:3;width:48px;height:48px;padding:0;font-size:28px;font-weight:100;line-height:1;color:#fff;background:#ff7be7;border:1px solid #fff;cursor:pointer}
body.preview-full .preview-model .preview-reset{left:16px;right:auto;bottom:calc(12px + env(safe-area-inset-bottom))}
.preview-close:hover,.preview-fullscreen:hover{text-decoration:none!important}
:root[data-theme=grey] .preview-fullscreen svg{filter:none!important}
:root[data-theme=grey] .preview-model[data-inspect=on] .preview-fullscreen{border-color:#000;background:rgba(255,255,255,.8);color:#000}
:root[data-theme=grey][data-theme] body.preview-full .preview-model{background:#fff!important;background-image:none!important}
:root[data-theme=grey] body.preview-full .preview-close{background:#fff;color:#000;border-color:#000}
/* Computers: the preview card always ends just above the hint line at the foot of the map (it wraps on narrower windows). */
html.map-edge .constellation-stage .preview-card{bottom:var(--card-bottom,92px);max-height:calc(100% - var(--card-top,300px) - var(--card-bottom,92px))}
/* On shorter windows the scan picture gives way first, so the text and Explore Domain stay in view. */
html.map-edge .constellation-stage .preview-card .preview-model{flex:1 1 150px;min-height:70px;max-height:220px;aspect-ratio:auto}
@media(max-height:760px){
 html.map-edge .constellation-stage #preview-description{-webkit-line-clamp:2;line-clamp:2}
 html.map-edge .constellation-stage .preview-card :is(#preview-location,#preview-creator){margin-top:6px;margin-bottom:0}
 html.map-edge .constellation-stage .preview-card h2{margin-bottom:8px}
}
@media(max-height:640px){html.map-edge .constellation-stage .preview-card #preview-creator{display:none}}
html.map-edge .constellation-stage .preview-card .preview-model{flex:1 1 120px;min-height:56px}
@media(max-height:640px){html.map-edge .constellation-stage .preview-card{padding:14px 20px}html.map-edge .constellation-stage .preview-card #preview-link{margin-top:8px}}
/* Autofill (Safari and Chrome): no yellow box; filled-in fields look like the others. */
.form-step :is(input,textarea):-webkit-autofill,.form-step :is(input,textarea):-webkit-autofill:hover,.form-step :is(input,textarea):-webkit-autofill:focus{-webkit-text-fill-color:var(--fg);caret-color:var(--fg);-webkit-box-shadow:0 0 0 1000px transparent inset;transition:background-color 600000s 0s,color 600000s 0s}
.form-step :is(input,textarea):autofill{background:transparent!important}
:root[data-theme=rainbow] .form-step :is(input,textarea):-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff}
:root[data-theme=grey] .form-step :is(input,textarea):-webkit-autofill{-webkit-text-fill-color:#000;caret-color:#000}

/* ═══════════ Rainbow: the top of the page flows into Safari's bar (19 October) ═══════════ */
/* Safari tints its bar (and the strip behind the clock on iPad and iPhone) with one flat colour taken from the top of
   the page. The very top of the page now starts with that same green and eases into the gradient within a few lines, above
   the menu, so the bar and the page meet without an edge and the menu stays easy to read. Grey is unchanged. */
:root[data-theme=rainbow] body::after{content:'';position:fixed;left:0;right:0;top:0;z-index:-1;pointer-events:none;
 height:calc(env(safe-area-inset-top,0px) + 72px);
 background:linear-gradient(180deg,#bfff8b 0%,#bfff8b 14%,rgba(191,255,139,.72) 32%,rgba(191,255,139,.42) 52%,rgba(191,255,139,.18) 72%,rgba(191,255,139,.05) 88%,rgba(191,255,139,0) 100%)}
/* The constellation's top veil (home page) carries the same green start, so the home page meets the bar the same way. */
:root[data-theme=rainbow].map-edge .constellation-stage:before,:root[data-theme=rainbow].map-fullscreen.map-immersive .constellation-stage:before{
 background:linear-gradient(180deg,#bfff8b 0%,#bfff8b 14%,rgba(191,255,139,.72) 32%,rgba(191,255,139,.42) 52%,rgba(191,255,139,.18) 72%,rgba(191,255,139,.05) 88%,rgba(191,255,139,0) 100%) fixed 0 0/100vw calc(env(safe-area-inset-top,0px) + 72px) no-repeat,
  radial-gradient(ellipse at 48% 52%,#ff7be7 0%,#ff7be7 22%,#bfff8b 100%) fixed 0 0/100vw 100vh}
/* Rainbow: the Appearance switch carries the same soft shadow as the menu words. */
:root[data-theme=rainbow] .theme-choice .switch{filter:drop-shadow(0 1px 1px rgba(35,52,31,.42)) drop-shadow(0 0 3.5px rgba(35,52,31,.2))}
/* Rainbow: "Appearance" and "Rainbow" in the same weight as Add a Domain and Info, so the whole menu reads alike on the green. */
:root[data-theme=rainbow] :is(.appearance>span,#theme-name){font-weight:500}