:root {
        --bg:#030304; --bg2:#0e0e12; --bg3:#15151a;
        --primary:#00f0ff; --secondary:#7000ff;
        --text-muted:#8b9bb4; --border:rgba(0,240,255,.15);
        --ease:cubic-bezier(.23,1,.32,1);
    }
    *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior:smooth; }
    body {
        background:var(--bg); color:#e8edf5;
        font-family:'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
        line-height:1.75; -webkit-font-smoothing:antialiased;
        font-size:16px;
    }
    a { color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
    a:hover { text-decoration-thickness:2px; }
    .wrap { max-width:840px; margin:0 auto; padding:0 24px; }

    header {
        position:sticky; top:0; z-index:100;
        background:rgba(3,3,4,.86); backdrop-filter:blur(18px);
        border-bottom:1px solid var(--border);
    }
    .hd { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; }
    .logo {
        display:inline-flex; align-items:center; text-decoration:none; line-height:0;
    }
    .logo .sl-logo-img { display:block; width:166px; height:auto; max-width:46vw; }
    .logo span { color:var(--primary); }
    .hd-right { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
    .hd-right a { color:var(--text-muted); font-size:.86rem; text-decoration:none; font-weight:600; }
    .hd-right a:hover { color:var(--primary); }
    .lang { display:flex; gap:6px; font-family:'Fira Code',ui-monospace,monospace; font-size:.76rem; }
    .lang a { padding:4px 8px; border:1px solid var(--border); border-radius:6px; }
    .lang a.on { background:var(--primary); color:#000; border-color:var(--primary); }

    main { padding:60px 0 90px; }
    .doc-kicker {
        font-family:'Fira Code',ui-monospace,monospace; font-size:.74rem;
        text-transform:uppercase; letter-spacing:.16em; color:var(--primary);
        margin-bottom:16px;
    }
    h1 { font-size:clamp(1.7rem,4.6vw,2.6rem); line-height:1.2; color:#fff; font-weight:800; margin-bottom:18px; }
    .doc-meta {
        font-size:.84rem; color:var(--text-muted); padding-bottom:28px;
        border-bottom:1px solid var(--border); margin-bottom:38px;
    }
    h2 {
        font-size:1.22rem; color:#fff; font-weight:700; line-height:1.35;
        margin:44px 0 14px; scroll-margin-top:90px;
    }
    h3 { font-size:1.02rem; color:#fff; font-weight:700; margin:26px 0 10px; }
    p { margin-bottom:15px; color:#c3ccda; }
    ul, ol { margin:0 0 18px 22px; color:#c3ccda; }
    li { margin-bottom:9px; }
    ol.num { list-style:decimal; }
    strong { color:#fff; font-weight:700; }
    code, .mono { font-family:'Fira Code',ui-monospace,monospace; font-size:.9em; color:var(--primary); }

    .toc {
        background:var(--bg2); border:1px solid var(--border);
        border-radius:14px; padding:26px 28px; margin-bottom:44px;
    }
    .toc h2 { margin:0 0 14px; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); }
    .toc ol { margin:0 0 0 20px; }
    .toc li { margin-bottom:7px; }
    .toc a { color:#c3ccda; text-decoration:none; }
    .toc a:hover { color:var(--primary); }

    .callout {
        background:var(--bg2); border-left:3px solid var(--primary);
        border-radius:0 12px 12px 0; padding:20px 24px; margin:26px 0;
    }
    .callout p:last-child { margin-bottom:0; }
    .callout.warn { border-left-color:#ffcf6b; }

    table { width:100%; border-collapse:collapse; margin:22px 0 26px; font-size:.9rem; }
    th, td { text-align:left; padding:12px 14px; border:1px solid var(--border); vertical-align:top; color:#c3ccda; }
    th { background:var(--bg2); color:#fff; font-weight:700; }
    .tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

    .req { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:24px 26px; margin:30px 0; }
    .req dl { display:grid; grid-template-columns:auto 1fr; gap:9px 20px; font-size:.9rem; }
    .req dt { color:var(--text-muted); }
    .req dd { color:#fff; }
    @media(max-width:560px){ .req dl { grid-template-columns:1fr; gap:2px 0; } .req dd { margin-bottom:12px; } }

    .todo {
        display:inline-block; padding:2px 8px; border-radius:5px;
        background:rgba(255,176,0,.14); border:1px dashed rgba(255,176,0,.55);
        color:#ffcf6b; font-family:'Fira Code',ui-monospace,monospace; font-size:.84em;
        -webkit-user-select:all; user-select:all;
    }

    footer {
        border-top:1px solid var(--border); padding:40px 0 60px;
        font-size:.86rem; color:var(--text-muted);
    }
    .foot-nav { display:flex; flex-wrap:wrap; gap:8px 24px; margin-bottom:18px; }
    .foot-nav a { color:var(--text-muted); text-decoration:none; }
    .foot-nav a:hover { color:var(--primary); }

    button.linkish {
        font-family:inherit; font-size:inherit; color:var(--primary);
        background:none; border:none; padding:0; cursor:pointer;
        text-decoration:underline; text-underline-offset:2px;
    }
    @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important;animation:none!important;} }