:root{--bg:#04121f;--panel:#0a2a42;--line:#1f5a7a;--text:#eaf8ff;--muted:#d6f0ff;--amber:#ffd23f;--orange:#38bdf8;--pink:#818cf8}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif;line-height:1.65}.font-display{font-family:Bungee,DM Sans,sans-serif;letter-spacing:.01em}.grad-text{background:linear-gradient(135deg,#fff,#e6f7ff 55%,#fff1b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 14px rgba(4,40,80,.45))}.grad-bg{background:linear-gradient(135deg,#7dd3fc,#38bdf8 55%,#818cf8);color:#04121f}:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}.card{border:1.5px solid color-mix(in srgb,var(--c) 75%,transparent);background:#041e30b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:1.25rem;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}.card:hover{transform:translateY(-6px);box-shadow:0 14px 34px -10px var(--c)}.card-media{position:relative;height:10rem;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 45%,#04121f),#04121f) center/cover}.card-media .chip{position:absolute;top:.75rem;left:.75rem;font-size:.75rem;font-weight:700;padding:.15rem .7rem;border-radius:999px;border:1px solid var(--c);background:#04121fbf}.card-media .mark{font-family:Bungee,sans-serif;font-size:2.3rem;line-height:1;padding:0 1rem .4rem;color:transparent;-webkit-text-stroke:1.5px var(--c);text-shadow:0 0 18px color-mix(in srgb,var(--c) 40%,transparent)}.tagc{font-size:.7rem;font-weight:700;padding:.1rem .6rem;border-radius:.4rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.18)}.pad{aspect-ratio:1;border-radius:.3rem;border:1px solid var(--line);background:var(--panel);transition:transform .1s,background .1s}.pad[aria-pressed=true]{background:var(--orange);border-color:var(--orange)}.pad.now{transform:scale(1.15);border-color:var(--amber)}.pad.now[aria-pressed=true]{background:var(--amber)}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.ocean{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.45),transparent 60%),linear-gradient(180deg,#38bdf0,#1d93d6 28%,#0f66ad 62%,#0a3f7a)}.rays span{position:absolute;top:-10%;width:14vw;height:120%;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 75%);transform:skew(-14deg);filter:blur(6px);opacity:.5;animation:ray 9s ease-in-out infinite alternate}@keyframes ray{50%{opacity:.18;transform:skew(-10deg) translate(3vw)}}.bubble{position:absolute;bottom:-20px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:radial-gradient(circle at 30% 30%,#fff9,#ffffff1a);animation:rise linear infinite}@keyframes rise{to{transform:translate(2vw,-110vh)}}.fish{position:absolute;left:0;fill:#04285059;animation:swim linear infinite}@keyframes swim{0%{transform:translate(105vw)}to{transform:translate(-15vw)}}.seabed{position:absolute;left:0;bottom:0;width:100%;height:22vh}.kelp{transform-box:fill-box;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite alternate}@keyframes sway{0%{transform:rotate(-7deg)}to{transform:rotate(7deg)}}.foto-wrap{position:relative;width:clamp(9rem,24vw,17rem);aspect-ratio:3/4;border-radius:2rem;overflow:hidden;border:4px solid rgba(255,255,255,.9);box-shadow:0 12px 34px -8px #04285099;transform:rotate(3deg);background:#0a2a42}.foto{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}.foto.on{opacity:1}.card-media:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 40%,rgba(4,18,31,.75))}.card-media .mark{position:relative}.fan{--step:7.2rem;position:relative;height:clamp(21rem,62vw,29rem);perspective:1100px;touch-action:pan-y;-webkit-user-select:none;user-select:none}@media(min-width:640px){.fan{--step:13rem}}.fan-card{position:absolute;left:50%;top:50%;width:clamp(10.5rem,27vw,16rem);aspect-ratio:4/5;padding:0;cursor:pointer;overflow:hidden;border-radius:1.6rem;border:3px solid rgba(255,255,255,.55);background:var(--panel);transform:translate(-50%,-50%) translate(calc(var(--o) * var(--step))) rotateY(calc(var(--o) * -26deg)) rotate(calc(var(--o) * 4deg)) scale(calc(1 - var(--abs) * .16));filter:brightness(calc(1 - var(--abs) * .32)) saturate(calc(1 - var(--abs) * .2));box-shadow:0 18px 38px -14px #021428bf;transition:transform .65s cubic-bezier(.22,1,.36,1),filter .5s,border-color .4s,box-shadow .4s}.fan-card.on{border-color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 70%,transparent),0 26px 50px -14px color-mix(in srgb,var(--c) 70%,#021428)}.fan-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.fan-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 60%,rgba(4,18,31,.7))}.fan-tag{position:absolute;left:.8rem;bottom:.8rem;z-index:1;font-size:.75rem;font-weight:700;padding:.15rem .75rem;border-radius:999px;background:#04121fc7;border:1px solid var(--c);color:#fff}.fan-btn{width:2.6rem;height:2.6rem;border-radius:999px;border:2px solid rgba(125,211,252,.7);font-weight:700;background:#04121f8c;transition:background .2s}.fan-btn:hover{background:#ffffff26}.fan-dot{width:.8rem;height:.8rem;border-radius:999px;border:2px solid var(--c);background:transparent;transition:transform .2s,background .2s}.fan-dot[aria-selected=true]{background:var(--c);transform:scale(1.25)}.fan-cap{max-width:34rem;margin:1.75rem auto 0;padding:.25rem 0 .25rem 1.1rem;border-left:4px solid var(--c);animation:capin .5s ease both}@keyframes capin{0%{opacity:0;transform:translateY(8px)}}