:root{
  --bg:#ffffff; --bg-soft:#f8fafc; --card:#ffffff; --text:#0f172a; --muted:#475569;
  --accent:#0ea5e9; --accent-2:#f59e0b; --border:#e2e8f0; --radius:14px; --shadow:0 10px 24px rgba(2,6,23,.06);
}
html.dark{ --bg:#0b0f1a; --bg-soft:#0f172a; --card:#0b1220; --text:#e6edf6; --muted:#a2acc2; --accent:#38bdf8; --accent-2:#eab308; --border:#1e293b; --shadow:0 10px 24px rgba(0,0,0,.25); }
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.container{max-width:1260px;margin-inline:auto;padding-inline:16px}
.header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.header .row{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:10px 0}
.brand{display:flex;gap:10px;align-items:center}
.nav a{padding:8px 10px;border-radius:10px} .nav a:hover{background:var(--bg-soft)}
.toggle{border:1px solid var(--border);background:var(--bg-soft);border-radius:999px;padding:6px 10px;font-size:13px;cursor:pointer}
.topbar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-soft)}
.ticker{display:flex;gap:10px;align-items:center;padding:8px 0;overflow:hidden}
.ticker b{background:rgba(14,165,233,.15);color:var(--accent);padding:4px 10px;border-radius:999px;font-weight:800}
.ticker .items{display:flex;gap:22px;white-space:nowrap;animation:scrollX 26s linear infinite}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hero{padding:16px 0}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.hero-main,.hero-side article{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;outline:1px solid var(--border);box-shadow:var(--shadow)}
.hero-main img,.hero-side img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.65) 85%);padding:16px;display:flex;align-items:flex-end}
.hero-title{font-size:clamp(22px,2.6vw,32px);line-height:1.25;font-weight:900;margin:0;color:#fff}
.hero-badge{position:absolute;top:10px;left:10px;background:rgba(59,130,246,.25);color:#1d4ed8;padding:4px 10px;border-radius:999px;font-weight:900}

.section{margin:24px 0}
.section .title{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-weight:900}
.section .title::before{content:'';width:10px;height:24px;background:linear-gradient(45deg,var(--accent),var(--accent-2));border-radius:6px}
.grid-3{display:grid;grid-template-columns:1fr;gap:12px} @media(min-width:880px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card img{width:100%;height:220px;object-fit:cover} .card h3{font-size:18px;line-height:1.5;margin:8px 10px}

.article-wrap{max-width:980px;margin:0 auto;padding:16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:8px}
.badge{padding:4px 10px;background:rgba(14,165,233,.15);color:var(--accent);border-radius:999px;font-weight:900}
.title{font-size:clamp(26px,3.2vw,36px);line-height:1.25;margin:10px 0 12px;font-weight:900}
.frame{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#000;margin:10px 0 14px}
.frame .ratio{position:relative} .ratio-16x9::before{content:'';display:block;padding-top:56.25%} .ratio-4x3::before{content:'';display:block;padding-top:75%} .ratio-1x1::before{content:'';display:block;padding-top:100%}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lead{font-size:clamp(18px,2.2vw,20px);line-height:1.85;font-weight:600;background:var(--bg-soft);padding:14px 16px;border-radius:var(--radius)}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);background:var(--bg-soft);border-radius:10px;cursor:pointer}
.body{font-size:18px;line-height:1.95}
.body h2{font-size:22px;margin:22px 0 10px;padding-right:10px;border-right:4px solid var(--accent)}

.inline-related{margin:22px 0;padding:16px;background:var(--bg-soft);border-radius:var(--radius)}
.share{display:flex;gap:10px;margin:18px 0} .share a{display:inline-flex;gap:8px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--bg-soft)}

.related-grid{display:grid;grid-template-columns:1fr;gap:12px} @media(min-width:640px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.related-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.related-card img{width:100%;height:140px;object-fit:cover} .related-card h4{font-size:16px;margin:8px 10px}

.reader-sm .body{font-size:16px} .reader-md .body{font-size:18px} .reader-lg .body{font-size:20px}
.reader-mode .body{max-width:65ch;margin-inline:auto}
.reader-mode .share,.reader-mode .inline-related{display:none}

.tax-header{display:flex;gap:16px;align-items:center;margin:14px 0}
.tax-badge{padding:4px 10px;border-radius:999px;background:rgba(14,165,233,.15);color:var(--accent);font-weight:800}
.tax-grid{display:grid;grid-template-columns:1fr;gap:12px} @media(min-width:900px){.tax-grid{grid-template-columns:repeat(4,1fr)}}

.footer{border-top:1px solid var(--border);margin-top:24px;background:var(--bg-soft);color:var(--text)}
.footer .widgets{display:grid;grid-template-columns:1fr;gap:16px;padding:24px 0} @media(min-width:900px){.footer .widgets{grid-template-columns:repeat(3,1fr)}}
.footer .copy{border-top:1px solid var(--border);padding:12px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px}