:root{
  --bg0:#03070d;
  --bg1:#07101c;
  --bg2:#0d1c31;
  --panel:#0f2138;
  --panel2:#122943;
  --panel3:#081424;
  --edge:#4aa3d8;
  --edge2:#9ed8ff;
  --gold:#f6d784;
  --text:#dfefff;
  --muted:#91abc3;
  --danger:#ff7c7c;
  --ok:#89ffce;
  --shadow:#000912;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:var(--font);
  background:
    radial-gradient(circle at 15% 10%, rgba(50,128,190,.28), transparent 30rem),
    radial-gradient(circle at 85% 4%, rgba(138,180,255,.18), transparent 26rem),
    linear-gradient(180deg, #02050a 0%, #07101c 42%, #03070d 100%);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-2;
  background-image:
    radial-gradient(#d9f3ff 0.7px, transparent 1px),
    radial-gradient(#6cb4ff 0.9px, transparent 1.2px),
    radial-gradient(#fff3c4 0.8px, transparent 1.1px);
  background-size: 90px 90px, 130px 130px, 210px 210px;
  background-position: 0 0, 30px 50px, 70px 20px;
  opacity:.28;
}
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  opacity:.45;
}
a{color:#bde7ff;text-decoration:none}
a:hover{text-decoration:underline;color:white}
img{max-width:100%}
.site-shell{max-width:1280px;margin:0 auto;padding:0 18px 48px}
.topbar{
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(12px);
  background:linear-gradient(180deg, rgba(3,7,13,.95), rgba(3,7,13,.72));
  border-bottom:1px solid rgba(126,202,255,.3);
  box-shadow:0 12px 35px rgba(0,0,0,.45);
}
.topbar-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:white;text-shadow:0 0 12px rgba(126,202,255,.7)}
.brand-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%, #fff, #8bd8ff 30%, #1b65a0 56%, #061120 70%);box-shadow:0 0 22px rgba(126,202,255,.9), inset 0 0 12px rgba(255,255,255,.55);color:#02101f;font-size:17px}
.nav{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.nav a,.button,.tiny-button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid rgba(126,202,255,.45);
  color:#dff5ff;
  background:linear-gradient(180deg, rgba(28,70,109,.9), rgba(8,24,43,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 16px rgba(74,163,216,.12);
  border-radius:6px;
  padding:8px 12px;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:.78rem;
  font-weight:700;
}
.nav a:hover,.button:hover,.tiny-button:hover{background:linear-gradient(180deg, rgba(55,122,178,.95), rgba(13,37,64,.98));text-decoration:none;color:white;border-color:rgba(190,231,255,.9)}
.hero{
  margin:28px 0 18px;
  border:1px solid rgba(126,202,255,.55);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 42px),
    linear-gradient(135deg, rgba(19,49,82,.96), rgba(5,14,26,.96));
  box-shadow:0 0 0 1px rgba(0,0,0,.8), 0 18px 55px rgba(0,0,0,.48), inset 0 0 40px rgba(74,163,216,.07);
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px;padding:30px}
.hero h1{font-family:var(--serif);font-size:clamp(2.3rem,5vw,5.4rem);line-height:.95;margin:0 0 12px;color:white;text-shadow:0 0 14px rgba(126,202,255,.65), 0 3px 0 #000}
.subtitle{font-size:1.12rem;color:#c3d8eb;max-width:75ch}
.hero-card{border:1px solid rgba(246,215,132,.45);background:linear-gradient(180deg, rgba(104,82,31,.25), rgba(6,17,30,.82));border-radius:8px;padding:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.hero-card h2{font-size:1rem;color:var(--gold);text-transform:uppercase;letter-spacing:.11em;margin:0 0 10px}.hero-card p{color:var(--muted);margin:0 0 12px}
.panel,.forum-panel{
  border:1px solid rgba(126,202,255,.45);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(17,45,76,.97), rgba(5,14,26,.97));
  box-shadow:0 8px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  margin:18px 0;
  overflow:hidden;
}
.panel-title,.forum-title{
  background:linear-gradient(180deg, #2a6596, #12324f 52%, #071827);
  border-bottom:1px solid rgba(158,216,255,.55);
  padding:10px 14px;
  color:white;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 1px 0 #000, 0 0 10px rgba(126,202,255,.9);
}
.panel-body{padding:16px}.grid{display:grid;gap:16px}.grid.cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{
  border:1px solid rgba(126,202,255,.28);
  background:linear-gradient(180deg, rgba(18,41,67,.92), rgba(7,18,32,.95));
  border-radius:8px;padding:16px;min-height:150px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.card h2,.card h3{margin-top:0;color:#eaf8ff}.card p{color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;color:var(--muted);font-size:.85rem}.pill{border:1px solid rgba(126,202,255,.35);background:rgba(5,18,32,.7);border-radius:999px;padding:4px 8px;color:#bad5ea}.gold{color:var(--gold)}
.layout{display:grid;grid-template-columns:270px 1fr;gap:18px;align-items:start}
.sidebar{position:sticky;top:72px}.sidebar .panel-body{max-height:calc(100vh - 150px);overflow:auto}.chapter-list{list-style:none;padding:0;margin:0}.chapter-list li{border-bottom:1px solid rgba(126,202,255,.12)}.chapter-list a{display:block;padding:8px;color:#ccecff}.chapter-list a:hover{background:rgba(126,202,255,.08);text-decoration:none}.chapter-list .part-label{display:block;font-size:.72rem;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.article{
  border:1px solid rgba(126,202,255,.5);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(12,27,47,.98), rgba(4,11,21,.99));
  box-shadow:0 18px 45px rgba(0,0,0,.55), inset 0 0 45px rgba(74,163,216,.045);
  overflow:hidden;
}
.article-head{padding:20px 24px;background:linear-gradient(180deg, rgba(42,101,150,.35), rgba(5,14,26,.0));border-bottom:1px solid rgba(126,202,255,.22)}
.article-head h1{font-family:var(--serif);font-size:clamp(2rem,4.2vw,4rem);line-height:1;margin:0;color:white;text-shadow:0 0 12px rgba(126,202,255,.55)}
.article-content{padding:24px 28px;font-family:var(--serif);font-size:var(--reader-size, 1.12rem);line-height:1.85;color:#e5eef8}.article-content h1,.article-content h2,.article-content h3,.article-content h4{font-family:var(--font);line-height:1.25;color:#f4fbff;text-shadow:0 0 8px rgba(126,202,255,.4)}.article-content h2{margin-top:2.2em;border-bottom:1px solid rgba(126,202,255,.25);padding-bottom:6px}.article-content h3{color:#bde7ff;margin-top:2em}.article-content h4{color:var(--gold);letter-spacing:.05em}.article-content p{margin:1em 0}.article-content hr{border:0;border-top:1px solid rgba(126,202,255,.22);margin:2em 0}.article-content strong{color:#fff}.article-content em{color:#d4ecff}.article-content blockquote{border-left:3px solid var(--edge);margin:1.2em 0;padding:.6em 1em;background:rgba(126,202,255,.06);color:#d8ecff}.article-content ul,.article-content ol{padding-left:1.4em}.article-content code{font-family:var(--mono);background:rgba(0,0,0,.35);padding:.12em .35em;border-radius:4px;color:#d8f4ff}
.reader-tools{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid rgba(126,202,255,.2);background:rgba(4,11,21,.8)}
.chapter-nav{display:flex;justify-content:space-between;gap:12px;padding:16px 24px;border-top:1px solid rgba(126,202,255,.18);background:rgba(5,14,26,.82);flex-wrap:wrap}
.table-wrap{overflow:auto}.unit-table{width:100%;border-collapse:collapse;font-size:.92rem}.unit-table th,.unit-table td{padding:9px 10px;border-bottom:1px solid rgba(126,202,255,.16);text-align:left}.unit-table th{position:sticky;top:0;background:#102942;color:#fff;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em}.unit-table tr:hover{background:rgba(126,202,255,.06)}
.searchbox,input[type="search"],select{width:100%;padding:11px 12px;border-radius:6px;border:1px solid rgba(126,202,255,.45);background:#061321;color:#e6f6ff;box-shadow:inset 0 1px 5px rgba(0,0,0,.8)}
.filter-row{display:grid;grid-template-columns:1.4fr .7fr .7fr;gap:10px;margin-bottom:12px}.results .card{min-height:0}.small{font-size:.88rem;color:var(--muted)}.footer{color:#7895ad;text-align:center;margin:36px 0 0;font-size:.85rem}.footer a{color:#9fdcff}.note-list li{margin-bottom:.7rem}.warning{border-left:4px solid var(--gold);padding:10px 12px;background:rgba(246,215,132,.08);color:#f6e7bd}
@media (max-width:850px){.hero-grid,.layout{grid-template-columns:1fr}.sidebar{position:relative;top:auto}.nav{margin-left:0}.filter-row{grid-template-columns:1fr}.article-content{padding:18px;font-size:1.03rem}.site-shell{padding-left:12px;padding-right:12px}.hero-grid{padding:20px}}