*{box-sizing:border-box;margin:0;padding:0}:root{--gray:#667399;--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;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--font-sm:12px;--font-md:14px;--font-lg:18px;--slider-track:var(--lightningcss-light,#e4e6ec)var(--lightningcss-dark,var(--gray-700));--shadow-elevated:0 1px 2px var(--preview-control-shadow-1), 0 2px 6px var(--preview-control-shadow-2)}html[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}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{box-sizing:border-box;--app-sidebar-min-width:380px;--app-sidebar-max-width:420px;--app-sidebar-width:clamp(var(--app-sidebar-min-width), 25vw, var(--app-sidebar-max-width));min-width:0;min-height:0}.app-grid{--app-rail-width:30px;--app-grid-margin:var(--space-7);--app-header-height:56px;grid-template-columns:var(--app-rail-width) var(--app-sidebar-width) 1fr;gap:var(--app-grid-margin);padding:var(--app-grid-margin);grid-template-rows:auto 1fr;grid-template-areas:"logo header header""rail sidebar main";display:grid}.app-logo{min-width:0;min-height:0;margin-bottom:calc(-1 * var(--app-grid-margin));z-index:1;grid-area:logo;position:relative}.app-rail{grid-area:rail;min-width:0;min-height:0;overflow:visible}.app-header{grid-area:header;min-width:0}.app-grid>.sidebar{grid-area:sidebar;min-height:0}.app-grid>.preview{grid-area:main;min-width:0;min-height:0}.app-grid>.app-mobile-divider,.app-grid>svg[aria-hidden=true]{display:none}.app:not(:has(.app-header)){grid-template-columns:var(--app-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{grid-template-columns:var(--app-sidebar-width) 1fr;flex:1;min-width:0;min-height:0;display:grid}.app-body>.preview{min-width:0;min-height:0}@media (max-width:640px){.app-grid{grid-template-columns:auto 1fr;grid-template-rows:auto var(--sidebar-h,50vh) auto 1fr;grid-template-areas:"logo header""sidebar sidebar""divider divider""main main"}.app-grid>.app-rail{display:none}.app-logo{margin-bottom:0}.app-grid>.app-mobile-divider{grid-area:divider;display:flex}.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);border-radius:var(--rounded-xl);scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;background-color:#0000;border-right:none;flex-direction:column;padding:0;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;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;background-color:#0000;justify-content:center;align-items:center;padding:0;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:0}}
.theme{--base-black:#1a1a1a;--base-white:#ebf0e4;--accent-green:#aed6a7;--black:var(--base-black);--white:var(--base-white);--ink:var(--lightningcss-light,var(--black))var(--lightningcss-dark,var(--white));--text:var(--ink);--text-muted:color-mix(in srgb, var(--ink) 70%, transparent);--text-subtle:color-mix(in srgb, var(--ink) 40%, transparent);--surface:var(--lightningcss-light,var(--white))var(--lightningcss-dark,var(--black));--surface-raised-high:oklch(from var(--surface) calc(l + .06) calc(c * 1.25) h);--surface-raised:oklch(from var(--surface) calc(l + .03) calc(c * 1.15) h);--surface-inset:oklch(from var(--surface) calc(l - .03) calc(c * 1.15) h);--surface-inset-deep:oklch(from var(--surface) calc(l - .06) calc(c * 1.25) h);--cad-preview-bg:var(--surface-inset);--surface-up-1:oklch(from var(--background-elevation,var(--surface)) calc(l + .03) calc(c * 1.15) h);--surface-up-2:oklch(from var(--background-elevation,var(--surface)) calc(l + .06) calc(c * 1.25) h);--surface-down-1:oklch(from var(--background-elevation,var(--surface)) calc(l - .03) calc(c * 1.15) h);--surface-down-2:oklch(from var(--background-elevation,var(--surface)) calc(l - .06) calc(c * 1.25) h);--accent:var(--lightningcss-light,var(--black))var(--lightningcss-dark,var(--accent-green));--accent-hover:oklch(from var(--accent) calc(l + .08) c h);--on-accent:var(--lightningcss-light,var(--white))var(--lightningcss-dark,var(--black));--control:var(--lightningcss-light,var(--black))var(--lightningcss-dark,var(--white));--control-muted:var(--lightningcss-light,color-mix(in srgb, var(--black) 40%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--white) 30%, transparent));--control-subtle:var(--lightningcss-light,color-mix(in srgb, var(--black) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--white) 12%, transparent));--control-ultra-subtle:var(--lightningcss-light,color-mix(in srgb, var(--black) 5%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--white) 5%, transparent));--on-control:var(--lightningcss-light,var(--white))var(--lightningcss-dark,var(--black));--on-control-muted:var(--lightningcss-light,color-mix(in srgb, var(--white) 85%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--black) 85%, transparent));--border-subtle:color-mix(in srgb, var(--ink) 6%, transparent);--border-light:color-mix(in srgb, var(--ink) 12%, transparent);--border:color-mix(in srgb, var(--ink) 18%, transparent);--border-medium:color-mix(in srgb, var(--ink) 50%, transparent);--border-strong:var(--ink);--input-bg:var(--control-ultra-subtle);--input-border:var(--border);--icon-button-hover-bg:var(--control-subtle);--ui-icon:var(--text-muted);--preview-control-bg:var(--surface-raised);--preview-control-hover-bg:var(--control-subtle);--preview-control-active-bg:var(--control-muted);--preview-control-shadow-1:var(--lightningcss-light,#0000000f)var(--lightningcss-dark,#00000029);--preview-control-shadow-2:var(--lightningcss-light,#0000000a)var(--lightningcss-dark,#0000001a);--scrollbar-thumb:var(--lightningcss-light,#0003)var(--lightningcss-dark,#ffffff4d);--scrollbar-thumb-hover:var(--lightningcss-light,#0006)var(--lightningcss-dark,#ffffff80);--outline-stroke:var(--border-strong);--cad-preview-line:var(--border-medium);--cad-preview-feature-line:var(--border-light);--preview-bg:var(--lightningcss-light,#f0f1f3)var(--lightningcss-dark,#1a1a1a);--section-body-bg:var(--surface-raised);--sidebar-bg:var(--lightningcss-light,#f7f8f9)var(--lightningcss-dark,#000);--sidebar-section-bg:var(--lightningcss-light,#fff)var(--lightningcss-dark,#0a0a0a);--sidebar-section-border:var(--border-light);--sidebar-section-title:var(--lightningcss-light,#1a1d24)var(--lightningcss-dark,#fff);--sidebar-section-header-icon-hover-bg:var(--control-subtle);--field-unit-suffix:var(--text-subtle);--rounded:3px;--rounded-xl:20px;--border-weight:1px;--focus-ring-width:var(--border-weight);--focus-ring-offset:1px;--transition-duration:.2s;--space-1:.25rem;--space-2:.375rem;--space-3:.5rem;--space-4:.625rem;--space-5:.75rem;--space-6:1rem;--space-7:1.5rem;--icon-hit:1.5rem;--icon-glyph:.75rem;--icon-glyph-sm:.625rem;--icon-glyph-mark:.75rem;--icon-hit-radius:.375rem;--control-size:1.375rem;--slider-track-height:1.25rem;--slider-track-hit:1.75rem;--slider-handle-size:.4375rem;--slider-handle-hover-width:.25rem;--slider-track-dash-height:.1875rem;--slider-track-dash-gap:1px;--slider-track-dash-period:calc(var(--border-weight) + var(--slider-track-dash-gap));--line-height:1.333;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-lg:1.25rem;--font-size-grow-offset-y:calc((var(--font-size-lg) - var(--font-size-xs)) / 3);--font-size-grow-compensation:calc((var(--font-size-xs) - var(--font-size-lg)) * var(--line-height));--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:600;font-family:var(--rs-font,"Space Grotesk", system-ui, sans-serif);line-height:var(--line-height);--field-label-band:calc(var(--font-size-xs) * var(--line-height));--field-trailing-icon-offset-y:calc((var(--field-label-band) - var(--icon-hit)) / 2);--field-stack-gap:var(--space-1);--inline-pair-gap:var(--space-7);--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.5 7 9l3.5-3.5' stroke='%23808080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body.theme{--background-elevation:var(--surface)}.theme.card{background:var(--background-elevation)}.app-grid .theme.card{--background-elevation:var(--surface)}.theme ::selection{background:var(--ink);color:var(--surface)}.theme ::selection{background:var(--ink);color:var(--surface)}.theme[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}.theme[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.theme[data-theme=inverse]{--black:var(--base-white);--white:var(--base-black)}.theme:not([data-theme]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html[data-theme=dark] .theme:not([data-theme]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.surface-dotted{background-image:radial-gradient(circle at 0 0, var(--text-subtle) 0px, transparent 1.2px);background-size:5px 5px}body.pattern-generator-standalone.ui-sandbox-scroll{height:auto;min-height:100vh;overflow:auto}.app-grid{--background-elevation:var(--surface-inset);background:var(--background-elevation)}.app-grid>.preview{background:var(--background-elevation)}.view-root{--background-elevation:var(--surface);background:var(--surface-down-1)}