:root{ --bg:#73388c; --accent:#a9ca2e; --pad:clamp(16px,4vw,32px); --maxw:960px; --e1:cubic-bezier(.2,.8,.2,1) }
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; background:var(--bg); color:#231f20; font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif; display:flex; min-height:100svh; flex-direction:column }
::selection, ::-moz-selection{ background:var(--accent); color:#000 }
a{ color:#fff; text-decoration:none } a:hover{ color:var(--accent) } a:focus-visible{ outline:2px solid #fff; outline-offset:2px }
/* sr-only utility so icon labels are not visible */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Loader */
#loader{ position:fixed; inset:0; background:#231f20; display:grid; place-items:center; z-index:1000; transition:opacity .45s var(--e1), visibility .45s var(--e1) }
#loader.hidden{ opacity:0; visibility:hidden }
.loader-chip{ width:84px; height:84px; position:relative }
.loader-chip:before, .loader-chip:after{ content:""; position:absolute; inset:0; border:8px solid #a9ca2e; border-radius:12px; animation:chipspin 1.2s linear infinite }
.loader-chip:after{ inset:10px; animation-direction:reverse }
@keyframes chipspin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }

/* Layout */
main{ flex:1; display:grid; place-items:center; padding:var(--pad) }
.container{ width:100%; max-width:var(--maxw); text-align:center }

/* Header */
header{ position:fixed; top:0; right:0; left:0; display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:12px var(--pad); z-index:40 }
.audio-btn{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.12); transition:transform .18s var(--e1), color .2s var(--e1), background .2s var(--e1) }
.audio-btn i{ font-size:16px; color:#fff }
.audio-btn:hover{ transform:translateY(-1px) }

.lang-wrap{ position:relative }
.lang-toggle{ color:#fff; font-weight:700; background:rgba(255,255,255,.12); padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.5); letter-spacing:.04em; font-size:14px; display:inline-flex; align-items:center; gap:8px; transition:transform .18s var(--e1), background .2s var(--e1), color .2s var(--e1) }
.lang-toggle:hover{ transform:translateY(-1px) }
.lang-list{ position:absolute; top:100%; right:0; margin-top:8px; list-style:none; padding:8px; background:rgba(23,23,23,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); border-radius:12px; display:none }
.lang-wrap.open .lang-list{ display:block }
.lang-list a{ display:block; padding:8px 12px; color:#fff; border-radius:8px }
.lang-list a[aria-current="true"]{ font-weight:800 }
.lang-list a:hover{ background:rgba(255,255,255,.12); color:var(--accent) }

/* Wobble */
@keyframes wobble{ 0%,100%{ transform:translateY(0) rotate(0) } 25%{ transform:translateY(-6px) rotate(-2deg) } 50%{ transform:translateY(3px) rotate(2.2deg) } 75%{ transform:translateY(-5px) rotate(-1.6deg) } }
.wobble{ animation:wobble 2.1s ease-in-out infinite; will-change:transform }

/* Typography */
h1{ margin:0 0 .45em; font-size:clamp(40px,7.6vw,76px); color:#fff; letter-spacing:.02em; text-shadow:0 1px 0 rgba(0,0,0,.35); font-weight:900 }
p.lead{ margin:.5em auto .9em; max-width:60ch; line-height:1.65; font-size:clamp(16px,2.6vw,21px); color:rgba(255,255,255,.96); font-weight:600 }
.press-line{ margin:.2em auto 1.2em; font-size:clamp(17px, 2.8vw, 22px); color:#fff }
:lang(en) .press-line{ font-family:"Source Code Pro", monospace }
.press-link{ font-weight:700; text-decoration:none; border-bottom:6px solid #a9ca2e; padding-bottom:1px }
.press-link:hover{ color:#a9ca2e; border-bottom-color:#fff }

/* Icons */
.icons-top, .icons-bottom{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px }
.icons-top{ margin:32px auto 18px }
.icon{ width:52px; height:52px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); transition:transform .18s var(--e1), background .2s var(--e1) }
.icon i{ font-size:26px; color:#fff; transition:color .18s var(--e1) }
.icon:hover{ transform:translateY(-2px) scale(1.06); background:rgba(255,255,255,.16) }
.icon:hover i{ color:#a9ca2e }

.bottom-icons-wrap{ width:100%; display:flex; justify-content:center; padding:0 var(--pad); margin:12px 0 8px }
.icons-bottom{ width:100%; max-width:var(--maxw); margin:0 auto 10px }
.icons-bottom .icon{ width:39px; height:39px }
.icons-bottom .icon i{ font-size:20px }

/* Footer */
footer{ color:rgba(255,255,255,.9); text-align:center; padding:20px var(--pad) 28px; font-size:13px }
footer a{ color:#fff } footer a:hover{ color:var(--accent) }

/* Fireflies */
.firefly{ position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%; background:#fff; opacity:.8; box-shadow:0 0 8px rgba(255,255,255,.9), 0 0 14px rgba(255,255,255,.7); pointer-events:none; z-index:5; animation: drift var(--dur) linear infinite, flicker calc(var(--dur)/2) ease-in-out infinite alternate }
@keyframes drift{ from{ transform:translate3d(var(--x-start),var(--y-start),0) } to{ transform:translate3d(var(--x-end),var(--y-end),0) } }
@keyframes flicker{ from{ opacity:.35 } to{ opacity:1 } }

/* Fonts */
@font-face{ font-family:"MPMain"; src:url("/assets/fonts/main/main.woff2") format("woff2"), url("/assets/fonts/main/main.woff") format("woff"); font-weight:400 900; font-style:normal; font-display:swap }
:lang(en) h1{ font-family:"MPMain","Source Sans Pro","Montserrat",Arial,sans-serif }
:lang(en) p, :lang(en) .lead{ font-family:"Montserrat","Source Sans Pro",Arial,sans-serif }
:lang(ja),:lang(zh),:lang(ko),:lang(fr),:lang(es),:lang(de),:lang(pt-br),:lang(ru),:lang(uk){ font-family:"Noto Sans",system-ui,"Apple SD Gothic Neo","Segoe UI",Arial,sans-serif }

/* Make sure Font Awesome's font-family is not overridden */
.fa, .fas, .far, .fal, .fat, .fa-solid, .fa-regular{ font-family:"Font Awesome 7 Free","Font Awesome 6 Free"; font-weight:900 }
.fab, .fa-brands{ font-family:"Font Awesome 7 Brands","Font Awesome 6 Brands"; font-weight:400 }

/* 404 bigger + animated */
.is-404 h1{ font-size:clamp(72px,16vw,144px) }           /* ~2x */
html.is-404:lang(en) h1{ font-size:clamp(160px,32vw,304px) }  /* ~4x for EN */
.is-404 h1.wobble{ animation:wobble 2.1s ease-in-out infinite }

@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } .firefly{ display:none } }