@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=UnifrakturCook:wght@700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-void:oklch(10% .008 285);--color-copy:oklch(91% .018 70);--color-copy-muted:oklch(70% .014 70);--color-focus:oklch(78% .05 55);--font-display:"UnifrakturCook", "Old English Text MT", "Blackletter", Georgia, serif;--font-body:"IBM Plex Mono", "SFMono-Regular", Consolas, monospace;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-8:2rem;--space-12:3rem;--space-20:5rem;--hero-gutter:clamp(1rem, 4vw, 4rem)}*{box-sizing:border-box}html,body{background:var(--color-void);min-height:100%;margin:0;overflow-x:clip}body{min-width:320px;color:var(--color-copy);font-family:var(--font-body);text-rendering:optimizelegibility}#app{min-height:100dvh}.hero{--hero-pad-top:clamp(var(--space-4), 3vh, var(--space-8));--hero-pad-bottom:clamp(var(--space-8), 8vh, var(--space-20));--hero-copy-reserve:clamp(4rem, 10vh, 6rem);width:100%;height:100dvh;min-height:100svh;max-height:100dvh;padding:var(--hero-pad-top) var(--hero-gutter) var(--hero-pad-bottom);isolation:isolate;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:clip}.model-stage{width:min(100%,96rem);height:min(clamp(25rem, 70dvh, 50rem), calc(100dvh - var(--hero-pad-top) - var(--hero-pad-bottom) - var(--hero-copy-reserve)));z-index:1;pointer-events:none;flex:0 auto;place-items:center;min-height:0;max-height:100%;display:grid;position:relative}#view{z-index:0;pointer-events:none;touch-action:none;outline:none;width:100vw;height:100dvh;display:block;position:fixed;inset:0}.hero-copy{width:min(100%,42rem);margin:var(--space-1) 0 0;color:var(--color-copy);font-family:var(--font-display);letter-spacing:.015em;text-align:center;text-wrap:balance;overflow-wrap:anywhere;z-index:2;min-width:0;font-size:clamp(1.35rem,2.25vw,2.45rem);font-weight:700;line-height:.98;position:relative}.hero-copy span{display:block}.hero-copy span+span{margin-top:var(--space-1);color:var(--color-copy-muted)}.frame-sequence{z-index:8;pointer-events:none;visibility:hidden;background:#000;place-items:center;display:grid;position:fixed;inset:0;overflow:hidden}.frame-sequence.is-visible{visibility:visible;pointer-events:auto}.frame-rotor{width:100%;height:100%;transform-style:preserve-3d;perspective:1200px;perspective-origin:50%;transform-origin:50%;will-change:transform;place-items:center;display:grid}.sequence-frame{--frame-gutter:clamp(.75rem, 2vw, 1.5rem);width:calc(100dvw - var(--frame-gutter) - var(--frame-gutter));height:calc(100dvh - var(--frame-gutter) - var(--frame-gutter));aspect-ratio:auto;max-width:calc(100dvw - var(--frame-gutter) - var(--frame-gutter));max-height:calc(100dvh - var(--frame-gutter) - var(--frame-gutter));transform-style:preserve-3d;transform-origin:50% 50% 0;opacity:0;will-change:transform, opacity;background:linear-gradient(90deg,#ffffff29,#0000 .4rem) 0 0/100% 100% no-repeat,linear-gradient(#17171a,#060607 58%,#151519);border:clamp(.35rem,1.25vw,1.1rem) solid #111113;border-radius:16px;padding:clamp(.7rem,2vw,2rem);transform:translate3d(0,2rem,-1500px)scale(.08);box-shadow:inset 0 0 0 clamp(.12rem,.35vw,.3rem) #4a4640,inset 0 0 0 clamp(.28rem,.7vw,.55rem) #0a0a0b,0 0 0 100vmax #000}.frame-sequence.is-visible .frame-rotor{animation:2.2s linear forwards frame-spin}.frame-sequence.is-visible .sequence-frame{animation:2.2s ease-out forwards frame-approach}.frame-sequence.is-countdown .frame-rotor,.frame-sequence.is-video .frame-rotor{animation:none;transform:rotate(1080deg)rotateX(0)rotateY(0)}.frame-sequence.is-countdown .sequence-frame,.frame-sequence.is-video .sequence-frame{opacity:1;animation:none;transform:translate(0,0)scale(1)}.film-window{background:#050505;border-radius:8px;place-items:center;width:100%;height:100%;display:grid;position:relative;overflow:hidden}.film-window img,.film-window video{object-fit:cover;opacity:0;background:#050505;width:100%;height:100%;transition:opacity .12s linear;display:block;position:absolute;inset:0}.frame-sequence.is-visible #countdown-still,.frame-sequence.is-countdown #countdown-media,.frame-sequence.is-video #education-video{opacity:1}.frame-sequence.is-countdown #countdown-still,.frame-sequence.is-video #countdown-still,.frame-sequence.is-video #countdown-media{opacity:0}@keyframes frame-approach{0%{opacity:0;transform:translateZ(-1500px)scale(.08)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes frame-spin{0%{transform:rotate(0)}to{transform:rotate(1080deg)}}@media (width<=600px){.hero{--hero-pad-top:var(--space-3);--hero-pad-bottom:max(var(--space-8), env(safe-area-inset-bottom));--hero-copy-reserve:clamp(3rem, 12vh, 4.5rem)}.model-stage{width:112%;height:min(clamp(19rem, 61dvh, 34rem), calc(100dvh - var(--hero-pad-top) - var(--hero-pad-bottom) - var(--hero-copy-reserve)))}.hero-copy{font-size:clamp(1.15rem,5.7vw,1.8rem);line-height:1}}@media (orientation:landscape) and (height<=560px){.hero{--hero-pad-top:var(--space-2);--hero-pad-bottom:var(--space-4);--hero-copy-reserve:clamp(3rem, 12vh, 4rem)}.model-stage{height:min(70dvh, calc(100dvh - var(--hero-pad-top) - var(--hero-pad-bottom) - var(--hero-copy-reserve)))}.hero-copy{font-size:clamp(1rem,3vw,1.5rem)}}@media (prefers-reduced-motion:reduce){.frame-sequence.is-visible .sequence-frame,.frame-sequence.is-visible .frame-rotor{animation-duration:.32s;animation-timing-function:ease-out}}@media (prefers-contrast:more){:root{--color-copy:oklch(96% .012 70);--color-copy-muted:oklch(80% .012 70)}}
