:root{--bg:#0a1b3d;--text:#f2fbff;--muted:#cfe6f5;--accent:#7fe3ff;--display:"Zen Maru Gothic","Segoe UI",system-ui,sans-serif;--body:"Zen Maru Gothic","Segoe UI",system-ui,sans-serif;--h1-ls:.01em;--grade:saturate(1.1);
--scrim:linear-gradient(180deg,rgba(8,30,80,.15),rgba(6,22,66,.55) 60%,rgba(6,20,60,.85));--cycle:60s;--n:6;--fade:fade6}
@keyframes fade6{0%{opacity:0}6%{opacity:1}22.8%{opacity:1}23.4%{opacity:0}100%{opacity:0}}
.panel{padding:clamp(1.1rem,3.2vw,2rem) clamp(1.3rem,3.6vw,2.4rem);border-radius:26px;background:rgba(8,34,86,.58);border:1px solid rgba(160,230,255,.45);box-shadow:0 12px 50px rgba(0,30,90,.45),inset 0 0 30px rgba(127,227,255,.12);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);max-width:42rem}
h1{text-shadow:0 2px 24px rgba(127,227,255,.5)}
.rule{border-radius:3px;background:linear-gradient(90deg,#7fe3ff,#b9a6ff)}
.motes i{position:absolute;bottom:-5%;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(127,227,255,.2) 70%,transparent);animation:rise 16s linear infinite;opacity:.8}
.motes i:nth-child(1){left:6%}.motes i:nth-child(2){left:16%;animation-delay:-5s;width:12px;height:12px}.motes i:nth-child(3){left:27%;animation-delay:-9s}.motes i:nth-child(4){left:38%;animation-delay:-2s;animation-duration:20s}.motes i:nth-child(5){left:49%;animation-delay:-12s;width:6px;height:6px}.motes i:nth-child(6){left:61%;animation-delay:-7s;width:11px;height:11px}.motes i:nth-child(7){left:72%;animation-delay:-14s}.motes i:nth-child(8){left:83%;animation-delay:-3s;animation-duration:19s}.motes i:nth-child(9){left:91%;animation-delay:-10s;width:7px;height:7px}.motes i:nth-child(10){left:44%;animation-delay:-16s;width:9px;height:9px}
@keyframes rise{to{transform:translate(30px,-115vh)}}
@media (prefers-reduced-motion:reduce){.motes{display:none}}