*{box-sizing:border-box;margin:0;padding:0}:root{--brand-primary:#1a52ee;--blue-step:10.5;--blue-050:hsl(from var(--blue-500) h s calc(l + var(--blue-step) * 4.5));--blue-100:hsl(from var(--blue-500) h s calc(l + var(--blue-step) * 4));--blue-200:hsl(from var(--blue-500) h s calc(l + var(--blue-step) * 3));--blue-300:hsl(from var(--blue-500) h s calc(l + var(--blue-step) * 2));--blue-400:hsl(from var(--blue-500) h s calc(l + var(--blue-step)));--blue-500:var(--brand-primary);--blue-600:hsl(from var(--blue-500) h s calc(l - var(--blue-step)));--blue-700:hsl(from var(--blue-500) h s calc(l - var(--blue-step) * 2));--blue-800:hsl(from var(--blue-500) h s calc(l - var(--blue-step) * 3));--blue-900:hsl(from var(--blue-500) h s calc(l - var(--blue-step) * 4));--blue-950:hsl(from var(--blue-500) h s calc(l - var(--blue-step) * 4.5));--gray:hsl(from var(--brand-primary) h 20% 50%);--gray-step:10.5;--gray-050:hsl(from var(--gray) h s calc(l + var(--gray-step) * 4.5));--gray-100:hsl(from var(--gray) h s calc(l + var(--gray-step) * 4));--gray-150:hsl(from var(--gray) h s calc(l + var(--gray-step) * 3.5));--gray-200:hsl(from var(--gray) h s calc(l + var(--gray-step) * 3));--gray-300:hsl(from var(--gray) h s calc(l + var(--gray-step) * 2));--gray-400:hsl(from var(--gray) h s calc(l + var(--gray-step)));--gray-500:var(--gray);--gray-600:hsl(from var(--gray) h s calc(l - var(--gray-step)));--gray-700:hsl(from var(--gray) h s calc(l - var(--gray-step) * 2));--gray-800:hsl(from var(--gray) h s calc(l - var(--gray-step) * 3));--gray-850:hsl(from var(--gray) h s calc(l - var(--gray-step) * 3.5));--gray-900:hsl(from var(--gray) h s calc(l - var(--gray-step) * 4));--gray-950:hsl(from var(--gray) h s calc(l - var(--gray-step) * 4.5));--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--space-1:4px;--space-2:6px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:28px;--space-8:32px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--font-sm:12px;--font-md:14px;--font-lg:18px;--inline-pair-gap:var(--space-8);--inline-pair-icon-size:var(--space-5);--sidebar-bg:var(--lightningcss-light,#f7f8f9)var(--lightningcss-dark,#000);--sidebar-section-bg:var(--lightningcss-light,#fff)var(--lightningcss-dark,var(--gray-900));--sidebar-section-border:var(--lightningcss-light,#e9ebef)var(--lightningcss-dark,var(--gray-700));--sidebar-section-title:var(--lightningcss-light,#1a1d24)var(--lightningcss-dark,#fff);--sidebar-section-header-icon-hover-bg:var(--lightningcss-light,#0000000f)var(--lightningcss-dark,#ffffff1f);--section-body-bg:var(--lightningcss-light,#fff)var(--lightningcss-dark,var(--gray-850));--text-primary:var(--lightningcss-light,var(--gray-800))var(--lightningcss-dark,var(--gray-100));--text-muted:var(--lightningcss-light,var(--gray-600))var(--lightningcss-dark,var(--gray-400));--field-unit-suffix:var(--lightningcss-light,#aeb4be)var(--lightningcss-dark,var(--gray-400));--ui-icon:var(--lightningcss-light,var(--gray-500))var(--lightningcss-dark,var(--gray-600));--input-bg:var(--lightningcss-light,var(--gray-050))var(--lightningcss-dark,var(--gray-800));--input-border:var(--lightningcss-light,var(--gray-200))var(--lightningcss-dark,var(--gray-700));--select-chevron:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='1,2 6,7 11,2'/%3e%3c/svg%3e");--icon-button-hover-bg:var(--lightningcss-light,#9ca3af1f)var(--lightningcss-dark,#ffffff14);--slider-track:var(--lightningcss-light,#e4e6ec)var(--lightningcss-dark,var(--gray-700));--accent:var(--lightningcss-light,var(--blue-500))var(--lightningcss-dark,var(--blue-400));--accent-hover:var(--lightningcss-light,var(--blue-600))var(--lightningcss-dark,var(--blue-400));--accent-text:var(--lightningcss-light,#fff)var(--lightningcss-dark,#000);--toast-warning-bg:var(--gray-800);--toast-warning-text:var(--blue-100);--toast-warning-border:var(--blue-700);--scrollbar-thumb:var(--lightningcss-light,#0003)var(--lightningcss-dark,#ffffff4d);--scrollbar-thumb-hover:var(--lightningcss-light,#0006)var(--lightningcss-dark,#ffffff80);--preview-bg:var(--lightningcss-light,var(--gray-200))var(--lightningcss-dark,var(--gray-900));--preview-control-bg:var(--lightningcss-light,#fff)var(--lightningcss-dark,var(--gray-800));--preview-control-shadow-1:var(--lightningcss-light,#0000000f)var(--lightningcss-dark,#00000029);--preview-control-shadow-2:var(--lightningcss-light,#0000000a)var(--lightningcss-dark,#0000001a);--preview-control-hover-bg:var(--lightningcss-light,#0000000f)var(--lightningcss-dark,#ffffff14);--preview-control-active-bg:var(--lightningcss-light,#0000001a)var(--lightningcss-dark,#ffffff24);--shadow-elevated:0 1px 2px var(--preview-control-shadow-1), 0 2px 6px var(--preview-control-shadow-2);--outline-stroke:var(--lightningcss-light,var(--gray-950))var(--lightningcss-dark,var(--gray-300))}html.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--select-chevron:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b0b0b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='1,2 6,7 11,2'/%3e%3c/svg%3e")}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;accent-color:var(--accent);font-family:system-ui,-apple-system,Segoe UI,sans-serif}body.pattern-generator-standalone{height:100vh;overflow:hidden}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{min-height:0;display:flex}.app:not(:has(.app-main)){--sidebar-width:396px;grid-template-columns:var(--sidebar-width) 1fr;display:grid}body.pattern-generator-standalone .app{height:100vh}.app-main{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.app-body{flex:1;grid-template-columns:380px 1fr;min-width:0;min-height:0;display:grid}.app-body>.preview{min-width:0;min-height:0}@media (max-width:640px){.app-body{grid-template-columns:1fr;grid-template-rows:var(--sidebar-h,50vh) auto 1fr}.sidebar{border-bottom:none;border-right:none}input,select,textarea{font-size:16px}input[type=checkbox]{appearance:none;box-sizing:border-box;background-color:var(--slider-track);border:1px solid var(--input-border);cursor:pointer;border-radius:13px;flex:none;width:44px;height:26px;margin:0;transition:background-color .2s,border-color .2s;position:relative}input[type=checkbox]:before{content:"";background-color:var(--lightningcss-light,#fff)var(--lightningcss-dark,var(--gray-100));border-radius:50%;width:22px;height:22px;transition:transform .2s;position:absolute;top:1px;left:1px;box-shadow:0 1px 3px #00000040}input[type=checkbox]:checked{background-color:var(--accent);border-color:var(--accent)}input[type=checkbox]:checked:before{transform:translate(18px)}}.sidebar{gap:var(--space-5);background-color:var(--sidebar-bg);border-right:1px solid var(--sidebar-section-border);scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;flex-direction:column;padding:14px;display:flex;position:relative;overflow-y:auto}.sidebar::-webkit-scrollbar{width:10px}.sidebar::-webkit-scrollbar-track{background:0 0}.sidebar::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:var(--radius-lg);background-clip:padding-box;border:2px solid #0000}.sidebar::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover)}.preview{isolation:isolate;padding:90px var(--space-6);background-color:var(--preview-bg);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.preview-boot-loading{z-index:1;font-size:var(--font-md);color:var(--text-muted);pointer-events:none;justify-content:center;align-items:center;margin:0;display:flex;position:absolute;inset:0}.preview-boot-loading[hidden]{display:none}@media (max-width:640px){.preview{padding:var(--space-4)}}