/* SPDX-FileCopyrightText: 2026 Aleksandr Kvintilyanov <bednyj.mops@gmail.com>
   SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL */

:root {
    --bg: #0a0c11;
    --bg-soft: #10131a;
    --surface: rgba(255, 255, 255, 0.04);
    --surface-strong: rgba(255, 255, 255, 0.07);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #eef1f7;
    --text-dim: #a8b0c2;
    --text-faint: #7d869a;
    --accent: #5b9dff;
    --accent-2: #89b4fa;
    --accent-soft: rgba(91, 157, 255, 0.14);
    --radius: 16px;
    --radius-lg: 22px;
    --max: 1180px;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 520px at 12% -6%, rgba(91, 157, 255, 0.18), transparent 62%),
        radial-gradient(760px 480px at 92% 4%, rgba(137, 180, 250, 0.12), transparent 60%),
        radial-gradient(900px 700px at 50% 108%, rgba(76, 141, 255, 0.08), transparent 65%);
    pointer-events: none;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 650; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.06rem; }
p { margin: 0 0 1em; color: var(--text-dim); }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre { font-family: var(--mono); }
code { font-size: 0.88em; background: var(--surface-strong); border: 1px solid var(--border); border-radius: 6px; padding: 0.1em 0.36em; color: #dce6ff; }
kbd { font-size: 0.8em; background: var(--surface-strong); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; padding: 0.12em 0.42em; color: var(--text); white-space: nowrap; }
strong { color: var(--text); }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: #04101f; padding: 10px 16px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* --- nav --- */
.nav {
    position: sticky; top: 0; z-index: 40;
    backdrop-filter: blur(14px);
    background: rgba(10, 12, 17, 0.72);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.nav.is-scrolled { border-bottom-color: var(--border); background: rgba(10, 12, 17, 0.9); }
.nav-inner {
    max-width: var(--max); margin: 0 auto; padding: 12px 22px;
    display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; color: var(--accent-2); }
.brand-icon { width: 26px; height: 26px; fill: none; stroke: var(--accent-2); stroke-width: 1.6; stroke-linecap: round; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { color: var(--text-dim); font-size: 0.93rem; padding: 7px 11px; border-radius: 9px; }
.nav-links a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: flex; padding: 3px; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.lang-switch button {
    font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--text-faint); background: none; border: 0; border-radius: 7px;
    padding: 4px 10px; cursor: pointer;
}
.lang-switch button.is-active { color: #06101f; background: var(--accent-2); }

/* --- buttons --- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 12px; font-size: 0.95rem; font-weight: 600;
    border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; fill: currentColor; }
.btn-primary { background: linear-gradient(180deg, #6ea8ff, #4c8dff); color: #05101f; box-shadow: 0 10px 26px rgba(76, 141, 255, 0.28); }
.btn-primary:hover { background: linear-gradient(180deg, #7fb3ff, #5b9dff); }
.btn-outline { border-color: var(--border-strong); color: var(--text); background: var(--surface); }
.btn-outline:hover { border-color: var(--accent-2); background: var(--surface-strong); }
.btn-ghost { color: var(--text-dim); padding: 9px 14px; }
.btn-ghost:hover { color: var(--text); background: var(--surface); }

/* --- hero --- */
.hero { position: relative; padding: clamp(48px, 7vw, 96px) 22px clamp(40px, 5vw, 72px); }
.hero-glow { position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 0%, rgba(91, 157, 255, 0.16), transparent 70%); pointer-events: none; }
.hero-inner {
    position: relative; max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center;
}
.badge {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    padding: 7px 15px; font-size: 0.84rem; color: var(--text-dim); margin-bottom: 22px;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 0 4px rgba(110, 231, 168, 0.16); }
.lead { font-size: 1.07rem; max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 34px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 30px; margin: 0; padding: 0; }
.hero-stats div { min-width: 120px; }
.hero-stats dt { font-size: 1.35rem; font-weight: 700; color: var(--text); }
.hero-stats dd { margin: 2px 0 0; font-size: 0.86rem; color: var(--text-faint); }
.hero-shot { margin: 0; }
.hero-shot img {
    width: 100%; height: auto; display: block; border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong); box-shadow: var(--shadow);
    background: #0d1017;
}
.hero-shot figcaption { margin-top: 12px; font-size: 0.85rem; color: var(--text-faint); text-align: center; }

/* --- sections --- */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 88px) 22px; }
.section-head { max-width: 70ch; margin-bottom: 34px; }
.section-head p { font-size: 1.02rem; }

