@charset "utf-8";
/* CSS Document */
:root {
    --font-size-xs: calc(var(--font-size-lg)*0.85);
    --font-size-sm: .86rem;
    --font-size-base: .9rem;
    --font-size-lg: 1rem;
    --fix-size-base: 1rem;
    --app-em: var(--font-size-lg);
    --brand: #0976b4;
    --brand-deep: #0c5f7e;
    --brand-dark: #2e384d;
    --brand-tint: #eaf3fa;
    --brand-tint-2: #dbeaf6;
    --bg: #f4f7fb;
    --bg-fade: rgba(244, 247, 251, 0);
    --paper: #ffffff;
    --soft: #f8fafd;
    --ink: #333c47;
    --head: #2e384d;
    --muted: #595f64;
    --line: #e0e8f3;
    --line-soft: #edf2f8;
    --danger: #ff4f57;
    --warn: #e67605;
    --ok: #21b632;
    --accent: #6686a3;
    --accent-ink: #ffffff;
    --negative: #9c6259;
    --accent-soft: #e8f0f6;
    --accent-strong: #496c8b;
    --accent-hover-soft: #dfeaf2;
    --sage-soft: #e9efea;
    --sage-ink: #596f60;
    --sage-hover: #dee7e0;
    --mist-soft: #eeecf1;
    --mist-ink: #645d6f;
    --mist-hover: #e4e1e9;
    --amber-soft: #f6efe3;
    --amber-ink: #795a2f;
    --amber-hover: #eee3d2;
    --rose-soft: #f4e8e5;
    --rose-ink: #80524b;
    --rose-hover: #eadbd7;
    --news-text: #333;
    --image-brightness: 1;
    --image-contrast: 1;
    --image-saturate: 1;
    --ink-2: #4d5a6b;
    --ink-3: #3d4856;
    --nav-ink: #4a5768;
    --dot: #c1cad2;
    --cal-off: #b7c6da;
    --grad-tint: #eef5fb;
    --on-brand: #ffffff;
    --grid-line: rgba(9, 118, 180, .09);
    --panel-veil: rgba(255, 255, 255, .72);
    --mark-bg: linear-gradient(140deg, #1a8fd0, #0976b4 45%, #0c5f7e);
    --band-bg: linear-gradient(125deg, #0c5f7e, #0976b4 70%, #1489cc);
    --band-fg: #ffffff;
    --band-ink: #0c5f7e;
    --card-sheen: rgba(255, 255, 255, .9);
    --glow: rgba(19, 170, 255, .15);
    --code-bg: #f5f8fc;
    --code-bar: #eef3f9;
    --code-ink: #37475c;
    --ok-soft: #e6f7e8;
    --ok-ink: #147d20;
    --danger-soft: #ffeced;
    --danger-ink: #c9333b;
    --warn-soft: #fdf0e0;
    --warn-ink: #a35304;
    --note-bg: #fdf6ec;
    --note-ink: #7a5320;
    --note-strong: #5f3f14;
    --quote-head-bg: #496c8b;
    --quote-head-ink: #ffffff;
    --quote-body-bg: #e8f0f6;
    --quote-body-ink: #2c4f68;
    --quote-line: #496c8b;
    --quote-link: #0c5f7e;
    --quote-shadow: 0 var(--hair) calc(var(--app-em)*0.1875) rgba(39, 58, 75, .12),0 var(--hair) calc(var(--app-em)*0.125) rgba(39, 58, 75, .16);
    --quote-title-shadow: var(--hair) var(--hair) calc(var(--app-em)*0.125) rgba(31, 45, 58, .42);
    --callout-ink: #2c4f68;
    --util-ink: #c2d3e6;
    --util-strong: #ffffff;
    --foot-ink: #a9b8cd;
    --foot-link: #cbd7e6;
    --foot-sub: #7f92ab;
    --foot-dim: #8b9db5;
    --release-bg: linear-gradient(150deg, #35405a, #2e384d 55%, #1f293c);
    --release-ink: #cbd9e8;
    --release-accent: #5fb8e8;
    --release-link: #7cc7ef;
    --radius: calc(var(--app-em)*1);
    --radius-sm: calc(var(--app-em)*0.5);
    --radius-lg: calc(var(--app-em)*1.375);
    --container: calc(var(--app-em)*85);
    --gutter: calc(var(--app-em)*1.5);
    --shadow: 0 calc(var(--app-em)*1.125) calc(var(--app-em)*3.375) rgba(39, 58, 75, .09);
    --shadow-soft: 0 calc(var(--app-em)*0.5) calc(var(--app-em)*1.75) rgba(39, 58, 75, .07);
    --shadow-tiny: 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.875) rgba(39, 58, 75, .05);
    --shadow-card: 0 calc(var(--app-em)*1.125) calc(var(--app-em)*3.375) rgba(39, 58, 75, .09),0 calc(var(--app-em)*-0.15) calc(var(--app-em)*0.5) rgba(39, 58, 75, .05);
    --shadow-lift: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*3) rgba(9, 118, 180, .16);
    --fs-micro: var(--font-size-xs);
    --fs-meta: calc(var(--app-em)*0.9375);
    --fs-sm: var(--app-em);
    --fs-ui: calc(var(--app-em)*0.95);
    --fs-body: calc(var(--app-em)*1.125);
    --fs-lead: calc(var(--app-em)*1.1);
    --fs-h4: calc(var(--app-em)*1.25);
    --fs-h3: calc(var(--app-em)*1.4);
    --fs-h2: calc(var(--app-em)*1.6);
    --fs-h1: calc(var(--app-em)*2);
    --fs-display: calc(var(--app-em)*2.25);
    --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    color-scheme: light;
    --surface: var(--paper);
    --surface-soft: var(--soft);
    --surface-sunk: #eef2f7;
    --text: var(--ink);
    --positive: var(--ok-ink);
    --positive-soft: var(--ok-soft);
    --negative-soft: var(--rose-soft);
    --sage: #8fa896;
    --star: #c9992f;
    --star-off: #d4dae0;
    --sp-1: calc(var(--app-em)*0.25);
    --sp-2: calc(var(--app-em)*0.5);
    --sp-3: calc(var(--app-em)*0.75);
    --sp-4: calc(var(--app-em)*1);
    --sp-5: calc(var(--app-em)*1.25);
    --sp-6: calc(var(--app-em)*1.5);
    --sp-7: calc(var(--app-em)*1.75);
    --sp-8: calc(var(--app-em)*2);
    --sp-10: calc(var(--app-em)*2.5);
    --sp-12: calc(var(--app-em)*3);
    --r-xs: calc(var(--app-em)*0.375);
    --r-sm: calc(var(--app-em)*0.5);
    --r-md: calc(var(--app-em)*0.625);
    --r-lg: calc(var(--app-em)*0.8125);
    --r-xl: calc(var(--app-em)*1.375);
    --r-pill: calc(var(--app-em)*6.25);
    --hair: calc(var(--app-em)*0.0625);
    --control-h: calc(var(--app-em)*2.5);
    --head-offset: calc(var(--app-em)*6);
    --shadow-menu: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*3.5) rgba(24, 39, 53, .18),0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(24, 39, 53, .12);
    --shadow-modal: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*4) rgba(24, 39, 53, .28),0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(24, 39, 53, .16);
    --code-border: #dfe6ee;
    --code-comment: #69788a;
    --code-punct: #5f6f7e;
    --code-value: #8c1d54;
    --code-string: #3f6b1f;
    --code-operator: #8a5f2b;
    --code-keyword: #0a5f8a;
    --code-function: #b8304c;
    --code-variable: #27388a;
    --code-regex: #8a5a00;
    --code-select: #b3d4fc;
    --code-shadow: 0 var(--hair) #fff
}

@media (min-width: 1500px) and (min-resolution:2dppx) {
    :root {
        --font-vw-term:1.05vw;
        --font-size-xs: calc(var(--font-size-lg)*0.85);
        --font-size-sm: clamp(0.86rem, calc(var(--font-vw-term) - 0.12rem), 1.16rem);
        --font-size-base: clamp(0.9rem, calc(var(--font-vw-term) - 0.08rem), 1.2rem);
        --font-size-lg: clamp(1rem, calc(var(--font-vw-term) + 0.02rem), 1.3rem)
    }
}

:root[data-theme="dark"] {
    --bg: #131820;
    --bg-fade: rgba(19, 24, 32, 0);
    --paper: #1b222c;
    --soft: #222a35;
    --ink: #dee4ea;
    --head: #eef2f6;
    --muted: #94a2b0;
    --line: #2b3440;
    --line-soft: #232c37;
    --brand: #7cb8e0;
    --brand-deep: #a3d1f0;
    --brand-dark: #0e141c;
    --brand-tint: #1a2a3a;
    --brand-tint-2: #21374a;
    --danger: #d09187;
    --warn: #d3b788;
    --ok: #7cae92;
    --accent: #7ea2c2;
    --accent-ink: #101821;
    --negative: #d09187;
    --accent-soft: #1f2c3a;
    --accent-strong: #9cc0dd;
    --accent-hover-soft: #26374a;
    --sage-soft: #22302a;
    --sage-ink: #a9c5b1;
    --sage-hover: #2a3a33;
    --mist-soft: #2a2734;
    --mist-ink: #b9b1c7;
    --mist-hover: #33303f;
    --amber-soft: #2d2619;
    --amber-ink: #d3b788;
    --amber-hover: #3a3020;
    --rose-soft: #33241f;
    --rose-ink: #d09187;
    --rose-hover: #402d27;
    --news-text: #b7c2cc;
    --image-brightness: .8;
    --image-contrast: 1.05;
    --image-saturate: .95;
    --ink-2: #b7c2cc;
    --ink-3: #b7c2cc;
    --nav-ink: #b0bcc8;
    --dot: #4a5563;
    --cal-off: #55606d;
    --grad-tint: #1e2a37;
    --grid-line: rgba(124, 184, 224, .07);
    --panel-veil: rgba(255, 255, 255, .035);
    --mark-bg: linear-gradient(140deg, #2a7fae, #175f88 45%, #0f4460);
    --band-bg: linear-gradient(125deg, #103b56, #12557a 70%, #16688f);
    --band-fg: #eaf2f8;
    --band-ink: #0b2a3d;
    --shadow-lift: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*3) rgba(0, 0, 0, .45);
    --card-sheen: rgba(255, 255, 255, .06);
    --glow: rgba(124, 184, 224, .10);
    --on-brand: #0f1720;
    --code-bg: #141b24;
    --code-bar: #1c242e;
    --code-ink: #cfd8e2;
    --ok-soft: #1e2c25;
    --ok-ink: #a9d3b8;
    --danger-soft: #33241f;
    --danger-ink: #e0aaa1;
    --warn-soft: #2d2619;
    --warn-ink: #e2c79c;
    --note-bg: #2a2318;
    --note-ink: #dcc49b;
    --note-strong: #f0dcb8;
    --quote-head-bg: #355f7d;
    --quote-head-ink: #f4f8fb;
    --quote-body-bg: #1f2c3a;
    --quote-body-ink: #d7e7f0;
    --quote-line: #6f98b8;
    --quote-link: #a3d1f0;
    --quote-shadow: 0 var(--hair) calc(var(--app-em)*0.1875) rgba(0, 0, 0, .34),0 var(--hair) calc(var(--app-em)*0.125) rgba(0, 0, 0, .28);
    --quote-title-shadow: var(--hair) var(--hair) calc(var(--app-em)*0.125) rgba(0, 0, 0, .48);
    --callout-ink: #b8d4e8;
    --util-ink: #9aa8b6;
    --util-strong: #eef2f6;
    --foot-ink: #93a1b0;
    --foot-link: #b8c4d0;
    --foot-sub: #6d7c8c;
    --foot-dim: #7e8c9b;
    --release-bg: linear-gradient(150deg, #243040, #1b222c 55%, #151b24);
    --release-ink: #b7c2cc;
    --release-accent: #7cb8e0;
    --release-link: #a3d1f0;
    --shadow: 0 calc(var(--app-em)*1.125) calc(var(--app-em)*3.375) rgba(0, 0, 0, .45);
    --shadow-soft: 0 calc(var(--app-em)*0.5) calc(var(--app-em)*1.75) rgba(0, 0, 0, .34);
    --shadow-tiny: 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.875) rgba(0, 0, 0, .3);
    --shadow-card: 0 calc(var(--app-em)*1.125) calc(var(--app-em)*3.375) rgba(0, 0, 0, .45),0 calc(var(--app-em)*-0.15) calc(var(--app-em)*0.5) rgba(0, 0, 0, .3);
    color-scheme: dark;
    --surface-sunk: #171e27;
    --positive: var(--ok-ink);
    --positive-soft: var(--ok-soft);
    --negative-soft: var(--rose-soft);
    --sage: #6f8d7a;
    --star: #e0b263;
    --star-off: #3a4552;
    --shadow-menu: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*3.5) rgba(0,0,0,.62),0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(0,0,0,.4);
    --shadow-modal: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*4) rgba(0,0,0,.62),0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(0,0,0,.4);
    --code-border: #2b3440;
    --code-comment: #8798aa;
    --code-punct: #9aa8b6;
    --code-value: #e59ac0;
    --code-string: #a9cf94;
    --code-operator: #d8b98a;
    --code-keyword: #8bbcdd;
    --code-function: #f09a99;
    --code-variable: #adb9f2;
    --code-regex: #e0b263;
    --code-select: #2c4159;
    --code-shadow: none
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:#131820;
        --bg-fade: rgba(19, 24, 32, 0);
        --paper: #1b222c;
        --soft: #222a35;
        --ink: #dee4ea;
        --head: #eef2f6;
        --muted: #94a2b0;
        --line: #2b3440;
        --line-soft: #232c37;
        --brand: #7cb8e0;
        --brand-deep: #a3d1f0;
        --brand-dark: #0e141c;
        --brand-tint: #1a2a3a;
        --brand-tint-2: #21374a;
        --danger: #d09187;
        --warn: #d3b788;
        --ok: #7cae92;
        --accent: #7ea2c2;
        --accent-ink: #101821;
        --negative: #d09187;
        --accent-soft: #1f2c3a;
        --accent-strong: #9cc0dd;
        --accent-hover-soft: #26374a;
        --sage-soft: #22302a;
        --sage-ink: #a9c5b1;
        --sage-hover: #2a3a33;
        --mist-soft: #2a2734;
        --mist-ink: #b9b1c7;
        --mist-hover: #33303f;
        --amber-soft: #2d2619;
        --amber-ink: #d3b788;
        --amber-hover: #3a3020;
        --rose-soft: #33241f;
        --rose-ink: #d09187;
        --rose-hover: #402d27;
        --news-text: #b7c2cc;
        --ink-2: #b7c2cc;
        --ink-3: #b7c2cc;
        --nav-ink: #b0bcc8;
        --dot: #4a5563;
        --cal-off: #55606d;
        --grad-tint: #1e2a37;
        --grid-line: rgba(124, 184, 224, .07);
        --panel-veil: rgba(255, 255, 255, .035);
        --mark-bg: linear-gradient(140deg, #2a7fae, #175f88 45%, #0f4460);
        --band-bg: linear-gradient(125deg, #103b56, #12557a 70%, #16688f);
        --band-fg: #eaf2f8;
        --band-ink: #0b2a3d;
        --shadow-lift: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*3) rgba(0, 0, 0, .45);
        --card-sheen: rgba(255, 255, 255, .06);
        --glow: rgba(124, 184, 224, .10);
        --on-brand: #0f1720;
        --image-brightness: .8;
        --image-contrast: 1.05;
        --image-saturate: .95;
        --code-bg: #141b24;
        --code-bar: #1c242e;
        --code-ink: #cfd8e2;
        --ok-soft: #1e2c25;
        --ok-ink: #a9d3b8;
        --danger-soft: #33241f;
        --danger-ink: #e0aaa1;
        --warn-soft: #2d2619;
        --warn-ink: #e2c79c;
        --note-bg: #2a2318;
        --note-ink: #dcc49b;
        --note-strong: #f0dcb8;
        --quote-head-bg: #355f7d;
        --quote-head-ink: #f4f8fb;
        --quote-body-bg: #1f2c3a;
        --quote-body-ink: #d7e7f0;
        --quote-line: #6f98b8;
        --quote-link: #a3d1f0;
        --quote-shadow: 0 var(--hair) calc(var(--app-em)*0.1875) rgba(0, 0, 0, .34),0 var(--hair) calc(var(--app-em)*0.125) rgba(0, 0, 0, .28);
        --quote-title-shadow: var(--hair) var(--hair) calc(var(--app-em)*0.125) rgba(0, 0, 0, .48);
        --callout-ink: #b8d4e8;
        --util-ink: #9aa8b6;
        --util-strong: #eef2f6;
        --foot-ink: #93a1b0;
        --foot-link: #b8c4d0;
        --foot-sub: #6d7c8c;
        --foot-dim: #7e8c9b;
        --release-bg: linear-gradient(150deg, #243040, #1b222c 55%, #151b24);
        --release-ink: #b7c2cc;
        --release-accent: #7cb8e0;
        --release-link: #a3d1f0;
        --shadow: 0 calc(var(--app-em)*1.125) calc(var(--app-em)*3.375) rgba(0, 0, 0, .45);
        --shadow-soft: 0 calc(var(--app-em)*0.5) calc(var(--app-em)*1.75) rgba(0, 0, 0, .34);
        --shadow-tiny: 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.875) rgba(0, 0, 0, .3);
        --shadow-card: 0 calc(var(--app-em)*1.125) calc(var(--app-em)*3.375) rgba(0, 0, 0, .45),0 calc(var(--app-em)*-0.15) calc(var(--app-em)*0.5) rgba(0, 0, 0, .3);
        color-scheme: dark;
        --surface-sunk: #171e27;
        --positive: var(--ok-ink);
        --positive-soft: var(--ok-soft);
        --negative-soft: var(--rose-soft);
        --sage: #6f8d7a;
        --star: #e0b263;
        --star-off: #3a4552;
        --shadow-menu: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*3.5) rgba(0,0,0,.62),0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(0,0,0,.4);
        --shadow-modal: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*4) rgba(0,0,0,.62),0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(0,0,0,.4);
        --code-border: #2b3440;
        --code-comment: #8798aa;
        --code-punct: #9aa8b6;
        --code-value: #e59ac0;
        --code-string: #a9cf94;
        --code-operator: #d8b98a;
        --code-keyword: #8bbcdd;
        --code-function: #f09a99;
        --code-variable: #adb9f2;
        --code-regex: #e0b263;
        --code-select: #2c4159;
        --code-shadow: none
    }
}

