@import url('/syntax.css');
:root {
    color-scheme:light;
    --bg:#fff;
    --surface:#fff;
    --soft:#f7f9fd;
    --text:#111b33;
    --muted:#63708a;
    --line:#e3e9f4;
    --blue:#1965f5;
    --purple:#7939ed;
    --shadow:0 12px 30px #253c6610;
    --accent:#087eaa;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

:root[data-theme=dark] {
    color-scheme:dark;
    --bg:#050d19;
    --surface:#0a1524;
    --soft:#101d2d;
    --text:#eff3ff;
    --muted:#a1afc4;
    --line:#223147;
    --blue:#52b3ff;
    --purple:#ad80ff;
    --shadow:0 15px 45px #0003;
    --accent:#61dafb;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:95px;
}

body {
    margin:0;
    background:radial-gradient(ellipse at 50% 240px,color-mix(in srgb,var(--blue) 5%,transparent),transparent 650px),var(--bg);
    color:var(--text);
    line-height:1.6;
}

a {
    color:var(--blue);
    text-decoration:none;
}

button,select {
    font:inherit;
    cursor:pointer;
}

button {
    color:inherit;
}

button,a,select {
    touch-action:manipulation;
}

button:focus-visible,a:focus-visible,select:focus-visible {
    outline:3px solid var(--blue);
    outline-offset:4px;
}

[hidden] {
    display:none!important;
}

.wrap {
    width:min(1120px,calc(100% - 48px));
    margin-inline:auto;
}

.skip {
    position:absolute;
    top:-80px;
}

.skip:focus {
    top:8px;
    background:var(--surface);
    padding:12px;
    z-index:20;
}

header {
    border-bottom:1px solid var(--line);
    background:var(--bg);
}

.nav {
    display:flex;
    align-items:center;
    gap:32px;
    min-height:86px;
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    font-size:27px;
    font-weight:800;
    letter-spacing:-1px;
}

.nav-links {
    display:flex;
    gap:30px;
    margin:auto;
    font-size:13px;
    font-weight:550;
}

.nav-links a {
    color:var(--text);
}

.nav-links a:hover {
    color:var(--blue);
}

.nav-tools {
    display:flex;
    gap:10px;
}

.nav-tools button,.nav-tools select {
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:8px;
    padding:6px 10px;
    color:var(--text);
}

.hero {
    text-align:center;
    padding:66px 0 48px;
}

.pill {
    display:inline-block;
    color:var(--blue);
    border:1px solid color-mix(in srgb,var(--purple) 22%,var(--line));
    border-radius:50px;
    padding:3px 14px;
    font-size:12px;
    font-weight:600;
    background:var(--surface);
}

h1 {
    font-size:clamp(34px,4.3vw,56px);
    line-height:1.15;
    letter-spacing:-2px;
    margin:24px auto 22px;
    font-weight:750;
    max-width:960px;
}

.gradient {
    background:linear-gradient(110deg,#00b9ef,#2964ff 45%,#8939ff);
    color:transparent;
    background-clip:text;
}

.hero p {
    max-width:620px;
    margin:0 auto;
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
}

.hero-actions {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    margin-top:30px;
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    padding:11px 22px;
    font-weight:600;
    font-size:14px;
}

.primary {
    color:white;
    background:linear-gradient(110deg,#00a9ea,#2162ff 52%,#8430f7);
    box-shadow:0 5px 14px #4f53e51c;
}

.primary:hover {
    filter:brightness(1.1);
}

.text-link {
    font-size:14px;
    font-weight:600;
}

.panel {
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface);
    overflow:hidden;
    box-shadow:var(--shadow);
}

.showcase {
    border-top:2px solid color-mix(in srgb,var(--purple) 55%,var(--line));
}

.tabs {
    display:flex;
    border-bottom:1px solid var(--line);
    overflow-x:auto;
    scrollbar-width:thin;
    background:linear-gradient(110deg,color-mix(in srgb,var(--blue) 3%,var(--surface)),color-mix(in srgb,var(--purple) 4%,var(--surface)));
}

.tabs button {
    flex:1;
    white-space:nowrap;
    border:0;
    border-bottom:2px solid transparent;
    background:transparent;
    padding:18px 18px;
    font-size:13px;
    color:var(--muted);
}

.tabs button[aria-selected=true] {
    border-bottom-color:var(--accent,var(--blue));
    color:var(--accent,var(--blue));
    background:color-mix(in srgb,var(--accent) 5%,transparent);
}

.example-grid {
    display:grid;
    grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
    min-height:390px;
}

.source {
    border-right:1px solid var(--line);
    background:var(--editor-bg);
    min-width:0;
}

.code-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 18px;
    color:var(--purple);
    font:11px ui-monospace,monospace;
}

.code-header button {
    background:none;
    border:1px solid var(--line);
    border-radius:5px;
    padding:3px 8px;
    color:var(--muted);
}

pre {
    margin:0;
    overflow-x:auto;
    font:12px/1.95 ui-monospace,SFMono-Regular,Consolas,monospace;
    tab-size:4;
    background:var(--editor-bg);
    text-align:left;
}

/* Keep overlay scrollbars below the last line, inside the scrollable content. */
pre[data-horizontal-scroll]::after {
    content: "";
    display: block;
    height: 12px;
}

.highlighted-code {
    display:block;
    min-width:100%;
    width:max-content;
}

.code-line {
    display:inline-block;
    min-width:100%;
    position:relative;
    padding-left:48px;
    padding-right:20px;
}

.code-line:before {
    content:attr(data-line);
    position:sticky;
    left:0;
    display:inline-block;
    width:34px;
    margin-left:-48px;
    margin-right:14px;
    text-align:right;
    padding-right:10px;
    color:var(--editor-number);
    background:var(--editor-gutter);
    border-right:1px solid var(--line);
    font-size:10px;
    z-index:1;
}

.editor-filler {
    display:none;
}

.preview {
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.small-label {
    font-size:11px;
    font-weight:600;
    color:var(--muted);
}

.browser {
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    flex:1;
    box-shadow:0 5px 12px #00000009;
}

.browser-bar {
    display:flex;
    align-items:center;
    gap:24px;
    padding:12px 16px;
    background:var(--soft);
    border-bottom:1px solid var(--line);
    font-size:10px;
    color:var(--muted);
}

.browser-bar span:first-child {
    letter-spacing:3px;
    color:#8b79ea;
}

.browser-body {
    padding:50px 25px;
    background:var(--surface);
}

.browser-body h2 {
    font-size:26px;
    letter-spacing:-1px;
    margin:0 0 12px;
}

.browser-body p {
    color:var(--muted);
    font-size:14px;
    margin-bottom:22px;
}

.terminal {
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    gap:20px;
    padding:13px 22px;
    font-size:11px;
    color:var(--muted);
}

.terminal strong {
    font-size:23px;
    color:#00add8;
    font-style:italic;
}

.terminal code {
    color:var(--text);
}

.dot {
    width:7px;
    height:7px;
    background:#43bb8a;
    border-radius:100%;
}

.features {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:26px;
}

.feature {
    border:1px solid var(--line);
    border-radius:13px;
    padding:25px 22px;
    background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 3%,var(--surface)),var(--surface));
}

.feature-icon {
    display:block;
    font-size:30px;
    line-height:1.4;
    color:var(--blue);
    margin-bottom:22px;
}

.feature:nth-child(n+3) .feature-icon {
    color:var(--purple);
}

h3 {
    font-size:15px;
    margin:0 0 10px;
}

.feature p {
    font-size:13px;
    color:var(--muted);
    margin:0;
    line-height:1.8;
}

.framework-section {
    margin-top:64px;
}

.section-heading {
    text-align:center;
    margin-bottom:26px;
}

.section-heading h2 {
    font-size:30px;
    letter-spacing:-1px;
    margin:16px 0 9px;
}

.section-heading p {
    color:var(--muted);
    margin:0;
}

.frameworks {
    --accent:#087eaa;
    border-top:2px solid var(--accent);
    transition:border-color .2s;
}

.frameworks[data-framework=preact] {
    --accent:#8854d0;
}

.frameworks[data-framework=solid] {
    --accent:#3678bb;
}

.frameworks[data-framework=vue] {
    --accent:#248765;
}

.frameworks[data-framework=svelte] {
    --accent:#da3d10;
}

:root[data-theme=dark] .frameworks[data-framework=react] {
    --accent:#61dafb;
}

:root[data-theme=dark] .frameworks[data-framework=preact] {
    --accent:#b397ed;
}

:root[data-theme=dark] .frameworks[data-framework=solid] {
    --accent:#76b6ec;
}

:root[data-theme=dark] .frameworks[data-framework=vue] {
    --accent:#42d392;
}

:root[data-theme=dark] .frameworks[data-framework=svelte] {
    --accent:#ff754a;
}

.framework-icon {
    font-size:23px;
    margin-right:12px;
    vertical-align:middle;
}

.framework-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    min-height:460px;
    background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 4%,var(--surface)),var(--surface));
}

.steps {
    padding:25px;
    border-right:1px solid var(--line);
    min-width:0;
}

.steps h3 {
    font-size:12px;
    margin-bottom:12px;
}

.steps pre {
    border:1px solid var(--line);
    border-radius:8px;
    margin-bottom:25px;
    font-size:11px;
}

.command {
    border:1px solid var(--line);
    border-radius:8px;
    padding:14px;
    margin-bottom:26px;
    background:var(--editor-bg);
    font-size:12px;
}

.command span {
    color:var(--accent);
    margin-right:8px;
}

.framework-source {
    min-width:0;
    display:flex;
    flex-direction:column;
}

.framework-source pre {
    font-size:12px;
    flex:1;
}

.profile-preview {
    padding:16px 22px;
}

.profile {
    display:flex;
    gap:18px;
    align-items:center;
    background:var(--surface);
    border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
    padding:20px;
    border-radius:10px;
    margin-top:8px;
}

.avatar {
    width:65px;
    height:65px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:27px;
    font-weight:700;
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 14%,var(--surface));
}

.profile h3 {
    margin:0;
}

.profile p {
    font-size:12px;
    color:var(--muted);
    margin:3px 0 8px;
}

.framework-badge {
    font-size:10px;
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 9%,var(--surface));
    border-radius:4px;
    padding:3px 9px;
}

.start {
    margin-top:40px;
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:40px;
    padding:35px;
    background:linear-gradient(110deg,color-mix(in srgb,var(--blue) 5%,var(--surface)),color-mix(in srgb,var(--purple) 5%,var(--surface)));
}

.start h2 {
    font-size:25px;
    line-height:1.3;
    letter-spacing:-.6px;
}

.start p {
    color:var(--muted);
    font-size:14px;
}

.install-code {
    align-self:center;
    border:1px solid var(--line);
    border-radius:9px;
    padding:25px;
    color:var(--text);
    font-size:14px;
}

footer {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:40px 0;
    color:var(--muted);
    font-size:12px;
}

footer a {
    margin-left:auto;
}

button {
    transition:background .2s,color .2s;
}

