:root {
    --ink: #1c1612;
    --muted: #4f463d;
    --line: #e6dccf;
    --paper: #f6f1e8;
    --panel: #fffdf8;
    --accent: #9f1d1d;
    --ticker: #1c1612;
    --ticker-ink: #f6f1e8;
    --serif: "Iowan Old Style", Palatino, Georgia, serif;
    --sans: "Avenir Next", "Segoe UI", sans-serif;
    color-scheme: light;
}
html[data-theme="dark"] {
    --ink: #f4efe8;
    --muted: #c8beb2;
    --line: #3a332c;
    --paper: #14110f;
    --panel: #1d1916;
    --accent: #f0b429;
    --ticker: #f0b429;
    --ticker-ink: #1c1612;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --ink: #f4efe8;
        --muted: #c8beb2;
        --line: #3a332c;
        --paper: #14110f;
        --panel: #1d1916;
        --accent: #f0b429;
        --ticker: #f0b429;
        --ticker-ink: #1c1612;
        color-scheme: dark;
    }
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font: 18px/1.55 var(--serif);
    overflow-x: clip;
}
img, video, svg, iframe, canvas { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}
html[data-type="sans"] body { font-family: var(--sans); }
a { color: inherit; }
.skip {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip:focus {
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    inset-inline-start: 12px;
    top: 12px;
    background: var(--panel);
    padding: 8px;
    z-index: 6;
    white-space: normal;
}
.mast, .colophon, .rail, .ticker, .banner { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.mast { padding: 18px 0 0; border-bottom: 1px solid var(--ink); }
.mast-meta, .mast-nav, .colophon { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.kicker, .when, .mast-meta, .mast-nav, button, .theme-toggle {
    font: 12px/1.2 var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.kicker { color: var(--accent); margin: 0 0 6px; }
.logo { font-size: clamp(42px, 7vw, 84px); line-height: 0.9; letter-spacing: -0.03em; text-decoration: none; }
.tagline { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.mast-nav {
    border-top: 1px solid var(--line);
    margin-top: 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}
.mast-nav a { text-decoration: none; padding: 12px 0; flex: none; }
.theme-toggle, button {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 8px 10px;
    cursor: pointer;
}
.ticker {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--ticker);
    color: var(--ticker-ink);
    padding: 8px 12px;
    margin-top: 0;
    width: 100%;
    max-width: none;
}
.ticker span { font: 700 12px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.ticker div { display: flex; gap: 22px; overflow-x: auto; min-width: 0; flex: 1; scrollbar-width: thin; }
.ticker a { color: inherit; white-space: nowrap; text-decoration: none; }
.banner { background: var(--panel); border: 1px solid var(--line); padding: 10px 12px; }
main { padding-bottom: 64px; }
.rail { margin-top: 28px; }
.rail-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); }
.rail-head h2, .story h1 { font-weight: 500; letter-spacing: -0.03em; margin: 0; }
.rail-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 16px; }
.card { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.card h3 { font-size: 22px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.02em; overflow-wrap: break-word; }
.card h3 a { text-decoration: none; }
.dek { color: var(--muted); margin: 0 0 8px; }
.lead { grid-row: span 2; }
.lead h3 { font-size: clamp(32px, 4vw, 52px); line-height: 1.02; }
.grid-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 16px; }
.grid-cols h3 { font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--sans); }
.ad-slot, .letter { border: 1px dashed var(--accent); padding: 22px; margin-top: 16px; background: var(--panel); contain: layout; }
.ad-slot { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.rail .ad-slot, .story .ad-slot, .sheet .ad-slot { width: auto; margin-inline: 0; }
.ad-html { max-width: 100%; overflow: auto; }
.ad-html img, .ad-html iframe, .ad-html video { max-width: 100%; }
.ad-mobile { display: none; }
.sheet.has-sidebar { width: min(1180px, calc(100% - 32px)); margin: 24px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.sheet.has-sidebar .rail, .sheet.has-sidebar .ticker, .sheet.has-sidebar .banner, .sheet.has-sidebar .story { width: auto; margin-inline: 0; }
.letter input, .story .body { font: 18px/1.6 var(--serif); }
.letter input { width: min(360px, 100%); margin-block: 8px; margin-inline: 0 12px; padding: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.story { width: min(760px, calc(100% - 32px)); margin: 36px auto; }
.story h1 { font-size: clamp(36px, 6vw, 64px); line-height: 0.98; overflow-wrap: break-word; }
.byline { font: 14px/1.4 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; margin: 8px 0; }
.lead-dek { font-size: 22px; }
.body { margin-top: 24px; }
.colophon { border-top: 1px solid var(--ink); padding: 28px 0 48px; margin-top: 48px; }
.colophon a { margin-inline-end: 14px; }
.colophon .footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; min-width: 0; }
.colophon .footer-columns a { display: block; margin: 6px 0; }
h1, h2, h3 { overflow-wrap: break-word; }
[dir="rtl"] body { direction: rtl; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mast-search { margin-inline-start: auto; }
.mast-search input { width: min(180px, 40vw); margin: 0; padding: 8px 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 14px/1.2 var(--sans); text-transform: none; letter-spacing: 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 13px/1.4 var(--sans); margin: 18px 0 0; }
.crumbs a { text-decoration: none; }
.chev { width: 0.45em; height: 0.45em; border-top: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; transform: rotate(45deg); display: inline-block; }
[dir="rtl"] .chev { transform: rotate(-135deg); }
.pager { display: flex; gap: 12px; align-items: center; margin-top: 18px; font: 14px/1 var(--sans); }
.pager a { text-decoration: none; border-bottom: 1px solid currentColor; }
.header-compact .logo { font-size: clamp(28px, 4vw, 42px); }
.header-bar .mast { background: var(--ink); color: var(--paper); }
.header-bar .kicker, .header-bar .tagline, .header-bar .theme-toggle { color: var(--paper); }
.header-bar .theme-toggle { border-color: transparent; }
.footer-simple .colophon nav { display: none; }
.layout-modern { --accent: #0f766e; }
.layout-modern .rail-body { grid-template-columns: 1fr 1fr; }
.layout-modern .lead h3 { font-size: clamp(36px, 5vw, 60px); }
.layout-video { --paper: #121016; --ink: #f7f2ea; --panel: #1c1822; --line: #3a3344; --accent: #f59e0b; --ticker: #f59e0b; --ticker-ink: #1c1612; }
.layout-video .rail-video .rail-body { grid-template-columns: 1.6fr 1fr; }
.layout-video .card { background: var(--panel); padding: 16px; border: 0; }
@media (max-width: 1100px) {
    .rail-body, .layout-modern .rail-body, .layout-video .rail-video .rail-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .grid-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .rail-body, .grid-cols, .layout-modern .rail-body, .layout-video .rail-video .rail-body, .sheet.has-sidebar { grid-template-columns: minmax(0, 1fr); }
    .lead { grid-row: auto; }
    .logo { font-size: 40px; }
    .ad-mobile { display: block; }
    .ad-header { display: none; }
}
.demo-badge { margin: 0; padding: 6px 16px; background: var(--ink); color: var(--paper); font: 600 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.product-line { margin: 8px 0 0; font: 500 15px/1.4 var(--sans); color: var(--muted); max-width: 42rem; }
.jump { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 22px; font: 600 13px/1 var(--sans); }
.jump a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); min-height: 44px; display: inline-flex; align-items: center; }
.preview { max-width: 760px; margin: 0 auto; padding: 48px 20px 80px; }
.preview-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.preview-actions a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--ink); color: var(--paper); text-decoration: none; }
.preview-creds { border: 1px solid var(--line); background: var(--panel); padding: 16px; overflow-x: auto; }
.preview-creds table { width: 100%; border-collapse: collapse; }
.preview-creds th, .preview-creds td { text-align: start; padding: 8px; border-bottom: 1px solid var(--line); }