/* --- cards --- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 16px; }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; font-size: 0.93rem; }
.card-icon { width: 30px; height: 30px; margin-bottom: 14px; fill: none; stroke: var(--accent-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* --- gallery --- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.shot {
    display: flex; flex-direction: column;
    padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
    background: #0d1017; cursor: zoom-in; text-align: left; font: inherit; color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.shot:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.shot img { width: 100%; height: auto; display: block; }
.shot span { display: block; margin-top: auto; padding: 11px 14px; font-size: 0.87rem; color: var(--text-dim); border-top: 1px solid var(--border); }

/* --- tables --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table thead th { color: var(--text-faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table td { color: var(--text-dim); }
.table-keys th { width: 190px; color: var(--text); font-weight: 600; }

/* --- split --- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 26px; }
.split-settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.split h3 { margin-bottom: 6px; }
.tabs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tabs-list li { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 16px 18px; }
.tabs-list p { margin: 0; font-size: 0.92rem; }
.settings-shot { margin: 0; }
.settings-shot img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.settings-shot figcaption { margin-top: 12px; font-size: 0.85rem; color: var(--text-faint); }

/* --- code --- */
.code {
    margin: 0; padding: 16px 18px; overflow-x: auto;
    background: #070910; border: 1px solid var(--border); border-radius: 12px;
    font-size: 0.83rem; line-height: 1.55; color: #cfe0ff;
}
.code code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; white-space: pre; }
/* A code row is one framed block: the snippet scrolls in the first column and
   the copy button sits in the second one, so the two can never overlap (a
   padding on the scroller would not reserve anything - the text still runs
   under an absolutely positioned button while scrolling). */
.code-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start;
    margin: 14px 0; padding: 12px 14px 12px 16px;
    background: #070910; border: 1px solid var(--border); border-radius: 12px;
}
.code-row .code { padding: 4px 0; background: none; border: 0; border-radius: 0; }
.code::-webkit-scrollbar { height: 8px; }
.code::-webkit-scrollbar-track { background: transparent; }
.code::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
.code::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }
.copy {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: var(--surface-strong); border: 1px solid var(--border-strong); color: var(--text-dim);
}
.copy:hover { color: var(--text); border-color: var(--accent-2); }
.copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.copy.is-done { color: #6ee7a8; border-color: #6ee7a8; }

/* --- install --- */
.install-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.install-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.install-primary { border-color: rgba(91, 157, 255, 0.4); background: linear-gradient(180deg, rgba(91, 157, 255, 0.1), rgba(255, 255, 255, 0.02)); }
.install-card p { font-size: 0.93rem; }
.muted { color: var(--text-faint); font-size: 0.86rem; }
.note { margin-top: 22px; padding: 16px 18px; border-radius: 12px; background: var(--accent-soft); border: 1px solid rgba(91, 157, 255, 0.25); font-size: 0.94rem; }

/* --- notes list --- */
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.notes li { padding-left: 28px; position: relative; color: var(--text-dim); font-size: 0.95rem; }
.notes li::before { content: ""; position: absolute; left: 6px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); }

/* --- footer --- */
.footer { border-top: 1px solid var(--border); margin-top: 40px; background: rgba(255, 255, 255, 0.015); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 40px 22px; display: grid; gap: 22px; }
.footer-title { font-weight: 650; color: var(--text); margin: 0 0 6px; }
.footer-inner p { margin: 0; max-width: 78ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.92rem; }

/* --- lightbox --- */
.lightbox {
    position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
    background: rgba(4, 6, 10, 0.9); backdrop-filter: blur(6px); padding: 4vh 4vw; cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 12px; border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.lightbox-close {
    position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; font-size: 1.5rem; line-height: 1;
    background: var(--surface-strong); border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text); cursor: pointer;
}

/* --- reveal --- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- responsive --- */
@media (max-width: 1000px) {
    .hero-inner { grid-template-columns: 1fr; }
    .split, .split-settings { grid-template-columns: 1fr; }
    .nav-links { display: none; }
}
@media (max-width: 620px) {
    body { font-size: 16px; }
    .nav-github span { display: none; }
    .hero-stats { gap: 20px; }
    .gallery { grid-template-columns: 1fr; }
    .table-keys th { width: auto; }
}