@media(max-width:760px) {
    .wrap {
        width:calc(100% - 32px);
    }
    .nav {
        min-height:72px;
        gap:12px;
        flex-wrap:wrap;
        padding:12px 0;
    }
    .nav-links {
        order:3;
        width:100%;
        justify-content:center;
        gap:20px;
        font-size:12px;
    }
    .nav-tools {
        margin-left:auto;
    }
    .hero {
        padding:45px 0 32px;
    }
    h1 {
        letter-spacing:-1.3px;
    }
    .hero p {
        font-size:16px;
    }
    .hero-actions {
        gap:20px;
    }
    .example-grid,.framework-grid,.start {
        grid-template-columns:1fr;
    }
    .source,.steps {
        border-right:0;
        border-bottom:1px solid var(--line);
    }
    .preview {
        min-height:300px;
    }
    .features {
        grid-template-columns:repeat(2,1fr);
    }
    .feature {
        padding:20px;
    }
    .framework-section {
        margin-top:40px;
    }
    .section-heading h2 {
        font-size:26px;
    }
    .tabs button {
        padding:14px 12px;
        font-size:11px;
    }
    .framework-icon {
        font-size:18px;
        margin-right:5px;
    }
    .start {
        padding:24px;
        gap:15px;
    }
    footer {
        flex-wrap:wrap;
    }
    footer a {
        margin-left:0;
    }
    .terminal {
        gap:12px;
        font-size:10px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    * {
        transition:none!important;
    }
}


/* Shared translucent surfaces let the page atmosphere flow through sections. */
:root {
    --glass: rgb(255 255 255 / 48%);
    --glass-soft: rgb(255 255 255 / 26%);
    --glass-line: rgb(120 146 196 / 18%);
}

:root[data-theme="dark"] {
    --glass: rgb(15 28 48 / 40%);
    --glass-soft: rgb(15 28 48 / 20%);
    --glass-line: rgb(156 185 234 / 13%);
}

body {
    background:
        radial-gradient(ellipse at 12% 18%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 38%),
        radial-gradient(ellipse at 95% 44%, color-mix(in srgb, var(--purple) 10%, transparent), transparent 40%),
        radial-gradient(ellipse at 20% 80%, rgb(0 173 216 / 6%), transparent 34%),
        var(--bg);
}

header {
    background: var(--glass-soft);
    border-bottom-color: var(--glass-line);
    backdrop-filter: blur(18px);
}

.panel {
    background: var(--glass);
    border: 1px solid var(--glass-line);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 18px 55px rgb(20 35 70 / 4%);
    backdrop-filter: blur(20px);
}

.showcase {
    border-top: 1px solid var(--glass-line);
}

.tabs,
.framework-grid,
.source,
pre,
.browser-body,
.browser-bar {
    background: transparent;
}

.tabs,
.source,
.steps,
.terminal,
.browser-bar {
    border-color: var(--glass-line);
}

.code-line::before {
    background: var(--bg);
    border-color: var(--glass-line);
}

.preview {
    background: var(--glass-soft);
}

.browser {
    background: var(--glass-soft);
    border-color: var(--glass-line);
    box-shadow: 0 8px 25px rgb(20 35 70 / 3%);
}

.features {
    gap: 0;
    margin-top: 42px;
}

.feature {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 20px 28px;
}

.feature + .feature {
    border-left: 1px solid var(--glass-line);
}

.frameworks {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, transparent), var(--glass-soft));
    border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--glass-line));
}

.steps pre,
.command,
.profile,
.install-code {
    background: var(--glass-soft);
    border-color: var(--glass-line);
    box-shadow: none;
}

.steps pre {
    border: 0;
    border-radius: 0;
}

.start {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--glass-line);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 48px 0 12px;
    margin-top: 56px;
}

.pill {
    background: var(--glass-soft);
}

.nav-tools button,
.nav-tools select {
    background: var(--glass-soft);
    border-color: var(--glass-line);
}

@media (max-width: 760px) {
    .feature {
        padding: 20px;
    }

    .feature:nth-child(3) {
        border-left: 0;
    }

    .feature:nth-child(n+3) {
        border-top: 1px solid var(--glass-line);
    }

    .start {
        padding-top: 32px;
    }
}

/* Open examples: the page itself is the surface. */
.showcase.panel,
.frameworks.panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
}

.showcase > .tabs,
.frameworks > .tabs {
    background: transparent;
    border-bottom-color: var(--glass-line);
}

.source,
.steps {
    border-right: 0;
}

.preview {
    background: transparent;
}

.code-line::before {
    background: transparent;
    backdrop-filter: blur(16px);
    border-right: 0;
}

.terminal {
    background: transparent;
    border-top: 0;
}

.framework-grid {
    background: transparent;
}

.frameworks .tabs button[aria-selected="true"] {
    background: linear-gradient(to top, color-mix(in srgb, var(--accent) 9%, transparent), transparent);
}

@media (max-width: 760px) {
    .source,
    .steps {
        border-bottom: 0;
    }
}

/* Generous section rhythm replaces the former panel boundaries. */
.hero { padding-top: 90px; padding-bottom: 100px; }
.features { margin-top: 100px; margin-bottom: 110px; }
.framework-section { margin-top: 0; }
.framework-section .section-heading { margin-bottom: 44px; }
.framework-grid { padding-top: 22px; }
.start { margin-top: 110px; padding-top: 60px; }
footer { padding-top: 65px; padding-bottom: 40px; }
.setup-heading { margin-bottom: 48px; }
.setup-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; }
.setup-steps { min-width: 0; }
.setup-steps article + article { margin-top: 38px; }
.setup-steps h3 { display: flex; align-items: center; gap: 14px; font-size: 17px; }
.step-number { color: var(--purple); font: 12px ui-monospace, monospace; }
.setup-steps p, .path-help, .preview-caption { font-size: 13px; color: var(--muted); }
.setup-command { position: relative; margin-top: 14px; padding: 14px 40px 14px 16px; border-left: 2px solid color-mix(in srgb, var(--blue) 35%, transparent); background: var(--glass-soft); }
.setup-command pre { color: var(--text); font-size: 12px; line-height: 2; }
.setup-command button { position: absolute; right: 8px; top: 12px; border: 0; background: transparent; color: var(--muted); }
.path-help { margin-top: 12px; }
.path-help summary { cursor: pointer; }
.command-response { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px 0; color: var(--muted); font-size: 12px; }
.command-response .small-label { flex-basis: 100%; font-weight: 400; }
.setup-preview { padding: 0; align-self: start; position: sticky; top: 30px; }
.setup-preview .browser { flex: none; }
.scaffold-preview { min-height: 340px; padding: 8px; background: #fff; color: #000; font-family: "Times New Roman", serif; }
.scaffold-preview h2 { margin: .67em 0; font-size: 32px; }
.preview-caption { margin-top: 6px; }
@media (max-width: 760px) {
    .hero { padding-top: 50px; padding-bottom: 65px; }
    .setup-grid { grid-template-columns: 1fr; gap: 40px; }
    .setup-preview { position: static; }
    .features { margin-top: 65px; margin-bottom: 70px; }
    .start { margin-top: 70px; }
    .setup-heading { margin-bottom: 32px; }
}

/* A quiet installation walkthrough, aligned with its static preview. */
.setup-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 64px;
}

.setup-preview {
    position: static;
    align-self: stretch;
    padding-top: 0;
    gap: 14px;
}

