:root{--bg:var(--slate-1);--panel:var(--slate-2);--text:var(--slate-12);--muted:var(--slate-11);--border:var(--slate-6);--border-strong:var(--slate-8);--accent:var(--indigo-9);--accent-hover:var(--indigo-10);--accent-contrast:white;--focus:var(--indigo-8);--error:var(--red-11);--radius:10px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);min-height:100vh;margin:0;padding:2rem 1rem}#app{background:var(--panel);border:1px solid var(--border);border-radius:16px;max-width:720px;margin-inline:auto;padding:1.75rem;box-shadow:0 1px 2px #0000000f,0 8px 24px #0000000f}h1{letter-spacing:-.02em;margin:0 0 .75rem;font-size:1.6rem}.note{color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);margin:0 0 1.5rem;padding:.6rem .8rem;font-size:.85rem}.drops{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.drop{border:2px dashed var(--border-strong);border-radius:var(--radius);text-align:center;min-height:96px;color:var(--muted);cursor:pointer;justify-content:center;align-items:center;padding:1.25rem;font-size:.95rem;transition:border-color .12s,background .12s,color .12s;display:flex}.drop:hover{border-color:var(--accent);color:var(--text)}.drop.filled{border-style:solid;border-color:var(--accent);color:var(--text)}#preview{flex-direction:column;gap:.75rem;margin:1.5rem 0;display:flex}#imageHost{border-radius:var(--radius);line-height:0;position:relative;overflow:hidden}#preview img{border-radius:var(--radius);max-width:100%}#vizCanvas{touch-action:none;position:absolute}#preview audio{width:100%}.controls{margin:1.5rem 0}.field{color:var(--muted);flex-direction:column;gap:.35rem;max-width:260px;font-size:.85rem;display:flex}select{appearance:none;color:var(--text);background-color:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%237c7f86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right .65rem center;background-repeat:no-repeat;padding:.5rem 2rem .5rem .7rem;font-size:.95rem}.hint{color:var(--muted);margin:.5rem 0 0;font-size:.8rem}button{border-radius:var(--radius);background:var(--accent);color:var(--accent-contrast);cursor:pointer;border:none;padding:.65rem 1.3rem;font-size:1rem;font-weight:500;transition:background .12s}button:hover:not(:disabled){background:var(--accent-hover)}button:disabled{cursor:not-allowed;opacity:.45}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}progress{border:none;border-radius:999px;width:100%;height:8px;margin-top:1rem;overflow:hidden}progress::-webkit-progress-bar{background:var(--border);border-radius:999px}progress::-webkit-progress-value{background:var(--accent);border-radius:999px}progress::-moz-progress-bar{background:var(--accent)}#status{color:var(--muted);margin-top:.75rem;font-size:.9rem}#download{margin-top:.75rem}#download a{color:var(--accent);font-weight:500}.error{color:var(--error);white-space:pre-wrap;font-family:monospace;font-size:.8rem}:root,.light,.light-theme{--slate-1:#fcfcfd;--slate-2:#f9f9fb;--slate-3:#f0f0f3;--slate-4:#e8e8ec;--slate-5:#e0e1e6;--slate-6:#d9d9e0;--slate-7:#cdced6;--slate-8:#b9bbc6;--slate-9:#8b8d98;--slate-10:#80838d;--slate-11:#60646c;--slate-12:#1c2024}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--slate-1:color(display-p3 .988 .988 .992);--slate-2:color(display-p3 .976 .976 .984);--slate-3:color(display-p3 .94 .941 .953);--slate-4:color(display-p3 .908 .909 .925);--slate-5:color(display-p3 .88 .881 .901);--slate-6:color(display-p3 .85 .852 .876);--slate-7:color(display-p3 .805 .808 .838);--slate-8:color(display-p3 .727 .733 .773);--slate-9:color(display-p3 .547 .553 .592);--slate-10:color(display-p3 .503 .512 .549);--slate-11:color(display-p3 .379 .392 .421);--slate-12:color(display-p3 .113 .125 .14)}}}.dark,.dark-theme{--slate-1:#111113;--slate-2:#18191b;--slate-3:#212225;--slate-4:#272a2d;--slate-5:#2e3135;--slate-6:#363a3f;--slate-7:#43484e;--slate-8:#5a6169;--slate-9:#696e77;--slate-10:#777b84;--slate-11:#b0b4ba;--slate-12:#edeef0}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--slate-1:color(display-p3 .067 .067 .074);--slate-2:color(display-p3 .095 .098 .105);--slate-3:color(display-p3 .13 .135 .145);--slate-4:color(display-p3 .156 .163 .176);--slate-5:color(display-p3 .183 .191 .206);--slate-6:color(display-p3 .215 .226 .244);--slate-7:color(display-p3 .265 .28 .302);--slate-8:color(display-p3 .357 .381 .409);--slate-9:color(display-p3 .415 .431 .463);--slate-10:color(display-p3 .469 .483 .514);--slate-11:color(display-p3 .692 .704 .728);--slate-12:color(display-p3 .93 .933 .94)}}}:root,.light,.light-theme{--indigo-1:#fdfdfe;--indigo-2:#f7f9ff;--indigo-3:#edf2fe;--indigo-4:#e1e9ff;--indigo-5:#d2deff;--indigo-6:#c1d0ff;--indigo-7:#abbdf9;--indigo-8:#8da4ef;--indigo-9:#3e63dd;--indigo-10:#3358d4;--indigo-11:#3a5bc7;--indigo-12:#1f2d5c}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--indigo-1:color(display-p3 .992 .992 .996);--indigo-2:color(display-p3 .971 .977 .998);--indigo-3:color(display-p3 .933 .948 .992);--indigo-4:color(display-p3 .885 .914 1);--indigo-5:color(display-p3 .831 .87 1);--indigo-6:color(display-p3 .767 .814 .995);--indigo-7:color(display-p3 .685 .74 .957);--indigo-8:color(display-p3 .569 .639 .916);--indigo-9:color(display-p3 .276 .384 .837);--indigo-10:color(display-p3 .234 .343 .801);--indigo-11:color(display-p3 .256 .354 .755);--indigo-12:color(display-p3 .133 .175 .348)}}}.dark,.dark-theme{--indigo-1:#11131f;--indigo-2:#141726;--indigo-3:#182449;--indigo-4:#1d2e62;--indigo-5:#253974;--indigo-6:#304384;--indigo-7:#3a4f97;--indigo-8:#435db1;--indigo-9:#3e63dd;--indigo-10:#5472e4;--indigo-11:#9eb1ff;--indigo-12:#d6e1ff}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--indigo-1:color(display-p3 .068 .074 .118);--indigo-2:color(display-p3 .081 .089 .144);--indigo-3:color(display-p3 .105 .141 .275);--indigo-4:color(display-p3 .129 .18 .369);--indigo-5:color(display-p3 .163 .22 .439);--indigo-6:color(display-p3 .203 .262 .5);--indigo-7:color(display-p3 .245 .309 .575);--indigo-8:color(display-p3 .285 .362 .674);--indigo-9:color(display-p3 .276 .384 .837);--indigo-10:color(display-p3 .354 .445 .866);--indigo-11:color(display-p3 .63 .69 1);--indigo-12:color(display-p3 .848 .881 .99)}}}:root,.light,.light-theme{--red-1:#fffcfc;--red-2:#fff7f7;--red-3:#feebec;--red-4:#ffdbdc;--red-5:#ffcdce;--red-6:#fdbdbe;--red-7:#f4a9aa;--red-8:#eb8e90;--red-9:#e5484d;--red-10:#dc3e42;--red-11:#ce2c31;--red-12:#641723}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--red-1:color(display-p3 .998 .989 .988);--red-2:color(display-p3 .995 .971 .971);--red-3:color(display-p3 .985 .925 .925);--red-4:color(display-p3 .999 .866 .866);--red-5:color(display-p3 .984 .812 .811);--red-6:color(display-p3 .955 .751 .749);--red-7:color(display-p3 .915 .675 .672);--red-8:color(display-p3 .872 .575 .572);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .798 .294 .285);--red-11:color(display-p3 .744 .234 .222);--red-12:color(display-p3 .36 .115 .143)}}}.dark,.dark-theme{--red-1:#191111;--red-2:#201314;--red-3:#3b1219;--red-4:#500f1c;--red-5:#611623;--red-6:#72232d;--red-7:#8c333a;--red-8:#b54548;--red-9:#e5484d;--red-10:#ec5d5e;--red-11:#ff9592;--red-12:#ffd1d9}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--red-1:color(display-p3 .093 .068 .067);--red-2:color(display-p3 .118 .077 .079);--red-3:color(display-p3 .211 .081 .099);--red-4:color(display-p3 .287 .079 .113);--red-5:color(display-p3 .348 .11 .142);--red-6:color(display-p3 .414 .16 .183);--red-7:color(display-p3 .508 .224 .236);--red-8:color(display-p3 .659 .298 .297);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .861 .403 .387);--red-11:color(display-p3 1 .57 .55);--red-12:color(display-p3 .971 .826 .852)}}}