dwrswr/cpp-module-06-guide
0
1/* ============================================================================
2 CAST LAB — design system for the CPP Module 06 guide
3 Dark-first, light-capable. One accent per cast so the colour itself teaches:
4 violet = static_cast, amber = reinterpret_cast, teal = dynamic_cast.
5 ========================================================================== */
6
7/* ---- tokens ------------------------------------------------------------- */
8:root{
9 --bg:#08090e; --bg2:#0b0d14;
10 --surf:#11131c; --surf2:#161925; --surf3:#1d2130;
11 --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.16);
12 --tx:#e9ebf4; --dim:#a7adc4; --dim2:#767d95;
13 --c-static:#8b6dff; --c-reint:#ff9f45; --c-dyn:#25d3b0; --c-const:#8b93ad;
14 --ok:#3ddc97; --warn:#ffc95c; --bad:#ff5f74; --info:#59a8ff;
15 --acc:var(--c-static); --acc-soft:rgba(139,109,255,.14);
16 --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -12px rgba(0,0,0,.65);
17 --inset:inset 0 1px 0 rgba(255,255,255,.045);
18 --r-s:9px; --r-m:14px; --r-l:20px; --r-xl:28px;
19 --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
20 --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
21 --ar:"Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
22 --maxw:1220px; --toc:250px;
23 --step: clamp(15px,.34vw + 14px,16.5px);
24}
25:root[data-theme="light"]{
26 --bg:#f7f8fb; --bg2:#eef0f6;
27 --surf:#ffffff; --surf2:#f4f6fa; --surf3:#e9ecf3;
28 --line:rgba(10,14,30,.11); --line2:rgba(10,14,30,.22);
29 --tx:#111420; --dim:#4d5468; --dim2:#767d95;
30 --c-static:#6a45f0; --c-reint:#c26a00; --c-dyn:#00897b;
31 --ok:#12855b; --warn:#a06a00; --bad:#d0303f; --info:#1b6dc4;
32 --acc-soft:rgba(106,69,240,.10);
33 --shadow:0 1px 2px rgba(16,24,40,.07),0 12px 30px -14px rgba(16,24,40,.22);
34 --inset:inset 0 1px 0 rgba(255,255,255,.9);
35}
36
37*,*::before,*::after{box-sizing:border-box;}
38html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
39@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
40body{
41 margin:0;background:var(--bg);color:var(--tx);
42 font:var(--step)/1.72 var(--sans);
43 letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
44 overflow-x:hidden;
45}
46html[dir="rtl"] body{font-family:var(--ar);letter-spacing:0;line-height:1.95;}
47
48/* ---- ambient background ------------------------------------------------- */
49body::before{
50 content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
51 background:
52 radial-gradient(800px 520px at 12% -6%, rgba(139,109,255,.20), transparent 62%),
53 radial-gradient(700px 460px at 92% 4%, rgba(37,211,176,.13), transparent 60%),
54 radial-gradient(900px 700px at 50% 108%, rgba(255,159,69,.09), transparent 66%);
55}
56body::after{
57 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
58 background-image:linear-gradient(var(--line) 1px,transparent 1px),
59 linear-gradient(90deg,var(--line) 1px,transparent 1px);
60 background-size:64px 64px;
61 mask-image:radial-gradient(1100px 700px at 50% 0%,#000 35%,transparent 78%);
62 -webkit-mask-image:radial-gradient(1100px 700px at 50% 0%,#000 35%,transparent 78%);
63}
64:root[data-theme="light"] body::after{opacity:.42;}
65
66/* ---- reading progress --------------------------------------------------- */
67#prog{
68 position:fixed;top:0;left:0;height:2px;width:0;z-index:90;
69 background:linear-gradient(90deg,var(--c-static),var(--c-dyn) 55%,var(--c-reint));
70 box-shadow:0 0 12px rgba(139,109,255,.6);transition:width .1s linear;
71}
72
73/* ---- top bar ------------------------------------------------------------ */
74.top{
75 position:sticky;top:0;z-index:70;
76 backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
77 background:var(--bg);
78 background:color-mix(in srgb,var(--bg) 78%,transparent);
79 border-bottom:1px solid var(--line);
80}
81.top-in{
82 max-width:var(--maxw);margin:0 auto;padding:11px 22px;
83 display:flex;align-items:center;gap:14px;
84}
85.brand{display:flex;align-items:center;gap:10px;font:700 15px/1 var(--mono);letter-spacing:-.02em;color:var(--tx);text-decoration:none;}
86.brand .mk{
87 width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
88 background:linear-gradient(140deg,var(--c-static),var(--c-dyn));
89 color:#fff;font:800 12px/1 var(--mono);box-shadow:var(--inset);
90}
91.brand small{color:var(--dim2);font-weight:500;}
92.spacer{flex:1;}
93.btn{
94 display:inline-flex;align-items:center;gap:7px;cursor:pointer;
95 background:var(--surf2);border:1px solid var(--line);color:var(--dim);
96 border-radius:999px;padding:7px 13px;font:600 12.5px/1 var(--sans);
97 transition:.16s ease;white-space:nowrap;
98}
99.btn:hover{border-color:var(--line2);color:var(--tx);transform:translateY(-1px);}
100.btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}
101.btn.on{background:var(--acc-soft);border-color:var(--acc);color:var(--tx);}
102.seg{display:flex;gap:3px;background:var(--surf2);border:1px solid var(--line);border-radius:999px;padding:3px;}
103.seg button{
104 border:0;background:transparent;color:var(--dim2);cursor:pointer;
105 border-radius:999px;padding:5px 11px;font:600 12.5px/1 var(--sans);transition:.16s;
106}
107.seg button.on{background:var(--acc);color:#fff;}
108.seg button:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}
109
110/* ---- shell / layout ----------------------------------------------------- */
111.shell{max-width:var(--maxw);margin:0 auto;padding:0 22px 90px;}
112.cols{display:grid;grid-template-columns:var(--toc) minmax(0,1fr);gap:46px;align-items:start;}
113.cols > *{min-width:0;}
114@media (max-width:1000px){.cols{grid-template-columns:minmax(0,1fr);gap:0;}}
115
116/* ---- table of contents -------------------------------------------------- */
117.toc{position:sticky;top:74px;max-height:calc(100vh - 96px);overflow:auto;padding:4px 0 30px;}
118.toc h6{margin:0 0 10px;font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim2);}
119.toc a{
120 display:flex;gap:9px;align-items:baseline;
121 padding:6.5px 11px;border-radius:9px;text-decoration:none;
122 color:var(--dim);font-size:13.6px;line-height:1.4;
123 border-left:2px solid transparent;transition:.15s;
124}
125html[dir="rtl"] .toc a{border-left:0;border-right:2px solid transparent;}
126.toc a b{font:600 11px/1.5 var(--mono);color:var(--dim2);min-width:20px;}
127.toc a:hover{background:var(--surf2);color:var(--tx);}
128.toc a.on{background:var(--acc-soft);border-left-color:var(--acc);color:var(--tx);font-weight:600;}
129html[dir="rtl"] .toc a.on{border-right-color:var(--acc);}
130.toc a.on b{color:var(--acc);}
131@media (max-width:1000px){
132 .toc{position:static;max-height:none;margin:0 0 26px;
133 border:1px solid var(--line);border-radius:var(--r-m);background:var(--surf);padding:14px;}
134 .toc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:2px;}
135}
136
137/* ---- hero --------------------------------------------------------------- */
138.hero{padding:64px 0 30px;max-width:940px;}
139.eyebrow{
140 display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
141 border:1px solid var(--line);background:var(--surf);border-radius:999px;
142 padding:6px 14px;font:600 11.5px/1 var(--mono);letter-spacing:.1em;
143 text-transform:uppercase;color:var(--dim);box-shadow:var(--inset);
144}
145.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--c-dyn);box-shadow:0 0 10px var(--c-dyn);font-style:normal;}
146h1{
147 margin:0 0 20px;font-size:clamp(34px,5.6vw,66px);line-height:1.02;
148 font-weight:800;letter-spacing:-.035em;
149}
150h1 .g{
151 background:linear-gradient(100deg,var(--c-static),var(--c-dyn) 48%,var(--c-reint));
152 -webkit-background-clip:text;background-clip:text;color:transparent;
153}
154.lede{font-size:clamp(16.5px,1.5vw,19.5px);color:var(--dim);max-width:74ch;margin:0 0 26px;line-height:1.65;}
155.lede b{color:var(--tx);font-weight:600;}
156.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;}
157.chip{
158 border:1px solid var(--line);background:var(--surf);border-radius:999px;
159 padding:6px 12px;font:600 12px/1 var(--mono);color:var(--dim);box-shadow:var(--inset);
160}
161.chip.s{color:var(--c-static);border-color:color-mix(in srgb,var(--c-static) 40%,var(--line));}
162.chip.r{color:var(--c-reint);border-color:color-mix(in srgb,var(--c-reint) 40%,var(--line));}
163.chip.d{color:var(--c-dyn);border-color:color-mix(in srgb,var(--c-dyn) 40%,var(--line));}
164
165/* ---- sections / headings ------------------------------------------------ */
166section{padding:52px 0 6px;scroll-margin-top:78px;}
167.sec-tag{
168 display:flex;align-items:center;gap:11px;margin-bottom:12px;
169 font:700 11px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--dim2);
170}
171.sec-tag::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent);}
172.sec-tag b{color:var(--acc);}
173h2{margin:0 0 14px;font-size:clamp(25px,3vw,38px);line-height:1.12;font-weight:750;letter-spacing:-.028em;}
174h3{margin:38px 0 12px;font-size:clamp(18px,1.7vw,22px);font-weight:700;letter-spacing:-.02em;}
175h4{margin:26px 0 9px;font-size:16.5px;font-weight:650;letter-spacing:-.012em;}
176p{margin:0 0 15px;color:var(--dim);}
177p strong,li strong{color:var(--tx);font-weight:650;}
178a{color:var(--acc);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--acc) 40%,transparent);}
179a:hover{border-bottom-color:var(--acc);}
180ul,ol{margin:0 0 16px;padding-inline-start:22px;color:var(--dim);}
181li{margin:5px 0;}
182code{
183 font:.885em/1.5 var(--mono);background:var(--surf3);border:1px solid var(--line);
184 padding:.11em .38em;border-radius:6px;color:var(--tx);white-space:nowrap;
185}
186:root[data-theme="light"] code{background:var(--surf2);}
187hr{border:0;height:1px;background:var(--line);margin:36px 0;}
188
189/* per-exercise accents */
190section[data-acc="s"]{--acc:var(--c-static);--acc-soft:rgba(139,109,255,.14);}
191section[data-acc="r"]{--acc:var(--c-reint);--acc-soft:rgba(255,159,69,.14);}
192section[data-acc="d"]{--acc:var(--c-dyn);--acc-soft:rgba(37,211,176,.14);}
193
194/* ---- cards / grid ------------------------------------------------------- */
195.grid{display:grid;gap:14px;margin:20px 0;}
196.g2{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
197.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
198.card{
199 background:var(--surf);border:1px solid var(--line);border-radius:var(--r-m);
200 padding:17px 18px;box-shadow:var(--inset);transition:.18s ease;
201}
202.card:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--shadow);}
203.card h4{margin:0 0 7px;display:flex;align-items:center;gap:8px;font-size:15px;}
204.card p{margin:0;font-size:14.2px;line-height:1.62;}
205.card .k{font:700 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);display:block;margin-bottom:9px;}
206.card.hi{border-color:color-mix(in srgb,var(--acc) 45%,var(--line));background:linear-gradient(180deg,var(--acc-soft),transparent 70%),var(--surf);}
207
208/* ---- callouts ----------------------------------------------------------- */
209.cal{
210 display:flex;gap:13px;margin:18px 0;padding:14px 17px;border-radius:var(--r-m);
211 border:1px solid var(--line);background:var(--surf);font-size:14.6px;
212 border-inline-start:3px solid var(--info);
213}
214.cal .ic{flex:0 0 auto;font-size:15px;line-height:1.55;}
215.cal p{margin:0;}
216.cal p+p{margin-top:8px;}
217.cal.warn{border-inline-start-color:var(--warn);}
218.cal.bad{border-inline-start-color:var(--bad);}
219.cal.ok{border-inline-start-color:var(--ok);}
220.cal b{color:var(--tx);}
221
222/* ---- code blocks -------------------------------------------------------- */
223.code{
224 margin:20px 0;border:1px solid var(--line);border-radius:var(--r-m);
225 background:var(--surf);overflow:hidden;box-shadow:var(--shadow);
226}
227.code-head{
228 display:flex;align-items:center;gap:10px;padding:9px 13px;
229 background:var(--surf2);border-bottom:1px solid var(--line);
230 font:600 12px/1 var(--mono);color:var(--dim);
231}
232.code-head .dot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:0 0 auto;}
233.code-head .fn{color:var(--tx);}
234.code-head .tag{
235 margin-inline-start:auto;font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
236 color:var(--dim2);border:1px solid var(--line);border-radius:999px;padding:4px 8px;
237}
238.copy{
239 border:1px solid var(--line);background:var(--surf3);color:var(--dim);cursor:pointer;
240 border-radius:7px;padding:4px 9px;font:600 11px/1.4 var(--mono);transition:.15s;
241}
242.copy:hover{color:var(--tx);border-color:var(--line2);}
243.copy.done{color:var(--ok);border-color:var(--ok);}
244.code-body{position:relative;overflow-x:auto;background:var(--bg2);}
245:root[data-theme="light"] .code-body{background:#fbfcfe;}
246pre{margin:0;padding:15px 0;font:13.2px/1.75 var(--mono);}
247html[dir="rtl"] pre{direction:ltr;text-align:left;}
248pre .row{display:block;padding:0 16px 0 0;white-space:pre;}
249pre .row .n{
250 display:inline-block;width:40px;padding-inline-end:14px;text-align:right;
251 color:var(--dim2);opacity:.5;user-select:none;font-size:12px;
252}
253pre .row.hl{background:var(--acc-soft);box-shadow:inset 3px 0 0 var(--acc);}
254pre .row.hl .n{opacity:1;color:var(--acc);}
255.code.plain pre .row .n{display:none;}
256.code.plain pre .row{padding-inline-start:16px;}
257
258/* C++ / shell token colours */
259.t-key{color:#c99bff;} .t-typ{color:#5fd7ff;} .t-str{color:#8ee59a;}
260.t-num{color:#ffb26b;} .t-com{color:var(--dim2);font-style:italic;}
261.t-pre{color:#ff8fb0;} .t-fn{color:#ffe08a;} .t-op{color:#9aa3bd;}
262:root[data-theme="light"] .t-key{color:#7a2fd0;} :root[data-theme="light"] .t-typ{color:#0a6f9c;}
263:root[data-theme="light"] .t-str{color:#137a3a;} :root[data-theme="light"] .t-num{color:#a3540b;}
264:root[data-theme="light"] .t-pre{color:#b3245c;} :root[data-theme="light"] .t-fn{color:#8a6100;}
265:root[data-theme="light"] .t-op{color:#5a6480;}
266
267/* terminal block */
268.term{
269 margin:20px 0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
270 background:#05070d;box-shadow:var(--shadow);
271}
272:root[data-theme="light"] .term{background:#0b0e16;}
273.term-head{
274 display:flex;gap:7px;align-items:center;padding:9px 13px;background:rgba(255,255,255,.045);
275 border-bottom:1px solid rgba(255,255,255,.07);font:600 11.5px/1 var(--mono);color:#8b96b5;
276}
277.term-head i{width:9px;height:9px;border-radius:50%;background:#3a4157;font-style:normal;}
278.term-head i:nth-child(1){background:#ff5f57;} .term-head i:nth-child(2){background:#febc2e;}
279.term-head i:nth-child(3){background:#28c840;}
280.term-head span{margin-inline-start:8px;}
281.term pre{padding:14px 16px;color:#cfd6ea;font-size:12.9px;line-height:1.72;}
282html[dir="rtl"] .term pre{direction:ltr;text-align:left;}
283.term .p{color:#5fe3a1;} .term .c{color:#7fd3ff;} .term .o{color:#8b96b5;}
284.term .w{color:#ffc95c;} .term .e{color:#ff7d8f;} .term .g{color:#c99bff;}
285
286/* ---- line notes (click a note -> highlight its line) -------------------- */
287.notes{margin:16px 0 8px;padding:0;list-style:none;counter-reset:nt;}
288.notes li{
289 position:relative;margin:0 0 7px;padding:11px 14px 11px 52px;
290 border:1px solid var(--line);border-radius:var(--r-s);background:var(--surf);
291 font-size:14.3px;line-height:1.6;color:var(--dim);cursor:pointer;transition:.15s;
292}
293html[dir="rtl"] .notes li{padding:11px 52px 11px 14px;}
294.notes li::before{
295 counter-increment:nt;content:attr(data-line);
296 position:absolute;left:11px;top:10px;min-width:30px;height:22px;padding:0 6px;
297 border-radius:6px;background:var(--surf3);border:1px solid var(--line);
298 font:700 10.5px/21px var(--mono);text-align:center;color:var(--dim2);
299}
300html[dir="rtl"] .notes li::before{left:auto;right:11px;}
301.notes li:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line));color:var(--tx);}
302.notes li:hover::before{color:var(--acc);border-color:var(--acc);}
303.notes li.on{background:var(--acc-soft);border-color:var(--acc);color:var(--tx);}
304.notes li.on::before{background:var(--acc);border-color:var(--acc);color:#fff;}
305.notes li b{color:var(--tx);}
306.notes li code{white-space:normal;}
307
308/* ---- tables ------------------------------------------------------------- */
309.tw{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surf);}
310table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px;}
311th,td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top;}
312thead th{
313 background:var(--surf2);font:700 10.8px/1.4 var(--mono);letter-spacing:.11em;
314 text-transform:uppercase;color:var(--dim2);white-space:nowrap;
315}
316tbody tr:last-child td{border-bottom:0;}
317tbody tr:hover{background:var(--surf2);}
318td code,th code{white-space:nowrap;}
319td.mono,th.mono{font-family:var(--mono);font-size:12.8px;}
320.yes{color:var(--ok);font-weight:600;} .no{color:var(--bad);font-weight:600;}
321.mid{color:var(--warn);font-weight:600;}
322
323/* ---- badges ------------------------------------------------------------- */
324.bd{
325 display:inline-flex;align-items:center;gap:5px;border-radius:999px;
326 padding:3px 9px;font:700 10.5px/1.5 var(--mono);letter-spacing:.06em;
327 border:1px solid var(--line);background:var(--surf2);color:var(--dim);
328}
329.bd.s{color:var(--c-static);border-color:color-mix(in srgb,var(--c-static) 45%,var(--line));background:rgba(139,109,255,.10);}
330.bd.r{color:var(--c-reint);border-color:color-mix(in srgb,var(--c-reint) 45%,var(--line));background:rgba(255,159,69,.10);}
331.bd.d{color:var(--c-dyn);border-color:color-mix(in srgb,var(--c-dyn) 45%,var(--line));background:rgba(37,211,176,.10);}
332.bd.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line));}
333.bd.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line));}
334.bd.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line));}
335
336/* ---- file tree ---------------------------------------------------------- */
337.tree{
338 font:13px/1.85 var(--mono);white-space:pre;overflow-x:auto;color:var(--dim);
339 background:var(--surf);border:1px solid var(--line);border-radius:var(--r-m);
340 padding:16px 18px;margin:20px 0;box-shadow:var(--inset);
341}
342html[dir="rtl"] .tree{direction:ltr;text-align:left;}
343.tree b{color:var(--acc);font-weight:600;} .tree i{color:var(--ok);font-style:normal;}
344.tree u{color:var(--warn);text-decoration:none;} .tree s{color:var(--dim2);text-decoration:none;}
345
346/* ---- cast picker -------------------------------------------------------- */
347.picker{
348 margin:22px 0;border:1px solid var(--line);border-radius:var(--r-l);
349 background:var(--surf);padding:20px;box-shadow:var(--shadow);
350}
351.picker .q{font:600 15px/1.5 var(--sans);color:var(--tx);margin:0 0 14px;}
352.pick-opts{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
353.pick-opts button{
354 text-align:start;border:1px solid var(--line);background:var(--surf2);color:var(--dim);
355 border-radius:var(--r-s);padding:12px 14px;cursor:pointer;font:500 14px/1.5 var(--sans);
356 transition:.16s;
357}
358.pick-opts button:hover{border-color:var(--line2);color:var(--tx);transform:translateY(-2px);}
359.pick-opts button:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}
360.pick-out{
361 margin-top:15px;padding:15px 17px;border-radius:var(--r-m);border:1px dashed var(--line2);
362 background:var(--surf2);font-size:14.4px;color:var(--dim);min-height:64px;
363}
364.pick-out.show{border-style:solid;}
365.pick-out h5{margin:0 0 7px;font:700 15px/1.4 var(--mono);}
366.pick-out.s h5{color:var(--c-static);} .pick-out.r h5{color:var(--c-reint);}
367.pick-out.d h5{color:var(--c-dyn);} .pick-out.k h5{color:var(--c-const);}
368
369/* ---- converter simulator ------------------------------------------------ */
370.sim{
371 margin:22px 0;border:1px solid var(--line);border-radius:var(--r-l);
372 background:var(--surf);overflow:hidden;box-shadow:var(--shadow);
373}
374.sim-head{
375 display:flex;align-items:center;gap:10px;flex-wrap:wrap;
376 padding:14px 17px;border-bottom:1px solid var(--line);background:var(--surf2);
377}
378.sim-head .lbl{font:700 10.8px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim2);}
379.sim-in{
380 flex:1;min-width:150px;background:var(--bg2);border:1px solid var(--line2);color:var(--tx);
381 border-radius:var(--r-s);padding:9px 12px;font:14px/1.4 var(--mono);
382}
383.sim-in:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc);}
384.sim-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
385@media (max-width:760px){.sim-body{grid-template-columns:1fr;}}
386.sim-pane{padding:16px 18px;}
387.sim-pane+.sim-pane{border-inline-start:1px solid var(--line);}
388@media (max-width:760px){.sim-pane+.sim-pane{border-inline-start:0;border-top:1px solid var(--line);}}
389.sim-pane h6{margin:0 0 11px;font:700 10.8px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim2);}
390.sim-out{font:13.4px/2 var(--mono);white-space:pre-wrap;color:#cfd6ea;background:#05070d;border-radius:var(--r-s);padding:12px 14px;border:1px solid var(--line);}
391:root[data-theme="light"] .sim-out{background:#0b0e16;}
392html[dir="rtl"] .sim-out{direction:ltr;text-align:left;}
393.sim-out .k{color:#8b96b5;} .sim-out .v{color:#8ee59a;} .sim-out .x{color:#ff7d8f;} .sim-out .y{color:#ffc95c;}
394.steps{list-style:none;margin:0;padding:0;counter-reset:sp;}
395.steps li{position:relative;padding-inline-start:30px;margin:0 0 10px;font-size:13.8px;color:var(--dim);line-height:1.6;}
396.steps li::before{
397 counter-increment:sp;content:counter(sp);position:absolute;inset-inline-start:0;top:1px;
398 width:20px;height:20px;border-radius:6px;background:var(--acc-soft);border:1px solid var(--acc);
399 color:var(--acc);font:700 10.5px/19px var(--mono);text-align:center;
400}
401.steps li b{color:var(--tx);} .steps li code{font-size:12.4px;}
402.presets{display:flex;flex-wrap:wrap;gap:6px;padding:12px 17px;border-top:1px solid var(--line);background:var(--surf2);}
403.presets button{
404 border:1px solid var(--line);background:var(--surf);color:var(--dim);cursor:pointer;
405 border-radius:7px;padding:5px 10px;font:600 12px/1.4 var(--mono);transition:.15s;
406}
407.presets button:hover{color:var(--tx);border-color:var(--acc);transform:translateY(-1px);}
408
409/* ---- checklist ---------------------------------------------------------- */
410.chks{margin:18px 0;}
411.chk{
412 display:flex;gap:12px;align-items:flex-start;cursor:pointer;
413 padding:11px 15px;border:1px solid var(--line);border-radius:var(--r-s);
414 background:var(--surf);margin:0 0 7px;transition:.15s;font-size:14.4px;color:var(--dim);
415}
416.chk:hover{border-color:var(--line2);}
417.chk input{margin:4px 0 0;width:17px;height:17px;accent-color:var(--acc);flex:0 0 auto;cursor:pointer;}
418.chk.done{background:color-mix(in srgb,var(--ok) 9%,var(--surf));border-color:color-mix(in srgb,var(--ok) 45%,var(--line));}
419.chk.done span{color:var(--dim2);text-decoration:line-through;}
420.chk b{color:var(--tx);}
421.chk-bar{display:flex;align-items:center;gap:12px;margin:14px 0 4px;font-size:13.5px;color:var(--dim2);}
422.chk-bar .track{flex:1;height:6px;border-radius:999px;background:var(--surf3);overflow:hidden;}
423.chk-bar .fill{height:100%;width:0;background:linear-gradient(90deg,var(--c-static),var(--ok));transition:width .3s ease;}
424
425/* ---- Q&A accordion ------------------------------------------------------ */
426.qa{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surf);margin:0 0 8px;overflow:hidden;}
427.qa summary{
428 cursor:pointer;padding:14px 17px;font:600 15px/1.5 var(--sans);color:var(--tx);
429 list-style:none;display:flex;gap:11px;align-items:flex-start;transition:.15s;
430}
431.qa summary::-webkit-details-marker{display:none;}
432.qa summary::before{
433 content:"?";flex:0 0 auto;width:21px;height:21px;border-radius:6px;margin-top:1px;
434 background:var(--acc-soft);border:1px solid var(--acc);color:var(--acc);
435 font:800 11px/20px var(--mono);text-align:center;
436}
437.qa summary:hover{background:var(--surf2);}
438.qa[open] summary{border-bottom:1px solid var(--line);}
439.qa .ans{padding:14px 17px 4px;font-size:14.5px;}
440.qa .ans p:last-child{margin-bottom:12px;}
441
442/* ---- footer ------------------------------------------------------------- */
443footer{
444 margin-top:70px;padding:30px 0 10px;border-top:1px solid var(--line);
445 color:var(--dim2);font-size:13.6px;
446}
447footer a{color:var(--dim);} footer .row{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;}
448
449/* ---- back to top -------------------------------------------------------- */
450.up{
451 position:fixed;inset-inline-end:20px;bottom:20px;z-index:60;
452 width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
453 background:var(--surf);border:1px solid var(--line2);color:var(--dim);
454 text-decoration:none;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;
455}
456.up.show{opacity:1;pointer-events:auto;}
457.up:hover{color:var(--tx);transform:translateY(-2px);border-color:var(--acc);}
458
459/* ---- reveal ------------------------------------------------------------- */
460.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;}
461.rv.in{opacity:1;transform:none;}
462@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}}
463
464/* ---- misc --------------------------------------------------------------- */
465.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100;}
466.skip:focus{left:0;}
467::selection{background:color-mix(in srgb,var(--c-static) 45%,transparent);color:#fff;}
468:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px;}
469.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
470.kbd{font:600 11.5px/1.5 var(--mono);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;background:var(--surf2);color:var(--dim);}
471
472/* ---- cast tokens get the cast's own colour ------------------------------ */
473.t-cs{color:var(--c-static);font-weight:700;}
474.t-cr{color:var(--c-reint);font-weight:700;}
475.t-cd{color:var(--c-dyn);font-weight:700;}
476.t-ck{color:var(--c-const);font-weight:700;}
477
478/* long files scroll inside their own box so note-clicks never jump the page */
479.code.tall .code-body{max-height:520px;overflow-y:auto;scroll-behavior:smooth;}
480.code.tall .code-body::-webkit-scrollbar{width:10px;height:10px;}
481.code.tall .code-body::-webkit-scrollbar-thumb{background:var(--surf3);border-radius:99px;border:2px solid transparent;background-clip:content-box;}
482.code.tall .code-body::-webkit-scrollbar-track{background:transparent;}
483.pick-opts button.on{border-color:var(--acc);background:var(--acc-soft);color:var(--tx);}
484 485/* ---- narrow screens: let long inline code wrap instead of pushing the page - */486@media (max-width:680px){487 code{white-space:normal;overflow-wrap:anywhere;}488 .sim-head{align-items:stretch;}489 .sim-head .btn{justify-content:center;}490 h1{letter-spacing:-.02em;}491 section{padding:38px 0 4px;}492 .shell{padding:0 16px 70px;}493}494@media (max-width:480px){495 .brand small{display:none;}496 .top-in{gap:9px;padding:9px 14px;}497 .seg button{padding:5px 9px;font-size:12px;}498}499 500/* ---- RTL: isolate Latin code runs -------------------------------------------501 Without this, an inline <code>.cpp</code> renders as "cpp." in an Arabic502 paragraph, because the leading dot is a bidi-neutral character. */503html[dir="rtl"] code,504html[dir="rtl"] .bd,505html[dir="rtl"] .chip,506html[dir="rtl"] td.mono,507html[dir="rtl"] th.mono,508html[dir="rtl"] .kbd{direction:ltr;unicode-bidi:isolate;}509html[dir="rtl"] .code-head .fn,510html[dir="rtl"] .code-head .tag,511html[dir="rtl"] .term-head span{direction:ltr;unicode-bidi:isolate;}512