.setup-preview .browser {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.scaffold-preview {
    flex: 1;
    min-height: 260px;
}

.setup-steps article + article {
    margin-top: 28px;
}

.setup-steps h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.step-number {
    font-size: 10px;
    color: var(--muted);
}

.setup-steps > article > p {
    font-size: 12px;
    margin: 0 0 14px 29px;
    line-height: 1.6;
}

.setup-command {
    margin-top: 0;
    padding: 10px 32px 10px 14px;
    border-left: 1px solid var(--glass-line);
    background: transparent;
}

.setup-command pre {
    font-size: 12px;
    line-height: 1.9;
}

.setup-command button {
    opacity: .55;
}

.setup-command:hover button,
.setup-command button:focus-visible {
    opacity: 1;
}

.path-help {
    font-size: 11px;
    margin: 10px 0 0 15px;
}

.command-response {
    padding: 6px 0 0 15px;
    font-size: 11px;
}

.command-response .small-label {
    flex-basis: auto;
    font-size: 10px;
}

.preview-caption {
    font-size: 11px;
    margin: 0;
}

@media (max-width: 760px) {
    .setup-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* Command hierarchy: restrained console tint, distinct from prose. */
.setup-steps h3 {
    color: var(--text);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.2px;
}

.setup-steps .step-number {
    color: var(--purple);
    font-weight: 600;
}

.setup-steps > article > p,
.path-help,
.preview-caption {
    color: var(--muted);
}

.setup-command {
    padding: 14px 36px 14px 16px;
    border: 1px solid var(--glass-line);
    border-left: 2px solid color-mix(in srgb, var(--blue) 45%, transparent);
    border-radius: 7px;
    background: rgb(21 77 143 / 4%);
}

:root[data-theme="dark"] .setup-command {
    background: rgb(2 10 22 / 40%);
}

.setup-command pre {
    color: var(--blue);
    font-size: 12px;
    line-height: 2;
}

.console-line {
    display: inline-flex;
    gap: 12px;
    min-width: 100%;
}

.console-prompt {
    color: var(--purple);
    user-select: none;
    opacity: .75;
}

.command-response > code {
    color: var(--muted);
}

.command-response .small-label {
    opacity: .8;
}

.setup-command pre {
    color: #187348;
}

:root[data-theme="dark"] .setup-command pre {
    color: #8ed6a4;
}

.setup-command {
    border-left-color: rgb(71 160 108 / 40%);
}

.safari-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    background: linear-gradient(#f5f5f7, #e8e8ec);
    border-bottom: 1px solid #d3d4da;
    color: #6c6e78;
}

.safari-controls {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.safari-controls i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6058;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 9%);
}

.safari-controls i:nth-child(2) { background: #ffbd2e; }
.safari-controls i:nth-child(3) { background: #28c840; }

.safari-navigation {
    display: flex;
    gap: 13px;
    font-size: 23px;
    line-height: 1;
}

.safari-navigation span:last-child { opacity: .4; }

.safari-address {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    height: 27px;
    padding: 0 8px;
    border-radius: 6px;
    background: rgb(255 255 255 / 70%);
    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
    font-size: 10px;
}

.safari-address > span:last-child { margin-left: auto; font-size: 15px; }
.safari-address svg { width: 12px; height: 12px; margin-left: auto; }
.safari-share { width: 17px; height: 17px; flex-shrink: 0; }
.safari-toolbar svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

:root[data-theme="dark"] .safari-toolbar {
    background: linear-gradient(#34343b, #29292f);
    color: #b9b9c3;
    border-bottom-color: #202026;
}

:root[data-theme="dark"] .safari-address {
    background: rgb(0 0 0 / 22%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

@media (max-width: 420px) {
    .safari-toolbar { gap: 10px; padding-inline: 12px; }
    .safari-navigation { gap: 8px; }
}

.showcase > .setup-heading {
    padding-top: 40px;
}

@media (max-width: 760px) {
    .showcase > .setup-heading {
        padding-top: 28px;
    }
}

.capabilities {
    margin-top: 100px;
    margin-bottom: 110px;
    padding-top: 44px;
    border-top: 1px solid var(--glass-line);
}

.capabilities .section-heading {
    margin-bottom: 42px;
}


.capabilities .capability-track {
    display: flex;
    margin: 0;
    gap: 24px;
    will-change: transform;
}
.capability-viewport {
    overflow: hidden;
    touch-action: pan-y;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.capabilities .capability-track > .feature {
    flex: 0 0 calc((100% - 72px) / 4);
    min-width: 0;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    padding: 36px 32px 46px;
    background: transparent;
    border: 0;
    border-radius: 0;
    transform-origin: center;
}
.capabilities .feature-icon {
    color: var(--blue);
    font-size: 42px;
    margin-bottom: 60px;
}
.capabilities .feature h3 {
    font-size: 22px;
    line-height: 1.35;
    margin-bottom: 26px;
}
.capabilities .feature p {
    font-size: 16px;
    line-height: 1.85;
    max-width: 28ch;
}
@media (max-width: 900px) {
    .capabilities .capability-track > .feature {
        flex-basis: calc((100% - 24px) / 2);
    }
}
@media (max-width: 760px) {
    .capabilities {
        margin-top: 65px;
        margin-bottom: 70px;
        padding-top: 32px;
    }
}
@media (max-width: 480px) {
    .capabilities .capability-track > .feature {
        flex-basis: 86%;
        padding-inline: 26px;
    }
}


.capability-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}
.capability-controls button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--glass-line);
    border-radius: 50%;
    background: var(--glass-soft);
    color: var(--blue);
    font-size: 20px;
    cursor: pointer;
}
.capability-controls button:hover {
    background: color-mix(in srgb, var(--blue) 10%, transparent);
}

.capabilities .capability-track > .feature {
    border-left: 1px solid var(--glass-line);
}

.capability-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 30px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.capability-doc-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.capabilities-docs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 36px;
    padding: 34px 0 0;
    border-top: 1px solid var(--glass-line);
}
.capabilities-docs h3 { font-size: 21px; margin: 0 0 10px; }
.capabilities-docs p { margin: 0; color: var(--muted); line-height: 1.7; }
.capabilities-docs > a { flex-shrink: 0; }
@media (max-width: 760px) {
    .capabilities-docs { flex-direction: column; align-items: flex-start; gap: 22px; }
}

.framework-command .command-location {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-line);
}
.framework-command .command-location > code { color: var(--accent); }
.framework-command .command-location > span {
    color: var(--muted);
    font-size: 11px;
    margin: 0;
}
.framework-command .command-input { display: flex; gap: 10px; }
.framework-command .command-input > span { margin: 0; }
.framework-command .command-input > code { overflow-wrap: anywhere; }

.framework-command .command-input > code {
    color: #187348;
}

:root[data-theme="dark"] .framework-command .command-input > code {
    color: #8ed6a4;
}

/* Framework identity stays visible across the entire transparent example. */
.framework-section {
    border-top: 1px solid var(--glass-line);
    padding-top: 56px;
}
.framework-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}
.frameworks.panel {
    background:
        radial-gradient(ellipse at 10% 25%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%),
        linear-gradient(120deg, transparent 35%, color-mix(in srgb, var(--accent) 7%, transparent));
}
.frameworks > .tabs {
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, var(--glass-line));
}
.frameworks .tabs button[aria-selected="true"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: linear-gradient(to top, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
}
.frameworks .steps h3,
.frameworks .code-header,
.frameworks .profile-preview > .small-label {
    color: var(--accent);
}
.frameworks .framework-command,
.frameworks .profile {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-line));
    background: color-mix(in srgb, var(--accent) 7%, var(--glass-soft));
}
.frameworks .avatar {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--purple)));
}
@media (max-width: 760px) {
    .framework-section { padding-top: 36px; }
}

