/* «Схеми»: справжні схеми SpilNote (diagram.js + dg.css) у кольорах сайту; власні сцени кроків */
.dglive,.dgh{--f-ui:var(--f-body);--text:var(--ink);--muted:var(--ink3);--panel:var(--menu);--line-2:var(--line2);--fs:15px}
:root[data-theme="light"] :is(.dglive,.dgh){--dg-canvas:#fbfcfe}
.fstage .dgbox{aspect-ratio:16/8.4;border-radius:18px}
.fstage .dgcap,.dgh .dgcap{display:none}
@media (max-width:900px){.fstage .dgbox{aspect-ratio:4/3.4}}
.dgh{position:absolute;inset:0}
.dgh .dgw{height:100%}
.dgh .dgbox{aspect-ratio:auto;height:100%;border:0;border-radius:0}
.dgh.low{top:62px}
.dgh .dgbar{display:none}
@media (max-width:900px){.dgh.low{top:84px}.aiq{font-size:13px}}

/* крок 2: 9 напрямів по 5 заготовок */
.tpls{position:absolute;inset:44px 14px 14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tp{border-radius:10px;border:1px solid var(--line);background:var(--card-in);padding:10px 12px;display:grid;align-content:start;gap:5px;overflow:hidden;position:relative}
.tp b{font-size:13.5px;color:var(--ink)}
.tp span{font-size:11.5px;color:var(--ink3);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp i{position:absolute;right:10px;top:10px;font:500 11px var(--f-mono);font-style:normal;color:var(--c)}
.tp.hl{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent)}
@media (max-width:900px){.tpls{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;inset:40px 8px 8px}.tp{padding:6px 7px}.tp span:not(:nth-of-type(1)){display:none}.tp b{font-size:11.5px}}

/* крок 4: лінія обходить фігуру */
.route{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(circle at 1px 1px,var(--card-in2) 1px,transparent 0) 0 0/20px 20px}
.route .nd{fill:var(--card);stroke-width:2}
.route text{font:700 13px var(--f-body);fill:var(--ink2)}

/* крок 5: файли вилітають */
.exp{position:absolute;inset:0;display:grid;place-items:center}
.expdg{width:min(360px,70%);aspect-ratio:5/3;border-radius:12px;border:1px solid var(--line2);background:var(--card-in) radial-gradient(circle at 1px 1px,var(--card-in2) 1px,transparent 0) 0 0/14px 14px;overflow:hidden}
.expdg svg{width:100%;height:100%}
.fl{position:absolute;left:50%;top:50%;display:grid;gap:2px;padding:10px 14px;border-radius:11px;background:var(--menu);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:12.5px;color:var(--ink3);white-space:nowrap;opacity:0}
.fl b{font:800 18px var(--f-disp);color:var(--c);letter-spacing:-.02em}

/* крок 6: запит до ШІ */
.aiq{position:absolute;left:14px;right:14px;top:14px;z-index:3;display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;background:var(--card-in2);font-size:14px;color:var(--ink);min-height:40px}
.aiq .mono{color:var(--c-ai)}