@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Jost:wght@200;300&family=Inter:wght@400;500;600&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#f4f5f8;background:#03050a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}.hero-world{position:absolute;top:0;left:0;width:100%;height:100svh;min-height:560px;overflow:hidden;background:#02040b}.hero-world img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform;transition:transform 1.15s cubic-bezier(.18,.72,.2,1),filter 1s}.vignette{position:absolute;inset:0;background:linear-gradient(90deg,#02050c26,transparent 65%),linear-gradient(0deg,#01030c88,transparent 22%);pointer-events:none}.site-header{height:85px;position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(22px,5vw,85px);z-index:8}.wordmark{font-size:15px;letter-spacing:.26em;font-weight:700}.diamond{color:#c5dcea;margin-left:9px;font-size:13px}.site-header nav{display:flex;gap:clamp(22px,3.3vw,55px)}.site-header nav a{font-weight:300;font-size:15px;transition:opacity .25s}.site-header nav a:hover,.underlink:hover{opacity:.56}.hero{height:100svh;min-height:560px;position:relative}.hero-copy{position:absolute;top:18%;left:clamp(25px,6vw,105px);pointer-events:none}.hero h1{margin:0;font-size:clamp(85px,12vw,202px);font-weight:300;letter-spacing:-.105em;line-height:1}.hero h1 span{color:#9bbccc}.moon-target{position:absolute;background:transparent;border:0;border-radius:50%;cursor:pointer;outline-offset:8px}.moon-target:focus-visible{outline:2px solid white}.prompt{position:absolute;right:clamp(24px,6vw,100px);bottom:9%;border-bottom:1px solid #f1f3f8;padding-bottom:12px;font-weight:500;letter-spacing:.21em;font-size:11px;z-index:5}.prompt span{margin-left:14px}.coordinate{position:absolute;bottom:9%;left:clamp(24px,6vw,105px);font-size:10px;font-weight:400;letter-spacing:.19em;color:#d2e0eb8c}.story{min-height:75vh;background:#080e17;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:100px clamp(25px,11vw,190px);position:relative}.story-index{font-size:11px;letter-spacing:.2em;color:#9fb5c7}.story h2{font-weight:300;font-size:clamp(40px,6vw,98px);letter-spacing:-.07em;line-height:1.1;margin:55px 0 25px}.story p{font-weight:300;max-width:480px;font-size:17px;color:#9eafbd;line-height:1.7}.underlink{font-weight:400;font-size:13px;border-bottom:1px solid #b7c8d5;padding-bottom:11px;margin-top:35px}footer{background:#060b13;padding:27px clamp(22px,5vw,85px);display:flex;justify-content:space-between;gap:12px;color:#a6b6c3;font-size:11px;letter-spacing:.09em}.entering .hero-world img{transform:scale(3.3);transform-origin:var(--focus-x,27%) var(--focus-y,76%);filter:brightness(1.2)}.entering .site-header,.entering .hero-copy,.entering .prompt,.entering .coordinate{opacity:0;transition:opacity .28s}.entering .vignette{background:#01030799}body.entering .moon-target{pointer-events:none}@media(max-width:760px){.site-header{height:72px}.wordmark{font-size:12px}.site-header nav{gap:18px}.site-header nav a{font-size:12px}.hero-world img{object-position:35% center}.hero h1{font-size:clamp(68px,14vw,140px)}.hero-copy{top:20%}.coordinate{bottom:4%}.prompt{bottom:12%}.story{padding:80px 27px}footer{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.hero-world img{transition:none}.entering .hero-world img{transform:none}}