.profile-follow {
    margin-top: 12px;
    padding: 7px 16px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.profile-follow[aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent) 26%, transparent);
}
.profile-follow:disabled { cursor: wait; }

.framework-source > pre {
    flex: none;
    height: 320px;
    max-height: 320px;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
}

.frameworks .avatar {
    color: #fff;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 48%, #101c35),
        color-mix(in srgb, var(--accent) 32%, #101c35));
    font-weight: 750;
}

.framework-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding-block: 12px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.framework-doc-link:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.framework-doc-link {
    color: var(--text);
}

:root[data-theme="dark"] .framework-doc-link {
    color: #fff;
}

.tools-section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(230px, 1fr);
    align-items: center;
    gap: 56px;
    margin-top: 100px;
    padding-block: 64px;
    border-top: 1px solid var(--glass-line);
    background: radial-gradient(ellipse at 85% 50%, rgb(104 60 240 / 8%), transparent 55%);
}
.tools-copy h2 { margin: 20px 0 18px; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
.tools-copy p { max-width: 56ch; color: var(--muted); line-height: 1.8; }
.tools-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.tools-actions .text-link { font-size: 13px; }
.tools-art { display: flex; justify-content: center; align-items: center; gap: 0; min-height: 190px; }
.tools-art img { object-fit: contain; filter: drop-shadow(0 10px 28px rgb(50 100 255 / 17%)); }
.tools-connection {
    position: relative;
    width: 88px;
    height: 2px;
    flex-shrink: 0;
    margin-inline: -4px;
    background: linear-gradient(90deg, var(--purple), #23a9f2);
}
.tools-connection::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3699ec;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 5px rgb(54 153 236 / 12%);
}
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; border-top: 1px solid var(--glass-line); padding-block: 32px; }
.footer-brand, .footer-links { display: flex; align-items: center; gap: 16px; }
.footer-links { flex-wrap: wrap; gap: 20px; font-size: 12px; }
.site-footer .footer-links a { margin: 0; }
@media (max-width: 760px) {
    .tools-section { grid-template-columns: 1fr; gap: 24px; margin-top: 65px; padding-block: 40px; }
    .tools-copy { text-align: center; }
    .tools-copy p { margin-inline: auto; }
    .tools-actions { justify-content: center; }
    .tools-art { grid-row: 1; justify-content: center; min-height: 100px; }
    .tools-art img { width: 68px; height: 68px; }
    .site-footer { align-items: flex-start; flex-direction: column; }
}

.tools-section {
    background: none;
    isolation: isolate;
    row-gap: 30px;
}
.tools-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    inset: 8% 0;
    background: radial-gradient(ellipse closest-side at 72% 50%,
        rgb(104 60 240 / 11%) 0%,
        rgb(50 130 255 / 5%) 45%,
        transparent 100%);
}
.tools-heading {
    grid-column: 1 / -1;
    text-align: center;
}
.tools-copy h2 { margin-top: 0; }
@media (max-width: 760px) {
    .tools-art { grid-row: auto; }
    .tools-section::before { inset: 0; }
}

.tools-section::before {
    content: none;
}

.tools-art img {
    filter: none;
}

.installation-options {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(230px, 1fr);
    align-items: center;
    gap: 48px;
    margin-top: 52px;
    padding-top: 38px;
    border-top: 0;
}
.installation-copy p { max-width: 55ch; color: var(--muted); line-height: 1.8; margin-bottom: 24px; }
.installation-logos { display: flex; align-items: center; justify-content: center; gap: 30px; }
.installation-logos img { object-fit: contain; }
:root[data-theme="dark"] .github-logo { filter: invert(1); }
@media (max-width: 760px) {
    .installation-options { grid-template-columns: 1fr; gap: 32px; }
    .installation-logos { justify-content: flex-start; }
    .installation-logos img { height: 48px; width: 56px; }
}

/* Light theme: editorial blue headings, violet metadata, neutral reading surfaces. */
:root:not([data-theme="dark"]) {
    --bg: #fbfcff;
    --text: #182235;
    --muted: #4c5668;
    --blue: #285fc4;
    --purple: #76569a;
    --line: #d3dcf1;
    --glass-line: #d5dfef;
    --glass-soft: rgb(255 255 255 / 65%);
}
:root:not([data-theme="dark"]) body {
    background:
        radial-gradient(ellipse at 5% 12%, #eaf2ff 0, transparent 38%),
        radial-gradient(ellipse at 100% 58%, #f0edfc 0, transparent 38%),
        var(--bg);
}
:root:not([data-theme="dark"]) header { background: rgb(255 255 255 / 80%); }
:root:not([data-theme="dark"]) :is(.section-heading h2, .tools-copy h2, .capabilities-docs h3, .feature h3, .setup-steps h3) {
    color: #285fc4;
}
:root:not([data-theme="dark"]) :is(.feature p, .section-heading p, .tools-copy p, .installation-copy p, .capabilities-docs p) {
    color: #252c38;
}
:root:not([data-theme="dark"]) .pill {
    color: #76569a;
    background: #f2eff9;
    border-color: #ddd5ed;
}
:root:not([data-theme="dark"]) :is(.small-label, .step-number) { color: #76569a; }
:root:not([data-theme="dark"]) .setup-command {
    background: rgb(255 255 255 / 75%);
    border-color: #d8e2f0;
    border-left-color: #84b89a;
}
:root:not([data-theme="dark"]) .capability-controls button {
    background: #edf2ff;
    border-color: #d3dff5;
}
:root:not([data-theme="dark"]) .frameworks.panel { background: none; }
:root:not([data-theme="dark"]) .frameworks > .tabs {
    background: #f0f3f9;
    border-bottom-color: #d3dcf1;
}
:root:not([data-theme="dark"]) .frameworks .tabs button {
    color: #4c5668;
}
:root:not([data-theme="dark"]) .frameworks .tabs button[aria-selected="true"] {
    color: var(--accent);
    background: #fff;
    border-bottom: 3px solid var(--accent);
}
:root:not([data-theme="dark"]) .frameworks .framework-grid {
    background: linear-gradient(135deg, #ffffffb3, #ffffff40);
}
:root:not([data-theme="dark"]) .frameworks .steps h3 {
    color: #285fc4;
}
:root:not([data-theme="dark"]) .frameworks .code-header {
    color: #76569a;
    background: #f6f7fb;
    border-bottom: 1px solid #e1e6ef;
}
:root:not([data-theme="dark"]) .framework-source > pre {
    background: #ffffffb3;
}
:root:not([data-theme="dark"]) .frameworks .framework-command {
    background: #fff;
    border-color: #dce3ee;
    border-left: 2px solid var(--accent);
}
:root:not([data-theme="dark"]) .frameworks .command-location > code {
    color: #76569a;
}
:root:not([data-theme="dark"]) .frameworks .profile-preview > .small-label {
    color: #76569a;
}
:root:not([data-theme="dark"]) .frameworks .profile {
    background: #fff;
    border-color: #dce3ee;
    box-shadow: 0 6px 18px -12px #263e6750;
}
:root:not([data-theme="dark"]) .frameworks .profile-follow {
    background: color-mix(in srgb, var(--accent) 7%, white);
    border-color: color-mix(in srgb, var(--accent) 35%, white);
}
:root:not([data-theme="dark"]) .frameworks .profile-follow[aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent) 17%, white);
}

/* Give the light theme more typographic presence and framework identity. */
:root:not([data-theme="dark"]) :is(.section-heading h2, .tools-copy h2) {
    font-weight: 750;
    letter-spacing: -.035em;
}
:root:not([data-theme="dark"]) :is(.feature h3, .setup-steps h3) {
    font-weight: 700;
}
:root:not([data-theme="dark"]) .pill {
    font-weight: 650;
    letter-spacing: .045em;
}
:root:not([data-theme="dark"]) .framework-source > pre,
:root:not([data-theme="dark"]) .steps > pre {
    background: #fff;
    box-shadow: 0 2px 5px rgb(32 55 95 / 4%), 0 10px 26px -12px rgb(32 55 95 / 23%);
    border-radius: 6px;
}
:root:not([data-theme="dark"]) .frameworks .tabs button[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent) 12%, white);
    box-shadow: inset 0 -3px var(--accent);
    font-weight: 700;
}
:root:not([data-theme="dark"]) .frameworks .steps h3 {
    color: var(--accent);
    font-weight: 700;
}
:root:not([data-theme="dark"]) .frameworks .code-header {
    border-top: 2px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, white);
}
:root:not([data-theme="dark"]) .frameworks .profile {
    border-left: 3px solid var(--accent);
}
:root:not([data-theme="dark"]) .frameworks .profile-follow {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}
:root:not([data-theme="dark"]) .frameworks .profile-follow[aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent) 80%, #182235);
}

.frameworks.panel {
    border-radius: 15px;
    overflow: hidden;
}

.capabilities-docs {
    border-top: 0;
}

.install-page { padding-top: 64px; padding-bottom: 80px; }
.install-heading h1 { font-size: clamp(32px, 4vw, 50px); margin: 18px 0; letter-spacing: -.04em; }
.install-platform-note { max-width: 850px; margin: 28px auto 60px; padding: 18px 24px; border-left: 3px solid var(--purple); background: var(--glass-soft); color: var(--muted); }
.install-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 56px; }
.install-nav { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 28px; align-self: start; }
.install-nav a { padding: 8px 14px; color: var(--muted); border-left: 2px solid var(--glass-line); font-size: 14px; }
.install-nav a:hover { color: var(--blue); border-color: var(--blue); background: var(--glass-soft); }
.install-content { min-width: 0; }
.install-method { padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--glass-line); scroll-margin-top: 30px; }
.install-method h2 { font-size: 28px; color: var(--blue); margin: 0 0 18px; }
.install-method h3 { margin: 28px 0 16px; }
.install-method p { color: var(--muted); line-height: 1.85; }
.install-recommended { display: inline-block; color: var(--purple); background: var(--glass-soft); padding: 3px 12px; border-radius: 20px; font-size: 12px; }
.install-method details { margin-top: 24px; }
.install-method summary { cursor: pointer; color: var(--blue); }
.install-method .setup-command { margin: 20px 0; }
.install-method pre { overflow: auto; }
.release-downloads { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 24px 0; }
.release-download { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass-soft); }
.release-download:hover { border-color: var(--blue); }
.release-download span { color: var(--muted); font-size: 13px; }
.release-download small { overflow-wrap: anywhere; font-size: 11px; margin-top: 12px; }
.install-file { padding: 18px; border: 1px solid var(--glass-line); border-radius: 10px; background: var(--glass-soft); font-size: 13px; }
@media(max-width:760px) {
    .install-layout { grid-template-columns: 1fr; gap: 30px; }
    .install-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .install-platform-note { margin-bottom: 30px; }
    .install-page { padding-top: 40px; }
    .release-downloads { grid-template-columns: 1fr; }
}

