@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('./font.83dd0faee2a90a0a.woff2') format('woff2'); }
:root { color-scheme: dark; background: #08090a; color: #efefef; font-family: system-ui, 'Microsoft YaHei', sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px); background-size: 56px 56px; }
header, main, .site-footer { width: min(1040px, calc(100% - 64px)); margin-inline: auto; }
header { padding-block: 30px; border-bottom: 1px solid #292b2e; }
.brand { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -.025em; text-decoration: none; }
.brand::after { content: ''; display: inline-block; width: 8px; height: 8px; background: #3dd9ff; margin-left: 12px; }
main { flex: 1; padding-block: clamp(60px, 10vh, 120px); }
h1 { font-size: clamp(32px, 6vw, 58px); letter-spacing: .08em; margin: 0 0 24px; line-height: 1.3; }
p { line-height: 1.8; overflow-wrap: anywhere; }
.lead { font-size: 18px; color: #a0a3a8; }
.group { display: inline-block; padding: 24px 34px; background: #3dd9ff; color: #08090a; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: clamp(26px, 7vw, 42px); letter-spacing: .08em; user-select: all; }
.back { margin-top: 30px; }
a { color: inherit; text-underline-offset: .25em; }
a:hover { color: #3dd9ff; }
a:focus-visible { outline: 2px solid #3dd9ff; outline-offset: 5px; }
.site-footer { padding-block: 22px 28px; border-top: 1px solid #34373b; color: #8a8d92; font-size: 12px; letter-spacing: .04em; }
.site-footer p { margin: 8px 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.police-beian { display: flex; align-items: center; gap: 8px; }
.police-icon-placeholder { width: 14px; height: 14px; flex: 0 0 14px; border: 1px dashed #55585d; }
.notice { padding: 24px; border: 1px solid #34373b; max-width: 760px; }
@media (max-width: 600px) { header, main, .site-footer { width: calc(100% - 40px); } main { padding-block: 64px; } .group { padding: 20px 25px; } }