@media (prefers-reduced-motion:no-preference) {
    @view-transition {
        navigation: auto
    }
}

.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: calc(var(--app-em)*1.85);
    height: calc(var(--app-em)*1.85);
    border: 0;
    background: rgba(255,255,255,.08);
    border-radius: var(--r-xs);
    color: inherit;
    cursor: pointer;
    transition: background-color .18s ease,color .18s ease
}

.theme-toggle:hover {
    background: rgba(255,255,255,.18);
    color: var(--util-strong)
}

.theme-toggle .ico {
    width: calc(var(--app-em)*.95);
    height: calc(var(--app-em)*.95)
}

[data-theme-toggle] .ico-sun {
    display: none
}

:root[data-theme="dark"] [data-theme-toggle] .ico-moon {
    display: none
}

:root[data-theme="dark"] [data-theme-toggle] .ico-sun {
    display: block
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [data-theme-toggle] .ico-moon {
        display:none
    }

    :root:not([data-theme="light"]) [data-theme-toggle] .ico-sun {
        display: block
    }
}

*,*::after,*::before {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%
}


a {
    color: inherit;
    text-decoration: none
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.022em
}

p {
    margin: 0
}

ol,ul {
    margin: 0;
    padding: 0
}

button,input,select,textarea {
    font: inherit;
    color: inherit
}

:focus-visible {
    outline: 0;
    outline-offset: none
}

::selection {
    background: var(--brand-tint-2);
    color: var(--head)
}

.wrap {
    width: min(var(--container),calc(100% - var(--gutter)*2));
    margin-inline:auto}



.ico {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto
}

.utility {
    background: var(--brand-dark);
    color: var(--util-ink);
    font-size: var(--fs-micro)
}

.utility .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    min-height: calc(var(--app-em)*2.4)
}

.utility a {
    color: inherit
}

.utility a:hover {
    color: var(--util-strong)
}

.utility-note {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.5);
    letter-spacing: .02em
}

.utility-note::before {
    content: "";
    width: calc(var(--app-em)*.4);
    height: calc(var(--app-em)*.4);
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 calc(var(--app-em)*.22) rgba(33,182,50,.22)
}


.utility-menu .sep {
    width: var(--hair);
    height: calc(var(--app-em)*.9);
    background: rgba(255,255,255,.18)
}

.utility-license {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.35);
    white-space: nowrap
}

.utility-license .ico {
    width: calc(var(--app-em)*.9);
    height: calc(var(--app-em)*.9)
}

.lang {
    display: inline-flex;
    gap: calc(var(--app-em)*.4)
}

.lang b {
    color: var(--util-strong);
    font-weight: 600
}

.masthead {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    padding-block:calc(var(--app-em)*0.6) calc(var(--app-em)*0.55);background: linear-gradient(var(--bg) 72%,var(--bg-fade))
}

.masthead .wrap {
    position: relative;
    padding-inline:calc(var(--app-em)*1.1);background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card)
}

.header-main {
    /* display: flex; */
    /* align-items: center; */
    /* gap: var(--gutter); */
    /* min-height: calc(var(--app-em)*4.5); */
}

.read-progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: calc(var(--app-em)*.15);
    overflow: hidden;
    border-end-start-radius: var(--radius);
    border-end-end-radius: var(--radius)
}

.read-progress[hidden] {
    display: none
}

.read-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg,var(--brand),var(--brand-deep))
}

.header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--app-em)*.35);
    margin-inline-start:auto}

.icon-button {
    /* display: grid; */
    /* place-items: center; */
    /* flex: none; */
    /* width: calc(var(--app-em)*2.35); */
    /* height: calc(var(--app-em)*2.35); */
    /* border: 0; */
    /* background: var(--soft); */
    /* border-radius: var(--r-md); */
    /* color: var(--muted); */
    /* cursor: pointer; */
    /* transition: background-color .18s ease,color .18s ease; */
}

.icon-button:hover,.icon-button[aria-expanded="true"] {
    background: var(--brand-tint);
    color: var(--brand)
}

.icon-button .ico {
    width: calc(var(--app-em)*1.1);
    height: calc(var(--app-em)*1.1)
}

.icon-button .ico-close {
    display: none
}

.icon-button[aria-expanded="true"] .ico-open {
    display: none
}

.icon-button[aria-expanded="true"] .ico-close {
    display: block
}

.search-panel {
    padding-block-end:calc(var(--app-em)*0.9)}

.search-panel[hidden] {
    display: none
}

.search-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: calc(var(--app-em)*.5)
}

.search-form input {
    min-width: 0;
    height: calc(var(--app-em)*2.8);
    padding-inline:calc(var(--app-em)*0.9);background: var(--soft);
    border: var(--hair) solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    font-size: var(--fs-ui)
}

.search-form input:focus {
    outline: 0;
    border-color: var(--brand);
    background: var(--paper);
    box-shadow: 0 0 0 calc(var(--app-em)*.2) var(--brand-tint)
}

.search-hint {
    margin-block-start:calc(var(--app-em)*0.5);color: var(--muted);
    font-size: var(--fs-meta)
}

.search-hint a {
    color: var(--muted)
}

.search-hint a:hover {
    color: var(--brand)
}

.btn-login .ico {
    width: calc(var(--app-em)*1);
    height: calc(var(--app-em)*1)
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.7);
    flex: 0 0 auto;
    color: inherit
}

.brand .mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: calc(var(--app-em)*2.5);
    height: calc(var(--app-em)*2.5);
    background: var(--mark-bg);
    border-radius: calc(var(--app-em)*.7);
    box-shadow: 0 calc(var(--app-em)*.35) calc(var(--app-em)*.85) rgba(9,118,180,.28)
}

.brand .mark img {
    width: calc(var(--app-em)*1.65);
    height: auto
}

.brand-name {
    display: block;
    color: var(--head);
    font-size: calc(var(--app-em)*1.345);
    font-weight: 700;
    line-height: 1.1
}

.brand-copy {
    display: block
}

.brand-short {
    display: none;
    color: var(--head);
    font-size: calc(var(--app-em)*1.345);
    font-weight: 700;
    line-height: 1
}

.brand-sub {
    display: block;
    color: var(--muted);
    font-size: calc(var(--app-em)*.6);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-block-start:calc(var(--app-em)*0.15)}

.nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: calc(var(--app-em)*.15);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none
}

.nav::-webkit-scrollbar {
    display: none
}

.nav.is-dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none
}

.nav.has-fade-left {
    -webkit-mask-image: linear-gradient(to left,#000 calc(100% - calc(var(--app-em)*2)),transparent);
    mask-image: linear-gradient(to left,#000 calc(100% - calc(var(--app-em)*2)),transparent)
}

.nav.has-fade-right {
    -webkit-mask-image: linear-gradient(to right,#000 calc(100% - calc(var(--app-em)*2)),transparent);
    mask-image: linear-gradient(to right,#000 calc(100% - calc(var(--app-em)*2)),transparent)
}

.nav.has-fade-left.has-fade-right {
    -webkit-mask-image: linear-gradient(to right,transparent,#000 calc(var(--app-em)*2),#000 calc(100% - calc(var(--app-em)*2)),transparent);
    mask-image: linear-gradient(to right,transparent,#000 calc(var(--app-em)*2),#000 calc(100% - calc(var(--app-em)*2)),transparent)
}

.page .nav.is-submenu-open {
    -webkit-mask-image: none;
    mask-image: none
}

.nav > a,.nav-group {
    flex: none
}

.nav a:not(.nav-cta) {
    position: relative;
    padding: calc(var(--app-em)*.55) calc(var(--app-em)*.6);
    color: var(--nav-ink);
    font-size: var(--fs-ui);
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: color .18s ease,background-color .18s ease
}

.nav a:not(.nav-cta):hover {
    color: var(--head);
    background: var(--soft)
}

.nav a:not(.nav-cta)[aria-current] {
    color: var(--brand);
    font-weight: 600
}

.nav a:not(.nav-cta)[aria-current]::after {
    content: "";
    position: absolute;
    inset-inline: calc(var(--app-em)*0.6);
    inset-block-end: calc(var(--app-em)*0.02);
    height: calc(var(--app-em)*.15);
    border-radius: calc(var(--app-em)*.1);
    background: var(--brand)
}

.nav-group {
    position: relative
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.3);
    padding: calc(var(--app-em)*.55) calc(var(--app-em)*.6);
    border: 0;
    background: 0 0;
    border-radius: var(--radius-sm);
    color: var(--nav-ink);
    font-size: var(--fs-ui);
    font-weight: 500;
    cursor: pointer;
    transition: color .18s ease,background-color .18s ease
}

.nav-toggle:hover {
    color: var(--head);
    background: var(--soft)
}

.nav-toggle[aria-expanded="true"] {
    color: var(--brand);
    background: var(--brand-tint)
}

.nav-toggle .ico {
    width: var(--app-em);
    height: var(--app-em);
    transition: transform .18s ease
}

.nav-toggle[aria-expanded="true"] .ico {
    transform: rotate(180deg)
}

.submenu {
    position: absolute;
    z-index: 5;
    inset-block-start: calc(100% + var(--app-em)*0.45);
    inset-inline-start: 0;
    display: none;
    min-width: calc(var(--app-em)*15);
    max-width: min(calc(var(--app-em)*24),calc(100vw - var(--app-em)*1.5));
    padding: calc(var(--app-em)*.45);
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-menu)
}

.submenu.open {
    display: grid
}

.submenu.submenu--floating {
    position: fixed;
    inset: auto;
    inset-inline-start: var(--submenu-left);
    inset-block-start: calc(var(--submenu-top) + var(--app-em) * 0.7);
    max-width: min(calc(var(--app-em)*24),calc(100vw - var(--app-em)*1.5));
    max-height: calc(100dvh - var(--submenu-top) - var(--app-em)*.75);
    overflow-y: auto
}

.submenu a {
    min-width: 0;
    overflow: hidden;
    padding: calc(var(--app-em)*.55) calc(var(--app-em)*.7);
    border-radius: var(--r-md);
    color: var(--ink);
    font-size: var(--fs-ui);
    text-overflow: ellipsis;
    white-space: nowrap
}

.submenu a:hover {
    background: var(--brand-tint);
    color: var(--brand-deep)
}

.nav-cta {
    margin-inline-start:calc(var(--app-em)*.6);box-shadow: 0 calc(var(--app-em)*.25) calc(var(--app-em)*.6) rgba(9,118,180,.22)
}

.burger {
    display: none
}

.sr-only {
    position: absolute!important;
    inset: 0 auto auto 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0
}

.btn-ghost,.btn-main,.btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--app-em)*.5);
    padding: calc(var(--app-em)*.62) calc(var(--app-em)*1.15);
    border: var(--hair) solid transparent;
    border-radius: calc(var(--app-em)*.6);
    font-size: var(--fs-ui);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: .015em;
    transition: background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease
}

.btn-ghost:active,.btn-main:active,.btn-quiet:active {
    transform: translateY(calc(var(--app-em)*.05))
}

.btn-main {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 calc(var(--app-em)*.5) calc(var(--app-em)*1.1) rgba(9,118,180,.24)
}

.btn-main:hover {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
    color: var(--on-brand)
}

.btn-ghost {
    background: var(--paper);
    border-color: var(--line);
    color: var(--head)
}

.btn-ghost:hover {
    border-color: var(--brand);
    color: var(--brand)
}

.btn-quiet {
    background: 0 0;
    color: var(--muted);
    padding-inline:calc(var(--app-em)*0.5)}

.btn-quiet: hover {
    color:var(--brand)
}

.btn-ghost.btn-sm,.btn-login.btn-sm,.btn-main.btn-sm,.btn-quiet.btn-sm,.nav-cta.btn-sm {
    min-height: auto;
    padding: calc(var(--app-em)*.5) calc(var(--app-em)*.9);
    font-size: var(--fs-meta)
}

.btn-ghost.btn-wide,.btn-main.btn-wide,.btn-quiet.btn-wide {
    width: 100%
}

.chip {
    --chip-bg: var(--accent-soft);
    --chip-ink: var(--accent-strong);
    --chip-hover-bg: var(--accent-hover-soft);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.35);
    height: calc(var(--app-em)*1.6875);
    padding-inline:calc(var(--app-em)*0.6875);background: var(--chip-bg);
    color: var(--chip-ink);
    border-radius: var(--radius-sm);
    font-size: var(--fs-meta);
    font-weight: 600;
    transition: background-color .18s ease,color .18s ease
}

a.chip:hover {
    background: var(--chip-hover-bg);
    color: var(--chip-ink)
}

.chip-ok {
    --chip-bg: var(--sage-soft);
    --chip-ink: var(--sage-ink);
    --chip-hover-bg: var(--sage-hover)
}

.chip-warn {
    --chip-bg: var(--amber-soft);
    --chip-ink: var(--amber-ink);
    --chip-hover-bg: var(--amber-hover)
}

.chip-danger {
    --chip-bg: var(--rose-soft);
    --chip-ink: var(--rose-ink);
    --chip-hover-bg: var(--rose-hover)
}

.chip-mist {
    --chip-bg: var(--mist-soft);
    --chip-ink: var(--mist-ink);
    --chip-hover-bg: var(--mist-hover)
}

.cat-link,.chip.chip--category {
    --chip-bg: var(--accent-soft);
    --chip-ink: var(--accent-strong);
    --chip-hover-bg: var(--accent-hover-soft)
}

.cat-link-1,.chip.chip--cat-link-1 {
    --chip-bg: var(--sage-soft);
    --chip-ink: var(--sage-ink);
    --chip-hover-bg: var(--sage-hover)
}

.cat-link-2,.chip.chip--cat-link-2 {
    --chip-bg: var(--brand-tint);
    --chip-ink: var(--brand-deep);
    --chip-hover-bg: var(--brand-tint-2)
}

.cat-link-3,.chip.chip--cat-link-3 {
    --chip-bg: var(--accent-soft);
    --chip-ink: var(--accent-strong);
    --chip-hover-bg: var(--accent-hover-soft)
}

.cat-link-4,.chip.chip--cat-link-4 {
    --chip-bg: var(--mist-soft);
    --chip-ink: var(--mist-ink);
    --chip-hover-bg: var(--mist-hover)
}

.cat-link-5,.chip.chip--cat-link-5 {
    --chip-bg: var(--rose-soft);
    --chip-ink: var(--rose-ink);
    --chip-hover-bg: var(--rose-hover)
}

.cat-link-6,.chip.chip--cat-link-6 {
    --chip-bg: var(--sage-soft);
    --chip-ink: var(--sage-ink);
    --chip-hover-bg: var(--sage-hover)
}

.cat-link-7,.chip.chip--cat-link-7 {
    --chip-bg: var(--amber-soft);
    --chip-ink: var(--amber-ink);
    --chip-hover-bg: var(--amber-hover)
}

.cat-link-23,.chip.chip--cat-link-23 {
    --chip-bg: var(--brand-tint);
    --chip-ink: var(--brand-deep);
    --chip-hover-bg: var(--brand-tint-2)
}

.cat-link-33,.chip.chip--cat-link-33 {
    --chip-bg: var(--ok-soft);
    --chip-ink: var(--ok-ink);
    --chip-hover-bg: var(--sage-hover)
}

.cat-link {
    background-color: var(--chip-bg);
    color: var(--chip-ink)
}

.chip > .cat-link:is(:hover, :focus-visible),.chip.chip--category.is-link-active {
    background-color: var(--chip-hover-bg);
    color: var(--chip-ink)
}

.chip > .cat-link:focus-visible,.chips--tags a:focus-visible {
    outline: calc(var(--hair)*2) solid var(--brand);
    outline-offset: var(--sp-1)
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.5);
    color: var(--brand);
    font-size: var(--fs-ui);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase
}

.eyebrow::before {
    content: "";
    width: calc(var(--app-em)*1.4);
    height: var(--hair);
    background: currentColor
}

.meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.9);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.meta > span {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.35)
}

.meta b {
    color: var(--head);
    font-weight: 600
}

.date {
    display: inline-flex;
    align-items: baseline;
    gap: calc(var(--app-em)*.4);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.date .ico {
    width: var(--app-em);
    height: var(--app-em);
    align-self: center;
    color: var(--brand)
}

.date b {
    color: var(--head);
    font-weight: 650
}

.crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.5);
    color: var(--muted);
    font-size: var(--fs-meta);
    padding-block:calc(var(--app-em)*1.1)}

.crumbs a {
    color: var(--muted)
}

.crumbs a:hover {
    color: var(--brand)
}

.crumbs .sep {
    color: var(--cal-off)
}

.crumbs span[aria-current] {
    color: var(--head)
}

.layout {
    /* display: grid; */
    /* grid-template-columns: minmax(0,1fr) calc(var(--app-em)*22); */
    gap: calc(var(--app-em)*2);
    align-items: start;
    padding-block-end:calc(var(--app-em)*2);
    }

.page-head {
    padding-block-end: calc(var(--app-em)*1.5)
}

.page-head h1 {
    font-size: var(--fs-h1)
}

.page-head p {
    color: var(--muted);
    font-size: var(--fs-lead);
    margin-block-start:calc(var(--app-em)*0.6);max-width: calc(var(--app-em)*36)
}

