:root{--bg:#0e0e11;--fg:#efece6;--dim:#efece68c;--line:#efece633;--sans:"Inter Tight", system-ui, sans-serif;--serif:"Instrument Serif", Georgia, serif;--ease:cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none;overflow:hidden}canvas{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}.vignette{pointer-events:none;background:radial-gradient(at 50% 45%,#0000 55%,#0a180852 100%),linear-gradient(#0000 64%,#08160699),linear-gradient(#081a384d,#0000 20%);position:fixed;inset:0}.dim{pointer-events:none;opacity:0;z-index:1;background:radial-gradient(#0000000d 20%,#0000008c 100%);transition:opacity .5s;position:fixed;inset:0}body.inspecting .dim{opacity:1}.top,.hud,.hint,.credit{text-shadow:0 1px 14px #00000059}.top{letter-spacing:.22em;text-transform:uppercase;z-index:2;justify-content:space-between;align-items:center;padding:28px clamp(20px,4vw,56px);font-size:12px;display:flex;position:fixed;top:0;left:0;right:0}.top-left{align-items:center;gap:14px;display:flex}.urotate-home{letter-spacing:.1em;color:var(--fg);white-space:nowrap;opacity:.85;font-weight:700;text-decoration:none;transition:opacity .2s}.urotate-home:hover{opacity:1}.urotate-home i{opacity:.6;margin-left:2px;font-style:normal}.top-left .mark{border-left:1px solid var(--line);padding-left:14px;font-weight:600}.meta{color:var(--dim)}.hud{z-index:2;pointer-events:none;max-width:min(520px,84vw);position:fixed;bottom:clamp(28px,6vh,60px);left:clamp(20px,4vw,56px)}.numeral{font-family:var(--serif);color:var(--dim);letter-spacing:.04em;margin-bottom:6px;font-size:20px;font-style:italic}h1{font-family:var(--serif);letter-spacing:-.02em;margin-bottom:-.16em;padding:0 .2em .26em 0;font-size:clamp(64px,11vw,160px);font-weight:400;line-height:.9;overflow:hidden}h1 span{will-change:transform;display:inline-block}h1 span.out{animation:.18s cubic-bezier(.7,0,.84,0) forwards out}h1 span.in{animation:in .55s var(--ease) forwards}@keyframes out{to{transform:translateY(-105%)}}@keyframes in{0%{transform:translateY(105%)}to{transform:none}}#caption{color:var(--dim);max-width:36ch;margin-top:14px;font-size:14px;line-height:1.5}#caption.swap{animation:cap .5s var(--ease)}@keyframes cap{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.dots{z-index:3;gap:6px;display:flex;position:fixed;bottom:clamp(28px,6vh,60px);left:50%;transform:translate(-50%)}.dots button{cursor:pointer;background:0 0;border:0;width:34px;height:30px;position:relative}.dots button:after{content:"";background:var(--fg);opacity:.28;width:22px;height:2px;transition:all .5s var(--ease);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dots button:hover:after{opacity:.65}.dots button.on:after{opacity:1;width:30px}.hint{letter-spacing:.22em;text-transform:uppercase;color:var(--dim);z-index:2;align-items:center;gap:12px;font-size:11px;transition:opacity .6s,transform .6s;display:flex;position:fixed;bottom:clamp(28px,6vh,60px);right:clamp(20px,4vw,56px)}.hint.gone{opacity:0;pointer-events:none;transform:translateY(8px)}.sep{background:var(--line);width:1px;height:14px}.mouse{border:1px solid var(--dim);border-radius:10px;width:18px;height:28px;position:relative}.mouse b{background:var(--fg);border-radius:1px;width:2px;height:5px;margin-left:-1px;animation:1.6s ease-in-out infinite wheel;position:absolute;top:6px;left:50%}@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}to{opacity:0;transform:translateY(9px)}}.inspectbar{z-index:4;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);opacity:0;pointer-events:none;transition:opacity .4s ease, transform .5s var(--ease);text-shadow:0 1px 14px #00000080;white-space:nowrap;align-items:center;gap:14px;font-size:11px;display:flex;position:fixed;bottom:clamp(28px,6vh,60px);left:50%;transform:translate(-50%,12px)}body.inspecting .inspectbar{opacity:1;pointer-events:auto;transform:translate(-50%)}.inspectbar button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--fg);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff1f;border:1px solid #ffffff73;border-radius:999px;padding:9px 16px}.inspectbar button:hover{background:#ffffff3d}body.inspecting .hud,body.inspecting .dots{opacity:.15}.hud,.dots{transition:opacity .4s}.credit{z-index:2;color:#fff9;letter-spacing:.02em;font-size:10px;position:fixed;bottom:10px;right:clamp(20px,4vw,56px)}.credit a{color:inherit;text-underline-offset:2px;text-decoration:underline}.credit a:hover{color:var(--fg)}.loader{background:var(--bg);z-index:10;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:11px;transition:opacity 1s,visibility 1s;display:flex;position:fixed;inset:0}.loader.done{opacity:0;visibility:hidden}.loader-bar{background:var(--line);width:160px;height:1px;overflow:hidden}.loader-bar i{background:var(--fg);width:40%;height:100%;animation:1.1s ease-in-out infinite load;display:block}@keyframes load{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media (width<=640px){html,body{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.meta{display:none}.top{padding:max(20px, env(safe-area-inset-top)) 20px 0}.urotate-home{padding:8px 0}.hint{top:calc(max(20px, env(safe-area-inset-top)) + 40px);-webkit-backdrop-filter:blur(6px);color:#ffffffd1;white-space:nowrap;letter-spacing:.18em;background:#080e0a57;border-radius:999px;gap:10px;padding:7px 14px;font-size:10.5px;bottom:auto;left:50%;right:auto;transform:translate(-50%)}.hint.gone{transform:translate(-50%)translateY(-8px)}.mouse,.inspectbar span:nth-of-type(2),.inspectbar .sep{display:none}.inspectbar{bottom:max(40px, calc(env(safe-area-inset-bottom) + 28px));gap:12px}.dots{bottom:max(40px, calc(env(safe-area-inset-bottom) + 28px))}.dots button{width:40px;height:36px}.hud{bottom:calc(max(40px, calc(env(safe-area-inset-bottom) + 28px)) + 44px);max-width:calc(100vw - 40px)}h1{font-size:clamp(52px,17vw,84px)}#caption{color:#ffffffdb;text-shadow:0 1px 10px #0000008c;margin-top:10px;font-size:13px}.numeral{color:#fffc}.credit{left:20px;right:20px;bottom:max(8px, env(safe-area-inset-bottom));font-size:9px;line-height:1.35}.camera-tool-cta{display:none!important}}@media (width<=640px) and (height<=720px){#caption{display:none}.numeral{margin-bottom:0}}@media (height<=480px) and (pointer:coarse){.top{padding-top:12px}h1{font-size:44px}.numeral,#caption{display:none}.hud{bottom:18px}.dots{bottom:16px}.hint{top:12px;bottom:auto;right:20px}.credit{display:none}}@media (pointer:coarse){.camera-tool-cta{display:none!important}}
