:root { color-scheme: light; --ink:#17212b; --muted:#566473; --line:#d8e0e7; --brand:#123f68; --soft:#eef5fa; --warn:#fff3cd; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:#f6f8fa; }
main { width:min(1040px, calc(100% - 32px)); margin:40px auto 72px; }
header { background:var(--brand); color:white; padding:32px; border-radius:14px; }
h1 { margin:4px 0 12px; font-size:clamp(2rem, 5vw, 3.2rem); }
h2 { margin-top:0; }
.eyebrow { text-transform:uppercase; letter-spacing:.09em; font-weight:700; font-size:.78rem; }
nav { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
nav a { color:var(--brand); background:white; border:1px solid var(--line); border-radius:999px; padding:8px 14px; text-decoration:none; font-weight:700; }
.card { background:white; border:1px solid var(--line); border-radius:14px; padding:26px; margin:18px 0; box-shadow:0 6px 22px rgba(22,42,62,.06); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
label { display:grid; gap:6px; color:var(--muted); font-size:.92rem; font-weight:700; }
input { width:100%; border:1px solid #aebbc7; border-radius:8px; padding:11px 12px; font:inherit; color:var(--ink); }
input:focus { outline:3px solid #9fc7e5; border-color:var(--brand); }
.result { margin-top:18px; padding:18px; background:var(--soft); border-left:5px solid var(--brand); line-height:1.6; }
.result strong { color:var(--brand); }
.method { color:var(--muted); font-size:.9rem; }
.warning { background:var(--warn); padding:12px; border-radius:8px; }
.error { color:#9c1c1c; font-weight:700; }
footer { color:var(--muted); padding:10px 4px; }
footer a { color:var(--brand); font-weight:700; }
@media (max-width:560px) { main { width:min(100% - 20px,1040px); margin-top:10px; } header,.card { padding:20px; } }