:root { --navy: #140052; --red: #C0161E; --ink: #1d1d2b; --muted: #5b5b72; --bg: #f6f6fb; --card: rgba(255,255,255,.92); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
#fireworks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; display: none; }
#fireworks.on { display: block; }
.wrap { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 16px; }
.brand { text-align: center; padding: 8px 0 16px; }
.brand img { max-width: 60%; height: auto; }
.card { background: var(--card); border-radius: 14px; box-shadow: 0 2px 12px rgba(20,0,82,.08); padding: 16px 18px; margin-bottom: 14px; }
.hero { text-align: center; }
.label { margin: 0; color: var(--muted); font-size: 1.05rem; }
.ip { margin: 4px 0 12px; font-size: clamp(1.4rem, 7vw, 2.6rem); font-weight: 700; color: var(--navy); word-break: break-all; font-variant-numeric: tabular-nums; }
.copy { font: inherit; font-weight: 600; color: #fff; background: var(--navy); border: 0; border-radius: 999px; padding: 10px 26px; cursor: pointer; min-height: 44px; }
.copy:hover, .copy:focus-visible { background: var(--red); outline: none; }
.thanks { border-left: 5px solid var(--red); }
.thanks h2 { margin: 0 0 6px; font-size: 1.25rem; color: var(--navy); }
.thanks p { margin: 6px 0; }
.small { font-size: .85rem; color: var(--muted); }
.details { width: 100%; border-collapse: collapse; }
.details th { text-align: left; font-weight: 600; color: var(--muted); padding: 8px 10px 8px 0; width: 42%; vertical-align: top; }
.details td { padding: 8px 0; word-break: break-all; }
.details tr + tr th, .details tr + tr td { border-top: 1px solid #ececf4; }
.ok { color: #13703a; }
.fail { color: var(--red); }
.cli code { background: #ececf4; padding: 2px 6px; border-radius: 6px; }
footer { text-align: center; font-size: .8rem; color: var(--muted); padding: 8px 0 24px; }
footer a { color: var(--navy); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-color-scheme: dark) { /* page is intentionally light (brand); nothing here */ }