@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#123449; --blue:#0a6fa4; --cyan:#70eaff; --ice:#f5fdff; --glass:rgba(247,253,255,.50); --line:rgba(31,106,136,.22); --lime:#d8ff52; --nav-h:72px; --cursor-x:50%; --cursor-y:50%; --scroll-velocity:0px; --scroll-progress:0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#c4edf8; }
body { margin:0; min-width:320px; color:var(--ink); background:linear-gradient(145deg,#edfaff 0%,#cceff8 38%,#d5f8f2 75%,#eaf9ff); font-family:Manrope,Arial,sans-serif; overflow-x:hidden; cursor:none; }
button,input,textarea,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { border:0; cursor:none; color:inherit; }
a { color:inherit; text-decoration:none; cursor:none; }
::selection { background:var(--lime); color:#16334a; }

.ambient { position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none; background:radial-gradient(circle at var(--cursor-x) var(--cursor-y),rgba(255,255,255,.42),transparent 16%),radial-gradient(circle at 50% 8%,rgba(255,255,255,.85),transparent 28%),linear-gradient(138deg,#d5f4fc 0%,#ccecf8 44%,#d4f6ef 100%); }
.noise { position:absolute; inset:0; opacity:.14; 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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.orb { position:absolute; border-radius:50%; filter:blur(1px); opacity:.78; mix-blend-mode:screen; will-change:transform; }
.orb-one { width:42vw; height:42vw; min-width:510px; min-height:510px; top:-24vw; right:-8vw; background:radial-gradient(circle at 34% 30%,#efffff 0 3%,#baf3ff 12%,#70bce9 34%,rgba(88,174,218,.14) 58%,transparent 70%); box-shadow:inset -30px -30px 90px #288ac2,inset 18px 24px 60px #fff,0 0 90px rgba(113,235,255,.65); animation:float-orb 19s ease-in-out infinite alternate; }
.orb-two { width:30vw; height:30vw; min-width:370px; min-height:370px; top:47%; left:-14vw; background:radial-gradient(circle at 65% 30%,#ffffff 0 2%,#cffdff 18%,#80e9df 38%,rgba(68,196,196,.1) 66%,transparent 70%); box-shadow:inset 20px -22px 60px rgba(9,169,158,.36),0 0 70px rgba(111,255,221,.52); animation:float-orb 24s -6s ease-in-out infinite alternate-reverse; }
.orb-three { width:17vw; height:17vw; min-width:230px; min-height:230px; bottom:8%; right:6%; background:radial-gradient(circle at 35% 35%,#fff 0 5%,#e8ffff 13%,#abcfff 38%,rgba(76,139,255,.05) 69%,transparent 70%); box-shadow:inset -18px -25px 50px rgba(48,85,195,.3),0 0 80px rgba(176,206,255,.7); animation:float-orb 16s -5s ease-in-out infinite alternate; }
.ribbon { position:absolute; width:120vw; height:13vw; min-height:160px; border:1px solid rgba(255,255,255,.47); border-radius:50%; opacity:.65; filter:blur(.3px); transform:rotate(-24deg); box-shadow:0 0 0 16px rgba(255,255,255,.04),inset 0 0 22px rgba(255,255,255,.18); }
.ribbon-one { left:-36vw; top:32%; animation:ribbon 22s linear infinite alternate; }
.ribbon-two { right:-65vw; top:59%; transform:rotate(35deg); border-color:rgba(69,200,222,.25); animation:ribbon 25s -4s linear infinite alternate-reverse; }
.aero-grid { position:absolute; bottom:-12vh; left:-15vw; width:130vw; height:34vh; transform:perspective(240px) rotateX(60deg); transform-origin:bottom; opacity:.21; background:linear-gradient(rgba(43,151,184,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(43,151,184,.55) 1px,transparent 1px); background-size:55px 55px; mask-image:linear-gradient(transparent,black 70%); }
@keyframes float-orb { to { transform:translate3d(-5vw,6vh,0) rotate(28deg) scale(1.08); } }
@keyframes ribbon { to { transform:translate3d(6vw,4vh,0) rotate(-18deg) scaleY(1.25); } }

.boot-screen { position:fixed; z-index:50; inset:0; display:grid; place-content:center; gap:13px; color:#f7fdff; text-align:center; background:radial-gradient(circle at 48% 45%,#359ac0 0,#135979 32%,#082e48 70%); transition:opacity .8s ease,visibility .8s ease; }
.boot-screen.done { opacity:0; visibility:hidden; }
.boot-screen p { position:relative; margin:0; letter-spacing:.45em; font:600 13px/1 'DM Mono',monospace; z-index:1; }
.boot-screen small { opacity:.7; font:10px 'DM Mono',monospace; letter-spacing:.24em; }
.boot-orbit { position:absolute; left:50%; top:50%; width:245px; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.35); transform:translate(-50%,-50%); animation:spin 2.5s linear infinite; }
.boot-orbit:before,.boot-orbit:after { content:''; position:absolute; border-radius:50%; background:#d8ff52; box-shadow:0 0 15px #d8ff52; }
.boot-orbit:before { width:8px; height:8px; top:16px; left:32px; }.boot-orbit:after { width:4px; height:4px; right:-2px; bottom:66px; }
.boot-progress { position:relative; width:188px; height:2px; margin:5px auto; overflow:hidden; background:rgba(255,255,255,.22); }.boot-progress span { display:block; width:100%; height:100%; transform:translateX(-100%); background:linear-gradient(90deg,var(--lime),#eaffff); animation:boot 1.5s .2s cubic-bezier(.33,1,.68,1) forwards; }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } } @keyframes boot { to { transform:translateX(0); } }

.pointer { position:fixed; z-index:70; pointer-events:none; left:0; top:0; border-radius:50%; transform:translate3d(-100px,-100px,0); will-change:transform,width,height; transition:width .25s ease,height .25s ease,background .25s ease,border .25s ease; }
.pointer-dot { width:6px; height:6px; background:#175675; }.pointer-ring { width:30px; height:30px; border:1px solid rgba(18,83,111,.62); margin:-12px; }
body.pointer-active .pointer-ring { width:52px; height:52px; margin:-23px; background:rgba(224,255,85,.11); border-color:rgba(34,106,130,.85); } body.pointer-active .pointer-dot { width:3px; height:3px; margin:1px; background:var(--lime); }

.site-header { position:fixed; top:0; z-index:20; left:0; right:0; height:var(--nav-h); display:flex; justify-content:space-between; align-items:center; padding:15px clamp(18px,4vw,68px); transition:background .45s ease,box-shadow .45s ease,backdrop-filter .45s ease; }
.site-header.scrolled { background:rgba(236,251,255,.54); box-shadow:0 8px 30px rgba(21,90,121,.08); backdrop-filter:blur(18px); }
.wordmark { display:flex; align-items:center; gap:9px; width:142px; font:600 10px/.9 'Space Grotesk',sans-serif; letter-spacing:.22em; }.wordmark em { font-style:normal; color:#0d92ba; }.wordmark-icon { display:flex; flex-direction:column; gap:3px; width:21px; transform:skewX(-20deg); }.wordmark-icon i { display:block; height:3px; border-radius:3px; background:#14698e; }.wordmark-icon i:nth-child(2){width:14px;background:#c1ee48}.wordmark-icon i:nth-child(3){width:9px;background:#77ceef}
.glass { border:1px solid rgba(255,255,255,.74); background:var(--glass); box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 12px 35px rgba(25,99,129,.11); backdrop-filter:blur(18px) saturate(1.2); }
.filter-nav { position:relative; display:flex; align-items:center; overflow:hidden; padding:4px; border-radius:999px; }.filter { position:relative; z-index:1; padding:9px 14px; border-radius:999px; background:transparent; color:#22506a; font:600 10px 'DM Mono',monospace; letter-spacing:.08em; transition:color .35s ease; }.filter span { color:#87b2c5; font-size:8px; margin-right:3px; }.filter.is-active { color:#07384f; }.filter.is-active span { color:#19799a; }.nav-slider { position:absolute; left:4px; top:4px; bottom:4px; width:calc(33.333% - 3px); border-radius:999px; background:linear-gradient(130deg,#efffff,#bceffa 50%,#d6fa8e); box-shadow:0 2px 8px rgba(11,128,167,.19),inset 0 1px 2px rgba(255,255,255,.9); transition:transform .45s cubic-bezier(.2,.9,.2,1); }
.motion-toggle { display:flex; align-items:center; gap:6px; width:142px; justify-content:flex-end; background:transparent; font:500 9px 'DM Mono',monospace; letter-spacing:.1em; }.motion-toggle span { width:8px; aspect-ratio:1; border-radius:50%; background:#9ed01a; box-shadow:0 0 0 3px rgba(158,208,26,.2); }.motion-toggle.off span { background:#6293a9; box-shadow:none; }

.hero { min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; padding:calc(var(--nav-h) + 5vh) clamp(22px,9vw,150px) 6vh; position:relative; overflow:hidden; }.hero:after { content:''; position:absolute; width:76vw; height:1px; background:linear-gradient(90deg,transparent,rgba(51,140,170,.4),transparent); top:64%; left:13vw; transform:rotate(-7deg); }.hero-topline { display:flex; align-items:center; gap:11px; color:#38708a; font:10px 'DM Mono',monospace; letter-spacing:.15em; }.hero-topline span { display:block; width:min(20vw,310px); height:1px; background:linear-gradient(90deg,#559db8,transparent); }.hero-copy { position:relative; z-index:1; margin-top:auto; margin-bottom:auto; }.eyebrow { margin:0 0 14px 6px; color:#337e9c; font:500 10px 'DM Mono',monospace; letter-spacing:.19em; }.eyebrow span { color:#084c6d; }.hero-title { max-width:1070px; margin:0; color:#17455d; font:700 clamp(3.7rem,8.1vw,8.4rem)/.88 'Space Grotesk',sans-serif; letter-spacing:-.075em; }.hero-title .outline { color:transparent; -webkit-text-stroke:1.5px rgba(34,109,139,.72); }.hero-title .reveal-word { display:inline-block; transform:translateY(105%); animation:rise .9s calc(var(--word, 0) * .1s + .6s) cubic-bezier(.16,1,.3,1) forwards; }.hero-title .reveal-word:nth-child(2){--word:1}.hero-title .reveal-word:nth-child(4){--word:2}.hero-title .reveal-word:nth-child(5){--word:3}.hero-title .reveal-word:nth-child(7){--word:4}.hero-orb { display:inline-block; width:.54em; height:.54em; margin:0 .02em; vertical-align:.04em; border-radius:50%; background:radial-gradient(circle at 31% 24%,white 0 7%,#c8fdff 14%,#50bedc 47%,#267ca9 78%); box-shadow:inset -.09em -.12em .15em rgba(4,84,143,.5),0 0 .3em rgba(104,229,255,.65); animation:float-icon 5s ease-in-out infinite alternate; }.hero-bottom { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }.hero-bottom p { margin:0; color:#326a82; font-size:12px; line-height:1.6; }.scroll-cue { display:flex; align-items:center; gap:10px; color:#194e68; font:500 10px 'DM Mono',monospace; letter-spacing:.1em; }.scroll-cue b { display:grid; place-items:center; width:33px; aspect-ratio:1; border-radius:50%; color:#116f96; background:rgba(234,252,255,.6); border:1px solid rgba(51,135,165,.4); transition:transform .35s ease,background .35s ease; }.scroll-cue:hover b { transform:translateY(6px); background:#d7ff58; }.hero-meter { position:absolute; right:2.7vw; top:53%; display:flex; gap:7px; align-items:center; transform:rotate(90deg); transform-origin:right center; color:#5f91a5; font:9px 'DM Mono',monospace; letter-spacing:.1em; }.hero-meter span { display:block; width:76px; height:1px; background:linear-gradient(90deg,#5695ad 60%,transparent 60%); background-size:4px 1px; }.hero-meter i { font-style:normal; }
@keyframes rise { to { transform:translateY(0); } } @keyframes float-icon { to { transform:translateY(-10px) rotate(15deg); } }

.feed-section { position:relative; padding:10vh clamp(18px,7vw,115px) 16vh; }.feed-heading { position:relative; display:flex; align-items:flex-end; justify-content:space-between; min-height:190px; padding:0 min(5vw,80px) 30px; border-bottom:1px solid rgba(24,110,142,.3); }.feed-count { color:#15536f; font:600 clamp(1.6rem,3.6vw,4rem)/1 'Space Grotesk',sans-serif; letter-spacing:-.06em; }.feed-count span { color:#0f82aa; }.feed-note { margin:0; color:#4a798d; text-align:right; font:10px/1.55 'DM Mono',monospace; letter-spacing:.05em; }.feed-arc { position:absolute; width:59%; height:240px; left:50%; bottom:0; transform:translateX(-50%); border-radius:100% 100% 0 0; border:1px solid rgba(65,143,169,.17); border-bottom:0; pointer-events:none; }
.post-feed { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(22px,3.2vw,52px) clamp(14px,2.2vw,36px); padding-top:clamp(45px,8vw,120px); }.post-card { position:relative; min-height:300px; overflow:hidden; isolation:isolate; border:1px solid rgba(255,255,255,.72); border-radius:clamp(20px,2.1vw,32px); background:#8ac8d8; box-shadow:0 19px 44px rgba(10,74,104,.14),inset 0 1px 0 rgba(255,255,255,.75); transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(22px); opacity:0; transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .55s ease,opacity .7s ease; }.post-card.in-view { transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0); opacity:1; }.post-card:hover { box-shadow:0 32px 65px rgba(5,62,95,.22),inset 0 1px 0 rgba(255,255,255,.9); z-index:2; }.post-card:nth-child(6n + 1){grid-column:1 / span 7;aspect-ratio:1.33}.post-card:nth-child(6n + 2){grid-column:8 / span 5;aspect-ratio:.87;margin-top:12vw}.post-card:nth-child(6n + 3){grid-column:2 / span 5;aspect-ratio:.99;margin-top:5vw}.post-card:nth-child(6n + 4){grid-column:7 / span 6;aspect-ratio:1.34;margin-top:9vw}.post-card:nth-child(6n + 5){grid-column:1 / span 8;aspect-ratio:1.48;margin-top:6vw}.post-card:nth-child(6n + 6){grid-column:9 / span 4;aspect-ratio:.94;margin-top:-3vw}.post-open { position:absolute; inset:0; z-index:5; background:transparent; }.post-images { position:absolute; inset:0; display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow:hidden; }.post-images.multi-2 { grid-auto-columns:62%; }.post-images.multi-3 { grid-auto-columns:68%; }.post-images img { width:100%; height:100%; object-fit:cover; transform:scale(1.025); transition:transform 1.15s cubic-bezier(.16,1,.3,1),filter .7s ease; filter:saturate(.83) contrast(.96); }.post-card:hover .post-images img { transform:scale(1.11); filter:saturate(1.05) contrast(1); }.post-images:after { content:''; position:absolute; inset:0; background:linear-gradient(130deg,rgba(255,255,255,.32),transparent 26%,rgba(27,171,205,.03) 50%,rgba(2,42,77,.44)),linear-gradient(0deg,rgba(5,48,69,.55),transparent 48%); pointer-events:none; }.card-gloss { position:absolute; z-index:3; inset:0; pointer-events:none; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.46),transparent 25%); mix-blend-mode:soft-light; opacity:0; transition:opacity .35s ease; }.post-card:hover .card-gloss { opacity:1; }.post-ui { position:absolute; z-index:4; top:0; left:0; right:0; display:flex; align-items:flex-start; justify-content:space-between; padding:18px 20px; color:#efffff; text-shadow:0 1px 9px rgba(0,48,66,.4); }.post-index,.post-category { margin:0; font:500 9px 'DM Mono',monospace; letter-spacing:.1em; }.post-category { padding:5px 8px; border:1px solid rgba(255,255,255,.56); border-radius:999px; background:rgba(12,80,108,.2); backdrop-filter:blur(7px); }.open-mark { display:grid; place-items:center; width:0; overflow:hidden; height:34px; border-radius:50%; background:var(--lime); color:#15546c; font-size:17px; box-shadow:0 3px 12px rgba(0,61,79,.25); transition:width .45s cubic-bezier(.34,1.56,.64,1); }.post-card:hover .open-mark { width:34px; }.post-caption { position:absolute; z-index:4; bottom:0; left:0; right:0; padding:54px 20px 18px; color:white; transform:translateY(35px); transition:transform .6s cubic-bezier(.16,1,.3,1); }.post-card:hover .post-caption { transform:translateY(0); }.post-description { max-width:440px; margin:0 0 14px; font:600 clamp(15px,1.5vw,22px)/1.22 'Space Grotesk',sans-serif; letter-spacing:-.04em; text-shadow:0 2px 10px rgba(1,42,57,.35); }.post-description:empty { min-height:3px; }.post-meta { display:flex; justify-content:space-between; gap:12px; color:rgba(240,255,255,.83); font:9px 'DM Mono',monospace; letter-spacing:.06em; }.post-tags { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.empty-state { grid-column:1 / -1; padding:14vh 0; color:#42788e; text-align:center; font:13px 'DM Mono',monospace; }

.site-footer { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:160px; padding:25px clamp(18px,7vw,115px); overflow:hidden; color:#d7f5fb; background:#073d5d; }.site-footer:before { content:''; position:absolute; inset:0; opacity:.25; background:radial-gradient(circle at 80% 50%,#55d6e6,transparent 20%),linear-gradient(115deg,transparent 28%,#4ec4db 28.3%,transparent 28.5%); }.site-footer p,.admin-link { position:relative; z-index:1; font:10px 'DM Mono',monospace; letter-spacing:.15em; }.site-footer p span { color:var(--lime); }.admin-link { transition:color .3s ease,transform .3s ease; }.admin-link:hover { color:var(--lime); transform:translateX(5px); }.footer-radar { position:absolute; z-index:0; left:47%; top:50%; width:230px; height:230px; transform:translate(-50%,-50%); border:1px solid rgba(192,243,249,.24); border-radius:50%; }.footer-radar i { position:absolute; inset:20%; border:1px solid rgba(192,243,249,.18); border-radius:50%; }.footer-radar i:nth-child(2){inset:40%}.footer-radar i:nth-child(3){inset:0}.footer-radar b { position:absolute; width:50%; height:1px; top:50%; left:50%; transform-origin:left; background:linear-gradient(90deg,rgba(216,255,82,.7),transparent); animation:radar 4s linear infinite; } @keyframes radar { to { transform:rotate(360deg); } }

.post-overlay { position:fixed; z-index:40; inset:0; display:none; color:#e9fbff; overflow:auto; background:#062d45; }.post-overlay.is-open { display:block; animation:overlay-in .55s ease both; }.overlay-scrim { position:fixed; inset:0; background:radial-gradient(circle at 74% 20%,rgba(27,151,182,.42),transparent 30%),linear-gradient(135deg,#083e5d,#031d31 60%); }.overlay-shell { position:relative; z-index:1; min-height:100%; padding:clamp(86px,10vw,140px) clamp(18px,6vw,100px) 62px; }.overlay-close { position:fixed; top:21px; right:clamp(19px,4vw,65px); z-index:3; display:flex; align-items:center; gap:7px; color:#e7fdff; background:transparent; font:400 26px/1 'DM Mono',monospace; }.overlay-close span { font:10px 'DM Mono',monospace; letter-spacing:.13em; }.overlay-content { max-width:1500px; margin:auto; }.overlay-head { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; padding:0 1vw 24px; border-bottom:1px solid rgba(163,236,251,.26); }.overlay-kicker,.overlay-date { margin:0; color:#a3dbe7; font:10px 'DM Mono',monospace; letter-spacing:.14em; }.overlay-description { max-width:770px; margin:12px 0 0; color:#f2ffff; font:600 clamp(28px,4.8vw,72px)/.99 'Space Grotesk',sans-serif; letter-spacing:-.07em; }.overlay-gallery { display:flex; gap:clamp(13px,2vw,28px); overflow:auto; margin:28px -1vw 0; padding:0 1vw 24px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#89d7e6 transparent; }.overlay-gallery::-webkit-scrollbar { height:5px }.overlay-gallery::-webkit-scrollbar-thumb { background:#89d7e6; border-radius:99px }.gallery-slide { position:relative; flex:0 0 min(78vw,1040px); height:min(61vw,640px); overflow:hidden; border:1px solid rgba(207,249,255,.56); border-radius:26px; scroll-snap-align:center; background:#1e6d88; box-shadow:0 20px 60px rgba(0,0,0,.27); }.gallery-slide img { width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }.gallery-slide:hover img { transform:scale(1.06); }.gallery-slide:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.18),transparent 26%,transparent 65%,rgba(20,170,217,.14)); }.gallery-index { position:absolute; right:17px; bottom:15px; padding:6px 8px; border-radius:99px; color:#efffff; background:rgba(4,45,66,.38); border:1px solid rgba(255,255,255,.3); font:9px 'DM Mono',monospace; }.overlay-bottom { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 1vw 0; }.overlay-tags { display:flex; flex-wrap:wrap; gap:6px; }.overlay-tags span { color:#b5e8f3; font:9px 'DM Mono',monospace; letter-spacing:.08em; }.post-switcher { display:flex; gap:8px; }.post-switcher button { padding:9px 13px; color:#e5faff; border:1px solid rgba(180,239,249,.34); border-radius:999px; background:rgba(255,255,255,.05); font:10px 'DM Mono',monospace; letter-spacing:.09em; transition:background .3s ease,color .3s ease; }.post-switcher button:hover { color:#123a4e; background:#d8ff52; }.post-switcher button:disabled { opacity:.3; }.gallery-hint { margin:25px 1vw 0; color:#84bdcc; font:9px 'DM Mono',monospace; letter-spacing:.12em; } @keyframes overlay-in { from { opacity:0; clip-path:circle(0% at 50% 50%); } to { opacity:1; clip-path:circle(150% at 50% 50%); } }

.admin-view { display:none; min-height:100vh; position:relative; overflow:hidden; padding:clamp(27px,5vw,78px); color:#163f56; background:linear-gradient(120deg,#e7faff,#c9eef5 50%,#e7fcf4); }.admin-view.is-active { display:block; }.admin-glow { position:absolute; width:70vw; aspect-ratio:1; right:-30vw; top:-34vw; border-radius:50%; background:radial-gradient(circle,#eaffff 0,#83e9ed 30%,rgba(126,218,241,.15) 53%,transparent 68%); }.admin-exit { position:relative; z-index:1; display:inline-flex; font:10px 'DM Mono',monospace; letter-spacing:.1em; }.admin-login { position:relative; z-index:1; width:min(100%,500px); margin:16vh auto 0; padding:clamp(28px,5vw,58px); border-radius:30px; }.console-label { margin:0; color:#568399; font:10px 'DM Mono',monospace; letter-spacing:.13em; }.admin-login h2,.console-topbar h2 { margin:16px 0 33px; font:600 clamp(2.7rem,5vw,4.5rem)/.86 'Space Grotesk',sans-serif; letter-spacing:-.075em; }.admin-login em,.console-topbar em { color:#0980a9; font-style:normal; }.admin-login form { display:grid; gap:10px; }.admin-login input,.composer input,.composer textarea,.composer select { width:100%; color:#16475f; border:1px solid rgba(38,117,145,.24); border-radius:11px; outline:0; background:rgba(255,255,255,.64); box-shadow:inset 0 1px 3px rgba(27,102,133,.06); transition:border .2s ease,box-shadow .2s ease; }.admin-login input { padding:13px; }.admin-login input:focus,.composer input:focus,.composer textarea:focus,.composer select:focus { border-color:#3cabc6; box-shadow:0 0 0 3px rgba(92,211,228,.2); }.console-button { display:flex; align-items:center; justify-content:space-between; gap:30px; width:100%; margin-top:8px; padding:12px 14px 12px 17px; border-radius:10px; color:#f7ffff; background:linear-gradient(110deg,#0876a4,#17678e); box-shadow:0 8px 20px rgba(9,90,128,.24); font:600 10px 'DM Mono',monospace; letter-spacing:.1em; transition:transform .3s ease,filter .3s ease; }.console-button:hover { transform:translateY(-2px); filter:brightness(1.1); }.console-button span { display:grid; place-items:center; width:23px; aspect-ratio:1; border-radius:50%; color:#125675; background:#d8ff52; font-size:15px; }.form-message { min-height:16px; margin:4px 0 0; color:#b4384d; font:11px/1.4 'DM Mono',monospace; }.form-message.success { color:#187a68; }.admin-console { position:relative; z-index:1; max-width:1300px; margin:45px auto 0; }.console-topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }.console-topbar h2 { margin-bottom:0; }.logout-button,.composer-header button { padding:8px 0; background:transparent; color:#4d8298; font:10px 'DM Mono',monospace; letter-spacing:.09em; }.composer-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.65fr); gap:22px; align-items:start; }.composer { padding:clamp(18px,3vw,34px); border-radius:23px; }.composer-header { display:flex; justify-content:space-between; margin-bottom:17px; color:#34768e; font:10px 'DM Mono',monospace; letter-spacing:.14em; }.upload-zone { position:relative; display:grid; min-height:160px; place-content:center; gap:8px; overflow:hidden; color:#2c718a; text-align:center; border:1px dashed rgba(30,125,158,.5); border-radius:17px; background:linear-gradient(140deg,rgba(255,255,255,.5),rgba(114,224,238,.15)); transition:border .25s ease,background .25s ease,transform .25s ease; }.upload-zone.dragging { transform:scale(1.01); border-color:#0b9cc5; background:rgba(173,244,248,.42); }.upload-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; }.upload-zone strong { font:600 12px 'DM Mono',monospace; letter-spacing:.12em; }.upload-zone span { font-size:12px; }.upload-zone b { font-size:17px; }.upload-art { display:flex; gap:5px; justify-content:center; height:28px; align-items:flex-end; }.upload-art i { display:block; width:15px; height:21px; border-radius:4px; background:linear-gradient(145deg,#dfffff,#52bdd3); box-shadow:inset 1px 1px #fff; transform:skewY(-20deg); }.upload-art i:nth-child(2){height:28px;background:linear-gradient(145deg,#e9ff96,#a8df46)}.upload-art i:nth-child(3){height:17px}.image-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }.preview-thumb { position:relative; width:64px; height:54px; overflow:hidden; border-radius:7px; }.preview-thumb img { width:100%; height:100%; object-fit:cover; }.preview-thumb button { position:absolute; right:2px; top:2px; width:16px; height:16px; border-radius:50%; color:white; background:rgba(8,61,83,.72); font-size:13px; }.field-label { display:flex; align-items:center; justify-content:space-between; margin:17px 0 7px; color:#3b7187; font:10px 'DM Mono',monospace; letter-spacing:.1em; }.field-label small { color:#80a1ae; font-size:8px; }.composer textarea { min-height:91px; resize:vertical; padding:11px 12px; line-height:1.45; }.composer input,.composer select { height:42px; padding:0 11px; }.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.publish-row { display:flex; align-items:center; gap:15px; margin-top:22px; }.publish-row .console-button { width:auto; margin:0 0 0 auto; min-width:150px; }.publish-toggle { display:flex; align-items:center; gap:8px; color:#356f84; font:10px 'DM Mono',monospace; letter-spacing:.07em; }.publish-toggle input { position:absolute; opacity:0; width:1px; }.publish-toggle span { width:26px; height:15px; position:relative; border-radius:99px; background:#a9c8d3; transition:background .2s ease; }.publish-toggle span:after { content:''; position:absolute; width:11px; aspect-ratio:1; left:2px; top:2px; border-radius:50%; background:white; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s ease; }.publish-toggle input:checked + span { background:#48a8ae; }.publish-toggle input:checked + span:after { transform:translateX(11px); }.post-preview-panel { position:sticky; top:92px; min-height:275px; padding:25px; border-radius:23px; }.mini-card { display:grid; gap:13px; margin-top:17px; }.mini-image { position:relative; height:108px; overflow:hidden; border-radius:12px; background:linear-gradient(130deg,#74d4e6,#dfffc5); }.mini-image:before { content:''; position:absolute; width:75px; aspect-ratio:1; right:20px; top:10px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#91d8ed 40%,#237bb2); box-shadow:0 0 30px #c6fbff; }.mini-card small { color:#4e91a7; font:9px 'DM Mono',monospace; letter-spacing:.1em; }.mini-card p { min-height:22px; margin:5px 0; color:#23536a; font:600 16px/1.16 'Space Grotesk',sans-serif; }.mini-card span { color:#578398; font:9px 'DM Mono',monospace; }.admin-help { margin:25px 0 0; color:#5a8291; font-size:11px; line-height:1.55; }.post-manager { margin-top:47px; }.manager-heading { display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid rgba(37,114,142,.25); }.manager-heading span { color:#417a8f; font:10px 'DM Mono',monospace; }.admin-posts { display:grid; gap:8px; margin-top:12px; }.admin-post { display:grid; grid-template-columns:67px 1fr auto; gap:13px; align-items:center; padding:8px; border:1px solid rgba(255,255,255,.7); border-radius:12px; background:rgba(255,255,255,.43); }.admin-post img { width:67px; height:50px; object-fit:cover; border-radius:8px; }.admin-post p { margin:2px 0 0; color:#24546b; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.admin-post small { color:#6d93a1; font:9px 'DM Mono',monospace; letter-spacing:.08em; }.admin-post-actions { display:flex; gap:9px; }.admin-post-actions button { padding:6px 8px; border-radius:5px; color:#376e84; background:rgba(255,255,255,.64); font:9px 'DM Mono',monospace; }.admin-post-actions button:last-child { color:#b24456; }

.post-card { transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,calc(22px + var(--scroll-drift, 0px)),0); }
.post-card.in-view { transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--scroll-drift, 0px),0); }
.is-diving .ambient { filter:brightness(.95) saturate(1.1); transform:scale(1.025); transition:filter .6s ease,transform .7s cubic-bezier(.16,1,.3,1); }
.image-lightbox { position:fixed; z-index:60; inset:0; display:grid; place-items:center; padding:clamp(26px,5vw,72px); opacity:0; visibility:hidden; color:#e9fbff; transition:opacity .38s ease,visibility .38s ease; }
.image-lightbox.is-open { opacity:1; visibility:visible; }
.lightbox-backdrop { position:absolute; inset:0; background:rgba(1,23,38,.92); backdrop-filter:blur(22px) saturate(.8); }
.lightbox-close { position:absolute; z-index:2; top:20px; right:clamp(18px,4vw,60px); display:flex; align-items:center; gap:7px; color:#e7fdff; background:transparent; font:400 26px/1 'DM Mono',monospace; }
.lightbox-close span { font:10px 'DM Mono',monospace; letter-spacing:.13em; }
.lightbox-frame { position:relative; z-index:1; width:min(100%,1400px); height:min(80vh,900px); margin:0; display:grid; place-items:center; }
.lightbox-frame img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:13px; filter:saturate(1.04); box-shadow:0 38px 100px rgba(0,0,0,.48); transform:scale(.96); transition:transform .55s cubic-bezier(.16,1,.3,1); }
.image-lightbox.is-open .lightbox-frame img { transform:scale(1); }
.lightbox-frame figcaption { position:absolute; bottom:-27px; left:2px; color:#9bd1df; font:9px 'DM Mono',monospace; letter-spacing:.12em; }
.gallery-expand { position:absolute; left:16px; bottom:14px; z-index:2; padding:7px 9px; color:#dffbff; border:1px solid rgba(218,252,255,.47); border-radius:999px; background:rgba(4,45,66,.36); backdrop-filter:blur(9px); font:9px 'DM Mono',monospace; letter-spacing:.1em; opacity:0; transform:translateY(6px); transition:opacity .25s ease,transform .3s ease,background .3s ease; }
.gallery-slide:hover .gallery-expand,.gallery-expand:focus-visible { opacity:1; transform:translateY(0); }
.gallery-expand:hover { color:#083a55; background:var(--lime); }
@media (hover:none) { .gallery-expand { opacity:1; transform:none; } }

/* A brighter, more buoyant Futiger Aero atmosphere. */
.hero-topline > span { display:inline; width:auto; height:auto; background:none; }
.hero-topline > i { display:block; width:min(20vw,310px); height:1px; background:linear-gradient(90deg,#559db8,transparent); }
.bubble-field { position:absolute; inset:0; overflow:hidden; }
.bubble-field i { position:absolute; display:block; width:clamp(24px,3.2vw,64px); aspect-ratio:1; border:1px solid rgba(255,255,255,.72); border-radius:50%; background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.96) 0 4%,rgba(239,255,255,.6) 8%,rgba(123,228,245,.22) 38%,rgba(68,169,217,.08) 58%,transparent 69%); box-shadow:inset -9px -12px 18px rgba(23,131,183,.16),inset 6px 7px 12px rgba(255,255,255,.6),0 10px 24px rgba(18,120,163,.11); opacity:.72; animation:bubble-drift var(--bubble-time,16s) var(--bubble-delay,0s) ease-in-out infinite alternate; }
.bubble-field i:after { content:''; position:absolute; width:19%; aspect-ratio:1; left:27%; top:18%; border-radius:50%; background:rgba(255,255,255,.95); filter:blur(1px); }
.bubble-field i:nth-child(1){left:7%;top:14%;--bubble-time:17s}.bubble-field i:nth-child(2){left:20%;top:71%;width:clamp(18px,2.1vw,38px);--bubble-time:13s;--bubble-delay:-4s}.bubble-field i:nth-child(3){left:31%;top:30%;width:clamp(17px,2vw,35px);--bubble-time:15s;--bubble-delay:-9s}.bubble-field i:nth-child(4){left:46%;top:10%;width:clamp(24px,2.8vw,49px);--bubble-time:21s;--bubble-delay:-2s}.bubble-field i:nth-child(5){left:59%;top:76%;width:clamp(15px,1.7vw,31px);--bubble-time:12s;--bubble-delay:-8s}.bubble-field i:nth-child(6){left:72%;top:22%;width:clamp(28px,3.7vw,72px);--bubble-time:23s;--bubble-delay:-11s}.bubble-field i:nth-child(7){left:85%;top:57%;width:clamp(16px,2vw,36px);--bubble-time:14s;--bubble-delay:-7s}.bubble-field i:nth-child(8){left:90%;top:11%;width:clamp(12px,1.4vw,26px);--bubble-time:11s;--bubble-delay:-5s}.bubble-field i:nth-child(9){left:12%;top:48%;width:clamp(12px,1.4vw,26px);--bubble-time:12s;--bubble-delay:-10s}.bubble-field i:nth-child(10){left:40%;top:82%;width:clamp(30px,4.1vw,79px);--bubble-time:22s;--bubble-delay:-14s}.bubble-field i:nth-child(11){left:67%;top:47%;width:clamp(12px,1.5vw,27px);--bubble-time:13s;--bubble-delay:-3s}.bubble-field i:nth-child(12){left:78%;top:86%;width:clamp(19px,2.3vw,43px);--bubble-time:18s;--bubble-delay:-12s}
@keyframes bubble-drift { from { transform:translate3d(-2vw,4vh,0) scale(.82); } to { transform:translate3d(4vw,-9vh,0) scale(1.18); } }
body[data-channel="games"] .ambient { background:radial-gradient(circle at var(--cursor-x) var(--cursor-y),rgba(241,255,177,.45),transparent 16%),radial-gradient(circle at 58% 9%,rgba(245,255,255,.92),transparent 29%),linear-gradient(138deg,#d6f8ed 0%,#bceee3 45%,#cae5f9 100%); }
body[data-channel="games"] .orb-two { background:radial-gradient(circle at 65% 30%,#ffffff 0 2%,#e1ffdb 18%,#82e8b6 38%,rgba(68,196,150,.1) 66%,transparent 70%); }
body[data-channel="music"] .ambient { background:radial-gradient(circle at var(--cursor-x) var(--cursor-y),rgba(255,255,255,.42),transparent 16%),radial-gradient(circle at 50% 8%,rgba(255,255,255,.85),transparent 28%),linear-gradient(138deg,#ddecff 0%,#cce8fa 44%,#cdf6ee 100%); }
body[data-channel="music"] .orb-one { background:radial-gradient(circle at 34% 30%,#efffff 0 3%,#d7e9ff 12%,#8bbcf4 34%,rgba(99,130,225,.14) 58%,transparent 70%); }
.cursor-trails { position:fixed; z-index:69; inset:0; pointer-events:none; }
.cursor-trails i { position:absolute; top:0; left:0; width:calc(18px - var(--trail-index) * 1px); height:calc(18px - var(--trail-index) * 1px); margin:-9px 0 0 -9px; border:1px solid rgba(137,239,255,.76); border-radius:50%; background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.82),rgba(155,247,255,.23) 40%,rgba(122,220,229,.02) 68%); box-shadow:0 0 12px rgba(106,238,252,.23); mix-blend-mode:screen; will-change:transform,opacity; }
.route-transition { position:fixed; z-index:58; inset:0; display:grid; grid-template-columns:repeat(3,1fr); pointer-events:none; visibility:hidden; }
.route-transition span { display:block; background:linear-gradient(150deg,#e7fffc,#91e4ed 48%,#68b9e5); transform:translateY(110%); box-shadow:inset 0 1px rgba(255,255,255,.8); }
.route-transition.is-active { visibility:visible; }.route-transition.is-active span { animation:route-wipe .58s cubic-bezier(.76,0,.24,1) both; }.route-transition.is-active span:nth-child(2){animation-delay:.06s}.route-transition.is-active span:nth-child(3){animation-delay:.12s}
@keyframes route-wipe { 0% { transform:translateY(110%); } 45%,58% { transform:translateY(0); } 100% { transform:translateY(-110%); } }
::view-transition-old(root) { animation:route-old .42s cubic-bezier(.76,0,.24,1) both; } ::view-transition-new(root) { animation:route-new .52s cubic-bezier(.16,1,.3,1) both; } @keyframes route-old { to { opacity:0; transform:scale(.97); filter:blur(8px); } } @keyframes route-new { from { opacity:0; transform:scale(1.04); filter:blur(5px); } }
.reduced-motion .cursor-trails { display:none; }
@media (max-width:760px) { .cursor-trails,.cursor-cross { display:none; } }

/* Aero Archive mark: a tiny floating world instead of a generic wordmark. */
.wordmark { width:166px; gap:10px; font:inherit; letter-spacing:0; }
.aero-logo { position:relative; display:block; width:39px; height:39px; overflow:hidden; flex:0 0 auto; border:1px solid rgba(255,255,255,.85); border-radius:13px 19px 15px 20px; background:radial-gradient(circle at 29% 24%,#fff 0 5%,#d9ffff 14%,#68cae8 44%,#1374a9 77%); box-shadow:inset 3px 3px 8px rgba(255,255,255,.75),inset -6px -7px 12px rgba(3,91,148,.38),0 5px 17px rgba(19,119,165,.22); transform:rotate(-8deg); }
.aero-logo:before { content:''; position:absolute; width:54px; height:13px; left:-8px; top:17px; border:2px solid rgba(233,255,255,.8); border-left:0; border-right:0; border-radius:50%; transform:rotate(-27deg); box-shadow:0 0 7px rgba(255,255,255,.5); }
.aero-logo i { position:absolute; display:block; border-radius:50%; background:radial-gradient(circle at 32% 24%,#fff 0 8%,#defffd 20%,#9df382 52%,#54b45a 100%); box-shadow:inset 2px 2px 4px #fff,0 3px 8px rgba(0,106,83,.25); }.aero-logo i:nth-child(1){width:13px;height:13px;right:3px;top:4px}.aero-logo i:nth-child(2){width:7px;height:7px;left:6px;bottom:6px}.aero-logo i:nth-child(3){width:4px;height:4px;right:12px;bottom:5px;background:#f3ff9a}.aero-logo b { position:absolute; width:5px; height:5px; left:11px; top:8px; border-radius:50%; background:#fff; box-shadow:0 0 9px #fff; }
.wordmark-copy { display:flex; flex-direction:column; align-items:flex-start; gap:1px; font:700 11px/.86 'Space Grotesk',sans-serif; letter-spacing:.13em; }.wordmark-copy b { color:#15516f; }.wordmark-copy em { color:#168d99; font-size:8px; font-style:normal; letter-spacing:.22em; }
@media (min-width:761px) { .filter { min-width:108px; text-align:center; } }

/* A proper reticle follows the cursor above both light and dark surfaces. */
.cursor-cross { position:fixed; z-index:72; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px; pointer-events:none; mix-blend-mode:multiply; filter:drop-shadow(0 1px 1px rgba(255,255,255,.9)); will-change:transform; }
.cursor-cross i { position:absolute; display:block; background:linear-gradient(90deg,transparent,#0d5c82 22% 78%,transparent); }.cursor-cross i:first-child { left:0; top:16px; width:34px; height:1px; }.cursor-cross i:nth-child(2) { left:16px; top:0; width:1px; height:34px; background:linear-gradient(0deg,transparent,#0d5c82 22% 78%,transparent); }.cursor-cross b { position:absolute; left:13px; top:13px; width:8px; height:8px; border:1px solid #168da4; border-radius:50%; background:rgba(222,255,99,.72); box-shadow:0 0 0 2px rgba(255,255,255,.72),0 0 12px rgba(70,212,235,.7); }
body.pointer-active .cursor-cross { transform:scale(1.35); mix-blend-mode:normal; }.reduced-motion .cursor-cross { display:none; }

/* The dashboard is a toy-like archive launcher, not another feed header. */
.aero-dashboard { position:relative; z-index:1; max-width:1400px; margin:0 auto; padding:clamp(15px,3vw,44px) clamp(18px,7vw,110px) clamp(50px,8vw,120px); }
.dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 5px 17px; color:#37738b; border-bottom:1px solid rgba(54,139,166,.21); font:10px 'DM Mono',monospace; letter-spacing:.13em; }.dashboard-heading p { margin:0; }.dashboard-heading span { color:#6f9bad; font-size:8px; }
.dashboard-grid { display:grid; grid-template-columns:1fr minmax(210px,.52fr) 1fr; gap:clamp(12px,2vw,25px); align-items:stretch; padding-top:clamp(16px,2vw,28px); }
.dashboard-portal { position:relative; display:flex; min-height:310px; flex-direction:column; justify-content:space-between; overflow:hidden; padding:clamp(20px,2.5vw,35px); border:1px solid rgba(255,255,255,.86); border-radius:31px; box-shadow:inset 0 1px 1px #fff,0 18px 35px rgba(31,113,139,.15); transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .65s ease; isolation:isolate; }.dashboard-portal:hover { z-index:2; transform:translateY(-10px) rotate(var(--portal-tilt,0deg)); box-shadow:inset 0 1px 1px #fff,0 30px 54px rgba(22,100,128,.24); }.portal-games { --portal-tilt:-1deg; color:#124e63; background:linear-gradient(145deg,rgba(239,255,252,.88),rgba(159,239,208,.72)); }.portal-music { --portal-tilt:1deg; color:#15466b; background:linear-gradient(145deg,rgba(240,253,255,.9),rgba(163,206,248,.72)); }.portal-sky { position:absolute; z-index:-1; inset:0; overflow:hidden; }.portal-sky:before { content:''; position:absolute; width:88%; aspect-ratio:1; left:20%; bottom:-53%; border-radius:50%; background:radial-gradient(circle at 37% 24%,rgba(255,255,255,.96),rgba(221,255,255,.38) 23%,rgba(82,192,212,.16) 44%,transparent 65%); }.portal-sky i { position:absolute; display:block; border-radius:50%; border:1px solid rgba(255,255,255,.72); background:radial-gradient(circle at 32% 24%,#fff,rgba(209,255,253,.4) 26%,rgba(59,184,194,.12) 60%,transparent 70%); box-shadow:inset 3px 3px 5px rgba(255,255,255,.6),0 8px 16px rgba(25,126,150,.13); animation:portal-bob 5s ease-in-out infinite alternate; }.portal-sky i:nth-child(1){width:58px;height:58px;right:14%;top:12%}.portal-sky i:nth-child(2){width:25px;height:25px;right:31%;top:38%;animation-delay:-2s}.portal-sky i:nth-child(3){width:13px;height:13px;right:9%;top:48%;animation-delay:-4s}.portal-music .portal-sky i:nth-child(1){background:radial-gradient(circle at 32% 24%,#fff,rgba(216,236,255,.5) 26%,rgba(76,137,221,.16) 60%,transparent 70%)}
.dashboard-portal small { color:#417d8e; font:9px 'DM Mono',monospace; letter-spacing:.13em; }.dashboard-portal h2 { margin:11px 0 9px; font:600 clamp(2.7rem,4.1vw,4.5rem)/.78 'Space Grotesk',sans-serif; letter-spacing:-.09em; }.dashboard-portal h2 em { color:#098b91; font-style:normal; }.portal-music h2 em { color:#3174b5; }.dashboard-portal p { max-width:230px; margin:0; color:#3d7182; font-size:12px; line-height:1.5; }.dashboard-portal > b { display:flex; justify-content:space-between; align-items:center; margin-top:24px; color:#1c667b; font:600 10px 'DM Mono',monospace; letter-spacing:.13em; }.dashboard-portal > b span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#135b76; background:#e9ff8a; box-shadow:inset 1px 1px #fff,0 3px 7px rgba(68,132,40,.18); transition:transform .45s cubic-bezier(.34,1.56,.64,1); }.dashboard-portal:hover > b span { transform:rotate(45deg) scale(1.12); }
.dashboard-core { position:relative; display:grid; min-height:310px; place-content:center; justify-items:center; overflow:hidden; padding:24px; border-radius:31px; color:#23667b; text-align:center; }.dashboard-core:before { content:''; position:absolute; width:460px; height:1px; background:rgba(43,132,152,.14); transform:rotate(-45deg); }.core-globe { position:relative; width:124px; aspect-ratio:1; margin-bottom:15px; border:1px solid rgba(255,255,255,.84); border-radius:50%; background:radial-gradient(circle at 34% 25%,#fff 0 4%,#d7ffff 14%,#80dcec 42%,#3b91c5 70%,#2a628b); box-shadow:inset 11px 9px 17px rgba(255,255,255,.54),inset -13px -15px 23px rgba(18,101,157,.43),0 12px 23px rgba(37,125,149,.18); animation:core-float 5.4s ease-in-out infinite alternate; }.core-globe:before { content:''; position:absolute; width:151px; height:34px; left:-15px; top:42px; border:1px solid rgba(251,255,255,.7); border-radius:50%; transform:rotate(-28deg); }.core-globe i { position:absolute; border-radius:50%; background:#ecff8c; box-shadow:0 0 11px rgba(206,255,94,.72); }.core-globe i:nth-child(1){width:13px;height:13px;right:-7px;top:19px}.core-globe i:nth-child(2){width:7px;height:7px;left:6px;bottom:22px}.core-globe b { position:absolute; width:5px; height:5px; left:25px; top:22px; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff; }.dashboard-core p { margin:0; color:#2c7188; font:600 11px/.95 'DM Mono',monospace; letter-spacing:.18em; }.dashboard-core small { margin-top:10px; color:#6d96a4; font:8px/1.5 'DM Mono',monospace; letter-spacing:.1em; }
@keyframes portal-bob { to { transform:translate3d(-9px,12px,0) scale(1.1); } } @keyframes core-float { to { transform:translateY(-12px) rotate(8deg); } }

/* Games and Music receive their own arrival spaces before their own feeds. */
.channel-gateway { position:relative; display:grid; grid-template-columns:.7fr 1.15fr .8fr; gap:clamp(24px,5vw,80px); align-items:center; max-width:1400px; min-height:330px; margin:0 auto; padding:clamp(35px,6vw,100px) clamp(22px,9vw,150px); overflow:hidden; color:#14566c; }.channel-gateway[hidden] { display:none; }.channel-gateway:before { content:''; position:absolute; inset:9% 5%; border:1px solid rgba(255,255,255,.58); border-radius:49% 51% 38% 62%; background:rgba(244,255,255,.14); box-shadow:inset 0 1px rgba(255,255,255,.72); transform:rotate(-4deg); }.gateway-ripple { position:relative; z-index:1; width:180px; aspect-ratio:1; border:1px solid rgba(56,149,173,.28); border-radius:50%; }.gateway-ripple i { position:absolute; inset:16%; border:1px solid rgba(56,149,173,.28); border-radius:50%; }.gateway-ripple i:nth-child(2){inset:33%}.gateway-ripple i:nth-child(3){inset:0}.gateway-ripple b { position:absolute; width:44%; height:44%; left:29%; top:29%; border-radius:50%; background:radial-gradient(circle at 32% 24%,#fff,#beffff 23%,#6ec6df 65%,#3c86bf); box-shadow:inset 4px 4px 8px #fff,0 0 25px rgba(62,202,220,.4); animation:core-float 4s ease-in-out infinite alternate; }.gateway-kicker { position:relative; z-index:1; margin:0 0 13px; color:#437a8f; font:10px 'DM Mono',monospace; letter-spacing:.14em; }.channel-gateway h2 { position:relative; z-index:1; margin:0; font:600 clamp(2.9rem,5.2vw,6.2rem)/.8 'Space Grotesk',sans-serif; letter-spacing:-.09em; }.channel-gateway h2:after { content:'✦'; display:inline-block; margin-left:.13em; color:#ddff67; font-size:.45em; vertical-align:top; animation:twinkle 1.8s ease-in-out infinite alternate; }.channel-gateway > p { position:relative; z-index:1; max-width:230px; margin:0; color:#427286; font-size:13px; line-height:1.55; }.channel-gateway:after { content:''; position:absolute; width:40vw; aspect-ratio:1; right:-12vw; bottom:-28vw; border-radius:50%; background:radial-gradient(circle,#e4fffa,rgba(121,237,215,.24) 40%,transparent 68%); }.channel-gateway h2 { color:#09818a; } body[data-page="music"] .channel-gateway h2 { color:#226ab3; } body[data-page="music"] .gateway-ripple b { background:radial-gradient(circle at 32% 24%,#fff,#d2e8ff 23%,#86b8ed 65%,#3b68af); } @keyframes twinkle { to { transform:scale(1.5) rotate(30deg); filter:brightness(1.2); } }

@media (max-width:760px) { .aero-dashboard { padding:20px 15px 65px; }.dashboard-heading span { display:none; }.dashboard-grid { grid-template-columns:1fr; }.dashboard-core { min-height:190px; }.dashboard-portal { min-height:260px; }.channel-gateway { grid-template-columns:1fr; min-height:0; padding:42px 25px 70px; gap:22px; }.gateway-ripple { width:118px; }.channel-gateway > p { max-width:300px; }.channel-gateway:before { inset:4% -20% 5% 2%; }.wordmark-copy { display:none; }.wordmark { width:44px; } }

/* Secret states need to read as an actual change, not a microscopic filter. */
.secret-feedback { position:fixed; z-index:75; left:50%; bottom:27px; padding:10px 13px; color:#0e536b; border:1px solid rgba(255,255,255,.88); border-radius:999px; background:rgba(239,255,255,.82); box-shadow:inset 0 1px rgba(255,255,255,.95),0 12px 25px rgba(22,112,140,.2); backdrop-filter:blur(15px); font:10px 'DM Mono',monospace; letter-spacing:.12em; opacity:0; pointer-events:none; transform:translate(-50%,18px) scale(.9); transition:opacity .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1); }.secret-feedback.is-visible { opacity:1; transform:translate(-50%,0) scale(1); }.sky-secret.is-active i { transform:scale(1.45); filter:saturate(1.7) brightness(1.15); box-shadow:inset 3px 3px 7px #fff,0 0 0 5px rgba(233,255,123,.24),0 0 28px rgba(77,225,207,.68); }
body.aero-bloom .ambient { filter:hue-rotate(43deg) saturate(1.55) brightness(1.08); background:radial-gradient(circle at 17% 25%,rgba(238,255,124,.58),transparent 22%),radial-gradient(circle at 81% 72%,rgba(105,255,226,.42),transparent 25%),linear-gradient(135deg,#d8fff1 0%,#98ebcf 44%,#b8e5ff 100%); } body.aero-bloom .orb-one { background:radial-gradient(circle at 34% 30%,#fff 0 3%,#eaffc4 12%,#82e58f 34%,rgba(77,209,157,.14) 58%,transparent 70%); box-shadow:inset -30px -30px 90px #29b987,inset 18px 24px 60px #fff,0 0 110px rgba(134,255,162,.72); } body.aero-bloom .bubble-field i { border-color:rgba(255,255,218,.92); filter:saturate(1.45); } body.aero-bloom .ribbon { border-color:rgba(222,255,133,.72); }
body.aero-orbit .ambient { transform:scale(1.06) rotate(1deg); transition:transform 1.2s cubic-bezier(.16,1,.3,1); } body.aero-orbit .bubble-field { animation:whole-sky-orbit 14s linear infinite; transform-origin:55% 48%; } body.aero-orbit .orb-one,body.aero-orbit .orb-two,body.aero-orbit .orb-three { animation-duration:5.5s; } body.aero-orbit .ribbon-one { animation-duration:5s; } body.aero-orbit .ribbon-two { animation-duration:6.5s; } body.aero-orbit .aero-grid { animation:orbit-grid 1.7s ease-in-out infinite alternate; } @keyframes whole-sky-orbit { to { transform:rotate(360deg); } }

/* Compact dashboard: the two destinations are visible immediately. */
body[data-page="log"] .site-header { justify-content:center; }.site-header .wordmark { display:none; } body[data-page="log"] .motion-toggle { position:absolute; right:clamp(18px,4vw,68px); }.site-header .filter-nav { margin:0; } body[data-page="log"] .hero { min-height:56svh; height:56svh; padding:calc(var(--nav-h) + 4vh) clamp(22px,9vw,150px) 3vh; } body[data-page="log"] .hero-topline,body[data-page="log"] .hero-bottom,body[data-page="log"] .hero-meter { display:none; } body[data-page="log"] .hero-copy { margin:auto 0 1vh; } body[data-page="log"] .hero-title { max-width:880px; font-size:clamp(3.5rem,7.6vw,8.4rem); line-height:.77; } body[data-page="log"] .aero-dashboard { position:relative; min-height:0; max-width:none; padding:14px clamp(18px,9vw,150px) 31px; overflow:hidden; } body[data-page="log"] .aero-dashboard:before { content:''; position:absolute; width:90vw; height:120px; left:5vw; top:-58px; border:1px solid rgba(255,255,255,.68); border-radius:50%; background:linear-gradient(180deg,rgba(239,255,255,.6),transparent); box-shadow:inset 0 1px rgba(255,255,255,.8); } body[data-page="log"] .dashboard-heading { display:none; } body[data-page="log"] .dashboard-ctas { position:relative; z-index:1; justify-content:center; padding:0; } body[data-page="log"] .dashboard-cta { min-width:clamp(245px,28vw,360px); padding:15px 18px; } body[data-page="log"] .feed-section { padding-top:7vh; }

/* Dashboard stays simple: two doors, then the complete archive. */
.dashboard-ctas { display:flex; flex-wrap:wrap; gap:14px; padding-top:22px; }.dashboard-cta { position:relative; display:flex; min-width:min(100%,310px); align-items:center; gap:12px; padding:13px 15px; overflow:hidden; border:1px solid rgba(255,255,255,.86); border-radius:999px; box-shadow:inset 0 1px 1px #fff,0 9px 18px rgba(30,109,138,.13); font:600 10px 'DM Mono',monospace; letter-spacing:.09em; transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease; }.dashboard-cta:before { content:''; position:absolute; width:100px; aspect-ratio:1; right:-30px; top:-57px; border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,255,255,.12) 42%,transparent 68%); }.dashboard-cta:hover { transform:translateY(-5px) scale(1.025); box-shadow:inset 0 1px 1px #fff,0 17px 29px rgba(30,109,138,.22); }.dashboard-cta span { color:#4b8798; }.dashboard-cta b { position:relative; flex:1; }.dashboard-cta i { position:relative; display:grid; width:25px; aspect-ratio:1; place-items:center; border-radius:50%; font-size:15px; font-style:normal; }.cta-games { color:#165f68; background:linear-gradient(115deg,rgba(244,255,252,.94),rgba(163,240,207,.7)); }.cta-games i { background:#e5ff82; }.cta-music { color:#245b83; background:linear-gradient(115deg,rgba(246,254,255,.94),rgba(168,212,251,.7)); }.cta-music i { background:#cdeaff; }

/* Individual pages become different worlds, without the global site header. */
.channel-back,.channel-scenery { display:none; } body[data-page="games"] .site-header,body[data-page="music"] .site-header { display:none !important; } body[data-page="games"] .hero,body[data-page="music"] .hero { min-height:100svh; padding:clamp(24px,5vw,76px) clamp(23px,8vw,135px) clamp(34px,7vw,90px); isolation:isolate; } body[data-page="games"] .hero { color:#124e67; background:radial-gradient(circle at 83% 23%,rgba(238,255,215,.94),transparent 20%),linear-gradient(142deg,rgba(232,255,250,.9),rgba(144,229,198,.6) 57%,rgba(162,215,244,.58)); } body[data-page="music"] .hero { color:#164d79; background:radial-gradient(circle at 78% 20%,rgba(244,255,255,.94),transparent 19%),linear-gradient(142deg,rgba(232,248,255,.94),rgba(157,210,247,.64) 57%,rgba(166,237,229,.6)); } body[data-page="games"] .hero:after,body[data-page="music"] .hero:after { width:120vw; top:59%; left:-10vw; background:rgba(255,255,255,.55); transform:rotate(-9deg); } body[data-page="games"] .hero-topline,body[data-page="music"] .hero-topline,body[data-page="games"] .hero-bottom,body[data-page="music"] .hero-bottom,body[data-page="games"] .hero-meter,body[data-page="music"] .hero-meter { display:none; } body[data-page="games"] .hero-copy,body[data-page="music"] .hero-copy { z-index:3; max-width:760px; margin:auto 0; } body[data-page="games"] .hero-title,body[data-page="music"] .hero-title { margin:0; font-size:clamp(4.6rem,11vw,11.5rem); line-height:.72; } body[data-page="games"] .hero-title .outline { color:transparent; -webkit-text-stroke:2px rgba(18,108,114,.72); } body[data-page="music"] .hero-title .outline { color:transparent; -webkit-text-stroke:2px rgba(35,99,176,.72); } .channel-back { position:absolute; z-index:5; top:clamp(19px,3vw,45px); left:clamp(18px,4vw,65px); padding:9px 12px; color:#17606f; border:1px solid rgba(255,255,255,.78); border-radius:999px; background:rgba(244,255,255,.48); box-shadow:inset 0 1px rgba(255,255,255,.85),0 7px 16px rgba(30,110,132,.12); backdrop-filter:blur(12px); font:10px 'DM Mono',monospace; letter-spacing:.1em; transition:transform .3s ease,background .3s ease; }.channel-back:hover { transform:translateX(-4px); background:#f7ffff; } body[data-page="games"] .channel-back,body[data-page="music"] .channel-back,body[data-page="games"] .channel-scenery,body[data-page="music"] .channel-scenery { display:block; }

.reveal { opacity:0; transform:translateY(18px); animation:reveal .9s .55s cubic-bezier(.16,1,.3,1) forwards; }.hero-topline{animation-delay:.4s}.hero-bottom{animation-delay:1.08s}@keyframes reveal{to{opacity:1;transform:translateY(0)}}
.channel-scenery { position:absolute; z-index:1; inset:0; overflow:hidden; pointer-events:none; }.game-scenery,.music-scenery { display:none; position:absolute; inset:0; }.game-scenery i,.music-scenery i { position:absolute; display:block; }.game-scenery { background:radial-gradient(circle at 82% 70%,rgba(239,255,172,.4),transparent 16%); }.game-scenery:before { content:''; position:absolute; width:min(58vw,820px); height:min(29vw,420px); right:-6vw; bottom:-7vw; border-radius:55% 48% 0 0; background:radial-gradient(ellipse at 36% 17%,rgba(239,255,225,.94),rgba(130,222,164,.78) 31%,rgba(44,162,140,.42) 70%,transparent 71%); box-shadow:inset 18px 19px 37px rgba(255,255,255,.42),0 -16px 57px rgba(73,219,160,.18); transform:rotate(-7deg); }.game-scenery:after { content:''; position:absolute; width:180px; aspect-ratio:1; right:16vw; top:15vh; border:1px solid rgba(255,255,255,.76); border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff 0 4%,rgba(204,255,225,.65) 17%,rgba(122,223,178,.35) 42%,rgba(57,152,167,.13) 62%,transparent 69%); box-shadow:inset 10px 10px 16px rgba(255,255,255,.67),0 17px 36px rgba(34,143,146,.17); animation:scene-float 7s ease-in-out infinite alternate; }.game-scenery i:nth-child(1){width:47px;height:47px;right:9vw;top:23vh;border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff,#e9ffb6 25%,#7edb74 66%,#3d9f68);box-shadow:inset 4px 4px 7px #fff,0 8px 15px rgba(34,135,88,.2);animation:scene-float 5s -2s ease-in-out infinite alternate}.game-scenery i:nth-child(2){width:15px;height:15px;right:31vw;top:31vh;border-radius:50%;background:#eaff96;box-shadow:0 0 15px #eaff96;animation:scene-float 4s ease-in-out infinite alternate}.game-scenery i:nth-child(3){width:120px;height:32px;right:8vw;bottom:25vh;border:1px solid rgba(255,255,255,.72);border-radius:50%;transform:rotate(-24deg)}.game-scenery b { position:absolute; right:10.8vw; bottom:20vh; width:48px; height:48px; border-radius:14px 23px 17px 26px; background:linear-gradient(145deg,#f5ffff,#9ae6ee 47%,#3186b3); box-shadow:inset 4px 4px 8px #fff,0 10px 17px rgba(20,108,140,.2); transform:rotate(15deg); animation:scene-float 6s -1s ease-in-out infinite alternate; } body[data-page="games"] .game-scenery { display:block; }
.music-scenery { background:radial-gradient(circle at 76% 72%,rgba(184,240,236,.55),transparent 23%); }.music-scenery:before { content:''; position:absolute; width:min(57vw,780px); aspect-ratio:1; right:-9vw; bottom:-28vw; border:1px solid rgba(255,255,255,.75); border-radius:50%; background:repeating-radial-gradient(circle at 50% 50%,rgba(35,111,173,.12) 0 2px,transparent 3px 18px),radial-gradient(circle at 35% 28%,rgba(255,255,255,.85),rgba(176,232,254,.45) 35%,rgba(56,126,204,.35) 72%,transparent 73%); box-shadow:inset 20px 20px 45px rgba(255,255,255,.45),0 -10px 65px rgba(52,148,221,.25); animation:disc-spin 24s linear infinite; }.music-scenery:after { content:''; position:absolute; width:min(63vw,860px); height:18px; right:-5vw; top:38%; border:1px solid rgba(255,255,255,.72); border-radius:50%; box-shadow:0 22px 0 rgba(255,255,255,.3),0 44px 0 rgba(255,255,255,.18); transform:rotate(-16deg); }.music-scenery i:nth-child(1){width:73px;height:73px;right:23vw;top:20vh;border:1px solid rgba(255,255,255,.82);border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff,#d8f4ff 26%,rgba(82,155,234,.38) 65%,transparent 71%);box-shadow:inset 5px 5px 9px #fff,0 9px 20px rgba(53,125,196,.18);animation:scene-float 6s ease-in-out infinite alternate}.music-scenery i:nth-child(2){width:23px;height:23px;right:10vw;top:31vh;border-radius:50%;background:#e7ff9b;box-shadow:0 0 16px #e7ff9b;animation:scene-float 4s -1s ease-in-out infinite alternate}.music-scenery i:nth-child(3){width:12px;height:12px;right:37vw;top:39vh;border-radius:50%;background:#e5ffff;box-shadow:0 0 14px #e5ffff;animation:scene-float 5s -4s ease-in-out infinite alternate}.music-scenery b { position:absolute; width:105px; height:18px; right:9vw; bottom:21vh; border:1px solid rgba(255,255,255,.8); border-radius:50%; background:rgba(200,255,250,.38); transform:rotate(-14deg); box-shadow:0 7px 0 rgba(104,206,213,.28); } body[data-page="music"] .music-scenery { display:block; } @keyframes scene-float { to { transform:translate3d(-16px,12px,0) rotate(16deg) scale(1.08); } } @keyframes disc-spin { to { transform:rotate(360deg); } }

.reduced-motion *, .reduced-motion *:before, .reduced-motion *:after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }

@media (max-width:760px) { body { cursor:auto; }.pointer { display:none; }.site-header { height:66px; padding:11px 15px; }.wordmark { width:auto; font-size:9px; }.filter-nav { position:absolute; left:50%; transform:translateX(-50%); }.filter { padding:8px 9px; font-size:9px; }.filter span { display:none; }.motion-toggle { width:auto; font-size:0; }.motion-toggle span { width:10px; }.hero { min-height:100svh; padding:calc(var(--nav-h) + 3vh) 21px 4vh; }.hero-topline { max-width:250px; font-size:8px; line-height:1.6; }.hero-topline span { display:none; }.hero-title { font-size:clamp(3.2rem,15vw,5.3rem); letter-spacing:-.09em; }.hero-bottom { align-items:flex-start; flex-direction:column; gap:18px; }.hero-meter { display:none; }.feed-section { padding:8vh 15px 11vh; }.feed-heading { min-height:143px; padding:0 8px 19px; }.feed-count { font-size:2.05rem; }.feed-note { font-size:8px; }.feed-arc { width:95%; height:170px; }.post-feed { grid-template-columns:repeat(2,1fr); gap:15px; padding-top:44px; }.post-card:nth-child(n) { grid-column:auto; margin-top:0; min-height:0; border-radius:19px; }.post-card:nth-child(6n + 1),.post-card:nth-child(6n + 4),.post-card:nth-child(6n + 5){grid-column:1 / -1;aspect-ratio:1.2}.post-card:nth-child(6n + 2),.post-card:nth-child(6n + 3),.post-card:nth-child(6n + 6){aspect-ratio:.82}.post-ui { padding:12px; }.post-index { display:none; }.post-category { padding:4px 6px; font-size:7px; }.post-caption { padding:45px 13px 12px; transform:translateY(0); }.post-description { margin-bottom:7px; font-size:15px; }.post-meta { font-size:7px; }.open-mark { width:26px; height:26px; font-size:13px; }.site-footer { min-height:133px; padding:20px 17px; }.site-footer p,.admin-link { font-size:8px; }.footer-radar { left:50%; }.overlay-shell { padding:86px 16px 40px; }.overlay-head { grid-template-columns:1fr; gap:12px; padding:0 3px 17px; }.overlay-description { font-size:34px; }.overlay-gallery { margin:20px -16px 0; padding:0 16px 18px; }.gallery-slide { flex-basis:88vw; height:78vw; border-radius:17px; }.overlay-bottom { align-items:flex-start; flex-direction:column; }.post-switcher { align-self:flex-end; }.gallery-hint { display:none; }.admin-view { padding:23px 16px; }.admin-login { margin-top:12vh; }.composer-grid { grid-template-columns:1fr; }.post-preview-panel { position:relative; top:auto; }.console-topbar { align-items:flex-start; flex-direction:column; }.admin-post { grid-template-columns:54px 1fr; }.admin-post img { width:54px; height:45px; }.admin-post-actions { grid-column:2; }.publish-row { align-items:flex-end; flex-direction:column; }.publish-toggle { align-self:flex-start; }.publish-row .console-button { width:100%; }.field-row { gap:8px; } }
@media (hover:none) { .post-caption { transform:none; }.open-mark { width:28px; }.post-card:hover { transform:none; }.post-card:hover .post-images img { transform:scale(1.025); } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; } }

body[data-page="games"] .eyebrow,body[data-page="music"] .eyebrow { display:none; }

/* Three tiny interactive secrets live in the margins. */
.sky-secrets { position:fixed; z-index:8; inset:0; pointer-events:none; }.sky-secret { position:absolute; display:grid; place-items:center; width:35px; height:35px; padding:0; color:#145d77; border:0; border-radius:50%; background:transparent; cursor:none; pointer-events:auto; }.sky-secret i { display:block; width:100%; height:100%; border:1px solid rgba(255,255,255,.82); border-radius:50%; background:radial-gradient(circle at 31% 23%,rgba(255,255,255,.96),rgba(200,255,255,.42) 22%,rgba(80,191,217,.18) 58%,transparent 69%); box-shadow:inset 3px 3px 7px rgba(255,255,255,.75),0 8px 17px rgba(29,126,156,.17); animation:secret-drift 4s ease-in-out infinite alternate; transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .35s ease; }.sky-secret span { position:absolute; width:max-content; padding:6px 8px; color:#15586e; border:1px solid rgba(255,255,255,.72); border-radius:999px; background:rgba(243,255,255,.67); box-shadow:0 5px 12px rgba(26,109,138,.12); font:8px 'DM Mono',monospace; letter-spacing:.08em; opacity:0; transform:translateY(13px) scale(.88); transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }.sky-secret:hover i,.sky-secret:focus-visible i { transform:scale(1.45); filter:saturate(1.25); }.sky-secret:hover span,.sky-secret:focus-visible span { opacity:1; transform:translateY(24px) scale(1); }.secret-bubble { left:2.2vw; top:36vh; }.secret-bubble i { animation-delay:-2s; }.secret-spark { right:2.6vw; top:62vh; width:25px; height:25px; }.secret-spark i { background:radial-gradient(circle at 50% 50%,#f1ff98 0 12%,rgba(248,255,255,.92) 16%,rgba(111,229,227,.22) 56%,transparent 70%); }.secret-orbit { right:5.5vw; top:20vh; width:29px; height:29px; }.secret-orbit i { border-radius:42% 58% 47% 53%; animation-duration:6s; }.secret-orbit span { right:0; }.secret-spark span { right:0; } @keyframes secret-drift { to { transform:translate3d(6px,-9px,0) rotate(17deg); } }
.burst-bubble { position:fixed; z-index:67; width:var(--burst-size,18px); aspect-ratio:1; pointer-events:none; border:1px solid rgba(255,255,255,.86); border-radius:50%; background:radial-gradient(circle at 32% 24%,#fff,rgba(201,255,255,.47) 26%,rgba(68,187,221,.27) 58%,transparent 70%); box-shadow:inset 3px 3px 5px rgba(255,255,255,.75),0 6px 14px rgba(27,120,160,.2); animation:bubble-burst 1.9s cubic-bezier(.16,1,.3,1) both; } @keyframes bubble-burst { to { transform:translate3d(var(--burst-x),var(--burst-y),0) scale(.18); opacity:0; } } body.aero-bloom .ambient { filter:hue-rotate(24deg) saturate(1.2) brightness(1.03); } body.aero-bloom .orb-three { animation-duration:4s; } body.aero-orbit .bubble-field { transform:rotate(12deg) scale(1.08); transition:transform 1.3s cubic-bezier(.16,1,.3,1); } body.aero-orbit .aero-grid { animation:orbit-grid 3.4s ease-in-out infinite alternate; } @keyframes orbit-grid { to { transform:perspective(240px) rotateX(60deg) rotateZ(7deg) scale(1.08); } }

/* The tail stays visible on the pale Aero UI as well as dark images. */
.cursor-trails i { border-color:rgba(11,105,151,.72); background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.98) 0 12%,rgba(214,255,173,.88) 23%,rgba(53,200,218,.57) 56%,rgba(16,116,160,.15) 72%); box-shadow:0 0 12px rgba(27,149,191,.45),inset 2px 2px 4px rgba(255,255,255,.75); mix-blend-mode:normal; }

/* A little impossible lawn and a couple of shiny digital residents. */
.aero-meadow { position:absolute; left:-5vw; right:-5vw; bottom:-3.5vh; height:23vh; min-height:170px; overflow:hidden; opacity:.78; }.aero-meadow > b { position:absolute; inset:38% 0 -22%; border-radius:50% 50% 0 0; background:radial-gradient(ellipse at 50% 0%,rgba(239,255,218,.92),rgba(150,228,140,.68) 29%,rgba(63,171,116,.34) 70%,transparent 71%); box-shadow:inset 0 18px 31px rgba(255,255,255,.42),0 -13px 31px rgba(78,201,137,.2); }.aero-meadow:before { content:''; position:absolute; z-index:1; left:0; right:0; bottom:0; height:52%; background:repeating-linear-gradient(84deg,transparent 0 10px,rgba(238,255,213,.63) 11px 12px,transparent 13px 22px),linear-gradient(0deg,rgba(52,152,98,.46),transparent); mask-image:linear-gradient(transparent,black 30%); }.grass-sprigs { position:absolute; z-index:2; left:6%; right:6%; bottom:11%; height:54%; }.grass-sprigs i { position:absolute; bottom:0; width:2px; height:var(--blade-height,55px); transform-origin:bottom; border-radius:100% 100% 0 0; background:linear-gradient(0deg,#50ab66,#dbff9d); box-shadow:0 0 3px rgba(229,255,159,.7); animation:grass-sway var(--sway,2.8s) ease-in-out infinite alternate; }.grass-sprigs i:after { content:''; position:absolute; width:2px; height:76%; bottom:8px; left:3px; border-radius:100% 100% 0 0; background:linear-gradient(0deg,#3e9965,#b9fa93); transform:rotate(21deg); transform-origin:bottom; }.grass-sprigs i:nth-child(1){left:2%;--blade-height:42px;--sway:2.4s}.grass-sprigs i:nth-child(2){left:11%;--blade-height:74px;--sway:3.2s}.grass-sprigs i:nth-child(3){left:20%;--blade-height:49px;--sway:2.6s}.grass-sprigs i:nth-child(4){left:30%;--blade-height:83px;--sway:3.5s}.grass-sprigs i:nth-child(5){left:39%;--blade-height:55px;--sway:2.3s}.grass-sprigs i:nth-child(6){left:48%;--blade-height:91px;--sway:3s}.grass-sprigs i:nth-child(7){left:58%;--blade-height:50px;--sway:2.7s}.grass-sprigs i:nth-child(8){left:67%;--blade-height:77px;--sway:3.4s}.grass-sprigs i:nth-child(9){left:76%;--blade-height:45px;--sway:2.2s}.grass-sprigs i:nth-child(10){left:84%;--blade-height:84px;--sway:3.1s}.grass-sprigs i:nth-child(11){left:91%;--blade-height:56px;--sway:2.8s}.grass-sprigs i:nth-child(12){left:97%;--blade-height:70px;--sway:3.3s}@keyframes grass-sway { to { transform:rotate(8deg) scaleY(1.05); } }.aero-meadow > span { position:absolute; z-index:3; width:14px; aspect-ratio:1; bottom:31%; border-radius:50%; background:radial-gradient(circle,#fff 0 17%,#f7ff95 20% 48%,transparent 50%); filter:drop-shadow(0 2px 2px rgba(52,150,88,.2)); animation:flower-bob 3s ease-in-out infinite alternate; }.aero-meadow > span:first-of-type { left:22%; }.aero-meadow > span:last-of-type { right:19%; width:19px; animation-delay:-1.5s; } @keyframes flower-bob { to { transform:translateY(-8px) rotate(16deg); } }
.aero-inhabitants { position:fixed; z-index:7; inset:0; pointer-events:none; }.aero-pal { position:absolute; display:grid; justify-items:center; gap:6px; padding:0; color:#125b72; background:transparent; border:0; cursor:none; pointer-events:auto; }.aero-pal small { padding:5px 7px; color:#15596e; border:1px solid rgba(255,255,255,.75); border-radius:999px; background:rgba(242,255,255,.6); box-shadow:0 5px 13px rgba(20,108,137,.1); font:7px 'DM Mono',monospace; letter-spacing:.08em; opacity:0; transform:translateY(-4px) scale(.88); transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1); }.aero-pal:hover small,.aero-pal:focus-visible small,.aero-pal.is-awake small { opacity:1; transform:translateY(0) scale(1); }.profile-pal { left:4.8vw; bottom:12vh; }.robot-pal { right:4.2vw; bottom:10vh; }.profile-face { position:relative; display:block; width:48px; aspect-ratio:1; overflow:hidden; border:1px solid rgba(255,255,255,.84); border-radius:50%; background:radial-gradient(circle at 32% 24%,#fff 0 6%,#d5ffff 15%,#75cfe6 46%,#277db6 83%); box-shadow:inset 5px 5px 8px rgba(255,255,255,.75),inset -7px -8px 11px rgba(17,101,157,.27),0 9px 18px rgba(24,114,148,.18); animation:pal-float 4.5s ease-in-out infinite alternate; }.profile-face:before { content:''; position:absolute; width:25px; height:22px; left:12px; bottom:-6px; border-radius:50% 50% 35% 35%; background:linear-gradient(150deg,#d8ff97,#55bd8a); }.profile-face b { position:absolute; width:17px; height:17px; left:15px; top:13px; border-radius:48% 48% 45% 45%; background:#ffe2c1; box-shadow:inset 2px 2px 2px rgba(255,255,255,.6); }.profile-face b:before,.profile-face b:after { content:''; position:absolute; top:7px; width:3px; height:3px; border-radius:50%; background:#276170; }.profile-face b:before { left:3px; }.profile-face b:after { right:3px; }.profile-face i { position:absolute; z-index:1; width:15px; height:9px; top:8px; border-radius:100% 100% 30% 30%; background:#275e77; }.profile-face i:first-child { left:12px; transform:rotate(-12deg); }.profile-face i:nth-child(2) { right:11px; transform:rotate(12deg); }
.robot-face { position:relative; display:grid; width:53px; height:43px; place-content:center; border:1px solid rgba(255,255,255,.9); border-radius:15px 19px 17px 18px; background:linear-gradient(145deg,#f4ffff,#96e8eb 43%,#318bb5); box-shadow:inset 4px 4px 8px #fff,inset -7px -7px 10px rgba(13,103,151,.25),0 9px 18px rgba(21,108,149,.18); animation:robot-bob 3.6s ease-in-out infinite alternate; }.robot-face:before { content:''; position:absolute; left:23px; top:-11px; width:6px; height:12px; border-radius:5px; background:#3b849d; }.robot-face:after { content:''; position:absolute; left:20px; top:-15px; width:12px; height:12px; border:2px solid #dfff78; border-radius:50%; background:#f9ffff; box-shadow:0 0 11px #dfff78; }.robot-face i { display:block; width:9px; height:9px; margin:0 3px; border-radius:50%; background:#e7ff88; box-shadow:0 0 9px rgba(224,255,111,.86); }.robot-face i:first-child { transform:translateX(-8px); }.robot-face i:nth-child(2) { transform:translateX(8px) translateY(-9px); }.robot-face b { position:absolute; left:18px; bottom:8px; width:17px; height:3px; border-radius:99px; background:#17617c; }.aero-pal:hover .profile-face,.aero-pal.is-awake .profile-face { animation-duration:1.2s; }.aero-pal:hover .robot-face,.aero-pal.is-awake .robot-face { animation-duration:.6s; }.robot-pal.is-awake .robot-face:after { background:#efffa6; box-shadow:0 0 21px #dfff78; } @keyframes pal-float { to { transform:translate3d(5px,-9px,0) rotate(7deg); } } @keyframes robot-bob { to { transform:translate3d(-4px,-10px,0) rotate(-4deg); } }

/* One-shot point-and-click reactions: play, settle, then replay on demand. */
.sky-secret.is-playing i { animation:secret-pop .9s cubic-bezier(.34,1.56,.64,1) both; }.secret-spark.is-playing i { animation:secret-star .9s cubic-bezier(.34,1.56,.64,1) both; }.secret-orbit.is-playing i { animation:secret-grass .9s cubic-bezier(.34,1.56,.64,1) both; } @keyframes secret-pop { 48% { transform:scale(2.1); filter:brightness(1.35) saturate(1.6); } 100% { transform:scale(1); } } @keyframes secret-star { 50% { transform:scale(2.3) rotate(145deg); filter:brightness(1.4); } 100% { transform:scale(1) rotate(360deg); } } @keyframes secret-grass { 50% { transform:translateY(-9px) rotate(44deg) scale(1.7); } 100% { transform:rotate(0) scale(1); } }
.burst-spark { position:fixed; z-index:68; width:13px; height:13px; pointer-events:none; color:#d8ff73; animation:spark-burst 1.15s cubic-bezier(.16,1,.3,1) both; }.burst-spark:before,.burst-spark:after { content:''; position:absolute; left:6px; top:0; width:2px; height:13px; border-radius:99px; background:linear-gradient(0deg,transparent,#fff8b4 35%,#d9ff70); box-shadow:0 0 8px rgba(223,255,105,.9); }.burst-spark:after { transform:rotate(90deg); } @keyframes spark-burst { to { transform:translate3d(var(--spark-x),var(--spark-y),0) rotate(180deg) scale(.1); opacity:0; } }
.aero-meadow.is-playing > b { animation:meadow-ripple 1.1s cubic-bezier(.16,1,.3,1) both; }.aero-meadow.is-playing .grass-sprigs { animation:meadow-shake .85s ease-in-out both; }.aero-meadow.is-playing > span { animation:flower-pop .9s cubic-bezier(.34,1.56,.64,1) both; } @keyframes meadow-ripple { 50% { transform:scaleX(1.08) translateY(-10px); filter:saturate(1.7) brightness(1.1); } } @keyframes meadow-shake { 20%,60% { transform:translateX(-12px) skewX(-4deg); } 40%,80% { transform:translateX(12px) skewX(4deg); } } @keyframes flower-pop { 48% { transform:translateY(-25px) scale(2.5) rotate(45deg); filter:brightness(1.35); } }
.profile-pal.is-awake .profile-face { animation:profile-wave 1s cubic-bezier(.34,1.56,.64,1) both; }.robot-pal.is-awake .robot-face { animation:robot-hello 1.2s cubic-bezier(.34,1.56,.64,1) both; } @keyframes profile-wave { 30% { transform:translateY(-17px) rotate(-22deg) scale(1.15); } 60% { transform:translateY(-7px) rotate(19deg) scale(1.1); } } @keyframes robot-hello { 20%,55%,80% { transform:translateY(-19px) rotate(-10deg) scale(1.08); } 38%,68% { transform:translateY(-4px) rotate(10deg); } }

/* The interactive pieces are part of one landscape, not floating controls. */
.aero-scene { position:fixed; z-index:6; inset:0; pointer-events:none; }.scene-item { position:absolute; padding:0; border:0; background:transparent; cursor:none; pointer-events:auto; filter:drop-shadow(0 7px 9px rgba(15,104,133,.18)); transition:filter .3s ease; }.scene-item:hover,.scene-item:focus-visible { filter:drop-shadow(0 9px 13px rgba(12,129,159,.38)) brightness(1.08); }.scene-bubble { left:5.3vw; bottom:17vh; width:55px; aspect-ratio:1; }.scene-bubble i { display:block; width:100%; height:100%; border:1px solid rgba(255,255,255,.85); border-radius:50%; background:radial-gradient(circle at 31% 23%,#fff 0 5%,rgba(222,255,255,.72) 14%,rgba(86,203,230,.3) 48%,rgba(37,143,189,.08) 67%,transparent 70%); box-shadow:inset 7px 7px 11px rgba(255,255,255,.76),inset -9px -11px 15px rgba(16,126,181,.16); animation:landscape-bob 4.6s ease-in-out infinite alternate; }.scene-bubble:after { content:''; position:absolute; width:12px; aspect-ratio:1; right:-14px; top:10px; border:1px solid rgba(255,255,255,.8); border-radius:50%; background:rgba(191,252,255,.25); }.scene-robot { right:8vw; bottom:15.5vh; width:52px; height:58px; }.scene-robot span { position:absolute; left:0; bottom:0; display:grid; width:52px; height:43px; place-content:center; border:1px solid rgba(255,255,255,.9); border-radius:15px 19px 17px 18px; background:linear-gradient(145deg,#f4ffff,#96e8eb 43%,#318bb5); box-shadow:inset 4px 4px 8px #fff,inset -7px -7px 10px rgba(13,103,151,.25); animation:robot-bob 3.6s ease-in-out infinite alternate; }.scene-robot span:before { content:''; position:absolute; left:23px; top:-11px; width:6px; height:12px; border-radius:5px; background:#3b849d; }.scene-robot span:after { content:''; position:absolute; left:20px; top:-15px; width:12px; height:12px; border:2px solid #dfff78; border-radius:50%; background:#f9ffff; box-shadow:0 0 11px #dfff78; }.scene-robot i { display:block; width:9px; height:9px; margin:0 3px; border-radius:50%; background:#e7ff88; box-shadow:0 0 9px rgba(224,255,111,.86); }.scene-robot i:first-child { transform:translateX(-8px); }.scene-robot i:nth-child(2) { transform:translateX(8px) translateY(-9px); }.scene-robot b { position:absolute; left:18px; bottom:8px; width:17px; height:3px; border-radius:99px; background:#17617c; }.scene-plane { left:13vw; top:18vh; width:48px; height:24px; transform:rotate(-10deg); }.scene-plane i { position:absolute; left:11px; top:6px; display:block; width:29px; height:10px; border-radius:100% 10% 10% 100%; background:linear-gradient(90deg,#efffff,#82d9e7 55%,#3092c4); box-shadow:inset 2px 2px 3px #fff; }.scene-plane i:before { content:''; position:absolute; right:6px; top:-11px; width:5px; height:28px; border-radius:99px 99px 4px 4px; background:#caff84; transform:rotate(29deg); }.scene-plane i:after { content:''; position:absolute; left:-6px; top:4px; width:10px; height:3px; border-radius:99px; background:#f5ffff; }.scene-plane b { position:absolute; left:-26px; top:12px; width:33px; height:2px; border-radius:99px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.85)); box-shadow:0 0 7px rgba(255,255,255,.82); }.scene-avatar { right:28vw; bottom:13vh; width:34px; height:47px; }.scene-avatar span { position:absolute; left:4px; bottom:0; display:block; width:27px; height:38px; border-radius:15px 15px 8px 8px; background:linear-gradient(145deg,#ddffad,#58b77e); box-shadow:inset 3px 3px 5px rgba(255,255,255,.72); animation:avatar-bob 4s ease-in-out infinite alternate; }.scene-avatar span:before { content:''; position:absolute; left:5px; top:-13px; width:17px; height:17px; border-radius:50%; background:#ffe2c1; box-shadow:inset 2px 2px 2px rgba(255,255,255,.7); }.scene-avatar i { position:absolute; z-index:1; width:15px; height:8px; left:6px; top:-12px; border-radius:100% 100% 30% 30%; background:#28627b; }.scene-avatar b { position:absolute; left:1px; top:7px; width:7px; height:18px; border-radius:99px; background:#69ba82; transform:rotate(35deg); transform-origin:bottom; }.scene-bubble.is-playing i { animation:scene-bubble-pop .9s cubic-bezier(.16,1,.3,1) both; }.scene-robot.is-playing span { animation:scene-robot-wake 1s cubic-bezier(.34,1.56,.64,1) both; }.scene-plane.is-playing { animation:scene-plane-flight 1.25s cubic-bezier(.16,1,.3,1) both; }.scene-avatar.is-playing span { animation:scene-avatar-wave 1s cubic-bezier(.34,1.56,.64,1) both; } @keyframes landscape-bob { to { transform:translate3d(6px,-12px,0) scale(1.06); } } @keyframes avatar-bob { to { transform:translateY(-7px) rotate(4deg); } } @keyframes scene-bubble-pop { 60% { transform:scale(1.75); opacity:.18; } 100% { transform:scale(.2); opacity:0; } } @keyframes scene-robot-wake { 22%,62% { transform:translateY(-18px) rotate(-10deg) scale(1.13); } 43%,82% { transform:translateY(-4px) rotate(10deg); } } @keyframes scene-plane-flight { 52% { transform:translate3d(64vw,-20vh,0) rotate(-12deg) scale(1.16); opacity:1; } 100% { transform:translate3d(0,0,0) rotate(-10deg); } } @keyframes scene-avatar-wave { 35%,68% { transform:translateY(-10px) rotate(-13deg) scale(1.12); } 50%,82% { transform:translateY(-4px) rotate(10deg); } }
@media (max-width:760px) { .scene-plane,.scene-avatar { display:none; }.scene-bubble { left:3vw; bottom:18vh; transform:scale(.75); }.scene-robot { right:3vw; bottom:16vh; transform:scale(.76); } }
@media (max-width:760px) { .sky-secrets { display:none; } body[data-page="games"] .hero,body[data-page="music"] .hero { padding:24px 22px 48px; } body[data-page="games"] .hero-title,body[data-page="music"] .hero-title { font-size:clamp(4rem,18vw,6.7rem); } .game-scenery:before { width:115vw; right:-39vw; bottom:-10vw; }.game-scenery:after { width:104px; right:9vw; top:22vh; }.music-scenery:before { width:112vw; right:-44vw; bottom:-5vw; }.music-scenery i:nth-child(1) { right:14vw; top:23vh; }.dashboard-cta { width:100%; min-width:0; } }

@media (max-width:760px) { .aero-dashboard { padding:20px 15px 65px; }.dashboard-heading span { display:none; }.dashboard-grid { grid-template-columns:1fr; }.dashboard-core { min-height:190px; }.dashboard-portal { min-height:260px; }.channel-gateway { grid-template-columns:1fr; min-height:0; padding:42px 25px 70px; gap:22px; }.gateway-ripple { width:118px; }.channel-gateway > p { max-width:300px; }.channel-gateway:before { inset:4% -20% 5% 2%; }.wordmark-copy { display:none; }.wordmark { width:44px; }.cursor-cross { display:none; } }

/* Messenger-inspired presence buddies: glossy, faceless, connected silhouettes. */
.scene-buddies { right:8vw; bottom:15vh; width:65px; height:66px; }.scene-buddies span { position:absolute; bottom:0; display:block; width:32px; height:37px; border-radius:45% 45% 18% 18%; box-shadow:inset 4px 4px 7px rgba(255,255,255,.72),inset -6px -7px 9px rgba(0,66,120,.18),0 7px 11px rgba(20,106,133,.17); }.scene-buddies span:before { content:''; position:absolute; width:29px; height:29px; left:2px; top:-22px; border-radius:50%; box-shadow:inset 4px 4px 7px rgba(255,255,255,.78),inset -5px -7px 8px rgba(0,76,126,.17); }.buddy-green { z-index:1; left:2px; transform:scale(.78) translateY(-2px); background:linear-gradient(145deg,#e7ffb7,#8ce454 51%,#44a45c); }.buddy-green:before { background:linear-gradient(145deg,#f0ffcb,#94e962 54%,#47a85c); }.buddy-blue { z-index:2; right:1px; background:linear-gradient(145deg,#e1fbff,#75cce9 49%,#267cb9); }.buddy-blue:before { background:linear-gradient(145deg,#efffff,#84d7eb 52%,#2c82ba); }.scene-buddies i { position:absolute; z-index:3; left:12px; top:13px; width:50px; height:28px; border-top:4px solid #f3df54; border-radius:50%; transform:rotate(-25deg); filter:drop-shadow(0 1px 1px rgba(255,255,255,.7)); }.scene-buddies i:after { content:''; position:absolute; width:5px; height:5px; right:1px; top:-4px; border-radius:50%; background:#fff9a6; box-shadow:0 0 7px #fff28b; }.scene-buddies.is-playing .buddy-blue { animation:buddy-nudge-blue .9s cubic-bezier(.34,1.56,.64,1) both; }.scene-buddies.is-playing .buddy-green { animation:buddy-nudge-green .9s cubic-bezier(.34,1.56,.64,1) both; }.scene-buddies.is-playing i { animation:buddy-ribbon .9s ease both; } @keyframes buddy-nudge-blue { 35% { transform:translateX(-12px) translateY(-10px) scale(1.16); } 65% { transform:translateX(5px) translateY(-4px) scale(1.08); } } @keyframes buddy-nudge-green { 35% { transform:scale(.78) translateX(12px) translateY(-12px); } 65% { transform:scale(.78) translateX(-4px) translateY(-4px); } } @keyframes buddy-ribbon { 50% { transform:rotate(-25deg) scale(1.4); filter:drop-shadow(0 0 8px #fff17d); } }
@media (max-width:760px) { .scene-buddies { right:3vw; bottom:16vh; transform:scale(.76); } }

/* The generated landscape is the environment itself. It is deliberately not a fixed UI layer. */
body[data-page="log"] .hero { background-image:linear-gradient(90deg,rgba(231,250,255,.42) 0%,rgba(232,251,255,.13) 52%,rgba(205,246,241,.08) 100%),url('/assets/aero-landscape-v1.png'); background-position:center; background-size:cover; background-repeat:no-repeat; } body[data-page="games"] .hero { background-image:linear-gradient(90deg,rgba(219,255,244,.52) 0%,rgba(170,239,204,.26) 50%,rgba(155,218,240,.12) 100%),url('/assets/aero-landscape-v1.png'); background-position:center; background-size:cover; background-repeat:no-repeat; } body[data-page="music"] .hero { background-image:linear-gradient(90deg,rgba(224,248,255,.52) 0%,rgba(164,215,249,.24) 50%,rgba(157,235,229,.11) 100%),url('/assets/aero-landscape-v1.png'); background-position:center; background-size:cover; background-repeat:no-repeat; }
.aero-meadow { display:none; }.aero-scene { position:absolute; z-index:6; top:0; left:0; width:100%; height:100svh; pointer-events:none; }.scene-item { bottom:auto !important; padding:0; background:transparent; filter:none; transform:none; pointer-events:auto; }.scene-item:hover,.scene-item:focus-visible { filter:none; }.scene-item > i,.scene-item > span,.scene-item > b,.scene-item:after { opacity:0; animation:none !important; }.scene-bubble { left:85vw; top:17vh; width:10vw; min-width:70px; aspect-ratio:1; }.scene-buddies { right:4vw; top:61vh; width:8vw; min-width:55px; height:10vh; }.scene-plane { left:68vw; top:8vh; width:10vw; height:9vh; transform:none; }.scene-avatar,.scene-robot { display:none; }.scene-bubble.is-playing:before { content:''; position:absolute; inset:0; border:2px solid rgba(255,255,255,.95); border-radius:50%; box-shadow:0 0 24px rgba(191,255,255,.95); animation:environment-pop .85s cubic-bezier(.16,1,.3,1) both; }.scene-buddies.is-playing:before { content:''; position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(circle,rgba(239,255,131,.68),rgba(107,228,234,.25) 33%,transparent 68%); animation:environment-bloom 1.1s ease both; }.scene-plane.is-playing:after { content:''; position:absolute; width:20vw; height:2px; left:-17vw; top:44%; border-radius:99px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); box-shadow:0 0 12px rgba(255,255,255,.9); animation:environment-flight 1.15s cubic-bezier(.16,1,.3,1) both; } @keyframes environment-pop { to { transform:scale(1.75); opacity:0; } } @keyframes environment-bloom { 50% { transform:scale(1.35); filter:brightness(1.3); } to { transform:scale(.92); opacity:0; } } @keyframes environment-flight { from { transform:translateX(-6vw) scaleX(.2); opacity:0; } 45% { opacity:1; } to { transform:translateX(18vw) scaleX(1.2); opacity:0; } }
@media (max-width:760px) { .aero-scene { height:86svh; }.scene-bubble { left:81vw; top:14vh; min-width:48px; }.scene-buddies { right:3vw; top:58vh; min-width:42px; }.scene-plane { left:62vw; top:9vh; } }

/* Three routes, three different optimistic worlds. The hit areas are invisible:
   the discovered objects are painted into the actual landscape instead. */
body[data-page="games"] .hero { background-image:linear-gradient(90deg,rgba(222,255,244,.48) 0%,rgba(206,255,237,.16) 52%,rgba(169,233,237,.04) 100%),url('/assets/aero-game-garden-v1.png'); }
body[data-page="music"] .hero { background-image:linear-gradient(90deg,rgba(220,249,255,.47) 0%,rgba(197,239,252,.16) 52%,rgba(145,223,230,.04) 100%),url('/assets/aero-music-lagoon-v1.png'); }
body[data-page="log"] .aero-scene { height:56svh; }
.scene-games,.scene-music { display:none; }
body[data-page="games"] .scene-dashboard,body[data-page="games"] .scene-music,body[data-page="music"] .scene-dashboard,body[data-page="music"] .scene-games { display:none; }
body[data-page="games"] .scene-games,body[data-page="music"] .scene-music { display:block; }

/* Native file inputs need a semantic label and an explicit click target. */
.upload-zone { cursor:pointer; user-select:none; }
.upload-zone:focus-within { border-color:#0b9cc5; box-shadow:0 0 0 3px rgba(92,211,228,.2); }
.upload-zone input { z-index:1; }
.upload-zone strong,.upload-zone span,.upload-zone .upload-art { pointer-events:none; }

/* Dashboard: city meadow, drifting bubble, messenger buddies, tiny plane. */
body[data-page="log"] .scene-bubble { left:85vw; top:17vh; width:10vw; min-width:70px; height:10vw; min-height:70px; }
body[data-page="log"] .scene-buddies { right:4vw; top:68vh; width:9vw; min-width:60px; height:13vh; }
body[data-page="log"] .scene-plane { left:67vw; top:7vh; width:12vw; height:11vh; }

/* Games: an eco-tech garden with a controller, save crystal, and drone. */
body[data-page="games"] .scene-controller { left:78vw; top:66vh; width:21vw; height:24vh; }
body[data-page="games"] .scene-save-cube { left:75vw; top:49vh; width:10vw; height:14vh; }
body[data-page="games"] .scene-drone { left:81vw; top:6vh; width:16vw; height:15vh; }

/* Music: a clear-water lagoon with a speaker, disc, and sound bird. */
body[data-page="music"] .scene-speaker { left:76vw; top:71vh; width:22vw; height:25vh; }
body[data-page="music"] .scene-disc { left:58vw; top:68vh; width:19vw; height:17vh; }
body[data-page="music"] .scene-bird { left:66vw; top:4vh; width:16vw; height:14vh; }

.scene-item:focus-visible { outline:2px solid rgba(255,255,255,.95); outline-offset:4px; border-radius:50%; }
.scene-plane.is-playing:after { opacity:1; animation:environment-flight 1.15s cubic-bezier(.16,1,.3,1) both !important; }
.scene-controller.is-playing:before,.scene-save-cube.is-playing:before,.scene-speaker.is-playing:before,.scene-disc.is-playing:before,.scene-drone.is-playing:before,.scene-bird.is-playing:before { content:''; position:absolute; pointer-events:none; }
.scene-controller.is-playing:before { inset:16% 12%; border:2px solid rgba(220,255,127,.9); border-radius:44%; box-shadow:0 0 16px rgba(215,255,112,.85),inset 0 0 18px rgba(223,255,130,.46); animation:scene-controller-pulse .95s cubic-bezier(.16,1,.3,1) both; }
.scene-save-cube.is-playing:before { inset:18%; border:2px solid rgba(224,255,154,.94); background:radial-gradient(circle,rgba(245,255,195,.76),rgba(108,241,196,.18) 54%,transparent 70%); transform:rotate(45deg); box-shadow:0 0 25px rgba(197,255,109,.85); animation:scene-crystal-flash .9s cubic-bezier(.16,1,.3,1) both; }
.scene-drone.is-playing:before,.scene-bird.is-playing:before { width:25vw; height:2px; top:50%; right:-18vw; border-radius:99px; background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(202,255,156,.72),transparent); box-shadow:0 0 11px rgba(255,255,255,.9); animation:scene-sky-streak 1.15s cubic-bezier(.16,1,.3,1) both; }
.scene-speaker.is-playing:before { inset:15%; border:2px solid rgba(255,255,255,.9); border-radius:50%; box-shadow:0 0 0 0 rgba(125,245,237,.62); animation:scene-sound-rings 1.1s cubic-bezier(.16,1,.3,1) both; }
.scene-disc.is-playing:before { inset:15%; border:2px solid rgba(255,255,255,.94); border-radius:50%; background:conic-gradient(from 0deg,transparent,rgba(170,245,255,.7),transparent,rgba(237,255,177,.7),transparent); animation:scene-disc-spin .95s cubic-bezier(.16,1,.3,1) both; }
@keyframes scene-controller-pulse { 45% { transform:scale(1.38) rotate(-8deg); opacity:1; } to { transform:scale(.9); opacity:0; } }
@keyframes scene-crystal-flash { 48% { transform:rotate(145deg) scale(1.52); opacity:1; } to { transform:rotate(245deg) scale(.2); opacity:0; } }
@keyframes scene-sky-streak { from { transform:translateX(-12vw) scaleX(.15); opacity:0; } 42% { opacity:1; } to { transform:translateX(16vw) scaleX(1.1); opacity:0; } }
@keyframes scene-sound-rings { 35% { box-shadow:0 0 0 8px rgba(125,245,237,.52),0 0 0 24px rgba(125,245,237,.28),0 0 0 42px rgba(125,245,237,.08); } to { transform:scale(1.7); opacity:0; } }
@keyframes scene-disc-spin { 48% { transform:rotate(310deg) scale(1.32); opacity:1; } to { transform:rotate(660deg) scale(.5); opacity:0; } }

@media (max-width:760px) {
  body[data-page="log"] .hero,body[data-page="games"] .hero,body[data-page="music"] .hero { background-position:right center; }
  body[data-page="log"] .aero-scene { height:56svh; }
  body[data-page="log"] .scene-bubble { left:80vw; top:15vh; width:15vw; min-width:48px; height:15vw; min-height:48px; }
  body[data-page="log"] .scene-buddies { right:2vw; top:68vh; min-width:48px; }
  body[data-page="log"] .scene-plane { display:block; left:31vw; top:7vh; width:24vw; }
  body[data-page="games"] .scene-controller { left:35vw; top:68vh; width:54vw; height:22vh; }
  body[data-page="games"] .scene-save-cube,body[data-page="music"] .scene-disc { display:none; }
  body[data-page="games"] .scene-drone { left:50vw; top:7vh; width:38vw; height:15vh; }
  body[data-page="music"] .scene-speaker { left:48vw; top:72vh; width:48vw; height:23vh; }
  body[data-page="music"] .scene-bird { left:47vw; top:4vh; width:37vw; height:14vh; }
}

/* Dashboard arrival: the landscape owns the entire first screen, with two
   dimensional destinations sitting inside it instead of underneath it. */
.hero-destinations { display:none; }
body[data-page="log"] .hero { min-height:100svh; height:100svh; padding:calc(var(--nav-h) + 6vh) clamp(22px,9vw,150px) 7vh; background-position:center; }
body[data-page="log"] .aero-scene { height:100svh; }
body[data-page="log"] .hero-copy { max-width:910px; margin:auto 0; }
body[data-page="log"] .hero-title { max-width:900px; }
body[data-page="log"] .hero-destinations { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(235px,330px)); gap:clamp(13px,1.6vw,22px); width:min(100%,682px); margin-top:clamp(24px,3vw,43px); }
body[data-page="log"] .dashboard-cta { position:relative; display:grid; grid-template-columns:auto 1fr 38%; align-items:stretch; min-width:0; min-height:158px; padding:15px 14px 14px; overflow:hidden; border:1px solid rgba(255,255,255,.91); border-radius:25px; box-shadow:inset 0 1px 1px rgba(255,255,255,.98),inset 0 -16px 22px rgba(15,106,134,.06),0 18px 32px rgba(9,84,119,.2); isolation:isolate; transform:translateY(18px) scale(.96); opacity:0; animation:dashboard-door-arrive .8s 1.22s cubic-bezier(.16,1,.3,1) forwards; transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease,filter .5s ease; }
body[data-page="log"] .dashboard-cta:nth-child(2) { animation-delay:1.34s; }
body[data-page="log"] .dashboard-cta:before { width:175px; height:175px; right:-48px; top:-87px; border:1px solid rgba(255,255,255,.48); background:radial-gradient(circle at 37% 29%,rgba(255,255,255,.94),rgba(255,255,255,.21) 29%,transparent 66%); box-shadow:none; }
body[data-page="log"] .dashboard-cta:after { content:''; position:absolute; z-index:-1; width:180%; height:42%; left:-34%; bottom:-22%; border:1px solid rgba(255,255,255,.48); border-radius:50%; transform:rotate(-11deg); transition:transform .8s cubic-bezier(.16,1,.3,1); }
body[data-page="log"] .cta-games { color:#105d69; background:linear-gradient(126deg,rgba(250,255,252,.91),rgba(178,245,213,.72) 62%,rgba(80,203,181,.55)); }
body[data-page="log"] .cta-music { color:#155880; background:linear-gradient(126deg,rgba(250,255,255,.91),rgba(182,225,253,.74) 62%,rgba(96,174,231,.55)); }
body[data-page="log"] .cta-number { align-self:start; width:36px; padding-top:2px; color:rgba(11,83,105,.68); font:500 8px/1.25 'DM Mono',monospace; letter-spacing:.06em; writing-mode:vertical-rl; transform:rotate(180deg); }
body[data-page="log"] .cta-copy { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; padding-top:1px; }
body[data-page="log"] .cta-copy small { color:rgba(18,105,120,.72); font:500 8px 'DM Mono',monospace; letter-spacing:.12em; }
body[data-page="log"] .cta-copy b { margin:9px 0 auto; color:inherit; font:700 clamp(1.55rem,2.1vw,2.25rem)/.78 'Space Grotesk',sans-serif; letter-spacing:-.09em; }
body[data-page="log"] .cta-copy em { display:flex; align-items:center; gap:7px; margin-top:13px; color:rgba(10,80,101,.8); font:600 8px 'DM Mono',monospace; font-style:normal; letter-spacing:.09em; white-space:nowrap; }
body[data-page="log"] .cta-copy em i { display:grid; width:17px; height:17px; place-items:center; color:#155c75; border:1px solid rgba(255,255,255,.75); border-radius:50%; background:rgba(243,255,255,.64); box-shadow:inset 0 1px rgba(255,255,255,.94); font-size:11px; font-style:normal; transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .35s ease; }
body[data-page="log"] .cta-art { position:absolute; z-index:1; right:2px; bottom:1px; width:43%; aspect-ratio:1; border-radius:49% 51% 42% 58%; border:1px solid rgba(255,255,255,.62); box-shadow:inset 10px 10px 17px rgba(255,255,255,.6),inset -12px -13px 21px rgba(0,92,128,.2),0 12px 19px rgba(10,105,133,.12); transform:rotate(-11deg); transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease; }
body[data-page="log"] .cta-game-art { background:radial-gradient(circle at 32% 24%,#fff 0 4%,#edffbd 10%,#81dec1 37%,#168f9f 72%); }
body[data-page="log"] .cta-music-art { background:radial-gradient(circle at 32% 24%,#fff 0 4%,#d9f8ff 12%,#7cc5ec 38%,#277bbd 74%); }
body[data-page="log"] .cta-art:before { content:''; position:absolute; inset:16%; border:1px solid rgba(255,255,255,.75); border-radius:50%; box-shadow:0 0 0 9px rgba(255,255,255,.12),0 0 0 20px rgba(255,255,255,.08); }
body[data-page="log"] .cta-art i { position:absolute; display:block; border-radius:50%; background:#f5ffb1; box-shadow:0 0 11px rgba(227,255,111,.92); }
body[data-page="log"] .cta-art i:nth-child(1) { width:15%; aspect-ratio:1; left:21%; top:24%; }
body[data-page="log"] .cta-art i:nth-child(2) { width:9%; aspect-ratio:1; right:23%; top:33%; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.95); }
body[data-page="log"] .cta-art i:nth-child(3) { width:27%; height:4px; left:18%; bottom:20%; border-radius:99px; background:rgba(255,255,255,.8); box-shadow:none; transform:rotate(-28deg); }
body[data-page="log"] .dashboard-cta:hover { z-index:4; transform:translateY(-10px) scale(1.035); box-shadow:inset 0 1px 1px #fff,0 29px 46px rgba(5,87,119,.29); filter:saturate(1.15) brightness(1.035); }
body[data-page="log"] .dashboard-cta:hover:after { transform:rotate(-4deg) translateY(-14px) scaleX(1.08); }
body[data-page="log"] .dashboard-cta:hover .cta-art { transform:rotate(17deg) translate(-6px,-9px) scale(1.13); filter:brightness(1.11) saturate(1.2); }
body[data-page="log"] .dashboard-cta:hover .cta-copy em i { transform:rotate(45deg) scale(1.14); background:#edff8d; }
@keyframes dashboard-door-arrive { to { transform:translateY(0) scale(1); opacity:1; } }

@media (max-width:760px) {
  body[data-page="log"] .hero { min-height:100svh; height:100svh; padding:calc(var(--nav-h) + 7vh) 21px 5vh; background-position:right center; }
  body[data-page="log"] .aero-scene { height:100svh; }
  body[data-page="log"] .hero-copy { width:100%; margin:auto 0; }
  body[data-page="log"] .hero-title { font-size:clamp(3.25rem,14.4vw,5.2rem); }
  body[data-page="log"] .hero-destinations { grid-template-columns:1fr; gap:10px; width:min(100%,400px); margin-top:24px; }
  body[data-page="log"] .dashboard-cta { min-height:113px; grid-template-columns:31px 1fr 31%; padding:12px 12px 11px; border-radius:21px; }
  body[data-page="log"] .cta-copy b { margin:5px 0 auto; font-size:1.72rem; }
  body[data-page="log"] .cta-copy em { margin-top:7px; font-size:7px; }
  body[data-page="log"] .cta-art { width:34%; right:5%; bottom:-5%; }
}

/* Persistent, deliberately tiny route navigation. The mark replaces a HOME/
   DASHBOARD button while the two real worlds stay one tap away. */
.site-header,body[data-page="log"] .site-header { justify-content:center; }
.site-header .wordmark { position:absolute; left:clamp(18px,4vw,68px); display:flex; width:42px; }
.site-header .wordmark-copy { display:none; }
.site-header .motion-toggle,body[data-page="log"] .motion-toggle { position:absolute; right:clamp(18px,4vw,68px); width:auto; }
body[data-page="games"] .site-header,body[data-page="music"] .site-header { display:flex !important; }
.filter-nav .nav-slider { width:calc(33.333% - 3px); }
.channel-back { display:none !important; }

/* Quieter dashboard doors: one name, one softened world-form, one action. */
body[data-page="log"] .dashboard-cta { grid-template-columns:1fr 39%; min-height:142px; padding:17px 17px 15px; border-radius:23px; }
body[data-page="log"] .dashboard-cta:before { content:none; }
body[data-page="log"] .dashboard-cta:after { width:145%; height:34%; left:-17%; bottom:-14%; border-color:rgba(255,255,255,.42); }
body[data-page="log"] .cta-number { display:none; }
body[data-page="log"] .cta-copy { padding:0; }
body[data-page="log"] .cta-copy b { margin:0 auto 0 0; font-size:clamp(1.65rem,2.15vw,2.25rem); }
body[data-page="log"] .cta-copy em { margin-top:11px; color:rgba(10,80,101,.68); letter-spacing:.13em; }
body[data-page="log"] .cta-art { right:7%; bottom:12%; width:34%; border-radius:58% 42% 57% 43%; opacity:.92; box-shadow:inset 8px 8px 17px rgba(255,255,255,.65),inset -10px -10px 18px rgba(0,92,128,.18),0 9px 17px rgba(10,105,133,.1); }
body[data-page="log"] .cta-art:before { inset:24%; border-width:1px; box-shadow:0 0 0 7px rgba(255,255,255,.1); }
body[data-page="log"] .cta-art i { display:none; }
body[data-page="log"] .dashboard-cta:hover { transform:translateY(-7px) scale(1.02); }
body[data-page="log"] .dashboard-cta:hover .cta-art { transform:rotate(7deg) translate(-3px,-5px) scale(1.07); }

@media (max-width:760px) {
  .site-header .wordmark { left:15px; width:38px; }
  .site-header .aero-logo { width:34px; height:34px; border-radius:11px 16px 13px 17px; }
  .site-header .motion-toggle,body[data-page="log"] .motion-toggle { right:15px; }
  .filter-nav .filter { min-width:0; padding:8px 12px; }
  body[data-page="log"] .dashboard-cta { grid-template-columns:1fr 30%; min-height:105px; padding:13px 15px 12px; }
  body[data-page="log"] .cta-copy b { font-size:1.68rem; }
  body[data-page="log"] .cta-art { width:29%; right:8%; bottom:12%; }
}

/* Evan's landing cards: quieter glass shortcuts with icons pulled from their
   actual worlds—the game-garden controller and the music-lagoon speaker. */
body[data-page="log"] .hero-title { max-width:980px; font-size:clamp(3.8rem,6.7vw,7.6rem); line-height:.79; }
body[data-page="log"] .hero-destinations { grid-template-columns:repeat(2,minmax(245px,310px)); gap:14px; margin-top:clamp(20px,2.4vw,32px); }
body[data-page="log"] .dashboard-cta { display:grid; grid-template-columns:78px minmax(0,1fr) auto; align-items:center; min-height:116px; padding:14px 16px 14px 13px; border-radius:20px; color:#15596e; background:linear-gradient(118deg,rgba(252,255,255,.88),rgba(216,250,250,.68)); box-shadow:inset 0 1px rgba(255,255,255,.97),0 15px 27px rgba(7,83,112,.16); }
body[data-page="log"] .cta-music { color:#225b86; background:linear-gradient(118deg,rgba(252,255,255,.88),rgba(211,239,255,.7)); }
body[data-page="log"] .dashboard-cta:after { content:none; }
body[data-page="log"] .cta-icon { position:relative; display:block; width:63px; height:63px; filter:drop-shadow(0 7px 9px rgba(8,105,137,.14)); transition:transform .55s cubic-bezier(.16,1,.3,1),filter .45s ease; }
body[data-page="log"] .cta-label { position:relative; z-index:1; display:flex; flex-direction:column; gap:6px; min-width:0; color:inherit; }
body[data-page="log"] .cta-label b { color:inherit; font:700 clamp(1.45rem,1.9vw,1.9rem)/.92 'Space Grotesk',sans-serif; letter-spacing:-.075em; }
body[data-page="log"] .cta-label small { color:rgba(18,88,108,.7); font:500 9px 'DM Mono',monospace; letter-spacing:.045em; white-space:nowrap; }
body[data-page="log"] .cta-music .cta-label small { color:rgba(32,84,138,.68); }
body[data-page="log"] .cta-arrow { display:grid; width:27px; height:27px; margin-left:8px; place-items:center; color:inherit; border:1px solid rgba(255,255,255,.78); border-radius:50%; background:rgba(255,255,255,.42); box-shadow:inset 0 1px rgba(255,255,255,.82); font-size:14px; transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .35s ease; }

/* Game garden: a pearly controller with a lime button and a little cyan one. */
body[data-page="log"] .cta-game-icon:before { content:''; position:absolute; width:59px; height:36px; left:2px; top:15px; border:1px solid rgba(255,255,255,.86); border-radius:43% 47% 42% 46%; background:linear-gradient(145deg,#f9ffff 0%,#bdf3df 36%,#53bfae 68%,#258d99); box-shadow:inset 5px 5px 9px rgba(255,255,255,.8),inset -7px -8px 11px rgba(0,106,111,.19); transform:rotate(-8deg); }
body[data-page="log"] .cta-game-icon:after { content:''; position:absolute; width:18px; height:6px; left:14px; top:30px; border-radius:2px; background:#237b85; box-shadow:0 -6px 0 -1px #237b85; transform:rotate(-8deg); }
body[data-page="log"] .cta-game-icon i { position:absolute; display:block; border-radius:50%; }
body[data-page="log"] .cta-game-icon i:nth-child(1) { width:9px; height:9px; right:10px; top:24px; background:#e4ff83; box-shadow:inset 1px 1px rgba(255,255,255,.8),0 0 7px rgba(215,255,101,.82); }
body[data-page="log"] .cta-game-icon i:nth-child(2) { width:7px; height:7px; right:18px; top:35px; background:#baf4ff; box-shadow:inset 1px 1px rgba(255,255,255,.8),0 0 6px rgba(88,220,240,.74); }
body[data-page="log"] .cta-game-icon i:nth-child(3) { width:20px; height:3px; left:22px; bottom:7px; border-radius:99px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.86),transparent); transform:rotate(-18deg); }

/* Music lagoon: a bright aqua speaker sending out a pair of soft water rings. */
body[data-page="log"] .cta-music-icon:before { content:''; position:absolute; width:35px; height:50px; left:15px; top:6px; border:1px solid rgba(255,255,255,.9); border-radius:16px 16px 19px 19px; background:linear-gradient(145deg,#fbffff,#bde9fb 42%,#4c9bd2); box-shadow:inset 4px 4px 8px rgba(255,255,255,.82),inset -6px -7px 10px rgba(20,83,155,.2); }
body[data-page="log"] .cta-music-icon:after { content:''; position:absolute; width:20px; aspect-ratio:1; left:23px; top:17px; border:2px solid rgba(24,90,151,.72); border-radius:50%; background:radial-gradient(circle,#efffff 0 12%,#6bb5e3 18% 60%,#266fae 64%); box-shadow:0 0 11px rgba(127,219,255,.66); }
body[data-page="log"] .cta-music-icon i { position:absolute; display:block; right:0; border:1px solid rgba(255,255,255,.8); border-left:0; border-radius:0 50% 50% 0; opacity:.78; }
body[data-page="log"] .cta-music-icon i:nth-child(1) { width:20px; height:24px; top:19px; }
body[data-page="log"] .cta-music-icon i:nth-child(2) { width:12px; height:15px; right:7px; top:24px; }
body[data-page="log"] .cta-music-icon i:nth-child(3) { width:34px; height:3px; right:-3px; bottom:5px; border:0; border-radius:99px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent); transform:rotate(-13deg); }
body[data-page="log"] .dashboard-cta:hover { transform:translateY(-5px) scale(1.015); }
body[data-page="log"] .dashboard-cta:hover .cta-icon { transform:translateY(-4px) rotate(7deg) scale(1.08); filter:drop-shadow(0 10px 13px rgba(8,105,137,.22)); }
body[data-page="log"] .dashboard-cta:hover .cta-arrow { transform:translate(3px,-3px) rotate(10deg); background:rgba(239,255,172,.78); }

@media (max-width:760px) {
  body[data-page="log"] .hero-title { font-size:clamp(2.95rem,12.6vw,4.7rem); line-height:.81; }
  body[data-page="log"] .hero-destinations { grid-template-columns:1fr; width:min(100%,365px); margin-top:22px; }
  body[data-page="log"] .dashboard-cta { grid-template-columns:68px 1fr auto; min-height:91px; padding:11px 14px 11px 10px; }
  body[data-page="log"] .cta-icon { width:55px; height:55px; transform:scale(.86); transform-origin:left center; }
  body[data-page="log"] .cta-label b { font-size:1.42rem; }
  body[data-page="log"] .cta-label small { font-size:8px; }
}

/* Vista Media Center / 360 blade menu: a focused text list with a small
   picture at the edge, rather than two contemporary floating cards. */
body[data-page="log"] .hero-destinations { display:grid; grid-template-columns:1fr; gap:2px; width:min(100%,420px); margin-top:clamp(22px,2.7vw,36px); padding:7px 0 7px 10px; border-left:1px solid rgba(255,255,255,.7); background:linear-gradient(90deg,rgba(236,255,255,.17),transparent 74%); }
body[data-page="log"] .dashboard-cta { display:grid; grid-template-columns:minmax(0,1fr) 62px 27px; align-items:center; min-height:70px; padding:7px 11px 7px 17px; overflow:visible; border:0; border-radius:4px; color:#195f76; background:transparent; box-shadow:none; opacity:1; transform:none; animation:none; transition:color .28s ease,transform .35s cubic-bezier(.16,1,.3,1); }
body[data-page="log"] .cta-music { color:#285f91; background:transparent; }
body[data-page="log"] .dashboard-cta:before { content:''; position:absolute; z-index:-1; inset:3px 0 3px 0; width:auto; height:auto; border:1px solid rgba(255,255,255,.78); border-radius:4px; background:linear-gradient(90deg,rgba(248,255,255,.78),rgba(207,249,237,.42) 64%,rgba(167,232,229,.08)); box-shadow:inset 0 1px rgba(255,255,255,.88),0 8px 16px rgba(20,107,132,.09); opacity:0; transform:scaleX(.97); transform-origin:left; transition:opacity .22s ease,transform .35s cubic-bezier(.16,1,.3,1),background .3s ease; }
body[data-page="log"] .cta-games:before { opacity:1; transform:scaleX(1); }
body[data-page="log"] .hero-destinations:has(.cta-music:hover) .cta-games:before { opacity:0; transform:scaleX(.97); }
body[data-page="log"] .cta-music:hover:before { opacity:1; transform:scaleX(1); background:linear-gradient(90deg,rgba(248,255,255,.78),rgba(205,233,255,.48) 64%,rgba(146,206,246,.08)); }
body[data-page="log"] .cta-label { grid-column:1; grid-row:1; display:block; color:inherit; }
body[data-page="log"] .cta-label b { display:block; margin:0; color:inherit; font:600 clamp(1.75rem,2.65vw,2.5rem)/.88 'Space Grotesk',sans-serif; letter-spacing:-.085em; }
body[data-page="log"] .cta-icon { grid-column:2; grid-row:1; width:52px; height:52px; justify-self:center; filter:drop-shadow(0 6px 8px rgba(8,105,137,.13)); transform:scale(.82); transition:transform .42s cubic-bezier(.16,1,.3,1),filter .3s ease; }
body[data-page="log"] .cta-arrow { grid-column:3; grid-row:1; width:auto; height:auto; margin:0; color:rgba(20,92,114,.5); border:0; border-radius:0; background:transparent; box-shadow:none; font-size:18px; transition:transform .35s cubic-bezier(.16,1,.3,1),color .3s ease; }
body[data-page="log"] .cta-music .cta-arrow { color:rgba(35,91,150,.5); }
body[data-page="log"] .dashboard-cta:hover { z-index:1; color:#0b6e79; background:transparent; box-shadow:none; transform:translateX(6px); filter:none; }
body[data-page="log"] .cta-music:hover { color:#176da3; }
body[data-page="log"] .dashboard-cta:hover .cta-icon { transform:translateX(-2px) scale(1); filter:drop-shadow(0 9px 11px rgba(8,105,137,.21)); }
body[data-page="log"] .dashboard-cta:hover .cta-arrow { color:inherit; transform:translateX(4px); background:transparent; }

@media (max-width:760px) {
  body[data-page="log"] .hero-destinations { width:min(100%,345px); margin-top:22px; padding-left:7px; }
  body[data-page="log"] .dashboard-cta { grid-template-columns:minmax(0,1fr) 52px 23px; min-height:58px; padding:5px 7px 5px 13px; }
  body[data-page="log"] .cta-label b { font-size:1.52rem; }
  body[data-page="log"] .cta-icon { width:48px; height:48px; transform:scale(.7); }
}

/* CTA recovery: one stable, self-contained layout. */
body[data-page="log"] .hero-destinations { position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:12px; width:min(100%,660px); margin-top:28px; padding:0; border:0; background:none; }
body[data-page="log"] .dashboard-cta { position:relative; z-index:1; display:flex; flex:1 1 270px; align-items:center; gap:14px; min-width:0; min-height:94px; padding:13px 16px; overflow:hidden; border:1px solid rgba(255,255,255,.88); border-radius:16px; color:#155d70; background:rgba(242,255,255,.72); box-shadow:inset 0 1px rgba(255,255,255,.96),0 11px 23px rgba(11,84,111,.15); opacity:1; transform:none; animation:none; filter:none; transition:transform .25s ease,background .25s ease,box-shadow .25s ease; }
body[data-page="log"] .cta-music { color:#245f91; background:rgba(241,250,255,.72); }
body[data-page="log"] .dashboard-cta:before,body[data-page="log"] .dashboard-cta:after { content:none; display:none; }
body[data-page="log"] .cta-icon { position:relative; display:block; flex:0 0 62px; width:62px; height:62px; opacity:1; transform:scale(.88); transform-origin:center; filter:drop-shadow(0 6px 8px rgba(8,105,137,.15)); }
body[data-page="log"] .cta-label { display:block; flex:1; min-width:0; color:inherit; }
body[data-page="log"] .cta-label b { display:block; margin:0; color:inherit; font:700 clamp(1.55rem,2.2vw,2.15rem)/1 'Space Grotesk',sans-serif; letter-spacing:-.075em; }
body[data-page="log"] .cta-label small { display:none; }
body[data-page="log"] .cta-arrow { display:grid; flex:0 0 26px; width:26px; height:26px; margin:0; place-items:center; color:inherit; border:1px solid rgba(69,139,161,.28); border-radius:50%; background:rgba(255,255,255,.46); box-shadow:none; font-size:13px; }
body[data-page="log"] .dashboard-cta:hover,body[data-page="log"] .dashboard-cta:focus-visible { transform:translateY(-3px); color:#0e7580; background:rgba(234,255,247,.9); box-shadow:inset 0 1px rgba(255,255,255,.98),0 16px 26px rgba(11,84,111,.2); filter:none; }
body[data-page="log"] .cta-music:hover,body[data-page="log"] .cta-music:focus-visible { color:#1d6fa6; background:rgba(235,247,255,.92); }
body[data-page="log"] .dashboard-cta:hover .cta-icon { transform:scale(.95); filter:drop-shadow(0 8px 10px rgba(8,105,137,.22)); }
body[data-page="log"] .dashboard-cta:hover .cta-arrow { transform:none; background:rgba(255,255,255,.76); }

@media (max-width:760px) {
  body[data-page="log"] .hero-destinations { display:grid; grid-template-columns:1fr; gap:9px; width:min(100%,350px); margin-top:22px; }
  body[data-page="log"] .dashboard-cta { min-height:72px; padding:8px 12px; gap:9px; border-radius:14px; }
  body[data-page="log"] .cta-icon { flex-basis:51px; width:51px; height:51px; transform:scale(.71); }
  body[data-page="log"] .cta-label b { font-size:1.4rem; }
}

/* First-visit boot: an original Aero console start-up, with the layered scale
   and timing of an early living-room console rather than a simple spinner. */
.boot-screen { z-index:100; display:block; overflow:hidden; color:#f8feff; isolation:isolate; background:radial-gradient(circle at 50% 48%,#58c4dc 0%,#1b759c 21%,#0d496b 52%,#062e49 100%); transition:opacity .65s ease,visibility .65s ease; }
.boot-screen:before { content:''; position:absolute; z-index:-2; inset:0; opacity:.65; background:radial-gradient(ellipse at 50% 120%,rgba(142,255,203,.46),transparent 39%),radial-gradient(circle at 50% 50%,transparent 0 31%,rgba(205,255,255,.14) 31.3%,transparent 32%),linear-gradient(120deg,rgba(255,255,255,.06),transparent 26% 74%,rgba(110,226,242,.08)); }
.boot-screen:after { content:''; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 50% 50%,transparent 31%,rgba(0,39,66,.33) 100%); pointer-events:none; }
.boot-screen.done { opacity:0; visibility:hidden; }
.boot-horizon { position:absolute; left:-12vw; right:-12vw; bottom:13vh; height:1px; background:linear-gradient(90deg,transparent,rgba(221,255,255,.85) 30% 70%,transparent); box-shadow:0 0 18px rgba(162,244,255,.75),0 -13px 42px rgba(105,230,227,.22); transform:perspective(280px) rotateX(62deg); transform-origin:bottom; opacity:0; }
.boot-orbit,.boot-rings,.boot-core,.boot-traces { position:absolute; left:50%; top:50%; pointer-events:none; }
.boot-orbit { width:min(46vw,420px); aspect-ratio:1; border:1px solid rgba(231,255,255,.27); border-radius:50%; transform:translate(-50%,-50%) rotate(-28deg); animation:none; }
.boot-orbit:before,.boot-orbit:after { content:''; position:absolute; inset:11%; border:1px solid rgba(225,255,255,.2); border-radius:46% 54% 43% 57%; transform:rotate(51deg); }
.boot-orbit:after { inset:29%; border-color:rgba(209,255,166,.32); transform:rotate(-25deg); }
.boot-orbit i { position:absolute; display:block; width:8px; aspect-ratio:1; border-radius:50%; background:#e5ff92; box-shadow:0 0 13px #e5ff92,0 0 29px rgba(221,255,119,.5); }
.boot-orbit i:first-child { left:7%; top:36%; }.boot-orbit i:last-child { right:14%; bottom:17%; width:5px; background:#e8ffff; box-shadow:0 0 12px #e8ffff; }
.boot-rings { width:18px; aspect-ratio:1; transform:translate(-50%,-50%); }
.boot-rings i { position:absolute; inset:0; display:block; border:1px solid rgba(225,255,255,.72); border-radius:50%; opacity:0; box-shadow:0 0 17px rgba(167,246,255,.32),inset 0 0 18px rgba(171,255,238,.12); }
.boot-rings i:nth-child(2) { border-color:rgba(209,255,121,.64); }.boot-rings i:nth-child(3) { border-color:rgba(224,252,255,.45); }
.boot-core { width:90px; aspect-ratio:1; transform:translate(-50%,-50%) scale(.15); border:1px solid rgba(255,255,255,.82); border-radius:50%; background:radial-gradient(circle at 33% 25%,#fff 0 4%,#d6ffff 14%,#83e7ee 33%,#42aaca 57%,#176997 84%); box-shadow:inset 12px 12px 21px rgba(255,255,255,.7),inset -14px -16px 22px rgba(2,72,134,.45),0 0 31px rgba(175,250,255,.85),0 0 86px rgba(92,224,227,.35); opacity:0; }
.boot-core:before { content:''; position:absolute; width:124px; height:26px; left:-19px; top:31px; border:1px solid rgba(231,255,255,.68); border-left:0; border-right:0; border-radius:50%; transform:rotate(-31deg); box-shadow:0 0 14px rgba(217,255,255,.3); }
.boot-core:after { content:''; position:absolute; width:9px; aspect-ratio:1; left:18px; top:15px; border-radius:50%; background:white; box-shadow:0 0 17px white; }
.boot-core i { position:absolute; display:block; border-radius:50%; background:#dfff7f; box-shadow:0 0 11px #dfff7f; }.boot-core i:nth-child(1){width:12px;height:12px;right:-5px;top:24px}.boot-core i:nth-child(2){width:6px;height:6px;left:7px;bottom:21px;background:#eaffff}.boot-core i:nth-child(3){width:4px;height:4px;right:20px;bottom:11px}
.boot-traces { width:min(76vw,850px); height:min(56vh,470px); transform:translate(-50%,-50%); }
.boot-traces i { position:absolute; display:block; height:1px; border-radius:99px; opacity:0; background:linear-gradient(90deg,transparent,rgba(224,255,255,.8),transparent); box-shadow:0 0 8px rgba(198,255,255,.45); }.boot-traces i:nth-child(1){width:46%;left:0;top:28%;transform:rotate(18deg)}.boot-traces i:nth-child(2){width:33%;right:3%;top:67%;transform:rotate(-23deg)}.boot-traces i:nth-child(3){width:27%;left:9%;bottom:15%;transform:rotate(-12deg)}.boot-traces i:nth-child(4){width:38%;right:12%;bottom:7%;transform:rotate(21deg)}
.boot-copy { position:absolute; left:50%; top:calc(50% + 93px); width:310px; transform:translateX(-50%); text-align:center; opacity:0; }.boot-copy p { margin:0; color:#f7ffff; font:600 14px/1 'DM Mono',monospace; letter-spacing:.38em; text-indent:.38em; text-shadow:0 0 16px rgba(221,255,255,.6); }.boot-copy small { display:block; margin-top:11px; color:rgba(228,255,255,.72); font:9px 'DM Mono',monospace; letter-spacing:.22em; }
.boot-progress { position:absolute; left:50%; top:calc(50% + 145px); width:min(49vw,238px); height:2px; margin:0; overflow:visible; background:rgba(225,255,255,.22); transform:translateX(-50%); opacity:0; }.boot-progress:before { content:''; position:absolute; left:0; top:-4px; width:100%; height:10px; border-left:1px solid rgba(255,255,255,.26); border-right:1px solid rgba(255,255,255,.26); }.boot-progress span { width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#cfff70,#eaffff 55%,#7be7ee); box-shadow:0 0 11px rgba(216,255,113,.82); animation:none; }
.boot-readout { position:absolute; left:50%; top:calc(50% + 164px); display:flex; align-items:center; gap:8px; color:rgba(231,255,255,.72); font:8px 'DM Mono',monospace; letter-spacing:.14em; transform:translateX(-50%); opacity:0; }.boot-readout i { display:block; width:22px; height:1px; background:rgba(220,255,255,.54); }
.boot-screen.is-starting { animation:boot-sky 2.85s cubic-bezier(.16,1,.3,1) both; }.boot-screen.is-starting .boot-horizon { animation:boot-horizon 1.3s .38s cubic-bezier(.16,1,.3,1) both; }.boot-screen.is-starting .boot-orbit { animation:boot-orbit-spin 2.55s .12s cubic-bezier(.2,.8,.2,1) both; }.boot-screen.is-starting .boot-core { animation:boot-core-arrive 1.18s .32s cubic-bezier(.16,1,.3,1) both,boot-core-breathe 1.15s 1.45s ease-in-out infinite alternate; }.boot-screen.is-starting .boot-rings i { animation:boot-ring 1.4s cubic-bezier(.16,1,.3,1) both; }.boot-screen.is-starting .boot-rings i:nth-child(1){animation-delay:.72s}.boot-screen.is-starting .boot-rings i:nth-child(2){animation-delay:1.02s}.boot-screen.is-starting .boot-rings i:nth-child(3){animation-delay:1.32s}.boot-screen.is-starting .boot-traces i { animation:boot-trace .9s cubic-bezier(.16,1,.3,1) both; }.boot-screen.is-starting .boot-traces i:nth-child(1){animation-delay:.85s}.boot-screen.is-starting .boot-traces i:nth-child(2){animation-delay:1.05s}.boot-screen.is-starting .boot-traces i:nth-child(3){animation-delay:1.21s}.boot-screen.is-starting .boot-traces i:nth-child(4){animation-delay:1.37s}.boot-screen.is-starting .boot-copy { animation:boot-copy-in .65s 1.22s ease both; }.boot-screen.is-starting .boot-progress { animation:boot-copy-in .45s 1.42s ease both; }.boot-screen.is-starting .boot-progress span { animation:boot-progress-fill 1.18s 1.48s cubic-bezier(.16,1,.3,1) both; }.boot-screen.is-starting .boot-readout { animation:boot-copy-in .5s 1.76s ease both; }
@keyframes boot-sky { 0% { filter:brightness(.58) saturate(.7); } 42% { filter:brightness(1.16) saturate(1.2); } 100% { filter:brightness(1) saturate(1); } }
@keyframes boot-horizon { from { opacity:0; transform:perspective(280px) rotateX(78deg) translateY(22px) scaleX(.2); } to { opacity:.8; transform:perspective(280px) rotateX(62deg) translateY(0) scaleX(1); } }
@keyframes boot-orbit-spin { 0% { opacity:0; transform:translate(-50%,-50%) rotate(-190deg) scale(.25); } 42% { opacity:.9; } 100% { opacity:.75; transform:translate(-50%,-50%) rotate(108deg) scale(1); } }
@keyframes boot-core-arrive { 0% { opacity:0; transform:translate(-50%,-50%) scale(.05); filter:brightness(2); } 55% { opacity:1; transform:translate(-50%,-50%) scale(1.22); } 76% { transform:translate(-50%,-50%) scale(.9); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes boot-core-breathe { to { transform:translate(-50%,-50%) scale(1.06) rotate(5deg); box-shadow:inset 12px 12px 21px rgba(255,255,255,.7),inset -14px -16px 22px rgba(2,72,134,.45),0 0 38px rgba(199,255,255,.95),0 0 104px rgba(111,238,220,.48); } }
@keyframes boot-ring { 0% { opacity:.9; transform:scale(.5); } 100% { opacity:0; transform:scale(27); } }
@keyframes boot-trace { 0% { opacity:0; transform:scaleX(.08); transform-origin:left; } 42% { opacity:.9; } 100% { opacity:0; transform:scaleX(1.4); } }
@keyframes boot-copy-in { to { opacity:1; } }
@keyframes boot-progress-fill { to { transform:scaleX(1); } }
@media (max-width:760px) { .boot-orbit { width:76vw; }.boot-core { width:76px; }.boot-copy { top:calc(50% + 82px); }.boot-progress { top:calc(50% + 128px); width:58vw; }.boot-readout { top:calc(50% + 147px); }.boot-horizon { bottom:19vh; } }

/* Avoid a repeat-loader flash, and let the actual page begin only after boot. */
.boot-screen { opacity:0; visibility:hidden; }
html.boot-pending .boot-screen { opacity:1; visibility:visible; }
html.boot-pending .hero .reveal,html.boot-pending .hero .reveal-word { visibility:hidden; animation:none !important; }
html.boot-pending .hero-destinations { visibility:hidden; }

/* Discoverable scene objects: their glow and label are clipped to the same
   image-mapped hit shape, so the affordance never floats away from the thing. */
.scene-item { --scene-glow:rgba(222,255,150,.7); --scene-line:rgba(245,255,255,.92); }
.scene-item.scene-games { --scene-glow:rgba(221,255,118,.82); }.scene-item.scene-music { --scene-glow:rgba(157,239,255,.82); }
.scene-item .scene-highlight { position:absolute; inset:7%; display:block; opacity:.28 !important; border:1px solid var(--scene-line); border-radius:inherit; box-shadow:inset 0 0 10px var(--scene-glow),0 0 11px var(--scene-glow); mix-blend-mode:screen; pointer-events:none; animation:scene-object-idle 2.7s ease-in-out infinite alternate !important; }
.scene-item .scene-highlight:after { content:'✦'; position:absolute; right:5%; top:-13px; color:#f3ff9d; font:12px/1 Arial,sans-serif; text-shadow:0 0 9px var(--scene-glow); }
.scene-item .scene-hint { position:absolute; left:50%; top:50%; display:block; padding:3px 5px; color:#0b627b; border:1px solid rgba(255,255,255,.84); border-radius:999px; background:rgba(243,255,255,.86); box-shadow:inset 0 1px #fff,0 4px 10px rgba(13,101,129,.2); font:600 7px/1 'DM Mono',monospace; letter-spacing:.08em; opacity:0 !important; transform:translate(-50%,-50%) scale(.76); transition:opacity .18s ease,transform .28s cubic-bezier(.34,1.56,.64,1); pointer-events:none; white-space:nowrap; }
.scene-item:hover .scene-highlight,.scene-item:focus-visible .scene-highlight { opacity:.8 !important; animation-duration:1.15s !important; }
.scene-item:hover .scene-hint,.scene-item:focus-visible .scene-hint { opacity:1 !important; transform:translate(-50%,-50%) scale(1); }
.scene-item:focus-visible { outline:0; }
@keyframes scene-object-idle { to { opacity:.52; transform:scale(1.035); } }
@media (hover:none) { .scene-item .scene-highlight { opacity:.45 !important; }.scene-item .scene-hint { display:none; } }

/* Composer controls are rendered in-app so they match the console instead of
   handing off to browser-specific date and select widgets. */
.custom-select,.custom-date { position:relative; }
.field-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:42px; padding:0 12px; color:#16475f; border:1px solid rgba(38,117,145,.24); border-radius:11px; outline:0; background:rgba(255,255,255,.64); box-shadow:inset 0 1px 3px rgba(27,102,133,.06); font:600 10px 'DM Mono',monospace; letter-spacing:.08em; cursor:pointer; transition:border .2s ease,box-shadow .2s ease,background .2s ease; }
.field-trigger:hover,.field-trigger[aria-expanded="true"] { border-color:#3cabc6; background:rgba(255,255,255,.85); box-shadow:0 0 0 3px rgba(92,211,228,.15); }
.field-trigger i { color:#43849a; font-style:normal; font-size:17px; line-height:1; }
.select-menu,.date-popover { position:absolute; z-index:12; width:100%; margin-top:7px; padding:7px; border:1px solid rgba(75,165,190,.35); border-radius:13px; background:rgba(239,254,255,.98); box-shadow:0 15px 32px rgba(11,76,102,.19); backdrop-filter:blur(18px); }
.select-menu { display:grid; gap:3px; }
.select-menu button { width:100%; padding:10px 9px; color:#245a70; border-radius:8px; background:transparent; text-align:left; font:600 10px 'DM Mono',monospace; letter-spacing:.08em; cursor:pointer; }
.select-menu button:hover,.select-menu button.is-selected { color:#0b6885; background:rgba(190,246,239,.7); }
.date-popover { padding:12px; }
.date-nav { display:grid; grid-template-columns:28px 1fr 28px; align-items:center; gap:5px; padding-bottom:10px; border-bottom:1px solid rgba(47,133,158,.16); }
.date-nav strong { color:#245a70; text-align:center; font:600 9px 'DM Mono',monospace; letter-spacing:.08em; }
.date-nav button { display:grid; width:28px; height:28px; place-items:center; border-radius:7px; color:#36778d; background:rgba(172,232,242,.28); font-size:15px; cursor:pointer; }
.date-nav button:hover { color:#fff; background:#188eaf; }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.calendar-weekdays { padding:10px 0 4px; color:#7198a6; text-align:center; font:600 8px 'DM Mono',monospace; }
.calendar-grid button { display:grid; width:100%; aspect-ratio:1; place-items:center; color:#255e74; border-radius:7px; background:transparent; font:500 10px 'DM Mono',monospace; cursor:pointer; }
.calendar-grid button:hover { background:rgba(173,242,239,.62); }
.calendar-grid button.is-selected { color:#164b5f; background:#d7ff67; box-shadow:0 2px 7px rgba(104,169,71,.25); }
.calendar-grid button.is-today:not(.is-selected) { border:1px solid rgba(24,142,175,.48); }

.ratings-panel { margin-top:22px; padding:17px; border:1px solid rgba(47,137,162,.2); border-radius:16px; background:rgba(235,253,253,.34); }
.ratings-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding-bottom:14px; }
.ratings-heading .field-label { margin:0 0 5px; }
.ratings-heading > div > span { display:block; max-width:305px; color:#6a94a2; font:10px/1.45 'DM Mono',monospace; }
.overall-rating { flex:0 0 auto; padding:7px 9px; border:1px solid rgba(54,145,166,.24); border-radius:999px; color:#176a82; background:rgba(217,255,103,.35); font:600 9px 'DM Mono',monospace; letter-spacing:.08em; }
.rating-list { display:grid; gap:11px; }
.rating-control { display:grid; grid-template-columns:108px minmax(0,1fr) 58px; gap:10px; align-items:center; color:#3a7185; font:600 9px 'DM Mono',monospace; letter-spacing:.06em; }
.rating-control output { color:#23677d; text-align:right; font-size:9px; }
.rating-control input { appearance:none; width:100%; height:5px !important; min-height:0; margin:0; padding:0; border:0; border-radius:999px; background:linear-gradient(90deg,#3db6c6 var(--rating-progress,0%),rgba(79,146,167,.18) var(--rating-progress,0%)); box-shadow:none; cursor:pointer; }
.rating-control input::-webkit-slider-thumb { appearance:none; width:15px; height:15px; border:2px solid #fff; border-radius:50%; background:#1a8ca7; box-shadow:0 2px 5px rgba(17,91,119,.28); }
.rating-control input::-moz-range-thumb { width:12px; height:12px; border:2px solid #fff; border-radius:50%; background:#1a8ca7; box-shadow:0 2px 5px rgba(17,91,119,.28); }
.rating-control input:focus-visible { outline:3px solid rgba(92,211,228,.3); outline-offset:4px; }

.overlay-ratings { display:flex; flex-wrap:wrap; align-items:center; gap:10px 15px; color:#b5e8f3; font:9px 'DM Mono',monospace; letter-spacing:.08em; }
.overlay-ratings strong { padding:7px 9px; border:1px solid rgba(216,255,82,.47); border-radius:999px; color:#eaff91; font-weight:600; }
.overlay-ratings strong small { color:#b9e5ea; font-size:8px; }
.overlay-ratings > div { display:flex; flex-wrap:wrap; gap:5px 10px; }
.overlay-ratings b { color:#ecffff; font-weight:600; }

@media (max-width:620px) {
  .rating-control { grid-template-columns:90px minmax(0,1fr) 52px; gap:8px; }
  .ratings-panel { padding:14px; }
  .ratings-heading { flex-direction:column; }
  .overall-rating { align-self:flex-start; }
}

/* Refined composer controls: closer to the archive's soft, playful glass UI. */
.type-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:4px; border:1px solid rgba(66,145,165,.16); border-radius:15px; background:rgba(255,255,255,.35); box-shadow:inset 0 1px rgba(255,255,255,.72); }
.type-option { display:flex; align-items:center; justify-content:center; gap:5px; min-height:38px; padding:0 5px; border:1px solid transparent; border-radius:11px; color:#5a8392; background:transparent; font:600 8px 'DM Mono',monospace; letter-spacing:.06em; cursor:pointer; transition:color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s ease; }
.type-option i { color:#7eabb8; font-style:normal; font-size:11px; transition:color .25s ease,transform .25s ease; }
.type-option:hover { color:#1c758b; background:rgba(230,255,249,.57); }
.type-option.is-selected { color:#174f66; border-color:rgba(255,255,255,.88); background:linear-gradient(135deg,rgba(239,255,255,.96),rgba(215,255,199,.88)); box-shadow:0 4px 11px rgba(27,117,139,.14),inset 0 1px #fff; }
.type-option.is-selected i { color:#1686a1; transform:scale(1.18); }
.type-option:focus-visible,.rating-options button:focus-visible { outline:2px solid #30a5bb; outline-offset:2px; }

.date-picker { position:relative; }
.date-trigger { display:grid; grid-template-columns:46px minmax(0,1fr) 28px; align-items:center; width:100%; min-height:58px; padding:5px 9px 5px 6px; overflow:hidden; border:1px solid rgba(66,145,165,.19); border-radius:15px; color:#205c72; background:linear-gradient(115deg,rgba(255,255,255,.78),rgba(224,250,249,.59)); box-shadow:inset 0 1px rgba(255,255,255,.94),0 5px 13px rgba(16,101,127,.06); text-align:left; cursor:pointer; transition:transform .25s ease,border .25s ease,box-shadow .25s ease; }
.date-trigger:hover,.date-trigger[aria-expanded="true"] { border-color:rgba(34,144,173,.56); box-shadow:inset 0 1px #fff,0 8px 18px rgba(16,101,127,.12); transform:translateY(-1px); }
.date-day { display:grid; width:40px; aspect-ratio:1; place-items:center; border-radius:12px; color:#15566d; background:linear-gradient(145deg,#f4ffff,#c3f0f1); box-shadow:inset 1px 1px #fff,inset -3px -3px 7px rgba(21,126,149,.1); font:600 17px/1 'Space Grotesk',sans-serif; letter-spacing:-.06em; }
.date-copy { display:grid; gap:1px; min-width:0; }
.date-copy small,.date-copy em { color:#6b98a6; font:600 8px/1 'DM Mono',monospace; letter-spacing:.09em; font-style:normal; }
.date-copy strong { overflow:hidden; color:#205c72; font:600 12px/1.05 'Space Grotesk',sans-serif; letter-spacing:-.03em; text-overflow:ellipsis; white-space:nowrap; }
.date-glyph { position:relative; width:19px; height:18px; border:1px solid #75b9c4; border-radius:5px; }
.date-glyph:before { content:''; position:absolute; left:3px; right:3px; top:4px; height:1px; background:#75b9c4; box-shadow:4px 5px 0 -0.2px #75b9c4,-4px 5px 0 -0.2px #75b9c4; }
.date-glyph:after { content:''; position:absolute; top:-3px; left:4px; width:2px; height:5px; border-radius:99px; background:#2d8399; box-shadow:8px 0 #2d8399; }
.date-popover { width:min(310px,calc(100vw - 64px)); margin-top:10px; padding:14px; border-color:rgba(117,201,208,.54); border-radius:19px; background:linear-gradient(145deg,rgba(250,255,255,.98),rgba(218,248,248,.96)); box-shadow:0 18px 42px rgba(11,78,104,.22),inset 0 1px #fff; }
.date-nav { padding:0 1px 11px; }
.date-nav strong { color:#316e82; font-size:9px; }
.date-nav button { border:1px solid rgba(87,167,184,.18); border-radius:9px; background:rgba(255,255,255,.58); }
.calendar-weekdays { padding-top:12px; color:#80a6b1; }
.calendar-grid { gap:4px; }
.calendar-grid button { border-radius:9px; font-size:9px; }
.calendar-grid button:hover { color:#18596f; background:rgba(202,255,214,.66); }
.calendar-grid button.is-selected { color:#164b5f; background:linear-gradient(145deg,#e6ff82,#bbef5d); box-shadow:0 3px 9px rgba(104,169,71,.24),inset 0 1px rgba(255,255,255,.8); }

.ratings-panel { margin-top:24px; padding:0; overflow:hidden; border:1px solid rgba(73,155,174,.18); border-radius:20px; background:linear-gradient(135deg,rgba(247,255,255,.72),rgba(213,247,244,.48)); box-shadow:inset 0 1px rgba(255,255,255,.86); }
.ratings-panel[hidden] { display:none; }
.music-details-panel { margin-top:24px; padding:17px 18px 18px; border:1px solid rgba(73,155,174,.18); border-radius:20px; background:linear-gradient(135deg,rgba(247,255,255,.72),rgba(213,247,244,.48)); box-shadow:inset 0 1px rgba(255,255,255,.86); }
.music-details-panel[hidden] { display:none; }
.music-details-panel .field-label { margin:0 0 11px; }
.music-detail-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.music-detail-fields label { display:grid; gap:7px; min-width:0; color:#467a8c; font:600 9px 'DM Mono',monospace; letter-spacing:.08em; }
.music-detail-fields input { min-width:0; min-height:52px; padding:0 15px; border-color:rgba(66,145,165,.21); border-radius:14px; background:rgba(255,255,255,.72); font:600 13px 'Space Grotesk',sans-serif; letter-spacing:-.02em; }
.music-detail-fields input::placeholder { color:#82a5ae; font:10px 'DM Mono',monospace; letter-spacing:.02em; }
.art-lookup-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.art-lookup { display:flex; align-items:center; gap:9px; padding:9px 11px 9px 13px; border:1px solid rgba(43,133,156,.28); border-radius:11px; color:#24657b; background:rgba(255,255,255,.56); box-shadow:inset 0 1px rgba(255,255,255,.9); font:600 9px 'DM Mono',monospace; letter-spacing:.08em; transition:transform .2s ease,background .2s ease; }
.art-lookup:hover:not(:disabled) { transform:translateY(-1px); background:#e3ffa0; }
.art-lookup:disabled { opacity:.55; cursor:wait; }
.art-lookup b { display:grid; width:18px; aspect-ratio:1; place-items:center; border-radius:50%; color:#1b6478; background:#d7f4f2; font:14px/1 Arial,sans-serif; }
#musicLookupMessage { min-height:13px; margin:0; color:#5f8c98; font:9px/1.35 'DM Mono',monospace; text-align:right; }
#musicLookupMessage.error { color:#b34c5b; }
.ratings-heading { position:relative; align-items:center; padding:18px 18px 15px; border-bottom:1px solid rgba(56,137,157,.12); background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(220,255,207,.2)); }
.ratings-heading .field-label { color:#377b90; }
.ratings-heading > div > span { max-width:360px; color:#6795a1; }
.overall-rating { display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:4px; align-items:end; min-width:74px; padding:8px 10px 7px; border:1px solid rgba(255,255,255,.92); border-radius:15px; color:#1b6175; background:rgba(255,255,255,.62); box-shadow:0 5px 12px rgba(18,107,130,.1),inset 0 1px #fff; text-align:right; }
.overall-rating small { grid-column:1 / -1; color:#72a0aa; font:600 7px 'DM Mono',monospace; letter-spacing:.12em; }
.overall-rating strong { color:#1d7185; font:600 21px/.9 'Space Grotesk',sans-serif; letter-spacing:-.07em; }
.overall-rating span { padding-bottom:1px; color:#5b929d; font:600 7px 'DM Mono',monospace; letter-spacing:.04em; }
.rating-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; padding:1px; background:rgba(64,143,159,.1); }
.rating-control { display:block; padding:13px 14px 12px; background:rgba(255,255,255,.43); }
.rating-label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.rating-label > span { color:#3a7185; font:600 8px 'DM Mono',monospace; letter-spacing:.1em; }
.rating-label output { color:#6a9aa6; font:600 8px 'DM Mono',monospace; letter-spacing:.05em; }
.rating-options { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:3px; }
.rating-options button { min-width:0; aspect-ratio:1; padding:0; border:1px solid rgba(61,138,158,.14); border-radius:5px; color:#83aab3; background:rgba(255,255,255,.55); box-shadow:inset 0 1px rgba(255,255,255,.75); font:600 clamp(6px,.55vw,8px)/1 'DM Mono',monospace; cursor:pointer; transition:color .18s ease,background .18s ease,transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease; }
.rating-options button:hover { color:#1b7187; border-color:rgba(35,144,167,.38); background:rgba(209,255,225,.86); transform:translateY(-2px); }
.rating-options button.is-filled { color:#23758a; border-color:rgba(60,161,176,.26); background:rgba(170,238,235,.66); }
.rating-options button.is-selected { color:#184f64; border-color:rgba(255,255,255,.94); background:linear-gradient(145deg,#efff94,#b7eb63); box-shadow:0 3px 7px rgba(84,157,84,.25),inset 0 1px rgba(255,255,255,.85); transform:translateY(-2px) scale(1.08); }
.rating-control input { display:none; }

.image-preview { display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:9px; margin-top:11px; }
.preview-thumb { width:auto; height:auto; aspect-ratio:1.16; border:1px solid rgba(74,156,175,.18); border-radius:11px; background:#d8f4f3; box-shadow:0 5px 11px rgba(13,95,120,.09); }
.preview-thumb img { transition:transform .3s ease; }
.preview-thumb:hover img { transform:scale(1.06); }
.preview-index { position:absolute; top:5px; left:5px; padding:3px 4px; border:1px solid rgba(255,255,255,.58); border-radius:5px; color:#fff; background:rgba(6,64,83,.52); font:600 7px 'DM Mono',monospace; letter-spacing:.08em; }
.preview-actions { position:absolute; right:4px; bottom:4px; display:flex; gap:3px; }
.preview-thumb .preview-actions button { display:grid; width:19px; height:19px; place-items:center; padding:0; border:1px solid rgba(255,255,255,.58); border-radius:6px; color:white; background:rgba(6,64,83,.68); box-shadow:none; font:11px/1 Arial,sans-serif; cursor:pointer; transition:background .2s ease,transform .2s ease; }
.preview-thumb .preview-actions button:hover { background:#198eaa; transform:translateY(-1px); }
.preview-thumb .preview-actions button:last-child:hover { background:#b84f62; }
.preview-thumb .preview-actions button:disabled { opacity:.36; cursor:default; transform:none; }
.image-order-hint { margin:7px 2px 0; color:#7097a4; font:9px 'DM Mono',monospace; letter-spacing:.04em; }

@media (max-width:700px) {
  .rating-list { grid-template-columns:1fr; }
}

/* Larger, easier-to-read admin controls without changing their visual language. */
.composer .field-label { font-size:11px; }
.type-picker { gap:6px; padding:5px; border-radius:17px; }
.type-option { min-height:45px; font-size:10px; letter-spacing:.07em; }
.type-option i { font-size:13px; }

.date-trigger { grid-template-columns:57px minmax(0,1fr) 32px; min-height:70px; padding:6px 11px 6px 7px; border-radius:17px; }
.date-day { width:50px; border-radius:14px; font-size:22px; }
.date-copy { gap:3px; }
.date-copy small,.date-copy em { font-size:9px; }
.date-copy strong { font-size:15px; }
.date-glyph { width:22px; height:21px; border-radius:6px; }
.date-glyph:before { left:4px; right:4px; top:5px; box-shadow:5px 6px 0 -0.2px #75b9c4,-5px 6px 0 -0.2px #75b9c4; }
.date-glyph:after { left:5px; box-shadow:9px 0 #2d8399; }
.date-popover { width:min(340px,calc(100vw - 46px)); padding:16px; border-radius:21px; }
.date-nav { grid-template-columns:34px 1fr 34px; padding-bottom:13px; }
.date-nav strong { font-size:10px; }
.date-nav button { width:34px; height:34px; font-size:17px; }
.calendar-weekdays { padding:13px 0 6px; font-size:9px; }
.calendar-grid { gap:5px; }
.calendar-grid button { border-radius:10px; font-size:11px; }

.ratings-heading { padding:22px 22px 18px; }
.ratings-heading .field-label { margin-bottom:7px; }
.ratings-heading > div > span { max-width:430px; font-size:11px; line-height:1.5; }
.overall-rating { min-width:89px; padding:10px 12px 9px; border-radius:17px; }
.overall-rating small { font-size:8px; }
.overall-rating strong { font-size:27px; }
.overall-rating span { padding-bottom:2px; font-size:8px; }
.rating-control { padding:16px 17px 15px; }
.rating-label { margin-bottom:12px; }
.rating-label > span { font-size:10px; }
.rating-label output { font-size:9px; }
.rating-options { gap:4px; }
.rating-options button { border-radius:7px; font-size:10px; }

.image-preview { grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:11px; }
.preview-index { top:6px; left:6px; padding:4px 5px; font-size:8px; }
.preview-actions { right:5px; bottom:5px; gap:4px; }
.preview-thumb .preview-actions button { width:23px; height:23px; border-radius:7px; font-size:13px; }
.image-order-hint { margin-top:9px; font-size:10px; }

@media (max-width:620px) {
  .date-trigger { min-height:66px; }
  .ratings-heading { padding:18px; }
  .rating-control { padding:15px; }
}

/* The image strip is a direct manipulation surface: drag a thumbnail to place it. */
.preview-thumb { cursor:grab; transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease; }
.preview-thumb:active { cursor:grabbing; }
.preview-thumb.is-dragging { opacity:.38; transform:scale(.94); }
.preview-thumb.is-drop-target { transform:scale(1.045); box-shadow:0 0 0 3px rgba(208,255,104,.78),0 10px 20px rgba(12,104,126,.2); }
.preview-grip { position:absolute; top:5px; right:5px; display:grid; width:21px; height:21px; place-items:center; border:1px solid rgba(255,255,255,.52); border-radius:6px; color:rgba(255,255,255,.9); background:rgba(6,64,83,.46); font:14px/1 Arial,sans-serif; letter-spacing:-3px; }
.preview-thumb .preview-remove { position:absolute; top:auto; right:5px; bottom:5px; display:grid; width:23px; height:23px; place-items:center; padding:0; border:1px solid rgba(255,255,255,.58); border-radius:7px; color:#fff; background:rgba(6,64,83,.68); box-shadow:none; font:14px/1 Arial,sans-serif; cursor:pointer; }
.preview-thumb .preview-remove:hover { background:#b84f62; transform:translateY(-1px); }

/* Post reader: a quiet, image-first layout instead of a horizontal gallery. */
.post-overlay { color:#235c70; background:linear-gradient(135deg,#edfdfd,#d9f3f4 52%,#e9fbef); }
.overlay-scrim { position:fixed; background:radial-gradient(circle at 7% 8%,rgba(255,255,255,.94),transparent 22%),radial-gradient(circle at 92% 12%,rgba(206,255,179,.36),transparent 25%),linear-gradient(135deg,rgba(212,247,248,.84),rgba(232,252,244,.88)); }
.overlay-shell { padding:clamp(82px,9vw,118px) clamp(16px,5vw,74px) 54px; }
.overlay-close { top:18px; right:clamp(16px,4vw,54px); padding:9px 12px; border:1px solid rgba(75,151,168,.2); border-radius:999px; color:#236278; background:rgba(248,255,255,.68); box-shadow:0 5px 14px rgba(14,93,118,.1),inset 0 1px rgba(255,255,255,.9); backdrop-filter:blur(12px); font-size:19px; }
.overlay-close span { color:#336f82; font-size:9px; }
.reader-post { width:min(100%,860px); margin:0 auto; }
.reader-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:0 4px 22px; }
.reader-meta { display:flex; flex-wrap:wrap; gap:9px; margin:0; color:#5c8c9c; font:600 9px 'DM Mono',monospace; letter-spacing:.1em; }
.reader-meta span + span:before { content:'·'; margin-right:9px; color:#91b6be; }
.reader-description { max-width:620px; margin:12px 0 0; color:#205c70; font:600 clamp(1.35rem,2.8vw,2.35rem)/1.08 'Space Grotesk',sans-serif; letter-spacing:-.055em; }
.reader-album-name { max-width:620px; margin:12px 0 0; color:#1b657b; font:600 clamp(2rem,4.3vw,3.55rem)/.96 'Space Grotesk',sans-serif; letter-spacing:-.07em; }
.reader-record-label { margin:16px 0 0; color:#6998a4; font:600 9px 'DM Mono',monospace; letter-spacing:.13em; }
.reader-artist-name { margin:12px 0 0; color:#3d788b; font:600 10px 'DM Mono',monospace; letter-spacing:.1em; }
.reader-note { display:grid; gap:5px; max-width:620px; margin:18px 0 0; color:#4f8090; font:500 13px/1.55 'DM Mono',monospace; }
.reader-note span { color:#7da5ae; font:600 8px 'DM Mono',monospace; letter-spacing:.13em; }
.reader-album-name + .reader-description { margin-top:12px; color:#4f8090; font-size:clamp(1.05rem,1.7vw,1.35rem); letter-spacing:-.035em; }
.reader-count { flex:0 0 auto; margin:2px 0 0; padding:7px 9px; border:1px solid rgba(76,153,170,.18); border-radius:999px; color:#4f8190; background:rgba(255,255,255,.46); font:600 8px 'DM Mono',monospace; letter-spacing:.09em; }
.reader-scorecard { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; margin:0 0 18px; padding:13px 15px; border:1px solid rgba(75,155,173,.19); border-radius:17px; background:rgba(255,255,255,.47); box-shadow:inset 0 1px rgba(255,255,255,.85); }
.reader-overall { display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:4px; align-items:end; min-width:72px; padding-right:15px; border-right:1px solid rgba(75,155,173,.17); }
.reader-overall span { grid-column:1 / -1; color:#729da9; font:600 8px 'DM Mono',monospace; letter-spacing:.11em; }
.reader-overall strong { color:#1a7086; font:600 25px/.9 'Space Grotesk',sans-serif; letter-spacing:-.07em; }
.reader-overall small { padding-bottom:1px; color:#5c8b98; font:600 8px 'DM Mono',monospace; }
.reader-rating-breakdown { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 14px; }
.reader-rating-breakdown div { display:flex; align-items:baseline; justify-content:space-between; gap:5px; min-width:0; }
.reader-rating-breakdown span { overflow:hidden; color:#6c98a4; font:600 8px 'DM Mono',monospace; letter-spacing:.055em; text-overflow:ellipsis; white-space:nowrap; }
.reader-rating-breakdown strong { flex:0 0 auto; color:#286f83; font:600 13px/1 'Space Grotesk',sans-serif; letter-spacing:-.04em; }
.reader-images { display:grid; gap:18px; }
.reader-photo { display:grid; place-items:center; margin:0; overflow:hidden; border:1px solid rgba(75,155,173,.2); border-radius:18px; background:rgba(255,255,255,.58); box-shadow:0 10px 24px rgba(17,97,120,.11),inset 0 1px rgba(255,255,255,.9); }
.reader-photo button { display:inline-block; width:auto; max-width:100%; padding:0; overflow:hidden; background:transparent; cursor:zoom-in; }
.reader-photo img { display:block; width:auto; max-width:100%; height:auto; max-height:none; object-fit:contain; background:linear-gradient(135deg,#dff7f7,#e9fbee); transition:filter .25s ease,transform .35s ease; }
.reader-photo button:hover img { filter:saturate(1.04) contrast(1.01); transform:scale(1.008); }
.reader-photo button:focus-visible { outline:3px solid rgba(35,153,180,.55); outline-offset:-4px; }
.album-showcase { display:grid; place-items:center; margin:0 0 18px; padding:clamp(16px,3vw,28px); border:1px solid rgba(75,155,173,.18); border-radius:24px; background:radial-gradient(circle at 50% 0,rgba(224,255,191,.5),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.57),rgba(211,244,244,.46)); box-shadow:inset 0 1px rgba(255,255,255,.9); }
.album-art { max-width:100%; margin:0; overflow:hidden; border:1px solid rgba(75,155,173,.22); border-radius:15px; background:#d9eeee; box-shadow:0 15px 32px rgba(17,97,120,.17); }
.album-art button { display:block; width:auto; max-width:100%; padding:0; background:transparent; cursor:zoom-in; }
.album-art img { display:block; width:auto; max-width:100%; height:auto; }
.album-art button:focus-visible { outline:3px solid rgba(35,153,180,.55); outline-offset:-4px; }
.reader-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 3px 0; }
.reader-rating { margin:0; color:#5a8794; font:600 9px 'DM Mono',monospace; letter-spacing:.1em; }
.reader-rating strong { color:#1a748a; font:600 17px/1 'Space Grotesk',sans-serif; letter-spacing:-.05em; }
.reader-footer .post-switcher { gap:6px; }
.reader-footer .post-switcher button { padding:9px 11px; border-color:rgba(75,151,168,.2); color:#3e7588; background:rgba(255,255,255,.48); font-size:8px; }
.reader-footer .post-switcher button:hover { color:#174f64; background:#dcff81; }

@media (max-width:620px) {
  .overlay-shell { padding:80px 13px 35px; }
  .reader-header { gap:14px; padding:0 2px 16px; }
  .reader-description { margin-top:9px; font-size:1.45rem; }
  .reader-album-name { margin-top:9px; font-size:2.1rem; }
  .reader-count { padding:6px 7px; font-size:7px; }
  .reader-scorecard { grid-template-columns:1fr; gap:13px; padding:14px; }
  .reader-overall { width:max-content; padding:0; border:0; }
  .reader-rating-breakdown { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; }
  .reader-images { gap:12px; }
  .reader-photo { border-radius:14px; }
  .reader-footer { align-items:flex-start; flex-direction:column; padding-top:16px; }
  .music-detail-fields { grid-template-columns:1fr; }
  .art-lookup-row { align-items:flex-start; flex-direction:column; }
  #musicLookupMessage { text-align:left; }
  .reader-footer .post-switcher { align-self:flex-end; }
}

/* Startup copy settles into focus in place; it never travels through nearby UI. */
.hero-title .reveal-word { transform:none; opacity:0; filter:blur(7px); animation:hero-word-settle .62s calc(var(--word, 0) * .1s + .45s) ease-out forwards; }
.reveal { transform:none; opacity:0; filter:blur(5px); animation:hero-copy-settle .55s .36s ease-out forwards; }
.hero-topline { animation-delay:.28s; }
.hero-bottom { animation-delay:.86s; }
body[data-page="log"] .dashboard-cta { transform:scale(.97); filter:blur(5px); animation:dashboard-settle .6s 1.02s ease-out forwards; }
body[data-page="log"] .dashboard-cta:nth-child(2) { animation-delay:1.12s; }
@keyframes hero-word-settle { to { opacity:1; filter:blur(0); } }
@keyframes hero-copy-settle { to { opacity:1; filter:blur(0); } }
@keyframes dashboard-settle { to { opacity:1; transform:scale(1); filter:blur(0); } }

/* Public feed: straightforward cards whose point is clear before opening them. */
.post-feed { width:min(100%,1160px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:0 auto; padding-top:clamp(34px,5vw,66px); }
.post-card,.post-card:nth-child(n) { display:grid; grid-template-columns:minmax(145px,42%) minmax(0,1fr); min-height:208px; grid-column:auto; margin:0; aspect-ratio:auto; overflow:hidden; border:1px solid rgba(75,151,168,.2); border-radius:19px; background:rgba(250,255,255,.68); box-shadow:0 10px 24px rgba(17,97,120,.1),inset 0 1px rgba(255,255,255,.9); transform:translateY(16px); opacity:0; transition:transform .35s ease,box-shadow .35s ease,opacity .45s ease; }
.post-card.in-view { transform:translateY(0); opacity:1; }
.post-card:hover { transform:translateY(-2px); box-shadow:0 16px 31px rgba(17,97,120,.15),inset 0 1px rgba(255,255,255,.9); }
.post-images { position:relative; inset:auto; grid-column:1; grid-row:1; display:block; overflow:hidden; background:#c9eceb; }
.post-images.multi-2,.post-images.multi-3 { display:block; }
.post-images img { display:none; width:100%; height:100%; min-height:208px; object-fit:cover; transform:none; filter:saturate(.94) contrast(.98); transition:transform .4s ease,filter .4s ease; }
.post-images img:first-child { display:block; }
.post-card:hover .post-images img:first-child { transform:scale(1.025); filter:saturate(1.02) contrast(1); }
.post-images:after { background:linear-gradient(180deg,rgba(4,69,91,.35),transparent 43%); }
.card-gloss { display:none; }
.post-ui { top:0; left:0; right:auto; width:42%; padding:11px; color:#f6ffff; text-shadow:0 1px 7px rgba(0,53,72,.5); pointer-events:none; }
.post-index,.post-category { font-size:8px; letter-spacing:.08em; }
.post-index { padding-top:5px; }
.post-category { padding:5px 7px; border-color:rgba(255,255,255,.58); background:rgba(7,73,95,.33); }
.open-mark { display:none; }
.post-caption { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; min-width:0; padding:22px 22px 20px; color:#205b70; transform:none; transition:none; }
.post-card:hover .post-caption { transform:none; }
.post-album-name { margin:0 0 6px; color:#1a687f; font:600 clamp(1.2rem,1.9vw,1.62rem)/1.05 'Space Grotesk',sans-serif; letter-spacing:-.06em; }
.post-artist-name { margin:0 0 10px; color:#4d8191; font:600 9px 'DM Mono',monospace; letter-spacing:.09em; }
.post-description { max-width:none; margin:0 0 16px; color:#205b70; font:600 clamp(1.05rem,1.6vw,1.35rem)/1.18 'Space Grotesk',sans-serif; letter-spacing:-.045em; text-shadow:none; }
.post-album-name:not([hidden]) ~ .post-description { margin-bottom:14px; color:#598896; font:500 12px/1.38 'DM Mono',monospace; letter-spacing:0; }
.post-description:empty { min-height:0; }
.post-meta { display:grid; justify-content:start; gap:5px; color:#5d8d9a; font:600 9px/1.3 'DM Mono',monospace; letter-spacing:.075em; }
.post-rating:empty { display:none; }
.post-open { z-index:6; }
.post-open:focus-visible { outline:3px solid #4aaec4; outline-offset:-3px; }

@media (max-width:760px) {
  .post-feed { grid-template-columns:1fr; gap:13px; padding-top:34px; }
  .post-card,.post-card:nth-child(n) { grid-template-columns:1fr; min-height:0; border-radius:16px; }
  .post-images { grid-column:1; grid-row:1; min-height:184px; }
  .post-images img { min-height:184px; }
  .post-ui { width:100%; padding:10px; }
  .post-index { display:block; }
  .post-caption { grid-column:1; grid-row:2; min-height:132px; padding:17px 18px 18px; }
  .post-album-name { font-size:1.35rem; }
  .post-description { margin-bottom:12px; font-size:1.08rem; }
  .post-meta { font-size:8px; }
}