.grain-demo[data-v-dd3a13fc]{--surface:#fff;--ink:#292524;--muted:#78716c;--border:#e7e5e4;--accent:#d97757;color:var(--ink);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;margin-block:24px}.dark .grain-demo[data-v-dd3a13fc]{--surface:#20201e;--ink:#f5f5f4;--muted:#a8a29e;--border:#3c3b38;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.cover-stage[data-v-dd3a13fc]{aspect-ratio:1;border-radius:24px;width:100%;max-width:480px;margin-inline:auto;overflow:hidden}.cover-stage canvas[data-v-dd3a13fc]{width:100%;height:100%;display:block}.demo-controls[data-v-dd3a13fc]{border:1px solid var(--border);background:var(--surface);border-radius:16px;gap:16px;margin-top:16px;padding:20px;display:grid}.control-label[data-v-dd3a13fc]{color:var(--muted);margin-bottom:8px;font-size:12px;font-weight:500;display:block}.demo-actions[data-v-dd3a13fc],.segments[data-v-dd3a13fc],.swatches[data-v-dd3a13fc]{flex-wrap:wrap;gap:8px;display:flex}.swatch[data-v-dd3a13fc]{cursor:pointer;border-radius:50%;width:28px;height:28px;transition:box-shadow .15s}.swatch[aria-pressed=true][data-v-dd3a13fc]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}.demo-actions button[data-v-dd3a13fc],.segments button[data-v-dd3a13fc]{border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:7px 12px;font-size:13px;transition:background-color .15s,border-color .15s}.demo-actions button[data-v-dd3a13fc]:hover,.segments button[data-v-dd3a13fc]:hover{border-color:var(--muted)}.segments button[aria-pressed=true][data-v-dd3a13fc]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.demo-actions .primary[data-v-dd3a13fc]{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:500}.demo-actions .primary[data-v-dd3a13fc]:hover{background:#cc5a36;border-color:#cc5a36}.demo-controls input[type=text][data-v-dd3a13fc]{border:1px solid var(--border);background:0 0;border-radius:8px;width:100%;min-width:0;padding:7px 12px;font-size:14px}.demo-controls button[data-v-dd3a13fc]:focus-visible,.demo-controls input[data-v-dd3a13fc]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
