:root { --ink:var(--text-color); --muted:var(--muted-color); --line:var(--line-color); --paper:var(--panel-bg); --bg:var(--page-bg); }
* { box-sizing:border-box; letter-spacing:0; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 var(--font-body); }
a { color:var(--primary-color); text-underline-offset:3px; }
button,.button { display:inline-block; border:1px solid var(--cta-bg); border-radius:6px; padding:11px 17px; font:700 14px/1.4 var(--font-mono); background:var(--cta-bg); color:var(--cta-text); text-decoration:none; cursor:pointer; overflow-wrap:anywhere; }
button:hover:not(:disabled),.button:hover { background:var(--cta-hover); color:var(--cta-text); }
button:disabled { background:var(--panel-soft-bg); color:var(--muted); border-color:var(--line); cursor:default; }
button.quiet { background:transparent; color:var(--primary-color); border-color:var(--line); }
button.quiet:hover { background:var(--panel-soft-bg); }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--brand-soft-color); outline-offset:4px; }
header { position:sticky; top:0; z-index:4; min-height:88px; padding:16px max(20px,calc((100% - 1240px)/2)); background:var(--header-bg); border-bottom:3px solid var(--accent-color); display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
header>a:not(.brand-logo) { font:700 13px/1.5 var(--font-mono); text-decoration:none; }
.workspace { display:grid; grid-template-columns:280px minmax(0,760px); gap:64px; max-width:1184px; margin:36px auto; padding:0 24px; }
aside { position:sticky; top:112px; align-self:start; max-height:calc(100dvh - 136px); overflow-y:auto; padding-right:8px; scrollbar-width:thin; }
h1 { font:700 30px/1.2 var(--font-heading); margin:12px 0; }
h2 { font:700 28px/1.25 var(--font-heading); margin:8px 0 24px; }
h3 { font:600 19px/1.4 var(--font-heading); margin-top:28px; }
.eyebrow { font:700 12px/1.6 var(--font-mono); color:var(--primary-color); }
.small { font-size:13px; }.muted,.small { color:var(--muted); }
progress { width:100%; height:9px; accent-color:var(--primary-color); }
nav { display:grid; margin:24px 0; }
nav a { padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; text-decoration:none; }
.content { min-width:0; }
.course-cover { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:8px; }
section { padding:36px 0; border-bottom:1px solid var(--line); }
blockquote { margin:24px 0; border-left:4px solid var(--accent-color); padding:12px 20px; background:var(--panel-soft-bg); }
pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:20px; background:var(--panel-soft-bg); border-left:3px solid var(--primary-color); font:14px/1.7 var(--font-mono); }
li { margin-bottom:12px; }ul,ol { padding-left:24px; }
details { margin:20px 0; padding:14px 0; border-block:1px solid var(--line); }summary { cursor:pointer; font-weight:600; }
fieldset { border:0; border-bottom:1px solid var(--line); margin:0; padding:24px 0; min-width:0; }
legend { padding:0; font-weight:650; max-width:100%; }
fieldset label { display:flex; align-items:flex-start; gap:12px; padding:12px; margin:7px 0; background:var(--paper); border:1px solid var(--line); border-radius:6px; cursor:pointer; }
fieldset label:has(input:checked) { border-color:var(--primary-color); background:var(--panel-soft-bg); }
input[type=radio],input[type=checkbox] { flex:none; width:18px; height:18px; margin:4px 0; accent-color:var(--primary-color); }
.feedback { font-size:14px; padding:12px; background:var(--panel-soft-bg); border-left:3px solid var(--primary-color); }.feedback.wrong { border-color:#b04b35; }
#quiz>button { margin:22px 8px 0 0; }#quiz-result { font-weight:650; margin-top:20px; }
#certificate-form { display:grid; gap:14px; }input[type=text],input:not([type]) { width:100%; min-width:0; padding:12px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); font:inherit; }
.check { display:flex; align-items:flex-start; gap:12px; font-size:14px; }#certificate-error { color:#9c321a; }
footer { max-width:1184px; margin:auto; padding:28px 24px; font-size:13px; }
.cookie-banner { position:fixed; bottom:16px; left:16px; right:16px; max-width:750px; margin:auto; padding:20px; background:var(--paper); border:1px solid var(--line); box-shadow:0 4px 24px #210c3322; z-index:5; border-radius:6px; }
.cookie-banner[hidden],[hidden] { display:none!important; }.cookie-banner p { margin-top:0; }.cookie-banner button { margin:4px 8px 0 0; }
@media(max-width:800px) { .workspace { display:block; margin-top:24px; padding:0 20px; }aside { position:static; max-height:none; overflow:visible; margin-bottom:28px; padding-right:0; }nav { grid-template-columns:1fr 1fr; gap:0 20px; }h1 { font-size:30px; }h2 { font-size:25px; }header { gap:15px; padding:16px 20px; }header a { font-size:13px; } }
@media(max-width:600px) { header { position:static; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }