/* Motyw JavaScript: grafit i żółć #F7DF1E, kwadratowy znak, mono w etykietach. */
:root[data-theme="javascript"] {
  color-scheme: dark;
  --bg: #1c1c1c; --bg-2: #262626; --fg: #f5f5f0; --muted: #b5b5ad; --border: #363636;
  --accent: #F7DF1E; --accent-fg: #1c1c1c; --accent-text: #F7DF1E; --accent-soft: rgba(247,223,30,.14);
  --radius: 6px; --radius-s: 4px; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.4);
}
:root[data-theme="javascript"] .hero { background: linear-gradient(160deg, #1c1c1c 0%, #232318 100%); }
:root[data-theme="javascript"] .hero-photo-cutout { border-radius: 10px; background: linear-gradient(180deg, #F7DF1E 0%, #c9b400 100%); }
:root[data-theme="javascript"] .hero-photo-cutout::before, :root[data-theme="javascript"] .hero-photo-cutout::after { display: none; }
:root[data-theme="javascript"] .kicker { font-family: var(--mono); letter-spacing: .08em; }
:root[data-theme="javascript"] .stat-v { color: #F7DF1E; }
:root[data-theme="javascript"] code { background: #111; color: #F7DF1E; }
:root[data-theme="javascript"] .tag { background: #111; color: #F7DF1E; border: 1px solid #363636; }
:root[data-theme="javascript"] .tag-link { background: #F7DF1E; color: #1c1c1c; }
:root[data-theme="javascript"] .top { background: rgba(28,28,28,.85); }
:root[data-theme="javascript"] .demo { background: #111; }
:root[data-theme="javascript"] .demo-root { background: #1c1c1c; }
.el { display: grid; gap: 1rem; }
@media (min-width: 900px) { .el { grid-template-columns: 1fr 1fr; } }
.el-line { display: grid; grid-template-columns: 2.2rem 7rem 1fr; gap: .6rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid #2c2c2c; font-family: var(--mono); font-size: .8rem; }
.el-line .n { color: #777; text-align: right; }
.el-line .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; padding: .15rem .4rem; border-radius: 3px; text-align: center; }
.el-line .k-sync { background: #2f2f2f; color: #ddd; } .el-line .k-micro { background: #3a3414; color: #F7DF1E; } .el-line .k-macro { background: #1f2d3a; color: #7db3f0; } .el-line .k-raf { background: #1e3324; color: #7ee0a0; }
.el-line .t { color: #f5f5f0; white-space: pre-wrap; }
.el-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; font-size: .78rem; }
.el-legend span { padding: .2rem .5rem; border-radius: 3px; font-family: var(--mono); }