@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
:root { --bg:#eef3f9; --fg:#12253b; --muted:#58708f; --card:#ffffffd9; --line:#d5e1ef; --brand:#0d8bd6; --accent:#00b894; --ink:#0d1a2a; --base-size:17px; }
:root.dark { --bg:#0e1622; --fg:#d8e6f7; --muted:#9db2cc; --card:#162233d6; --line:#27405f; --brand:#58b4ff; --accent:#34d0a8; --ink:#f0f6ff; }
:root.high-contrast { --fg:#000; --muted:#1a1a1a; --card:#fff; --line:#000; --brand:#0037ff; --ink:#000; }
:root.dark.high-contrast { --fg:#fff; --muted:#fff; --card:#000; --line:#fff; --brand:#7eb6ff; --ink:#fff; }
* { box-sizing: border-box; }
body { margin:0; font-family: Manrope, 'Avenir Next', 'Segoe UI', sans-serif; font-size:var(--base-size); background:radial-gradient(circle at 8% 0%, #ddf0ff, transparent 35%), radial-gradient(circle at 90% 10%, #deffee, transparent 30%), linear-gradient(180deg,#ebf2fb,#f8fbff); color:var(--fg); }
:root.dark body { background:linear-gradient(180deg,#0d1420,#111c2b); }
.hero { padding:1.1rem 1.25rem; border-bottom:1px solid var(--line); background:#ffffffd6; position:sticky; top:0; z-index:2; backdrop-filter: blur(10px); display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between; align-items:end; box-shadow:0 6px 20px #0b22370a; }
:root.dark .hero { background:#101a29cc; }
.hero h1 { margin:.1rem 0 .3rem; letter-spacing:.2px; font-size:1.85rem; color:var(--ink); }
.hero p { margin:0; color:var(--muted); }
.hero-left { min-width:260px; }
.hero-right { margin-left:auto; }
.toolbar { display:flex; gap:.55rem; flex-wrap:wrap; }
input, select, .toggle-btn { border:1px solid var(--line); background:#fff; color:var(--fg); border-radius:12px; padding:.68rem .86rem; font-weight:600; font-size:.95rem; }
:root.dark input, :root.dark select, :root.dark .toggle-btn { background:#142030; }
input { width:min(520px,100%); }
.toggle-btn { cursor:pointer; }
.toggle-group { display:flex; gap:.45rem; flex-wrap:wrap; margin-left:auto; }
.stats { max-width:1400px; margin:.8rem auto 0; padding:0 1rem; display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:.7rem; }
.stat { background:linear-gradient(145deg,#ffffff,#f1f7ff); border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem; box-shadow:0 8px 18px #0e22390f; }
:root.dark .stat { background:#152133; }
.stat h3 { margin:0; font-size:1.35rem; color:var(--ink); }
.stat h3 span { font-size:.75rem; color:var(--muted); font-weight:700; }
.stat p { margin:.1rem 0 0; color:var(--muted); font-size:.82rem; }
.stat-btn { cursor:pointer; transition:.15s ease; }
.layout { padding:1rem; max-width:1400px; margin:0 auto; display:grid; gap:1rem; grid-template-columns:1fr; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:.9rem; box-shadow:0 10px 30px #0e223910; }
.panel h2 { margin:.15rem 0 .65rem; font-size:1.15rem; color:var(--ink); }
.topic-grid, .possible-list, .cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1rem; }
.topic-card, .possible-item, .card { border:1px solid var(--line); border-radius:16px; padding:1rem 1.05rem; background:#fff; }
:root.dark .topic-card, :root.dark .possible-item, :root.dark .card { background:#162233; }
.topic-card h3 { margin:.1rem 0 .35rem; text-transform:capitalize; font-size:1.2rem; line-height:1.25; }
.enter-link { display:inline-block; margin-top:.45rem; text-decoration:none; background:#12395d; color:#fff; border-radius:10px; padding:.45rem .7rem; font-weight:700; font-size:.83rem; }
.card { box-shadow:0 7px 24px #10263d10; transition:.18s ease; min-height: 200px; }
.card:hover { transform:translateY(-2px); }
.skillbar-beginner { border-left:5px solid #48b36d; }
.skillbar-intermediate { border-left:5px solid #2c7dd8; }
.skillbar-advanced { border-left:5px solid #d97b42; }
.card a, .possible-item a, article a { color:var(--brand); text-decoration:none; }
.small { color:var(--muted); margin:.35rem 0; font-size:1rem; line-height:1.5; }
.chip { display:inline-block; font-size:.75rem; border:1px solid var(--line); border-radius:999px; padding:.17rem .52rem; margin:.15rem .2rem 0 0; background:color-mix(in srgb, var(--card) 85%, transparent); color:var(--muted); }
.top { border-bottom:1px solid var(--line); padding:.8rem 1rem; background:var(--card); }
.top a { color:var(--brand); text-decoration:none; font-weight:600; }
.top-rich { display:flex; gap:.45rem; align-items:center; color:var(--muted); }
.doc { max-width:1400px; margin:0 auto; padding:1rem; }
.panel-doc { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1rem 1.05rem; box-shadow:0 10px 30px #0e223910; }
.topic-layout { display:grid; grid-template-columns: 1.6fr .9fr; gap:1rem; align-items:start; }
.topic-side { position:sticky; top:76px; }
.topic-stats { grid-template-columns:repeat(3,minmax(90px,1fr)); margin:.2rem 0 .8rem; padding:0; }
.side-toolbar { margin-bottom:.6rem; }
.topic-group { margin:1rem 0; }
.meta { display:flex; gap:.8rem; flex-wrap:wrap; color:var(--muted); font-size:.92rem; }
.meta-pill { border:1px solid var(--line); border-radius:999px; padding:.2rem .55rem; background:color-mix(in srgb, var(--card) 88%, transparent); font-size:.82rem; color:var(--muted); }
:root.dark .meta-pill { background:#142030; }
.more-tags { margin-top:.45rem; }
.more-tags summary { cursor:pointer; color:var(--brand); font-weight:700; font-size:.84rem; }
hr { border:none; border-top:1px solid var(--line); margin:.9rem 0 1rem; }
pre { background:#0f1724; color:#d6e3ff; padding:.7rem; border-radius:8px; overflow:auto; }
.skill { padding:.1rem .45rem; border-radius:999px; font-size:.75rem; font-weight:700; text-transform:capitalize; }
.skill-beginner { background:color-mix(in srgb, #48b36d 14%, var(--card)); color:#2f7a4a; }
.skill-intermediate { background:color-mix(in srgb, #2c7dd8 14%, var(--card)); color:#2a5f97; }
.skill-advanced { background:color-mix(in srgb, #d97b42 14%, var(--card)); color:#8b4f2e; }
:root.compact .hero, :root.compact .panel, :root.compact .card, :root.compact .topic-card, :root.compact .possible-item { padding:.55rem .6rem; }
:root.compact .layout { gap:.6rem; }
:root.compact .stats { gap:.45rem; }
:root.high-contrast *:focus { outline:2px solid var(--brand); outline-offset:2px; }
@media (max-width: 980px) {
  .stats { grid-template-columns:repeat(2,minmax(120px,1fr)); }
  .hero h1 { font-size:1.35rem; }
  .topic-layout { grid-template-columns:1fr; }
  .topic-side { position:static; }
}