.shareable-artifact-container{font-family:var(--font-sans,system-ui, sans-serif);display:inline-block}.ratio-toggle-group{background:hsl(var(--bg-surface-1,220 13% 14%));border:1px solid hsl(var(--border-subtle,220 13% 24%));border-radius:.375rem;gap:2px;padding:2px;display:inline-flex}.btn-ratio{color:hsl(var(--text-muted,215 16% 55%));cursor:pointer;background:0 0;border:none;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;font-weight:600;transition:all .15s}.btn-ratio.active{background:hsl(var(--accent-primary,210 100% 55%));color:#fff}.export-artifact-btn{color:hsl(var(--text-primary,210 40% 98%));background:hsl(var(--bg-surface-2,220 13% 22%) / .8);border:1px solid hsl(var(--border-subtle,220 13% 32%) / .8);cursor:pointer;backdrop-filter:blur(12px);border-radius:.5rem;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.8125rem;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex;box-shadow:inset 0 1px #ffffff1a,0 2px 4px #0003}.export-artifact-btn:hover{background:hsl(var(--accent-primary,210 100% 55%) / .2);border-color:hsl(var(--accent-primary,210 100% 55%) / .5);transform:translateY(-1px)}.artifact-modal-backdrop{backdrop-filter:blur(8px);z-index:1000;background:#000000bf;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.artifact-modal-dialog{background:hsl(var(--bg-surface-1,220 13% 14%) / .98);border:1px solid hsl(var(--border-subtle,220 13% 28%) / .9);border-radius:1rem;flex-direction:column;width:100%;max-width:680px;display:flex;overflow:hidden;box-shadow:0 24px 48px -12px #0009,inset 0 1px #ffffff1a}.modal-header{border-bottom:1px solid hsl(var(--border-subtle,220 13% 24%) / .6);justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-eyebrow{letter-spacing:.08em;color:hsl(var(--accent-primary,210 100% 65%));margin-bottom:.125rem;font-size:.625rem;font-weight:800;display:block}.modal-title{color:hsl(var(--text-primary,210 40% 98%));margin:0;font-size:1.125rem;font-weight:700}.modal-close-btn{color:hsl(var(--text-muted,215 16% 55%));cursor:pointer;background:0 0;border:none;border-radius:.375rem;padding:.375rem}.modal-close-btn:hover{color:hsl(var(--text-primary,210 40% 98%))}.modal-canvas-preview-wrap{background:hsl(var(--bg-canvas,222 47% 7%));justify-content:center;padding:1rem 1.5rem;display:flex}.artifact-preview-canvas{aspect-ratio:16/9;border:1px solid hsl(var(--border-subtle,220 13% 26%));border-radius:.5rem;width:100%;height:auto;box-shadow:0 8px 24px -4px #0006}.modal-actions-toolbar{background:hsl(var(--bg-surface-1,220 13% 14%));border-top:1px solid hsl(var(--border-subtle,220 13% 24%) / .6);align-items:center;gap:.75rem;padding:1rem 1.5rem;display:flex}.btn-action{cursor:pointer;border-radius:.5rem;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.8125rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-download{background:hsl(var(--accent-primary,210 100% 55%));color:#fff;box-shadow:0 2px 8px hsl(var(--accent-primary,210 100% 55%) / .3);border:none}.btn-download:hover{filter:brightness(1.1)}.btn-copy-link,.btn-webshare{background:hsl(var(--bg-surface-2,220 13% 24%) / .8);color:hsl(var(--text-primary,210 40% 98%));border:1px solid hsl(var(--border-subtle,220 13% 32%))}.btn-copy-link:hover,.btn-webshare:hover{background:hsl(var(--bg-surface-2,220 13% 30%))}