.tool-demo-bubble{position:fixed;left:16px;bottom:20px;width:300px;max-width:calc(100vw - 32px);z-index:500;padding:10px;display:none;transition:opacity .2s ease}.tool-demo-bubble.is-visible{display:block}.tool-demo-close{position:absolute;top:-10px;right:-10px;width:24px;height:24px;line-height:1;border:2px solid var(--ribbon-dark);border-radius:4px;background:var(--paper);color:var(--ribbon-dark);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}.tool-demo-frame{position:relative;width:100%;height:224px;border:2px solid var(--ribbon-dark);border-radius:var(--radius);background:var(--paper);box-shadow:6px 6px 0 var(--ribbon-dark);box-sizing:border-box;overflow:hidden}.tool-demo-frame-inner{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:10px;height:100%;padding:14px;box-sizing:border-box;overflow:hidden}.tool-demo-status{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:34px;flex-shrink:0}.tool-demo-status-dot{flex:0 0 auto;width:9px;height:9px;border-radius:2px;background:var(--ribbon);display:inline-flex;align-items:center;justify-content:center;animation:toolDemoPulse 1.2s ease-in-out infinite}@keyframes toolDemoPulse{0%,to{opacity:1}50%{opacity:.3}}.tool-demo-status-dot.is-done{animation:none;opacity:1}.tool-demo-status-label{flex:1 1 auto;min-width:0;font-family:var(--font-mono);font-size:.74rem;line-height:1.3;color:var(--ink-soft);overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}.tool-demo-scene-host{flex:1;display:grid;grid-template-columns:minmax(0,1fr);min-height:0}.tool-demo-scene{grid-column:1;grid-row:1;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:0;width:100%;text-align:center}.tool-demo-scene.is-active{display:flex}.tool-demo-chip{display:inline-flex;align-items:center;justify-content:center;max-width:100%;box-sizing:border-box;border:2px solid var(--ink);border-radius:14px;padding:4px 12px;font-family:var(--font-mono);font-size:.68rem;font-weight:700;line-height:1.35;text-align:center;overflow-wrap:anywhere;color:var(--ink);background:var(--paper)}.tool-demo-progress{display:block;width:100%;height:6px;border-radius:999px;border:1px solid var(--ink);background:var(--paper-dim);overflow:hidden;box-sizing:border-box}.tool-demo-progress.is-hidden{visibility:hidden}.tool-demo-progress-fill{display:block;height:100%;width:0;background:var(--ribbon-dark);transition:width .4s ease}.tool-demo-progress.is-busy .tool-demo-progress-fill{width:38%;animation:toolDemoSlide 1.1s ease-in-out infinite alternate}@keyframes toolDemoSlide{0%{transform:translate(0)}to{transform:translate(163%)}}.tool-demo-note{max-width:100%;min-height:1.4em;font-family:var(--font-mono);font-size:.64rem;line-height:1.4;color:var(--ink-soft);text-align:center;overflow-wrap:anywhere}.tool-demo-check{visibility:hidden;flex:0 0 auto;width:26px;height:26px;border-radius:999px;background:var(--ribbon);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:.8rem}.tool-demo-check.is-shown{visibility:visible}.tool-demo-caption{width:fit-content;max-width:100%;box-sizing:border-box;margin:8px auto 0;padding:2px 8px;border-radius:4px;background:var(--paper);text-align:center;font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft)}.tool-demo-watch-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}.tool-demo-watch-btn svg{flex:0 0 auto;display:block}@media (max-width: 560px){.tool-demo-bubble{left:12px;bottom:auto;top:12px;width:min(300px,calc(100vw - 24px))}}