:root {
    color-scheme: light;
    --bg: #f7f8fc;
    --surface: #fff;
    --ink: #111827;
    --muted: #475569;
    --line: #d4dbea;
    --tint: #edf1ff;
    --accent: #315cf6;
}
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bg: #080d19;
    --surface: #101827;
    --ink: #f8fafc;
    --muted: #b6c0d3;
    --line: #34415a;
    --tint: #222f4a;
    --accent: #94aaff;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); background: var(--bg); font: 1rem/1.5 "Segoe UI", sans-serif; }
.wrap { width: min(72rem, 92%); margin-inline: auto; }
header, footer { background: var(--surface); }
header { border-bottom: 1px solid var(--line); }
.foot, .bar nav, .brand { display: flex; align-items: center; }
.bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-inline: auto;
    padding: .75rem;
}
/* Use the same container widths as the public site's Bootstrap header. */
@media (min-width: 576px) { .bar { max-width: 540px; } }
@media (min-width: 768px) { .bar { max-width: 720px; } }
@media (min-width: 992px) { .bar { max-width: 960px; } }
@media (min-width: 1200px) { .bar { max-width: 1140px; } }
@media (min-width: 1400px) { .bar { max-width: 1320px; } }
.brand { justify-self: start; gap: .7rem; white-space: nowrap; font-size: 1.1rem; font-weight: 700; }
.brand img { display: block; width: auto; height: 3rem; max-width: 12rem; object-fit: contain; }
a { color: inherit; }
.bar a { text-decoration: none; }
.bar nav { justify-self: center; justify-content: center; gap: .25rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 1.5rem; padding: .25rem; }
.bar nav a { padding: .42rem .72rem; border-radius: 999px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.bar nav a:hover { color: var(--ink); }
.bar nav a[aria-current="page"] { background: var(--tint); color: var(--ink); }
select, button { padding: .4rem .6rem; border-radius: .4rem; }
button, select { font: inherit; background: var(--surface); border: 1px solid var(--line); color: inherit; cursor: pointer; }
main { flex: 1; padding-block: clamp(3rem, 9vw, 8rem); }
h1 { margin: 0 0 .8rem; line-height: 1.05; font-size: clamp(2.5rem, 7vw, 5rem); letter-spacing: -.045em; }
.intro { margin: 0; max-width: 46ch; font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: var(--muted); }
footer { border-top: 1px solid var(--line); }
.foot { gap: 1.5rem; flex-wrap: wrap; padding-block: 1rem; }
.foot span { margin-inline-end: auto; }
.skip { position: absolute; left: 1rem; top: -5rem; background: var(--surface); padding: .6rem; }
.skip:focus { top: .25rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.preferences { display: flex; justify-self: end; gap: .5rem; align-items: center; }
.preferences select { min-width: 7.5rem; max-width: min(14rem, 46vw); }
[data-theme-toggle] { width: 2.5rem; height: 2.5rem; border-radius: 50%; padding: 0; font-size: 1.15rem; }
[data-bs-theme="dark"] .moon, .sun { display: none; }
[data-bs-theme="dark"] .sun { display: inline; }
main:has(.folder-feature) { padding-block: clamp(2rem, 4vw, 3.75rem); }
main:has(.home-hero) {
    width: min(81rem, 92%);
    padding-block: clamp(2.5rem, 5vw, 5rem);
}
@media (max-width: 1199.98px) {
    .bar { grid-template-columns: 1fr auto; gap: .5rem; }
    .bar nav { grid-row: 2; grid-column: 1 / -1; }
    .preferences { grid-row: 1; grid-column: 2; }
}
@media (max-width: 540px) {
    .bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .preferences { margin-inline-start: auto; }
    .bar nav { order: 1; margin-inline: auto; }
}
@media (max-width: 65rem) {
    .foot { gap: .75rem; }
}
.product-info { max-width: 64ch; }
.product-info h1 { font-size: clamp(2.1rem, 3.55vw, 3.25rem); }
.product-info .intro { font-size: 1.2rem; }
.product-info a { color: var(--accent); }
.bar.launch-bar { grid-template-columns: 1fr auto; }