:root{
  --bg:#f6f8fc;           
  --panel:#ffffff;        
  --text:#0f172a;         
  --muted:#475569;         
  --accent:#2563eb;        
  --accent-contrast:#ffffff;
  --border:#e2e8f0;
  --shadow:0 10px 24px rgba(15, 23, 42, .08);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{max-width:1100px;margin:0 auto;padding:24px}

.header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.92));
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(6px);
}
.header__inner{display:flex;align-items:center;gap:24px;justify-content:space-between}
.brand{font-weight:700;text-decoration:none;color:var(--text);letter-spacing:.2px}
.nav a{
  text-decoration:none;color:#1f2937;opacity:.9;margin-left:18px;
  padding:8px 10px;border-radius:10px;transition:.15s ease;
}
.nav a:hover{background:#f1f5f9}
.nav a[aria-current="page"]{color:var(--accent);background:#e8eefc;opacity:1}

.footer{border-top:1px solid var(--border);color:var(--muted);padding:22px 0;margin-top:28px}

.grid{display:grid;gap:24px;grid-template-columns:2fr 1fr}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
}
.card h2,.card h3{margin:0 0 10px}
p{margin:0 0 12px}
ul{margin:0 0 0 18px}

.button{
  display:inline-block; padding:10px 14px; border-radius:12px;
  background:var(--accent); color:var(--accent-contrast);
  text-decoration:none; font-weight:600; border:0; cursor:pointer;
}
.button:focus-visible{outline:3px solid #93c5fd; outline-offset:2px}

.input, textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  font:inherit;
}
textarea{min-height:260px; resize:vertical}
.input:focus-visible, textarea:focus-visible{
  outline:3px solid #93c5fd; border-color:#93c5fd;
}

.help{color:var(--muted);font-size:14px}
.note{background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:10px 12px;color:#7c2d12}
.code{background:#f1f5f9;border:1px solid var(--border);border-radius:12px;padding:12px;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;white-space:pre}
details{margin-top:12px}
summary{cursor:pointer;color:#0f172a}