brawler-viewer{display:block;position:relative;width:100%;height:100%;min-height:160px;isolation:isolate;contain:layout style;--viewer-muted:#aaaabd;color:var(--viewer-muted)}
brawler-viewer>.brawler-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0}
brawler-viewer>.brawler-monogram{display:grid;place-items:center;font:700 96px/1 system-ui;color:#c9f86b}.stage-loading{position:absolute;inset:0;display:grid;place-items:center;font:12px/1.5 system-ui;letter-spacing:.06em;color:#a7adbd}.brawler-viewer .stage-loading{display:none}
.brawler-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .18s}
.brawler-drag{position:absolute;inset:0;cursor:grab;touch-action:pan-y;outline-offset:-5px;border-radius:18px}
.brawler-drag:active{cursor:grabbing}.brawler-drag:focus-visible{outline:2px solid #c9f86b}
.brawler-tools{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:flex;z-index:3;white-space:nowrap}
.brawler-tools[hidden]{display:none}.brawler-tools button{border:1px solid #ffffff18;border-radius:24px;background:#1619249c;color:#d7dbea;backdrop-filter:blur(8px);font:500 11px/1 system-ui;width:44px;height:44px;min-width:44px;min-height:44px;padding:12px;cursor:pointer;transition:background .2s}.brawler-tools button svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.brawler-tools button:hover{background:#343944}.brawler-tools button:focus-visible{outline:2px solid #c9f86b;outline-offset:3px}.brawler-tools button:disabled{visibility:hidden}
.brawler-hint{position:absolute;left:50%;bottom:55px;transform:translateX(-50%);font:10px/1.5 system-ui;letter-spacing:.03em;white-space:nowrap;pointer-events:none;z-index:2;text-align:center;max-width:95%}
.is-ready>.brawler-canvas{opacity:1}.is-fallback>.brawler-poster{opacity:1}.is-fallback .brawler-hint{white-space:normal;bottom:15px;text-align:center;width:85%}
.compact .brawler-tools button{min-width:44px}.compact .brawler-hint{font-size:9px;white-space:normal;width:100%;bottom:53px}.compact>.brawler-poster{width:80px!important;height:80px!important;left:calc(50% - 40px);top:45px}
[data-motion]{border:1px solid #ffffff20;background:transparent;color:inherit;padding:8px 13px;border-radius:30px;font-size:11px;cursor:pointer}
@media(prefers-reduced-motion:no-preference){[data-reveal].is-revealed{animation:bs-reveal .6s both}@keyframes bs-reveal{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:none}}}
.motion-off *, .motion-off *:before,.motion-off *:after{animation:none!important;scroll-behavior:auto!important}
@media(max-width:640px){.brawler-hint{font-size:9px;white-space:normal;width:100%}}
@media(prefers-reduced-motion:reduce){.brawler-canvas,.brawler-tools button{transition:none}}

.brawler-hint:empty{display:none}.spotlight-card{cursor:pointer}.spotlight-card:has(.spotlight-copy:focus-visible){outline:2px solid var(--accent);outline-offset:4px}

brawler-viewer:not(.is-ready) .brawler-drag{pointer-events:none}

/* Only a real failure inserts a poster into the live viewer. */
brawler-viewer.is-ready>.brawler-poster{display:none!important}
.viewer-no-script>.brawler-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:1}