.card {
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft)
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gutter);
    margin-block-end:calc(var(--app-em)*1.35)}

.section-head h2 {
    font-size: var(--fs-h2);
    margin-block-start:calc(var(--app-em)*0.5)}

.section-head a {
    font-size: var(--fs-ui);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.35)
}

.feed {
    display: grid;
    gap: calc(var(--app-em)*1.1)
}

.post {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    padding: calc(var(--app-em)*1.35) calc(var(--app-em)*1.35) calc(var(--app-em)*.75) calc(var(--app-em)*1.7);
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    transition: box-shadow .2s ease
}

.post-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--app-em)*.9)
}

.post-head {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--app-em)*.8);
    border-block-end:var(--hair) solid var(--line-soft);padding-block-end: calc(var(--app-em) * 0.55)
}

.post-head h1,.post-head h2,.post-head h3 {
    flex: 1 1 auto;
    min-width: 0
}

.post-head .chip {
    flex: 0 0 auto;
    margin-inline-start:auto;white-space: nowrap
}

.post-head__date {
    display: none
}

.post > .post-body > .post-head h2,.post > .post-body > .post-head h3 {
    font-size: var(--fs-h3)
}

.post > .post-body > .post-head h2 a,.post > .post-body > .post-head h3 a {
    color: var(--head)
}

.post > .post-body > .post-head h2 a:hover,.post > .post-body > .post-head h3 a:hover {
    color: var(--brand)
}

.post-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.8);
    margin-block-start:auto;padding-block-start:calc(var(--app-em)*0.55);border-block-start: var(--hair) solid var(--line-soft)
}

.more {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.35);
    font-weight: 600;
    font-size: var(--fs-ui)
}

.more .ico {
    transition: transform .18s ease
}

.post:hover .more .ico {
    transform: translateX(calc(var(--app-em)*.2))
}

.meta .rating,.post .rating {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.45);
    font-size: var(--fs-meta);
    font-weight: 650;
    color: var(--ok)
}

.rating .ico {
    width: calc(var(--app-em)*.95);
    height: calc(var(--app-em)*.95)
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.35);
    margin-block-start:calc(var(--app-em)*.5)}

.pager > a,.pager > span: not(:where(.pager-label, .pager-edge-slot)),.pager-edge {
    min-width:calc(var(--app-em)*2.35);
    height: calc(var(--app-em)*2.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline:calc(var(--app-em)*0.5);background: var(--paper);
    border: var(--hair) solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--head);
    font-size: var(--fs-ui);
    font-weight: 600
}

.pager > a:hover,.pager-edge-slot > a:hover .pager-edge {
    border-color: var(--brand);
    color: var(--brand)
}

.pager .now,.pager > span:not(:where(.nav_ext, .gap, .pager-label, .pager-edge-slot)) {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--accent-ink)
}

.pager > span.gap,.pager > span.nav_ext {
    border: 0;
    background: 0 0;
    color: var(--muted)
}

.pager-edge-slot,.pager-edge-slot > a,.pager-edge-slot > span {
    display: inline-flex;
    border-radius: var(--radius-sm)
}

.pager-edge {
    padding-inline:0}

.pager-edge-slot > span .pager-edge {
    background: var(--surface-soft);
    color: var(--muted);
    opacity: .55
}

.pager--split {
    justify-content: flex-start
}

.pager-label {
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 600
}

.aside,.sidebar {
    display: grid;
    gap: calc(var(--app-em)*1.125);
    align-content: start;
    min-width: 0
}

.sidebar {
    align-self: stretch
}

.sidebar-sticky {
    position: sticky;
    inset-block-start: calc(var(--app-em)*5.6);
    display: grid;
    gap: calc(var(--app-em)*1.125);
    align-self: start
}

.widget {
    padding: calc(var(--app-em)*1.375);
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft)
}

.widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.9375);
    margin-block-end:calc(var(--app-em)*1.0625)}

.widget h2 {
    font-size: var(--fs-h4);
    letter-spacing: -.02em
}

.widget__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap;
    color: var(--accent-strong);
    font-size: var(--fs-meta);
    font-weight: 600
}

.widget__link .ico {
    width: var(--sp-4);
    height: var(--sp-4)
}

.widget__link:hover {
    text-decoration: underline;
    text-underline-offset: calc(var(--hair)*3)
}

.widget--auto.is-empty {
    display: none
}

.feedback-card {
    display: grid;
    gap: 0
}

.feedback-contacts {
    display: grid;
    margin: 0;
    font-style: normal
}

.feedback-contact {
    display: grid;
    grid-template-columns: calc(var(--app-em)*2.35) minmax(0,1fr);
    align-items: center;
    gap: calc(var(--app-em)*.75);
    min-width: 0;
    padding-block:calc(var(--app-em)*0.7);border-block-start: var(--hair) solid var(--line);
    color: var(--ink-2);
    font-size: var(--fs-ui);
    line-height: 1.5
}

.feedback-contact:first-child {
    padding-block-start:0;border-block-start:0}

.feedback-contact > :last-child {
    min-width: 0;
    overflow-wrap: anywhere
}

a.feedback-contact:hover {
    color: var(--brand)
}

.feedback-contact__icon {
    display: grid;
    place-items: center;
    width: calc(var(--app-em)*2.35);
    height: calc(var(--app-em)*2.35);
    border-radius: var(--r-md);
    background: var(--brand-tint);
    color: var(--brand)
}

.feedback-contact__icon .ico {
    width: calc(var(--app-em)*1.1);
    height: calc(var(--app-em)*1.1)
}

.feedback-hours {
    margin-block-start:calc(var(--app-em)*0.9);padding-block-start: calc(var(--app-em)*1.15);
    border-block-start:var(--hair) solid var(--line)}

.feedback-schedule {
    display: grid;
    margin: 0
}

.feedback-schedule > div {
    display: grid;
    gap: calc(var(--app-em)*.2);
    padding-block:calc(var(--app-em)*0.65);border-block-start: var(--hair) solid var(--line-soft)
}

.feedback-schedule > div:first-child {
    padding-block-start:0;border-block-start:0}

.feedback-schedule dt {
    color: var(--head);
    font-size: var(--fs-ui);
    font-weight: 650
}

.feedback-schedule dd {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(var(--app-em)*.25) calc(var(--app-em)*.6);
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-meta);
    line-height: 1.45
}

.feedback-faq {
    margin-block-start:calc(var(--app-em)*0.75);padding: calc(var(--app-em)*.85);
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--callout-ink);
    font-size: var(--fs-meta);
    line-height: 1.55
}

.feedback-faq a {
    color: var(--accent-strong);
    font-weight: 650
}

.feedback-faq a:hover {
    text-decoration: underline;
    text-underline-offset: calc(var(--app-em)*0.2)
}

.category-menu--sidebar,.category-menu--sidebar .category-menu__submenu {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none
}

.category-menu--sidebar .category-menu__item {
    min-width: 0;
    border-block-start:var(--hair) solid var(--line)}

.category-menu--sidebar > .category-menu__item: first-child {
    border-block-start:0
}

.category-menu--sidebar .category-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    padding: calc(var(--app-em)*.8125) 0;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35
}

.category-menu--sidebar .category-link.is-active,.category-menu--sidebar .category-link:hover {
    color: var(--accent-strong)
}

.category-menu--sidebar .category-link__name {
    min-width: 0;
    overflow-wrap: anywhere
}

.category-menu--sidebar .category-link__count {
    flex: none;
    min-width: calc(var(--app-em)*1.5);
    margin-inline-start:auto;color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: end;
    opacity: .75
}

.category-menu--sidebar .category-link.is-active .category-link__count {
    color: inherit
}

.category-menu--sidebar .category-menu__submenu {
    padding-inline-start:var(--sp-4)}

.popular-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: official-pop
}

.popular-item,.popular-list > li {
    border-block-start:var(--hair) solid var(--line);counter-increment: official-pop
}

.popular-item:first-child,.popular-list > li:first-child {
    border-block-start:0}

.popular-item__link,.popular-list > li > a {
    display: grid;
    grid-template-columns: calc(var(--app-em)*1.875) minmax(0,1fr);
    gap: 0 var(--sp-3);
    padding: calc(var(--app-em)*.8125) 0
}

.popular-item__link::before,.popular-list > li > a::before {
    content: counter(official-pop);
    grid-column: 1;
    grid-row: 1/span 2;
    color: var(--muted);
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.35;
    opacity: .6
}

.popular-item__title {
    grid-column: 2;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35
}

.popular-item__link:hover .popular-item__title {
    color: var(--accent-strong)
}

.popular-list > li > a:not(.popular-item__link) {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35
}

.popular-list > li > a:not(.popular-item__link):hover {
    color: var(--accent-strong)
}

.popular-list .top-date {
    grid-column: 2;
    display: block;
    margin-block-start:calc(var(--app-em)*0.3125);color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 400
}

.popular-item__meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    margin-block-start:calc(var(--app-em)*0.3125);color: var(--muted);
    font-size: var(--fs-meta)
}

.popular-item__meta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap
}

.popular-item__meta .ico {
    width: var(--app-em);
    height: var(--app-em)
}

.widget .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.375)
}

.tabs__btn {
    padding: var(--sp-2);
    border: 0;
    border-radius: var(--r-sm);
    background: var(--soft);
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 600;
    cursor: pointer
}

.tabs__btn:hover {
    color: var(--accent-strong)
}

.tabs__btn.is-active {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.tab-panel[hidden] {
    display: none
}

.archive-list {
    display: grid;
    gap: var(--sp-2);
    font-size: var(--fs-sm)
}

#dle_news_archive > br,#dle_news_archive_link > br,.archive-list > br {
    display: none
}

.archive-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--app-em)*.6);
    color: var(--ink)
}

.archive-list a:hover {
    color: var(--accent-strong)
}

.archive-list b {
    color: var(--muted);
    font-weight: 600;
    font-size: var(--fs-meta)
}

.calendar {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
    font-size: var(--fs-sm)
}

.calendar caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--app-em)*.4);
    padding-block-end:calc(var(--app-em)*0.75);color: var(--head);
    font-weight: 700;
    white-space: nowrap
}

.calendar caption a {
    color: var(--muted);
    padding-inline:calc(var(--app-em)*0.4)}

.calendar caption a: hover {
    color:var(--accent-strong)
}

.calendar tr th {
    padding: calc(var(--app-em)*.3125) 0;
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 600
}

.calendar tr td {
    padding: calc(var(--app-em)*.1875) 0;
    color: var(--muted)
}

.calendar tr td.weekday,.calendar tr th.weekday {
    color: var(--negative)
}

.calendar tr td.day-current {
    font-weight: 700;
    color: var(--head)
}

.calendar tr td a {
    display: grid;
    place-items: center;
    margin: auto;
    width: calc(var(--app-em)*2);
    height: calc(var(--app-em)*2);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600
}

.calendar tr td a:hover {
    background: var(--accent);
    color: var(--accent-ink)
}

.widget--poll .poll-question {
    margin-block-end:calc(var(--app-em)*0.875);color: var(--muted);
    font-size: var(--fs-sm)
}

.poll-list {
    display: grid;
    gap: var(--sp-2)
}

.poll-list label {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--app-em)*.55);
    font-size: var(--fs-sm);
    cursor: pointer
}

.poll-list input {
    margin-block-start:calc(var(--app-em)*0.25);accent-color: var(--brand)
}

.poll-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: calc(var(--app-em)*.5625);
    margin-block-start:calc(var(--app-em)*0.9375)}

.poll-actions__results {
    flex: none;
    margin-inline-start:auto}

.poll-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.6);
    margin-block-start:calc(var(--app-em)*0.6)}

.chips--tags {
    --chip-bg: var(--accent-soft);
    --chip-ink: var(--accent-strong);
    --chip-hover-bg: var(--accent-hover-soft);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2)
}

.chips--tags a {
    display: inline-flex;
    align-items: center;
    height: calc(var(--app-em)*2.125);
    padding: 0 var(--sp-3);
    border-radius: var(--r-md);
    background: var(--chip-bg);
    color: var(--chip-ink);
    font-size: var(--fs-meta);
    font-weight: 600
}

.chips--tags .clouds_small {
    --chip-bg: var(--sage-soft);
    --chip-ink: var(--sage-ink);
    --chip-hover-bg: var(--sage-hover)
}

.chips--tags .clouds_medium {
    --chip-bg: var(--amber-soft);
    --chip-ink: var(--amber-ink);
    --chip-hover-bg: var(--amber-hover)
}

.chips--tags .clouds_large {
    --chip-bg: var(--rose-soft);
    --chip-ink: var(--rose-ink);
    --chip-hover-bg: var(--rose-hover)
}

.chips--tags .clouds_xlarge {
    --chip-bg: var(--mist-soft);
    --chip-ink: var(--mist-ink);
    --chip-hover-bg: var(--mist-hover)
}

.chips--tags a:is(:hover, :focus-visible) {
    background: var(--chip-hover-bg);
    color: var(--chip-ink)
}

.footer {
    background: var(--brand-dark);
    color: var(--foot-ink);
    padding-block:calc(var(--app-em)*3);font-size: var(--fs-ui)
}

.footer a {
    color: var(--foot-link)
}

.footer a:hover {
    color: var(--util-strong)
}

.footer-grid {
    display: grid;
    grid-template-columns: calc(var(--app-em)*18) repeat(3,minmax(0,1fr));
    gap: calc(var(--app-em)*2)
}

.footer h4 {
    color: var(--util-strong);
    font-size: var(--fs-ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-block-end:calc(var(--app-em)*0.9)}

.footer ul {
    list-style: none;
    display: grid;
    gap: calc(var(--app-em)*.55)
}

.footer-about p {
    margin-block-start:calc(var(--app-em)*0.8);max-width: calc(var(--app-em)*17);
    line-height: 1.65
}

.footer .brand-name {
    color: var(--util-strong)
}

.footer .brand-sub {
    color: var(--foot-sub)
}

.footer-bottom {
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: space-between; */
    /* flex-wrap: wrap; */
    /* gap: var(--gutter); */
    /* margin-block-start:calc(var(--app-em)*1.2); */
    /* padding-block-start: calc(var(--app-em)*1.35); */
    /* border-block-start:var(--hair) solid rgba(255,255,255,.12); */
    /* font-size: var(--fs-meta); */
    /* color: var(--foot-dim); */
}

@media (max-width: 64rem) {
    .layout {
        grid-template-columns:minmax(0,1fr)
    }

    .aside,.sidebar {
        position: static;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .sidebar {
        align-self: auto
    }

    .sidebar-sticky {
        position: static;
        display: contents
    }

    .sidebar--feedback {
        grid-template-columns: minmax(0,1fr)
    }

    .header-actions {
        gap: calc(var(--app-em)*.3)
    }

    .btn-login span {
        display: none
    }

    .btn-login {
        padding-inline:calc(var(--app-em)*0.65)}

    .header-actions .user-menu {
        position: static
    }

    .nav {
        display: none;
        position: absolute;
        z-index: 6;
        inset-block-start: calc(100% + var(--app-em)*0.4);
        inset-inline: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: visible;
        overscroll-behavior: auto;
        scrollbar-width: auto;
        padding: calc(var(--app-em)*.6);
        background: var(--paper);
        border-radius: var(--radius);
        box-shadow: var(--shadow)
    }

    body.is-menu-open .nav {
        display: flex
    }

    .nav a:not(.nav-cta) {
        padding: calc(var(--app-em)*.75);
        font-size: var(--fs-ui)
    }

    .nav a:not(.nav-cta)[aria-current]::after {
        display: none
    }

    .nav a:not(.nav-cta)[aria-current] {
        background: var(--brand-tint)
    }

    .nav-toggle {
        width: 100%;
        justify-content: space-between;
        padding: calc(var(--app-em)*.75);
        font-size: var(--fs-ui)
    }

    .submenu {
        position: static;
        min-width: 0;
        padding: 0 0 calc(var(--app-em)*.35) calc(var(--app-em)*.9);
        background: 0 0;
        box-shadow: none
    }

    .nav-cta {
        margin: calc(var(--app-em)*.5) calc(var(--app-em)*.25) calc(var(--app-em)*.25)
    }

    .burger {
        display: grid
    }

    .footer-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width: 30rem) {
    .masthead .brand-name,.masthead .brand-sub {
        display:none
    }

    .masthead .brand-short {
        display: block
    }

    .masthead .brand-copy {
        display: flex;
        align-items: center
    }
}

@media (max-width: 34rem) {
    .utility-license span {
        display:none
    }

    .nav-cta span {
        display: none
    }

    .nav-cta {
        padding-inline:calc(var(--app-em)*0.65)}

    .masthead .wrap {
        padding-inline: calc(var(--app-em)*0.7)
    }

    .header-main {
        gap: calc(var(--app-em)*.6)
    }

    .user-menu-toggle .user-menu-name {
        display: none
    }
}

@media (max-width: 44rem) {
    :root {
        --gutter:calc(var(--app-em)*1)
    }

    .utility-menu {
        flex: 1 1 auto
    }

    .utility-menu .theme-toggle {
        margin-inline-start:auto}

    .aside,.sidebar {
        grid-template-columns: minmax(0,1fr)
    }

    .footer-grid {
        grid-template-columns: minmax(0,1fr)
    }

    .utility-note {
        display: none
    }
}

.hero {
    padding-block:calc(var(--app-em)*1.5) 0}

.hero-card {
    --hero-bg: linear-gradient(126deg, #426982 0%, #356f90 56%, #2e7398 100%);
    --hero-card-shadow: 0 calc(var(--app-em)*1.35) calc(var(--app-em)*3.35) rgba(31, 70, 94, .21),inset 0 var(--hair) 0 rgba(255, 255, 255, .2);
    --hero-head: #ffffff;
    --hero-accent: #e8f6fd;
    --hero-lead-ink: #f1f7fa;
    --hero-note-ink: #edf7fc;
    --hero-strip: rgba(26, 66, 91, .42);
    --hero-strip-line: rgba(226, 243, 252, .17);
    --hero-grid-line: rgba(226, 243, 252, .08);
    --hero-main: #ffffff;
    --hero-main-hover: #eaf5fb;
    --hero-main-ink: #0c5f7e;
    --hero-ghost: rgba(255, 255, 255, .1);
    --hero-ghost-hover: rgba(255, 255, 255, .18);
    --hero-ghost-line: rgba(255, 255, 255, .55);
    --hero-ghost-hover-line: #ffffff;
    --hero-ghost-ink: #ffffff;
    --hero-ghost-hover-ink: #ffffff;
    --anim-ink: rgba(255, 255, 255, .16);
    --anim-ink-strong: rgba(255, 255, 255, .34);
    --anim-tint: rgba(134, 205, 239, .22);
    position: relative;
    overflow: hidden;
    background: var(--hero-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--hero-card-shadow)
}

.hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 68% 78%,var(--anim-tint),transparent 56%)
}

.hero-grid {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0,1fr) calc(var(--app-em)*30);
    gap: var(--app-em);
    align-items: center;
    padding: calc(var(--app-em)*1.9)
}

