*,:before,:after{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:before,:after{text-decoration:inherit;vertical-align:inherit}:where(:root){cursor:default;overflow-wrap:break-word;word-break:break-word;-moz-tab-size:4;tab-size:4}:where(html){-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;line-height:1.5;overflow-y:scroll}:where(body){min-height:100vh;line-height:inherit;margin:0;display:block}:where(h1){text-wrap:balance;margin-block:.67em;font-size:2em}:where(nav li):before{content:"​";float:left}:where(dl,ol,ul) :where(dl,ol,ul){margin-block:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace;font-size:1em;overflow:auto}:where(small){font-size:80%}:where(audio,canvas,iframe,img,picture,svg,video,figure){vertical-align:middle;aspect-ratio:auto;max-width:100%;height:auto;display:block}:where(svg:not([fill])){fill:currentColor}:where(table){border-collapse:collapse;text-indent:0;border-color:currentColor}:where(button,input,select){margin:0}:where(button,select){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(textarea){resize:vertical;margin:0}textarea:not([rows]){min-height:10em}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted buttontext}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){color:#000;background-color:#fff;border:solid;width:fit-content;height:fit-content;margin:auto;padding:1em;position:absolute;left:0;right:0}:where(dialog:not([open])){display:none}:where(summary){display:list-item}:target{scroll-margin-block:5ex}@font-face{font-family:Dinish;src:url(/fonts/DINish.woff2)format("woff2");font-display:swap}@font-face{font-family:Dinish fallback;src:local(Arial);size-adjust:92.6616%;ascent-override:110.66%;descent-override:26.1368%;line-gap-override:0%}@font-face{font-family:Dinish fallback;src:local(Roboto);size-adjust:92.865%;ascent-override:110.417%;descent-override:26.0795%;line-gap-override:0%}@font-face{font-family:Maple Mono;src:url(/fonts/MapleMono.woff2)format("woff2");font-display:swap}:root{color-scheme:light dark;--font:"Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;--font-header:"Rubik", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;--font-num:"Dinish", "Dinish fallback";--font-mono:"Maple Mono", ui-monospace, monospace;--font-weight:400;--font-weight-num:500;--font-weight-title:480;--font-weight-strong:580;--font-size-footnote:var(--px-11);--font-size-label:var(--px-13);--font-size-body:var(--px-14);--font-size-title:var(--px-15);--font-size-h4:var(--px-16);--font-size-h3:var(--px-18);--font-size-h2:var(--px-20);--font-size-h1:var(--px-28);--line-height-content:calc(1.1em + .75rem);--line-height-control:1.35;--px-2:.125rem;--px-4:clamp(.209rem, .197rem + .062vw, .272rem);--px-6:clamp(.294rem, .269rem + .125vw, .419rem);--px-8:clamp(.419rem, .394rem + .125vw, .544rem);--px-10:clamp(.523rem, .492rem + .156vw, .68rem);--px-11:clamp(.576rem, .541rem + .172vw, .748rem);--px-12:clamp(.628rem, .591rem + .188vw, .816rem);--px-13:clamp(.68rem, .64rem + .203vw, .884rem);--px-14:clamp(.733rem, .689rem + .219vw, .952rem);--px-15:clamp(.785rem, .738rem + .234vw, 1.02rem);--px-16:clamp(.838rem, .787rem + .25vw, 1.087rem);--px-18:clamp(1rem, .963rem + .188vw, 1.188rem);--px-20:clamp(1.095rem, 1.049rem + .232vw, 1.328rem);--px-22:clamp(1.2rem, 1.143rem + .284vw, 1.484rem);--px-24:clamp(1.315rem, 1.246rem + .345vw, 1.66rem);--px-28:clamp(1.44rem, 1.357rem + .415vw, 1.855rem);--px-30:clamp(1.577rem, 1.478rem + .497vw, 2.074rem);--px-32:clamp(1.728rem, 1.61rem + .591vw, 2.319rem);--px-36:clamp(1.893rem, 1.753rem + .7vw, 2.593rem);--px-40:clamp(2.074rem, 1.908rem + .826vw, 2.899rem);--px-48:clamp(2.272rem, 2.078rem + .97vw, 3.241rem);--px-52:clamp(2.488rem, 2.261rem + 1.136vw, 3.624rem);--px-56:clamp(2.726rem, 2.461rem + 1.326vw, 4.052rem);--px-64:clamp(2.986rem, 2.677rem + 1.544vw, 4.53rem);--px-72:clamp(3.271rem, 2.912rem + 1.794vw, 5.065rem);--px-80:clamp(3.583rem, 3.167rem + 2.079vw, 5.662rem);--px-88:clamp(3.925rem, 3.444rem + 2.406vw, 6.331rem);--px-96:clamp(4.3rem, 3.744rem + 2.778vw, 7.078rem);--px-112:clamp(4.71rem, 4.07rem + 3.203vw, 7.914rem);--page-max-narrow:60rem;--page-max-medium:80rem;--page-max-wide:100rem;--viewport-inset:clamp(.75rem, .1rem + 3.25vw, 4rem);--control-size:var(--px-32);--control-size-primary:var(--px-40);--control-size-selection:var(--px-24);--icon-size:var(--px-20);--icon-size-inline:var(--px-16);--icon-stroke:1.5;--icon-stroke-inline:1.25;--opacity-disabled:.4;--radius-area:var(--px-14);--radius-surface:var(--px-10);--radius-element:var(--px-6);--radius-detail:var(--px-2);--radius-circle:9999rem;--border-width:.07rem;--border-width-thick:.12rem;--border:var(--border-width) solid var(--border-base);--shadow-raised:0 4px 2px #00000003, 0 2px 1px #0000000d, 0 1px 1px #00000014, 0 0 1px #00000017;--shadow-overlay:0 56px 23px #00000003, 0 32px 19px #0000000d, 0 14px 14px #00000014, 0 4px 8px #00000017;--motion-fast:.14s ease;--motion-base:.19s cubic-bezier(.2, 0, 0, 1);--motion-slow:.28s cubic-bezier(.2, 0, 0, 1);--motion-press-scale:.97;--blur-subtle:blur(2px) saturate(150%);--blur:blur(16px) saturate(150%);--pattern-grid-size:2.75rem;--pattern-grid:linear-gradient(to right, color-mix(in srgb, var(--border-accent) 3.5%, transparent) 0 var(--border-width), transparent var(--border-width) 100%) 0 0 / var(--pattern-grid-size) var(--pattern-grid-size), linear-gradient(to bottom, color-mix(in srgb, var(--border-accent) 3.5%, transparent) 0 var(--border-width), transparent var(--border-width) 100%) 0 0 / var(--pattern-grid-size) var(--pattern-grid-size);--pattern-dots-size:1.125rem;--pattern-dots:radial-gradient(circle, color-mix(in srgb, var(--border-accent) 4.5%, transparent) 0 var(--border-width), transparent var(--border-width) 100%) 0 0 / var(--pattern-dots-size) var(--pattern-dots-size);--surface:center/1000px url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E %3Cfilter id='noise'%3E %3CfeTurbulence type='turbulence' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch' /%3E %3C/filter%3E %3Crect width='100%25' height='100%25' opacity='.05' filter='url(%23noise)' /%3E %3C/svg%3E"), linear-gradient(120deg, var(--bg-flat), var(--bg-flat));--gray:center/1000px url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E %3Cfilter id='noise'%3E %3CfeTurbulence type='turbulence' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch' /%3E %3C/filter%3E %3Crect width='100%25' height='100%25' opacity='.15' filter='url(%23noise)' /%3E %3C/svg%3E"), linear-gradient(120deg, var(--bg-muted), var(--bg-background));--alert:light-dark(#cb0234,#ffc53d);--highlight:light-dark(#7f46ff,#cac2ff);--info:light-dark(#0d669f,#76c0fe);--success:light-dark(#569631,#8cce6a);--bg-background:light-dark(#f2f3f5,#1e1f20);--bg-flat:light-dark(#fcfdff,#272729);--bg-glass:light-dark(#fcfdffbf,#353638bf);--bg-hero:light-dark(#002138,#f3f9ff);--bg-hero-hover:light-dark(#002a46,#fcfdfe);--bg-hero-pressed:light-dark(#000f1e,#e7f3ff);--bg-inverse:light-dark(#141416,#fafcfe);--bg-mark:light-dark(#f3f9ff,#002138);--bg-mask:light-dark(#606163bf,#040405bf);--bg-muted:light-dark(#e8e9eb,#040405);--bg-paper:light-dark(#fff9ef,#140c00);--bg-shape:light-dark(#fff,#353638);--bg-shape-hover:light-dark(#f9fafc,#3c3d3e);--bg-shape-pressed:light-dark(#f5f7f9,#272729);--bg-sublayer:light-dark(#edeef0,#141416);--border-accent:light-dark(#01395e,#d1e9ff);--border-base:light-dark(#e8e9eb,#4e4f50);--label-hero:light-dark(#002138,#f3f9ff);--label-hero-active:light-dark(#00040c,#eaf5ff);--label-hero-hover:light-dark(#003253,#fcfdfe);--label-muted:light-dark(#65666859,#eaebed59);--label-on-hero:light-dark(#fcfdff,#0d0e0f);--label-on-inverse:light-dark(#e1e2e4,#3c3d3e);--label-on-mark:light-dark(#0d669f,#afdaff);--label-regular:light-dark(#3c3d3e,#e1e2e4);--label-subtle:light-dark(#656668bf,#eaebedbf)}:root[data-type-scale=presentation]{--font-size-footnote:var(--px-12);--font-size-label:var(--px-14);--font-size-body:var(--px-16);--font-size-title:var(--px-20);--font-size-h4:var(--px-30);--font-size-h3:var(--px-36);--font-size-h2:var(--px-48);--font-size-h1:var(--px-52)}:root[data-color-scheme=light]{color-scheme:light}:root[data-color-scheme=dark]{color-scheme:dark;--font-weight:430;--font-weight-title:510;--font-weight-strong:610}@media (prefers-color-scheme:dark){:root:not([data-color-scheme=light]){--font-weight:430;--font-weight-title:510;--font-weight-strong:610}}:where(html){scrollbar-color:var(--label-subtle) transparent;scrollbar-width:thin}:where(body){background:var(--surface);color:var(--label-regular);font-family:var(--font);font-size:var(--font-size-body);font-weight:var(--font-weight);font-variation-settings:"wght" var(--font-weight);line-height:var(--line-height-content);text-autospace:normal}:where(h1,h2,h3,h4,h5,h6){font-family:var(--font-header);font-weight:var(--font-weight-title);font-variant-numeric:lining-nums;font-variation-settings:"wght" var(--font-weight-title);line-height:var(--line-height-content);text-wrap:balance}:where(h1){font-size:var(--font-size-h1)}:where(h2){font-size:var(--font-size-h2)}:where(h3){font-size:var(--font-size-h3)}:where(h4){font-size:var(--font-size-h4)}:where(h5){font-size:var(--font-size-title)}:where(h6){font-size:var(--font-size-label)}.prose :where(h1,h2,h3,h4,h5,h6){margin-block:.8lh .4lh}.prose :where(ul,ol){padding-inline-start:1.5em}:where(p,li,blockquote,figcaption,dd){text-wrap:pretty}:where(button,input,select,textarea){color:inherit;font:inherit}:where(.mono,code,kbd,pre,samp){font-family:var(--font-mono);font-feature-settings:"cv02" on;text-autospace:no-autospace;font-size:92%}:where(pre) :where(code,samp){font-size:inherit}:where(strong,b){font-weight:var(--font-weight-strong);font-variation-settings:"wght" var(--font-weight-strong)}:where(em,i){font-style:italic}:where(.numeric){font-family:var(--font-num);font-weight:var(--font-weight-num);font-variant-numeric:tabular-nums lining-nums;font-variation-settings:"wght" var(--font-weight-num)}:where(.subtle){color:var(--label-subtle)}:where(.muted){color:var(--label-muted)}:where(.separator){color:var(--label-muted);margin-inline:var(--px-2);user-select:none}:where(.no-break){white-space:nowrap}:where(hr){border:0;border-block-start:var(--border)}:where(a){color:var(--label-regular);text-decoration:underline;text-decoration-color:var(--border-accent);text-decoration-thickness:var(--border-width);text-underline-offset:.18em;transition:color var(--motion-fast), text-decoration-color var(--motion-fast)}:where(a.link-emphasis){color:var(--label-hero);text-decoration-color:currentColor}:where(a:hover){color:var(--label-hero-hover);text-decoration-color:var(--label-hero-hover)}:where(a:active){color:var(--label-hero-active);text-decoration-color:var(--label-hero-active)}:where(:focus:not(:focus-visible)){outline:none}:where(:focus-visible){border-radius:var(--radius-detail);outline:var(--border-width-thick) solid var(--border-accent);outline-offset:var(--px-4)}:where(a:focus-visible){border-radius:var(--radius-detail)}::selection{background:var(--bg-inverse);color:var(--label-on-inverse)}::target-text{background:var(--bg-mark);color:var(--label-on-mark)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:root{--app-header-height:var(--px-56)}body{background:var(--gray);min-width:20rem}button,select,input,textarea{border:0}svg{stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;fill:none}[hidden]{display:none!important}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-header{z-index:20;background:var(--bg-glass);border-block-end:var(--border);backdrop-filter:var(--blur);position:sticky;top:0}.header-inner{width:100%;max-width:var(--page-max-wide);min-height:var(--app-header-height);padding-inline:var(--viewport-inset);justify-content:space-between;align-items:center;gap:var(--px-16);margin-inline:auto;display:flex}.brand{color:var(--label-regular);font-family:var(--font-header);font-size:var(--font-size-title);font-weight:var(--font-weight-title);font-variation-settings:"wght" var(--font-weight-title);align-items:center;gap:var(--px-8);text-decoration:none;display:inline-flex}.brand-mark{width:var(--icon-size);height:var(--icon-size);stroke:none;flex:none}.brand-mark-bg{fill:var(--bg-hero)}.brand-mark-letter{fill:var(--label-on-hero)}.brand-mark-accent{fill:light-dark(#76c0fe,#0d669f)}.header-controls,.button-row,.source-actions{align-items:center;gap:var(--px-8);display:flex}.local-badge{align-items:center;gap:var(--px-6);color:var(--label-subtle);font-size:var(--font-size-footnote);display:inline-flex}.local-badge svg,.privacy-note svg{width:var(--icon-size-inline);height:var(--icon-size-inline);color:var(--success);stroke-width:var(--icon-stroke-inline);flex:none}.compact-select select{height:var(--control-size);padding-inline:var(--px-10) var(--px-24);border:var(--border);border-radius:var(--radius-element);background:var(--bg-shape);color:var(--label-regular);font-size:var(--font-size-label)}.page-shell{width:100%;max-width:var(--page-max-wide);padding:var(--px-40) var(--viewport-inset) var(--px-64);margin-inline:auto}.page-intro{justify-content:space-between;align-items:end;gap:var(--px-24);margin-block-end:var(--px-28);display:flex}.eyebrow{margin:0 0 var(--px-4);color:var(--label-hero);font-size:var(--font-size-footnote);letter-spacing:.06em}.page-intro h1{margin:0}.intro-copy{margin:var(--px-4) 0 0;color:var(--label-subtle)}.privacy-note{margin:0 0 var(--px-4);align-items:center;gap:var(--px-6);color:var(--label-subtle);font-size:var(--font-size-footnote);display:flex}.workspace{gap:var(--px-16);grid-template-columns:minmax(22rem,.92fr) minmax(28rem,1.28fr);align-items:start;display:grid}.work-panel,.output-section{background:var(--surface);border:var(--border);border-radius:var(--radius-area)}.preview-panel{min-height:43rem;box-shadow:var(--shadow-raised)}.panel-heading,.output-heading,.section-heading,.setting-heading{justify-content:space-between;align-items:center;gap:var(--px-16);display:flex}.panel-heading{min-height:var(--px-64);padding:var(--px-16) var(--px-20);border-block-end:var(--border)}.panel-heading h2,.panel-heading p,.output-heading h2,.output-heading p,.section-heading h3,.setting-heading h4,.setting-heading p{margin:0}.panel-heading p,.output-heading p,.setting-heading p{font-size:var(--font-size-footnote)}.file-name{text-overflow:ellipsis;white-space:nowrap;max-width:12rem;color:var(--label-subtle);font-size:var(--font-size-footnote);overflow:hidden}.button{min-height:var(--control-size);padding-inline:var(--px-12);border-radius:var(--radius-element);justify-content:center;align-items:center;gap:var(--px-6);color:var(--label-regular);font-size:var(--font-size-label);font-weight:var(--font-weight-title);font-variation-settings:"wght" var(--font-weight-title);line-height:var(--line-height-control);cursor:pointer;white-space:nowrap;transition:background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);display:inline-flex}.button svg{width:var(--icon-size);height:var(--icon-size)}.button:active{transform:scale(var(--motion-press-scale))}.button.primary{min-height:var(--control-size-primary);background:var(--bg-hero);color:var(--label-on-hero)}.button.primary:hover{background:var(--bg-hero-hover)}.button.secondary{background:var(--bg-shape);border:var(--border)}.button.secondary:hover,.button.quiet:hover{background:var(--bg-shape-hover)}.button.quiet{background:0 0}.drop-zone{margin:var(--px-20);min-height:22rem;padding:var(--px-32);background:var(--pattern-dots), var(--bg-sublayer);border:var(--border-width) dashed var(--border-base);border-radius:var(--radius-surface);text-align:center;transition:background var(--motion-fast), border-color var(--motion-fast);flex-direction:column;justify-content:center;align-items:center;display:flex}.drop-zone.is-dragging{background:var(--bg-shape-hover);border-color:var(--border-accent)}.drop-zone h3,.drop-zone p{margin:0}.drop-zone p{margin-block:var(--px-4) var(--px-20)}.drop-icon{width:var(--px-40);height:var(--px-40);color:var(--label-hero);margin-block-end:var(--px-16)}#editor-area{padding:var(--px-20)}.field-label{justify-content:space-between;align-items:baseline;gap:var(--px-12);font-size:var(--font-size-label);font-weight:var(--font-weight-title);margin-block-end:var(--px-8);display:flex}.field-label .subtle{font-size:var(--font-size-footnote);font-weight:var(--font-weight)}.code-editor{width:100%;min-height:19rem;padding:var(--px-14);resize:vertical;border:var(--border);border-radius:var(--radius-element);background:var(--bg-inverse);color:var(--label-on-inverse);font-size:var(--font-size-footnote);tab-size:2;line-height:1.65}.code-editor:focus{border-color:var(--border-accent)}.message-stack{gap:var(--px-6);margin-block-start:var(--px-10);display:grid}.message{padding:var(--px-8) var(--px-10);border-inline-start:var(--border-width-thick) solid currentColor;border-radius:var(--radius-detail);background:var(--bg-shape);font-size:var(--font-size-footnote);margin:0}.message.warning{color:var(--alert)}.message.error{color:var(--alert);font-weight:var(--font-weight-strong)}.settings{border-block-start:var(--border);margin-block-start:var(--px-24);padding-block-start:var(--px-20)}.settings>.section-heading{margin-block-end:var(--px-14)}.setting-group,.setting-row{padding:var(--px-14);border:var(--border);background:var(--bg-shape)}.setting-group{border-radius:var(--radius-surface) var(--radius-surface) 0 0}.setting-row{justify-content:space-between;align-items:center;gap:var(--px-16);margin-block-start:calc(-1 * var(--border-width));display:flex}.setting-row:last-child{border-radius:0 0 var(--radius-surface) var(--radius-surface)}.setting-heading{align-items:start}.switch-label{min-height:var(--control-size);align-items:center;gap:var(--px-10);cursor:pointer;display:flex}.setting-heading .switch-label{max-width:15rem}.switch-label>span:first-child,.setting-copy{gap:var(--px-2);display:grid}.switch-label small,.setting-copy small{font-size:var(--font-size-footnote);font-weight:var(--font-weight);line-height:1.45}.switch-label input{opacity:0;pointer-events:none;position:absolute}.switch{width:var(--px-40);height:var(--control-size-selection);padding:var(--px-4);border:var(--border);border-radius:var(--radius-circle);background:var(--bg-sublayer);transition:background var(--motion-fast);flex:none}.switch:after{content:"";width:calc(var(--control-size-selection) - (2 * var(--px-4)) - (2 * var(--border-width)));aspect-ratio:1;border-radius:var(--radius-circle);background:var(--label-subtle);transition:transform var(--motion-fast), background var(--motion-fast);display:block}.switch-label input:checked+.switch{background:var(--bg-hero);border-color:var(--bg-hero)}.switch-label input:checked+.switch:after{background:var(--label-on-hero);transform:translateX(calc(var(--px-16) - var(--px-2)))}.switch-label input:focus-visible+.switch{outline:var(--border-width-thick) solid var(--border-accent);outline-offset:var(--px-4)}.color-list{gap:var(--px-6);margin-block-start:var(--px-14);display:grid}.color-item{min-height:var(--control-size-primary);padding:var(--px-6) var(--px-8);border-radius:var(--radius-element);background:var(--bg-sublayer);align-items:center;gap:var(--px-10);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.color-item.is-extra{display:none}.color-list.is-expanded .color-item.is-extra{display:grid}.color-swatch{width:var(--px-24);height:var(--px-24);border:var(--border);border-radius:var(--radius-element);background:var(--swatch-color);box-shadow:inset 0 0 0 var(--border-width) #ffffff4d}.color-meta{align-items:baseline;gap:var(--px-8);min-width:0;display:flex}.color-meta code{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.color-meta small{color:var(--label-subtle);white-space:nowrap}.dark-color-control,.color-control{align-items:center;gap:var(--px-6);display:flex}.dark-color-control[hidden]{display:none}input[type=color]{width:var(--control-size);height:var(--control-size);padding:var(--px-4);border:var(--border);border-radius:var(--radius-element);background:var(--bg-shape);cursor:pointer}.color-text{width:7.5rem;height:var(--control-size);padding-inline:var(--px-8);border:var(--border);border-radius:var(--radius-element);background:var(--bg-shape);font-size:var(--font-size-footnote)}.color-text[aria-invalid=true]{border-color:var(--alert)}.more-button{margin-block-start:var(--px-8)}.more-button svg{transition:transform var(--motion-fast)}.more-button[aria-expanded=true] svg{transform:rotate(180deg)}.range-control{align-items:center;gap:var(--px-10);grid-template-columns:1fr auto;min-width:12rem;display:grid}input[type=range]{accent-color:var(--bg-hero)}.range-control output{text-align:end;min-width:3rem}.status-indicator{align-items:center;gap:var(--px-6);color:var(--label-subtle);font-size:var(--font-size-footnote);display:inline-flex}.status-dot{width:var(--px-8);height:var(--px-8);border:var(--border-width) solid var(--label-hero);border-radius:var(--radius-circle);border-block-start-color:#0000;animation:.8s linear infinite spin}.status-indicator.is-ready .status-dot{border-color:var(--success);background:var(--success);animation:none}@keyframes spin{to{transform:rotate(1turn)}}.preview-empty{min-height:36rem;padding:var(--px-32);justify-content:center;align-items:center;gap:var(--px-20);text-align:center;flex-direction:column;display:flex}.empty-grid{aspect-ratio:1;width:9rem;padding:var(--px-10);background:var(--pattern-grid), var(--bg-sublayer);border:var(--border);border-radius:var(--radius-surface);gap:var(--px-6);grid-template-columns:1fr 1fr;display:grid;transform:rotate(-3deg)}.empty-grid span{border:var(--border);border-radius:var(--radius-element);background:var(--bg-shape)}.preview-content{padding:var(--px-20);gap:var(--px-14);grid-template-columns:1fr 1fr;display:grid}.preview-section{padding:var(--px-14);border:var(--border);border-radius:var(--radius-surface);background:var(--bg-shape)}.preview-section:first-child,.preview-section:last-of-type,.generated-source{grid-column:1/-1}.preview-section h3{margin:0 0 var(--px-10);font-size:var(--font-size-h4)}.browser-previews,.platform-previews,.mask-previews{gap:var(--px-10);display:grid}.browser-previews{grid-template-columns:1fr 1fr}figure{margin:0}figcaption{color:var(--label-subtle);font-size:var(--font-size-footnote);text-align:center;margin-block-start:var(--px-6)}.browser-mock{padding:var(--px-8);border-radius:var(--radius-element)}.browser-mock figcaption{margin:0 0 var(--px-6);text-align:start}.browser-light{color:#3c3d3e;background:#e8e9eb}.browser-dark{color:#e1e2e4;background:#1e1f20}.browser-tab{min-height:2.25rem;padding:var(--px-6) var(--px-8);border-radius:var(--radius-element) var(--radius-element) 0 0;align-items:center;gap:var(--px-8);background:color-mix(in srgb, currentColor 8%, transparent);font-size:var(--font-size-footnote);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.browser-tab img{width:1rem;height:1rem}.browser-tab>span:not(.tab-close){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tab-close{opacity:.6}.checkerboard{background-color:var(--bg-shape);background-image:linear-gradient(45deg, var(--bg-sublayer) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-sublayer) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-sublayer) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-sublayer) 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px}.pixel-previews{min-height:8rem;padding:var(--px-14);border-radius:var(--radius-element);justify-content:center;align-items:end;gap:var(--px-32);display:flex}.pixel-frame{place-items:center;display:grid}.pixel-frame.size-16 img{width:16px;height:16px}.pixel-frame.size-32 img{width:32px;height:32px}.pixel-frame img{image-rendering:pixelated}.platform-previews{grid-template-columns:1fr 1fr}.platform-icon{aspect-ratio:1;border:var(--border);border-radius:1.6rem;width:min(100%,7.5rem);margin-inline:auto;overflow:hidden}.platform-icon img{object-fit:cover;width:100%;height:100%;display:block}.android-icon{border-radius:var(--radius-surface)}.inline-heading{margin-block-end:var(--px-10)}.inline-heading h3{margin:0}.safe-key{align-items:center;gap:var(--px-4);color:var(--label-subtle);font-size:var(--font-size-footnote);display:inline-flex}.safe-key i{width:var(--px-12);height:var(--px-12);border:var(--border-width) dashed var(--border-accent);border-radius:var(--radius-circle)}.mask-previews{grid-template-columns:repeat(3,1fr)}.mask-frame{aspect-ratio:1;position:relative;overflow:hidden}.mask-frame img{width:100%;height:100%}.mask-circle{border-radius:var(--radius-circle)}.mask-rounded{border-radius:22%}.mask-squircle{border-radius:35%}.safe-circle{border:var(--border-width) dashed var(--border-accent);border-radius:var(--radius-circle);pointer-events:none;position:absolute;inset:10%}.generated-source{border:var(--border);border-radius:var(--radius-surface);background:var(--bg-shape)}.generated-source summary{padding:var(--px-12) var(--px-14);cursor:pointer;font-weight:var(--font-weight-title)}.generated-source pre{max-height:18rem;padding:var(--px-14);border-block-start:var(--border);background:var(--bg-inverse);color:var(--label-on-inverse);font-size:var(--font-size-footnote);white-space:pre-wrap;margin:0}.output-section{margin-block-start:var(--px-20);overflow:hidden}.output-heading{padding:var(--px-20);border-block-end:var(--border)}.download-zip{white-space:nowrap}.artifact-table-wrap{overflow-x:auto}.artifact-table{width:100%;min-width:48rem;font-size:var(--font-size-label)}.artifact-table th,.artifact-table td{padding:var(--px-10) var(--px-14);border-block-end:var(--border);text-align:start}.artifact-table th{color:var(--label-subtle);font-weight:var(--font-weight-title);line-height:var(--line-height-control)}.artifact-table td:first-child{font-family:var(--font-mono)}.artifact-table td:last-child,.artifact-table th:last-child{text-align:end}.artifact-table .button{min-height:auto;padding:var(--px-4) var(--px-8)}.code-grid{padding:var(--px-20);gap:var(--px-14);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);display:grid}.code-card{border:var(--border);border-radius:var(--radius-surface);background:var(--bg-shape);min-width:0;overflow:hidden}.code-card header{min-height:var(--px-48);padding:var(--px-8) var(--px-12);justify-content:space-between;align-items:center;gap:var(--px-8);display:flex}.code-card h3{font-size:var(--font-size-h4);margin:0}.code-card pre{min-height:11rem;max-height:19rem;padding:var(--px-14);background:var(--bg-inverse);color:var(--label-on-inverse);font-size:var(--font-size-footnote);white-space:pre-wrap;margin:0}.app-footer{border-block-start:var(--border);background:var(--surface)}.app-footer>div{width:100%;max-width:var(--page-max-wide);padding:var(--px-20) var(--viewport-inset);font-size:var(--font-size-footnote);margin-inline:auto}@media (width<=64rem){.workspace{grid-template-columns:1fr}.preview-panel{min-height:auto}}@media (width<=44rem){.app-header{position:static}.header-inner,.page-intro,.panel-heading,.output-heading,.setting-heading,.setting-row{flex-direction:column;align-items:stretch}.header-inner{padding-block:var(--px-10)}.header-controls{flex-wrap:wrap}.local-badge{width:100%}.page-shell{padding-block-start:var(--px-24)}.privacy-note{align-items:start}.source-actions{justify-content:space-between}.file-name{margin-inline-end:auto}.drop-zone{min-height:18rem;margin:var(--px-12);padding:var(--px-20)}.button-row,.button-row .button{width:100%}.field-label{flex-direction:column;align-items:start}.setting-heading .switch-label{justify-content:space-between;max-width:none}.setting-row{display:flex}.range-control,.color-control{width:100%}.color-text{flex:1}.color-item{grid-template-columns:auto minmax(0,1fr)}.dark-color-control{grid-column:1/-1}.dark-color-control .color-text{width:100%}.preview-content,.code-grid{grid-template-columns:1fr}.preview-section,.preview-section:first-child,.preview-section:last-of-type,.generated-source{grid-column:auto}.browser-previews{grid-template-columns:1fr}.output-heading .button{width:100%}.app-footer .separator,.app-footer .subtle{display:none}}@media (prefers-reduced-motion:reduce){.status-dot{border-color:var(--label-hero);background:var(--label-hero);animation:none}}