:root{color-scheme:dark;--sky:#38bdf7;font-family:Poppins,Arial,sans-serif;background:#030303;color:#fff}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;min-height:100%}
body{background:#030303;-webkit-font-smoothing:antialiased}
.background{position:fixed;inset:0;pointer-events:none;overflow:hidden;background:#030303;box-shadow:inset 0 0 26px #38bdf755;z-index:0}
.background canvas{display:block;width:100%;height:100%}
.page{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;flex-direction:column;padding:33.8889svh 24px 9.4444svh;text-align:center}
.brand{margin:0;width:min(27.76vw,533px);aspect-ratio:533/196;line-height:0;position:relative;top:-5svh}
.brand img{display:block;width:85%;height:auto;margin-inline:auto}
.tagline{font-size:clamp(15px,1.5625vw,30px);font-weight:300;line-height:1.5;text-transform:uppercase;margin:1svh 0 0;white-space:nowrap}
.tagline em{color:var(--sky);font-weight:700}
@property --gradient-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.notice{--gradient-angle:0deg;position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;width:max-content;max-width:100%;min-height:44px;margin-top:auto;border:0;border-radius:100px;padding:10px 28px;font-weight:200;font-size:clamp(13px,1.0417vw,20px);line-height:1.5;background:linear-gradient(100deg,rgba(3,3,3,.25),rgba(17,38,47,.35));box-shadow:inset 0 0 0 1px #ffffff0e;animation:border-spin 2.5s linear infinite}
.notice::before{--gradient-angle:inherit;content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:2px;background:conic-gradient(from var(--gradient-angle),transparent 0%,#0ea5e9 5%,#38bdf8 15%,#0ea5e9 30%,transparent 40%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.notice::after{content:"";position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;z-index:0;background:linear-gradient(-50deg,transparent,#0ea5e9,transparent);mask-image:radial-gradient(circle at bottom,transparent 40%,black);opacity:.3;animation:shimmer 4s linear infinite;pointer-events:none}
.notice span{position:relative;z-index:1}
@keyframes border-spin{to{--gradient-angle:360deg}}
@keyframes shimmer{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:700px){.page{padding:29svh 24px 10svh;min-height:max(100svh,540px)}.brand{width:min(72vw,380px)}.tagline{white-space:normal;max-width:360px;font-size:clamp(14px,3.7vw,20px);margin-top:1svh}.tagline em{display:block}.notice{margin-top:auto;font-size:13px;min-height:40px;width:max-content;max-width:100%;padding:9px 24px}}
@media(max-height:600px) and (min-width:701px){.page{padding-top:20svh;min-height:480px}.brand{width:min(28vw,350px)}.tagline{margin-top:8px}.notice{margin-top:60px}}
@media(prefers-reduced-motion:reduce){.notice,.notice::after{animation:none}.notice{--gradient-angle:130deg}}


/* Reduce only the lettering, preserving the notice's layout dimensions. */
.notice span{transform:scale(.9);transform-origin:center}