:root {
     --navy: #1B3A5C;
     --blue: #2563A8;
     --teal: #1A7A8C;
     --green: #1A7A4A;
     --orange: #B85C00;
     --red: #A02020;
     --grey: #F5F7FA;
     --dgrey: #4A5568;
     --white: #FFFFFF;
     --black: #111827;
     --border: #D0D5DD;
     --code-bg: #0F172A;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     font-size: 15px;
     line-height: 1.7;
     color: var(--black);
     background: #F0F4F8;
 }

 .layout {
     display: flex;
     min-height: 100vh;
 }

 /* Sidebar */
 .sidebar {
     width: 270px;
     min-width: 270px;
     background: var(--navy);
     color: #CBD5E0;
     position: sticky;
     top: 0;
     height: 100vh;
     overflow-y: auto;
     padding: 0 0 40px;
 }

 .sidebar-logo {
     background: #0F2440;
     padding: 22px 20px 18px;
     border-bottom: 3px solid var(--teal);
 }

 .sidebar-logo h1 {
     color: #fff;
     font-size: 1.2rem;
     font-weight: 700;
     letter-spacing: .5px;
 }

 .sidebar-logo p {
     color: #90A4BF;
     font-size: .75rem;
     margin-top: 3px;
 }

 .sidebar nav {
     padding: 14px 0;
 }

 .sidebar nav a {
     display: block;
     padding: 7px 22px;
     color: #A8BCCF;
     text-decoration: none;
     font-size: .82rem;
     transition: all .15s;
     border-left: 3px solid transparent;
 }

 .sidebar nav a:hover,
 .sidebar nav a.active {
     color: #fff;
     background: rgba(255, 255, 255, .07);
     border-left-color: var(--teal);
 }

 .sidebar nav .section-label {
     padding: 14px 22px 5px;
     font-size: .68rem;
     font-weight: 700;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     color: #4A6785;
 }

 /* Main */
 .main {
     flex: 1;
     min-width: 0;
     padding: 0 0 80px;
 }

 /* Hero */
 .hero {
     background: linear-gradient(135deg, var(--navy) 0%, #254E7A 100%);
     color: #fff;
     padding: 48px 56px 44px;
     border-bottom: 4px solid var(--teal);
     position: relative;
     overflow: hidden;
 }

 .hero::after {
     content: '';
     position: absolute;
     right: -40px;
     top: -40px;
     width: 280px;
     height: 280px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .04);
 }

 .hero h1 {
     font-size: 2.1rem;
     font-weight: 800;
     letter-spacing: -.5px;
 }

 .hero .subtitle {
     color: #90B8D8;
     margin-top: 8px;
     font-size: 1rem;
 }

 .hero .meta {
     display: flex;
     gap: 24px;
     margin-top: 20px;
     flex-wrap: wrap;
 }

 .hero .badge {
     background: rgba(255, 255, 255, .12);
     border: 1px solid rgba(255, 255, 255, .2);
     border-radius: 20px;
     padding: 4px 14px;
     font-size: .78rem;
     color: #CBD5E0;
 }

 /* Sections */
 .section {
     padding: 44px 56px 12px;
     max-width: 960px;
 }

 .section+.section {
     padding-top: 10px;
 }

 h2 {
     font-size: 1.35rem;
     font-weight: 700;
     color: var(--navy);
     padding-bottom: 10px;
     border-bottom: 2px solid var(--teal);
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 h2 .num {
     background: var(--teal);
     color: #fff;
     font-size: .75rem;
     font-weight: 700;
     width: 26px;
     height: 26px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 h3 {
     font-size: 1rem;
     font-weight: 700;
     color: var(--navy);
     margin: 28px 0 10px;
 }

 p {
     margin-bottom: 12px;
     color: #2D3748;
 }

 /* Search */
 .search-wrap {
     padding: 24px 56px 0;
     max-width: 960px;
 }

 .search-box {
     display: flex;
     align-items: center;
     gap: 12px;
     background: #fff;
     border: 2px solid var(--border);
     border-radius: 10px;
     padding: 10px 18px;
     transition: border-color .2s;
 }

 .search-box:focus-within {
     border-color: var(--teal);
 }

 .search-box input {
     border: none;
     outline: none;
     width: 100%;
     font-size: .92rem;
     color: var(--black);
     background: transparent;
 }

 .search-box input::placeholder {
     color: #A0AEC0;
 }

 .search-icon {
     color: #A0AEC0;
     font-size: 1rem;
     flex-shrink: 0;
 }

 .search-hint {
     font-size: .78rem;
     color: #A0AEC0;
     margin-top: 6px;
     padding-left: 4px;
 }

 /* Overview cards */
 .overview-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 12px;
     margin: 4px 0 20px;
 }

 .overview-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 16px 18px;
     border-top: 3px solid var(--blue);
 }

 .overview-card .icon {
     font-size: 1.4rem;
     margin-bottom: 8px;
 }

 .overview-card h4 {
     font-size: .9rem;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 6px;
 }

 .overview-card p {
     font-size: .8rem;
     color: var(--dgrey);
     margin: 0;
 }

 /* Code */
 pre {
     background: var(--code-bg);
     color: #E2E8F0;
     border-radius: 8px;
     padding: 16px 20px;
     font-size: .82rem;
     line-height: 1.6;
     overflow-x: auto;
     margin: 10px 0 16px;
     border-left: 3px solid var(--teal);
 }

 code {
     font-family: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
 }

 p code,
 li code,
 td code {
     background: #EDF2F7;
     color: #1A7A8C;
     padding: 1px 6px;
     border-radius: 4px;
     font-size: .83em;
 }

 .cmd-c {
     color: #7DD3FC;
 }

 .arg {
     color: #86EFAC;
 }

 .val {
     color: #FDE68A;
 }

 .comment {
     color: #64748B;
 }

 /* Tables */
 .tbl-wrap {
     overflow-x: auto;
     margin: 12px 0 20px;
     border-radius: 8px;
     border: 1px solid var(--border);
 }

 table {
     width: 100%;
     border-collapse: collapse;
     font-size: .84rem;
 }

 thead tr {
     background: var(--navy);
     color: #fff;
 }

 thead th {
     padding: 10px 14px;
     text-align: left;
     font-weight: 600;
     font-size: .79rem;
     letter-spacing: .3px;
 }

 tbody tr:nth-child(even) {
     background: var(--grey);
 }

 tbody tr:hover {
     background: #E8EFF7;
 }

 tbody tr.hidden {
     display: none;
 }

 td {
     padding: 8px 14px;
     border-bottom: 1px solid var(--border);
     vertical-align: top;
 }

 td:first-child {
     font-family: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
     font-size: .8rem;
     color: var(--teal);
 }

 /* Type badges */
 .type-badge {
     display: inline-block;
     font-size: .68rem;
     padding: 1px 8px;
     border-radius: 8px;
     font-weight: 600;
     white-space: nowrap;
 }

 .t-bool {
     background: #D1FAE5;
     color: #065F46;
 }

 .t-int {
     background: #DBEAFE;
     color: #1D4ED8;
 }

 .t-string {
     background: #FEF3C7;
     color: #92400E;
 }

 .t-ip {
     background: #EDE9FE;
     color: #5B21B6;
 }

 .t-multi {
     background: #FFE4E6;
     color: #9F1239;
 }

 /* Default badges */
 .def-on {
     background: #D1FAE5;
     color: #065F46;
     border-radius: 6px;
     padding: 1px 8px;
     font-size: .75rem;
     font-weight: 600;
 }

 .def-off {
     background: #F3F4F6;
     color: #6B7280;
     border-radius: 6px;
     padding: 1px 8px;
     font-size: .75rem;
     font-weight: 600;
 }

 .def-val {
     background: #EFF6FF;
     color: #1D4ED8;
     border-radius: 6px;
     padding: 1px 8px;
     font-size: .75rem;
     font-family: monospace;
 }

 /* Callout */
 .callout {
     border-radius: 8px;
     padding: 14px 18px;
     margin: 14px 0;
     font-size: .88rem;
     display: flex;
     gap: 12px;
     align-items: flex-start;
 }

 .callout .icon {
     flex-shrink: 0;
     font-size: 1rem;
     margin-top: 1px;
 }

 .callout.tip {
     background: #EBF8F5;
     border-left: 4px solid var(--teal);
 }

 .callout.info {
     background: #EFF6FF;
     border-left: 4px solid var(--blue);
 }

 .callout p {
     margin: 0;
     color: inherit;
 }

 /* Section hidden by search */
 .opt-section.hidden {
     display: none;
 }

 /* Footer */
 .footer {
     background: var(--navy);
     color: #4A6785;
     text-align: center;
     padding: 18px;
     font-size: .78rem;
     margin-top: 40px;
 }

 .footer span {
     color: var(--teal);
 }

 @media (max-width: 768px) {
     .sidebar {
         display: none;
     }

     .hero,
     .section,
     .search-wrap {
         padding-left: 20px;
         padding-right: 20px;
     }
 }