.hero-grid > * {
    position: relative;
    z-index: 1
}

.hero-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(var(--hero-grid-line) var(--hair),transparent var(--hair)),linear-gradient(90deg,var(--hero-grid-line) var(--hair),transparent var(--hair));
    background-size: calc(var(--app-em)*2.5) calc(var(--app-em)*2.5);
    -webkit-mask-image: linear-gradient(to bottom left,transparent 42%,#000);
    mask-image: linear-gradient(to bottom left,transparent 42%,#000)
}

.hero h1 {
    margin-block:calc(var(--app-em)*1.05);color: var(--hero-head);
    font-size: var(--fs-display);
    letter-spacing: -.032em
}

.hero h1 em {
    font-style: normal;
    color: var(--brand)
}

.hero-lead {
    color: var(--hero-lead-ink);
    font-size: var(--fs-lead)
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.7);
    margin-block-start:calc(var(--app-em)*1.7)}

.hero-note {
    margin-block-start: calc(var(--app-em)*0.9);
    color: var(--hero-note-ink);
    font-size: var(--fs-meta)
}

.release {
    position: relative;
    overflow: hidden;
    padding: calc(var(--app-em)*1.6);
    background: var(--release-bg);
    border-radius: var(--radius-lg);
    color: var(--release-ink);
    box-shadow: var(--shadow-card)
}

.release-ghost {
    position: absolute;
    inset-block-end: calc(var(--app-em)*-1.6);
    inset-inline-end: calc(var(--app-em)*-0.5);
    font-size: calc(var(--app-em)*7.5);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: 1;
    color: rgba(255,255,255,.045);
    pointer-events: none
}

.release-top {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: calc(var(--app-em)*.8)
}

.release-num {
    color: var(--util-strong);
    font-size: calc(var(--app-em)*3.1);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1
}

.release-top .chip {
    background: rgba(33,182,50,.16);
    color: #7ee68b
}

.release ul {
    position: relative;
    list-style: none;
    display: grid;
    gap: calc(var(--app-em)*.85);
    margin-block-start:calc(var(--app-em)*1.25)}

.release li {
    display: flex;
    gap: calc(var(--app-em)*.6);
    font-size: var(--fs-ui);
    line-height: 1.5
}

.release li .ico {
    color: var(--release-accent);
    width: calc(var(--app-em)*1.05);
    height: calc(var(--app-em)*1.05);
    margin-block-start:calc(var(--app-em)*0.22)}

.release-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.4);
    margin-block-start:calc(var(--app-em)*1.35);color: var(--release-link);
    font-size: var(--fs-ui);
    font-weight: 650
}

.release-link:hover {
    color: var(--util-strong)
}

.strip {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: calc(var(--app-em)*1.5);
    padding: calc(var(--app-em)*1.25) calc(var(--app-em)*1.9);
    background: var(--hero-strip);
    border-block-start:var(--hair) solid var(--hero-strip-line)}

.strip > div {
    position: relative;
    text-align: center
}

.strip > div + div::before {
    content: "";
    position: absolute;
    inset-block: calc(var(--app-em)*0.3);
    inset-inline-start: calc(var(--app-em)*-0.75);
    width: var(--hair);
    background: var(--hero-strip-line)
}

.strip .k {
    color: var(--hero-note-ink);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}

.strip .v {
    margin-block-start:calc(var(--app-em)*0.35);color: var(--hero-head);
    font-size: var(--fs-h3);
    font-weight: 700
}

.slab {
    padding-block-start:var(--app-em);padding-block-end: var(--app-em)
}

.slab-cta {
    padding-block-end:calc(var(--app-em)*2)}

.slab-alt {
    background: var(--paper);
    border-block:var(--hair) solid var(--line)}

.cards3 {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: calc(var(--app-em)*1.1)
}

.feature {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    column-gap: calc(var(--app-em)*.8);
    padding: calc(var(--app-em)*1.5)
}

.feature .ic {
    display: grid;
    place-items: center;
    width: calc(var(--app-em)*2.7);
    height: calc(var(--app-em)*2.7);
    background: var(--brand-tint);
    color: var(--brand);
    border-radius: calc(var(--app-em)*.8)
}

.feature .ic .ico {
    width: calc(var(--app-em)*1.35);
    height: calc(var(--app-em)*1.35)
}

.feature h3 {
    font-size: var(--fs-h4)
}

.feature p {
    grid-column: 1/-1;
    color: var(--ink-2);
    font-size: var(--fs-ui);
    margin-block-start:calc(var(--app-em)*0.8)}

.feed-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.post.post--home {
    padding: 0;
    border: var(--hair) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft)
}

.post.post--home .post-body {
    gap: 0
}

.post.post--home .post-head {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: calc(var(--app-em)*9.5);
    gap: calc(var(--app-em)*.85);
    padding: calc(var(--app-em)*1.15) calc(var(--app-em)*1.5);
    border: 0;
    background: var(--release-bg);
    color: var(--release-ink)
}

.home-news-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .12;
    pointer-events: none
}

.home-news-top {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--app-em)*.75)
}

.home-news-date {
    display: inline-flex;
    align-items: baseline;
    gap: calc(var(--app-em)*.4);
    color: var(--release-ink);
    font-size: var(--fs-micro)
}

.home-news-date__day {
    color: var(--release-accent);
    font-size: calc(var(--app-em)*1.7);
    font-weight: 700;
    line-height: 1
}

.post.post--home .post-head .chip {
    order: 0;
    margin: 0;
    max-width: 100%;
    height: auto;
    padding-block:calc(var(--app-em)*0.2);white-space: normal;
    font-size: var(--fs-micro)
}

.post.post--home > .post-body > .post-head h3 {
    position: relative;
    flex: none;
    margin: auto 0 0;
    font-size: calc(var(--app-em)*1.6);
    line-height: 1.25;
    letter-spacing: -.025em
}

.post.post--home > .post-body > .post-head h3 a {
    color: #fff
}

.post.post--home > .post-body > .post-head h3 a:hover {
    color: var(--release-link)
}

.post.post--home .post-head a:focus-visible {
    outline: calc(var(--hair)*2) solid var(--release-link);
    outline-offset: calc(var(--app-em)*0.2)
}

.post.post--home .post-body > p {
    margin: 0;
    padding: calc(var(--app-em)*1.4) calc(var(--app-em)*1.5);
    color: var(--ink);
    line-height: 1.65
}

.post.post--home .post-foot {
    margin-inline:calc(var(--app-em)*1.5);padding-block: var(--app-em);
    border-color: var(--line)
}

.post.post--home .meta {
    gap: calc(var(--app-em)*.7);
    font-size: var(--fs-micro)
}

.post.post--home .more {
    margin-inline-start:auto;gap: calc(var(--app-em)*.65);
    color: var(--head)
}

.post.post--home .more .ico {
    box-sizing: content-box;
    padding: calc(var(--app-em)*.45);
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand)
}

@media (max-width: 34rem) {
    .post.post--home .post-head {
        padding:calc(var(--app-em)*1.1)
    }

    .post.post--home > .post-body > .post-head h3 {
        font-size: calc(var(--app-em)*1.4)
    }

    .post.post--home .post-body > p {
        padding: calc(var(--app-em)*1.1)
    }

    .post.post--home .post-foot {
        margin-inline:calc(var(--app-em)*1.1)}
}

.tiles {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: calc(var(--app-em)*.75)
}

.tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--app-em)*.6);
    padding: calc(var(--app-em)*.95) calc(var(--app-em)*1.1);
    background: var(--paper);
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*.7);
    color: var(--head);
    font-size: var(--fs-ui);
    font-weight: 600;
    transition: border-color .18s ease,color .18s ease,box-shadow .18s ease
}

.tile:hover {
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: var(--shadow-soft)
}

.tile .count {
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 700
}

.band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*1.5);
    padding: calc(var(--app-em)*2.1) calc(var(--app-em)*2.25);
    background: var(--band-bg);
    border-radius: var(--radius-lg);
    color: var(--band-fg);
    box-shadow: var(--shadow-lift)
}

.band h2 {
    color: var(--band-fg);
    font-size: var(--fs-h2)
}

.band p {
    color: rgba(255,255,255,.86);
    font-size: var(--fs-ui);
    margin-block-start:calc(var(--app-em)*0.5);max-width: calc(var(--app-em)*30)
}

.band .btn-ghost {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.4);
    color: var(--band-fg)
}

.band .btn-ghost:hover {
    background: rgba(255,255,255,.24);
    color: var(--band-fg)
}

.band .btn-main {
    background: var(--band-fg);
    border-color: var(--band-fg);
    color: var(--band-ink);
    box-shadow: none
}

.band .btn-main:hover {
    background: #eef6fc;
    border-color: #eef6fc;
    color: var(--band-ink)
}

.band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.7)
}

@media (max-width: 64rem) {
    .hero-grid {
        grid-template-columns:minmax(0,1fr);
        gap: calc(var(--app-em)*2);
        padding: calc(var(--app-em)*1.5)
    }

    .release,.strip {
        display: none
    }

    .cards3 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .feed-grid {
        grid-template-columns: minmax(0,1fr)
    }

    .tiles {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width: 44rem) {
    .hero h1 {
        font-size:calc(var(--app-em)*2.2)
    }

    .hero-grid {
        padding: calc(var(--app-em)*1.15)
    }

    .cards3 {
        grid-template-columns: minmax(0,1fr)
    }

    .tiles {
        grid-template-columns: minmax(0,1fr)
    }
}

@media (max-width: 44rem) and (orientation:portrait) {
    .band-actions,.hero-actions {
        justify-content:center
    }
}

:root[data-theme="dark"] .hero-card {
    --hero-bg: #2b4659;
    --hero-card-shadow: 0 calc(var(--app-em)*1.3) calc(var(--app-em)*3.3) rgba(46, 86, 108, .17),inset 0 var(--hair) 0 rgba(255, 255, 255, .46);
    --hero-head: #f3f8fb;
    --hero-accent: #c7e8f8;
    --hero-lead-ink: #d7e7f0;
    --hero-note-ink: #d2e1e9;
    --hero-strip: rgba(20, 39, 52, .46);
    --hero-strip-line: rgba(208, 235, 248, .16);
    --hero-grid-line: rgba(213, 239, 252, .08);
    --hero-main: #7cb8e0;
    --hero-main-hover: #a3d1f0;
    --hero-main-ink: #0f1720;
    --hero-ghost: #1b222c;
    --hero-ghost-hover: #1b222c;
    --hero-ghost-line: #2b3440;
    --hero-ghost-hover-line: #7cb8e0;
    --hero-ghost-ink: #eef2f6;
    --hero-ghost-hover-ink: #7cb8e0;
    --anim-ink: rgba(198, 231, 248, .14);
    --anim-ink-strong: rgba(198, 231, 248, .3);
    --anim-tint: rgba(81, 164, 205, .26)
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hero-card {
        --hero-bg:#2b4659;
        --hero-card-shadow: 0 calc(var(--app-em)*1.3) calc(var(--app-em)*3.3) rgba(46, 86, 108, .17),inset 0 var(--hair) 0 rgba(255, 255, 255, .46);
        --hero-head: #f3f8fb;
        --hero-accent: #c7e8f8;
        --hero-lead-ink: #d7e7f0;
        --hero-note-ink: #d2e1e9;
        --hero-strip: rgba(20, 39, 52, .46);
        --hero-strip-line: rgba(208, 235, 248, .16);
        --hero-grid-line: rgba(213, 239, 252, .08);
        --hero-main: #7cb8e0;
        --hero-main-hover: #a3d1f0;
        --hero-main-ink: #0f1720;
        --hero-ghost: #1b222c;
        --hero-ghost-hover: #1b222c;
        --hero-ghost-line: #2b3440;
        --hero-ghost-hover-line: #7cb8e0;
        --hero-ghost-ink: #eef2f6;
        --hero-ghost-hover-ink: #7cb8e0;
        --anim-ink: rgba(198, 231, 248, .14);
        --anim-ink-strong: rgba(198, 231, 248, .3);
        --anim-tint: rgba(81, 164, 205, .26)
    }
}

.hero-card.hero-card--holiday {
    --hero-bg: linear-gradient(128deg, #173f4c 0%, #164c46 58%, #255842 100%);
    --hero-card-shadow: 0 calc(var(--app-em)*1.35) calc(var(--app-em)*3.35) rgba(17, 61, 59, .24),inset 0 var(--hair) 0 rgba(255, 255, 255, .2);
    --hero-accent: #ffe2a8;
    --hero-lead-ink: #edf8f5;
    --hero-note-ink: #e6f3ef;
    --hero-strip: rgba(8, 45, 44, .46);
    --hero-strip-line: rgba(255, 232, 185, .18);
    --hero-grid-line: rgba(225, 247, 241, .08);
    --hero-main: #fff7e7;
    --hero-main-hover: #ffebbe;
    --hero-main-ink: #17483f;
    --hero-ghost: rgba(255, 255, 255, .08);
    --hero-ghost-hover: rgba(255, 255, 255, .16);
    --hero-ghost-line: rgba(255, 255, 255, .58);
    --hero-ghost-hover-line: #ffffff;
    --hero-ghost-ink: #ffffff;
    --hero-ghost-hover-ink: #ffffff;
    --anim-ink: rgba(226, 247, 241, .14);
    --anim-ink-strong: rgba(255, 226, 168, .28);
    --anim-tint: rgba(99, 190, 167, .22)
}

.holiday-promo {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: rgba(7,37,42,.5);
    border-block-end:var(--hair) solid rgba(255,226,168,.26);color: #fff
}

.holiday-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background-image: radial-gradient(circle,rgba(255,255,255,.9) 0,rgba(255,255,255,.9) var(--hair),transparent calc(var(--hair)*1.5)),radial-gradient(circle,rgba(255,226,168,.72) 0,rgba(255,226,168,.72) var(--hair),transparent calc(var(--hair)*1.5));
    background-position: 0 0,calc(var(--app-em)*2.2) calc(var(--app-em)*1.2);
    background-size: calc(var(--app-em)*4.8) calc(var(--app-em)*3.8),calc(var(--app-em)*5.7) calc(var(--app-em)*4.6);
    -webkit-mask-image: linear-gradient(90deg,#000,transparent 72%);
    mask-image: linear-gradient(90deg,#000,transparent 72%)
}

.holiday-offer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: calc(var(--app-em)*1.05);
    padding: calc(var(--app-em)*1.1) calc(var(--app-em)*1.9)
}

.holiday-offer__icon {
    display: grid;
    place-items: center;
    width: calc(var(--app-em)*3.1);
    height: calc(var(--app-em)*3.1);
    background: rgba(255,226,168,.12);
    border: var(--hair) solid rgba(255,226,168,.38);
    border-radius: calc(var(--app-em)*.85);
    color: #ffe2a8;
    box-shadow: inset 0 var(--hair) 0 rgba(255,255,255,.16)
}

.holiday-offer__icon .ico {
    width: calc(var(--app-em)*1.45);
    height: calc(var(--app-em)*1.45)
}

.holiday-offer__copy {
    min-width: 0
}

.holiday-offer__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-em)*.65)
}

.holiday-offer__title {
    color: #fff;
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: -.018em;
    line-height: 1.25
}

.holiday-offer__label {
    display: inline-flex;
    padding: calc(var(--app-em)*.24) calc(var(--app-em)*.58);
    background: rgba(255,226,168,.14);
    border: var(--hair) solid rgba(255,226,168,.34);
    border-radius: var(--radius-pill);
    color: #ffe2a8;
    font-size: var(--fs-micro);
    font-weight: 700;
    line-height: 1.3
}

.holiday-offer__copy p {
    margin-block-start:calc(var(--app-em)*.35);max-width: 72ch;
    color: #dceee9;
    font-size: var(--fs-ui);
    line-height: 1.55
}

.holiday-offer__date {
    color: #ffe2a8;
    font-weight: 650
}

.holiday-offer__cta {
    flex-wrap: nowrap;
    background: var(--hero-ghost);
    border-color: var(--hero-ghost-line);
    color: var(--hero-ghost-ink);
    box-shadow: none;
    white-space: nowrap
}

.holiday-offer__cta:hover {
    background: var(--hero-ghost-hover);
    border-color: var(--hero-ghost-hover-line);
    color: var(--hero-ghost-hover-ink)
}

.holiday-offer__cta:focus-visible {
    outline-color: #fff
}

@media (max-width: 52rem) {
    .holiday-offer {
        grid-template-columns:auto minmax(0,1fr)
    }

    .holiday-offer__cta {
        grid-column: 2;
        justify-self: start
    }
}

@media (max-width: 44rem) {
    .holiday-offer {
        padding:calc(var(--app-em)*1.1) calc(var(--app-em)*1.15)
    }

    .holiday-offer__icon {
        width: calc(var(--app-em)*2.7);
        height: calc(var(--app-em)*2.7)
    }

    .holiday-offer__cta {
        grid-column: 1/-1;
        justify-self: stretch;
        justify-content: center
    }
}

