:root {
    color-scheme: dark light;
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --bg: #0b0c0a;
    --card: #111713;
    --text: #f1f5f2;
    --hint: #91a096;
    --signal: #22d3ee;
    --border: #29312b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    background-image: linear-gradient(rgba(34, 211, 238, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, .05) 1px, transparent 1px);
    background-size: 64px 64px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
}
a { color: var(--signal); text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid rgba(34, 211, 238, .45); outline-offset: 4px; }
.legal-header, .legal-layout, .legal-footer { width: min(calc(100% - 32px), 1120px); margin-inline: auto; }
.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}
.legal-header div { display: flex; gap: 16px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none; }
.back-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.brand { color: var(--signal); font-weight: 800; text-transform: uppercase; }
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 720px); justify-content: space-between; gap: 56px; padding: 48px 0 80px; }
.legal-nav { position: sticky; top: 24px; align-self: start; display: grid; gap: 4px; border-top: 1px solid var(--border); }
.legal-nav strong { padding: 18px 12px 12px; text-transform: uppercase; }
.legal-nav a { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--hint); text-decoration: none; }
.legal-nav a:hover { color: var(--signal); background: rgba(34, 211, 238, .06); }
.legal-nav span { color: var(--signal); font-variant-numeric: tabular-nums; }
.legal-document { min-width: 0; }
.legal-document h1 { margin: 0 0 24px; font-size: clamp(30px, 6vw, 54px); line-height: 1.05; letter-spacing: -.05em; }
.legal-document h2 { scroll-margin-top: 24px; margin: 70px 0 22px; padding-top: 18px; border-top: 1px solid var(--border); font-size: clamp(22px, 4vw, 30px); line-height: 1.2; }
.legal-document h3 { margin: 36px 0 14px; color: var(--signal); font-size: 17px; }
.legal-document p { margin: 0 0 14px; }
.legal-document ul { margin: 0 0 22px; padding-left: 24px; }
.legal-document li + li { margin-top: 8px; }
.important-note { margin-bottom: 40px; padding: 18px; border: 1px solid var(--signal); background: rgba(34, 211, 238, .07); color: var(--text); }
.legal-footer { padding: 28px 0 48px; border-top: 1px solid var(--border); }

@media (prefers-color-scheme: light) {
    :root { --bg: #f7f7f8; --card: #ffffff; --text: #111713; --hint: #56615a; --signal: #007c91; --border: #d8dfda; }
}
@media (max-width: 760px) {
    .legal-header { align-items: flex-start; }
    .legal-header div { display: grid; gap: 2px; text-align: right; }
    .legal-layout { grid-template-columns: 1fr; gap: 32px; padding-top: 28px; }
    .legal-nav { position: static; }
    .legal-document h2 { margin-top: 52px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }