/* Source: supplied ChatGPT õpetajale guide, source-dom.json + source style 2.
 * Nine local interface illustrations; source SVG geometry, labels and sequence timings retained.
 * Every source selector and keyframe is scoped/namespaced. Host runtime is not included. */
.guide-demo {
    --line: #e5e1d8;
    --accent: #7a3fb0;
    font-family: Inter, system-ui, sans-serif;
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.6;
    color: #0d0d0d;
    overflow-wrap: normal;
    color-scheme: light;
}
.guide-body .guide-intro-layout:has(.guide-context--animated) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.guide-body .guide-intro-layout:has(.guide-context--animated) .guide-intro-copy p + p { margin-top: 16px; padding: 0; border-radius: 0; background: transparent; }
.guide-body .guide-context-inline:has(.guide-context--animated) { width: 100%; max-width: none; margin-inline: 0; }
.guide-demo *, .guide-demo *::before, .guide-demo *::after { box-sizing: border-box; }
.guide-demo b { font-weight: 700; }
.guide-demo svg { display: inline-block; vertical-align: middle; }
.guide-demo ul, .guide-demo li { list-style: none; }
.guide-demo li::before, .guide-demo li::marker { content: none !important; display: none !important; }
.guide-demo .mock {max-width:440px;margin:8px 0 4px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;font-family:"Inter",system-ui,sans-serif;color:#0d0d0d}
.guide-demo .pa {position:relative;height:200px;max-width:none;padding:0;overflow:hidden;background:#fafafa}
.guide-demo .pa-rail {position:absolute;left:0;top:0;bottom:0;width:48px;border-right:1px solid #ececec;background:#f7f7f7;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:10px}
.guide-demo .pa-ic {display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#6b6b6b}
.guide-demo .pa-veel {animation:guideDemo-paVeel 9s infinite}
.guide-demo .pa-menu {position:absolute;left:56px;top:6px;list-style:none;margin:0;padding:4px;width:170px;background:#fff;border:1px solid #e5e5e5;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.1);opacity:0;animation:guideDemo-paMenu 9s infinite}
.guide-demo .pa-menu li {margin:0;display:flex;align-items:center;gap:9px;font-size:13px;padding:3px 8px;border-radius:8px;color:#0d0d0d;border:2px solid transparent}
.guide-demo .pa-menu li svg {width:16px;height:16px}
.guide-demo .pa-proj {animation:guideDemo-paProj 9s infinite}
.guide-demo .pa-panel {position:absolute;left:60px;top:10px;right:14px;opacity:0;animation:guideDemo-paPanel 9s infinite;color:#0d0d0d}
.guide-demo .pa-panel b {display:block;font-size:14px;color:#5d5d5d;padding:4px 8px;border:2px solid var(--accent);border-radius:10px;margin-bottom:6px}
.guide-demo .pa-row {display:flex;align-items:center;gap:8px;font-size:14px;padding:6px 8px}
.guide-demo .pa-row svg {width:16px;height:16px}
.guide-demo .pa-chat {font-size:13.5px;padding:5px 8px 5px 32px}
.guide-demo .pa-cur {position:absolute;left:250px;top:170px;opacity:0;animation:guideDemo-paCur 9s infinite;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.guide-demo .rm .rm-view {position:absolute;left:49px;top:0;right:0;bottom:0;display:flex;opacity:0;animation:guideDemo-rmView 8s infinite}
.guide-demo .rm-nav {width:118px;border-right:1px solid #ececec;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.guide-demo .rm-nav>b {font-size:13.5px;padding:0 6px 4px}
.guide-demo .rm-n {display:flex;align-items:center;gap:7px;font-size:12px;padding:4px 6px;border-radius:7px;color:#0d0d0d}
.guide-demo .rm-n svg,
.guide-demo .rm-card svg,
.guide-demo .rm-f svg {width:14px;height:14px;flex:none}
.guide-demo .rm-n.on {background:#ececec}
.guide-demo .rm-main {flex:1;min-width:0;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.guide-demo .rm-main>b {font-size:13.5px}
.guide-demo .rm-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.guide-demo .rm-card {background:#fff;border:1px solid #e8e8e8;border-radius:9px;padding:7px;display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;line-height:1.25;color:#0d0d0d}
.guide-demo .rm-card svg {color:#7a3fb0}
.guide-demo .rm-f {display:flex;align-items:center;gap:7px;font-size:12px;padding:5px 2px;border-bottom:1px solid #efefef}
.guide-demo .rm-ruum {animation:guideDemo-rmIc 8s infinite}
.guide-demo .rm-cur {animation-name:guideDemo-rmCur;animation-duration:8s}
.guide-demo .aj-view {animation-name:guideDemo-rmView}
.guide-demo .aj-ic {animation:guideDemo-ajIc 8s infinite}
.guide-demo .aj-cur {animation-name:guideDemo-ajCur;animation-duration:8s}
.guide-demo .aj .rm-nav {width:150px}
.guide-demo .aj-new {white-space:nowrap;font-weight:600;border:2px solid var(--accent);background:#faf5ff}
.guide-demo .aj-lbl {font-size:11px;color:#8f8f8f;padding:8px 6px 2px}
.guide-demo .aj-task {display:flex;flex-direction:column;padding:2px 6px;font-size:11.5px;line-height:1.3}
.guide-demo .aj-task b {font-weight:500}
.guide-demo .aj-task small {color:#8f8f8f;font-size:10.5px}
.guide-demo .aj-main {align-items:stretch}
.guide-demo .aj-title {text-align:center;font-size:13.5px;margin:2px 0 4px}
.guide-demo .aj-cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.guide-demo .aj-card {display:flex;gap:7px;align-items:flex-start;background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:7px 8px}
.guide-demo .aj-ci svg {width:15px;height:15px}
.guide-demo .aj-card b {display:block;font-size:11.5px;font-weight:600;line-height:1.25}
.guide-demo .aj-card small {display:block;font-size:10.5px;color:#8f8f8f;line-height:1.3}
.guide-demo .pl-ic {animation:guideDemo-ajIc 8s infinite}
.guide-demo .pl-cur {animation-name:guideDemo-plCur;animation-duration:8s}
.guide-demo .pl-top {display:flex;justify-content:space-between;align-items:center}
.guide-demo .pl-top b {font-size:14px}
.guide-demo .pl-add {font-size:11.5px;font-weight:600;color:#fff;background:#0d0d0d;border-radius:999px;padding:3px 10px}
.guide-demo .pl-sub {font-size:12px;font-weight:600;color:#5d5d5d}
.guide-demo .pl-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.guide-demo .pl-c {display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:6px 8px}
.guide-demo .pl-l {flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;color:#fff;font-size:11px;font-weight:700}
.guide-demo .pl-c b {display:block;font-size:11.5px;font-weight:600}
.guide-demo .pl-c small {display:block;font-size:10px;color:#8f8f8f;line-height:1.25}
.guide-demo .pl-c>span:nth-child(2) {flex:1;min-width:0}
.guide-demo .pl-plus {flex:none;font-size:16px;color:#5d5d5d}
.guide-demo .mx-gpt {animation:guideDemo-mxgpt 9s infinite}
.guide-demo .cur-gpt {animation-name:guideDemo-curgpt}
.guide-demo .mx-agent {animation:guideDemo-mxagent 9s infinite}
.guide-demo .cur-agent {animation-name:guideDemo-curagent}
.guide-demo .mx-sait {animation:guideDemo-mxsait 9s infinite}
.guide-demo .cur-sait {animation-name:guideDemo-cursait}
.guide-demo .mx-kaart {animation:guideDemo-mxkaart 9s infinite}
.guide-demo .cur-kaart {animation-name:guideDemo-curkaart}
.guide-demo .mx-codex {animation:guideDemo-mxcodex 9s infinite}
.guide-demo .cur-codex {animation-name:guideDemo-curcodex}
.guide-demo .vw-panel {display:flex;flex-direction:column;gap:8px}
.guide-demo .vw-panel b {display:inline;border:0;padding:0;margin:0;color:#0d0d0d;font-size:inherit}
.guide-demo .vw-h {display:flex;align-items:center;gap:7px}
.guide-demo .vw-h b {font-size:15px}
.guide-demo .vw-top {display:flex;justify-content:space-between;align-items:center}
.guide-demo .vw-search {display:flex;align-items:center;gap:7px;border:1px solid #e3e3e3;border-radius:999px;padding:5px 12px;font-size:12px;color:#8f8f8f;background:#fff}
.guide-demo .vw-search svg {width:14px;height:14px}
.guide-demo .vw-tabs {display:flex;gap:6px}
.guide-demo .vw-tabs span {font-size:11.5px;padding:3px 10px;border-radius:999px;color:#5d5d5d}
.guide-demo .vw-tabs span.on {background:#ececec;color:#0d0d0d;font-weight:600}
.guide-demo .gp-ban {display:flex;gap:8px;align-items:flex-start;border:2px solid var(--accent);background:#fff;border-radius:10px;padding:7px 9px}
.guide-demo .gp-ban svg {width:15px;height:15px;flex:none;margin-top:1px}
.guide-demo .gp-ban b {display:block;font-size:11.5px;font-weight:600;line-height:1.3}
.guide-demo .gp-ban small {display:block;font-size:10.5px;color:#6b6b6b}
.guide-demo .ag-hero {border-radius:12px;padding:12px 14px;background:linear-gradient(120deg,#2f80ed,#56a7ff);color:#fff}
.guide-demo .ag-hero b {display:block;font-size:14px;color:#fff}
.guide-demo .ag-hero small {font-size:11px;opacity:.9}
.guide-demo .sa-row {display:flex;align-items:center;gap:9px;border-top:1px solid #ececec;padding-top:8px}
.guide-demo .sa-th {flex:none;width:44px;height:30px;border-radius:5px;background:linear-gradient(#e8e4f7 40%,#fff 40%);border:1px solid #e3e3e3}
.guide-demo .sa-row b {display:block;font-size:12.5px;font-weight:600}
.guide-demo .sa-row small {font-size:10.5px;color:#8f8f8f}
.guide-demo .sa-row>span:nth-child(2) {flex:1}
.guide-demo .sa-own {font-size:11px;color:#5d5d5d}
.guide-demo .ka-map {position:relative;height:118px;border-radius:12px;background:#e8f1e4;overflow:hidden;background-image:linear-gradient(115deg,transparent 46%,#fff 46%,#fff 50%,transparent 50%),linear-gradient(25deg,transparent 60%,#fff 60%,#fff 63%,transparent 63%),radial-gradient(circle at 80% 20%,#cfe3f5 0 22%,transparent 23%)}
.guide-demo .ka-pin {position:absolute;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#e5484d;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.guide-demo .ka-s {margin-top:-2px}
.guide-demo .cx-q {text-align:center;font-size:17px;font-weight:500;margin-top:34px}
.guide-demo .cx-in {display:flex;justify-content:space-between;align-items:center;border:1px solid #e3e3e3;border-radius:16px;padding:12px 12px 12px 14px;background:#fff;font-size:12px;color:#8f8f8f}
.guide-demo .cx-go {display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0d0d0d;color:#fff;font-size:12px}
@media (max-width:560px) {.guide-demo .rm-nav {display:none}}
@keyframes guideDemo-paCur {0%{opacity:0;left:250px;top:170px}6%{opacity:1;left:250px;top:170px}20%{left:28px;top:164px;transform:none}23%{transform:scale(.85)}25%{transform:none}32%{left:28px;top:164px}44%{left:175px;top:20px;transform:none}47%{transform:scale(.85)}49%{transform:none}52%{opacity:1;left:175px;top:20px}56%,100%{opacity:0;left:175px;top:20px}}
@keyframes guideDemo-paVeel {0%,22%{background:transparent;box-shadow:none}24%,50%{background:#e9e9e9;box-shadow:0 0 0 2px var(--accent)}54%,100%{background:transparent;box-shadow:none}}
@keyframes guideDemo-paMenu {0%,25%{opacity:0;transform:translateY(4px)}29%,50%{opacity:1;transform:none}54%,100%{opacity:0}}
@keyframes guideDemo-paProj {0%,45%{border-color:transparent;background:transparent}47%,54%{border-color:var(--accent);background:#faf5ff}}
@keyframes guideDemo-paPanel {0%,54%{opacity:0}60%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes guideDemo-rmCur {0%{opacity:0;left:240px;top:150px}8%{opacity:1;left:240px;top:150px}26%{left:28px;top:56px;transform:none}29%{transform:scale(.85)}31%{transform:none}38%{opacity:1;left:28px;top:56px}44%,100%{opacity:0;left:28px;top:56px}}
@keyframes guideDemo-rmIc {0%,28%{background:transparent;box-shadow:none;color:#6b6b6b}30%,94%{background:#e9e9e9;box-shadow:0 0 0 2px var(--accent);color:#0d0d0d}100%{background:transparent;box-shadow:none}}
@keyframes guideDemo-rmView {0%,31%{opacity:0}38%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes guideDemo-ajCur {0%{opacity:0;left:240px;top:160px}8%{opacity:1;left:240px;top:160px}26%{left:28px;top:92px;transform:none}29%{transform:scale(.85)}31%{transform:none}38%{opacity:1;left:28px;top:92px}44%,100%{opacity:0;left:28px;top:92px}}
@keyframes guideDemo-ajIc {0%,28%{background:transparent;box-shadow:none;color:#6b6b6b}30%,94%{background:#e9e9e9;box-shadow:0 0 0 2px var(--accent);color:#0d0d0d}100%{background:transparent;box-shadow:none}}
@keyframes guideDemo-plCur {0%{opacity:0;left:240px;top:160px}8%{opacity:1;left:240px;top:160px}26%{left:28px;top:128px;transform:none}29%{transform:scale(.85)}31%{transform:none}38%{opacity:1;left:28px;top:128px}44%,100%{opacity:0;left:28px;top:128px}}
@keyframes guideDemo-mxgpt {0%,45%{border-color:transparent;background:transparent}47%,54%{border-color:var(--accent);background:#faf5ff}}
@keyframes guideDemo-curgpt {0%{opacity:0;left:250px;top:170px}6%{opacity:1;left:250px;top:170px}20%{left:28px;top:164px;transform:none}23%{transform:scale(.85)}25%{transform:none}32%{left:28px;top:164px}44%{left:175px;top:113px;transform:none}47%{transform:scale(.85)}49%{transform:none}52%{opacity:1;left:175px;top:113px}56%,100%{opacity:0;left:175px;top:113px}}
@keyframes guideDemo-mxagent {0%,45%{border-color:transparent;background:transparent}47%,54%{border-color:var(--accent);background:#faf5ff}}
@keyframes guideDemo-curagent {0%{opacity:0;left:250px;top:170px}6%{opacity:1;left:250px;top:170px}20%{left:28px;top:164px;transform:none}23%{transform:scale(.85)}25%{transform:none}32%{left:28px;top:164px}44%{left:175px;top:144px;transform:none}47%{transform:scale(.85)}49%{transform:none}52%{opacity:1;left:175px;top:144px}56%,100%{opacity:0;left:175px;top:144px}}
@keyframes guideDemo-mxsait {0%,45%{border-color:transparent;background:transparent}47%,54%{border-color:var(--accent);background:#faf5ff}}
@keyframes guideDemo-cursait {0%{opacity:0;left:250px;top:170px}6%{opacity:1;left:250px;top:170px}20%{left:28px;top:164px;transform:none}23%{transform:scale(.85)}25%{transform:none}32%{left:28px;top:164px}44%{left:175px;top:51px;transform:none}47%{transform:scale(.85)}49%{transform:none}52%{opacity:1;left:175px;top:51px}56%,100%{opacity:0;left:175px;top:51px}}
@keyframes guideDemo-mxkaart {0%,45%{border-color:transparent;background:transparent}47%,54%{border-color:var(--accent);background:#faf5ff}}
@keyframes guideDemo-curkaart {0%{opacity:0;left:250px;top:170px}6%{opacity:1;left:250px;top:170px}20%{left:28px;top:164px;transform:none}23%{transform:scale(.85)}25%{transform:none}32%{left:28px;top:164px}44%{left:175px;top:82px;transform:none}47%{transform:scale(.85)}49%{transform:none}52%{opacity:1;left:175px;top:82px}56%,100%{opacity:0;left:175px;top:82px}}
@keyframes guideDemo-mxcodex {0%,45%{border-color:transparent;background:transparent}47%,54%{border-color:var(--accent);background:#faf5ff}}
@keyframes guideDemo-curcodex {0%{opacity:0;left:250px;top:170px}6%{opacity:1;left:250px;top:170px}20%{left:28px;top:164px;transform:none}23%{transform:scale(.85)}25%{transform:none}32%{left:28px;top:164px}44%{left:175px;top:175px;transform:none}47%{transform:scale(.85)}49%{transform:none}52%{opacity:1;left:175px;top:175px}56%,100%{opacity:0;left:175px;top:175px}}

/* The source artwork is a useful final frame before enhancement or without JavaScript. */
.guide-context.guide-context--animated > .guide-context-frame { padding: 12px; border: 0; border-radius: 24px; background: var(--color-creme-50, #f3ede5); color: var(--color-black, #000); }
.guide-context--animated > .guide-context-frame > .guide-context-topbar { padding: 0 4px 12px; border: 0; background: transparent; color: var(--color-green-500, #005a36); font-size: var(--text-2xs, 12px); }
.guide-context--animated > .guide-context-frame > .guide-context-topbar .guide-context-label { color: inherit; }
.guide-context--animated .guide-demo { height: calc(200px * var(--guide-demo-scale, 1)); overflow: hidden; border-radius: 12px; }
.guide-context .guide-demo > .mock.pa { width: calc(100% / var(--guide-demo-scale, 1)); height: 200px; margin: 0; border: 0; border-radius: 12px; transform: scale(var(--guide-demo-scale, 1)); transform-origin: top left; }
.guide-demo:not(.is-demo-enhanced) *,
.guide-demo.is-demo-enhanced * { animation-play-state: paused !important; }
.guide-demo:not(.is-demo-enhanced) * { animation: none !important; }
.guide-demo:not(.is-demo-enhanced) .pa-panel,
.guide-demo:not(.is-demo-enhanced) .rm-view { opacity: 1; }
.guide-demo:not(.is-demo-enhanced) .rm-ruum,
.guide-demo:not(.is-demo-enhanced) .aj-ic,
.guide-demo:not(.is-demo-enhanced) .pl-ic { background: #e9e9e9; box-shadow: 0 0 0 2px var(--accent); color: #0d0d0d; }
.guide-demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 0; background: transparent; color: var(--color-green-500, #005a36); }
.guide-demo-controls[hidden] { display: none; }
.guide-demo-controls button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 12px; border: 0; border-radius: 50%; background: var(--color-green-100, #cfe3db); color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.guide-demo-controls button[data-guide-demo-replay] { background: var(--color-creme-100, #f7f6f2); }
.guide-demo-controls button:hover { background: var(--color-green-200, #aed0c1); }
.guide-demo-controls button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.guide-demo-controls button:disabled { opacity: .5; cursor: default; }
.guide-demo-controls svg { display: block; flex: none; width: 20px; height: 20px; }
.guide-demo-toggle-icon { display: inline-block; width: 20px; height: 20px; }
.guide-demo-toggle-icon::before { content: none; display: none; }
.guide-demo-toggle-icon .guide-demo-pause-svg,
.guide-demo-controls[data-playing="true"] .guide-demo-toggle-icon .guide-demo-play-svg { display: none; }
.guide-demo-controls[data-playing="true"] .guide-demo-toggle-icon .guide-demo-pause-svg { display: block; }
.guide-demo-controls [data-guide-demo-toggle-label],
.guide-demo-control-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.guide-demo-status { margin-left: auto; font-size: 11px; line-height: 1.4; font-weight: 400; color: #363649; }
.guide-context-editor .guide-context-animation-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: #005a36; }
@media (max-width: 479px) {
    .guide-demo-controls { gap: 8px; padding: 8px 0 0; }
    .guide-demo-status { margin-left: auto; }
}