.campaign-promo {
    --campaign-bg: linear-gradient(118deg, #68465f 0%, #8d5360 48%, #793c29 100%);
    --campaign-line: rgba(255, 240, 215, .3);
    --campaign-accent: #fff0d7;
    --campaign-accent-soft: rgba(255, 240, 215, .14);
    --campaign-accent-line: rgba(255, 240, 215, .4);
    --campaign-copy: #fff1e8;
    --campaign-decoration: radial-gradient(circle at 92% -35%, rgba(255, 224, 164, .38), transparent 46%),radial-gradient(circle at 8% 145%, rgba(255, 190, 151, .22), transparent 38%)
}

.summer-promo {
    --campaign-bg: linear-gradient(118deg, #185a72 0%, #0e7f85 53%, #025641 100%);
    --campaign-line: rgba(234, 253, 236, .32);
    --campaign-accent: #fff1aa;
    --campaign-accent-soft: rgba(255, 241, 170, .13);
    --campaign-accent-line: rgba(255, 241, 170, .38);
    --campaign-copy: #ecfbf6;
    --campaign-decoration: radial-gradient(circle at 92% -35%, rgba(255, 232, 133, .42), transparent 45%),radial-gradient(circle at 7% 145%, rgba(132, 231, 210, .24), transparent 39%)
}

.campaign-promo,.summer-promo {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: var(--campaign-bg);
    border-block-end:var(--hair) solid var(--campaign-line);color: #fff
}

.campaign-promo::before,.summer-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--campaign-decoration)
}

.campaign-offer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: calc(var(--app-em)*1.05);
    padding: calc(var(--app-em)*1.1) calc(var(--app-em)*1.9)
}

.campaign-offer__icon {
    display: grid;
    place-items: center;
    width: calc(var(--app-em)*3.1);
    height: calc(var(--app-em)*3.1);
    background: var(--campaign-accent-soft);
    border: var(--hair) solid var(--campaign-accent-line);
    border-radius: calc(var(--app-em)*.85);
    color: var(--campaign-accent);
    box-shadow: inset 0 var(--hair) 0 rgba(255,255,255,.17)
}

.campaign-offer__icon .ico {
    width: calc(var(--app-em)*1.45);
    height: calc(var(--app-em)*1.45)
}

.campaign-offer__copy {
    min-width: 0
}

.campaign-offer__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-em)*.65)
}

.campaign-offer__title {
    color: #fff;
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: -.018em;
    line-height: 1.25
}

.campaign-offer__label {
    display: inline-flex;
    padding: calc(var(--app-em)*.24) calc(var(--app-em)*.58);
    background: var(--campaign-accent-soft);
    border: var(--hair) solid var(--campaign-accent-line);
    border-radius: var(--radius-pill);
    color: var(--campaign-accent);
    font-size: var(--fs-micro);
    font-weight: 700;
    line-height: 1.3
}

.campaign-offer__copy p {
    margin-block-start:calc(var(--app-em)*.35);max-width: 72ch;
    color: var(--campaign-copy);
    font-size: var(--fs-ui);
    line-height: 1.55
}

.campaign-offer__date {
    color: var(--campaign-accent);
    font-weight: 650
}

.campaign-offer__cta {
    flex-wrap: nowrap;
    background: var(--hero-ghost);
    border-color: var(--hero-ghost-line);
    color: var(--hero-ghost-ink);
    box-shadow: none;
    white-space: nowrap
}

.campaign-offer__cta:hover {
    background: var(--hero-ghost-hover);
    border-color: var(--hero-ghost-hover-line);
    color: var(--hero-ghost-hover-ink)
}

.campaign-offer__cta:focus-visible {
    outline-color: #fff
}

@media (max-width: 52rem) {
    .campaign-offer {
        grid-template-columns:auto minmax(0,1fr)
    }

    .campaign-offer__cta {
        grid-column: 2;
        justify-self: start
    }
}

@media (max-width: 44rem) {
    .campaign-offer {
        padding:calc(var(--app-em)*1.1) calc(var(--app-em)*1.15)
    }

    .campaign-offer__icon {
        width: calc(var(--app-em)*2.7);
        height: calc(var(--app-em)*2.7)
    }

    .campaign-offer__cta {
        grid-column: 1/-1;
        justify-self: stretch;
        justify-content: center
    }
}

.hero .eyebrow,.hero h1 em {
    color: var(--hero-accent)
}

.hero-actions .btn-main {
    background: var(--hero-main);
    border-color: var(--hero-main);
    color: var(--hero-main-ink);
    box-shadow: 0 calc(var(--app-em)*.5) calc(var(--app-em)*1.1) rgba(25,59,80,.22)
}

.hero-actions .btn-main:hover {
    background: var(--hero-main-hover);
    border-color: var(--hero-main-hover);
    color: var(--hero-main-ink)
}

.hero-actions .btn-ghost {
    background: var(--hero-ghost);
    border-color: var(--hero-ghost-line);
    color: var(--hero-ghost-ink)
}

.hero-actions .btn-ghost:hover {
    background: var(--hero-ghost-hover);
    border-color: var(--hero-ghost-hover-line);
    color: var(--hero-ghost-hover-ink)
}

.hero-card .btn-ghost:focus-visible,.hero-card .btn-main:focus-visible {
    outline-color: #fff
}

.hero-grid > .layers {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none
}

.layers i {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: calc(var(--app-em)*26);
    height: calc(var(--app-em)*13);
    margin: calc(var(--app-em)*-6.5) 0 0 calc(var(--app-em)*-13);
    border: var(--hair) solid var(--anim-ink);
    border-radius: var(--radius-lg);
    animation: layer-breathe 14s ease-in-out infinite
}

.layers i:nth-child(1) {
    transform: rotate(-8deg);
    animation-delay: -2s
}

.layers i:nth-child(2) {
    transform: rotate(-3deg);
    animation-delay: -6s;
    border-color: var(--anim-ink-strong)
}

.layers i:nth-child(3) {
    transform: rotate(4deg);
    animation-delay: -10s
}

@keyframes layer-breathe {
    0%,100% {
        opacity: .35;
        scale: .94
    }

    50% {
        opacity: 1;
        scale: 1.04
    }
}

@media (prefers-reduced-motion:reduce) {
    .layers i {
        animation: none;
        opacity: .6
    }
}

@media (max-width: 44rem) {
    .hero-grid > .layers {
        display:none
    }
}

.page-hero {
    position: relative;
    overflow: hidden;
    margin-block-end:calc(var(--app-em)*1.5);background: linear-gradient(135deg,var(--paper) 32%,var(--grad-tint));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card),inset 0 var(--hair) 0 var(--card-sheen)
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 88% 6%,var(--glow),transparent 52%)
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(var(--grid-line) var(--hair),transparent var(--hair)),linear-gradient(90deg,var(--grid-line) var(--hair),transparent var(--hair));
    background-size: calc(var(--app-em)*2.5) calc(var(--app-em)*2.5);
    -webkit-mask-image: linear-gradient(105deg,transparent 45%,#000);
    mask-image: linear-gradient(105deg,transparent 45%,#000)
}

.page-hero-body {
    position: relative;
    z-index: 1;
    padding: calc(var(--app-em)*1.75) calc(var(--app-em)*1.75) calc(var(--app-em)*1.5)
}

.page-hero .page-head {
    padding-block-end:0}

.filters {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.4);
    padding: calc(var(--app-em)*.9) calc(var(--app-em)*1.75);
    background: var(--panel-veil);
    border-block-start:var(--hair) solid var(--line)}

.filters a {
    padding: calc(var(--app-em)*.4) calc(var(--app-em)*.9);
    background: var(--paper);
    border-radius: calc(var(--app-em)*2);
    color: var(--ink-2);
    font-size: var(--fs-ui);
    font-weight: 600;
    box-shadow: var(--shadow-tiny);
    transition: background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease
}

.filters a:hover {
    color: var(--brand);
    box-shadow: var(--shadow-soft);
    transform: translateY(calc(var(--app-em)*-.09))
}

.filters a[aria-current] {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 calc(var(--app-em)*.35) calc(var(--app-em)*.85) rgba(9,118,180,.28)
}

.filters .spacer {
    margin-inline-start:auto;color: var(--muted);
    font-size: var(--fs-meta)
}

@media (max-width: 44rem) {
    .page-head h1 {
        font-size:calc(var(--app-em)*1.95)
    }

    .page-hero-body {
        padding: calc(var(--app-em)*1.2) calc(var(--app-em)*1.15) calc(var(--app-em)*1.1)
    }

    .filters {
        padding-inline:calc(var(--app-em)*1.15)}

    .filters .spacer {
        display: none
    }
}

.fullstory {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: calc(var(--app-em)*1);
    min-width: 0;
    padding: calc(var(--app-em)*1.35) calc(var(--app-em)*1.35) calc(var(--app-em)*.75) calc(var(--app-em)*1.7)
}

.icon-action {
    display: grid;
    place-items: center;
    width: calc(var(--app-em)*2.1);
    height: calc(var(--app-em)*2.1);
    border-radius: var(--r-md);
    color: var(--muted);
    cursor: pointer;
    transition: background-color .18s ease,color .18s ease
}

.icon-action:hover {
    background: var(--soft);
    color: var(--brand)
}

.icon-action.is-active {
    color: var(--brand);
    background: var(--brand-tint)
}

.icon-action .ico {
    width: calc(var(--app-em)*1.05);
    height: calc(var(--app-em)*1.05)
}

.fullstory > .post-head h1 {
    margin: 0;
    font-size: calc(var(--app-em)*1.4);
    letter-spacing: -.025em
}

.meta-dot {
    flex: none;
    width: calc(var(--app-em)*.1875);
    height: calc(var(--app-em)*.1875);
    border-radius: 50%;
    background: var(--dot)
}

.vote-pill {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.4);
    min-height: calc(var(--app-em)*2.125);
    padding-inline:calc(var(--app-em)*0.75);border: 0;
    background: 0 0;
    border-radius: var(--r-md);
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 650;
    cursor: pointer;
    transition: background-color .18s ease,color .18s ease
}

.vote-pill .ico {
    width: calc(var(--app-em)*.95);
    height: calc(var(--app-em)*.95)
}

.vote-pill--up {
    color: var(--ok)
}

.vote-pill--down {
    color: var(--danger)
}

.vote-pill--up:hover {
    background: var(--ok-soft)
}

.vote-pill--down:hover {
    background: var(--danger-soft)
}

.vote-pill--down .ico {
    transform: rotate(180deg)
}

.vote-score {
    min-width: calc(var(--app-em)*1.6);
    text-align: center;
    color: var(--ok);
    font-size: var(--fs-ui);
    font-weight: 700
}

.story-text {
    color: var(--news-text);
    font-size: calc(var(--app-em) * .95)
}

.story-text,.story-text * {
    line-height: 1.55!important;
    letter-spacing: normal!important
}

.story-text [style*="font-size:0.8rem" i] {
    font-size: calc(var(--app-em)*.85)!important
}

.story-text :last-child {
    margin-bottom: 0
}

.story-text img,.thread-item img {
    filter: brightness(var(--image-brightness)) contrast(var(--image-contrast)) saturate(var(--image-saturate))
}

.code-block {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-tiny)
}

.code-block .bar {
    display: flex;
    align-items: center;
    gap: calc(var(--app-em)*.5);
    padding: calc(var(--app-em)*.55) calc(var(--app-em)*1.1);
    background: var(--code-bar);
    color: var(--muted);
    font-size: var(--fs-micro);
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase
}

.code-block .bar .ico {
    width: var(--app-em);
    height: var(--app-em);
    color: var(--brand)
}

.callout {
    display: flex;
    gap: calc(var(--app-em)*.9);
    padding: calc(var(--app-em)*1.15);
    background: var(--brand-tint);
    border-radius: var(--radius);
    color: var(--callout-ink);
    font-size: var(--fs-ui);
    line-height: 1.6
}

.callout .ico {
    color: var(--brand);
    width: calc(var(--app-em)*1.2);
    height: calc(var(--app-em)*1.2);
    margin-block-start:calc(var(--app-em)*0.2)}

.callout b {
    color: var(--brand-deep)
}

.edit-note {
    margin-block-start:calc(var(--app-em)*1.5);color: var(--muted);
    font-size: var(--fs-meta)
}

.edit-note b {
    color: var(--head)
}

.related {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: calc(var(--app-em)*.9)
}

.related a {
    display: grid;
    gap: calc(var(--app-em)*.5);
    padding: calc(var(--app-em)*1.1);
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-tiny);
    color: var(--head);
    transition: box-shadow .18s ease
}

.related a:hover {
    box-shadow: var(--shadow-soft)
}

.related b {
    font-size: var(--fs-ui);
    font-weight: 650;
    line-height: 1.35
}

.related span {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.discussion {
    min-width: 0;
    margin-block-start:calc(var(--app-em)*1.5)}

.discussion-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.8);
    margin-block-end:calc(var(--app-em)*1.35)}

.discussion-head h2 {
    font-size: var(--fs-h2)
}

.counter {
    margin-inline-start:calc(var(--app-em)*.5);padding: calc(var(--app-em)*.1) calc(var(--app-em)*.55);
    background: var(--brand-tint);
    border-radius: var(--r-xs);
    color: var(--brand-deep);
    font-size: var(--fs-ui)
}

.discussion-head .sort {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.thread {
    display: grid;
    gap: calc(var(--app-em)*.875)
}

.thread-item {
    padding: calc(var(--app-em)*1.375) calc(var(--app-em)*1.375) calc(var(--app-em)*.7);
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft)
}

.thread-item--reply {
    box-shadow: none
}

.thread-top {
    display: flex;
    align-items: center;
    gap: calc(var(--app-em)*.75)
}

.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: calc(var(--app-em)*2.6);
    height: calc(var(--app-em)*2.6);
    min-width: calc(var(--app-em)*2.6);
    aspect-ratio: 1;
    background: var(--brand-tint);
    border-radius: 50%;
    color: var(--brand-deep);
    font-size: var(--fs-ui);
    font-weight: 700
}

.avatar.alt {
    background: var(--warn-soft);
    color: var(--warn-ink)
}

.avatar.alt2 {
    background: var(--ok-soft);
    color: var(--ok-ink)
}

.thread-ident {
    min-width: 0
}

.thread-who {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.5);
    color: var(--head);
    font-size: var(--fs-ui);
    font-weight: 650
}

.thread-badge {
    padding: calc(var(--app-em)*.05) calc(var(--app-em)*.5);
    background: var(--brand-tint);
    border-radius: var(--r-xs);
    color: var(--brand-deep);
    font-size: var(--fs-meta);
    font-weight: 650
}

.thread-when {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.5);
    margin-block-start:calc(var(--app-em)*0.15);color: var(--muted);
    font-size: var(--fs-meta)
}

.thread-text {
    margin-block-start:calc(var(--app-em)*0.875);color: var(--news-text);
    font-size: calc(var(--app-em)*.95);
    line-height: 1.6;
    overflow-wrap: anywhere
}

.thread-text code {
    padding: calc(var(--app-em)*.1) calc(var(--app-em)*.35);
    background: var(--brand-tint);
    border-radius: var(--r-xs);
    color: var(--brand-deep);
    font-family: var(--mono);
    font-size: calc(var(--app-em)*.9)
}

.thread-text pre > code {
    background: 0 0;
    padding: 0
}

.thread-text--comment .comments-user-profile {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: calc(var(--app-em)*.2) calc(var(--app-em)*.5);
    border-radius: var(--r-pill);
    background: var(--brand-tint);
    color: var(--brand-deep);
    font-size: .9em;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    vertical-align: baseline;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease,color .18s ease
}

.thread-text--comment .comments-user-profile:is(:hover, :focus-visible) {
    background: var(--brand-tint-2);
    color: var(--brand-deep);
    text-decoration: none
}

.thread-text--comment .comments-user-profile:focus-visible {
    outline: calc(var(--hair)*2) solid var(--brand);
    outline-offset: var(--sp-1)
}

@media (max-width: 44rem) and (orientation:portrait) {
    .story-text,.thread-text {
        font-size:var(--app-em)
    }
}

.thread-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.25);
    margin-block-start:calc(var(--app-em)*0.875)}

.thread-actions__end {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.25);
    margin-inline-start:auto}

.thread-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.45);
    min-height: calc(var(--app-em)*2.1);
    padding-inline:calc(var(--app-em)*0.65);border-radius: var(--r-md);
    color: var(--muted);
    font-size: var(--fs-meta);
    font-weight: 650;
    cursor: pointer;
    transition: background-color .18s ease,color .18s ease
}

.thread-btn:hover {
    background: var(--soft);
    color: var(--brand)
}

.thread-item--reply .thread-btn:hover {
    background: var(--soft)
}

.thread-actions .ico {
    width: calc(var(--app-em)*1.05);
    height: calc(var(--app-em)*1.05);
    stroke-width: 1.8
}

.thread-actions .vote-pill {
    min-height: calc(var(--app-em)*2.1)
}

.thread-action--danger:hover {
    background: var(--danger-soft);
    color: var(--danger-ink)
}

.note,.quote.dlehidden {
    display: flex;
    gap: calc(var(--app-em)*.9);
    margin-block-start:calc(var(--app-em)*1.1);padding: calc(var(--app-em)*1.15);
    background: var(--note-bg);
    border-radius: var(--radius);
    color: var(--note-ink);
    font-size: var(--fs-ui);
    line-height: 1.6;
    box-shadow: var(--shadow-tiny)
}

.note .ico,.quote.dlehidden .ico {
    color: var(--warn);
    width: calc(var(--app-em)*1.2);
    height: calc(var(--app-em)*1.2);
    margin-block-start:calc(var(--app-em)*0.2)}

.note b,.quote.dlehidden b {
    color: var(--note-strong)
}