/* Editorial contact list, no cards */
.contacts{background:#060a11;min-height:72vh;padding:115px clamp(25px,11vw,190px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.contacts h2{font-size:clamp(39px,5.9vw,85px);letter-spacing:-.067em;font-weight:300;line-height:1.09;margin:35px 0 12px}
.contacts p{font-weight:300;font-size:17px;max-width:650px;color:#aab8c4;line-height:1.7;margin-bottom:42px}
.people{width:min(100%,810px);display:grid;grid-template-columns:1fr 1fr;column-gap:65px}.people>a,.people>span{font-size:16px;font-weight:300;padding:19px 0;border-bottom:1px solid #ffffff30;display:flex;gap:12px;justify-content:space-between;align-items:baseline;transition:color .2s}.people a:hover{color:#a4d4f0}.people a span{font-size:10px;letter-spacing:.08em;color:#889baa;white-space:nowrap}@media(max-width:760px){.contacts{padding:84px 27px}.people{grid-template-columns:1fr}}

/* 3D moon hero (three.js canvas replaces the former hero image) */
.hero-world{background:radial-gradient(circle at 50% 44%,#1a202d 0,#070a12 34%,#02040b 68%)}
.hero-world canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s ease}
.hero-world.ready canvas{opacity:1}
.hero-world::after{content:"";position:absolute;inset:0;background:#010207;opacity:0;pointer-events:none;transition:opacity .75s ease .3s}
.entering .hero-world::after{opacity:1}
.vignette{background:linear-gradient(0deg,#01030c88,transparent 22%)}
.hero{touch-action:pan-y;user-select:none}.hero.dragging{cursor:grabbing!important}
.hero-copy{left:0;right:0;top:60%;transform:translateY(-50%);text-align:center;animation:hero-in 1s ease .8s both}
.hero h1{font-family:'Jost','DM Sans',Arial,sans-serif;font-weight:300;font-size:clamp(46px,calc(1.6rem + 6vw),128px);letter-spacing:.02em;line-height:1.1;text-shadow:0 2px 34px #02040bcc}
.moon-target{pointer-events:none}
@keyframes hero-in{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.hero-copy{top:60%}.hero h1{font-size:clamp(44px,13vw,96px)}}
@media(prefers-reduced-motion:reduce){.hero-copy{animation:none}.hero-world canvas,.hero-world::after{transition:none}}
.coordinate small{display:block;margin-top:9px;font-size:9px;letter-spacing:.12em;opacity:.75;text-transform:uppercase}
.hero-world{background:#02040b}
.hero-copy{transition:opacity .7s ease}.expanded .hero-copy{opacity:0!important;animation:none}
.coordinate small{opacity:0;transition:opacity .8s ease 1s}.expanded .coordinate small{opacity:.75}
/* Parameter sidebar (tokens.css): docked on the left, pushes the 3D view into the remaining width, edge is draggable */
body{--side:0px;--side-open:min(var(--side-w,400px),calc(100vw - 48px))}
body.side-open{--side:var(--side-open)}
.site-header{left:var(--side);transition:left var(--t-panel) var(--ease)}
.hero{margin-left:var(--side);transition:margin-left var(--t-panel) var(--ease)}
.params{position:absolute;top:0;bottom:0;left:calc(-1 * var(--side));width:var(--side);z-index:9;font-family:var(--font-ui);opacity:0;pointer-events:none;transition:opacity .8s ease,left var(--t-panel) var(--ease),width var(--t-panel) var(--ease)}
.expanded .params{opacity:1;pointer-events:auto;transition-delay:1.2s,0s,0s}
.entering .params{opacity:0;pointer-events:none}
body.side-drag,body.side-drag *{transition:none!important;cursor:col-resize!important;user-select:none}
.params-panel{position:absolute;inset:0;overflow:hidden;background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.params.open .params-panel{border-right:1px solid var(--line)}
.params-list{width:var(--side-open);height:100%;overflow-y:auto;--u:max(6px,min(1svh,calc(var(--side-open) * .0225)));padding:10svh calc(var(--u) * 3);display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u) * 2.2);color-scheme:dark;visibility:hidden;transition:visibility 0s var(--t-panel)}
.params.open .params-list{visibility:visible;transition-delay:0s}
.params-grip{position:absolute;top:0;bottom:0;right:-4px;width:8px;display:none;cursor:col-resize;touch-action:none}
.params.open .params-grip{display:block}
.params-grip::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:var(--accent);opacity:0;transition:opacity var(--t-fast)}
.params-grip:hover::after,.params-grip:focus-visible::after,.side-drag .params-grip::after{opacity:1}
.params-grip:focus-visible{outline:0}
.params-tab{position:absolute;left:100%;top:50%;transform:translateY(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);width:56px;min-height:272px;padding:var(--s6) 0;background:rgb(24 25 28 / .32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-left:0;border-radius:0 var(--r-outer) var(--r-outer) 0;color:var(--text);cursor:pointer;transition:background var(--t-fast)}
.params-tab:hover,.params.open .params-tab{background:rgb(24 25 28 / .7)}
.params-tab span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:17px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.params-tab svg{width:22px;height:22px;color:var(--accent);transition:transform var(--t-panel) var(--ease)}
.params-tab:hover svg{transform:translateX(2px)}
.params.open .params-tab svg{transform:rotate(180deg)}
.params.open .params-tab:hover svg{transform:rotate(180deg) translateX(2px)}
/* Content: short scientific terms, set large, no icons, no accent colour. Every size is a multiple of
   --u (1 % of the window height, capped by the sidebar width). The top and bottom tenth of the sidebar
   stay free; the six items fill the 80 % in between with small gaps. */
.pitem{display:flex;flex-direction:column;gap:calc(var(--u) * 1);min-width:0}
.phead{display:flex;align-items:baseline;gap:calc(var(--u) * 1.2);min-height:calc(var(--u) * 4.6);font-size:calc(var(--u) * 3);font-weight:500;line-height:1.2;color:var(--text)}
.phead small{font-size:calc(var(--u) * 1.8);font-weight:400;color:var(--text-muted)}
.phead output{margin-left:auto;font-size:calc(var(--u) * 4);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.pitem input[type=text],.pitem input[type=date],.pitem input[type=time],.pitem input[type=number]{flex:1;min-width:0;width:100%;height:calc(var(--u) * 8.5);padding:0 calc(var(--u) * 1.8);background:var(--field);border:1px solid transparent;border-radius:var(--r-outer);outline:0;color:var(--text);font:400 calc(var(--u) * 2.7) var(--font-ui);font-variant-numeric:tabular-nums;transition:border-color var(--t-fast),background var(--t-fast)}
.pitem>input[type=text]{flex:none}
.pitem input[type=text]:hover,.pitem input[type=date]:hover,.pitem input[type=time]:hover,.pitem input[type=number]:hover{background:rgb(255 255 255 / .12)}
.pitem input[type=text]:focus-visible,.pitem input[type=date]:focus-visible,.pitem input[type=time]:focus-visible,.pitem input[type=number]:focus-visible{border-color:var(--accent)}
.pitem input[aria-invalid="true"]{border-color:#ff6b5e}
.pitem input[type=date]::-webkit-calendar-picker-indicator,.pitem input[type=time]::-webkit-calendar-picker-indicator{opacity:.7;cursor:pointer;margin:0}
/* Time span block: heading, then Start and Stop as groups (sub-heading, date box, time box below it), then
   the running time as heading of the playback row: Play/Pause and three speed buttons. Breaks between the groups are spacing only. */
.ptime{gap:calc(var(--u) * 2.4)}
.pgroup{display:flex;flex-direction:column;gap:calc(var(--u) * .8);min-width:0}
.psub{font-size:calc(var(--u) * 2.4);font-weight:500;line-height:1.2;color:var(--text)}
.pitem .pgroup>input{flex:none}
/* Speed buttons beside Play/Pause: one may be on (filled), none = standard pace */
.pspeed{flex:1;min-width:0;height:calc(var(--u) * 8.5);min-height:var(--hit);padding:0;background:var(--field);border:1px solid transparent;border-radius:var(--r-outer);color:var(--text);font:500 calc(var(--u) * 2.5) var(--font-ui);font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.pspeed:hover{background:rgb(255 255 255 / .14)}
.pspeed[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.pspeed:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
/* Play/Pause and the simulated time it runs */
.pplay{flex:none;display:grid;place-items:center;width:calc(var(--u) * 8.5);min-width:var(--hit);height:calc(var(--u) * 8.5);min-height:var(--hit);padding:0;background:var(--field);border:1px solid transparent;border-radius:var(--r-outer);color:var(--text);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.pplay:hover{background:rgb(255 255 255 / .14)}
.pplay:focus-visible{border-color:var(--accent);outline:0}
.pplay svg{width:calc(var(--u) * 2.6);height:calc(var(--u) * 2.6)}
.pplay[aria-pressed="true"] .i-play,.pplay[aria-pressed="false"] .i-pause{display:none}
.pnow{white-space:nowrap;font-size:calc(var(--u) * 2.7);font-weight:500;font-variant-numeric:tabular-nums;color:var(--text)}
.pcopy{flex:none;align-self:center;margin-left:auto;padding:calc(var(--u) * .6) calc(var(--u) * 1.4);background:var(--field);border:1px solid transparent;border-radius:var(--r-outer);color:var(--text);font:500 calc(var(--u) * 1.9) var(--font-ui);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.pcopy:hover{background:rgb(255 255 255 / .14)}
.pcopy:focus-visible,.pcopy.done{border-color:var(--accent);outline:0}
.phelp{margin:0;font-size:calc(var(--u) * 1.7);line-height:1.3;color:#ff8a7f}.phelp:empty{display:none}
.pnote{margin:0;font-size:calc(var(--u) * 1.8);line-height:1.3;color:var(--text-muted)}.pnote:empty{display:none}
.pline{display:flex;align-items:center;gap:calc(var(--u) * 1.2)}
.pline label{flex:none;width:calc(var(--u) * 6.5);font-size:calc(var(--u) * 2.2);color:var(--text-muted)}
.prange{cursor:pointer}
.prange input{-webkit-appearance:none;appearance:none;width:100%;height:calc(var(--u) * 4);margin:0;background:none;cursor:pointer}
.prange input::-webkit-slider-runnable-track{height:calc(var(--u) * 1);border-radius:99px;background:linear-gradient(90deg,var(--text-muted) var(--p,0%),rgb(255 255 255 / .16) var(--p,0%))}
.prange input::-webkit-slider-thumb{-webkit-appearance:none;width:calc(var(--u) * 3);height:calc(var(--u) * 3);margin-top:calc(var(--u) * -1);border-radius:50%;border:0;background:var(--text);transition:transform var(--t-fast)}
.prange input::-moz-range-track{height:calc(var(--u) * 1);border-radius:99px;background:linear-gradient(90deg,var(--text-muted) var(--p,0%),rgb(255 255 255 / .16) var(--p,0%))}
.prange input::-moz-range-thumb{width:calc(var(--u) * 3);height:calc(var(--u) * 3);border-radius:50%;border:0;background:var(--text)}
.prange input:active::-webkit-slider-thumb{transform:scale(1.15)}
.prange input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-inner)}
.ptoggles{gap:0}
.param{display:flex;align-items:center;gap:calc(var(--u) * 1.4);width:100%;min-height:calc(var(--u) * 7);padding:0;background:none;border:0;border-radius:var(--r-inner);color:var(--text);font:500 calc(var(--u) * 3) var(--font-ui);text-align:left;cursor:pointer;transition:color var(--t-fast)}
.param[aria-pressed="false"]{color:var(--text-muted)}
.param:hover{color:var(--text)}
.param i{flex:none;margin-left:auto;width:calc(var(--u) * 6.4);height:calc(var(--u) * 3.6);border-radius:99px;background:rgb(255 255 255 / .18);position:relative;transition:background var(--t-fast)}
.param i::after{content:"";position:absolute;top:calc(var(--u) * .4);left:calc(var(--u) * .4);width:calc(var(--u) * 2.8);height:calc(var(--u) * 2.8);border-radius:50%;background:var(--text-muted);transition:transform var(--t-fast) var(--ease),background var(--t-fast)}
.param:hover i{background:rgb(255 255 255 / .3)}
.param[aria-pressed="true"] i,.param[aria-pressed="true"]:hover i{background:var(--accent)}
.param[aria-pressed="true"] i::after{transform:translateX(calc(var(--u) * 2.8));background:var(--accent-ink)}
.param:focus-visible,.params-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.params,.site-header,.hero,.params-tab svg,.param i::after{transition:none}}