:root{
  --bg:#090d16;
  --panel:#0f1624;
  --panel2:#141d2d;
  --text:#edf3ff;
  --muted:#aeb9cc;
  --line:#26344d;
  --blue:#4d78ff;
  --blue2:#79a5ff;
  --gold:#d4a640;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 70% 0%, rgba(41,85,170,.16), transparent 30%),
    linear-gradient(180deg,#080b12,#0c111b 45%,#080b12);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.52;
}
a{color:var(--blue2)}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;
  background:rgba(8,12,20,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{
  font-weight:800;letter-spacing:.3px;
  margin-right:auto;
}
.topbar a,.topbar button{
  border:1px solid var(--line);
  background:#111a29;color:var(--text);
  border-radius:9px;padding:8px 12px;
  text-decoration:none;cursor:pointer;font-weight:700;
}
.topbar a:hover,.topbar button:hover{border-color:var(--blue);background:#17233a}
.layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  min-height:calc(100vh - 58px);
}
.sidebar{
  position:sticky;top:58px;height:calc(100vh - 58px);
  overflow:auto;padding:18px 14px;
  background:rgba(11,16,26,.9);
  border-right:1px solid var(--line);
}
.sidebar .side-title{
  font-size:12px;text-transform:uppercase;letter-spacing:1.3px;color:var(--muted);
  margin:4px 8px 10px;
}
.sidebar a{
  display:block;padding:10px 11px;margin:4px 0;
  border-radius:8px;text-decoration:none;color:#dfe8fa;font-weight:700;font-size:14px;
}
.sidebar a:hover{background:#172238}
.sidebar a.active{background:#20335b;color:#fff;border-left:3px solid var(--blue)}
.content{
  width:min(1100px,calc(100% - 40px));
  margin:28px auto 60px;
}
.guide-card{
  background:linear-gradient(180deg,rgba(19,28,44,.98),rgba(11,17,27,.98));
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px 34px 42px;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.guide-card h1{
  font-size:30px;margin:6px 0 18px;
  padding-bottom:12px;border-bottom:2px solid #3d5f9d;
}
.guide-card h2{font-size:23px;margin:30px 0 12px;color:#fff}
.guide-card h3{font-size:18px;margin:22px 0 8px;color:#f5f8ff}
.guide-card p{margin:7px 0;color:#dfe7f5}
.bullet{margin:4px 0 4px 14px;color:#dfe7f5}
.spacer{height:8px}
.table-wrap{overflow:auto;margin:15px 0 24px;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:680px;background:#0e1623}
td{padding:10px 11px;border-right:1px solid #23314b;border-bottom:1px solid #23314b;vertical-align:top}
tr:first-child td{background:#1c2535;font-weight:800;color:white}
.back-row{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px
}
.back-row a,.back-row button{
  background:#121b2b;border:1px solid var(--line);color:white;text-decoration:none;
  padding:8px 11px;border-radius:8px;cursor:pointer;font-weight:700
}
.home{
  min-height:100vh;
  background:#05070c;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.cover{
  position:relative;
  width:min(100vw, calc(100vh * 1103 / 1426));
  max-height:100vh;
  aspect-ratio:1103/1426;
  background:url('cover.png') center top / 100% 100% no-repeat;
  flex:0 0 auto;
}
.cover-menu{
  position:absolute;
  left:4.3%;
  top:30.0%;
  width:43.1%;
  height:61.0%;
  padding:5.0% 4.2% 4.2%;
  display:flex;
  flex-direction:column;
}
.cover-menu h1{
  margin:0 0 1.8%;
  font-size:clamp(20px,3.0vh,37px);
  text-align:center;
  color:white;
  letter-spacing:.5px;
}
.cover-menu .sub{
  font-size:clamp(12px,1.70vh,21px);
  margin-top:14px;
  margin-bottom:12px;
  font-weight:800;
  color:white;
}
.cover-links{
  display:flex;
  flex-direction:column;
  gap:clamp(2px,.45vh,7px);
}
.cover-links a{
  color:#a8bdff;
  font-weight:800;
  font-size:clamp(11px,1.54vh,19px);
  line-height:1.12;
  text-decoration:none;
  padding:2px 5px;
  border-radius:6px;
}
.cover-links a:hover{background:rgba(54,92,176,.28);color:white;text-decoration:underline}
.site-link{
  margin-top:auto;
  margin-bottom:11%;
  color:#e6edff;
  font-size:clamp(9px,1.10vh,14px);
  text-decoration:underline;
  text-underline-offset:2px;
}
.mobile-menu{display:none}
@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .mobile-menu{display:block}
  .content{width:min(100% - 20px,900px);margin-top:14px}
  .guide-card{padding:20px 18px 30px}
  .topbar{flex-wrap:wrap}
  .cover-menu{left:4%;top:30%;width:44%;padding:5% 3.5%}
}


/* Readability fixes for converted DOCX content */
.guide-card p,
.guide-card p span,
.guide-card .bullet,
.guide-card .bullet span,
.guide-card td,
.guide-card td span {
  color:#e8eefb !important;
}

.guide-card h1,
.guide-card h1 span,
.guide-card h2,
.guide-card h2 span,
.guide-card h3,
.guide-card h3 span {
  color:#ffffff !important;
}

.guide-card strong,
.guide-card strong span {
  color:#ffffff !important;
}

.guide-card table tr:first-child td,
.guide-card table tr:first-child td span {
  color:#ffffff !important;
}

.guide-card a,
.guide-card a span {
  color:#8fb1ff !important;
}

/* Slightly brighter secondary text */
.guide-card {
  color:#e8eefb;
}


@media(max-width:820px){
  .home{overflow:auto;align-items:flex-start}
}

.cover-links a:first-child{
  margin-top:10px;
}


/* ===== 23 Sep 2026 readability refresh from updated DOCX guides ===== */
.guide-section { display:none; }
.guide-section.is-active { display:block; }

.guide-card {
  padding:34px 38px 48px;
}

.guide-card .update {
  display:inline-block;
  margin:0 0 18px;
  padding:8px 12px;
  border:1px solid #2d3b57;
  border-radius:8px;
  background:#182132;
  color:#ff725f !important;
  font-weight:800;
  letter-spacing:.1px;
}

.guide-card h1 {
  margin:0 0 28px;
  padding-bottom:14px;
  border-bottom:2px solid #4a67ad;
  font-size:30px;
  line-height:1.2;
  color:#fff !important;
}

.guide-card h2.section-title {
  margin:38px 0 18px;
  padding:16px 0 10px;
  border-top:2px solid #3a4d78;
  border-bottom:1px solid #263754;
  font-size:22px;
  line-height:1.25;
  color:#fff !important;
}

.guide-card h1 + p,
.guide-card .update + h1,
.guide-card h1 + h2.section-title {
  margin-top:0;
}

/* Each instance/content block gets a clear divider and more breathing room. */
.guide-card h3.content-title {
  margin:30px 0 12px;
  padding:18px 14px 10px;
  border-top:1px solid #364766;
  border-left:3px solid #5877cf;
  border-radius:4px 0 0 0;
  font-size:18px;
  line-height:1.25;
  color:#f6f8ff !important;
  background:linear-gradient(90deg,rgba(42,58,91,.34),rgba(42,58,91,0));
}

.guide-card p {
  margin:8px 0;
  color:#e8eefb !important;
  line-height:1.62;
}

.guide-card .bullet {
  margin:6px 0 6px 14px;
  color:#e8eefb !important;
}

.guide-card .bullet + .bullet {
  margin-top:4px;
}

.guide-card strong {
  color:#fff !important;
}

.guide-card h4 {
  margin:24px 0 10px;
  color:#dbe6ff !important;
}

.table-wrap {
  margin:18px 0 30px;
  border:1px solid #30405f;
  border-radius:10px;
  overflow:auto;
  background:#0d1522;
}

.guide-card table {
  width:100%;
  border-collapse:collapse;
  min-width:680px;
}

.guide-card th {
  background:#202a3a;
  color:#fff !important;
  text-align:left;
  font-weight:800;
  padding:11px 12px;
  border-right:1px solid #33415d;
  border-bottom:1px solid #33415d;
}

.guide-card td {
  color:#e8eefb !important;
  padding:11px 12px;
  vertical-align:top;
  border-right:1px solid #25324a;
  border-bottom:1px solid #25324a;
  line-height:1.45;
}

.guide-card th:last-child,
.guide-card td:last-child { border-right:0; }

/* Keep all DOCX inline colors readable on dark mode. */
.guide-card p span,
.guide-card td span,
.guide-card th span,
.guide-card h1 span,
.guide-card h2 span,
.guide-card h3 span,
.guide-card h4 span {
  color:inherit !important;
}

@media(max-width:820px){
  .guide-card { padding:22px 18px 34px; }
  .guide-card h1 { font-size:25px; }
  .guide-card h2.section-title { font-size:20px; }
  .guide-card h3.content-title { font-size:17px; }
}