@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;450;500&display=swap";:root{color:#d5e1eb;background:#030910;font-family:IBM Plex Mono,monospace;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0}button{font:inherit}button:focus-visible{outline:1px solid #e3c58d;outline-offset:5px}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.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}.showcase{position:relative;height:100svh;min-height:360px;overflow:clip;isolation:isolate}.saab-prop{--emblem-size: min(63svh, 56vw, 620px);--logo-rotation-x: 8deg;--logo-rotation-y: -10deg;--logo-rotation-z: -4deg;--logo-separation: 0;--logo-glow: .48;--logo-sweep: 0;--logo-sweep-active: 0;--play-state: running;position:relative;width:100%;height:100%;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 49% 43%,#122941 0%,#091623 35%,transparent 68%),radial-gradient(ellipse at 70% 90%,#17212a 0%,transparent 50%),#030910}.saab-prop.is-paused,.saab-prop.is-reduced{--play-state: paused}.studio-light{pointer-events:none;position:absolute;border-radius:50%;filter:blur(65px)}.studio-light-blue{width:60vw;height:45vw;top:-25vw;left:-12vw;background:#46749a;opacity:calc(.08 + var(--logo-glow) * .1);transform:rotate(-28deg)}.studio-light-gold{width:40vw;height:48vw;right:-23vw;bottom:-10vw;background:#9f7946;opacity:calc(.07 + var(--logo-glow) * .09)}.atmosphere{position:absolute;inset:0;opacity:calc(.35 + var(--logo-glow) * .45);background:conic-gradient(from 215deg at 50% 47%,transparent 0deg,#95c8ec07 15deg,transparent 40deg,transparent 170deg,#deb87705 195deg,transparent 220deg);filter:blur(15px);pointer-events:none}.halo{position:absolute;top:45%;left:50%;width:calc(var(--emblem-size) * 1.37);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.halo-outer{border:1px solid #6c91a511;box-shadow:0 0 100px 30px #315a7b06,inset 0 0 100px #3e709606;opacity:calc(.4 + var(--logo-glow) * .5)}.halo-inner{width:calc(var(--emblem-size) * 1.19);border:1px solid #769bb20a;background:radial-gradient(circle,#446c8b00 40%,#4b789b08 65%,transparent 72%);transform:translate(-50%,-50%) scale(calc(1 + var(--logo-separation) * .06))}.floor-light{position:absolute;width:calc(var(--emblem-size) * 1.45);height:calc(var(--emblem-size) * .14);left:50%;top:calc(47% + var(--emblem-size) * .51);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#6294ad30,#3c688f0c 44%,transparent 70%);filter:blur(16px);opacity:calc(.5 + var(--logo-glow) * .35);pointer-events:none}.floor-shadow{position:absolute;left:50%;top:calc(47% + var(--emblem-size) * .46);width:calc(var(--emblem-size) * .65);height:calc(var(--emblem-size) * .09);background:#000a;filter:blur(17px);border-radius:50%;transform:translate(-50%) scaleX(calc(1 + var(--logo-separation) * .5));pointer-events:none}.logo-camera{position:absolute;top:46%;left:50%;width:var(--emblem-size);height:var(--emblem-size);transform:translate(-50%,-50%);perspective:1400px;perspective-origin:50% 40%;z-index:2}.pointer-tilt{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--pointer-x, 0deg)) rotateY(var(--pointer-y, 0deg));transition:transform .65s cubic-bezier(.18,.65,.3,1)}.badge-stack{position:absolute;inset:0;transform-style:preserve-3d;transform:translateY(calc(var(--emblem-size) * .035 * var(--logo-separation))) scale3d(calc(1 - var(--logo-separation) * .1),calc(1 - var(--logo-separation) * .1),calc(1 - var(--logo-separation) * .1)) rotateX(var(--logo-rotation-x)) rotateY(var(--logo-rotation-y)) rotate(var(--logo-rotation-z));will-change:transform}.badge-layer{--layer-z: 0;--layer-x: 0;--layer-y: 0;--home-z: 0px;position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(calc(var(--emblem-size) * var(--layer-x) * var(--logo-separation)),calc(var(--emblem-size) * var(--layer-y) * var(--logo-separation)),calc(var(--home-z) + var(--emblem-size) * .52 * var(--layer-z) * var(--logo-separation)));will-change:transform}.layer-field{--layer-z: -.25;--layer-y: .035;--layer-x: .035}.layer-rings{--layer-z: .22;--home-z: 1px;--layer-x: -.06;--layer-y: .015}.layer-griffin{--layer-z: .65;--home-z: 2px;--layer-x: .08;--layer-y: -.015}.layer-crown{--layer-z: .95;--home-z: 3px;--layer-x: .06;--layer-y: -.09}.layer-wordmark{--layer-z: .83;--home-z: 2px;--layer-x: -.015;--layer-y: .19}.part-artwork,.sheen-artwork{position:absolute;inset:0}.layer-field>.part-artwork{filter:drop-shadow(9px 22px 28px #0008)}.layer-griffin>.part-artwork,.layer-crown>.part-artwork,.layer-wordmark>.part-artwork{filter:drop-shadow(0 1px 0 #061329) drop-shadow(1px 3px 2px #0007)}.layer-rings>.part-artwork{filter:drop-shadow(0 1px 1px #010916)}.plate-depth{position:absolute;inset:0;transform-style:preserve-3d}.plate-depth span{position:absolute;inset:5.87%;border-radius:50%;border:1.1px solid #a1b0c260;background:linear-gradient(140deg,#526984,#10243f 35%,#030d20 67%,#6286a0)}.enamel-highlight{position:absolute;inset:5.87%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 32% 6%,#c0d9f23d,transparent 54%),linear-gradient(125deg,#c0d9f200 40%,#c0d9f20d,#c0d9f200 58%);box-shadow:inset 1px 2px 2px #d6e9ff45,inset -2px -2px 3px #02091690;transform:translateZ(.5px);opacity:calc(.45 + var(--logo-glow) * .25)}.part-sheen{position:absolute;inset:0;transform:translateZ(.4px);opacity:calc(var(--logo-sweep-active) * .72);-webkit-mask-image:linear-gradient(115deg,transparent 35%,#0006 44%,#000 48%,#0003 52%,transparent 60%);mask-image:linear-gradient(115deg,transparent 35%,#0006 44%,#000 48%,#0003 52%,transparent 60%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:calc(140% - var(--logo-sweep) * 180%) 50%;mask-position:calc(140% - var(--logo-sweep) * 180%) 50%;pointer-events:none}.sheen-artwork{filter:brightness(0) invert(1)}.is-wireframe .plate-depth,.is-wireframe .enamel-highlight,.is-wireframe .part-sheen{opacity:0}.is-wireframe .part-artwork{filter:brightness(1.6) drop-shadow(0 0 3px #90b4c94d)}.particles{position:absolute;inset:0;pointer-events:none}.particle{position:absolute;width:1px;height:1px;border-radius:50%;background:#b0c9df;opacity:0;animation:dust 14s infinite ease-in-out;animation-play-state:var(--play-state)}.particle:nth-child(3n){width:2px;height:2px;background:#ba9b65;filter:blur(.4px)}.particle-0{left:27%;top:27%;animation-delay:-2s}.particle-1{left:74%;top:56%;animation-delay:-5s}.particle-2{left:66%;top:15%;animation-delay:-12s}.particle-3{left:20%;top:65%;animation-delay:-8s}.particle-4{left:39%;top:78%;animation-delay:-4s}.particle-5{left:78%;top:30%;animation-delay:-6s}.particle-6{left:12%;top:40%;animation-delay:-3s}.particle-7{left:85%;top:70%;animation-delay:-9s}.particle-8{left:51%;top:18%;animation-delay:-11s}.particle-9{left:60%;top:77%;animation-delay:-7s}.particle-10{left:32%;top:49%;animation-delay:-1s}.particle-11{left:71%;top:80%;animation-delay:-10s}.particle-12{left:19%;top:18%;animation-delay:-13s}.particle-13{left:91%;top:45%;animation-delay:-4s}@keyframes dust{0%,to{opacity:0;transform:translate3d(0,8px,0)}30%,70%{opacity:.25}90%{transform:translate3d(14px,-26px,0)}}.film-grain{position:absolute;inset:0;z-index:5;opacity:.045;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.scene-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 35%,#01050b80 100%);pointer-events:none;z-index:6}.controls-wrap{position:absolute;bottom:22px;left:50%;transform:translate(-50%);z-index:10}.playback-controls{display:flex;align-items:center;gap:3px;padding:6px;border:1px solid #95b0c218;border-radius:50px;background:#101b2675;box-shadow:0 6px 28px #0003,inset 0 1px #b9d5eb07;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:.48;transition:opacity .3s,border-color .3s}.playback-controls:hover,.playback-controls:focus-within{opacity:1;border-color:#95b0c238}.control-button{position:relative;display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;padding:11px;border:0;border-radius:50%;color:#b9c9d6;background:transparent;cursor:pointer;transition:color .2s,background .2s}.control-button:hover{color:#f1e6cf;background:#a5bed30d}.control-button[aria-pressed=true]{color:#dec28f;background:#d8bc7f12}.control-button:disabled{opacity:.3;cursor:default}.control-button svg{width:19px;height:19px}.play-button svg{width:18px}.speed-button{font-size:13px;letter-spacing:-1px;padding:9px}.control-divider{width:1px;height:16px;background:#b8cbda13;margin:0 3px}.tooltip{position:absolute;left:50%;bottom:calc(100% + 17px);transform:translate(-50%,4px);pointer-events:none;white-space:nowrap;font:9px IBM Plex Mono,monospace;letter-spacing:.3px;color:#b8c7d4;padding:8px 10px;border:1px solid #7f99ac1a;background:#091420e8;border-radius:5px;opacity:0;transition:opacity .2s,transform .2s}.control-button:hover .tooltip,.control-button:focus-visible .tooltip{opacity:1;transform:translate(-50%)}.motion-note{position:absolute;bottom:100%;left:50%;transform:translate(-50%);color:#a2afbb;white-space:nowrap;font-size:9px;margin:0 0 13px}.is-reduced .pointer-tilt{transform:none}.is-reduced *,.is-reduced *:before,.is-reduced *:after{animation:none!important;transition:none!important}@media(max-width:700px){.saab-prop{--emblem-size: min(76vw, 53svh)}.logo-camera{top:44%;perspective:1000px}.halo{top:44%}.halo-outer{width:calc(var(--emblem-size) * 1.25)}.halo-inner{width:calc(var(--emblem-size) * 1.1)}.layer-crown{--layer-y: -.11;--layer-z: .9}.layer-wordmark{--layer-y: .16}.controls-wrap{bottom:max(24px,env(safe-area-inset-bottom))}.playback-controls{opacity:.7}.studio-light-blue{width:110vw;height:120vw;top:-95vw;left:-70vw}.studio-light-gold{width:90vw;height:130vw;right:-85vw;bottom:0}.floor-light{top:calc(45% + var(--emblem-size) * .5)}.floor-shadow{top:calc(45% + var(--emblem-size) * .46)}}@media(max-height:550px)and (min-width:600px){.saab-prop{--emblem-size: min(65svh, 40vw)}.logo-camera,.halo{top:41%}.controls-wrap{bottom:10px}.control-button{width:36px;height:36px;padding:9px}.playback-controls{padding:4px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.particle-prop{--particle-logo-size: min(56svh, 52vw, 580px);--photon-energy: .16;--photon-dispersion: 0;--photon-sheen: 0;--photon-pulse: 0;background:radial-gradient(ellipse at 50% 45%,#112135 0%,#080f1c 42%,transparent 76%),#03070e}.photon-visual{position:absolute;inset:0;z-index:2}.particle-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}.particle-solid{position:absolute;width:var(--particle-logo-size);height:var(--particle-logo-size);top:45%;left:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 20px 30px #0007);will-change:opacity}.particle-solid>svg{position:absolute;inset:0}.resolve-sheen{position:absolute;inset:0;filter:brightness(0) invert(1);opacity:calc(var(--photon-sheen) * .7);-webkit-mask-image:linear-gradient(110deg,transparent 30%,#000 48%,transparent 63%);mask-image:linear-gradient(110deg,transparent 30%,#000 48%,transparent 63%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:calc(100% - var(--photon-sheen) * 150%) 50%;mask-position:calc(100% - var(--photon-sheen) * 150%) 50%;pointer-events:none}.particle-source{position:absolute;width:512px;height:512px;visibility:hidden;pointer-events:none;left:-10000px;top:0}.photon-aura{position:absolute;left:50%;top:45%;width:calc(var(--particle-logo-size) * 1.8);height:calc(var(--particle-logo-size) * 1.5);transform:translate(-50%,-50%) rotate(-20deg);border-radius:50%;background:radial-gradient(ellipse,#476dad18 0%,#233b6b0a 45%,transparent 72%);opacity:calc(.4 + var(--photon-energy) * .5);filter:blur(35px);pointer-events:none}.photon-pulse{position:absolute;width:calc(var(--particle-logo-size) * 1.18);aspect-ratio:1;top:45%;left:50%;border:1px solid #a5c9e144;border-radius:50%;box-shadow:0 0 30px #5e8cb51a,inset 0 0 20px #8ebde514;opacity:calc(var(--photon-pulse) * .45);transform:translate(-50%,-50%) scale(calc(.8 + var(--photon-pulse) * .5));pointer-events:none}.photon-floor{position:absolute;top:calc(45% + var(--particle-logo-size) * .5);left:50%;width:var(--particle-logo-size);height:calc(var(--particle-logo-size) * .12);transform:translate(-50%);border-radius:50%;background:#6d8fbd15;opacity:calc(.65 - var(--photon-dispersion) * .4);filter:blur(25px);pointer-events:none}.particle-prop .film-grain{opacity:.025}.particle-prop .scene-vignette{background:radial-gradient(ellipse at 50% 45%,transparent 43%,#01050b60 100%)}.particle-fallback{position:absolute;bottom:110px;left:50%;transform:translate(-50%);font-size:10px;line-height:1.7;width:min(85%,340px);text-align:center;color:#b6c2cd;z-index:8}.shape-caption{position:absolute;top:calc(45% + var(--particle-logo-size) * .65);left:50%;transform:translate(-50%);z-index:7;color:#e0ebf5;font-size:clamp(14px,1.3vw,17px);font-weight:500;letter-spacing:.22em;line-height:1.5;text-shadow:0 2px 12px #0008;white-space:nowrap;transition:opacity .45s;pointer-events:none}@media(max-width:700px){.particle-prop{--particle-logo-size: min(68vw, 48svh)}}@media(max-height:550px)and (min-width:600px){.particle-prop{--particle-logo-size: min(50svh, 40vw)}}
