:host { display: block; width: min(100%, 440px); color: #e6edf4; }
:host([mode="footer"]) { width: 112px; }
:host([mode="conference"]) { width: min(100%, 1000px); }
* { box-sizing: border-box; }
.scene { display: block; width: 100%; height: auto; aspect-ratio: 700 / 470; }
.surface { background: var(--isdo-logo-background, #030407); border-radius: 12px; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.trigger { display: block; width: 100%; padding: 0; border: 0; background: transparent; border-radius: 12px; min-height: 44px; }
button:focus-visible { outline: 2px solid #51c9ff; outline-offset: 4px; }
.controls { display: flex; justify-content: center; padding: 0 16px 16px; }
.pause { min-height: 44px; padding: 10px 20px; border: 1px solid #465160; background: #111923; border-radius: 6px; }
.hint { font: 13px/1.5 Arial, sans-serif; text-align: center; padding: 0 16px 16px; margin: 0; }
[hidden] { display: none !important; }
::slotted(*) { display: none; }