/* Artwork exhibition. The original canvas, shaders and scene timing stay intact. */
.atlas-entry{pointer-events:auto;margin-left:auto;margin-right:28px;font-size:11.5px;letter-spacing:.12em;padding:11px 0;border-bottom:1px solid #ffffff50}
.atlas-entry span{margin-left:18px;color:var(--accent)}
#photo-ui:not([data-chapter="0"]){left:44vw;top:50svh;width:46vw;height:min(600px,calc(100svh - 230px));transform:translateY(-50%);display:grid;grid-template-rows:28px minmax(0,1fr) 54px 60px;gap:12px;pointer-events:none}
#photo-ui[hidden]{display:none!important}
#photo-ui:not([data-chapter="0"]) .foreground-head{position:relative;inset:auto;grid-row:1;height:28px;border-color:#ffffff30;font-size:9px}
.chapter-art-frame{position:relative;grid-row:2;width:100%;min-height:0;margin:0;overflow:hidden;background:#12242f38;border:1px solid #ffffff24;border-radius:3px;box-shadow:0 14px 42px #0003;isolation:isolate}
#chapter-art-frame #chapter-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:none;background:linear-gradient(140deg,#1b34452e,#07122026);transition:opacity .35s}
#chapter-art-frame #photo-hit{inset:0;width:100%;height:100%;border-radius:0;z-index:2;touch-action:pan-y}
#chapter-art-frame #photo-hit>span{left:auto;right:16px;bottom:16px;transform:none;padding:10px 13px;border-radius:2px;background:#06121cc4;backdrop-filter:blur(14px);font-size:10px;letter-spacing:.08em}
#photo-ui:not([data-chapter="0"]) .photo-meta{position:relative;top:auto;grid-row:3;display:flex;flex-direction:row;align-items:flex-start;gap:16px;min-width:0}
.photo-meta>div:first-child{min-width:0}
#photo-title{font-size:clamp(12px,1.02vw,16px);font-weight:400;letter-spacing:.025em;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#photo-caption{font-size:10px;line-height:1.65;max-width:48ch;margin-top:5px;color:#c5cdd2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.photo-actions{padding-top:1px;font-size:10px;gap:9px}
.photo-actions button{border-radius:2px;width:31px;height:31px;min-width:31px;background:#09162270;border-color:#ffffff3c}
#photo-expand{display:none}
.photo-strip{grid-row:4;display:flex;gap:8px;min-width:0;width:100%;overflow-x:auto;overflow-y:hidden;pointer-events:auto;padding:3px 1px 7px;scrollbar-width:thin;scrollbar-color:#ffffff50 transparent;overscroll-behavior-x:contain}
.photo-thumbnail{position:relative;flex:0 0 80px;height:48px;padding:0;border:1px solid #ffffff25;border-radius:2px;overflow:hidden;opacity:.65;transition:opacity .2s,border-color .2s}
.photo-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}
.photo-thumbnail:hover,.photo-thumbnail[aria-pressed="true"]{opacity:1;border-color:var(--accent)}
.photo-thumbnail[aria-pressed="true"]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}
.chapter:not(#sc0) .stage{width:34vw;max-width:34vw}
.chapter:not(#sc0) .title{font-size:clamp(27px,3.05vw,49px);line-height:1.3;font-weight:300}
.chapter:not(#sc0) .lead{max-width:36ch;font-size:clamp(12px,.99vw,15px);line-height:1.95}
.chapter:not(#sc0) .specs{max-width:32vw;margin-top:26px}
.chapter:not(#sc0) .specs>div{grid-template-columns:65px 1fr;font-size:10px;letter-spacing:.07em}
.art-link{font-size:11px;letter-spacing:.06em;gap:25px}
.hud{opacity:.55;font-size:7px}
.outro-atlas{margin:20px 0 28px}

/* A whole-world index and a distraction-free, uncropped large-image viewer. */
#art-dialog{width:min(1440px,95vw);height:91svh;max-height:91svh;padding:28px 32px 22px;border:1px solid #ffffff38;border-radius:6px;background:#07111af5;overflow:hidden;box-shadow:0 30px 150px #000d}
#art-dialog[open]{display:flex;flex-direction:column}
#art-dialog [hidden]{display:none!important}
#art-dialog .gallery-head{flex:none;gap:24px;margin-bottom:20px;align-items:flex-start}
#art-dialog .gallery-kicker{font-size:8px;letter-spacing:.24em;color:var(--accent);margin:0 0 12px}
#art-dialog .gallery-head h2{font-size:clamp(18px,2vw,29px);font-weight:300;letter-spacing:.04em}
#art-dialog .gallery-head #gallery-caption{font-size:11px;color:#aebbc5;line-height:1.7;margin-top:10px}
#art-dialog #close-gallery{width:40px;height:40px;flex:none;border:1px solid #ffffff40;border-radius:50%;font-size:25px;padding:0}
.gallery-tools{flex:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:16px;border-bottom:1px solid #ffffff24;margin-bottom:20px}
#gallery-tabs{display:flex;gap:7px;overflow:auto;scrollbar-width:none;min-width:0}
#gallery-tabs button,#gallery-view-toggle{font-size:10px;padding:10px 14px;white-space:nowrap;border:1px solid #ffffff2a;border-radius:3px;color:#c1c9d0}
#gallery-tabs button[aria-pressed="true"]{color:#0a1720;background:#e4e8e8;border-color:#e4e8e8}
#gallery-tabs button:disabled{opacity:.38;cursor:default}
#gallery-view-toggle{color:var(--accent);border-color:transparent;padding-right:0;flex:none}
#gallery-viewer{min-height:0;flex:1;display:flex;flex-direction:column}
#gallery-image-button{display:block;min-height:0;flex:1;width:100%;background:#02070c80;border:1px solid #ffffff12;border-radius:3px;overflow:hidden}
#gallery-image{width:100%;height:100%;object-fit:contain;display:block}
.gallery-foot{flex:none;margin-top:12px;gap:28px;font-size:11px}
.gallery-foot button{border-radius:2px;border-color:#ffffff35;padding:4px 22px}
.gallery-grid{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px;align-content:start;padding:0 6px 20px 0;scrollbar-width:thin;scrollbar-color:#ffffff4a transparent;overscroll-behavior:contain}
.atlas-empty{grid-column:1/-1;text-align:center;padding:90px 0;color:#8d9fac;font-size:12px;letter-spacing:.18em}
.atlas-card{min-width:0;text-align:left;align-self:start;padding:0;display:block;border:1px solid transparent;border-radius:3px;overflow:hidden;transition:border-color .2s,background .2s;background:#ffffff03}
.atlas-card:hover,.atlas-card:focus-visible{background:#ffffff08;border-color:#ffffff45}
.atlas-card>img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;transition:filter .2s;background:#101f2b}
.atlas-card:hover>img{filter:brightness(1.08)}
.atlas-label{display:block;padding:12px 11px 14px}
.atlas-label strong{display:block;font-size:12px;font-weight:400;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atlas-label small{display:block;color:#8d9fac;font-size:9px;letter-spacing:.06em;margin-top:7px}
@media(min-width:1600px){#photo-ui:not([data-chapter="0"]){height:min(730px,calc(100svh - 250px));grid-template-rows:28px minmax(0,1fr) 62px 70px}.photo-thumbnail{flex-basis:96px;height:57px}.photo-strip{gap:10px}}
@media(max-width:1100px) and (min-width:901px){#photo-ui:not([data-chapter="0"]){left:43vw;width:44vw}.chapter:not(#sc0) .stage{width:34vw}.photo-actions{gap:5px;font-size:8px}.photo-actions button{width:27px;min-width:27px;height:27px}#photo-caption{font-size:9px}.chapter:not(#sc0) .specs{display:none}}
@media(max-height:730px) and (min-width:901px){#photo-ui:not([data-chapter="0"]){height:calc(100svh - 180px);grid-template-rows:24px minmax(0,1fr) 42px 44px;gap:9px}.photo-thumbnail{height:36px;flex-basis:63px}.chapter:not(#sc0) .specs{display:none}#photo-caption{font-size:9px;-webkit-line-clamp:1}.chapter:not(#sc0) .title{margin-bottom:17px}}

/* Phones use an artwork row above the reading row; horizontal tablets keep two columns. */
@media(max-width:900px){
 .atlas-entry{font-size:9px;margin-right:0;padding:10px 0}.chrome-meta{display:none}
 #photo-ui:not([data-chapter="0"]){left:5vw;top:19svh;width:90vw;height:calc(43svh - 62px);min-height:200px;transform:none;grid-template-rows:22px minmax(0,1fr) 42px 43px;gap:8px}
 #photo-ui:not([data-chapter="0"]) .foreground-head{height:22px;font-size:8px}
 #photo-ui:not([data-chapter="0"]) .photo-meta{gap:10px}
 #chapter-art-frame #photo-hit>span{right:8px;bottom:8px;font-size:8px;padding:6px 8px}
 #photo-title{font-size:11px}#photo-caption{font-size:8px;line-height:1.4;margin-top:3px;-webkit-line-clamp:1;max-width:48ch}
 .photo-actions{font-size:8px;gap:5px}.photo-actions button{width:27px;min-width:27px;height:27px;font-size:13px}
 .photo-strip{gap:6px;padding-bottom:4px}.photo-thumbnail{height:36px;flex-basis:63px}
 .chapter:not(#sc0) .panel{align-content:start;padding-top:63svh;padding-bottom:80px}
 .chapter:not(#sc0) .stage{width:100%;max-width:620px}
 .chapter:not(#sc0) .title{font-size:29px;line-height:1.2;margin-bottom:10px}
 .chapter:not(#sc0) .lead{font-size:12px;line-height:1.75;max-width:60ch}
 .chapter:not(#sc0) .eyebrow{margin-bottom:10px}
 .chapter:not(#sc0) .art-link{font-size:10px;margin-top:10px;padding:6px 0}
 .chapter:not(#sc0) .specs{display:none}
 #art-dialog{width:96vw;max-width:96vw;height:94svh;max-height:94svh;padding:20px 17px 16px}
 #art-dialog .gallery-head{margin-bottom:15px;gap:12px}
 #art-dialog .gallery-head h2{font-size:20px}#art-dialog .gallery-head #gallery-caption{font-size:9px;margin-top:7px}
 #art-dialog .gallery-kicker{font-size:7px;margin-bottom:9px}
 #art-dialog #close-gallery{height:34px;width:34px;font-size:23px}
 .gallery-tools{gap:9px;align-items:flex-start;margin-bottom:14px;padding-bottom:12px;flex-direction:column}
 #gallery-tabs{width:100%;gap:5px}#gallery-tabs button,#gallery-view-toggle{font-size:9px;padding:8px 10px}
 #gallery-view-toggle{padding:2px 0}
 .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
 .atlas-label{padding:9px 6px 11px}.atlas-label strong{font-size:10px}.atlas-label small{font-size:8px;margin-top:5px}
}
@media(max-width:640px){
 #photo-ui:not([data-chapter="0"]){top:max(137px,18svh);height:calc(44svh - 60px)}
 .chapter:not(#sc0) .panel{padding-top:63svh}
 .chapter:not(#sc0) .title{font-size:26px}.chapter:not(#sc0) .lead{font-size:11px;line-height:1.7}
 .chapter:not(#sc0) .eyebrow{font-size:8px;margin-bottom:9px}.chapter:not(#sc0) .art-link{font-size:9px;margin-top:9px}
 #photo-caption{max-width:30ch}#photo-title{font-size:10px}
 .photo-actions{gap:4px;font-size:8px}.photo-actions button{width:26px;min-width:26px;height:26px}
}
@media(max-height:740px) and (max-width:900px) and (orientation:portrait){
 #photo-ui:not([data-chapter="0"]){top:133px;height:calc(58svh - 133px);min-height:170px;grid-template-rows:22px minmax(0,1fr) 35px;gap:7px}
 .photo-strip{display:none}#photo-caption{display:none}
 .chapter:not(#sc0) .panel{padding-top:61svh}.chapter:not(#sc0) .title{font-size:24px}.chapter:not(#sc0) .lead{font-size:10px;line-height:1.7}
 .chapter:not(#sc0) .art-link{margin-top:6px;font-size:9px}.chapter:not(#sc0) .eyebrow{margin-bottom:7px}
}
@media(max-width:900px) and (max-height:550px) and (orientation:landscape){
 .atlas-entry{font-size:8px;padding:5px 0}.chrome{padding-top:6px}
 #photo-ui:not([data-chapter="0"]){left:48vw;top:83px;width:45vw;height:calc(100svh - 145px);min-height:150px;grid-template-rows:18px minmax(0,1fr) 29px;gap:5px}
 #photo-ui:not([data-chapter="0"]) .foreground-head{height:18px;font-size:7px}
 #photo-title{font-size:9px}#photo-caption,.photo-strip{display:none}.photo-actions{font-size:7px}
 .photo-actions button{width:23px;min-width:23px;height:23px}
 .chapter:not(#sc0) .panel{align-content:center;padding-top:78px;padding-bottom:50px}
 .chapter:not(#sc0) .stage{width:39vw;max-width:39vw}.chapter:not(#sc0) .title{font-size:23px;margin-bottom:9px}.chapter:not(#sc0) .lead{font-size:10px;line-height:1.6}
 .chapter:not(#sc0) .eyebrow{font-size:7px;margin-bottom:7px}.chapter:not(#sc0) .art-link{font-size:8px;margin-top:5px}
 #art-dialog{height:96svh;max-height:96svh;padding:12px 18px}.gallery-tools{flex-direction:row;margin-bottom:8px;padding-bottom:8px}.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #art-dialog .gallery-kicker,#art-dialog .gallery-head #gallery-caption{display:none}#art-dialog .gallery-head{margin-bottom:9px}#art-dialog .gallery-head h2{font-size:16px}.gallery-foot{margin-top:6px}.gallery-foot button{font-size:15px;padding:3px 18px}
}
@media(prefers-reduced-motion:reduce){.photo-thumbnail,.atlas-card,.atlas-card>img,#chapter-photo{transition:none}}

/* ── 北辰 2026-10-20：01 创世岛 / 02 居民 / 05 火星 图左文右 ── */
@media (min-width: 641px) {
  body[data-chapter="1"] #photo-ui:not([data-chapter="0"]),
  body[data-chapter="2"] #photo-ui:not([data-chapter="0"]),
  body[data-chapter="5"] #photo-ui:not([data-chapter="0"]) {
    left: 4vw;
    right: auto;
  }
  body[data-chapter="1"] .panel,
  body[data-chapter="2"] .panel,
  body[data-chapter="5"] .panel {
    justify-items: end;
  }
}