:root { --ice: #b7d8f4; --ice-deep: #668ab7; --ink: #07090d; }
* { box-sizing: border-box; }
html { background: var(--ink); }
body { min-width: 320px; }
.winter-canvas { background: radial-gradient(circle at 16% 18%, rgba(140, 174, 226, .18), transparent 28rem), radial-gradient(circle at 86% 84%, rgba(151, 222, 225, .12), transparent 26rem), #07090d; }
.snowflake { position: absolute; top: -12px; width: 3px; height: 3px; border-radius: 999px; background: rgba(237, 248, 255, .82); animation: snowfall linear infinite; }
@keyframes snowfall { from { transform: translate3d(0, -5vh, 0); opacity: 0; } 10%, 88% { opacity: .75; } to { transform: translate3d(35px, 110vh, 0); opacity: 0; } }
.glass { background: rgba(12, 16, 23, .79); border: 1px solid rgba(183, 216, 244, .19); box-shadow: 0 24px 70px rgba(0, 0, 0, .48); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.frost-link { position: relative; overflow: hidden; }
.frost-link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 5%, rgba(183, 216, 244, .13) 45%, transparent 65%); transform: translateX(-115%); transition: transform .45s cubic-bezier(.23, 1, .32, 1); }
.frost-link:hover::before, .frost-link:focus-visible::before { transform: translateX(115%); }
.status-online { background: #45c77b; } .status-idle { background: #f0a83a; } .status-offline { background: #76808f; }
.avatar-float { animation: avatar-float 6s ease-in-out infinite; } @keyframes avatar-float { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media (max-width: 640px) { .snowflake:nth-child(n+13) { display: none; } }