/* Motyw TypeScript: niebieski #3178C6, niebieskie lewe ramki kodu, znak
   wodny „{ }” w hero, układ tabelaryczny. */
:root[data-theme="typescript"] {
  --bg: #ffffff; --bg-2: #F0F4F8; --fg: #1a1a1a; --muted: #5a6b7d; --border: #d6dee8;
  --accent: #3178C6; --accent-fg: #fff; --accent-text: #235A97; --accent-soft: rgba(49,120,198,.12);
  --radius: 8px; --radius-s: 6px;
}
:root[data-theme="typescript"] .hero { background: linear-gradient(180deg, #F0F4F8, #fff); position: relative; }
:root[data-theme="typescript"] .hero::before { content: "{ }"; position: absolute; right: 4vw; top: -2rem; font: 900 clamp(10rem, 30vw, 24rem)/1 var(--mono); color: rgba(49,120,198,.07); pointer-events: none; }
:root[data-theme="typescript"] .hero-photo-cutout { background: radial-gradient(circle at 50% 35%, #cfe0f5 0%, #e4eef9 70%, transparent 71%); }
:root[data-theme="typescript"] .stat-v { color: #235A97; }
:root[data-theme="typescript"] code { background: #e8f0fa; color: #235A97; }
:root[data-theme="typescript"] .demo { color-scheme: dark; background: #1e2a3a; color: #e6edf5; --muted: #9fb3c8; --border: #33455c; --bg-2: #243447; --accent: #7db3f0; --accent-text: #7db3f0; }
:root[data-theme="typescript"] .demo-root { background: #15202e; }
:root[data-theme="typescript"] .demo code { background: #2b3d55; color: #9cc8ff; }
:root[data-theme="typescript"] .demo h2 { color: #fff; }
:root[data-theme="typescript"] .demo-root textarea, :root[data-theme="typescript"] .demo-root pre { background: #0f1824; color: #e6edf5; border-color: #33455c; }
.ts-out { font-family: var(--mono); font-size: .82rem; line-height: 1.5; white-space: pre; overflow: auto; margin: 0; padding: .75rem; border: 1px solid var(--border); border-radius: 6px; min-height: 240px; max-height: 480px; }
.ts-out .kw { color: #c792ea; } .ts-out .ty { color: #82aaff; } .ts-out .lit { color: #c3e88d; } .ts-out .cm { color: #7f8c9a; }