.note a {
    color: var(--brand-deep);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb,currentColor 48%,transparent);
    text-decoration-thickness: var(--hair);
    text-underline-offset: calc(var(--app-em)*0.16)
}

.note a:hover {
    color: var(--brand);
    text-decoration-color: currentColor
}

.note a:focus-visible {
    color: var(--brand);
    outline: calc(var(--hair)*2) solid currentColor;
    outline-offset: calc(var(--hair)*2);
    border-radius: var(--r-xs);
    text-decoration-color: currentColor
}

.quote.dlehidden {
    display: block
}

.quote.dlehidden h4 {
    padding-block-end:.75em}

.reply-form {
    margin-block-start:calc(var(--app-em)*1.1);padding: calc(var(--app-em)*1.5)
}

.reply-form h3 {
    font-size: var(--fs-h4)
}

.reply-form .hint {
    margin-block-start:calc(var(--app-em)*0.4);color: var(--muted);
    font-size: var(--fs-meta)
}

.reply-form .row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: calc(var(--app-em)*.8);
    margin-block-start:calc(var(--app-em)*1.1)}

.reply-form label {
    display: grid;
    gap: calc(var(--app-em)*.35);
    color: var(--head);
    font-size: var(--fs-meta);
    font-weight: 650
}

.reply-form input,.reply-form textarea {
    padding: calc(var(--app-em)*.7) calc(var(--app-em)*.85);
    background: var(--soft);
    border: var(--hair) solid transparent;
    border-radius: var(--r-md);
    font-size: var(--fs-ui);
    font-weight: 400
}

.reply-form input:focus,.reply-form textarea:focus {
    background: var(--paper);
    border-color: var(--brand);
    outline: 0;
    box-shadow: var(--shadow-tiny)
}

.reply-form textarea {
    min-height: calc(var(--app-em)*7);
    resize: vertical
}

.reply-form .full {
    margin-block-start:calc(var(--app-em)*0.8)}

.reply-form .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.8);
    margin-block-start:calc(var(--app-em)*1.1)}

.reply-form .foot span {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.reply-form .foot a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-color: var(--brand-tint-2);
    text-underline-offset: calc(var(--app-em)*0.18)
}

.reply-form .foot a:hover {
    color: var(--brand-deep);
    text-decoration-color: currentColor
}

.profile__facts a,.ui-dialog-content a {
    color: var(--accent)
}

.profile__facts a:hover,.ui-dialog-content a:hover {
    color: var(--accent-strong)
}

.profile__about {
    margin-block-start:calc(var(--app-em)*1)}

@media (max-width: 64rem) {
    .related {
        grid-template-columns:minmax(0,1fr)
    }
}

@media (max-width: 44rem) {
    .fullstory {
        padding:calc(var(--app-em)*1.15)
    }

    .fullstory > .post-head h1 {
        font-size: calc(var(--app-em)*1.4)
    }

    .reply-form .row {
        grid-template-columns: minmax(0,1fr)
    }
}

.layout-main {
    min-width: 0
}

.layout--wide {
    display: block
}

.layout--wide .layout-main {
    max-width: none
}

.home-info:empty {
    display: none
}

.home-info {
    padding-block-start:calc(var(--app-em)*1.4)}

.to-top {
    position: fixed;
    inset-block-end: calc(var(--app-em)*1.5);
    inset-inline-end: calc(var(--app-em)*1.5);
    z-index: 60;
    display: grid;
    place-items: center;
    width: calc(var(--app-em)*2.8);
    height: calc(var(--app-em)*2.8);
    border: var(--hair) solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--head);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--app-em)*.5));
    transition: opacity .2s ease,transform .2s ease,visibility .2s ease;
    cursor: pointer
}

.to-top .ico {
    width: calc(var(--app-em)*1.15);
    height: calc(var(--app-em)*1.15)
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none
}

.to-top:hover {
    border-color: var(--brand);
    color: var(--brand)
}

@media print {
    .aside,.cookie-bar,.footer,.masthead,.read-progress,.search-panel,.to-top {
        display: none!important
    }

    .layout {
        display: block
    }
}

.user-menu {
    position: relative
}

.user-menu > summary {
    list-style: none;
    cursor: pointer
}

.user-menu > summary::-webkit-details-marker {
    display: none
}

.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.45);
    width: auto;
    padding-inline:calc(var(--app-em)*0.5)}

.user-menu-name {
    max-width: calc(var(--app-em)*7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-meta);
    font-weight: 600
}

.user-menu-badge {
    display: inline-grid;
    place-items: center;
    min-width: calc(var(--app-em)*1.15);
    height: calc(var(--app-em)*1.15);
    padding-inline:calc(var(--app-em)*0.25);border-radius: var(--r-pill);
    background: var(--danger);
    color: #fff;
    font-size: var(--fs-micro);
    font-weight: 700;
    line-height: 1
}

.user-menu-panel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + var(--app-em)*0.45);
    z-index: 70;
    width: min(calc(var(--app-em)*20),calc(100vw - var(--app-em)*2));
    padding: calc(var(--app-em)*.7);
    border-radius: calc(var(--app-em)*.8);
    background: var(--paper);
    box-shadow: var(--shadow-menu)
}

.user-menu-head {
    display: flex;
    align-items: center;
    gap: calc(var(--app-em)*.6);
    padding: calc(var(--app-em)*.4) calc(var(--app-em)*.5) calc(var(--app-em)*.7);
    border-block-end:var(--hair) solid var(--line-soft)}

.user-menu-profile {
    display: block;
    color: var(--head);
    font-weight: 700
}

.user-menu-group {
    display: block;
    color: var(--muted);
    font-size: var(--fs-micro)
}

.user-menu-list {
    display: grid;
    padding-block:calc(var(--app-em)*0.4)}

.user-menu-list : is(a, button) {
    display:flex;
    align-items: center;
    gap: calc(var(--app-em)*.55);
    width: 100%;
    padding: calc(var(--app-em)*.45) calc(var(--app-em)*.5);
    border: 0;
    border-radius: calc(var(--app-em)*.5);
    background: 0 0;
    color: var(--ink-2);
    font-size: var(--fs-meta);
    font-weight: 600;
    text-align: start;
    cursor: pointer
}

.user-menu-list :is(a, button):hover {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.user-menu-list .ico {
    width: calc(var(--app-em)*1.05);
    height: calc(var(--app-em)*1.05);
    color: var(--muted)
}

.user-menu-list :is(a, button):hover .ico {
    color: inherit
}

.theme-label--light {
    display: none
}

:root[data-theme="dark"] .theme-label--dark {
    display: none
}

:root[data-theme="dark"] .theme-label--light {
    display: inline
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-label--dark {
        display:none
    }

    :root:not([data-theme="light"]) .theme-label--light {
        display: inline
    }
}

.user-menu-count {
    margin-inline-start:auto;color: var(--muted);
    font-size: var(--fs-micro);
    font-weight: 600
}

.user-menu-foot {
    padding-block-start:calc(var(--app-em)*0.5);border-block-start: var(--hair) solid var(--line-soft)
}

.user-menu-links {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.75);
    margin-block-start:calc(var(--app-em)*0.7);font-size: var(--fs-meta)
}

.user-menu-panel--login {
    width: min(calc(var(--app-em)*20),calc(100vw - var(--app-em)*2));
    padding: calc(var(--app-em)*1)
}

.login-form .form-row {
    display: grid;
    gap: calc(var(--app-em)*.3);
    margin-block-end:calc(var(--app-em)*0.7)}

.form-label {
    color: var(--ink-2);
    font-size: var(--fs-meta);
    font-weight: 600
}

.form-check {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.4);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-em)*.5);
    margin-block-start:calc(var(--app-em)*0.6)}

.soc-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-block-start:var(--sp-3);padding-block-start: var(--sp-3);
    border-block-start:var(--hair) solid var(--line)}

.soc-links: empty {
    display:none
}

.soc-links__item {
    display: grid;
    place-items: center;
    width: calc(var(--app-em)*2.25);
    height: calc(var(--app-em)*2.25);
    border-radius: var(--r-md);
    background: var(--surface-soft);
    color: var(--muted)
}

.soc-links__item:hover {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.ico--brand {
    width: calc(var(--app-em)*1.125);
    height: calc(var(--app-em)*1.125);
    fill: currentColor;
    stroke: none
}

img.avatar {
    display: block;
    object-fit: cover;
    background: var(--brand-tint)
}

.avatar-sm {
    width: calc(var(--app-em)*1.7);
    height: calc(var(--app-em)*1.7);
    min-width: calc(var(--app-em)*1.7);
    font-size: var(--fs-micro)
}

.avatar--lg {
    width: calc(var(--app-em)*4.5);
    height: calc(var(--app-em)*4.5);
    min-width: calc(var(--app-em)*4.5);
    font-size: calc(var(--app-em)*1.8)
}

.avatar--xl {
    width: calc(var(--app-em)*6);
    height: calc(var(--app-em)*6);
    min-width: calc(var(--app-em)*6);
    font-size: calc(var(--app-em)*2.4)
}

.avatar--initial {
    overflow: hidden;
    text-transform: uppercase;
    user-select: none;
    background: var(--avatar-bg,var(--accent-strong));
    color: #fff
}

.avatar--tone-1 {
    --avatar-bg: #496a86
}

.avatar--tone-2 {
    --avatar-bg: #3f755d
}

.avatar--tone-3 {
    --avatar-bg: #7b5c2f
}

.avatar--tone-4 {
    --avatar-bg: #6c557d
}

.avatar--tone-5 {
    --avatar-bg: #2f7075
}

.avatar--tone-6 {
    --avatar-bg: #854f47
}

.avatar--tone-7 {
    --avatar-bg: #4f5f91
}

.avatar--tone-8 {
    --avatar-bg: #626d3f
}

.avatar--tone-9 {
    --avatar-bg: #7b4f68
}

.avatar--tone-10 {
    --avatar-bg: #4e6270
}

.release-list {
    display: grid;
    gap: calc(var(--app-em)*.7);
    margin: 0;
    padding: 0;
    list-style: none
}

.release-item {
    display: flex;
    gap: calc(var(--app-em)*.6);
    align-items: flex-start
}

.release-item.is-empty {
    display: none
}

.release-item > .ico {
    flex: 0 0 auto;
    width: calc(var(--app-em)*1.05);
    height: calc(var(--app-em)*1.05);
    margin-block-start:calc(var(--app-em)*0.2);color: var(--release-accent)
}

.release-item-body {
    min-width: 0
}

.release-item-body h4 {
    margin: 0;
    color: inherit;
    font-size: var(--app-em);
    font-weight: 600;
    line-height: 1.5
}

.release-item-body p {
    margin: calc(var(--app-em)*.15) 0 0;
    color: var(--release-ink);
    font-size: var(--fs-micro);
    line-height: 1.5
}

.archive-list .archive-count {
    margin-inline-start:auto;color: var(--muted);
    font-size: var(--fs-micro);
    font-weight: 600
}

.archive-list a br {
    display: none
}

.note-title {
    display: block;
    margin-block-end:calc(var(--app-em)*0.2);color: var(--note-strong);
    font-weight: 700
}

.note--error {
    --note-bg: var(--danger-soft);
    --note-ink: var(--danger-ink);
    --note-strong: var(--danger-ink)
}

.note--ok {
    --note-bg: var(--ok-soft);
    --note-ink: var(--ok-ink);
    --note-strong: var(--ok-ink)
}

.page-info {
    min-width: 0
}

.page-info:empty {
    display: none
}

.page-info:not(:empty) {
    margin-block-end:calc(var(--app-em)*1.1)}

.page-info > .note: first-child {
    margin-block-start:0
}

.panel {
    padding: calc(var(--app-em)*1.5);
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*1);
    background: var(--paper);
    box-shadow: var(--shadow-tiny)
}

.panel + .panel {
    margin-block-start:calc(var(--app-em)*1.2)}

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--app-em)*.6);
    margin-block-end:calc(var(--app-em)*1)}

.panel-head h1,.panel-head h2 {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-h2)
}

.panel-head p {
    margin: calc(var(--app-em)*.2) 0 0;
    color: var(--muted);
    font-size: var(--fs-meta)
}

.panel-note {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(calc(var(--app-em)*16),100%),1fr));
    gap: calc(var(--app-em)*1)
}

.form-grid--2 {
    grid-template-columns: repeat(auto-fit,minmax(min(calc(var(--app-em)*16),100%),1fr))
}

.field {
    display: grid;
    gap: calc(var(--app-em)*.3);
    min-width: 0
}

.field .field-label,.field > label {
    color: var(--ink-2);
    font-size: var(--fs-meta);
    font-weight: 600
}

.field-hint {
    color: var(--muted);
    font-size: var(--fs-micro)
}

.field--full {
    grid-column: 1/-1
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-meta)
}

.data-table td,.data-table th {
    padding: calc(var(--app-em)*.6) calc(var(--app-em)*.7);
    border-block-end:var(--hair) solid var(--line);text-align: start;
    vertical-align: middle
}

.data-table th {
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap
}

.table-scroll {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(calc(var(--app-em)*12),100%),1fr));
    gap: calc(var(--app-em)*.8)
}

.stat-tile {
    padding: calc(var(--app-em)*.9) calc(var(--app-em)*1);
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*.7);
    background: var(--soft)
}

.stat-tile .k {
    color: var(--muted);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: .08em
}

.stat-tile .v {
    color: var(--head);
    font-size: var(--fs-h3);
    font-weight: 700
}

.profile-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-em)*1)
}

.profile-top .avatar,.profile-top .avatar--initial {
    width: calc(var(--app-em)*5);
    height: calc(var(--app-em)*5);
    font-size: calc(var(--app-em)*2)
}

.profile-login {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-h2)
}

.profile-group {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.5);
    margin-inline-start:auto}

.pm-list {
    display: grid;
    gap: calc(var(--app-em)*.6)
}

.pm-item {
    display: grid;
    gap: calc(var(--app-em)*.35);
    padding: calc(var(--app-em)*.9);
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*.7);
    background: var(--paper)
}

.pm-item.is-new {
    border-color: var(--brand)
}

.pm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.6);
    color: var(--muted);
    font-size: var(--fs-micro)
}

.pm-quota {
    display: grid;
    gap: calc(var(--app-em)*.3)
}

.pm-quota-bar {
    height: calc(var(--app-em)*.5);
    border-radius: var(--r-pill);
    background: var(--surface-sunk);
    overflow: hidden
}

.pm-quota-bar i {
    display: block;
    height: 100%;
    background: var(--brand)
}

.cookie-bar {
    position: fixed;
    inset-inline-start: calc(var(--app-em)*1);
    inset-inline-end: auto;
    inset-block-end: calc(var(--app-em)*1);
    z-index: 90;
    width: min(calc(100% - var(--app-em)*2),calc(var(--app-em)*33));
    border: var(--hair) solid rgba(255,255,255,.14);
    border-radius: calc(var(--app-em)*1);
    background: rgba(7,27,52,.97);
    color: #edf5ff;
    box-shadow: 0 calc(var(--app-em)*1) calc(var(--app-em)*3) rgba(4,15,31,.3)
}

.cookie-inner {
    display: grid;
    gap: calc(var(--app-em)*.8);
    padding: calc(var(--app-em)*1.1)
}

.cookie-title {
    margin: 0 0 calc(var(--app-em)*.3);
    color: #fff;
    font-size: var(--fs-h4)
}

.cookie-text {
    margin: 0;
    color: #d7e4f3;
    font-size: var(--fs-meta);
    line-height: 1.55
}

.cookie-text a {
    color: #83cff7
}

.cookie-group {
    display: grid;
    gap: calc(var(--app-em)*.6);
    margin: 0;
    padding: calc(var(--app-em)*.8);
    border: var(--hair) solid rgba(255,255,255,.14);
    border-radius: calc(var(--app-em)*.7);
    background: rgba(255,255,255,.06)
}

.cookie-group legend {
    padding-inline:calc(var(--app-em)*0.4);color: #bad0e7;
    font-size: var(--fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em
}

.cookie-choice {
    display: flex;
    gap: calc(var(--app-em)*.6);
    align-items: flex-start
}

.cookie-choice b {
    display: block;
    color: #fff;
    font-size: var(--fs-meta)
}

.cookie-choice i {
    display: block;
    color: #c1d2e4;
    font-size: var(--fs-micro);
    font-style: normal;
    line-height: 1.5
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-em)*.5)
}

.cookie-bar .btn-quiet {
    color: #d7e4f3
}

.cookie-bar .btn-quiet:hover {
    background: rgba(255,255,255,.1);
    color: #fff
}

.cookie-more {
    margin-inline-start:auto;color: #bad0e7;
    font-size: var(--fs-micro)
}

.cookie-more:hover {
    color: #fff
}

.footer-cookie-link {
    padding: 0;
    border: 0;
    background: 0 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted
}

.footer-cookie-link:hover {
    color: var(--util-strong)
}

@media (max-width: 44rem) {
    .cookie-bar {
        inset-inline-start:calc(var(--app-em)*0.5);
        width: calc(100% - var(--app-em));
        inset-block-end: calc(var(--app-em)*0.5)
    }
}

.static-content--price {
    width: 100%;
    min-width: 0
}

.pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(calc(var(--app-em)*17),100%),1fr));
    gap: calc(var(--app-em)*1.1);
    align-items: stretch;
    min-width: 0
}

.price-card {
    --plan-accent: var(--accent-strong);
    --plan-soft: var(--accent-soft);
    --plan-button-ink: var(--accent-ink);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*1);
    background: var(--paper);
    box-shadow: var(--shadow-tiny)
}

.price-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: calc(var(--app-em)*.22);
    background: var(--plan-accent)
}

.price-card--featured {
    --plan-accent: var(--brand);
    --plan-soft: var(--brand-tint);
    border-color: var(--brand);
    box-shadow: var(--shadow-soft)
}

