:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #fff; background: #111b25; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; background: linear-gradient(180deg, #101923aa, #10192388 65%, #0c141ee8), url('./landscape.svg') center / cover fixed; }
.page { width: min(100%, 480px); margin: auto; padding: max(36px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
.heading { text-align: center; padding: 0 0 28px; }
h1 { margin: 0; font-size: clamp(25px, 7.2vw, 32px); letter-spacing: 3px; line-height: 1.5; font-weight: 750; }
.heading p { margin: 0; font-size: 21px; line-height: 1.6; color: #c1d9ed; overflow-wrap: anywhere; }
.links { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.entry { width: 100%; min-height: 64px; padding: 18px 16px; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; text-decoration: none; font: inherit; text-align: left; cursor: pointer; transition: filter .16s, transform .16s; }
.entry strong { font-size: clamp(16px, 4.4vw, 20px); line-height: 1.45; font-weight: 700; overflow-wrap: anywhere; }
.entry span { flex-shrink: 0; font-size: 13px; color: #fff; }
.links li:nth-child(5n+1) .entry { background: linear-gradient(110deg, #7051f1, #5833ce); }
.links li:nth-child(5n+2) .entry { background: linear-gradient(110deg, #7927c9, #551997); }
.links li:nth-child(5n+3) .entry { background: linear-gradient(110deg, #d91c85, #b60d62); }
.links li:nth-child(5n+4) .entry { background: linear-gradient(110deg, #087e82, #086c70); }
.links li:nth-child(5n+5) .entry { background: linear-gradient(110deg, #a85c00, #8c4b00); }
.entry:hover { filter: brightness(1.12); }
.entry:active { transform: scale(.985); }
:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.banner { display: block; margin-top: 24px; overflow: hidden; border-radius: 14px; background: #183847; }
.banner[hidden] { display: none; }
.banner img { display: block; width: 100%; height: auto; }
footer { margin-top: 24px; text-align: center; font-size: 11px; color: #c0cbd5; letter-spacing: 1px; }
.notice { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 2; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 12px 20px; border: 1px solid #ffffff33; border-radius: 10px; background: #101923f5; color: #fff; font-size: 14px; pointer-events: none; }
.notice:empty { display: none; }
.fallback { text-align: center; }
@media (min-width: 768px) { .page { padding-top: 56px; padding-bottom: 40px; } }
@media (prefers-reduced-motion: reduce) { .entry { transition: none; } }