:root{ --bgs:#ffffff; --fg:#111111; --muted:#6b7280; --accent:#1a6ed8; --border:#505562; --sidebar-bg:#f7f8fa; --sidebar-fg:#0b1620; }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.layout{display:flex;min-height:100vh;background:#414653;color:#FFFFFF}
.sidebar{width:320px;max-width:85vw;border-right:1px solid var(--border);padding:16px;position:sticky;top:0;align-self:flex-start;height:100vh;overflow:auto;color:#C8CDD0;background:#363b3d}
.sidebar h2{font-size:18px;margin:0 0 12px 0}
.sidebar .toolbar{display:flex;gap:8px;margin:4px 0 10px 0}
.sidebar .toolbar button{padding:6px 8px;border:1px solid var(--border);background:#fff;border-radius:6px;cursor:pointer}
.sidebar details{margin:6px 0;border-radius:6px}
.sidebar summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:6px}
.sidebar summary::-webkit-details-marker{display:none}
.sidebar .children{margin:6px 0 10px 18px;padding-left:12px;border-left:2px solid var(--border)}
.sidebar a{color:#FFFFFF}
.sidebar a.active{font-weight:700}
#globalsearch{width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;margin:8px 0;background:#fff}
.search-results{background:#fff;border:1px solid var(--border);border-radius:8px;max-height:320px;overflow:auto;margin-bottom:12px}
.search-results a{display:block;padding:8px 10px;border-bottom:1px solid var(--border);color:var(--fg);text-decoration:none}
.search-results a:hover{background:#f1f5f9}
.content{flex:1;max-width:100%;padding:28px}
.content h1{margin-top:0;font-size:28px;color:#cdcdcd}
.content h2{font-size:22px;margin-top:1.4em;color:#cdcdcd}
.content h3{font-size:18px;margin-top:1.2em; position: relative;color:#cdcdcd}
.content h4{font-size:16px;margin-top:1.0em; position: relative;color:#cdcdcd}
.content h5{font-size:16px;margin-top:1.0em; position: relative;color:#cdcdcd}
.content h6{font-size:16px;margin-top:1.0em; position: relative;color:#cdcdcd}
.anchor-link{visibility:hidden; position:absolute; left:-1.2em; top:0.1em; text-decoration:none}
.content h3:hover .anchor-link, .content h4:hover .anchor-link{visibility:visible}
.toc{border:1px solid var(--border); border-radius:8px; padding:12px; background:#fff; margin:12px 0 24px 0}
.toc h3{margin:0 0 8px 0; font-size:16px}
.toc ul{margin:0; padding-left:18px}
.toc li{margin:4px 0}
figure{margin:16px 0}
figure img{display:block;border:1px solid var(--border);border-radius:6px;height:auto}
footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--border);color:var(--muted);font-size:14px}
@media (max-width: 980px){
  .sidebar{position:fixed;z-index:20;height:auto;max-height:70vh;top:0;left:0;right:0;background:#2C3133;}
  .content{padding-top:170px}
}

.indent {
  margin-left: 1.5em;   /* indent level */
  padding-left: 0.5em;
}

/* Tips, Hints, Notes, Warnings */
.tip, .hint, .note, .warning, .example, .procedure, .prerequisite, .result, .aftertask, .related, .important, .insight, .or, .action {
  border-left: 4px solid var(--accent);
  background: #4B505C;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 14px 0;
  font-size: 0.95em;
}

.tip::before, .hint::before, .note::before, .warning::before, .example::before, procedure::before, prerequisite::before, result::before, aftertask::before, related::before, .important::before, .insight::before, or::before, .action::before
{
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.tip::before { content: "💡 Tip"; color: #66BFFF; }
.hint::before { content: "🔍 Hint"; color: #66BFFF; }
.note::before { content: "📝 Note"; color: #6BDE6B; }
.warning::before { content: "⚠️ Warning"; color: #FF6B6B; }
.example::before { content: "🧩 Example"; color: #B497FF; }
.procedure::before { content: "🧭 Procedure"; color: #6DAAFF; }
.prerequisite::before { content: "⚙️ Prerequisite"; color: #5FE6D3; }
.result::before { content: "✅ Result"; color: #63D97B; }
.aftertask::before { content: "➡️ After Completing This Task"; color: #B891F9; }
.related::before { content: "🔗 Related Links"; color: #5DB6E5; }
.important::before { content: "❗ Important"; color: #FF9951; }
.insight::before { content: "🧠 Insight"; color: #9DA2FF; }
.or::before { content: "🔸 Or"; color: #A5A5A5; }
.action::before { content: "🫱 Action"; color: #6DAAFF; }


            .nav a:link {
                color: #C8CDD0;
                background-color: transparent;
                text-decoration: none;
            }
		
            .nav a:visited {
                color: #C8CDD0;
                background-color: transparent;
                text-decoration: none;
            }
            
            .nav a:hover { 
                color: #C8CDD0;
                background-color: transparent;
                text-decoration: underline;
            }

.numberedlist li::marker {
  font-weight: bold;
}

.numberedlist li {
  font-weight: bold; /* makes the list item titles bold */
}

.numberedlist li p {
  font-weight: normal; /* resets paragraphs to normal weight */
}
.numberedlist li ul li {
  font-weight: normal; /* resets paragraphs to normal weight */
}

.numberedlistlight li::marker {
  font-weight: normal;
}

.numberedlistlight li {
  font-weight: normal; /* makes the list item titles bold */
}

.numberedlistlight li p {
  font-weight: normal; /* resets paragraphs to normal weight */
}

.content h1[id],
.content h2[id],
.content h3[id],
.content h4[id],
.content h5[id] {
  scroll-margin-top: 3.25rem; /* height of your fixed navbar */
}

.content h2 {
  margin-top: 3rem;
  padding-top: 1.5rem;
  
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.content h3 {
  margin-top: 2rem;
  padding-top: 1rem;
  
  border-top: 2px solid rgba(255, 255, 255, 0.07);
}