/* Full-bleed rendering. Speech is an overlay, never a reserved canvas footer. */
#stage{padding:0;--screen-safe-top:env(safe-area-inset-top,0px);--screen-safe-bottom:env(safe-area-inset-bottom,0px)}
#viewer{width:100%;height:100%}
#speech-bubble{position:fixed;z-index:12;top:auto;bottom:max(8px,calc(env(safe-area-inset-bottom) + 6px));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);height:36px;display:flex;align-items:center;justify-content:center;padding:8px 14px;border:1px solid #ffdc7980;border-radius:15px;background:#17140feb;color:#fff2c6;font:600 15px/1.2 system-ui,sans-serif;white-space:nowrap;text-align:center;box-shadow:0 8px 28px #0007,0 0 calc(5px + var(--speech-pulse,0)*12px) #ffd46526;pointer-events:none;user-select:none;-webkit-user-select:none}
#speech-bubble::before{content:"";position:absolute;top:-5px;left:calc(50% - 5px);width:10px;height:10px;transform:rotate(45deg);background:#17140f;border-top:1px solid #ffdc7980;border-left:1px solid #ffdc7980}
#lightning-overlay{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;user-select:none;-webkit-user-select:none}
#speech-bubble[hidden],#lightning-overlay[hidden]{display:none}

/* A single, thumb-sized showcase toggle; its outer edges follow the requested offsets. */
#auto-spin{position:fixed;z-index:9;top:82px;right:45px;width:44px;height:44px;padding:11px;border:1px solid #ffdc2466;border-radius:50%;display:grid;place-items:center;background:#161610c9;color:#ffd724;box-shadow:0 3px 18px #0006;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
#auto-spin svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#auto-spin[aria-pressed="true"]{background:#ffd724;color:#17160e;box-shadow:0 0 22px #ffd7243d}
#auto-spin:focus-visible{outline:2px solid #fff;outline-offset:5px}
#spin-speed-control{position:fixed;z-index:9;top:82px;right:101px;width:min(170px,calc(100vw - 125px));height:44px;box-sizing:border-box;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid #ffdc2466;border-radius:22px;background:#161610e8;color:#ffd724;box-shadow:0 3px 18px #0006}
#spin-speed-control[hidden]{display:none}
#spin-speed{flex:1;min-width:0;width:100%;height:44px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;touch-action:none;cursor:pointer}
#spin-speed::-webkit-slider-runnable-track{height:4px;background:#ffdc2466;border-radius:4px}
#spin-speed::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;background:#ffd724;border:2px solid #ffed9c;border-radius:50%;box-shadow:0 1px 5px #0008}
#spin-speed::-moz-range-track{height:4px;background:#ffdc2466;border-radius:4px}
#spin-speed::-moz-range-thumb{width:16px;height:16px;background:#ffd724;border:2px solid #ffed9c;border-radius:50%;box-shadow:0 1px 5px #0008}
#spin-speed:focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:6px}
#spin-speed-value{min-width:34px;text-align:right;font:600 12px/1 system-ui;font-variant-numeric:tabular-nums}
#auto-spin .pause-symbol,#auto-spin[aria-pressed="true"] .spin-symbol,#auto-spin[hidden]{display:none}
#auto-spin[aria-pressed="true"] .pause-symbol{display:block}
@media(prefers-reduced-motion:reduce){#auto-spin{transition:none}}

/* Anchor the HUD independently of the model and prevent Safari page gestures. */
html,body{touch-action:none;overscroll-behavior:none}
#auto-spin,#spin-speed-control{transform:translateZ(0);backface-visibility:hidden;touch-action:none;user-select:none;-webkit-user-select:none}