header,main,footer{max-width:1440px}main{padding-top:26px;padding-bottom:32px}.viewer-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.viewer-heading h1{font-size:clamp(1.6rem,3vw,2.35rem);letter-spacing:-.04em;margin:4px 0}.viewer-heading .eyebrow{margin:0;font-size:.68rem}.tag{border:1px solid #31505a;border-radius:20px;padding:6px 14px;font-size:.78rem;color:#a9c9d2}.explorer{display:grid;grid-template-columns:minmax(0,1fr) 300px;border:1px solid #29434a;border-radius:16px;overflow:hidden;background:#0b2029}.globe-panel{min-height:580px;position:relative;background:radial-gradient(ellipse at 50% 48%,#16384a 0%,#0a1c2b 46%,#06121c 76%);isolation:isolate}.globe-panel:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;background-image:radial-gradient(1px 1px at 10% 20%,#cee9fc 60%,transparent 100%),radial-gradient(1px 1px at 75% 30%,#cee9fc 60%,transparent 100%),radial-gradient(1px 1px at 32% 85%,#cee9fc 60%,transparent 100%),radial-gradient(1px 1px at 86% 72%,#cee9fc 60%,transparent 100%);background-size:190px 210px}#globe{position:absolute;inset:0;outline-offset:-4px}#globe canvas{display:block;width:100%;height:100%;touch-action:none}.globe-caption{position:absolute;top:22px;left:24px;display:flex;gap:10px;align-items:center;font-size:.76rem;color:#bddbe6;pointer-events:none}.live-dot{height:6px;width:6px;border-radius:50%;background:#88dfcc;box-shadow:0 0 8px #88dfcc}.globe-toolbar{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap}.gesture{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:.72rem;color:#8da5b5;pointer-events:none}.inspector{padding:26px 23px;background:#102630;border-left:1px solid #29434a}.inspector .eyebrow{font-size:.65rem;margin:0 0 8px}.inspector h2{font-size:1.6rem;margin:0}.age{font-size:2.1rem;font-weight:300;color:#88dfcc;margin:6px 0 0;line-height:1.3}#source-title{font-size:.8rem;color:#93afbb;margin:8px 0 22px}label{display:block;font-size:.78rem;color:#b6cbd4;margin-bottom:6px}button,select{font:inherit;font-size:.8rem;border:1px solid #3a5964;color:#dcebee;background:#142f3b;border-radius:7px;padding:9px 12px;cursor:pointer}select{width:100%;padding:11px 8px}button:hover{background:#244654;border-color:#88dfcc}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #88dfcc;outline-offset:3px}button:disabled{opacity:.35;cursor:default}button[aria-pressed=true]{background:#88dfcc;color:#0b2228;border-color:#88dfcc}.step-buttons{display:flex;gap:8px;margin-top:10px}.step-buttons button{flex:1}.source-preview{margin:22px 0 16px}.source-preview img{display:block;width:100%;border:1px solid #36525b;border-radius:5px;aspect-ratio:720/456;object-fit:contain;background:#07131b}.source-preview figcaption{font-size:.7rem;color:#91aeb9;margin-top:7px}.model-note.derived{border-left:2px solid #cdc194;padding-left:10px;color:#d5cba6}.model-note,details{font-size:.76rem;color:#9eb8c3;line-height:1.7}details{border-top:1px solid #2c4650;padding-top:12px}summary{cursor:pointer;color:#c9dce2}.timeline{margin-top:18px;border:1px solid #29434a;border-radius:12px;padding:16px 24px;background:#0e2630}.timeline-top{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;gap:15px}.timeline-top>span:last-child{font-variant-numeric:tabular-nums;color:#88dfcc;font-size:.75rem}#timeline{width:100%;margin:22px 0 8px;accent-color:#88dfcc;cursor:pointer}.timeline-labels{display:flex;justify-content:space-between;gap:14px;font-size:.7rem;color:#95afbb}#status{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);background:#112d35ee;border:1px solid #42616b;padding:12px 18px;border-radius:8px;max-width:85%;width:max-content;font-size:.82rem;pointer-events:none}#status.loaded{top:auto;bottom:16px;left:20px;transform:none;max-width:1px;max-height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}.retry{position:absolute;top:55%;left:50%;transform:translateX(-50%)}@media(min-width:1400px){.globe-panel{min-height:650px}}@media(max-width:850px){.explorer{grid-template-columns:minmax(0,1fr) 250px}.inspector{padding:20px 16px}.globe-panel{min-height:570px}.globe-toolbar{gap:5px}.globe-toolbar button{padding:8px}.tag{display:none}}@media(max-width:640px){header{flex-direction:row;align-items:center;padding:18px}.brand{font-size:.95rem}header nav{font-size:.8rem}main{padding:18px 12px}.viewer-heading{padding:0 6px}.explorer{grid-template-columns:1fr}.globe-panel{min-height:440px}.inspector{border-left:0;border-top:1px solid #29434a;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}.inspector>.eyebrow,.inspector>h2,.inspector>.age,.inspector>#source-title{grid-column:1}.inspector>.source-preview{grid-column:2;grid-row:1/5;margin:0;align-self:center}.inspector>label,.inspector>select,.inspector>.step-buttons,.inspector>.model-note,.inspector>details{grid-column:1/-1}.inspector h2{font-size:1.25rem}.inspector .age{font-size:1.7rem}#source-title{margin:0 0 8px}.timeline{padding:14px}.timeline-labels>span:nth-child(2){display:none}.globe-caption{top:18px;left:18px}.timeline-top{font-size:.75rem}.timeline-top button{font-size:.73rem}.globe-toolbar{bottom:48px}}

/* The globe panel keeps one height whatever the inspector holds. Notes about the
   derived surface and interpolated stops appear and disappear as the viewer is used,
   and without a definite row the grid grew with them and resized the globe. The
   inspector scrolls instead, with a reserved gutter so a scrollbar appearing does not
   shift its text. */
.explorer{grid-template-rows:var(--panel-height,680px)}
.globe-panel{min-height:0}
.inspector{min-height:0;overflow-y:auto;scrollbar-gutter:stable}
@media(min-width:1400px){.explorer{--panel-height:720px}}
@media(max-width:850px){.explorer{--panel-height:650px}}
@media(max-width:640px){.explorer{grid-template-rows:none}.globe-panel{min-height:440px}.inspector{overflow:visible}}

/* The timeline header centres the play button on the panel, not between its
   neighbours: the age readout changes width as the slider moves, and a flex row let
   that shift the button. Equal side columns hold it still. */
.timeline-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.timeline-top>span:first-child{justify-self:start}
.timeline-top>span:last-child{justify-self:end;text-align:right}
.timeline-top>span{min-width:0}

/* The projection picker sits in the globe's own toolbar, so it has to be as compact as
   the buttons beside it rather than the full-width select in the inspector. */
.toolbar-select{width:auto;padding:9px 10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:850px){.toolbar-select{padding:8px 6px;max-width:104px}}

/* Phone layout: the globe and the slider are the instrument, so they come first and
   share the first screen. The explorer's two columns collapse with display:contents so
   the inspector can move below the timeline, which its own grid row could not do. */
@media(max-width:640px){
  main{display:flex;flex-direction:column;gap:12px}
  .viewer-heading{order:0;margin-bottom:0;padding:0 6px}
  .viewer-heading .eyebrow{display:none}
  .viewer-heading h1{font-size:1.35rem;margin:0}
  .explorer{display:contents}
  .globe-panel{order:1;min-height:56vh;min-height:56dvh;border:1px solid #29434a;border-radius:14px}
  .timeline{order:2;margin-top:0;padding:12px 14px}
  .timeline #timeline{margin:14px 0 6px}
  .inspector{order:3;display:block;border:1px solid #29434a;border-top:1px solid #29434a;border-radius:14px;padding:18px 16px}
  .inspector h2{font-size:1.2rem}
  .inspector .age{font-size:1.6rem}
  /* One row always: wrapping put a second row over the sphere. Anything that does not
     fit scrolls sideways instead. */
  .globe-toolbar{bottom:36px;max-width:calc(100% - 20px);overflow-x:auto;padding:2px;
                 scrollbar-width:none;justify-content:flex-start;
                 /* Fade the trailing edge so a control cut off by the screen reads as
                    something to scroll to rather than something broken. */
                 -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
                 mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .globe-toolbar::-webkit-scrollbar{display:none}
  .globe-toolbar button,.globe-toolbar select{font-size:.74rem;padding:8px 9px;flex:0 0 auto}
  .toolbar-select{max-width:96px}
  .gesture{bottom:8px;font-size:.68rem}
}

/* Short viewports, which is mostly a phone held sideways: the page chrome costs more
   than it is worth, and the slider has to stay on screen with the globe. */
@media(max-height:560px){
  .viewer-heading{display:none}
  main{padding-top:10px;padding-bottom:12px}
  .explorer{--panel-height:calc(100dvh - 210px)}
  .timeline{margin-top:12px;padding:10px 16px}
  .timeline #timeline{margin:12px 0 6px}
  .timeline-labels{display:none}
  /* A panel this short has no room under the sphere, so the controls move to the top
     corner and the caption takes the bottom one. */
  .globe-toolbar{top:10px;right:12px;bottom:auto;left:auto;transform:none;
                 justify-content:flex-end;max-width:calc(100% - 24px)}
  .globe-toolbar button,.globe-toolbar select{font-size:.74rem;padding:7px 9px}
  .toolbar-select{max-width:96px}
  .globe-caption{top:auto;bottom:10px;left:14px}
  .gesture{display:none}
}