:root { --fg:#1d2330; --muted:#5b6475; --bg:#fbfbfd; --card:#fff; --line:#e3e6ec; --accent:#2c6bd6; }
@media (prefers-color-scheme: dark) { :root { --fg:#e6e9ef; --muted:#9aa3b2; --bg:#12151b; --card:#1a1f27; --line:#2a303a; --accent:#6ea0ff; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font:16px/1.6 system-ui, sans-serif; color:var(--fg); background:var(--bg); }
main, footer { max-width: 60rem; margin: 0 auto; padding-inline: 1rem; }
a { color: var(--accent); }
.top { position: sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:1rem;
       padding: .5rem 1rem; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--fg); text-decoration:none; }
.menu input { position:absolute; opacity:0; pointer-events:none; }
.menu label { cursor:pointer; font-size:1.5rem; padding:.25rem .5rem; }
.menu ul { list-style:none; margin:0; padding:0; display:flex; gap:.25rem; }
.menu a { display:block; padding:.5rem .75rem; color:var(--fg); text-decoration:none; border-radius:.4rem; }
.menu a:hover, .menu a[aria-current] { background:var(--line); }
@media (min-width: 62.01rem) { .menu label, .menu input { display:none; } }
@media (max-width: 62rem) {
  .menu ul { display:none; position:absolute; right:1rem; top:3.5rem; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:.6rem; padding:.25rem; min-width:10rem; box-shadow:0 8px 24px rgb(0 0 0 / .12); }
  .menu input:checked ~ ul { display:flex; }
}
.hero { text-align:center; padding: 3rem 0 2rem; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin:0; }
.hero p { color:var(--muted); font-size:1.2rem; margin:.25rem 0 1.5rem; }
.button { display:inline-block; padding:.6rem 1.4rem; border-radius:.5rem; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap:1rem; margin:2rem 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:.6rem; padding:1rem 1.25rem; }
.card h2 { font-size:1.1rem; margin:0 0 .25rem; }
table { border-collapse: collapse; width:100%; display:block; overflow-x:auto; }
th, td { text-align:left; padding:.5rem .75rem; border-bottom:1px solid var(--line); }
pre { background:var(--card); border:1px solid var(--line); border-radius:.5rem; padding:.75rem; overflow-x:auto; }
img { max-width:100%; height:auto; border-radius:.5rem; }
footer { color:var(--muted); font-size:.9rem; padding-block: 2rem; border-top:1px solid var(--line); margin-top:3rem; }
.badge { display:inline-block; font-size:.85rem; padding:.2rem .7rem; border:1px solid var(--line); border-radius:99rem; color:var(--muted); }
.actions { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.button.ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); }
a.card.link { color:var(--fg); text-decoration:none; transition: border-color .15s; }
a.card.link:hover { border-color:var(--accent); }
.card p { margin:.25rem 0 0; color:var(--muted); }
.shot { margin:1.5rem 0; }
.shot svg { width:100%; height:auto; display:block; }
.shot figcaption { color:var(--muted); font-size:.9rem; margin-top:.4rem; text-align:center; }
.lead { font-size:1.15rem; color:var(--muted); margin-top:-.5rem; }
.crumb { margin:1.5rem 0 0; font-size:.9rem; }
.pager { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1rem; border-top:1px solid var(--line); }
h2, h3 { scroll-margin-top: 4.5rem; }
.long { display:grid; grid-template-columns: 14rem 1fr; gap:2.5rem; }
.long article { min-width:0; }
.toc { position:sticky; top:4.5rem; align-self:start; margin-top:2rem; font-size:.95rem; }
.toc ul { list-style:none; padding:0; margin:.5rem 0 0; }
.toc a { display:block; padding:.3rem .5rem; color:var(--muted); text-decoration:none; border-left:2px solid var(--line); }
.toc a:hover { color:var(--accent); border-left-color:var(--accent); }
main:has(.long) { max-width: 72rem; }
@media (max-width: 50rem) {
  .long { grid-template-columns: 1fr; gap:0; }
  .toc { position:static; border:1px solid var(--line); border-radius:.6rem; padding:.75rem 1rem; background:var(--card); }
}
.theme-pick { position:fixed; right:1rem; bottom:1rem; z-index:10; display:flex; gap:.5rem; align-items:center; background:#fff; color:#111; padding:.4rem .6rem; border-radius:.5rem; box-shadow:0 4px 16px rgb(0 0 0 / .25); font:14px system-ui, sans-serif; }
.menu a.highlight { color:var(--accent); font-weight:700; }
.subnav { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .9rem; margin:1.25rem 0 0; padding-bottom:.6rem; border-bottom:1px solid var(--line); font-size:.95rem; }
.subnav a { color:var(--muted); text-decoration:none; }
.subnav a[aria-current] { color:var(--accent); font-weight:600; }
.coming { margin:3rem 0; padding:2rem 1.5rem; border-radius:1rem; border:1px solid var(--line); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card)); text-align:center; }
.coming h2 { margin:.5rem 0 .25rem; font-size:1.8rem; }
.coming > p { color:var(--muted); }
.coming .cards { text-align:left; }
.card h3 { margin:0 0 .25rem; font-size:1.1rem; }
.card ul { margin:.25rem 0 0; padding-left:1.1rem; }
.cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.menu input:focus-visible + label { outline:2px solid var(--accent); outline-offset:2px; border-radius:.3rem; }
.long section { scroll-margin-top:4.5rem; }
.weekplan { display:none; }
.menu a.external { display:flex; align-items:center; gap:.35rem; }
.menu a.external small { font-size:.8em; }
@media (min-width: 62.01rem) { .menu li.ext { margin-left:.75rem; } }
.brand[aria-current] { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.4em; }
.edit { font-size:.8rem; font-weight:400; vertical-align:middle; margin-left:.5rem; padding:.05rem .45rem; border:1px solid var(--line); border-radius:3px; text-decoration:none; }
footer { font-size:.9rem; }
.videos { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap:1rem; margin:1rem 0 2rem; }
.video { display:block; text-decoration:none; color:inherit; }
.video .thumb { position:relative; display:grid; place-items:center; aspect-ratio:16/9; border-radius:3px; background:var(--rapla-slate, #35393c); color:var(--rapla-gold, #d2af63); }
.video .thumb > svg { width:3rem; height:3rem; }
.video .badge-video { position:absolute; right:.5rem; bottom:.5rem; display:flex; padding:.2rem; border-radius:3px; background:var(--rapla-gold, #d2af63); color:var(--rapla-slate, #35393c); }
.video .badge-video svg { width:1.1rem; height:1.1rem; }
.video:hover .thumb > svg { color:#fff; }
.video .title { display:block; margin-top:.4rem; font-size:.95rem; color:var(--accent); }
.video .where { display:block; font-size:.8rem; opacity:.75; }
.h-icon { display:inline-grid; place-items:center; width:1.5em; height:1.5em; margin-right:.45em; vertical-align:-.3em; border-radius:3px; background:transparent; color:var(--rapla-slate, #35393c); }
.h-icon svg { width:.95em; height:.95em; }
.i-plain { display:inline-flex; vertical-align:-.15em; margin-right:.4em; }
.i-plain svg { width:1.1em; height:1.1em; }