.appearance-viewer-shell{background:var(--cp-color-surface-soft);border-radius:13px;height:min(68vh,760px);min-height:520px;position:relative;overflow:hidden}.appearance-viewer{position:absolute;inset:0}.appearance-viewer>canvas{width:100%;height:100%;display:block}.appearance-viewer-commandbar{z-index:4;top:12px;pointer-events:none;justify-content:flex-end;align-items:start;gap:12px;display:flex;position:absolute;inset-inline:12px}.appearance-viewer-tools{pointer-events:auto;justify-self:end;gap:5px;display:flex}.appearance-viewer-tools button{border:1px solid color-mix(in srgb, var(--cp-color-border) 72%, transparent);background:color-mix(in srgb, var(--cp-color-surface) 88%, transparent);width:36px;height:36px;color:var(--cp-color-text);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:10px;place-items:center;display:grid;box-shadow:0 3px 16px #00000014}.appearance-viewer-tools button:hover,.appearance-viewer-tools button.active{border-color:color-mix(in srgb, var(--cp-color-brand) 52%, var(--cp-color-border));background:var(--cp-color-brand-soft);color:var(--cp-color-brand)}.appearance-viewer-info-panel{z-index:5;top:56px;border:1px solid var(--cp-color-border);background:color-mix(in srgb, var(--cp-color-surface) 94%, transparent);width:210px;box-shadow:var(--cp-shadow-popover);color:var(--cp-color-text);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:11px;padding:11px;position:absolute;inset-inline-end:12px}.appearance-viewer-info-panel header{justify-content:space-between;align-items:center;font-size:12px;display:flex}.appearance-viewer-info-panel header button{width:24px;height:24px;color:var(--cp-color-muted);background:0 0;border:0;place-items:center;padding:0;display:grid}.appearance-viewer-info-panel dl{gap:7px;margin:9px 0 0;display:grid}.appearance-viewer-info-panel dl div{color:var(--cp-color-muted);font-size:var(--cp-font-caption);justify-content:space-between;display:flex}.appearance-viewer-info-panel dd{color:var(--cp-color-text);margin:0;font-family:ui-monospace,monospace}.appearance-viewer-overlay{color:var(--cp-color-brand-contrast);background:#05070a80;place-items:center;display:grid;position:absolute;inset:0}.appearance-viewer-state{z-index:3;background:color-mix(in srgb, var(--cp-color-surface-soft) 88%, transparent);color:var(--cp-color-muted);text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);align-content:center;place-items:center;gap:8px;padding:28px;display:grid;position:absolute;inset:0}.appearance-viewer-state strong{color:var(--cp-color-text);font-size:15px}.appearance-viewer-state span{max-width:460px;font-size:12px;line-height:1.5}.appearance-viewer-state--loading>svg{color:var(--cp-color-brand);animation:1s linear infinite viewer-spin}.appearance-viewer-state--error>svg{color:var(--cp-color-danger)}.appearance-viewer-state--error>button{border:1px solid var(--cp-color-border);background:var(--cp-color-surface);min-height:34px;color:var(--cp-color-text);border-radius:9px;margin-top:5px;padding:0 14px;font-weight:700}.appearance-viewer-state details{width:min(520px,100%);color:var(--cp-color-muted);font-size:var(--cp-font-caption);text-align:start;margin-top:5px}.appearance-viewer-state summary{text-align:center;cursor:pointer}.appearance-viewer-state code{background:var(--cp-color-surface-muted);overflow-wrap:anywhere;white-space:pre-wrap;border-radius:7px;max-height:110px;margin-top:8px;padding:9px;display:block;overflow:auto}.appearance-viewer-motion-warning{z-index:5;border:1px solid color-mix(in srgb, var(--cp-color-warning,#f5b942) 38%, transparent);background:color-mix(in srgb, var(--cp-color-surface) 88%, transparent);width:max-content;max-width:min(520px,100% - 32px);min-height:36px;color:var(--cp-color-text);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:11px;line-height:1.4;display:flex;position:absolute;top:62px;left:50%;transform:translate(-50%);box-shadow:0 12px 32px #0000002e}.appearance-viewer-motion-warning svg{color:var(--cp-color-warning,#f5b942);flex:none}.appearance-viewer-shell--compact{border-radius:0;height:min(70vh,720px);min-height:520px}@keyframes viewer-spin{to{transform:rotate(360deg)}}@media (width<=860px){.appearance-viewer-shell{height:54vh;min-height:360px}}