@import url('fonts.css');
:root{color-scheme:dark;--paper:#f4f2ed;--orange:#ff6a13;--muted:#afb6c0}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#030609;color:var(--paper)}body{font-family:'IBM Plex Sans',sans-serif;overflow-x:clip}canvas,.atmosphere,.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#film{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:saturate(.85);opacity:.85}.atmosphere{background:linear-gradient(180deg,rgba(0,3,8,.42),rgba(0,3,8,.12) 35%,rgba(0,3,8,.2) 70%,rgba(0,3,8,.85)),radial-gradient(ellipse at 50% 40%,rgba(0,3,8,.7),rgba(0,3,8,.12) 72%)}.grain{opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E")}#light{z-index:2;mix-blend-mode:screen}.shell{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:24px max(4.3vw,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom));z-index:3;pointer-events:none}.compare{position:absolute;right:max(4.3vw,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));display:flex;gap:2px;pointer-events:auto;align-items:center}.compare a{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0 10px;color:#a0a8b3;text-decoration:none;font:9px 'IBM Plex Mono',monospace;letter-spacing:.08em;border-bottom:1px solid transparent}.compare a[aria-current]{color:var(--paper);border-bottom-color:var(--orange)}.compare a:hover{color:#ff9240}main{flex:1;display:flex;align-items:center;flex-direction:column;padding:clamp(160px,25svh,340px) 0 90px}.identity{width:min(76vw,1030px);margin-bottom:32px}#logo{width:100%;display:block;overflow:visible}#wordmark{opacity:1;animation:logoIn 2s .3s both;filter:drop-shadow(0 2px 12px #000)}#rays{opacity:0}.copy{pointer-events:auto;text-align:center;max-width:1000px}h1{font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(15px,2vw,26px);line-height:1.65;letter-spacing:.015em;margin:0;text-wrap:balance;text-shadow:0 2px 18px #000}.origin{font-size:12px;font-weight:400;color:#b9c0c9;margin:20px 0 0;line-height:1.6;text-shadow:0 2px 18px #000}h1,.origin{opacity:1;animation:copyIn 1.5s 2.1s both}footer{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;font:10px 'IBM Plex Mono',monospace;letter-spacing:.08em}.location{display:flex;flex-direction:column;gap:5px;text-align:right;font:12px/1.45 'IBM Plex Sans',sans-serif;letter-spacing:.02em;color:#bdc4ce;font-style:normal;pointer-events:auto}.controls{display:flex;align-items:center;gap:25px;pointer-events:auto}button{background:none;color:#b5bdca;border:0;min-height:44px;padding:10px 0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.1em;cursor:pointer;touch-action:manipulation}button:hover{color:#ff9240}a:focus-visible,button:focus-visible,#world:focus-visible{outline:1px solid #ff9240;outline-offset:4px}#replay span{color:#ff9240;font-size:16px;margin-left:8px}#motion{color:#a8b3c4;font-size:8px}#world{z-index:0}body[data-variant="v1"] #world{top:40svh;height:60svh;pointer-events:auto;touch-action:none;cursor:grab}body[data-variant="v1"] #world:active{cursor:grabbing}body[data-variant="v1"] .atmosphere{background:linear-gradient(180deg,#030609 20%,rgba(3,6,9,.6) 48%,transparent 70%,rgba(3,6,9,.74))}body[data-variant="v2"] .atmosphere{background:radial-gradient(ellipse at 50% 35%,rgba(3,6,9,.65),transparent 65%)}body[data-variant="v3"] .atmosphere{background:linear-gradient(180deg,#030609 18%,rgba(3,6,9,.9) 37%,transparent 65%,rgba(3,6,9,.36))}.scene-controls{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;pointer-events:auto}.scene-controls button{font-size:8px;min-width:44px;min-height:44px;color:#87919d}.scene-controls button[aria-pressed="true"]{color:#ff9240}.scene-controls .hint{font:8px 'IBM Plex Mono',monospace;color:#87919d;margin-right:12px;white-space:nowrap}.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}@keyframes logoIn{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}@keyframes copyIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.shell{padding:max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}.compare{right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top))}main{padding:27svh 0 105px}.identity{width:100%;margin-bottom:28px}h1{font-size:14px;line-height:1.7;max-width:365px}.origin{font-size:11px;margin-top:18px;max-width:290px;margin-left:auto;margin-right:auto}.controls{align-items:flex-start;flex-direction:column;gap:0}button{font-size:8px;padding:8px 0}#motion{font-size:8px}.location{font-size:11px;line-height:1.6;gap:2px;max-width:165px;padding-bottom:10px}footer{gap:12px}.scene-controls{bottom:112px;gap:0}.scene-controls .hint{font-size:7px;margin-right:4px}.scene-controls button{min-width:44px}body[data-variant="v1"] #world{top:48svh;height:52svh}}
@media(max-height:550px) and (min-width:651px){main{padding:90px 0 70px}.identity{width:min(54vw,650px);margin-bottom:18px}h1{font-size:15px;max-width:750px}.origin{margin-top:10px}.shell{min-height:580px}.scene-controls{bottom:88px}body[data-variant="v1"] #world{top:130px;height:calc(100% - 130px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;scroll-behavior:auto!important}#rays{opacity:1}}