/* MathCraft / Crafter Apps – minimalist, accessible CSS */
:root{
  --bg:#0b0d12; --card:#11141b; --text:#e5e7eb; --muted:#9aa3b2;
  --brand:#7c9cff; --accent:#c084fc; --ok:#22c55e; --bad:#ef4444;
  --ring: rgba(124,156,255,0.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif; color:var(--text); background:radial-gradient(80rem 80rem at 90% -10%, #1f2440 0%, #0b0d12 60%), var(--bg);}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
nav{position:sticky; top:0; backdrop-filter:saturate(180%) blur(10px); background:rgba(11,13,18,0.6); border-bottom:1px solid #1c2230; z-index:10}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.3px}
.logo-badge{width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:linear-gradient(135deg, var(--brand), var(--accent)); box-shadow:0 6px 30px var(--ring)}
.nav-links{display:flex; gap:18px; align-items:center}
button.nav-toggle{display:none}
@media (max-width:780px){
  .nav-links{display:none}
  button.nav-toggle{display:inline-flex; background:transparent; border:1px solid #2a3244; color:var(--text); padding:8px 10px; border-radius:10px}
}
.hero{padding:80px 0 30px; text-align:center}
h1{font-size:clamp(34px, 6vw, 56px); line-height:1.05; margin:0 0 12px; letter-spacing:-.5px}
h2{font-size:clamp(24px, 4vw, 32px); margin:0 0 10px}
p.lead{font-size:clamp(18px,2.5vw,20px); color:var(--muted); margin:0 auto 24px; max-width:780px}
.cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; font-weight:600; border:1px solid #2a3244; background:#0e1220}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--accent)); color:white; border-color:transparent; box-shadow:0 10px 40px var(--ring)}
.badges{display:flex; gap:10px; justify-content:center; margin-top:18px}
.grid{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid #1c2230; border-radius:16px; padding:18px}
.card h3{margin:0 0 6px}
.section{padding:40px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-top:1px solid #1c2230; border-bottom:1px solid #1c2230}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; border:1px solid #2a3244; padding:2px 6px; border-radius:8px; background:#0b0f1a; color:#cbd5e1}
footer{padding:40px 0 70px; color:var(--muted)}
footer .cols{display:grid; gap:20px; grid-template-columns:2fr 1fr 1fr 1fr}
footer h4{margin:0 0 8px}
.hr{height:1px; background:#1c2230; margin:26px 0}
.notice{padding:12px 14px; border:1px dashed #2a3244; border-radius:12px; color:var(--muted)}
.hero-art{height:300px; border-radius:20px; border:1px solid #1c2230; background:repeating-radial-gradient(circle at 20% 20%, rgba(124,156,255,.2), rgba(124,156,255,.0) 80px), linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); margin:24px auto 0; box-shadow:0 30px 80px var(--ring)}
table{width:100%; border-collapse:collapse; margin:16px 0}
td,th{padding:10px 8px; border-bottom:1px solid #1c2230; text-align:left}
small, .muted{color:var(--muted)}
ul.inline{display:flex; gap:12px; list-style:none; padding:0; margin:0}
.tag{display:inline-block; border:1px solid #2a3244; border-radius:999px; padding:4px 10px; font-size:13px; color:#cbd5e1}
blockquote{border-left:3px solid #2a3244; padding-left:12px; color:#cbd5e1}
kbd{background:#0b0f1a; border:1px solid #2a3244; border-radius:6px; padding:2px 6px}
.badge{display:inline-block; background:#0e1220; border:1px solid #2a3244; border-radius:999px; padding:6px 10px; font-size:13px; color:#cbd5e1}
.warning{background:#1b1220; border-color:#3a2038}
.success{background:#101a12; border-color:#1f3b28}