.viewer{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--sp-4);align-items:start;margin:var(--sp-4) 0}.viewer-panel{min-width:0}.viewer-note{font-family:var(--font);font-weight:400;color:var(--text-muted);font-size:var(--fs-small)}.viewer-stage{display:flex;flex-direction:column;background:var(--bg-page);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.viewer-canvas{position:relative;aspect-ratio:16 / 10;width:100%;background-color:var(--bg-inset)}.viewer-canvas[data-bg=checker]{background-color:#2b2622;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%233d362f' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/svg%3E")}.viewer-gl{position:absolute;inset:0}.viewer-gl canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none}.viewer-gl canvas:active{cursor:grabbing}.viewer-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-4);text-align:center}.viewer-ph-icon{width:96px;height:96px;max-height:45%;object-fit:contain;opacity:.4;border:1px solid var(--border);border-radius:var(--radius)}.viewer-panel[data-state=loading] .viewer-ph-icon{opacity:.16}.viewer-open{padding:6px 16px;font-weight:600}.viewer-open:disabled{cursor:default;background:var(--bg-raised);border-color:var(--border);color:var(--text-muted)}.viewer-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);padding:var(--sp-2);background:var(--bg-raised);border-top:1px solid var(--border)}.viewer-group{display:flex;align-items:center;gap:var(--sp-1);min-width:0}.viewer-group-end{margin-left:auto}.viewer-btn,.viewer-select{height:26px;padding:0 10px;font-size:var(--fs-small);line-height:24px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);transition:background-color .12s,border-color .12s,color .12s,scale .12s var(--ease-out)}.viewer-btn:hover,.viewer-select:hover{background:var(--bg-hover);border-color:var(--action)}.viewer-btn[aria-pressed=true]{background:var(--action);border-color:var(--action);color:#fff}.viewer-btn[aria-pressed=true]:hover{background:var(--action-fill-hover);border-color:var(--action-hover)}.viewer-play{min-width:56px}.viewer-select{padding:0 6px;max-width:100%}.viewer-select:disabled{color:var(--text-muted)}.viewer-anim{width:150px}.viewer-speed{width:84px;margin:0;accent-color:var(--action)}.viewer-speed-out{min-width:38px;color:var(--text-muted);font-size:var(--fs-small)}.viewer-info{margin:var(--sp-1) 0 0;color:var(--text-muted);font-size:var(--fs-small);overflow-wrap:anywhere}.viewer-error{color:var(--text)}.viewer-stage:fullscreen{width:100vw;height:100vh;border:0;border-radius:0}.viewer-stage:fullscreen .viewer-canvas{aspect-ratio:auto;flex:1 1 auto;min-height:0}.viewer-stage:-webkit-full-screen{width:100vw;height:100vh;border:0;border-radius:0}.viewer-stage:-webkit-full-screen .viewer-canvas{aspect-ratio:auto;flex:1 1 auto;min-height:0}@media(max-width:767px){.viewer-group-end{margin-left:0}.viewer-anim{width:130px}}.viewer-stage{background:var(--bg-inset);border-color:#d6965c4d;border-radius:var(--radius-panel)}.viewer-canvas[data-bg=dark]{background:radial-gradient(60% 70% at 50% 45%,#1e1a19 0%,var(--bg-inset) 100%)}.viewer-btn,.viewer-select{border-radius:var(--radius-round);border-color:#d6965c61;background:#0e0c0c8c;padding-inline:12px}.viewer-btn:hover,.viewer-select:hover{background:var(--wash-violet);border-color:#d6965c99}.viewer-btn[aria-pressed=true]{color:var(--gold);background:var(--wash-gold);border-color:var(--ring-gold)}.viewer-btn[aria-pressed=true]:hover{background:#ff8c4229;border-color:var(--gold)}.viewer-speed{accent-color:var(--text)}