/* generated by tools/build-teach-art.mjs from docs/rebuild/diagrams/kit.css and teach/teach.css; do not edit */
/* Gravita diagram kit (28G-C02). Inlined into every SVG; the page may override the tokens. */
.gk{--bg:#FFFFFF;--ink:#0C1844;--muted:#46506B;--blue:#2A4BB0;--blue-t:rgba(42,75,176,.10);--blue-m:rgba(42,75,176,.22);
 --top:#FFFFFF;--left:#E7ECF7;--right:#CED7EE;--edge:rgba(12,24,68,.42);--plate-t:#F3F6FC;--plate-l:#DCE3F3;--plate-r:#C3CDE8;
 --decal:rgba(12,24,68,.34);--decal-s:rgba(12,24,68,.09);--shadow:rgba(12,24,68,.10);--gd:rgba(12,24,68,.10);--live:#2A4BB0;
 font-family:Carlito,Calibri,"Segoe UI",system-ui,sans-serif}
@media (prefers-color-scheme:dark){.gk:not(.light){--bg:#080D26;--ink:#EEF1FA;--muted:#B4BED8;--blue:#8FA6EE;--blue-t:rgba(143,166,238,.12);--blue-m:rgba(143,166,238,.26);
 --top:#1B275A;--left:#131D4A;--right:#0D1539;--edge:rgba(180,190,216,.40);--plate-t:#101A45;--plate-l:#0C1438;--plate-r:#09102E;
 --decal:rgba(180,190,216,.46);--decal-s:rgba(180,190,216,.14);--shadow:rgba(0,0,0,.35);--gd:rgba(180,190,216,.10);--live:#8FA6EE}}
.gk.dark{--bg:#080D26;--ink:#EEF1FA;--muted:#B4BED8;--blue:#8FA6EE;--blue-t:rgba(143,166,238,.12);--blue-m:rgba(143,166,238,.26);
 --top:#1B275A;--left:#131D4A;--right:#0D1539;--edge:rgba(180,190,216,.40);--plate-t:#101A45;--plate-l:#0C1438;--plate-r:#09102E;
 --decal:rgba(180,190,216,.46);--decal-s:rgba(180,190,216,.14);--shadow:rgba(0,0,0,.35);--gd:rgba(180,190,216,.10);--live:#8FA6EE}
/* solids: light from the upper left, so top lightest, left face mid, right face darkest */
.gk .solid polygon{stroke:var(--edge);stroke-width:1;stroke-linejoin:round}
.gk .ft{fill:var(--top)}.gk .fl{fill:var(--left)}.gk .fr{fill:var(--right)}
.gk .plate .ft{fill:var(--plate-t)}.gk .plate .fl{fill:var(--plate-l)}.gk .plate .fr{fill:var(--plate-r)}
.gk .layer .ft{fill:var(--top)}.gk .layer.on .ft{fill:var(--blue-t)}
.gk .shadow{fill:var(--shadow)}.gk .gd{fill:var(--gd)}
.gk .dc{fill:none;stroke:var(--decal);stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gk .dcf{fill:var(--decal-s);stroke:none}.gk .dcb{fill:var(--blue)}.gk .dcbt{fill:var(--blue-t);stroke:var(--blue);stroke-width:1;vector-effect:non-scaling-stroke}
.gk .ftxt{fill:var(--ink);font-weight:700}.gk .ftxt.m{fill:var(--muted);font-weight:400}
/* wires: blue lines decided 28 Oct (#2A4BB0 light, #8FA6EE dark) */
.gk .wl{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.gk .wf{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-dasharray:2 10;stroke-linecap:round;opacity:0}
.gk .ah{fill:var(--blue)}
.gk .pk{fill:var(--blue);opacity:0}
.gk .port{fill:var(--bg);stroke:var(--blue);stroke-width:1.6}
.gk .num circle{fill:var(--ink)}.gk .num text{fill:var(--bg);font-size:14px;font-weight:700}
.gk .lt{fill:var(--ink);font-weight:700;paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
.gk .lv{fill:var(--muted);paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
.gk .cap{fill:var(--muted);font-size:14px}
.gk .lead{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:1 3;stroke-linecap:round}
/* motion: packets run only while playing (class .play on the svg); step focus dims the rest */
.gk.play .pk{opacity:1}
.gk [data-s]{transition:opacity .45s cubic-bezier(.2,.7,.2,1)}
.gk:not([data-lit="0"]) [data-s]{opacity:.65}
.gk[data-lit="1"] [data-s~="1"],.gk[data-lit="2"] [data-s~="2"],.gk[data-lit="3"] [data-s~="3"],
.gk[data-lit="4"] [data-s~="4"],.gk[data-lit="5"] [data-s~="5"],.gk[data-lit="6"] [data-s~="6"]{opacity:1}
.gk[data-lit="1"] [data-s~="1"] .wl,.gk[data-lit="2"] [data-s~="2"] .wl,.gk[data-lit="3"] [data-s~="3"] .wl,
.gk[data-lit="4"] [data-s~="4"] .wl,.gk[data-lit="5"] [data-s~="5"] .wl,.gk[data-lit="6"] [data-s~="6"] .wl{stroke-width:2.4;opacity:1}
.gk[data-lit="1"] .layer[data-s~="1"] .ft,.gk[data-lit="2"] .layer[data-s~="2"] .ft,.gk[data-lit="3"] .layer[data-s~="3"] .ft,
.gk[data-lit="4"] .layer[data-s~="4"] .ft,.gk[data-lit="5"] .layer[data-s~="5"] .ft,.gk[data-lit="6"] .layer[data-s~="6"] .ft{fill:var(--blue-m)}
.gk .layer[data-s]{opacity:1}
@media (prefers-reduced-motion:reduce){.gk .pk{display:none}.gk [data-s]{transition:none}}
@media (forced-colors:active){.gk .wl,.gk .solid polygon{stroke:CanvasText}.gk .lt,.gk .lv{fill:CanvasText;stroke:Canvas}}

/* Teaching pictures (28G-C12, GT-Phi). Extends kit.css; same tokens, blue lines as decided 28 Oct. */
.gk .pt{fill:var(--ink);font-weight:700}
.gk .ps{fill:var(--muted)}
.gk .mono{font-family:Consolas,"SF Mono","Cascadia Mono",ui-monospace,monospace;letter-spacing:.03em}
.gk .tgr{fill:var(--bg);stroke:var(--blue-m);stroke-width:1}
.gk .tgt{fill:var(--blue);font-weight:700}
.gk .tgr.k{fill:var(--ink);stroke:none}.gk .tgt.k{fill:var(--bg)}
.gk .dcl{fill:none;stroke:var(--blue);stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gk .hair{fill:none;stroke:var(--edge);stroke-width:1;vector-effect:non-scaling-stroke}
.gk .tick{stroke:var(--edge);stroke-width:1}
.gk .hole{fill:var(--bg);stroke:var(--edge);stroke-width:1}
.gk .glass{fill:var(--bg);stroke:var(--edge);stroke-width:1}
.gk .cyl .fl,.gk .cyl .ft{stroke:var(--edge);stroke-width:1}
.gk .card{fill:var(--bg);stroke:var(--edge);stroke-width:1}
.gk .pdot{fill:var(--blue)}.gk .hdot{fill:var(--bg);stroke:var(--blue);stroke-width:1.6}
.gk .tdot{fill:none;stroke:var(--ink);stroke-width:1.4}
.gk .st{fill:var(--bg);stroke:var(--blue);stroke-width:1.6}
.gk .sg{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.gk .bracket{fill:none;stroke:var(--ink);stroke-width:1.2}
/* lit front faces and decals for the step player (kit.css lights the top face) */
.gk[data-lit="1"] .layer[data-s~="1"] .fl,.gk[data-lit="2"] .layer[data-s~="2"] .fl,.gk[data-lit="3"] .layer[data-s~="3"] .fl,
.gk[data-lit="4"] .layer[data-s~="4"] .fl,.gk[data-lit="5"] .layer[data-s~="5"] .fl,.gk[data-lit="6"] .layer[data-s~="6"] .fl{fill:var(--blue-t)}
/* analogy switch: Everyday Comparison crossfades onto the same positions as How It Works */
.gk .an,.gk .hw,.gk .before,.gk .after,.gk .ly-drop{transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.gk .an{opacity:0}.gk.an-on .an{opacity:1}.gk.an-on .hw{opacity:0}
/* before / after switch */
.gk .after{opacity:0}.gk.after-on .after{opacity:1}.gk.after-on .before{opacity:0}
/* phone lost: the hardware layer drops away, the other layers stay lit */
.gk.lost .ly-drop{opacity:.12;transform:translate(0,26px)}
.gk .ghost{opacity:0;transition:opacity .6s}.gk.lost .ghost{opacity:1}
/* machine learning: the boundary turns as training adjusts the settings */
.gk .bd{transform-box:view-box;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gk .knob{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gk[data-lit="1"] .bd,.gk[data-lit="2"] .bd{transform:rotate(-34deg)}
.gk[data-lit="1"] .knob,.gk[data-lit="2"] .knob{transform:translate(var(--k0),0)}
.gk .drift{opacity:0;transition:opacity .6s}.gk[data-lit="6"] .drift{opacity:1}
.gk .test{opacity:0;transition:opacity .6s}.gk[data-lit="4"] .test,.gk[data-lit="5"] .test,.gk[data-lit="6"] .test,.gk[data-lit="0"] .test{opacity:1}
/* 28G-C15 */
.gk .fgrid{fill:none;stroke:var(--edge);stroke-width:1;opacity:.22;vector-effect:non-scaling-stroke}
.gk .fence{fill:var(--blue-t);stroke:var(--blue);stroke-width:1.4;stroke-dasharray:7 5;vector-effect:non-scaling-stroke}
.gk .ring{fill:none;stroke:var(--blue);stroke-width:1.4;vector-effect:non-scaling-stroke}
.gk .markr{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:3 3}
.gk .layer.hi .fl{fill:var(--blue-m)}.gk .layer.hi .ft{fill:var(--blue-t)}
.gk .gbar{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gk[data-lit="3"] .gbar,.gk[data-lit="4"] .gbar,.gk[data-lit="5"] .gbar,.gk[data-lit="0"] .gbar{transform:rotate(-58deg)}
.gk .os-b{opacity:0}.gk.os-ios .os-b{opacity:1}.gk.os-ios .os-a{opacity:0}
.gk .upd,.gk .offmark{opacity:0;transition:opacity .6s}.gk.upd-on .upd{opacity:1}
.gk.net-off .offmark{opacity:1}.gk.net-off .ln-web{opacity:.22}
.gk .ln-web,.gk .ln-mob,.gk .ln-desk{transition:opacity .45s}
.gk .beam{transform-box:view-box;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gk[data-lit="1"] .beam,.gk[data-lit="2"] .beam{transform:rotate(-7deg)}.gk[data-lit="4"] .beam{transform:rotate(7deg)}
.gk .pan{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gk .lid{transition:transform .6s cubic-bezier(.2,.7,.2,1)}.gk.look-on .lid{transform:translate(0,-70px)}
.gk .inside{opacity:0;transition:opacity .6s}.gk.look-on .inside{opacity:1}
.gk .rt-a,.gk .rt-b{transition:opacity .6s}.gk.route-b .rt-a{opacity:.28}.gk:not(.route-b) .rt-b{opacity:.28}
.gk .draft{opacity:0}.gk .draft.d1{opacity:1}
.gk.play .draft{animation:gk-cyc 9s infinite}.gk.play .draft.d2{animation-delay:3s}.gk.play .draft.d3{animation-delay:6s}
@keyframes gk-cyc{0%,30%{opacity:1}36%,94%{opacity:0}100%{opacity:1}}
/* 28G-C20: Kinds of AI */
.gk .isle{fill:var(--top);stroke:var(--blue);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gk .rg,.gk .srcr,.gk .ftk{transition:opacity .6s}.gk .ftk{opacity:0}
.gk.mem-on .rg,.gk.mem-on .srcr,.gk.ft-on .rg,.gk.ft-on .srcr{opacity:.15}.gk.ft-on .ftk{opacity:1}
@media (prefers-reduced-motion:reduce){.gk .gbar,.gk .beam,.gk .pan,.gk .lid{transition:none}.gk.play .draft{animation:none}}
@media (prefers-reduced-motion:reduce){.gk .an,.gk .hw,.gk .before,.gk .after,.gk .ly-drop,.gk .bd,.gk .knob{transition:none}}