:root { color-scheme: light; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: linear-gradient(180deg, #f3fbfc, #fff); color: #0f172a; }
main { width: min(calc(100% - 32px), 900px); margin: 48px auto; padding: 40px; border: 1px solid #d7e3ee; border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 22px 54px rgba(15,49,66,.12); }
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(145deg,#06748c,#0a9bb7); color: white; }
.mark svg { width: 43px; height: 43px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mark rect { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.28); }
.brand strong { display: block; font-size: 22px; line-height: 26px; }
.brand small { display: block; margin-top: 3px; color: #64748b; font-size: 14px; }
h1 { margin: 0 0 18px; font-size: clamp(32px,6vw,52px); line-height: 1.05; letter-spacing: -.04em; }
p { color: #64748b; font-size: 17px; line-height: 1.7; }
.notice { margin: 28px 0; padding: 18px 20px; border-radius: 18px; background: #eef9fb; color: #087c96; }
a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 15px; background: linear-gradient(135deg,#06748c,#0a9bb7); color: white; text-decoration: none; font-weight: 750; }
@media (max-width: 600px) { main { margin: 16px auto; padding: 24px 20px; border-radius: 22px; } }