*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#fafafa;--fg:#1a1a1a;--muted:#666;--border:#e5e5e5;
  --card-bg:#fff;--card-shadow:0 2px 8px rgba(0,0,0,.06);
  --card-hover-shadow:0 6px 20px rgba(0,0,0,.1);
  --english:#d97757;--math:#6a9bcc;--linux:#16a34a;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#1a1a1a;--fg:#e5e5e5;--muted:#999;--border:#333;
    --card-bg:#252525;--card-shadow:0 2px 8px rgba(0,0,0,.3);
    --card-hover-shadow:0 6px 20px rgba(0,0,0,.5);
  }
}
body{
  font-family:"Noto Sans SC",system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--fg);
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1;max-width:860px;margin:0 auto;padding:80px 24px 40px;width:100%}
header{text-align:center;margin-bottom:48px}
header h1{font-size:2.4rem;font-weight:700;letter-spacing:.02em}
header .subtitle{color:var(--muted);font-size:1.1rem;margin-top:8px}

/* ── Search ── */
.search{margin-top:48px;margin-bottom:8px}
.search-form{text-align:center}
.search-box{
  display:flex;align-items:center;
  max-width:480px;margin:0 auto;
  background:var(--card-bg);border:1.5px solid var(--border);
  border-radius:28px;padding:0 8px 0 18px;
  box-shadow:var(--card-shadow);
  transition:border-color .2s,box-shadow .2s;
}
.search-box:focus-within{border-color:#aaa;box-shadow:0 3px 16px rgba(0,0,0,.1)}
.search-icon{color:var(--muted);flex-shrink:0;margin-right:8px}
.search-box input{
  flex:1;border:none;outline:none;
  padding:13px 0;font-size:.97rem;font-family:inherit;
  background:transparent;color:var(--fg);min-width:0;
}
.search-box input::placeholder{color:var(--muted)}
.search-box button{
  flex-shrink:0;border:none;background:var(--fg);color:var(--bg);
  padding:8px 18px;border-radius:20px;cursor:pointer;
  font-size:.88rem;font-family:inherit;font-weight:600;
  transition:opacity .2s;margin:4px 0;
}
.search-box button:hover{opacity:.75}
.search-hint{font-size:.78rem;color:var(--muted);margin-top:10px}

/* ── Cards ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{
  display:block;text-decoration:none;color:var(--fg);
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:12px;padding:32px 24px;text-align:center;
  box-shadow:var(--card-shadow);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--card-hover-shadow)}
.card-icon{font-size:2.2rem;margin-bottom:12px}
.card h2{font-size:1.15rem;font-weight:600;margin-bottom:6px}
.card p{font-size:.88rem;color:var(--muted)}
.card-english:hover{border-color:var(--english)}
.card-math:hover{border-color:var(--math)}
.card-linux:hover{border-color:var(--linux)}

footer{
  text-align:center;padding:24px;font-size:.82rem;color:var(--muted);
  border-top:1px solid var(--border);
}
footer nav{margin-top:6px}
footer nav a{color:var(--muted);text-decoration:none;margin:0 10px}
footer nav a:hover{text-decoration:underline}

/* legal pages */
.prose{max-width:680px;margin:0 auto;padding:60px 24px;line-height:1.8}
.prose h1{font-size:1.8rem;margin-bottom:8px}
.prose .meta{color:var(--muted);font-size:.88rem;margin-bottom:32px}
.prose h2{font-size:1.2rem;margin:28px 0 12px;font-weight:600}
.prose p,.prose li{font-size:.95rem;margin-bottom:12px}
.prose ul{padding-left:20px}
.prose a{color:var(--english);text-decoration:none}
.prose a:hover{text-decoration:underline}
.back{display:inline-block;margin-bottom:24px;font-size:.9rem;color:var(--muted);text-decoration:none}
.back:hover{color:var(--fg)}