:root{--primary:#0044cc;--surface:#f7f9fb;--on-surface:#1a1c1e;--spacing:8px;--radius:8px}
.material-symbols-outlined{font-variation-settings:'FILL'0,'wght'400,'GRAD'0,'opsz'24}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#c4c5d7;border-radius:10px}
body{background:var(--surface);font-family:'Inter',sans-serif;color:#1a1c1e;line-height:1.7}
.rotate-180{transform:rotate(180deg)}

/* Technical Peer - Semantic Callouts */
.callout{padding:calc(var(--spacing)*2.5);border-radius:var(--radius);margin:calc(var(--spacing)*3) 0;border-left:4px solid;font-size:.95rem;line-height:1.6}
.callout-required{background:#fff8e1;border-color:#ffc107;color:#5d4037}
.callout-pro-tip{background:#e3f2fd;border-color:#2196f3;color:#0d47a1}
.callout-title{font-weight:700;display:block;margin-bottom:var(--spacing);text-transform:uppercase;font-size:.8rem;letter-spacing:.05em}

/* Code Blocks with Copy */
.code-block-container{position:relative;background:#1e1e1e;border-radius:var(--radius);margin:calc(var(--spacing)*2) 0;overflow:hidden}
.code-block{padding:calc(var(--spacing)*2);color:#d4d4d4;font-family:'JetBrains Mono',monospace;font-size:.9rem;overflow-x:auto}
.copy-btn{position:absolute;top:var(--spacing);right:var(--spacing);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:4px 8px;border-radius:4px;font-size:.7rem;cursor:pointer;transition:background .2s}
.copy-btn:hover{background:rgba(255,255,255,.2)}
.copy-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;background:rgba(255,255,255,.3)}

/* "On This Page" Sidebar */
.on-this-page{position:sticky;top:80px;width:220px;padding:0 0 0 calc(var(--spacing)*3);border-left:1px solid #e2e8f0;align-self:start}
.otp-title{font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:#6c757d;margin-bottom:calc(var(--spacing)*2)}
.otp-link{display:block;font-size:.85rem;color:#495057;text-decoration:none;padding:3px 0;transition:color .2s;border-left:2px solid transparent;padding-left:8px}
.otp-link:hover,.otp-link.active{color:var(--primary);border-left-color:var(--primary);font-weight:600}
.otp-link.h3{padding-left:20px;font-size:.8rem}

/* Prose content - Technical Peer typography */
.prose-content{max-width:none}
.prose-content img{max-width:100%;height:auto;border-radius:var(--radius);margin:1.5rem 0;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.prose-content a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.prose-content h2{font-size:1.5rem;font-weight:800;margin-top:2.5rem;margin-bottom:.75rem;color:var(--on-surface);border-bottom:2px solid #e2e8f0;padding-bottom:.5rem;letter-spacing:-.01em}
.prose-content h3{font-size:1.2rem;font-weight:700;margin-top:2rem;margin-bottom:.5rem;color:var(--on-surface)}
.prose-content p{margin-bottom:1.25rem;line-height:1.8}
.prose-content ul,.prose-content ol{margin-bottom:1.25rem;padding-left:1.5rem;color:#434654}
.prose-content li{margin-bottom:.35rem;line-height:1.7}
.prose-content code{background:#f1f5f9;padding:.125rem .375rem;border-radius:.25rem;font-family:'JetBrains Mono',monospace;font-size:.875rem}
.prose-content pre{background:#f1f5f9;padding:1rem;border-radius:var(--radius);overflow-x:auto;margin-bottom:1.25rem;border:1px solid #e2e8f0}
.prose-content iframe{max-width:100%;border-radius:var(--radius);margin:1.5rem 0}
.prose-content table{width:100%;border-collapse:collapse;margin:1rem 0}
.prose-content th,.prose-content td{padding:.5rem .75rem;border:1px solid #e2e8f0;text-align:left}
.prose-content th{background:#f1f5f9;font-weight:600}

#search-overlay{display:none}#search-overlay.active{display:flex}
.search-highlight{background:#fef08a;padding:0 2px;border-radius:2px}