.docs-layout { display:grid; grid-template-columns:220px minmax(0,800px) 190px; justify-content:center; max-width:1500px; margin:0 auto; min-height:75vh; }
.docs-sidebar,.docs-toc { padding:30px 22px; align-self:start; position:sticky; top:0; max-height:100vh; overflow-y:auto; }
.docs-sidebar { border-right:1px solid var(--glass-line); }
.docs-toc { border-left:1px solid var(--glass-line); }
.docs-menu > summary,.docs-toc summary { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; cursor:pointer; margin-bottom:26px; }
.docs-nav-group { margin:26px 0; }
.docs-nav-group h2 { font-size:12px; color:var(--text); margin:0 0 12px; }
.docs-nav-group a,.docs-nav-group > span { display:block; font-size:13px; padding:6px 12px; border-left:1px solid var(--glass-line); color:var(--muted); }
.docs-nav-group > span { opacity:.7; }
.docs-nav-group a[aria-current="page"] { color:var(--blue); background:color-mix(in srgb,var(--blue) 9%,transparent); border-left:3px solid var(--blue); border-radius:0 5px 5px 0; }
.docs-coming { font-size:11px; color:var(--muted); }
.docs-help { display:block; margin-top:24px; font-size:12px; }
.docs-article { padding:32px 42px 64px; min-width:0; }
.docs-breadcrumbs { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--muted); margin-bottom:30px; }
.docs-breadcrumbs [aria-current] { color:var(--blue); }
.docs-heading h1 { font-size:36px; letter-spacing:-.035em; margin:0 0 14px; }
.docs-heading p { color:var(--muted); line-height:1.8; }
.docs-article .install-platform-note { margin:24px 0 38px; padding:14px 18px; font-size:13px; }
.docs-article .install-method h2 { font-size:24px; }
.docs-article .install-method { padding-bottom:32px; margin-bottom:32px; }
.docs-article .install-method p { font-size:14px; }
.docs-toc-links { display:flex; flex-direction:column; gap:4px; }
.docs-toc-links a { color:var(--muted); font-size:12px; padding:6px 10px; border-left:2px solid transparent; }
.docs-toc-links a:hover,.docs-toc-links a[aria-current="location"] { color:var(--blue); border-color:var(--blue); }
@media(max-width:1100px) {
 .docs-layout { grid-template-columns:190px minmax(0,1fr); }
 .docs-toc { display:none; }
 .docs-article { padding-inline:30px; }
}
@media(max-width:760px) {
 .docs-layout { display:flex; flex-direction:column; }
 .docs-sidebar { position:static; max-height:none; width:100%; border-right:0; border-bottom:1px solid var(--glass-line); padding:18px 24px; }
 .docs-menu > summary { margin-bottom:0; }
 .docs-article { padding:28px 24px 48px; width:100%; }
}

#user-path {
    padding: 14px 18px;
    border: 1px solid var(--glass-line);
    border-radius: 8px;
}
#user-path .setup-command pre { max-height: 230px; overflow: auto; }

.docs-next { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--glass-line); }
.docs-next > h2, .docs-prose .docs-next > h2 { margin: 0 0 14px; font-size: 25px; color: var(--blue); scroll-margin-top: 32px; }
.docs-next-description p { margin: 0 0 20px; line-height: 1.85; font-size: 15px; }
.docs-next > .button { max-width: 100%; white-space: normal; }

.install-planned-label { font-size: 12px; }
.linux-package-panel { margin-top: 28px; --accent: var(--blue); }
.linux-package-panel > .tabs { background: transparent; }
.linux-package-content { padding: 8px 0 0; min-width: 0; }
.linux-package-section { margin-top: 28px; padding-top: 4px; border-top: 1px solid var(--glass-line); }
.package-fingerprint { overflow-wrap: anywhere; }

.setup-command .console-comment { color: var(--muted); }

:root:not([data-theme="dark"]) #linux-packages .setup-command {
    background: #f2f5fa;
    border-color: #d8e1ed;
    border-left-color: #84b89a;
    box-shadow: 0 3px 10px rgb(30 54 89 / 5%);
}

