*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#1e293b;background:#f1f5f9}a{color:#4f46e5}.page{max-width:760px;margin:0 auto;padding:48px 20px 80px}.page>header h1{margin:0 0 4px;font-size:2rem}.page>header p{margin:0;color:#475569}.demo{position:relative;margin-top:40px;padding:24px 28px;background:#fff;border:1px solid #e2e8f0;border-radius:16px}.demo h2{margin:0 0 8px;font-size:1.25rem}.demo .hint{margin:0 0 16px;font-size:.875rem;color:#64748b}.row{display:flex;flex-wrap:wrap;gap:10px}.btn{padding:8px 16px;font:inherit;font-size:.875rem;font-weight:500;color:#1e293b;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;cursor:pointer}.btn:hover,.btn:focus-visible{border-color:#6366f1;outline:none}.btn.primary{color:#fff;background:#4f46e5;border-color:#4f46e5}.btn.danger{color:#b91c1c}.btn.active{box-shadow:0 0 0 3px #c7d2fe}.btn.small{padding:2px 10px;font-size:.75rem}.bubble-title{margin:0;font-size:.875rem;font-weight:600}.bubble-text{margin:2px 0 0;font-size:.8125rem;line-height:1.4;color:#475569}.bubble-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:.75rem;color:#94a3b8}.chart{position:relative;cursor:crosshair}.chart svg{display:block;width:100%;height:auto}.stage{position:relative;height:300px;display:flex;align-items:center;justify-content:center}.placed-stage{position:relative;height:140px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px}.placed-bubble{position:absolute;left:48px;top:36px}.laptop{max-width:100%}.label-bubble{padding:10px;border-radius:10px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.label-bubble.dragging{z-index:31;cursor:grabbing}code{padding:1px 5px;font-size:.85em;background:#f1f5f9;border-radius:4px}.anchor-switch label{margin-left:8px;cursor:pointer}footer{margin-top:40px;font-size:.875rem;color:#64748b;text-align:center}.nav-demos{margin:0 0 .5rem;font-size:.95rem;color:#64748b}