:root { color-scheme: dark; font-family: "Noto Sans SC", sans-serif; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; color: #f7f4ff; background: #0d1020; }
.noise { position: fixed; inset: 0; opacity: .13; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.aurora { position: fixed; width: 48vw; height: 48vw; border-radius: 999px; filter: blur(90px); opacity: .35; pointer-events: none; animation: float 13s ease-in-out infinite alternate; }
.aurora-one { top: -18vw; left: -12vw; background: #6d51d9; }
.aurora-two { right: -16vw; bottom: -17vw; background: #d466aa; animation-delay: -6s; }
.page-shell { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 36px 18px 25px; }
.home-card { width: min(760px, 100%); position: relative; overflow: hidden; padding: 19px 42px 25px; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: linear-gradient(135deg, rgba(32,37,66,.86), rgba(16,19,36,.89)); box-shadow: 0 28px 90px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(20px); }
.home-card::before { content: ""; position: absolute; top: -1px; right: 11%; width: 140px; height: 2px; background: linear-gradient(90deg, transparent, #f3c1e4, transparent); }
.card-topline { display: flex; align-items: center; gap: 8px; padding-bottom: 21px; color: rgba(229,225,246,.62); font: 500 10px/1 "DM Mono", monospace; letter-spacing: .14em; }
.card-topline time { margin-left: auto; letter-spacing: .08em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #8ce5bb; box-shadow: 0 0 12px #8ce5bb; }
.hero { text-align: center; padding: 10px 0 29px; }
.avatar-wrap { width: 94px; height: 94px; position: relative; display: grid; place-items: center; margin: 0 auto 17px; }
.avatar-ring { position: absolute; inset: 0; border: 1px solid rgba(241,196,227,.6); border-radius: 50%; animation: spin 11s linear infinite; }
.avatar-ring::before, .avatar-ring::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #f6cae5; box-shadow: 0 0 9px #ffd2ed; }
.avatar-ring::before { top: 2px; left: 50%; }.avatar-ring::after { bottom: 2px; right: 50%; }
.avatar { display: block; width: 78px; height: 78px; border-radius: 50%; object-fit: cover; background: #f7d5ea; box-shadow: inset 0 0 0 4px rgba(255,255,255,.5), 0 10px 25px rgba(0,0,0,.25); }
.eyebrow { margin: 0 0 6px; color: #e7aace; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .29em; }
h1 { margin: 0; font: 700 clamp(46px, 10vw, 67px)/.98 "Playfair Display", serif; letter-spacing: -.05em; }.title-mark { color: #f2b8dd; }
.intro { margin: 14px 0 5px; font-size: 17px; font-weight: 600; letter-spacing: .02em; }.tagline { margin: 0; color: rgba(220,216,238,.57); font: 400 11px/1.4 "DM Mono", monospace; letter-spacing: .08em; }
.links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.link-card:last-child { grid-column: 1 / -1; }
.link-card { min-height: 76px; display: flex; align-items: center; gap: 13px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.10); border-radius: 16px; color: #f6f4fb; text-decoration: none; background: rgba(255,255,255,.035); transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease; }.link-card:hover { transform: translateY(-3px); border-color: rgba(239,187,222,.7); background: rgba(255,255,255,.09); box-shadow: 0 12px 25px rgba(0,0,0,.16); }.link-card.featured { border-color: rgba(222,157,206,.43); background: linear-gradient(115deg, rgba(155,95,172,.28), rgba(255,255,255,.05)); }.link-card.pending { opacity: .72; }.link-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #f4c6e2; background: rgba(241,185,220,.11); font-size: 18px; }.link-copy { display: grid; gap: 3px; }.link-copy b { font-size: 15px; letter-spacing: .02em; }.link-copy small { color: rgba(221,216,240,.55); font-size: 11px; }.arrow { margin-left: auto; color: #eab7d9; font-size: 20px; transition: transform .24s ease; }.link-card:hover .arrow { transform: translate(2px,-2px); }
footer { display: flex; justify-content: center; gap: 12px; margin-top: 23px; color: rgba(220,216,240,.44); font: 400 10px/1 "DM Mono", monospace; letter-spacing: .05em; } footer a { color: inherit; text-decoration: none; transition: color .2s ease; } footer a:hover { color: #f0bedf; } .footer-star { color: #e5a8ce; }.hint { margin: 17px 0 0; color: rgba(235,231,247,.35); font: 400 9px/1 "DM Mono", monospace; letter-spacing: .17em; }
@keyframes float { to { transform: translate(8vw, 7vh) scale(1.15); } } @keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .page-shell { padding: 16px 12px; }.home-card { padding: 18px 20px 22px; border-radius: 22px; }.hero { padding-top: 5px; }.links-grid { grid-template-columns: 1fr; }.link-card:last-child { grid-column: auto; }.intro { font-size: 15px; }.tagline { font-size: 9px; }.card-topline { font-size: 8px; } }