*{box-sizing:border-box} :root{color-scheme:dark;--accent:#b88aff;--bg:#111316;--text:#ececec;--muted:#9a9da5;--line:#ffffff13}body{margin:0;background:var(--bg);color:var(--text);font-family:'Segoe UI',sans-serif;font-size:14px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:5px}header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-weight:650;font-size:13px;letter-spacing:2px}.brand span{font-weight:400;letter-spacing:1.5px;font-size:10px;color:var(--muted);margin-left:23px}#language{border:1px solid var(--line);border-radius:50%;background:none;width:44px;height:44px;font-size:12px}main{display:grid;grid-template-columns:minmax(0,1fr) 318px;min-height:690px;height:calc(100svh - 142px);max-height:1200px}.stage{position:relative;min-width:0;overflow:hidden;background:#161617}#scene{display:block;width:100%;height:100%;touch-action:pan-y;outline-offset:-4px!important}.intro{position:absolute;top:36px;left:42px;pointer-events:none;z-index:1}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2.2px;color:var(--muted);margin:0 0 18px}h1{font-size:clamp(32px,3.4vw,55px);letter-spacing:-2px;font-weight:400;line-height:1.08;margin:0 0 14px}h1 em{font-family:Georgia,serif;font-weight:400;color:#d7bfec}.intro>p:last-child{color:#a9a3a7;font-size:12px}.scene-bottom{position:absolute;bottom:53px;left:40px;right:35px;display:flex;align-items:center;gap:9px;font-size:11px;color:#d5ced9;pointer-events:none}.live-dot,.tiny-dot{height:5px;width:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}.scene-number{margin-left:auto;color:#9e969e;font-size:10px;letter-spacing:2px}.hint{position:absolute;bottom:25px;left:40px;font-size:11px;color:#9e969e;pointer-events:none}aside{padding:38px 30px 24px;background:#17191c;border-left:1px solid var(--line)}.panel-heading{display:flex;justify-content:space-between;align-items:baseline}.panel-heading .eyebrow{margin-bottom:22px}h2{font-size:25px;font-weight:450;letter-spacing:-.8px;margin:0 0 12px}.description{font-size:13px;line-height:1.8;color:var(--muted);margin:0 0 32px}fieldset{border:0;border-bottom:1px solid var(--line);margin:0 0 29px;padding:0 0 26px}legend,.energy-label label{font-size:10px;letter-spacing:1.6px;font-weight:600;color:#acadb5;margin-bottom:15px}.swatches{display:flex;justify-content:space-between;gap:4px}.swatch{width:45px;height:46px;border:1px solid transparent;background:none;border-radius:50%;display:grid;place-items:center;padding:6px}.swatch span{height:26px;width:26px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 1px 2px #ffffff66,0 0 16px color-mix(in srgb,var(--swatch),transparent 85%)}.swatch[aria-pressed=true]{border-color:var(--swatch);background:#ffffff05}.swatch:hover{background:#ffffff0c}.selection{display:flex;justify-content:space-between;font-size:11px;margin-top:13px}.selection span:last-child{color:var(--muted);font-size:10px}.looks{display:flex;gap:12px;justify-content:space-between}.looks button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:12px;width:68px;color:var(--muted);padding:4px 0;font-size:11px}.look-orb{display:block;width:43px;height:43px;border-radius:50%;outline:1px solid #ffffff18;outline-offset:4px}.evening{background:linear-gradient(140deg,#a57350,#3a2d2f 50%,#161620)}.night{background:linear-gradient(140deg,#515789,#252742 45%,#0a0c18)}.velvet{background:linear-gradient(140deg,#794a82,#3e2b4b 50%,#171020)}.looks button[aria-pressed=true]{color:var(--text)}.looks button[aria-pressed=true] .look-orb{outline-color:var(--accent)}.energy-label{display:flex;align-items:baseline;justify-content:space-between}.energy-label output{font-size:11px;color:var(--accent)}input[type=range]{width:100%;height:25px;margin:0;accent-color:var(--accent);cursor:pointer}.range-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin:5px 0 27px}.pause{width:100%;height:45px;border:1px solid #ffffff20;background:#ffffff04;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px}.pause:hover{background:#ffffff0c}.pause svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}.note{display:flex;align-items:center;gap:12px;margin-top:25px;color:var(--muted);font-size:10px;line-height:1.8}.note p{margin:0}.note-mark{border:1px solid #ffffff28;border-radius:50%;width:19px;height:19px;text-align:center;font-family:Georgia,serif}footer{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 36px;color:var(--muted);font-size:10px;border-top:1px solid var(--line)}footer nav{display:flex;gap:20px}footer a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:32px}footer a:hover{color:var(--accent)}.prototype{color:#747780}#error{position:absolute;left:8%;right:8%;top:48%;padding:22px;background:#17191c;border:1px solid #b88aff;border-radius:8px;line-height:1.8}[hidden]{display:none!important}@media(min-width:1700px){main{grid-template-columns:minmax(0,1fr) 365px}aside{padding:55px 42px}.intro{top:45px;left:55px}}
@media(max-width:850px){header{height:64px;padding:0 22px}.brand span{display:none}main{height:auto;max-height:none;min-height:0;grid-template-columns:1fr}.stage{height:640px}.intro{left:25px;top:26px}h1{font-size:38px}.scene-bottom{left:25px;right:25px}.hint{left:25px;right:15px;font-size:10px}aside{border-left:0;border-top:1px solid var(--line);padding:30px max(25px,calc((100vw - 440px)/2))}.description{margin-bottom:25px}.note{justify-content:center}footer{padding:20px 24px;flex-wrap:wrap;gap:5px 20px}.prototype{display:none}footer nav{gap:18px}.looks{justify-content:flex-start;gap:26px}.swatches{justify-content:flex-start;gap:15px}.selection{max-width:290px}}
@media(max-width:400px){.stage{height:570px}.intro h1{font-size:33px}.intro>p:last-child{font-size:11px}.brand{font-size:11px;letter-spacing:1.5px}.swatches{gap:8px}.hint{font-size:9px}.scene-number{display:none}footer{font-size:9px}}

.header-actions{display:flex;align-items:center;gap:22px}.back{color:var(--muted);font-size:11px;text-decoration:none;min-height:44px;display:flex;align-items:center}.back:hover{color:var(--accent)}.sky-caption{position:absolute;right:27px;top:30px;color:#a5abb9;font-size:9px;letter-spacing:1px;pointer-events:none;text-shadow:0 1px 6px #000}@media(max-width:850px){.sky-caption{top:auto;bottom:78px;left:25px;font-size:9px}.header-actions{gap:12px}.back{font-size:10px}.brand{gap:8px}}@media(max-width:400px){header{padding:0 16px}.brand{font-size:10px;letter-spacing:.7px}.back{font-size:9px}}

#globe-handle{position:absolute;transform:translate(-50%,-50%);border-radius:50%;clip-path:circle(50%);touch-action:none;pointer-events:none;z-index:2}#globe-handle.touching{box-shadow:inset 0 0 30px #b88aff25}#globe-handle:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.object-handle{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:transparent;border:1px dashed #ffffff38;z-index:3;touch-action:none;padding:0;cursor:grab}.object-handle:active{cursor:grabbing;background:#ffffff13}.object-handle span{position:absolute;top:48px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;color:#e0d8cf;background:#16141ca3;padding:3px 6px;border-radius:4px;pointer-events:none}.lamp-handle{border-color:#e7be7966}.lamp-reset{position:absolute;right:20px;bottom:78px;z-index:4;min-height:44px;border:1px solid #ffffff30;background:#17191ce8;border-radius:7px;padding:0 12px;font-size:11px}.energy-control{display:block}@media(pointer:coarse){#globe-handle{pointer-events:auto}.object-handle{width:52px;height:52px}.object-handle span{top:52px}}@media(max-width:850px){header{height:56px;padding:0 16px}.stage{height:clamp(360px,61svh,550px)}.intro{top:14px;left:18px}.intro .eyebrow,.intro>p:last-child,.sky-caption{display:none}.intro h1{font-size:23px;letter-spacing:-.8px;line-height:1.2;margin:0}.intro h1 br{display:none}.intro h1 em{margin-left:5px}.scene-bottom{bottom:12px;left:18px;right:18px;font-size:10px}.hint{display:none}aside{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;padding:18px}.panel-heading,aside>h2,aside>.description,.selection,.range-labels{display:none}fieldset{padding:0;margin:0;border:0;min-width:0}legend,.energy-label label{font-size:9px;letter-spacing:1px;margin:0 0 7px}.swatches{gap:0;justify-content:space-between}.swatch{width:32px;height:44px;padding:3px}.swatch span{width:23px;height:23px}.swatch[aria-pressed=true]{border-radius:20px}.looks{gap:6px;justify-content:space-around}.looks button{width:44px;min-height:48px;gap:7px;padding:3px 0;font-size:9px}.look-orb{width:25px;height:25px;outline-offset:3px}.energy-control{min-width:0}.energy-label{gap:8px}input[type=range]{height:32px}.pause{align-self:end;height:44px;min-width:0;font-size:10px;gap:6px}.note{grid-column:1/-1;margin:0;justify-content:flex-start;font-size:10px;line-height:1.55}.note p br{display:none}.note-mark{flex-shrink:0}footer{padding:10px 18px;min-height:48px;gap:0 12px;font-size:9px}footer nav{gap:12px}.lamp-reset{bottom:42px;right:14px;font-size:10px}.object-handle span{font-size:8px}.back{font-size:10px}#language{width:40px;height:40px}.brand{font-size:10px;letter-spacing:1px;gap:6px}.brand img{width:24px;height:24px}}@media(max-width:355px){aside{padding:14px 12px;gap:12px}.swatch{width:28px}.swatch span{width:20px;height:20px}.brand{font-size:9px}.back{font-size:9px}.header-actions{gap:8px}.intro h1{font-size:21px}}@media(max-height:500px) and (max-width:850px){.stage{height:370px}}

/* The moon stays discoverable through the object itself, without a floating label. */
.moon-handle{border-color:transparent;background:transparent;box-shadow:none}.moon-handle:hover,.moon-handle:focus-visible{border-color:#d6e5ff66}