:root{--bg:#f8f9fa;--stage:#eff0f2;--surface:#fff;--text:#16181e;--muted:#61656d;--faint:#6c7079;--line:#e1e3e6;--field:#fff;--chip:#f6f7f9;--chip-on:#16181e;--chip-on-text:#fcfcfc;--danger:#be222a;--ring:#2971c6;--radius:12px;--shadow-card:0 1px 1px #0000000a, 0 4px 12px #0000000f, 0 18px 40px #00000012;--shadow-chip:0 1px 0 #0000000a, 0 0 0 1px #0000000f;--shadow-btn:0 1px 2px #00000029, 0 0 0 1px #000000e6 inset;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@supports (color:lab(0% 0 0)){:root{--bg:lab(97.9036% -.0500977 -.758076);--stage:lab(94.7673% -.0742078 -1.13649);--surface:lab(100% 0 0);--text:lab(8.29785% -.0998601 -4.44778);--muted:lab(42.5148% -.243157 -5.24681);--faint:lab(47.1553% -.2518 -5.25118);--line:lab(90.1186% -.120282 -1.89209);--field:lab(100% 0 0);--chip:lab(97.0873% -.0742376 -1.13653);--chip-on:lab(8.29785% -.0998601 -4.44778);--chip-on-text:lab(98.84% .0000298023 -.0000119209);--danger:lab(42.3845% 60.2199 38.2468);--ring:lab(46.7768% 1.22333 -51.6542);--shadow-card:0 1px 1px lab(0% 0 0/.04), 0 4px 12px lab(0% 0 0/.06), 0 18px 40px lab(0% 0 0/.07);--shadow-chip:0 1px 0 lab(0% 0 0/.04), 0 0 0 1px lab(0% 0 0/.06);--shadow-btn:0 1px 2px lab(0% 0 0/.16), 0 0 0 1px lab(0% 0 0/.9) inset}}@media (prefers-color-scheme:dark){:root{--bg:#0f1014;--stage:#090a0e;--surface:#17191e;--text:#f4f5f7;--muted:#acb0b7;--faint:#8a8e95;--line:#292b30;--field:#131519;--chip:#1e2025;--chip-on:#f4f5f7;--chip-on-text:#0f1216;--danger:#f97770;--ring:#6aa7f4;--shadow-card:0 1px 1px #0000004d, 0 6px 18px #00000059, 0 24px 60px #0006;--shadow-chip:0 0 0 1px #ffffff14;--shadow-btn:0 1px 2px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@supports (color:lab(0% 0 0)){:root{--bg:lab(4.81269% -.0675693 -2.30771);--stage:lab(2.73365% -.0348985 -1.60412);--surface:lab(8.89584% -.117466 -3.35429);--text:lab(96.5073% -.0742674 -1.13653);--muted:lab(71.5266% -.251204 -4.51977);--faint:lab(58.766% -.241488 -4.51447);--line:lab(17.5976% -.147253 -3.36843);--field:lab(6.65808% -.0933036 -3.20597);--chip:lab(12.3767% -.131615 -3.36086);--chip-on:lab(96.5073% -.0742674 -1.13653);--chip-on-text:lab(5.22914% -.0663251 -3.09153);--danger:lab(65.9538% 50.1356 28.6987);--ring:lab(66.8707% -3.299 -45.34);--shadow-card:0 1px 1px lab(0% 0 0/.3), 0 6px 18px lab(0% 0 0/.35), 0 24px 60px lab(0% 0 0/.4);--shadow-chip:0 0 0 1px lab(100% 0 0/.08);--shadow-btn:0 1px 2px lab(0% 0 0/.4)}}}@media (color-gamut:p3){:root{--ring:#006fd9;--danger:#cb0016}@supports (color:lab(0% 0 0)){:root{--ring:lab(45.863% 10.4826 -71.7922);--danger:lab(41.8129% 76.5239 57.0111)}}@media (prefers-color-scheme:dark){:root{--ring:#5ba6ff;--danger:#ff6d67}@supports (color:lab(0% 0 0)){:root{--ring:lab(66.3762% -.0527501 -62.1397);--danger:lab(65.4235% 66.1969 39.4554)}}}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);min-height:100dvh;color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5}button,input{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}.skip{background:var(--surface);box-shadow:var(--shadow-card);z-index:10;border-radius:8px;padding:8px 14px;position:absolute;top:8px;left:-9999px}.skip:focus{left:12px}.wrap{max-width:1240px;padding:calc(20px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));margin:0 auto}@media (min-width:720px){.wrap{padding:calc(44px + env(safe-area-inset-top,0px)) calc(32px + env(safe-area-inset-right,0px)) 88px calc(32px + env(safe-area-inset-left,0px))}}.masthead{flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:18px;display:flex}.masthead h1{letter-spacing:-.02em;margin:0;font-size:19px;font-weight:600}.masthead p{color:var(--muted);margin:0;font-size:14px}.search{align-items:stretch;gap:8px;max-width:560px;margin-bottom:18px;display:flex}.field{background:var(--field);border-radius:var(--radius);min-width:0;box-shadow:var(--shadow-chip);flex:1;align-items:center;transition-property:box-shadow;transition-duration:.15s;display:flex;position:relative}.field:focus-within{box-shadow:var(--shadow-chip), 0 0 0 3px oklch(from var(--ring) l c h / .22)}.field span{color:var(--faint);-webkit-user-select:none;user-select:none;white-space:nowrap;padding-left:13px}.field input{background:0 0;border:0;outline:none;flex:1;min-width:0;padding:12px 13px 12px 1px;font-size:16px}.field input::placeholder{color:var(--faint)}@media (max-width:400px){.field span{display:none}.field input{padding-left:13px}}.btn{border-radius:var(--radius);background:var(--chip);min-height:44px;box-shadow:var(--shadow-chip);cursor:pointer;white-space:nowrap;border:0;justify-content:center;align-items:center;gap:7px;padding:11px 17px;font-size:14px;font-weight:500;transition-property:scale,background-color,opacity;transition-duration:.13s;transition-timing-function:cubic-bezier(.2,0,0,1);display:inline-flex}.btn:active{scale:.96}.btn[disabled]{opacity:.5;cursor:default}.btn[disabled]:active{scale:1}.btn-primary{background:var(--chip-on);color:var(--chip-on-text);box-shadow:var(--shadow-btn)}.btn svg{stroke-width:1.75px;width:16px;height:16px}.icon-swap{flex:none;width:16px;height:16px;position:relative}.icon-swap>span{place-items:center;transition-property:opacity,scale,filter;transition-duration:.3s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;position:absolute;inset:0}.icon-swap>span[data-on=false]{opacity:0;filter:blur(4px);scale:.25}.icon-swap>span[data-on=true]{opacity:1;filter:blur();scale:1}@media (prefers-reduced-motion:reduce){.icon-swap>span{transition-duration:1ms}}.grid{align-items:start;gap:20px;display:grid}@media (min-width:900px){.grid{grid-template-columns:minmax(0,1fr) 306px;gap:30px}}.stage{background:var(--stage);box-shadow:var(--shadow-chip);border-radius:18px;padding:12px;position:relative;overflow:hidden}@media (min-width:900px){.stage{border-radius:20px;padding:22px}}.stage[data-sample=true] .fitter{opacity:.5}.stage[data-sample=true] .frame{box-shadow:none}.stage-col{min-width:0}.example-note{color:var(--muted);margin:10px 2px 0;font-size:13px}.stage[data-checker=true]:before{content:"";background-image:linear-gradient(45deg,#63636312 25%,#0000 25%),linear-gradient(-45deg,#63636312 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#63636312 75%),linear-gradient(-45deg,#0000 75%,#63636312 75%);background-image:linear-gradient(45deg,lab(42% 0 0/.07) 25%,#0000 25%),linear-gradient(-45deg,lab(42% 0 0/.07) 25%,#0000 25%),linear-gradient(45deg,#0000 75%,lab(42% 0 0/.07) 75%),linear-gradient(-45deg,#0000 75%,lab(42% 0 0/.07) 75%);background-position:0 0,0 9px,9px -9px,-9px 0;background-size:18px 18px;position:absolute;inset:0}.stage>.enter{width:100%;position:relative}.stage[data-busy=true] .fitter{opacity:.45}.fitter{width:100%;aspect-ratio:var(--card-aspect,16 / 9);place-items:center;max-height:clamp(220px,46vh,380px);transition-property:opacity;transition-duration:.16s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid}@media (min-width:900px){.fitter{max-height:clamp(320px,64vh,700px)}}.frame{box-shadow:var(--shadow-card);border-radius:0;transition-property:box-shadow;transition-duration:.18s;transition-timing-function:cubic-bezier(.2,0,0,1);position:relative;overflow:hidden}.frame[data-flat=true]{box-shadow:none}.frame canvas,.frame img{max-width:100%;display:block}.frame .saveable{-webkit-touch-callout:default;width:100%;height:100%;position:absolute;inset:0}.frame .guide{pointer-events:none;position:absolute;inset:0}.error{color:var(--danger);margin:0 2px 14px;font-size:14px}.panel{gap:18px;display:grid}.group{gap:9px;display:grid}.group>h2{letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:0;font-size:11px;font-weight:600}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{background:var(--chip);min-height:40px;box-shadow:var(--shadow-chip);cursor:pointer;border:0;border-radius:10px;padding:8px 14px;font-size:14px;font-weight:450;transition-property:scale,background-color,color;transition-duration:.13s;transition-timing-function:cubic-bezier(.2,0,0,1)}.chip:active{scale:.96}.chip[aria-pressed=true]{background:var(--chip-on);color:var(--chip-on-text)}@media (min-width:900px){.chip{border-radius:9px;min-height:0;padding:6px 11px;font-size:13px}}.swatches{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.swatch{background:var(--chip);box-shadow:var(--shadow-chip);cursor:pointer;text-align:left;border:0;border-radius:11px;gap:4px;padding:8px 8px 7px;transition-property:scale,box-shadow;transition-duration:.13s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;position:relative}.swatch:active{scale:.96}.swatch[aria-pressed=true]{box-shadow:var(--shadow-chip), 0 0 0 2px var(--chip-on)}.swatch-bar{border-radius:7px;gap:2px;padding:4px;display:flex}.swatch-bar i{border-radius:3px;flex:1;height:12px}.swatch span{color:var(--muted);padding-left:2px;font-size:11px}.swatch[aria-pressed=true] span{color:var(--text)}.slider{align-items:center;gap:12px;display:flex}.slider input[type=range]{min-width:0;min-height:44px;accent-color:var(--chip-on);cursor:pointer;flex:1}.slider output{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;min-width:6ch;font-size:13px}.actions{grid-template-columns:1fr auto;gap:8px;display:grid}@media (max-width:380px){.actions{grid-template-columns:1fr}}.note{color:var(--faint);margin:0;font-size:12px;line-height:1.45}@media (max-width:899px){.export{z-index:2;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:oklch(from var(--bg) l c h / .88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--line);margin:0 -16px;position:sticky;bottom:0}}@media (prefers-reduced-motion:no-preference){.enter{animation:.42s cubic-bezier(.2,0,0,1) both lift;animation-delay:calc(var(--i,0) * 80ms)}}@keyframes lift{0%{opacity:0;translate:0 8px;scale:.985}to{opacity:1;translate:0;scale:1}}.spin{animation:.9s linear infinite spin}@keyframes spin{to{rotate:360deg}}@media (prefers-reduced-motion:reduce){.spin{animation:none}}