.price-card--lifetime {
    --plan-accent: var(--amber-ink);
    --plan-soft: var(--amber-soft);
    --plan-button-ink: var(--paper)
}

.price-card__head {
    display: flex;
    align-items: center;
    gap: calc(var(--app-em)*.75);
    padding: calc(var(--app-em)*1.35) calc(var(--app-em)*1.3) calc(var(--app-em)*1)
}

.price-card--featured .price-card__head {
    background: var(--paper)
}

.price-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: calc(var(--app-em)*2.45);
    height: calc(var(--app-em)*2.45);
    border-radius: var(--r-md);
    background: var(--plan-soft);
    color: var(--plan-accent)
}

.price-card--featured .price-card__icon {
    background: var(--brand);
    color: var(--on-brand)
}

.price-card__icon .ico {
    width: calc(var(--app-em)*1.2);
    height: calc(var(--app-em)*1.2)
}

.price-card h3 {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-h3)
}

.price-card__price {
    padding: calc(var(--app-em)*.95) calc(var(--app-em)*1.3);
    border-block:var(--hair) solid var(--line-soft);background: var(--plan-soft);
    text-align: center
}

.price-card .price-was {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.price-card .price-now {
    margin: calc(var(--app-em)*.35) 0 0;
    color: var(--head);
    font-size: calc(var(--app-em)*2.15);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.025em
}

.price-card .price-now .cur {
    color: var(--muted);
    font-size: var(--fs-h4);
    font-weight: 600
}

.price-card ul {
    display: grid;
    gap: calc(var(--app-em)*.5);
    flex: 1 1 auto;
    margin: 0;
    padding: calc(var(--app-em)*1.15) calc(var(--app-em)*1.3);
    list-style: none;
    color: var(--ink-2);
    font-size: var(--fs-meta)
}

.price-card ul li {
    display: flex;
    gap: calc(var(--app-em)*.55);
    align-items: flex-start
}

.price-card ul .ico {
    flex: 0 0 auto;
    width: calc(var(--app-em)*1);
    height: calc(var(--app-em)*1);
    margin-block-start:calc(var(--app-em)*0.2);color: var(--ok)
}

.price-card ul li.is-off {
    color: var(--muted)
}

.price-card ul li.is-off .ico {
    color: var(--muted)
}

.price-card ul li.is-limited,.price-card ul li.is-unlimited {
    margin-block-start:calc(var(--app-em)*0.2);padding: calc(var(--app-em)*.55) calc(var(--app-em)*.6);
    border-radius: var(--r-sm)
}

.price-card ul li.is-limited {
    background: var(--warn-soft);
    color: var(--warn-ink)
}

.price-card ul li.is-limited .ico {
    align-self: center;
    margin-block-start:0;color: var(--warn)
}

.price-card ul li.is-unlimited {
    background: var(--ok-soft);
    color: var(--ok-ink);
    font-weight: 600
}

.price-card ul li.is-unlimited .ico {
    color: var(--ok-ink)
}

.price-card ul li:not(.is-off) + li.is-off {
    margin-block-start:calc(var(--app-em)*0.2);padding-block-start: calc(var(--app-em)*0.7);
    border-block-start:var(--hair) solid var(--line-soft)}

.price-card .price-foot {
    margin-block-start: auto;
    padding: 0 calc(var(--app-em)*1.3) calc(var(--app-em)*1.3)
}

.price-card:not(.price-card--featured) .price-foot .btn-ghost {
    border-color: var(--plan-accent);
    background: var(--plan-accent);
    color: var(--plan-button-ink);
    box-shadow: 0 calc(var(--app-em)*.45) calc(var(--app-em)*1) color-mix(in srgb,var(--plan-accent) 24%,transparent)
}

.price-card:not(.price-card--featured) .price-foot .btn-ghost:hover {
    border-color: color-mix(in srgb,var(--plan-accent),#000 14%);
    background: color-mix(in srgb,var(--plan-accent),#000 14%);
    color: var(--plan-button-ink)
}

.price-card .price-foot .btn:focus-visible {
    outline: calc(var(--hair)*2) solid var(--plan-accent);
    outline-offset: calc(var(--hair)*2)
}

.pricing-info {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: calc(var(--app-em)*.9);
    margin-block-start:calc(var(--app-em)*1.2);padding: calc(var(--app-em)*1.15) calc(var(--app-em)*1.25);
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*.9);
    background: var(--soft)
}

.pricing-info__icon {
    display: grid;
    place-items: center;
    width: calc(var(--app-em)*2.35);
    height: calc(var(--app-em)*2.35);
    border-radius: var(--r-md);
    background: var(--brand-tint);
    color: var(--brand)
}

.pricing-info__icon .ico {
    width: calc(var(--app-em)*1.15);
    height: calc(var(--app-em)*1.15)
}

.pricing-info__body {
    min-width: 0
}

.pricing-info :is(h2, h3) {
    margin: 0 0 calc(var(--app-em)*.65);
    color: var(--head);
    font-size: var(--fs-h4)
}

.pricing-info__body > .license-hint {
    display: grid;
    gap: calc(var(--app-em)*.55);
    color: var(--ink-2);
    font-size: var(--fs-meta)
}

.pricing-info .license-hint p {
    margin: 0
}

.pricing-info .license-hint p + p {
    padding-block-start:calc(var(--app-em)*0.55);border-block-start: var(--hair) solid var(--line-soft)
}

.pricing-info .license-hint a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-color: var(--brand-tint-2);
    text-underline-offset: calc(var(--app-em)*0.18)
}

.pricing-info .license-hint a:hover {
    color: var(--brand-deep);
    text-decoration-color: currentColor
}

.price-was s {
    text-decoration: none;
    background: linear-gradient(170deg,transparent calc(50% - .6px),var(--danger) calc(50% - .6px),var(--danger) calc(50% + .6px),transparent calc(50% + .6px))
}

.buy-block {
    display: grid;
    gap: calc(var(--app-em)*1)
}

.buy-block > .buy-info {
    margin-block-start:0}

.buy-summary {
    display: grid;
    gap: calc(var(--app-em)*.4);
    padding: calc(var(--app-em)*1);
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*.8);
    background: var(--soft)
}

.buy-summary .price-now {
    color: var(--head);
    font-size: var(--fs-h2);
    font-weight: 700
}

.invoice-form {
    width: 100%;
    min-width: 0
}

.invoice {
    display: grid;
    gap: calc(var(--app-em)*1.35);
    width: min(100%,calc(var(--app-em)*70));
    margin-inline:auto;padding: calc(var(--app-em)*1.6)
}

.invoice-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: calc(var(--app-em)*.35) calc(var(--app-em)*1.5);
    align-items: end;
    padding-block-end:calc(var(--app-em)*1);border-block-end: var(--hair) solid var(--line)
}

.invoice-head h1 {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-h1)
}

.invoice-dates {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: calc(var(--app-em)*.6) calc(var(--app-em)*1.2);
    margin: 0;
    font-size: var(--fs-meta)
}

.invoice-dates div {
    display: grid;
    gap: calc(var(--app-em)*.15)
}

.invoice-dates dt {
    color: var(--muted);
    font-weight: 600
}

.invoice-dates dd {
    margin: 0;
    color: var(--head);
    font-weight: 700
}

.invoice-parties {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: calc(var(--app-em)*1)
}

.invoice-parties section {
    min-width: 0;
    padding: calc(var(--app-em)*1);
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*.75);
    background: var(--soft)
}

.invoice-parties h2 {
    margin: 0 0 calc(var(--app-em)*.45);
    color: var(--head);
    font-size: var(--fs-h4)
}

.invoice-parties address,.invoice-parties p {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--fs-meta);
    font-style: normal;
    line-height: 1.55;
    overflow-wrap: anywhere
}

.invoice-table {
    width: 100%;
    min-width: calc(var(--app-em)*46);
    table-layout: auto;
    border-collapse: collapse
}

.invoice-table .invoice-col-number,.invoice-table .invoice-col-price,.invoice-table .invoice-col-quantity {
    width: 1%
}

.invoice-table td,.invoice-table th {
    padding: calc(var(--app-em)*.85) calc(var(--app-em)*.8);
    border: var(--hair) solid var(--line);
    vertical-align: middle;
    overflow-wrap: anywhere
}

.invoice-table thead th {
    border-block-end:0;color: var(--head);
    letter-spacing: .01em
}

.invoice-table .invoice-line-number,.invoice-table .invoice-product td:nth-child(3),.invoice-table thead th:first-child,.invoice-table thead th:nth-child(3) {
    text-align: center;
    white-space: nowrap
}

.invoice-table .invoice-product td:nth-child(4),.invoice-table .invoice-summary-label,.invoice-table .invoice-summary-value,.invoice-table thead th:nth-child(4) {
    text-align: end
}

.invoice-table .invoice-product td:nth-child(3),.invoice-table .invoice-product td:nth-child(4),.invoice-table .invoice-summary-value,.invoice-table thead th:nth-child(3),.invoice-table thead th:nth-child(4) {
    white-space: nowrap
}

.invoice-table .invoice-product-title {
    display: block;
    color: var(--ink)
}

.invoice-table td strong {
    color: var(--head)
}

.invoice-table td .panel-note {
    margin-block-start:calc(var(--app-em)*0.3);color: var(--accent-strong)
}

.invoice-table .invoice-summary-label,.invoice-table .invoice-summary-value {
    color: var(--ink-2)
}

.invoice-table .invoice-discount .invoice-summary-label {
    color: var(--head);
    font-weight: 500
}

.invoice-table .invoice-discount .invoice-summary-value,.invoice-table .invoice-total .invoice-summary-value,.invoice-table .invoice-total .invoice-summary-value strong {
    color: var(--danger)
}

.invoice-table .invoice-total td {
    color: var(--head);
    font-weight: 700
}

.invoice-settlement {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--app-em)*.75) calc(var(--app-em)*1.2)
}

.invoice-settlement > p,.invoice-thanks {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-meta)
}

.invoice-settlement .form-actions {
    margin-inline-start:auto}

.invoice-pay {
    --invoice-pay-bg: #2e6b52;
    --invoice-pay-hover: #1f4e3b;
    --invoice-pay-ink: #fff;
    border-color: var(--invoice-pay-bg);
    background: var(--invoice-pay-bg);
    color: var(--invoice-pay-ink)
}

.invoice-pay:hover {
    border-color: var(--invoice-pay-hover);
    background: var(--invoice-pay-hover);
    color: var(--invoice-pay-ink)
}

.invoice-pay:focus-visible {
    outline: calc(var(--hair)*2) solid var(--invoice-pay-bg);
    outline-offset: var(--sp-1)
}

:is(:root[data-theme="dark"], body.dle_theme_dark) .invoice-pay {
    --invoice-pay-bg: #72a98f;
    --invoice-pay-hover: #8bbba4;
    --invoice-pay-ink: #101821
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .invoice-pay {
        --invoice-pay-bg:#72a98f;
        --invoice-pay-hover: #8bbba4;
        --invoice-pay-ink: #101821
    }
}

.invoice-thanks {
    text-align: center
}

.page-info--commerce,.static-content--buy,.static-content--download {
    width: min(100%,calc(var(--app-em)*70));
    margin-inline:auto}

.download-block {
    display: grid;
    gap: calc(var(--app-em)*1)
}

.download-version {
    display: grid;
    gap: calc(var(--app-em)*.9);
    width: 100%;
    min-width: 0;
    padding: calc(var(--app-em)*1);
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*.8);
    background: var(--soft)
}

.download-version .field {
    width: 100%
}

.download-current {
    margin: 0;
    color: var(--accent-strong);
    font-size: var(--fs-meta);
    font-weight: 600
}

.download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.6)
}

.download-actions .is-disabled {
    cursor: not-allowed;
    opacity: .55
}

.license-block {
    display: grid;
    gap: calc(var(--app-em)*1)
}

.license-empty {
    display: grid;
    gap: calc(var(--app-em)*.7);
    justify-items: start
}

.license-count {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.license-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-meta)
}

.license-table td,.license-table th {
    padding: calc(var(--app-em)*.6) calc(var(--app-em)*.7);
    border-block-end:var(--hair) solid var(--line-soft);text-align: start;
    vertical-align: middle
}

.license-table th {
    color: var(--muted);
    font-weight: 600
}

.license-key {
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    overflow-wrap: anywhere
}

.license-state {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.35);
    vertical-align: middle
}

.license-state .ico {
    width: calc(var(--app-em)*1.3);
    height: calc(var(--app-em)*1.3);
    align-self: center
}

.license-state--ok {
    color: var(--ok-ink)
}

.license-state--off {
    color: var(--muted)
}

.license-limit--ok {
    color: var(--ok-ink)
}

.license-limit--over {
    color: var(--danger-ink)
}

.license-limit--none {
    color: var(--accent-strong)
}

.license-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-em)*.4);
    margin-block-start:calc(var(--app-em)*0.35)}

.license-hint {
    color: var(--muted);
    font-size: var(--fs-meta);
    line-height: 1.55
}

.license-hint b {
    color: var(--head)
}

.license-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-em)*.6)
}

.license-block [aria-busy="true"] {
    cursor: progress;
    opacity: .7
}

@media (max-width: 44rem) {
    .invoice {
        gap:calc(var(--app-em)*1);
        padding: calc(var(--app-em)*1)
    }

    .invoice-head {
        grid-template-columns: minmax(0,1fr);
        align-items: start
    }

    .invoice-dates {
        justify-content: flex-start
    }

    .invoice-parties {
        grid-template-columns: minmax(0,1fr)
    }

    .invoice-table td,.invoice-table th {
        padding-inline:calc(var(--app-em)*0.45)}

    .invoice-settlement,.invoice-settlement .btn,.invoice-settlement .form-actions {
        width: 100%
    }

    .license-block .table-scroll {
        overflow: visible
    }

    .license-table,.license-table tbody,.license-table td,.license-table tr {
        display: block;
        width: 100%
    }

    .license-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap
    }

    .license-table tbody {
        display: grid;
        gap: calc(var(--app-em)*.8)
    }

    .license-table tr {
        padding: calc(var(--app-em)*.35) calc(var(--app-em)*.9);
        border: var(--hair) solid var(--line);
        border-radius: calc(var(--app-em)*.8);
        background: var(--soft)
    }

    .license-table td {
        padding: calc(var(--app-em)*.65) 0;
        border-block-end:0}

    .license-table td + td {
        border-block-start:var(--hair) solid var(--line-soft)}

    .license-table td: :before {
        display:block;
        margin-block-end:calc(var(--app-em)*0.25);color: var(--muted);
        font-size: var(--fs-micro);
        font-weight: 600
    }

    .license-table td:nth-child(1)::before {
        content: "Лицензия"
    }

    .license-table td:nth-child(2)::before {
        content: "Ключ лицензии"
    }

    .license-table td:nth-child(3)::before {
        content: "Дата окончания"
    }

    .license-table td:nth-child(4)::before {
        content: "Домен"
    }
}

@media print {
    .invoice-form {
        color: #1d2935;
        background: #fff
    }

    .invoice {
        width: 100%;
        max-width: none;
        padding: 0;
        border: 0;
        box-shadow: none
    }

    .aside,.cookie-bar,.invoice-settlement,.site-footer,.site-header,.speedbar,.to-top,.utility {
        display: none!important
    }
}

code,kbd,pre,samp {
    overflow-wrap: normal
}

.aside,.feed,.feed > *,.footer-grid,.layout,.layout-main,.post,.section-head,.thread > form,.widget {
    min-width: 0;
}

.nav > a,.nav-toggle {
    white-space: nowrap
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.4) calc(var(--app-em)*1.1);
    margin-block-start:calc(var(--app-em)*1.6);padding-block-start: calc(var(--app-em)*1.2);
    border-block-start:var(--hair) solid rgba(255,255,255,.08);font-size: var(--fs-meta)
}

.footer-cookie-link,.footer-links a {
    color: var(--foot-link)
}

.footer-links a:hover {
    color: var(--util-strong)
}

.meta > :where(.action-wrap) > a,.meta > a {
    display: inline-flex;
    align-items: center;
    color: inherit
}

.meta > :where(.action-wrap) > a:hover,.meta > a:hover {
    color: var(--brand)
}

.meta a > span {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.3)
}

.icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    vertical-align: -.135em
}

.form-body {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: calc(var(--app-em)*1);
    min-width: 0
}

.form-grid--three {
    grid-template-columns: repeat(auto-fit,minmax(min(calc(var(--app-em)*12),100%),1fr))
}

.form-row {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: calc(var(--app-em)*.35);
    min-width: 0
}

.form-row--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-em)*.6)
}

.form-row--check {
    gap: calc(var(--app-em)*.5)
}

.form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-em)*.6)
}

.form-inline .form-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0
}

.form-input {
    width: 100%
}

.form-actions__hint,.form-hint {
    color: var(--muted);
    font-size: var(--fs-ui);
    line-height: 1.5
}

.form-req {
    color: var(--danger-ink)
}

.form-sep {
    margin: calc(var(--app-em)*.6) 0 0;
    padding-block-start:calc(var(--app-em)*1);border-block-start: var(--hair) solid var(--line-soft);
    color: var(--head);
    font-size: var(--fs-h4)
}

.is-danger {
    color: var(--danger-ink)
}

.is-danger:hover {
    color: var(--danger-ink);
    background: var(--danger-soft)
}

.auth-form {
    display: grid;
    gap: calc(var(--app-em)*1.2)
}

.auth-form__title {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-h1)
}

.auth-form__lead {
    max-width: 68ch;
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-body);
    line-height: 1.6
}

.profile {
    display: grid;
    gap: calc(var(--app-em)*1.4)
}

.profile__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: calc(var(--app-em)*1.1)
}

.profile__ident {
    min-width: 0;
    flex: 1 1 calc(var(--app-em)*16)
}

.profile__name {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-h2)
}

.profile__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-em)*.6);
    margin: calc(var(--app-em)*.25) 0 0;
    color: var(--muted);
    font-size: var(--fs-meta)
}

