:root { --background:#080611; --foreground:#f7edff; --primary:#e2ff8d; --primary-foreground:#080611; --border:#625274; --input:#625274; --ring:#e2ff8d; --accent:#372145; --accent-foreground:#ffffff; --radius:0; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--background); color:var(--foreground); font-family:Arial,Helvetica,sans-serif; }
.screensaver { position:relative; height:100svh; min-height:320px; overflow:hidden; isolation:isolate; }
.wallpaper { position:absolute; inset:0; z-index:-3; background-repeat:repeat; background-size:180px auto; background-position:center; }
.shade { position:absolute; inset:0; z-index:-2; background:radial-gradient(ellipse at center,transparent 15%,#08031190 100%),linear-gradient(#08061150,#08061115 50%,#08061180); pointer-events:none; }
.topbar { position:absolute; z-index:2; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:25px 32px; }
.wordmark { font-weight:950; font-size:31px; letter-spacing:-2px; font-style:italic; color:#e5f7c4; }
.wordmark span { display:inline-block; vertical-align:top; font:12px monospace; margin:6px 0 0 4px; }
.edition,.year { font:12px 'Courier New',monospace; letter-spacing:1.6px; text-shadow:0 1px 5px #000; }
.edition { color:#c9b5df; }.year { color:#e5f7c4; }
.stage { position:absolute; inset:92px 18px 18px; }
.floating-logo { position:absolute; top:0; left:0; width:max-content; max-width:100%; margin:0; padding:14px 24px 22px 12px; display:flex; flex-direction:column; align-items:flex-start; will-change:transform; font-family:'Arial Black',Arial,Helvetica,sans-serif; font-style:italic; font-weight:1000; letter-spacing:-.075em; line-height:.93; user-select:none; color:#efffc8; filter:drop-shadow(0 0 3px #f91afd) drop-shadow(0 0 15px #ef19fb90); }
.logo-small { font-size:clamp(38px,5.6vw,80px); margin-left:.08em; -webkit-text-stroke:1px #fbadff; text-shadow:3px 3px #d609d2,5px 5px #51056b; }
.logo-large { font-size:clamp(28px,7.5vw,112px); white-space:nowrap; background:linear-gradient(#fcffe8 12%,#e9ffc9 36%,#b7ff43 46%,#e4a5ff 48%,#ffdcff 64%,#ff7fec 90%); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-stroke:1px #f4b9ff; filter:drop-shadow(3px 3px 0 #d010cf) drop-shadow(3px 3px 0 #4e075a); }
@media(max-width:640px) { .topbar { padding:20px; flex-wrap:wrap; gap:12px; }.edition { order:3; width:100%; text-align:center; }.year { font-size:12px; }.stage { inset:115px 8px 12px; }.floating-logo { padding:12px 18px 20px 8px; }.logo-large { font-size:7.25vw; }.wallpaper { background-size:140px auto; } }
@media(max-height:450px) { .topbar { padding:10px 20px; }.stage { inset:95px 10px 12px; }.logo-small { font-size:30px; }.logo-large { font-size:min(7vw,64px); } }

/* The clickable area stays full-size as the lettering wears away. */
.logo-button { display:block; appearance:none; border:0; background:none; margin:0; padding:0; color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit; text-align:left; cursor:pointer; touch-action:manipulation; }
.logo-button:focus-visible { outline:2px solid #e2ff8d; outline-offset:8px; }
.logo-art { display:flex; flex-direction:column; align-items:flex-start; transform-origin:center; pointer-events:none; transition:opacity 180ms linear, filter 180ms linear, transform 180ms linear; }
.celebration { position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; pointer-events:none; background:#080611b8; transition:opacity 600ms ease; }
.celebration.visible { opacity:1; visibility:visible; }
.celebration-message { max-width:19ch; margin:0; color:#f0ffd1; font-family:'Arial Black',Arial,Helvetica,sans-serif; font-size:clamp(2rem,7vw,6rem); font-weight:900; line-height:1.12; text-align:center; text-wrap:balance; text-shadow:0 0 12px #ea36df,0 0 35px #a515b0; }
.happy-emoji { display:block; margin-top:0.25em; font-style:normal; text-shadow:none; }
@media(prefers-reduced-motion:reduce) { .logo-art,.celebration { transition:none; } }

/* Transparent links follow the pants on every repeated wallpaper tile. */
.wallpaper-hotspots { position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; pointer-events:none; will-change:transform; }
.pants-link { position:absolute; display:block; cursor:pointer; touch-action:manipulation; clip-path:polygon(25.0000% 65.1639%, 33.5106% 66.8033%, 43.6170% 66.8033%, 49.7340% 65.1639%, 50.7979% 80.9426%, 39.6277% 80.9426%, 36.1702% 72.9508%, 33.7766% 80.9426%, 23.4043% 80.9426%, 23.6702% 72.1311%); }
.pants-link:focus-visible { outline:none; background:#d6ff7955; }
.stage,.topbar { pointer-events:none; }
.logo-button { pointer-events:auto; }
.celebration.visible { pointer-events:auto; }