.legacy{--surface2:     #f1f3f5;--surface3:     #e9ecef;--border-mid:#ced4da;--border-dark:#adb5bd;--text2:        #495057;--text3:        #868e96;--accent-light:#eff6ff;--accent-mid:#bfdbfe;--teal:#0d9488;--teal-light:#f0fdfa;--teal-mid:#99f6e4;--amber:#b45309;--amber-light:#fffbeb;--amber-mid:#fde68a;--red:#dc2626;--red-light:#fef2f2;--red-mid:#fecaca;--sidebar-w:264px;--r:8px;--rl:12px;--transition:.15s ease;}
.legacy{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.7;}
.legacy .sidebar{
        width: var(--sidebar-w);
        min-width: var(--sidebar-w);
        background: var(--sidebar-bg);
        color: #c9cdd4;
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 100;
        border-right: 1px solid #1e2128;
        overflow-y: auto;
    }
.legacy .sidebar-brand{
        padding: 1.4rem 1.2rem;
        border-bottom: 1px solid #1e2128;
        display: flex;
        align-items: center;
        gap: 0.65rem;
        text-decoration: none;
    }
.legacy .sidebar-brand-icon{
        width: 34px; height: 34px;
        border-radius: 7px;
        background: var(--accent);
        display: flex; align-items: center; justify-content: center;
        font-family: var(--mono);
        font-weight: 500;
        font-size: 0.78rem;
        color: #fff;
        flex-shrink: 0;
        letter-spacing: 0;
    }
.legacy .sidebar-brand-name{
        font-size: 0.88rem;
        font-weight: 600;
        color: #fff;
        display: block;
        letter-spacing: -.01em;
    }
.legacy .sidebar-brand-role{
        font-family: var(--mono);
        font-size: 0.62rem;
        color: #6b7080;
        display: block;
        margin-top: 1px;
    }
.legacy .sidebar-nav{ flex: 1; padding: 0.75rem 0; }
.legacy .sidebar-section{
        font-family: var(--mono);
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: #4a4f5e;
        padding: .6rem 1.2rem .25rem;
        font-weight: 500;
    }
.legacy .sidebar-nav a{
        display: flex;
        align-items: flex-start;
        gap: .55rem;
        padding: .6rem 1.2rem;
        color: #8b909e;
        text-decoration: none;
        font-size: 0.82rem;
        border-left: 2px solid transparent;
        transition: background var(--transition), color var(--transition), border-color var(--transition);
        line-height: 1.4;
    }
.legacy .sidebar-nav a:hover{ background: #1a1d26; color: #dde0e8; }
.legacy .sidebar-nav a.active{
        background: #1a1d26;
        color: #fff;
        border-left-color: var(--accent);
        font-weight: 500;
    }
.legacy .sidebar-nav a .nav-num{
        font-family: var(--mono);
        font-size: 0.65rem;
        width: 18px; height: 18px;
        border-radius: 4px;
        background: #252830;
        color: #6b7080;
        display: inline-flex;
        align-items: center; justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
    }
.legacy .sidebar-nav a.active .nav-num{ background: var(--accent); color: #fff; }
.legacy .sidebar-nav a .nav-label{ flex: 1; }
.legacy .sidebar-footer{
        padding: .9rem 1.2rem;
        border-top: 1px solid #1e2128;
        font-family: var(--mono);
        font-size: 0.62rem;
        color: #3a3f4e;
    }
.legacy .sidebar-footer a{
        color: #4a4f5e;
        text-decoration: none;
        transition: color var(--transition);
    }
.legacy .sidebar-footer a:hover{ color: #8b909e; }
.legacy .layout-with-sidebar{display: flex;}
.legacy .main{
        margin-left:var(--sidebar-w);
        flex:1;
        display:flex;
        flex-direction:column;
        min-height:100vh;
        min-width:0;
    }
.legacy .topbar{
        background:var(--surface);
        border-bottom:1px solid var(--border);
        padding:1rem 2rem;
        display:flex;
        align-items:center;
        justify-content:space-between;
        flex-wrap:wrap;
        gap:.5rem;
        position:sticky;
        top:0;
        z-index:50;
    }
.legacy .topbar-title{
        font-size:1.05rem;
        font-weight:600;
        color:var(--text);
        letter-spacing:-.02em;
    }
.legacy .topbar-sub{
        font-family:var(--mono);
        font-size:0.72rem;
        color:var(--text3);
        margin-top:1px;
    }
.legacy .topbar-badge{
        font-family:var(--mono);
        font-size:0.68rem;
        background:var(--accent-light);
        color:var(--accent);
        padding:.3rem .75rem;
        border-radius:20px;
        border:1px solid var(--accent-mid);
        font-weight:500;
    }
.legacy .content{
        flex:1;
        padding:2rem;
        max-width:880px;
        width:100%;
        margin:0 auto;
    }
.legacy .doc-meta{
        display:flex;
        gap:.75rem 1.5rem;
        flex-wrap:wrap;
        align-items:center;
        padding:.5rem 1rem;
        background:var(--accent-light);
        border:1px solid var(--accent-mid);
        border-radius:var(--r);
        margin-bottom:2rem;
        font-family:var(--mono);
        font-size:0.7rem;
        color:var(--accent);
    }
.legacy .doc-meta strong{ color:var(--accent); font-weight:500; }
.legacy article h2{
        font-size:1.8rem;
        font-weight:600;
        color:var(--text);
        letter-spacing:-.03em;
        line-height:1.2;
        margin-bottom:.6rem;
    }
.legacy article h3{
        font-size:1.1rem;
        font-weight:600;
        color:var(--text);
        letter-spacing:-.02em;
        margin:2rem 0 .65rem;
        padding-bottom:.4rem;
        border-bottom:1px solid var(--border);
    }
.legacy article h4{
        font-size:.95rem;
        font-weight:600;
        color:var(--text);
        letter-spacing:-.01em;
        margin:1.4rem 0 .45rem;
    }
.legacy article p{
        margin:.65rem 0;
        color:var(--text);
        max-width:78ch;
    }
.legacy article ul, .legacy article ol{
        margin:.45rem 0 .75rem 1.35rem;
        max-width:78ch;
    }
.legacy article li{ margin-bottom:.3rem; }
.legacy article strong{ color:var(--text); font-weight:600; }
.legacy article a{
        color:var(--accent);
        text-decoration:none;
        border-bottom:1px solid transparent;
        transition:border-color var(--transition);
    }
.legacy article a:hover{ border-bottom-color:var(--accent); }
.legacy code{
        font-family: var(--mono);
        font-size: .875em;
        background: var(--surface2);
        color: #c7254e;
        padding: .15em .4em;
        border-radius: 4px;
        border: 1px solid var(--border);
    }
.legacy pre{
        background: #1a1d23;
        border: 1px solid #2a2d35;
        border-radius: var(--r);
        padding: 1.1rem 1.3rem;
        overflow-x: auto;
        margin: .85rem 0;
        box-shadow: var(--shadow);
    }
.legacy pre code{
        font-family: var(--mono);
        font-size: .8rem;
        background: transparent;
        color: #e0e0e0;
        padding: 0;
        border: none;
        border-radius: 0;
        white-space: pre;
    }
.legacy .hljs{ background: #1a1d23 !important; padding: 0 !important; }
.legacy .hljs-keyword, .legacy .hljs-selector-tag, .legacy .hljs-type{ color: #c678dd; }
.legacy .hljs-string, .legacy .hljs-addition, .legacy .hljs-attribute{ color: #98c379; }
.legacy .hljs-number, .legacy .hljs-literal{ color: #d19a66; }
.legacy .hljs-title, .legacy .hljs-function .hljs-title{ color: #61afef; }
.legacy .hljs-comment, .legacy .hljs-quote{ color: #5c6370; font-style: italic; }
.legacy .hljs-built_in, .legacy .hljs-builtin-name{ color: #e5c07b; }
.legacy .hljs-variable, .legacy .hljs-name{ color: #e06c75; }
.legacy .hljs-meta{ color: #e06c75; }
.legacy .hljs-operator, .legacy .hljs-punctuation{ color: #abb2bf; }
.legacy table{
        width:100%;
        border-collapse:collapse;
        font-size:.875rem;
        margin:1rem 0;
        background:var(--surface);
        border-radius:var(--r);
        overflow:hidden;
        box-shadow:var(--shadow);
        border:1px solid var(--border);
    }
.legacy th{
        background:var(--surface2);
        padding:.65rem .9rem;
        font-size:.72rem;
        font-family:var(--mono);
        font-weight:500;
        color:var(--text2);
        text-align:left;
        border-bottom:1px solid var(--border-mid);
        letter-spacing:.02em;
    }
.legacy td{
        padding:.65rem .9rem;
        border-bottom:1px solid var(--border);
        color:var(--text);
        vertical-align:top;
    }
.legacy tr:last-child td{ border-bottom:none; }
.legacy tr:hover td{ background:var(--surface2); }
.legacy .warning{
        background:var(--amber-light);
        border:1px solid var(--amber-mid);
        border-left:3px solid var(--amber);
        border-radius:var(--r);
        padding:.9rem 1.1rem;
        font-size:.875rem;
        color:#78350f;
        margin:1rem 0;
        max-width:78ch;
    }
.legacy .warning code{ background: #fef3c7; border-color: var(--amber-mid); }
.legacy .checklist{ list-style:none; margin-left:0; }
.legacy .checklist li{
        padding:.35rem 0 .35rem 1.6rem;
        position:relative;
        border-bottom:1px solid var(--border);
        max-width:78ch;
    }
.legacy .checklist li:last-child{ border-bottom:none; }
.legacy .checklist li::before{
        content:"✓";
        position:absolute;
        left:0;
        color:var(--teal);
        font-weight:600;
        font-family:var(--mono);
        font-size:.8rem;
    }
.legacy .index-page{ max-width:860px; margin:0 auto; padding:0 1.5rem 4rem; }
.legacy .site-header{
        padding:3.5rem 0 2.75rem;
        border-bottom:1px solid var(--border);
        margin-bottom:2.75rem;
    }
.legacy .header-eyebrow{
        font-family:var(--mono);
        font-size:.68rem;
        letter-spacing:.1em;
        text-transform:uppercase;
        color:var(--accent);
        margin-bottom:.65rem;
    }
.legacy .header-name{
        font-size:clamp(2rem, 5vw, 2.7rem);
        font-weight:600;
        letter-spacing:-.035em;
        line-height:1.15;
        margin-bottom:.35rem;
    }
.legacy .header-role{ font-size:1rem; color:var(--text2); margin-bottom:1.1rem; }
.legacy .header-tags{ display:flex; gap:.45rem; flex-wrap:wrap; }
.legacy .tag{
        font-family:var(--mono);
        font-size:.65rem;
        padding:.22rem .6rem;
        border-radius:4px;
        background:var(--surface2);
        border:1px solid var(--border);
        color:var(--text2);
    }
.legacy .section-label{
        font-family:var(--mono);
        font-size:.65rem;
        text-transform:uppercase;
        letter-spacing:.09em;
        color:var(--text3);
        margin-bottom:1.1rem;
        padding-bottom:.65rem;
        border-bottom:1px solid var(--border);
    }
.legacy .about-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:.9rem;
        margin-bottom:2.75rem;
    }
.legacy .about-card{
        background:var(--surface);
        border:1px solid var(--border);
        border-radius:var(--rl);
        padding:1.2rem 1.4rem;
        box-shadow:var(--shadow);
    }
.legacy .about-card-label{
        font-family:var(--mono);
        font-size:.62rem;
        text-transform:uppercase;
        letter-spacing:.07em;
        color:var(--text3);
        margin-bottom:.45rem;
    }
.legacy .about-card-text{ font-size:.875rem; color:var(--text2); line-height:1.6; }
.legacy .about-card-text strong{ color:var(--text); }
.legacy .docs-list{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:2.75rem; }
.legacy .doc-card{
        background:var(--surface);
        border:1px solid var(--border);
        border-radius:var(--rl);
        padding:1.4rem;
        box-shadow:var(--shadow);
        text-decoration:none;
        color:inherit;
        display:grid;
        grid-template-columns:auto 1fr auto;
        gap:1.1rem;
        align-items:start;
        transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition);
    }
.legacy .doc-card:hover{
        box-shadow:var(--shadow-md);
        border-color:var(--border-mid);
        transform:translateY(-1px);
    }
.legacy .doc-num{
        font-family:var(--mono);
        font-size:.68rem;
        color:var(--text3);
        background:var(--surface2);
        border:1px solid var(--border);
        width:26px; height:26px;
        border-radius:5px;
        display:flex; align-items:center; justify-content:center;
        flex-shrink:0;
        margin-top:2px;
    }
.legacy .doc-api{
        font-family:var(--mono);
        font-size:.65rem;
        color:var(--text3);
        margin-bottom:.28rem;
    }
.legacy .doc-title{
        font-size:.95rem;
        font-weight:600;
        color:var(--text);
        margin-bottom:.35rem;
        line-height:1.35;
    }
.legacy .doc-desc{ font-size:.855rem; color:var(--text2); line-height:1.55; margin-bottom:.75rem; }
.legacy .doc-desc code{ font-size: .8em; }
.legacy .doc-chips{ display:flex; flex-wrap:wrap; gap:.3rem; }
.legacy .chip{
        font-family:var(--mono);
        font-size:.62rem;
        padding:.18rem .52rem;
        border-radius:4px;
        border:1px solid;
    }
.legacy .chip-blue{ background:var(--accent-light);  border-color:var(--accent-mid);  color:var(--accent); }
.legacy .chip-teal{ background:var(--teal-light);    border-color:var(--teal-mid);    color:#0f766e; }
.legacy .chip-amber{ background:var(--amber-light);   border-color:var(--amber-mid);   color:var(--amber); }
.legacy .doc-arrow{
        color:var(--text3); font-size:1rem; margin-top:4px;
        flex-shrink:0;
        transition:color var(--transition), transform var(--transition);
    }
.legacy .doc-card:hover .doc-arrow{ color:var(--accent); transform:translateX(3px); }
.legacy .principles-card{
        background:var(--surface);
        border:1px solid var(--border);
        border-radius:var(--rl);
        padding:1.4rem;
        box-shadow:var(--shadow);
        margin-bottom:2.75rem;
    }
.legacy .principles-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(175px, 1fr));
        gap:1.2rem;
        margin-top:1.2rem;
    }
.legacy .principle-num{
        font-family:var(--mono);
        font-size:.62rem;
        color:var(--accent);
        font-weight:500;
        margin-bottom:.28rem;
    }
.legacy .principle-title{ font-size:.875rem; font-weight:600; margin-bottom:.22rem; }
.legacy .principle-text{ font-size:.82rem; color:var(--text2); line-height:1.55; }
.legacy .site-footer{
        border-top:1px solid var(--border);
        padding-top:1.4rem;
        display:flex;
        align-items:center;
        justify-content:space-between;
        flex-wrap:wrap;
        gap:.65rem;
    }
.legacy .footer-copy{ font-family:var(--mono); font-size:.72rem; color:var(--text3); }
.legacy .footer-links{ display:flex; gap:1.1rem; }
.legacy .footer-links a{
        font-size:.8rem; color:var(--text2); text-decoration:none;
        transition:color var(--transition);
    }
.legacy .footer-links a:hover{ color:var(--accent); }
@media (max-width: 720px){.legacy .sidebar{ display: none; }.legacy .main{ margin-left:0; }.legacy .content{ padding:1.25rem; }.legacy .topbar{ padding:.9rem 1.25rem; }.legacy .about-grid{ grid-template-columns:1fr; }.legacy .doc-card{ grid-template-columns:auto 1fr; }.legacy .doc-arrow{ display:none; }}
/* extra: api-docs */
/* Docs de API: sidebar vira coluna fixa do conteúdo (sticky), tokens claros viram escuros no dark mode. */
.legacy:has(> .sidebar) { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.legacy .sidebar { position: sticky; top: 1rem; width: auto; min-width: 0; height: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem 0; overflow: visible; }
.legacy .sidebar-section { color: var(--muted); }
.legacy .sidebar-nav a { color: var(--text); }
.legacy .sidebar-nav a:hover { background: var(--accent-soft); color: var(--text); }
.legacy .sidebar-nav a.active { background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); }
.legacy .sidebar-nav a .nav-num { background: var(--surface-2); color: var(--muted); }
.legacy .sidebar-nav a.active .nav-num { background: var(--accent); color: var(--on-accent); }
.legacy .main { margin-left: 0; min-width: 0; }
@media (max-width: 720px) { .legacy:has(> .sidebar) { display: block; } .legacy .sidebar { display: none; } }
:root[data-theme="dark"]{
  .legacy { --surface2: #232624; --surface3: #2C2F2D; --border-mid: #3A3E3B; --border-dark: #6F746F; --text2: #C4C2B9; --text3: #A5A39A;
    --accent-light: #1E2B24; --accent-mid: #2D4A39; --teal: #5EEAD4; --teal-light: #14302C; --teal-mid: #1F5A52;
    --amber: #F2C77B; --amber-light: #33290F; --amber-mid: #6B531A; --red: #F2877B; --red-light: #36201E; --red-mid: #6E3A35; }
}
@media (prefers-color-scheme: dark){:root:not([data-theme]){
  .legacy { --surface2: #232624; --surface3: #2C2F2D; --border-mid: #3A3E3B; --border-dark: #6F746F; --text2: #C4C2B9; --text3: #A5A39A;
    --accent-light: #1E2B24; --accent-mid: #2D4A39; --teal: #5EEAD4; --teal-light: #14302C; --teal-mid: #1F5A52;
    --amber: #F2C77B; --amber-light: #33290F; --amber-mid: #6B531A; --red: #F2877B; --red-light: #36201E; --red-mid: #6E3A35; }
}}

/* extra: api-docs-extra */
:root[data-theme="dark"]{ .legacy .warning, .legacy .warning code { color: var(--amber); } .legacy :not(pre) > code { color: #F2A6BC; } .legacy .chip-teal { color: var(--teal); } .legacy .doc-meta { color: var(--text2); } }
@media (prefers-color-scheme: dark){:root:not([data-theme]){ .legacy .warning, .legacy .warning code { color: var(--amber); } .legacy :not(pre) > code { color: #F2A6BC; } .legacy .chip-teal { color: var(--teal); } .legacy .doc-meta { color: var(--text2); } }}
.legacy .hljs-comment, .legacy .hljs-quote { color: #A8B0C0; }