.profile__group {
    padding: calc(var(--app-em)*.1) calc(var(--app-em)*.6);
    border-radius: var(--r-pill);
    background: var(--chip-bg);
    color: var(--chip-ink);
    font-weight: 600
}

.is-online {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.35);
    color: var(--ok-ink);
    font-weight: 600
}

.is-online::before {
    content: "";
    width: calc(var(--app-em)*.45);
    height: calc(var(--app-em)*.45);
    border-radius: 50%;
    background: currentColor
}

.profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.5);
    margin-block-start:calc(var(--app-em)*0.8)}

.profile__actions > a {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.4);
    padding: calc(var(--app-em)*.35) calc(var(--app-em)*.8);
    border: var(--hair) solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink-2);
    font-size: var(--fs-meta);
    font-weight: 600;
    cursor: pointer
}

.profile__actions > a:hover {
    border-color: var(--brand);
    color: var(--brand)
}

.profile__grid {
    display: grid;
    gap: calc(var(--app-em)*1);
    grid-template-columns: repeat(auto-fit,minmax(min(calc(var(--app-em)*17),100%),1fr))
}

.profile__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(var(--app-em)*.5) calc(var(--app-em)*1);
    margin: 0;
    padding: calc(var(--app-em)*1);
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*.8);
    background: var(--soft);
    font-size: var(--fs-meta)
}

.profile__facts dt {
    color: var(--muted)
}

.profile__facts dd {
    margin: 0;
    color: var(--ink-2);
    overflow-wrap: anywhere
}

.profile__link {
    margin-inline-start:calc(var(--app-em)*.4)}

.profile__about h2 {
    margin: 0 0 calc(var(--app-em)*.5);
    color: var(--head);
    font-size: var(--fs-h3)
}

.profile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.35);
    padding-block-end:calc(var(--app-em)*0.8);border-block-end: var(--hair) solid var(--line);
    scroll-margin-block-start: var(--head-offset)
}

.profile-tabs__button {
    min-height: var(--control-h);
    padding: 0 calc(var(--app-em)*1);
    border: 0;
    border-radius: var(--r-pill);
    background: 0 0;
    color: var(--muted);
    font-size: var(--fs-ui);
    font-weight: 600;
    cursor: pointer
}

.profile-tabs__button:hover {
    background: var(--surface-soft);
    color: var(--accent-strong)
}

.profile-tabs__button.is-active {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.profile-tabpanel {
    min-width: 0;
    scroll-margin-block-start: calc(var(--head-offset) + var(--app-em)*2.5 - var(--hair))
}

.profile-tabpanel[hidden] {
    display: none
}

@media (max-width: 44rem) and (orientation:portrait) {
    .profile__head {
        flex-direction:column;
        align-items: center;
        text-align: center
    }

    .profile__ident {
        flex: 0 0 auto;
        width: 100%
    }

    .profile-tabs,.profile__actions,.profile__status {
        justify-content: center
    }

    .profile__head .note {
        text-align: start
    }
}

.profile-popup {
    display: grid;
    gap: calc(var(--app-em)*.9)
}

.profile-popup__summary {
    display: flex;
    gap: calc(var(--app-em)*.9);
    align-items: flex-start
}

.profile-popup__avatar {
    position: relative;
    flex: 0 0 auto
}

.profile-popup__name {
    display: block;
    color: var(--head);
    font-size: var(--fs-h4)
}

.profile-popup__details {
    display: grid;
    gap: calc(var(--app-em)*.25);
    margin: calc(var(--app-em)*.4) 0 0;
    font-size: var(--fs-meta)
}

.profile-popup__details > div {
    display: flex;
    gap: calc(var(--app-em)*.5)
}

.profile-popup__details dt {
    min-width: calc(var(--app-em)*8);
    color: var(--muted)
}

.profile-popup__details dd {
    margin: 0;
    color: var(--ink-2)
}

.profile-popup__links {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.5);
    padding-block-start:calc(var(--app-em)*0.7);border-block-start: var(--hair) solid var(--line-soft);
    font-size: var(--fs-meta)
}

.profile-popup__link:last-child {
    margin-inline-start:auto}

.pm-menu {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.5);
    margin-block-end:calc(var(--app-em)*1)}

.pm-status {
    display: grid;
    gap: calc(var(--app-em)*.35);
    margin-block-end:calc(var(--app-em)*1)}

.pm-status__text {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.pm-status__bar {
    height: calc(var(--app-em)*.5);
    border-radius: calc(var(--app-em)*.25);
    background: var(--surface-sunk);
    overflow: hidden
}

.pm-status__bar > .pm_progress_bar {
    display: block;
    height: 100%;
    border-radius: inherit
}

.pmlist {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-meta)
}

.pmlist .pm td,.pmlist .pm th {
    padding: calc(var(--app-em)*.6) calc(var(--app-em)*.6);
    border-block-end:var(--hair) solid var(--line-soft);text-align: start;
    vertical-align: middle
}

.pmlist th {
    color: var(--muted);
    font-weight: 600
}

.pm-dialog {
    display: grid;
    margin-block-start:calc(var(--app-em)*1.2)}

.pm-dialog__messages {
    gap: calc(var(--app-em)*1.2)
}

.pm-message-head {
    min-width: 0;
    margin-block-end:calc(var(--app-em)*-1.2);padding: calc(var(--app-em)*.7) calc(var(--app-em)*1.5) 0;
    border: var(--hair) solid var(--line);
    border-block-end:0;border-start-start-radius: calc(var(--app-em)*1);
    border-start-end-radius: calc(var(--app-em)*1);
    background: var(--paper);
    box-shadow: var(--shadow-tiny)
}

.pm-message-head h2 {
    margin: 0;
    padding-block-end:calc(var(--app-em)*0.55);border-block-end: var(--hair) solid var(--line-soft);
    color: var(--head);
    font-size: var(--fs-h3);
    line-height: 1.3;
    letter-spacing: -.02em;
    overflow-wrap: anywhere
}

.pm-dialog__messages > #dle-lastread-pm {
    display: none
}

.pm-dialog__messages .thread-item {
    margin: 0
}

.pm-dialog__messages > div[id^="message-id-"]:first-of-type > .thread-item {
    border-block-start:0;border-start-start-radius: 0;
    border-start-end-radius: 0
}

.pm-dialog__messages + .reply-form {
    margin-block-start:0}

.stats {
    display: grid;
    gap: calc(var(--app-em)*1.4);
    min-width: 0
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: calc(var(--app-em)*.8)
}

.stats-card {
    display: grid;
    align-content: start;
    gap: calc(var(--app-em)*.2);
    min-width: 0;
    padding: calc(var(--app-em)*.9) calc(var(--app-em)*1);
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*.7);
    background: var(--soft)
}

.stats-card__label {
    display: block;
    color: var(--muted);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: .07em
}

.stats-card__value {
    display: block;
    color: var(--head);
    font-size: var(--fs-h3);
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

.stats-card__hint {
    display: block;
    color: var(--muted);
    font-size: var(--fs-micro);
    line-height: 1.5;
    overflow-wrap: anywhere
}

.stats-groups {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: calc(var(--app-em)*.8)
}

.stats-group {
    min-width: 0
}

.stats-group h2 {
    display: flex;
    align-items: center;
    gap: calc(var(--app-em)*.45);
    margin: 0 0 calc(var(--app-em)*.5);
    color: var(--head);
    font-size: var(--fs-h4)
}

.stats-group h2 .ico {
    flex: 0 0 auto;
    width: calc(var(--app-em)*1.05);
    height: calc(var(--app-em)*1.05);
    color: var(--brand)
}

.stats-group ul {
    display: grid;
    margin: 0;
    padding: 0;
    border-block-start:var(--hair) solid var(--line-soft);list-style: none
}

.stats-group li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--app-em)*.75);
    min-width: 0;
    padding-block:calc(var(--app-em)*0.5);border-block-end: var(--hair) solid var(--line-soft);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.stats-group li b {
    margin-inline-start:auto;color: var(--head);
    font-weight: 650;
    font-variant-numeric: tabular-nums
}

.stats-group li a {
    color: var(--accent-strong);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent-soft);
    text-underline-offset: calc(var(--app-em)*0.18)
}

.stats-group li a:hover {
    color: var(--head);
    text-decoration-color: currentColor
}

.stats-db {
    margin: 0;
    padding: calc(var(--app-em)*.7) calc(var(--app-em)*.85);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: var(--fs-meta)
}

.stats-db b {
    color: var(--head);
    font-variant-numeric: tabular-nums
}

.stats-top {
    display: grid;
    gap: calc(var(--app-em)*.5);
    min-width: 0
}

.stats-top-title {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-h4)
}

@media (max-width: 44rem) {
    .stats-cards,.stats-groups {
        grid-template-columns:minmax(0,1fr)
    }
}

.searchpage {
    display: grid;
    gap: calc(var(--app-em)*1.2)
}

.searchtable {
    display: grid;
    gap: calc(var(--app-em)*1)
}

.search-advanced,.search-simple {
    display: grid;
    gap: calc(var(--app-em)*1)
}

.search-fieldset {
    display: grid;
    gap: calc(var(--app-em)*.7);
    margin: 0;
    padding: calc(var(--app-em)*1);
    border: var(--hair) solid var(--line);
    border-radius: calc(var(--app-em)*.8)
}

.search-fieldset legend {
    padding-inline:calc(var(--app-em)*0.4);color: var(--muted);
    font-size: var(--fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em
}

.search-actions {
    margin-block-start:calc(var(--app-em)*0.4)}

.search-advanced {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.search-actions,.search-fieldset--wide {
    grid-column: 1/-1
}

@media (max-width: 52rem) {
    .search-advanced {
        grid-template-columns:minmax(0,1fr)
    }
}

.search-result-msg {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.addvote {
    display: grid;
    gap: calc(var(--app-em)*.7);
    margin-block-start:calc(var(--app-em)*0.8)}

.addvote__body {
    display: grid;
    gap: calc(var(--app-em)*.6)
}

.preview-card {
    display: grid;
    gap: calc(var(--app-em)*.8)
}

.preview-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-em)*.6)
}

.preview-card__title {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-h2)
}

.preview-card__media img {
    max-width: 100%;
    height: auto;
    border-radius: calc(var(--app-em)*.7)
}

.discussion-empty {
    color: var(--muted);
    font-size: var(--fs-meta)
}

.poll-block {
    margin-block-start:calc(var(--app-em)*1.2)}

.poll-card {
    display: grid;
    gap: calc(var(--app-em)*.8);
    padding: calc(var(--app-em)*1.3)
}

.poll-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--app-em)*.6)
}

.poll-card-head h2 {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-h3)
}

.poll-card .poll-list {
    gap: calc(var(--app-em)*.45)
}

.poll-total {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-meta)
}

.poll-total--closed {
    color: var(--danger-ink)
}

.thread-images {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-em)*.5);
    margin-block-start:calc(var(--app-em)*0.6)}

.thread-images img {
    max-width: 100%;
    height: auto;
    border-radius: calc(var(--app-em)*.5)
}

.thread-signature {
    margin-block-start:calc(var(--app-em)*0.6);padding-block-start: calc(var(--app-em)*0.5);
    border-block-start:var(--hair) solid var(--line-soft);color: var(--muted);
    font-size: var(--fs-micro)
}

.thread-mass {
    margin-inline-start:auto}

.thread-when a {
    color: var(--brand)
}

.thread-replies {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.3);
    min-height: calc(var(--app-em)*2.1);
    padding-inline:calc(var(--app-em)*0.55);border-radius: var(--r-md);
    color: var(--muted);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums
}

.thread-btn--danger:hover {
    color: var(--danger-ink)
}

.thread-online {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: calc(var(--app-em)*.7);
    height: calc(var(--app-em)*.7);
    border: calc(var(--app-em)*.12) solid var(--paper);
    border-radius: 50%;
    background: var(--ok)
}

.profile-popup__avatar,.thread-avatar {
    position: relative;
    display: inline-flex
}

.thread-rate {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--app-em)*2.1)
}

.thread-rate.is-positive {
    color: var(--ok-ink)
}

.thread-rate.is-negative {
    color: var(--danger-ink)
}

.stars {
    display: inline-flex
}

.post-media img {
    width: 100%;
    height: auto;
    display: block;
    border-start-start-radius: calc(var(--app-em)*0.9);
    border-start-end-radius: calc(var(--app-em)*0.9)
}

.post-tools {
    display: flex;
    align-items: center;
    gap: calc(var(--app-em)*.6)
}

span.action-wrap {
    display: contents
}

.post-actions {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--app-em)*.25)
}

.post--pinned {
    border-color: var(--brand)
}

.cover-image {
    width: 100%;
    height: auto
}

.visual {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: calc(var(--app-em)*.7);
    background: linear-gradient(135deg,var(--brand-tint),var(--grad-tint))
}

.fullstory-media {
    margin: 0 0 calc(var(--app-em)*1.2)
}

.fullstory-media img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--app-em)*.8)
}

.fullstory-pages {
    margin-block-start:calc(var(--app-em)*1)}

.fullstory--pinned {
    border-color: var(--brand)
}

.page-info--static,.staticpage {
   
    min-width: 0;
    margin-inline:auto}

.staticpage--templates-changelog .static-accordion {
    gap: var(--sp-3)
}

.staticpage--faq .story-text {
    display: grid;
    gap: var(--sp-3)
}

.staticpage--faq .static-faq + .static-faq {
    margin-block-start:0}

.staticpage .panel-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: start
}

.staticpage .panel-head > :first-child {
    min-width: 0
}

.staticpage .panel-head h1 {
    overflow-wrap: break-word
}

.static-callout {
    padding: calc(var(--app-em)*1);
    border-inline-start:calc(var(--app-em)*0.2) solid var(--accent);border-radius: var(--r-md);
    background: var(--accent-soft);
    box-shadow: var(--shadow-tiny);
    margin-block-end:var(--sp-3)}

.static-callout--warning {
    border-inline-start-color: var(--warn);
    background: var(--warn-soft)
}

.static-faq {
    border: var(--hair) solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    overflow: clip
}

.static-faq + .static-faq {
    margin-block-start:calc(var(--app-em)*0.55)}

.static-faq > summary {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--app-em)*.65);
    padding: calc(var(--app-em)*.85) calc(var(--app-em)*1);
    cursor: pointer;
    transition: background-color .18s ease
}


.static-accordion {
    display: grid;
    gap: calc(var(--app-em)*.65);
    min-width: 0
}

.static-accordion__item {
    min-width: 0;
    border: var(--hair) solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    overflow: clip
}

.static-accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--app-em)*.8);
    width: 100%;
    min-height: calc(var(--app-em)*3.25);
    padding: calc(var(--app-em)*.75) calc(var(--app-em)*1);
    border: 0;
    background: 0 0;
    text-align: start;
    cursor: pointer
}

.static-accordion__toggle::after {
    content: "";
    flex: 0 0 auto;
    width: calc(var(--app-em)*1.6);
    height: calc(var(--app-em)*1.6);
    border-radius: var(--r-sm);
    background-color: var(--surface-soft);
    color: var(--accent-strong);
    background-image: linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 52% calc(var(--hair)*2),calc(var(--hair)*2) 52%;
    box-shadow: inset 0 0 0 var(--hair) var(--line);
    transition: transform .22s cubic-bezier(.16,1,.3,1),background-size .18s ease,background-color .18s ease,color .18s ease
}

.static-accordion__toggle:hover {
    background: var(--surface-soft)
}

.static-accordion__toggle[aria-expanded="true"] {
    background: var(--accent-soft)
}

.static-accordion__toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
    background-color: var(--paper);
    background-size: 52% calc(var(--hair)*2),calc(var(--hair)*2) 0
}

.static-accordion__toggle:focus-visible {
    outline: calc(var(--hair)*2) solid var(--accent-strong);
    outline-offset: calc(var(--hair)*-3)
}

.static-accordion__panel {
    min-width: 0;
    margin-top: 12px;
    border-block-start:var(--hair) solid var(--line);transform-origin: center top
}

.static-accordion__content {
    min-width: 0;
    padding: calc(var(--app-em)*1)
}

.staticpage--templates-changelog .static-accordion__content h5 {
    font-weight: 500
}

.static-accordion__content > :last-child {
    margin-block-end:0}

@media (prefers-reduced-motion:reduce) {
    .static-faq > summary::before {
        transition: none
    }

    .static-faq.is-open > summary::before {
        transform: none
    }

    .static-accordion__toggle::after {
        transition: background-color .12s ease,color .12s ease
    }

    .static-accordion__toggle[aria-expanded="true"]::after {
        transform: none
    }
}



/* Nadpisy uvnitř changelogu */
.static-accordion__panel h1,
.static-accordion__panel h2,
.static-accordion__panel h3,
.static-accordion__panel h4,
.static-accordion__panel h5,
.static-accordion__panel h6 {
    margin-top: 20px;
    margin-bottom: 15px;
    line-height: 1.4;
    letter-spacing: normal;
}

/* První nadpis v panelu */
.static-accordion__panel h1:first-child,
.static-accordion__panel h2:first-child,
.static-accordion__panel h3:first-child,
.static-accordion__panel h4:first-child,
.static-accordion__panel h5:first-child,
.static-accordion__panel h6:first-child {
    margin-top: 0;
}

div.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button > span {
    display: inline-flex;
    align-items: center;
    gap: .25em;
}

div.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button > span > svg {
    flex-shrink: 0;
    margin-top: 0;
}

:not(pre)>code[class*=language-], pre[class*=language-] {
    background: #f9fafa;
    border: 1px solid #dce7e7;
    max-height: 25em;
}

pre[class*=language-] {
    scrollbar-width: thin;
}

.token.bbcode .token.tag {
    color: #9a6e3a;
}

.token.bbshortcode .token.tag {
    color: #27388a;
}

.token.string-property.property {
    color: #547c02;
}