/* A persistent screenshot camera; every movement is triggered by the visitor. */
.project-demo{--pd-bg:#15111e;--pd-raised:#211a2b;--pd-text:#f0e9f6;--pd-muted:#c0b2cf;--pd-line:#54475f;--pd-accent:#c099ff;--pd-wash:#382346;--pd-ink:#120d1a;padding:48px 0;color:var(--pd-text);scroll-margin-top:32px}
.project-demo[data-project-demo=kgc]{--pd-accent:#f4bc70;--pd-wash:#3b2a1b}
.project-demo[data-project-demo=poparch]{--pd-accent:#bcb1ff;--pd-wash:#2d264d}
.project-demo[data-project-demo=kinda]{--pd-accent:#6cddc3;--pd-wash:#153a33}
.project-demo *{box-sizing:border-box}
.project-demo [hidden]{display:none!important}
.ide-document-content .project-demo h2,.project-demo h2{max-width:760px;margin:12px 0 18px;font-size:clamp(27px,3.8vw,45px);line-height:1.14;letter-spacing:-.035em;color:var(--pd-text)}
.ide-document-content .project-demo__intro,.project-demo__intro{max-width:680px;margin:0 0 28px;color:var(--pd-muted);font-size:15px;line-height:1.8}
.project-demo__card{container-type:inline-size;overflow:hidden;border:1px solid var(--pd-line);border-radius:18px;background:var(--pd-bg);box-shadow:0 24px 70px #00000029}
.project-demo__top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:16px 20px;border-bottom:1px solid var(--pd-line);font:500 11px/1.5 'IBM Plex Mono',monospace;color:var(--pd-muted);background:linear-gradient(110deg,var(--pd-wash),var(--pd-bg) 70%)}
.project-demo__top>span:first-child{color:var(--pd-text)}
.project-demo__top i{display:inline-block;width:7px;height:7px;margin-right:10px;background:var(--pd-accent);border-radius:50%;box-shadow:0 0 0 4px var(--pd-wash)}
.project-demo button{font:inherit;cursor:pointer;color:var(--pd-text);-webkit-tap-highlight-color:transparent}
.project-demo button:focus-visible{outline:3px solid var(--pd-accent);outline-offset:-4px}
.project-demo__stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/10;background:radial-gradient(ellipse at 50% 40%,var(--pd-wash),var(--pd-bg));border-bottom:1px solid var(--pd-line)}
.project-demo__camera{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform 850ms cubic-bezier(.22,.75,.15,1);will-change:auto}
.project-demo__camera img,.project-demo__scene img{display:block;width:100%;height:100%;object-fit:fill;margin:0!important;border:0!important;border-radius:0!important;max-height:none!important;max-width:none!important}
.project-demo__focus{position:absolute;left:var(--pd-x);top:var(--pd-y);width:var(--pd-w);height:var(--pd-h);border:2px solid var(--pd-accent);border-radius:5px;box-shadow:0 0 0 100vmax #090a143d,inset 0 0 0 1px #15111e77;pointer-events:none;transition:left 850ms cubic-bezier(.22,.75,.15,1),top 850ms cubic-bezier(.22,.75,.15,1),width 850ms cubic-bezier(.22,.75,.15,1),height 850ms cubic-bezier(.22,.75,.15,1)}
.project-demo__focus b{position:absolute;left:8px;top:8px;display:grid;place-items:center;min-width:27px;min-height:24px;padding:3px 5px;border-radius:4px;background:var(--pd-accent);color:var(--pd-ink);font:600 10px/1 'IBM Plex Mono',monospace}
.project-demo__hotspots{position:absolute;inset:0;pointer-events:none}
.project-demo .project-demo__hotspot{position:absolute;display:grid;place-items:center;width:44px;height:44px;padding:0;transform:translate(-50%,-50%);border:1px solid var(--pd-accent);border-radius:50%;background:var(--pd-bg);color:var(--pd-accent);box-shadow:0 0 0 5px #11111a33,0 5px 18px #0005;font:600 11px/1 'IBM Plex Mono',monospace;pointer-events:auto;transition:left 850ms cubic-bezier(.22,.75,.15,1),top 850ms cubic-bezier(.22,.75,.15,1),background 180ms}
.project-demo .project-demo__hotspot[aria-pressed=true]{background:var(--pd-accent);color:var(--pd-ink)}
.project-demo .project-demo__hotspot:hover{box-shadow:0 0 0 7px #11111a44,0 5px 18px #0005}
.project-demo__frame-note{position:absolute;right:10px;bottom:10px;border:1px solid #ffffff4f;border-radius:4px;background:#191020df;padding:5px 8px;font:500 8px/1.4 'IBM Plex Mono',monospace;letter-spacing:.09em;color:#fff;pointer-events:none}
.project-demo__controls{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;background:var(--pd-bg);border-bottom:1px solid var(--pd-line)}
.project-demo__controls>div{display:flex;align-items:center;gap:8px}
.project-demo__controls button{min-width:44px;min-height:44px;padding:10px 12px;border:1px solid var(--pd-line);border-radius:8px;background:var(--pd-bg);font-size:12px}
.project-demo__controls button:hover{border-color:var(--pd-accent)}
.project-demo__controls [data-demo-count]{font:500 10px/1.3 'IBM Plex Mono',monospace;color:var(--pd-muted);white-space:nowrap}
.project-demo__controls .project-demo__modes{gap:0;border:1px solid var(--pd-line);border-radius:8px;padding:3px;background:var(--pd-raised)}
.project-demo__controls .project-demo__modes button{border:0;min-height:36px;background:transparent;font-size:11px;padding:8px 12px}
.project-demo__controls .project-demo__modes button[aria-pressed=true]{background:var(--pd-accent);color:var(--pd-ink);box-shadow:0 1px 5px #0002}
.project-demo__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:18px 18px 0;gap:10px;background:var(--pd-bg)}
.project-demo__tabs button{position:relative;display:flex;align-items:center;gap:9px;min-height:62px;border:0;border-top:2px solid var(--pd-line);padding:13px 0 6px;text-align:left;background:transparent;font-size:12px;line-height:1.4;transition:border-color .18s,color .18s}
.project-demo__tabs button b{font-weight:500}
.project-demo__tabs button span{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border:1px solid var(--pd-line);border-radius:50%;font:500 10px/1 'IBM Plex Mono',monospace;color:var(--pd-muted)}
.project-demo__tabs button:hover{color:var(--pd-accent)}
.project-demo__tabs button[aria-selected=true]{border-top-color:var(--pd-accent)}
.project-demo__tabs button[aria-selected=true] span{color:var(--pd-ink);background:var(--pd-accent);border-color:var(--pd-accent)}
.project-demo__panel{margin:0;padding:0}
.project-demo__panel+.project-demo__panel{border-top:1px solid var(--pd-line)}
.project-demo[data-demo-ready=true] .project-demo__panel{border-top:0}
.project-demo[data-demo-ready=true] .project-demo__fallback{display:none}
.project-demo[data-demo-ready=true] .project-demo__caption{animation:project-demo-caption 300ms ease-out both}
@keyframes project-demo-caption{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.project-demo__frame{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:var(--pd-ratio);background:#efebe5}
.project-demo__scene{position:absolute;inset:0}
.project-demo__caption{display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;min-height:210px;padding:24px;background:var(--pd-bg)}
.project-demo__number{padding-top:5px;font:400 26px/1 'IBM Plex Mono',monospace;color:var(--pd-accent)}
.ide-document-content .project-demo__caption h3,.project-demo__caption h3{margin:8px 0 10px;color:var(--pd-text);font-size:22px;line-height:1.3;letter-spacing:-.025em}
.ide-document-content .project-demo__caption p,.project-demo__caption p{margin:0;font-size:13px;line-height:1.8;color:var(--pd-muted)}
.ide-document-content .project-demo__caption .project-demo__detail,.project-demo__caption .project-demo__detail{font:500 10px/1.6 'IBM Plex Mono',monospace;color:var(--pd-accent)}
.project-demo__status{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ide-document-content .project-demo__note,.project-demo__note{margin:14px 0 0;color:var(--pd-muted);font-size:11px;line-height:1.8;max-width:800px}
html[data-theme=cream] .project-demo{--pd-bg:#fbf6ec;--pd-raised:#ece3d1;--pd-text:#231c30;--pd-muted:#54496a;--pd-line:#b9a9c3;--pd-accent:#602397;--pd-wash:#efe3f5;--pd-ink:#fff}
html[data-theme=cream] .project-demo[data-project-demo=kgc]{--pd-accent:#8b4d09;--pd-wash:#f5e6ce}
html[data-theme=cream] .project-demo[data-project-demo=poparch]{--pd-accent:#6550ae;--pd-wash:#eee6f9}
html[data-theme=cream] .project-demo[data-project-demo=kinda]{--pd-accent:#147460;--pd-wash:#dcece1}
@container(max-width:520px){.project-demo__stage{aspect-ratio:5/4}.project-demo__tabs{padding:14px 12px 0;gap:8px}.project-demo__tabs button{flex-direction:column;align-items:flex-start;gap:8px;min-height:92px;font-size:11px}.project-demo__caption{padding:20px 16px;gap:10px;grid-template-columns:28px minmax(0,1fr);min-height:264px}.project-demo__number{font-size:22px}.project-demo__controls{padding:10px;gap:8px}.project-demo__controls>div{gap:5px}.project-demo__controls .project-demo__modes button{font-size:10px;padding:8px}.project-demo__top{padding:14px}.project-demo__top>span:last-child{font-size:10px}}
@container(max-width:310px){.project-demo__controls{flex-wrap:wrap;justify-content:center}.project-demo__controls .project-demo__modes{width:100%}.project-demo__modes button{flex:1}}
@media(max-width:600px){.project-demo{padding:32px 0}}
@media(prefers-reduced-motion:reduce){.project-demo__camera,.project-demo__focus,.project-demo__hotspot,.project-demo__tabs button{transition:none!important}.project-demo[data-demo-ready=true] .project-demo__caption{animation:none!important}}
html[data-motion-paused=true] .project-demo__camera,html[data-motion-paused=true] .project-demo__focus,html[data-motion-paused=true] .project-demo__hotspot,html[data-motion-paused=true] .project-demo__tabs button{transition:none!important}
html[data-motion-paused=true] .project-demo[data-demo-ready=true] .project-demo__caption{animation:none!important}