@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
:root{--navy:#06172b;--blue:#0873d1;--cyan:#14d5d3;--white:#f5f7fa;--muted:#97a6b8;--ease:cubic-bezier(.22,.75,.2,1)}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--navy);color:var(--white);font-family:Manrope,Arial,sans-serif}button,a{font:inherit;color:inherit}.noise{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.055;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' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.topbar{position:fixed;z-index:10;left:0;right:0;top:0;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5vw;background:linear-gradient(#06172bd9,transparent)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none}.brand b{display:block;font-size:22px;letter-spacing:-1px}.brand b span{color:#129bdf}.brand small{font-size:8px;letter-spacing:3px}.brand-mark{width:35px;height:35px;position:relative;transform:rotate(45deg)}.brand-mark i{position:absolute;width:15px;height:15px;border-radius:2px;background:linear-gradient(135deg,var(--cyan),var(--blue))}.brand-mark i:nth-child(2){right:0}.brand-mark i:nth-child(3){bottom:0}.brand-mark i:nth-child(4){right:0;bottom:0}.chapter{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:2px;color:#a9b6c6}.chapter i{display:block;width:74px;height:1px;background:#526071}.sound{width:46px;height:46px;border:1px solid #ffffff2d;border-radius:50%;background:#071a2ebd;display:flex;align-items:center;justify-content:center;gap:3px;cursor:pointer}.sound span{width:2px;height:9px;background:#fff;animation:eq 1s ease-in-out infinite alternate}.sound span:nth-child(2){height:15px;animation-delay:-.5s}.sound span:nth-child(3){height:6px;animation-delay:-.2s}.sound span:nth-child(4){height:12px;animation-delay:-.8s}.sound.muted span{animation:none;height:2px}@keyframes eq{to{height:3px}}
.hero{height:100%;min-height:620px;position:relative;overflow:hidden;perspective:1400px;background:radial-gradient(circle at 75% 43%,#0c3155 0,transparent 34%),linear-gradient(120deg,#04111f,#071a31 60%,#061427)}.ambient{position:absolute;border-radius:50%;filter:blur(70px);opacity:.25;pointer-events:none}.a1{width:38vw;height:38vw;background:#0765a2;right:2%;top:8%}.a2{width:22vw;height:22vw;background:#08aaa7;left:25%;bottom:-15%}.stage{position:absolute;inset:0;transform-style:preserve-3d;cursor:grab}.stage:active{cursor:grabbing}.card{--x:0;--z:0;position:absolute;width:min(48vw,690px);aspect-ratio:1/1;left:59%;top:50%;border-radius:10px;overflow:hidden;transform-style:preserve-3d;transform:translate(-50%,-50%) translateX(var(--x)) translateZ(var(--z)) rotateY(calc(var(--x) * -.018deg)) scale(var(--s));opacity:var(--o);filter:brightness(var(--b));transition:transform .95s var(--ease),opacity .75s,filter .75s;box-shadow:0 45px 100px #0009;pointer-events:none}.card.active{pointer-events:auto}.card img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.06);transition:transform 5s var(--ease)}.card.active img{transform:scale(1)}.card::after{content:"";position:absolute;inset:0;border:1px solid #ffffff28;border-radius:inherit;box-shadow:inset 0 0 80px #0012264d}.card-label{position:absolute;right:24px;bottom:22px;padding:10px 14px;background:#06172bcb;backdrop-filter:blur(10px);font-size:10px;letter-spacing:2px}.copy{position:absolute;z-index:4;left:7vw;top:50%;width:38vw;transform:translateY(-48%);pointer-events:none}.copy.swap>*{animation:copyIn .7s var(--ease)}@keyframes copyIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}.eyebrow{margin:0 0 24px;color:#35cbd4;font-size:10px;font-weight:700;letter-spacing:4px}.copy h1{font-size:clamp(48px,6.2vw,104px);line-height:.89;letter-spacing:-5px;margin:0;font-weight:300}.copy h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #8eb1d2}.description{width:min(430px,90%);line-height:1.7;color:#b4c0ce;font-size:14px;margin:28px 0}.explore{pointer-events:auto;border:0;background:transparent;padding:0;display:flex;align-items:center;gap:24px;font-size:10px;font-weight:700;letter-spacing:2px;cursor:pointer}.explore i{font-style:normal;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#10ccc9,#0572d5);font-size:17px;box-shadow:0 10px 30px #06a9bd55}.controls{position:absolute;z-index:5;right:4.5vw;bottom:54px;display:flex;gap:8px}.controls button{width:54px;height:54px;border-radius:50%;border:1px solid #ffffff2c;background:#07172bbd;backdrop-filter:blur(10px);font-size:20px;cursor:pointer;transition:.25s}.controls button:hover{background:#0d78be;border-color:#0d78be;transform:scale(1.05)}.hint{position:absolute;z-index:4;right:5vw;top:50%;transform:rotate(90deg) translateX(50%);transform-origin:right center;display:flex;align-items:center;gap:12px;color:#8291a5;font-size:8px;letter-spacing:3px}.hint i{width:40px;height:1px;background:#8291a5}.rail{position:absolute;z-index:5;left:7vw;bottom:44px;display:flex;gap:8px;max-width:66vw;overflow:hidden}.rail button{width:8px;height:3px;border:0;padding:0;background:#526273;cursor:pointer;transition:.5s var(--ease)}.rail button.active{width:40px;background:#18c5d0}.viewer{position:fixed;z-index:30;inset:0;background:#020a14e8;backdrop-filter:blur(20px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.5s var(--ease)}.viewer.open{opacity:1;visibility:visible}.viewer img{width:min(78vh,75vw);height:min(78vh,75vw);object-fit:cover;box-shadow:0 30px 120px #000;transform:scale(.85) rotateY(-8deg);transition:.7s var(--ease)}.viewer.open img{transform:none}.viewer>div{position:absolute;left:5vw;bottom:5vw}.viewer small{color:#19c7d1;letter-spacing:4px}.viewer h2{font-size:clamp(28px,4vw,62px);margin:8px 0}.viewer-close{position:absolute;right:4vw;top:4vw;width:54px;height:54px;border-radius:50%;border:1px solid #ffffff35;background:transparent;font-size:28px;cursor:pointer}
@media(max-width:800px){.topbar{height:80px;padding:0 20px}.chapter{display:none}.hero{min-height:520px}.copy{left:25px;top:auto;bottom:105px;transform:none;width:82vw}.copy h1{font-size:52px;letter-spacing:-3px}.description{display:none}.eyebrow{margin-bottom:14px}.stage{inset:-5%}.card{width:80vw;left:58%;top:42%}.hint{display:none}.rail{left:25px;bottom:30px;max-width:60vw}.controls{right:20px;bottom:20px}.controls button{width:48px;height:48px}.viewer img{width:92vw;height:92vw}.viewer>div{bottom:7vw}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}