/* Documentation navigation and imported articles share the existing page surface. */
.docs-menu-label { margin: 0 0 22px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.docs-nav-group { margin: 0 0 18px; }
.docs-nav-group > summary { cursor: pointer; padding: 8px 0; font-size: 13px; font-weight: 650; color: var(--text); }
.docs-nav-group[open] > summary { margin-bottom: 8px; }
.docs-nav-group a:hover { color: var(--blue); }
.docs-prose { line-height: 1.85; overflow-wrap: anywhere; }
.docs-prose h2 { margin: 38px 0 16px; font-size: 25px; color: var(--blue); scroll-margin-top: 32px; }
.docs-prose h3 { margin: 30px 0 12px; font-size: 19px; scroll-margin-top: 32px; }
.docs-prose p, .docs-prose li { font-size: 15px; }
.docs-prose hr { border: 0; border-top: 1px solid var(--glass-line); margin: 32px 0; }
.docs-prose :not(pre) > code { background: var(--glass-soft); border-radius: 4px; padding: 2px 5px; color: var(--purple); font-size: .9em; }
.docs-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.docs-prose th, .docs-prose td { text-align: left; border: 1px solid var(--glass-line); padding: 10px 14px; }
.docs-prose blockquote { margin: 24px 0; padding: 1px 18px; border-left: 3px solid var(--blue); background: var(--glass-soft); }
.docs-prose img { max-width: 100%; }
.docs-code { margin: 24px 0; border: 1px solid var(--glass-line); border-radius: 9px; overflow: hidden; background: var(--glass-soft); }
.docs-code-bar { display: flex; justify-content: space-between; padding: 8px 14px; color: var(--muted); border-bottom: 1px solid var(--glass-line); font-size: 12px; }
.docs-code-bar button { background: none; border: 0; color: var(--blue); }
.docs-code pre { margin: 0; padding: 16px; overflow: auto; max-height: 540px; font-size: 12px; }
.docs-code pre:has(.highlighted-code) { padding-left: 0; }
.docs-toc-links .toc-level-3 { padding-left: 20px; }
@media (max-width: 760px) {
 .docs-menu { max-height: 280px; overflow-y: auto; }
 .docs-menu-label { margin-bottom: 10px; }
 .docs-prose h2 { font-size: 22px; }
}

/* Documentation examples share one compact baseline in both themes. */
.docs-code pre { line-height: 1.75; }
:root:not([data-theme="dark"]) .docs-nav-group > summary { color: #255bc0; }
:root:not([data-theme="dark"]) .docs-sidebar > p { color: #76569a; }

/* Site-wide navigation connects pages; section anchors stay in the docs. */
.nav-links { gap: 24px; align-items: center; }
.nav-links a { white-space: nowrap; padding-block: 10px; border-bottom: 2px solid transparent; }
.nav-links a[aria-current] { color: var(--blue); border-bottom-color: var(--blue); }
.nav-tools { align-items: center; }
.nav-start { font-size: 12px; padding: 10px 14px; white-space: nowrap; }
.footer-links a[aria-current] { color: var(--blue); text-decoration: underline; text-underline-offset: 5px; }
.footer-brand { max-width: 100%; }
@media (max-width: 1080px) {
    .nav { flex-wrap: wrap; gap: 12px; padding-block: 14px; }
    .nav-tools { margin-left: auto; }
    .nav-links { order: 3; width: 100%; justify-content: center; gap: 24px; }
}
@media (max-width: 480px) {
    .nav { gap: 8px; }
    .nav-links { gap: 10px; justify-content: space-between; font-size: 11px; }
    .nav-tools { gap: 5px; }
    .nav-tools select, .nav-tools button { padding: 6px; }
    .nav-start { font-size: 11px; padding: 9px; }
    .nav .brand { font-size: 23px; gap: 6px; }
    .nav .brand img { width: 30px; height: 30px; }
    .footer-links { gap: 16px 20px; }
}

/* The home hero's atmosphere spans the page, without a panel edge. */
.home-hero { position: relative; isolation: isolate; }
.hero-content { position: relative; z-index: 1; }
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-atmosphere::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 26% 40%, rgb(0 166 235 / 12%), transparent 47%), radial-gradient(ellipse at 76% 35%, rgb(125 65 240 / 12%), transparent 48%);
    mask-image: linear-gradient(transparent, #000 18%, #000 65%, transparent);
}
.hero-geometry { position: absolute; width: min(100%, 1600px); height: 100%; left: 50%; transform: translateX(-50%); }
.hero-cube { opacity: .7; stroke-width: 1.2; }
.hero-traces { color: var(--blue); opacity: .22; }
.home-hero .pill { display: inline-flex; align-items: center; gap: 9px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.hero-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 10%, transparent); }
.home-hero h1 { text-wrap: balance; }
.home-hero .hero-actions .primary { box-shadow: 0 8px 26px -10px rgb(74 76 245 / 55%); }
:root[data-theme="dark"] .hero-atmosphere::before { opacity: .85; }
:root[data-theme="dark"] .hero-cube { opacity: .55; }
@media (max-width: 1100px) {
    .hero-geometry { opacity: .35; }
}
@media (max-width: 760px) {
    .hero-geometry { display: none; }
    .home-hero h1 { letter-spacing: -.04em; }
}

.home-hero {
    min-height: clamp(620px, 78svh, 840px);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
@media (max-width: 760px) {
    .home-hero { min-height: 620px; min-height: clamp(560px, 78svh, 700px); }
}

/* Native language control, with a themed picker where supported. */
.nav-tools select[data-language] {
    appearance: none;
    min-width: 66px;
    padding: 7px 28px 7px 10px;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    color: var(--text);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%237688a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.nav-tools select[data-language]:hover { border-color: var(--blue); }
.nav-tools select[data-language]:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.nav-tools select[data-language] option { color: var(--text); background: var(--surface); }
@supports (appearance: base-select) {
    .nav-tools select[data-language],
    .nav-tools select[data-language]::picker(select) { appearance: base-select; }
    .nav-tools select[data-language]::picker-icon { display: none; }
    .nav-tools select[data-language]::picker(select) {
        margin-top: 6px;
        padding: 5px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        box-shadow: var(--shadow);
        min-width: 90px;
    }
    .nav-tools select[data-language] option {
        padding: 8px 10px;
        border-radius: 6px;
        font-size: 12px;
        gap: 10px;
    }
    .nav-tools select[data-language] option:checked {
        color: var(--blue);
        background: color-mix(in srgb, var(--blue) 10%, var(--surface));
    }
    .nav-tools select[data-language] option:hover,
    .nav-tools select[data-language] option:focus {
        background: color-mix(in srgb, var(--blue) 16%, var(--surface));
        outline: none;
    }
    .nav-tools select[data-language] option::checkmark { color: var(--blue); }
}

.nav-tools select[data-language],
.nav-tools button[data-theme-toggle] {
    height: 38px;
    box-sizing: border-box;
    flex-shrink: 0;
}
.nav-tools button[data-theme-toggle] {
    width: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0;
}

.nav-tools select[data-language] {
    padding-block: 0;
    text-align: center;
    text-align-last: center;
}
@supports (appearance: base-select) {
    .nav-tools select[data-language] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Installation methods: one centered group, with the main action below. */
.installation-options {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 30px;
    text-align: center;
}
.installation-copy p {
    margin: 0;
    max-width: 60ch;
}
.installation-options > .button {
    white-space: normal;
}
.installation-logos {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    width: min(100%, 720px);
    gap: 20px;
    padding: 0;
}
.installation-method-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: var(--muted);
    font-size: 11px;
    border-radius: 8px;
}
.installation-logos .installation-method-link img,
.installation-logos .installation-method-link svg {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.installation-method-link img[src="/install/go.svg"] { width: 67px; }
.installation-method-link:hover { color: var(--blue); }
.installation-method-link:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}
.curl-logo { color: var(--purple); }
:root[data-theme="dark"] .linux-logo { filter: invert(1); }
@media (max-width: 760px) {
    .installation-options { gap: 26px; }
    .installation-logos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: min(100%, 400px);
        gap: 18px 12px;
    }
}

/* Shared footer */
.site-footer {
    display: block;
    padding-block: 56px 24px;
}
.site-footer a { margin: 0; }
.footer-main {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding-bottom: 48px;
}
.footer-intro .brand { display: inline-flex; }
.footer-intro p {
    max-width: 26ch;
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.8;
}
.footer-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.footer-group h2 {
    margin: 6px 0 8px;
    font-size: 13px;
    font-weight: 650;
    color: var(--text);
}
:root:not([data-theme="dark"]) .footer-group h2 { color: var(--blue); }
.footer-group a { font-size: 13px; line-height: 1.6; }
.footer-group a:hover,
.footer-legal a:hover { color: var(--blue); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--glass-line);
    font-size: 12px;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 760px) {
    .site-footer { padding-block: 40px 24px; }
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
        padding-bottom: 32px;
    }
    .footer-intro p { font-size: 13px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}