html,body{margin:0;width:100%;height:100%}.about-footer[data-astro-cid-sckkx6r4]{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--border-color);font-size:.875rem;color:var(--text-secondary)}.about-footer[data-astro-cid-sckkx6r4] a[data-astro-cid-sckkx6r4]{color:var(--s-color-brand-primary);-webkit-text-decoration:none;text-decoration:none}.about-footer[data-astro-cid-sckkx6r4] a[data-astro-cid-sckkx6r4]:hover{-webkit-text-decoration:underline;text-decoration:underline}:root{color-scheme:light;--p-color-primary-100: rgb(241, 167, 236);--p-color-primary-300: rgb(229, 97, 220);--p-color-primary-500: rgb(222, 53, 211);--p-color-primary-darker: rgb(149, 24, 141);--p-color-primary-dark: rgb(66, 11, 62);--p-color-primary-100-vivid: rgb(246, 172, 241);--p-color-primary-300-vivid: rgb(239, 108, 230);--p-color-primary-500-vivid: rgb(235, 71, 224);--p-color-primary-darker-vivid: rgb(170, 24, 160);--p-color-primary-dark-vivid: rgb(73, 18, 70);--p-color-support: rgb(18, 109, 97);--p-color-support-bright: rgb(18, 161, 142);--p-color-warm-lightest: rgb(250, 247, 242);--p-color-warm-darkest: rgb(42, 38, 34);--p-color-warm-text: rgb(75, 68, 61);--p-color-warm-text-light: rgb(100, 93, 86);--p-color-warm-text-muted: rgb(107, 100, 93);--p-color-cool-lightest: rgb(22, 20, 32);--p-color-cool-darkest: rgb(245, 240, 235);--p-color-cool-text: rgb(232, 228, 223);--p-color-cool-text-light: rgb(200, 195, 188);--p-color-cool-text-muted: rgb(245, 240, 235);--p-color-gray-warm-100: rgb(58 52 42 / .08);--p-color-gray-warm-200: rgb(58 52 42 / .15);--p-color-gray-warm-300: rgb(58 52 42 / .25);--p-color-gray-warm-400: rgb(58 52 42 / .35);--p-color-gray-warm-500: rgb(58 52 42 / .48);--p-color-gray-warm-600: rgb(58 52 42 / .6);--p-color-gray-warm-700: rgb(58 52 42 / .7);--p-color-gray-warm-800: rgb(58 52 42 / .8);--p-color-gray-warm-900: rgb(58 52 42 / .9);--p-color-gray-cool-100: rgb(232 228 223 / .08);--p-color-gray-cool-200: rgb(232 228 223 / .15);--p-color-gray-cool-300: rgb(232 228 223 / .25);--p-color-gray-cool-400: rgb(232 228 223 / .35);--p-color-gray-cool-500: rgb(232 228 223 / .48);--p-color-gray-cool-600: rgb(232 228 223 / .6);--p-color-gray-cool-700: rgb(232 228 223 / .7);--p-color-gray-cool-800: rgb(232 228 223 / .8);--p-color-gray-cool-900: rgb(232 228 223 / .9);--p-color-white: rgb(255, 255, 255);--p-color-alert-success-bg: rgb(136, 220, 155);--p-color-alert-success-text: rgb(2, 73, 16);--p-color-alert-warning-bg: rgb(255, 238, 186);--p-color-alert-warning-text: rgb(91, 69, 0);--p-color-alert-error-bg: rgb(248, 215, 218);--p-color-alert-error-text: rgb(114, 28, 36);--p-surface-warm-0: rgb(248, 242, 235);--p-surface-warm-1: rgb(242, 235, 226);--p-surface-warm-2: rgb(252, 247, 240);--p-surface-warm-border: rgb(205, 194, 183);--p-surface-warm-card: rgb(250 247 242 / .6);--p-surface-cool-0: rgb(22, 20, 32);--p-surface-cool-1: rgb(34, 28, 43);--p-surface-cool-2: rgb(45, 36, 57);--p-surface-cool-border: rgba(79, 75, 86, .6);--p-surface-cool-card: rgb(22 20 32 / .7);--p-surface-cool-card-muted: rgb(22 20 32 / .5);--p-surface-cool-deep: rgb(22 20 32 / .96);--p-glass-warm: rgb(58 52 42 / .05);--p-glass-warm-border: rgb(58 52 42 / .07);--p-glass-warm-hover: rgb(58 52 42 / .1);--p-glass-cool: rgb(255 255 255 / .06);--p-glass-cool-border: rgb(255 255 255 / .08);--p-glass-cool-hover: rgb(255 255 255 / .12);--p-glass-light-border: rgb(255 255 255 / .18);--p-glass-light-overlay: rgb(255 255 255 / .34);--p-shadow-warm-subtle: 0 1px 3px rgb(58 52 42 / .04);--p-shadow-warm-medium: 0 2px 8px rgb(58 52 42 / .06), 0 4px 16px rgb(58 52 42 / .04);--p-shadow-cool-subtle: 0 1px 3px rgb(0 0 0 / .15);--p-shadow-cool-medium: 0 2px 8px rgb(0 0 0 / .2), 0 4px 16px rgb(0 0 0 / .12);--s-color-text: light-dark(var(--p-color-warm-text), var(--p-color-cool-text));--s-color-text-light: light-dark(var(--p-color-warm-text-light), var(--p-color-cool-text-light));--s-color-text-lightest: light-dark(var(--p-color-warm-text-muted), var(--p-color-cool-text-muted));--s-color-text-on-dark: var(--p-color-white);--s-color-brand-primary: light-dark(var(--p-color-primary-500), var(--p-color-primary-500-vivid));--s-color-brand-primary-light: light-dark(var(--p-color-primary-100), var(--p-color-primary-100-vivid));--s-color-brand-primary-muted: light-dark(var(--p-color-primary-300), var(--p-color-primary-300-vivid));--s-color-brand-primary-dark: light-dark(var(--p-color-primary-darker), var(--p-color-primary-darker-vivid));--s-surface-0: light-dark(var(--p-surface-warm-0), var(--p-surface-cool-0));--s-surface-1: light-dark(var(--p-surface-warm-1), var(--p-surface-cool-1));--s-surface-2: light-dark(var(--p-surface-warm-2), var(--p-surface-cool-2));--s-surface-border: light-dark(var(--p-surface-warm-border), var(--p-surface-cool-border));--s-surface-card: light-dark(var(--p-surface-warm-card), var(--p-surface-cool-card));--s-surface-card-solid: light-dark(var(--p-surface-warm-1), var(--p-surface-cool-card-muted));--s-color-surface-glass: light-dark(var(--p-glass-warm), var(--p-glass-cool));--s-color-surface-glass-border: light-dark(var(--p-glass-warm-border), var(--p-glass-cool-border));--s-color-surface-glass-hover: light-dark(var(--p-glass-warm-hover), var(--p-glass-cool-hover));--s-shadow-subtle: var(--p-shadow-warm-subtle);--s-shadow-medium: var(--p-shadow-warm-medium);--s-color-alert-success-bg: var(--p-color-alert-success-bg);--s-color-alert-success-text: var(--p-color-alert-success-text);--s-color-alert-warning-bg: var(--p-color-alert-warning-bg);--s-color-alert-warning-text: var(--p-color-alert-warning-text);--s-color-alert-error-bg: var(--p-color-alert-error-bg);--s-color-alert-error-text: var(--p-color-alert-error-text);--p-spacing-4: .25rem;--p-spacing-8: .5rem;--p-spacing-12: .75rem;--p-spacing-16: 1rem;--p-spacing-24: 1.5rem;--p-spacing-32: 2rem;--p-spacing-48: 3rem;--p-radius-4: 4px;--p-radius-14: 14px;--p-radius-22: 22px;--p-radius-28: 28px;--s-spacing-2xs: var(--p-spacing-4);--s-spacing-xs: var(--p-spacing-8);--s-spacing-sm: var(--p-spacing-12);--s-spacing-md: var(--p-spacing-16);--s-spacing-lg: var(--p-spacing-24);--s-spacing-xl: var(--p-spacing-32);--s-spacing-2xl: var(--p-spacing-48);--s-radius-sm: var(--p-radius-4);--s-radius-md: var(--p-radius-14);--s-radius-card: var(--p-radius-22);--s-radius-card-scoop: var(--p-radius-28);--s-radius-card-shape: var(--s-radius-card) var(--s-radius-card) var(--s-radius-card) var(--s-radius-sm);--font-heading: "Young Serif", Georgia, serif;--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-base: var(--font-body);--font-title: var(--font-heading);--bg-primary: var(--s-surface-0);--bg-secondary: var(--s-surface-1);--bg-tertiary: var(--s-surface-2);--text-primary: var(--s-color-text);--text-secondary: var(--s-color-text-light);--border-color: var(--s-surface-border);--accent-color: var(--s-color-brand-primary);--accent-hover: var(--s-color-brand-primary-light);--success-color: var(--s-color-alert-success-text);--success-hover: color-mix(in oklab, var(--s-color-alert-success-text), white 12%);--danger-color: var(--s-color-alert-error-text);--danger-hover: color-mix(in oklab, var(--s-color-alert-error-text), white 10%);--input-bg: light-dark(var(--p-color-white), var(--p-surface-cool-1));--shadow-sm: var(--s-shadow-subtle);--shadow-md: var(--s-shadow-medium);--slider-border: light-dark(var(--p-color-gray-warm-300), var(--p-glass-light-border));--slider-thumb-border: light-dark(var(--p-color-gray-warm-400), var(--p-glass-light-overlay));--slider-thumb-shadow: 0 0 2px rgb(0 0 0 / .35);--checkerboard-dark: light-dark(#ddd, #444);--spacing-4: 1rem;--color-gray-100: var(--s-surface-border)}@supports (color: oklab(0% 0 0%)){:root{--p-color-primary-100: oklch(.8213 .123 328.92);--p-color-primary-300: oklch(.7007 .2161 330.26);--p-color-primary-500: oklch(.6452 .257 331.11);--p-color-primary-darker: oklch(.4743 .1978 331.33);--p-color-primary-dark: oklch(.2728 .1057 330.99);--p-color-primary-100-vivid: oklch(.8369 .1225 328.89);--p-color-primary-300-vivid: oklch(.7304 .2135 330.12);--p-color-primary-500-vivid: oklch(.6839 .254 330.83);--p-color-primary-darker-vivid: oklch(.5186 .2206 331.45);--p-color-primary-dark-vivid: oklch(.2991 .107 330.7);--p-color-support: oklch(.4821 .0817 181.21);--p-color-support-bright: oklch(.6357 .1124 180.17);--p-color-warm-lightest: oklch(.9771 .0074 80.72);--p-color-warm-darkest: oklch(.2715 .0094 67.42);--p-color-warm-text: oklch(.3914 .015 67.37);--p-color-warm-text-light: oklch(.4827 .0142 67.48);--p-color-warm-text-muted: oklch(.5075 .0141 67.5);--p-color-cool-lightest: oklch(.1996 .0239 291.72);--p-color-cool-darkest: oklch(.9576 .0086 67.72);--p-color-cool-text: oklch(.9206 .008 73.74);--p-color-cool-text-light: oklch(.8192 .0112 76.59);--p-color-cool-text-muted: oklch(.9576 .0086 67.72);--p-color-white: oklch(1 0 0);--p-color-alert-success-bg: oklch(.824 .1229 150.23);--p-color-alert-success-text: oklch(.3529 .1089 145.15)}}@supports (color: color(display-p3 0 0 0%)){:root{--p-color-alert-warning-bg: rgb(255, 238, 186)}@media (color-gamut: p3){:root{--p-color-alert-warning-bg: color(display-p3 .98866 .9357 .75227)}}}@supports (color: oklab(0% 0 0%)){:root{--p-color-alert-warning-bg: rgb(255, 238, 186);--p-color-alert-warning-text: oklch(.4028 .0823 87.84);--p-color-alert-error-bg: oklch(.9075 .037 11.63);--p-color-alert-error-text: oklch(.3713 .1191 20.24);--p-surface-warm-0: oklch(96.5% .012 75);--p-surface-warm-1: oklch(94.3% .014 72);--p-surface-warm-2: oklch(97.8% .01 78);--p-surface-warm-border: oklch(82% .02 68);--p-surface-cool-0: oklch(.1996 .0239 291.72);--p-surface-cool-1: oklch(24% .03 304);--p-surface-cool-2: oklch(28% .04 304);--p-surface-cool-border: oklch(42% .02 304 / .6)}@media (color-gamut: p3){:root{--p-color-alert-warning-bg: oklch(.9502 .0692 92.11)}}}.dark{color-scheme:dark;--s-shadow-subtle: var(--p-shadow-cool-subtle);--s-shadow-medium: var(--p-shadow-cool-medium)}@supports (corner-shape: scoop){:root{--s-radius-card-shape: var(--s-radius-card) var(--s-radius-card) var(--s-radius-card) var(--s-radius-card-scoop);--s-corner-shape-card: round round round scoop}}*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--accent-color),transparent 34%) color-mix(in oklab,var(--s-surface-1),transparent 50%)}body{background-color:var(--s-surface-0);color:var(--text-primary);line-height:1.65;transition:background-color .3s,color .3s;font-family:var(--font-body);font-weight:400;font-style:normal}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.pattern-editor.visible{animation:fadeIn .3s ease-in-out}.copy-button{padding:.45rem 1.05rem .45rem .85rem;background-color:var(--s-color-brand-primary);color:var(--s-color-text-on-dark);border:1px solid color-mix(in oklab,var(--s-color-brand-primary),white 15%);border-radius:999px;cursor:pointer;font-size:.82rem;font-weight:600;transition:all .2s ease;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:.5rem;justify-content:center}.copy-icon{inline-size:.95rem;text-align:center;opacity:.9;font-size:1em;line-height:1}.copy-button:hover{background-color:var(--s-color-brand-primary-light);box-shadow:var(--shadow-md)}.copy-button:focus{outline:2px solid var(--s-color-brand-primary);outline-offset:2px}.copy-button.copied{background-color:var(--s-color-alert-success-text);border-color:var(--s-color-alert-success-text)}.css-copied-message{margin-top:.75rem;text-align:right;color:var(--success-color);font-size:.875rem;font-weight:500;animation:fadeIn .3s ease-out}@supports (corner-shape: scoop){:is(.editor-card,.color-ramp,.css-output-panel,.variable-preview){corner-shape:var(--s-corner-shape-card)}}.color-ramp-sticky-container{position:sticky;top:0;z-index:40;margin-block:var(--s-spacing-md) var(--s-spacing-lg)}.color-ramp{display:flex;flex-direction:column;gap:var(--s-spacing-sm);padding:var(--s-spacing-md);border:1px solid var(--s-color-surface-glass-border);border-radius:var(--s-radius-card-shape);background:color-mix(in oklab,var(--s-surface-0),transparent 8%);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:padding .26s cubic-bezier(.16,1,.3,1),gap .26s cubic-bezier(.16,1,.3,1),border-radius .26s cubic-bezier(.16,1,.3,1);will-change:padding,gap,border-radius}.color-ramp-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-spacing-md);flex-wrap:wrap;max-height:6rem;opacity:1;transform:translateY(0) scale(1);transform-origin:top center;overflow:hidden;transition:opacity .2s ease,transform .26s ease,max-height .26s ease,margin .26s ease,padding .26s ease}.color-ramp-identity{display:flex;align-items:center;gap:var(--s-spacing-sm);min-width:0}.color-ramp-actions{display:flex;align-items:center;gap:var(--s-spacing-sm)}.color-ramp-hint{font-size:.78rem;color:var(--text-secondary)}.preview-mode-button{border:1px solid var(--s-color-surface-glass-border);border-radius:999px;background:var(--s-color-surface-glass);color:var(--text-secondary);font-size:.7rem;font-weight:600;letter-spacing:.03em;padding:.28rem .78rem;cursor:pointer;transition:background-color var(--transition-fast, .2s) ease,color var(--transition-fast, .2s) ease}.preview-mode-button.active{background:var(--s-color-brand-primary);color:var(--s-color-text-on-dark);border-color:var(--s-color-brand-primary)}.color-swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:0;height:7rem;border-radius:var(--s-radius-md);overflow:hidden;transition:height .26s ease}.color-swatch{padding:0;border:0;background:none;cursor:pointer;position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;transition:transform var(--transition-fast, .2s) ease,box-shadow var(--transition-fast, .2s) ease}.color-swatch.is-marked:before{content:"";position:absolute;inset-block-start:.45rem;inset-inline-start:50%;translate:-50% 0;inline-size:1.1rem;block-size:.18rem;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #00000040;pointer-events:none}.color-swatch:hover{transform:scale(1.02);box-shadow:0 8px 20px #00000059;z-index:10}.color-swatch:focus-visible{outline:2px solid var(--s-color-text-on-dark);outline-offset:-4px;z-index:10}.color-swatch.copied{outline:2px solid var(--s-color-text-on-dark);outline-offset:-4px;z-index:10}.copied-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;text-shadow:0 0 3px rgb(0 0 0 / .7);pointer-events:none}.copied-indicator .icon{inline-size:1.4rem;block-size:1.4rem}.color-swatch-name{display:block;max-width:calc(100% - .5rem);margin-bottom:.4rem;padding:.15rem .35rem;border-radius:999px;background:#111827b8;color:#f9fafb;font-size:.56rem;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.swatch-scale{display:grid;grid-template-columns:repeat(10,1fr);color:var(--text-secondary);font-size:.62rem;font-weight:600;letter-spacing:.03em;max-height:2rem;opacity:1;transform:translateY(0);overflow:hidden;transition:opacity .2s ease,transform .26s ease,max-height .26s ease}.swatch-scale>span{text-align:center}.swatch-scale>span.is-active{color:var(--text-primary);font-weight:700}.swatch-scale>span.is-active:after{content:"";display:inline-block;inline-size:.35rem;block-size:.35rem;margin-inline-start:.3rem;border-radius:999px;background:var(--s-color-brand-primary);vertical-align:middle}.copy-message{min-height:1.2rem;font-size:.8rem;color:var(--success-color);font-weight:500;max-height:2rem;opacity:1;transform:translateY(0);overflow:hidden;transition:opacity .2s ease,transform .26s ease,max-height .26s ease}.copy-message code{background-color:var(--s-color-surface-glass);padding:.2rem .4rem;border-radius:var(--s-radius-sm);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}@container app (width < 640px){.color-swatches{height:5rem}}.gamut-warning{position:absolute;top:.45rem;right:.45rem;width:.45rem;height:.45rem;border-radius:50%;border:1px solid rgba(0,0,0,.4);pointer-events:none;box-shadow:0 1px 3px #0000004d}.gamut-warning.out-of-srgb{background-color:#f59e0b}.gamut-warning.out-of-p3{background-color:#ef4444}.gamut-legend{display:flex;gap:1.25rem;font-size:.72rem;color:var(--text-secondary);margin-block-start:var(--s-spacing-xs);flex-wrap:wrap;align-items:center;justify-content:flex-start}.gamut-legend-item{display:inline-flex;align-items:center;gap:.35rem}.gamut-legend-dot{width:.45rem;height:.45rem;border-radius:50%;border:1px solid rgba(0,0,0,.4);box-shadow:0 1px 2px #0003}.gamut-legend-dot.out-of-srgb{background-color:#f59e0b}.gamut-legend-dot.out-of-p3{background-color:#ef4444}@supports (container-type: scroll-state){html{container-type:scroll-state}@container scroll-state(scrolled: bottom){.color-ramp{padding:var(--s-spacing-xs) var(--s-spacing-sm);gap:var(--s-spacing-xs);border-top-left-radius:0;border-top-right-radius:0}.color-ramp-header{opacity:0;max-height:0;margin:0;padding-top:0;padding-bottom:0;pointer-events:none}.color-swatches{height:3.5rem;height:3rem}.swatch-scale,.copy-message{opacity:0;max-height:0;margin:0;pointer-events:none}}}.container{padding:1rem 2rem 2rem;max-width:1200px;margin:0 auto}.icon{display:inline-block;color:inherit;width:1.5rem;height:1.5rem}.range-input{appearance:none;width:100%;height:2rem;border:1px solid color-mix(in oklab,var(--slider-border),transparent 4%);border-radius:999px;outline:none;background:var(--s-surface-1);transition:border-color var(--transition-fast, .2s) ease,box-shadow var(--transition-fast, .2s) ease}.range-input:focus-visible{border-color:color-mix(in oklab,var(--s-color-brand-primary),white 12%);box-shadow:0 0 0 3px color-mix(in oklab,var(--s-color-brand-primary),transparent 78%)}.range-input::-webkit-slider-thumb{appearance:none;width:1.35rem;height:1.35rem;border:1px solid rgb(0 0 0 / .12);border-radius:50%;background:#fff;box-shadow:0 1px 5px #00000057,0 0 0 1px #ffffff14;cursor:pointer;-webkit-transition:transform var(--transition-fast, .2s) ease;transition:transform var(--transition-fast, .2s) ease}.range-input::-moz-range-thumb{width:1.35rem;height:1.35rem;border:1px solid rgb(0 0 0 / .12);border-radius:50%;background:#fff;box-shadow:0 1px 5px #00000057,0 0 0 1px #ffffff14;cursor:pointer;-moz-transition:transform var(--transition-fast, .2s) ease;transition:transform var(--transition-fast, .2s) ease}.range-input::-webkit-slider-thumb:hover,.range-input::-webkit-slider-thumb:active{transform:scale(1.12)}.range-input::-moz-range-thumb:hover,.range-input::-moz-range-thumb:active{transform:scale(1.12)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:color-mix(in oklab,var(--s-surface-1),transparent 50%)}::-webkit-scrollbar-thumb{background-color:color-mix(in oklab,var(--accent-color),transparent 34%);border-radius:999px;border:1px solid color-mix(in oklab,var(--s-surface-0),transparent 20%)}::-webkit-scrollbar-thumb:hover{background-color:color-mix(in oklab,var(--accent-hover),transparent 24%)}.css-output-panel{display:flex;flex-direction:column;gap:var(--s-spacing-md);padding:var(--s-spacing-lg);border:1px solid var(--p-glass-light-border);border-radius:var(--s-radius-card-shape);background:var(--p-surface-cool-0);box-shadow:var(--shadow-sm);color:var(--p-color-cool-text);min-width:0}.css-output-panel .subtitle{margin:0;color:var(--p-color-cool-darkest)}.output-container{display:flex;flex-direction:column;gap:var(--s-spacing-sm);margin:0;padding:0;background:transparent;border:0;box-shadow:none}.output-header{display:flex;justify-content:space-between;align-items:center;gap:var(--s-spacing-sm)}.css-output{padding:var(--s-spacing-md);background-color:var(--p-surface-cool-card-muted);border-radius:var(--s-radius-md);overflow:auto;font-size:.8rem;height:22rem;width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;resize:vertical;border:1px solid var(--p-glass-cool-border);white-space:pre;color:var(--p-color-cool-text);line-height:1.6}.css-output:focus-visible{outline:2px solid var(--s-color-brand-primary);outline-offset:2px;border-color:var(--s-color-brand-primary)}.title{font-family:var(--font-heading);font-size:clamp(2.2rem,6vw,3.5rem);line-height:1.1;letter-spacing:0;text-align:left}.subtitle{font-family:var(--font-heading);font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.2;letter-spacing:0;color:var(--text-primary)}.variable-preview .subtitle{margin-bottom:1rem}h1,h2,h3,h4{font-family:var(--font-heading);font-weight:400}p,label,button,input,select,textarea{font-family:var(--font-body)}.eyebrow-label{font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}.visually-hidden,.visually-hidden-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}strong{font-weight:600}.slider-c,.lch-c-slider,.oklch-c-slider,.slider-s,.hsl-s-slider{background:linear-gradient(to right,gray,#e946de)}.hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.hue-slider::-webkit-slider-thumb{background:#fff}.hue-slider::-moz-range-thumb{background:#fff}.whiteness-slider,.hwb-w-slider{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='var(--checkerboard-dark)' d='M0 0h4v4H0zM4 4h4v4H4z'/%3E%3C/svg%3E"),linear-gradient(to right,transparent,white);background-size:8px 8px,100% 100%}.whiteness-slider::-webkit-slider-thumb,.hwb-w-slider::-webkit-slider-thumb{background:#fff;border:2px solid rgba(0,0,0,.4)}.whiteness-slider::-moz-range-thumb,.hwb-w-slider::-moz-range-thumb{background:#fff;border:2px solid rgba(0,0,0,.4)}.blackness-slider,.hwb-b-slider{background:linear-gradient(to right,transparent,black)}.blackness-slider::-webkit-slider-thumb,.hwb-b-slider::-webkit-slider-thumb{background:#000;border:2px solid rgba(255,255,255,.8)}.blackness-slider::-moz-range-thumb,.hwb-b-slider::-moz-range-thumb{background:#000;border:2px solid rgba(255,255,255,.8)}.green-red-slider,.lab-a-slider,.oklab-a-slider{background:linear-gradient(to right,#0f0,red)}.green-red-slider::-webkit-slider-thumb,.lab-a-slider::-webkit-slider-thumb,.oklab-a-slider::-webkit-slider-thumb{background:linear-gradient(135deg,#0f0,red)}.green-red-slider::-moz-range-thumb,.lab-a-slider::-moz-range-thumb,.oklab-a-slider::-moz-range-thumb{background:linear-gradient(135deg,#0f0,red)}.blue-yellow-slider,.lab-b-slider,.oklab-b-slider{background:linear-gradient(to right,#00f,#ff0)}.blue-yellow-slider::-webkit-slider-thumb,.lab-b-slider::-webkit-slider-thumb,.oklab-b-slider::-webkit-slider-thumb{background:linear-gradient(135deg,#00f,#ff0)}.blue-yellow-slider::-moz-range-thumb,.lab-b-slider::-moz-range-thumb,.oklab-b-slider::-moz-range-thumb{background:linear-gradient(135deg,#00f,#ff0)}.slider-l,.oklab-l-slider,.lch-l-slider,.oklch-l-slider,.lab-l-slider,.hsl-l-slider{background:linear-gradient(to right,#000,#fff)}.segmented{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--s-color-surface-glass);border:1px solid var(--s-color-surface-glass-border)}.segmented-button{border:0;background:transparent;color:var(--text-secondary);font-size:.76rem;font-weight:600;line-height:1;padding:.34rem .7rem;border-radius:999px;cursor:pointer;transition:background-color var(--transition-fast, .2s) ease,color var(--transition-fast, .2s) ease}.segmented-button:hover:not(.is-active):not(.is-readonly){color:var(--text-primary)}.segmented-button.is-active{background:var(--s-color-brand-primary);color:var(--s-color-text-on-dark)}.segmented-button.is-readonly{cursor:default}.curve-canvas{width:100%;border:1px solid var(--s-surface-border);border-radius:var(--s-radius-md);background:var(--s-surface-0);cursor:crosshair}.curve-canvas.is-dragging{cursor:grabbing}.curve-axis{stroke:var(--s-surface-border);stroke-width:1}.curve-path{fill:none;stroke:var(--curve-color, var(--s-color-brand-primary));stroke-width:2}.curve-guide-dot{fill:var(--s-color-text);opacity:.45}.curve-handle-line{stroke:color-mix(in oklab,var(--curve-color, var(--s-color-brand-primary)),transparent 45%);stroke-width:1;stroke-dasharray:4 4}.curve-handle{fill:var(--curve-color, var(--s-color-brand-primary));stroke:var(--s-surface-0);stroke-width:1.5;cursor:grab}.range-input[style*=--slider-color1]{background:linear-gradient(to right,var(--slider-color1),var(--slider-color2))!important}.red-slider,.srgb-r-slider,.display-p3-r-slider,.a98-rgb-r-slider,.prophoto-rgb-r-slider,.rec2020-r-slider{background:linear-gradient(to right,#000,red)}.red-slider::-webkit-slider-thumb,.srgb-r-slider::-webkit-slider-thumb,.display-p3-r-slider::-webkit-slider-thumb,.a98-rgb-r-slider::-webkit-slider-thumb,.prophoto-rgb-r-slider::-webkit-slider-thumb,.rec2020-r-slider::-webkit-slider-thumb{background:#f55}.red-slider::-moz-range-thumb,.srgb-r-slider::-moz-range-thumb,.display-p3-r-slider::-moz-range-thumb,.a98-rgb-r-slider::-moz-range-thumb,.prophoto-rgb-r-slider::-moz-range-thumb,.rec2020-r-slider::-moz-range-thumb{background:#f55}.green-slider,.srgb-g-slider,.display-p3-g-slider,.a98-rgb-g-slider,.prophoto-rgb-g-slider,.rec2020-g-slider{background:linear-gradient(to right,#000,#0f0)}.green-slider::-webkit-slider-thumb,.srgb-g-slider::-webkit-slider-thumb,.display-p3-g-slider::-webkit-slider-thumb,.a98-rgb-g-slider::-webkit-slider-thumb,.prophoto-rgb-g-slider::-webkit-slider-thumb,.rec2020-g-slider::-webkit-slider-thumb{background:#5f5}.green-slider::-moz-range-thumb,.srgb-g-slider::-moz-range-thumb,.display-p3-g-slider::-moz-range-thumb,.a98-rgb-g-slider::-moz-range-thumb,.prophoto-rgb-g-slider::-moz-range-thumb,.rec2020-g-slider::-moz-range-thumb{background:#5f5}.blue-slider,.srgb-b-slider,.display-p3-b-slider,.a98-rgb-b-slider,.prophoto-rgb-b-slider,.rec2020-b-slider{background:linear-gradient(to right,#000,#00f)}.blue-slider::-webkit-slider-thumb,.srgb-b-slider::-webkit-slider-thumb,.display-p3-b-slider::-webkit-slider-thumb,.a98-rgb-b-slider::-webkit-slider-thumb,.prophoto-rgb-b-slider::-webkit-slider-thumb,.rec2020-b-slider::-webkit-slider-thumb{background:#55f}.blue-slider::-moz-range-thumb,.srgb-b-slider::-moz-range-thumb,.display-p3-b-slider::-moz-range-thumb,.a98-rgb-b-slider::-moz-range-thumb,.prophoto-rgb-b-slider::-moz-range-thumb,.rec2020-b-slider::-moz-range-thumb{background:#55f}.xyz-x-slider{background:linear-gradient(to right,#000,#f80)}.xyz-x-slider::-webkit-slider-thumb{background:#f80}.xyz-x-slider::-moz-range-thumb{background:#f80}.xyz-y-slider{background:linear-gradient(to right,#000,#8f0)}.xyz-y-slider::-webkit-slider-thumb{background:#8f0}.xyz-y-slider::-moz-range-thumb{background:#8f0}.xyz-z-slider{background:linear-gradient(to right,#000,#08f)}.xyz-z-slider::-webkit-slider-thumb{background:#08f}.xyz-z-slider::-moz-range-thumb{background:#08f}.field{display:flex;align-items:center;gap:.6rem;min-height:2.35rem;padding-inline:.75rem;border:1px solid color-mix(in oklab,var(--s-surface-border),transparent 12%);border-radius:var(--s-radius-md);background-color:var(--input-bg);cursor:text;transition:border-color var(--transition-fast, .2s) ease,box-shadow var(--transition-fast, .2s) ease}.field:focus-within{border-color:var(--s-color-brand-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--s-color-brand-primary),transparent 78%)}.field--error{border-color:var(--danger-color)}.field-prefix{flex-shrink:0;margin-block-start:2px;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);-webkit-user-select:none;user-select:none}.field-control{flex:1;min-width:0;border:0;background:transparent;color:var(--text-primary);font-size:.86rem;line-height:1;padding-block:.5rem;outline:none;margin:0}.field--select{cursor:pointer}.color-space-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:1.5rem;padding-block:.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right .45rem center;background-size:11px 11px;background-repeat:no-repeat;color:var(--text-primary)}.color-space-select optgroup,.color-space-select option{background-color:var(--s-surface-1);color:var(--text-primary)}@container form (width >= 460px){.field{min-height:1.95rem;padding-inline:.62rem;border-radius:.5rem;gap:.42rem}.field-prefix{font-size:.58rem;letter-spacing:.07em}.field-control{font-size:.82rem;line-height:1;padding-block:0;block-size:calc(1.95rem - 2px)}.color-space-select{padding-block:0;padding-inline-end:1.25rem;background-position:right .35rem center}}@media (width >= 900px){.field{min-height:1.9rem;padding-inline:.58rem;gap:.38rem}.field-prefix{font-size:.56rem;letter-spacing:.065em}.field-control{font-size:.8rem;block-size:calc(1.9rem - 2px)}}.input-help{font-size:.75rem;margin-top:.25rem;margin:0;color:var(--text-secondary);font-size:.8rem;line-height:1.5}.error-message{color:var(--danger-color);font-size:.75rem;margin-top:.25rem;font-weight:500}.error-input{border-color:var(--danger-color)}.share-container{display:flex;flex-direction:column;gap:var(--s-spacing-xs);margin:0;padding-block-start:var(--s-spacing-md);border-block-start:1px solid var(--p-glass-cool-border)}.share-button{width:100%;padding:.7rem 1rem;background-color:var(--s-color-brand-primary);color:var(--s-color-text-on-dark);border:1px solid color-mix(in oklab,var(--s-color-brand-primary),white 15%);border-radius:999px;cursor:pointer;font-weight:600;font-size:.9rem;transition:background-color var(--transition-fast, .2s) ease,box-shadow var(--transition-fast, .2s) ease;display:flex;align-items:center;gap:var(--s-spacing-xs);justify-content:center}.share-button:hover{background-color:var(--s-color-brand-primary-light);box-shadow:var(--shadow-md)}.share-button:focus-visible{outline:2px solid var(--s-color-brand-primary);outline-offset:2px}.share-button.copied{background-color:var(--s-color-alert-success-text);border-color:var(--s-color-alert-success-text)}.share-description{margin:0;font-size:.78rem;color:var(--p-color-gray-cool-700);line-height:1.5}.color-space-controls{margin:0;padding:0;background-color:transparent;border:0;box-shadow:none}.color-parameters{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-spacing-md)}.color-parameter{display:flex;flex-direction:column;gap:var(--s-spacing-2xs)}.slider-label{font-size:.8rem;font-weight:600;color:var(--text-secondary)}.top-nav{position:relative;z-index:80;background:color-mix(in oklab,var(--s-surface-0),transparent 12%);border-bottom:1px solid var(--s-color-surface-glass-border);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.top-nav-inner{max-width:1200px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 2rem;container-type:inline-size;container-name:topnav}.top-nav:before{content:"";position:absolute;inset-inline:0;inset-block-start:0;block-size:3px;background:linear-gradient(90deg,var(--p-color-primary-500-vivid),var(--p-color-primary-dark-vivid))}.top-nav-left,.top-nav-right{display:flex;align-items:center;gap:.75rem}.site-logo-wrap{display:inline-flex;align-items:baseline;gap:.5rem;-webkit-text-decoration:none;text-decoration:none;position:relative;z-index:90}.site-logo{font-family:var(--font-heading);font-size:1.65rem;line-height:1;color:var(--text-primary)}.site-divider{inline-size:1px;block-size:1.4rem;background:var(--s-color-surface-glass-border);align-self:center}.site-subtitle{color:var(--text-secondary);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}.top-nav-right a{color:var(--text-secondary);-webkit-text-decoration:none;text-decoration:none;font-size:.93rem;font-weight:500;transition:color .2s ease}.top-nav-right a:hover{color:var(--text-primary)}.top-nav-right a.active{color:var(--s-color-brand-primary)}.theme-setting{display:inline-flex;align-items:center}.theme-select{min-inline-size:6.8rem;block-size:2rem;border-radius:999px;border:1px solid var(--s-color-surface-glass-border);background:var(--s-color-surface-glass);color:var(--text-secondary);padding-inline:.65rem 1.55rem;font-size:.78rem;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:border-color var(--transition-fast, .2s) ease,color var(--transition-fast, .2s) ease,background-color var(--transition-fast, .2s) ease}.theme-select:hover{color:var(--text-primary);border-color:color-mix(in oklab,var(--s-color-brand-primary),transparent 45%);background:color-mix(in oklab,var(--s-color-brand-primary),transparent 88%)}.theme-select:focus-visible{outline:2px solid color-mix(in oklab,var(--s-color-brand-primary),white 12%);outline-offset:2px}.share-cta{padding:.42rem .9rem;border-radius:999px;background:var(--s-color-brand-primary);color:var(--s-color-text-on-dark)!important;border:1px solid color-mix(in oklab,var(--s-color-brand-primary),white 15%)}.share-cta:hover{background:var(--s-color-brand-primary-light)}.share-icon{display:none}.mobile-nav-links{display:flex;align-items:center;gap:.75rem}.theme-setting-row{display:flex;align-items:center}.theme-setting-label{display:none}.mobile-menu-toggle{display:none;flex-direction:column;justify-content:space-between;width:24px;height:18px;background:transparent;border:none;cursor:pointer;padding:0;z-index:90;position:relative}.burger-line{width:100%;height:2px;background-color:var(--text-primary);border-radius:99px;transition:transform .25s ease,opacity .25s ease,background-color .25s ease}.mobile-menu-toggle.is-active .line-1{transform:translateY(8px) rotate(45deg)}.mobile-menu-toggle.is-active .line-2{opacity:0}.mobile-menu-toggle.is-active .line-3{transform:translateY(-8px) rotate(-45deg)}@container topnav (width < 700px){.top-nav-inner{padding:.7rem 1rem}.site-divider,.site-subtitle{display:none}.top-nav-right{gap:.45rem}.theme-select{min-inline-size:5.9rem}}@media (max-width: 560px){.mobile-menu-toggle{display:flex}.top-nav-inner{padding:.65rem 1rem}.top-nav-right{position:fixed;inset:0;width:100vw;height:100vh;background:var(--s-surface-0);border:none;border-radius:0;flex-direction:column;align-items:stretch;padding:6.5rem 1.5rem 1.5rem;gap:1.25rem;box-shadow:none;z-index:79;overflow-y:auto;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease;display:flex}.top-nav-right.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.mobile-nav-links{flex-direction:column;align-items:stretch;gap:.75rem}.mobile-nav-links a{display:block;padding:.85rem 1.25rem;border-radius:var(--s-radius-md);text-align:left;font-size:1.1rem;color:var(--text-secondary);font-weight:500;transition:background .2s,color .2s;background:var(--s-surface-1);border:1px solid var(--s-color-surface-glass-border)}.mobile-nav-links a:hover,.mobile-nav-links a:focus{color:var(--text-primary);background:var(--s-color-surface-glass-hover)}.mobile-nav-links a.active{color:var(--s-color-brand-primary);font-weight:600;background:color-mix(in oklab,var(--s-color-brand-primary),transparent 90%);border-left:4px solid var(--s-color-brand-primary);border-top-left-radius:0;border-bottom-left-radius:0}.theme-setting-row{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:var(--s-surface-1);border:1px solid var(--s-color-surface-glass-border);border-radius:var(--s-radius-md);gap:1rem}.theme-setting-label{display:inline-block;font-size:1rem;color:var(--text-secondary);font-weight:500}.theme-setting{display:inline-flex;flex-shrink:0;width:auto}.theme-select{min-inline-size:7.5rem;block-size:2.4rem;font-size:.88rem;padding-inline:.75rem 1.55rem;border-radius:999px;background:var(--s-color-surface-glass);border:1px solid var(--s-color-surface-glass-border);color:var(--text-primary);text-align-last:right}.top-nav-right .share-cta{display:block;padding:.85rem 1.25rem!important;font-size:1.1rem;font-weight:600;background:var(--s-color-brand-primary);color:var(--s-color-text-on-dark)!important;border-radius:var(--s-radius-md);border:1px solid color-mix(in oklab,var(--s-color-brand-primary),white 15%);box-shadow:var(--shadow-sm);text-align:center;transition:background .2s,transform .2s;margin-top:.5rem}.top-nav-right .share-cta:hover{background:var(--s-color-brand-primary-light);transform:translateY(-1px)}}.app-content{container-name:app;container-type:inline-size}.generator-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--s-spacing-lg)}.generator-controls{min-width:0}.pattern-editor{container-name:editor;container-type:inline-size;display:flex;position:relative;flex-direction:column;gap:var(--s-spacing-lg)}.hidden{display:none}.visible{display:flex}.editor-card{display:flex;flex-direction:column;padding:var(--s-spacing-lg);gap:var(--s-spacing-md);border:1px solid var(--s-color-surface-glass-border);border-radius:var(--s-radius-card-shape);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--s-surface-card);box-shadow:var(--shadow-sm)}.editor-card .subtitle+.input-help{margin-top:calc(var(--s-spacing-2xs) * -1);margin-bottom:var(--s-spacing-2xs)}.card-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-spacing-md)}.editor-card .subtitle{margin:0}.control-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-spacing-sm)}.control-value{color:var(--text-primary);font-weight:600;font-size:.8rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;letter-spacing:.02em;white-space:nowrap}.input-label-note{color:var(--text-secondary);font-weight:400;letter-spacing:0;text-transform:none}.pattern-color-chip{flex-shrink:0;inline-size:2.6rem;block-size:2.6rem;border:1px solid var(--s-color-surface-glass-border);border-radius:var(--s-radius-md);box-shadow:var(--shadow-sm)}.pattern-meta .subtitle{margin:0}.pattern-value{margin:0;color:var(--s-color-brand-primary-muted);font-size:.85rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.pattern-form-row{container-name:form;container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}.pattern-name-container,.color-space-selector{min-width:0}.input-label{display:block;margin-bottom:var(--s-spacing-2xs);color:var(--text-secondary);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}.control-value.is-accent{color:var(--s-color-brand-primary)}.hue-shift-control,.chroma-floor-control{display:flex;flex-direction:column;margin-block-start:var(--s-spacing-sm);padding-block-start:var(--s-spacing-md);gap:var(--s-spacing-2xs);border-block-start:1px solid var(--s-color-surface-glass-border)}.remove-button{all:unset;display:inline-flex;z-index:2;position:absolute;align-items:center;inset-block-start:var(--s-spacing-lg);inset-inline-end:var(--s-spacing-lg);padding:.28rem .6rem;gap:.3rem;border:1px solid rgba(239,68,68,.45);border-radius:var(--s-radius-md);background:#ef44441f;color:#ef4444;font-weight:600;font-size:.78rem;letter-spacing:.02em;cursor:pointer;transition:all .2s ease}.remove-button:hover:not(:disabled){border-color:#ef4444;background:#ef4444;color:#fff}.remove-button:disabled{border-color:var(--s-color-surface-glass-border);background:transparent;color:var(--text-secondary);cursor:not-allowed;opacity:.4}.harmony-buttons{display:flex;flex-wrap:wrap;margin-block-start:var(--s-spacing-2xs);gap:var(--s-spacing-xs)}.harmony-button{display:inline-flex;align-items:center;padding:.42rem .8rem;gap:var(--s-spacing-xs);border:1px solid var(--s-color-surface-glass-border);border-radius:999px;background:var(--s-color-surface-glass);color:var(--text-primary);font-weight:500;font-size:.8rem;cursor:pointer;transition:border-color var(--transition-fast, .2s) ease,background-color var(--transition-fast, .2s) ease}.harmony-button:hover:not(:disabled){border-color:color-mix(in oklab,var(--s-color-brand-primary),white 20%);background:color-mix(in oklab,var(--s-color-brand-primary),transparent 85%)}.harmony-button:disabled{cursor:not-allowed;opacity:.5}.harmony-preview-dot{flex-shrink:0;inline-size:.7rem;block-size:.7rem;border:1px solid rgb(255 255 255 / .25);border-radius:999px}@container form (width >= 460px){.pattern-form-row{grid-template-columns:minmax(120px,.42fr) minmax(0,1.58fr);align-items:center}}@media (width >= 900px){.pattern-form-row{grid-template-columns:128px minmax(0,1fr);gap:.5rem}}@container app (width >= 1020px){.generator-layout{grid-template-columns:minmax(0,1.7fr) minmax(320px,.9fr);gap:var(--s-spacing-lg)}@media (height >= 840px){.css-output-panel{position:sticky;top:20rem}}}.buy-coffee{margin-block-start:var(--spacing-4);padding-block-start:var(--spacing-4);border-top:1px solid var(--color-gray-100)}.buy-coffee .btn-container{width:100%}.buy-coffee .kofi-button{--color-primary-500: rebeccapurple;display:inline-flex;justify-content:space-between;transition:opacity .4s ease-out;border-radius:3px}.kofitext img.kofiimg{animation:none!important}.tabs{display:flex;align-items:center;padding:1rem 0;overflow-x:auto;gap:.55rem;scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--accent-color),transparent 42%) transparent}.tabs::-webkit-scrollbar{height:4px}.tabs::-webkit-scrollbar-track{background:transparent;border-radius:4px}.tabs::-webkit-scrollbar-thumb{background-color:color-mix(in oklab,var(--accent-color),transparent 42%);border-radius:999px}.tab-wrapper{position:relative;display:inline-flex}.tab{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem 1rem .45rem .85rem;border-radius:999px;background:var(--s-color-surface-glass);color:var(--text-primary);border:1px solid var(--s-color-surface-glass-border);cursor:pointer;font-weight:500;font-size:.82rem;transition:all .2s ease,background-color .25s ease;white-space:nowrap;box-shadow:var(--shadow-sm)}.tab:hover{border-color:color-mix(in oklab,var(--tab-color),var(--s-color-surface-glass-border) 55%);background:color-mix(in oklab,var(--tab-color),transparent 86%)}.active-tab{font-weight:600;color:var(--text-primary);background:var(--s-color-surface-glass-hover);border-color:color-mix(in oklab,var(--tab-color),transparent 45%)}.tab-removable{padding-inline-end:1.65rem}.tab-dot{inline-size:.5rem;block-size:.5rem;border-radius:999px;background:var(--tab-color);box-shadow:0 0 0 1px #fff3}.tab-label{line-height:1}.tab-remove{all:unset;position:absolute;inset-inline-end:.2rem;inset-block-start:50%;translate:0 -50%;inline-size:1.05rem;block-size:1.05rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;line-height:1;color:color-mix(in oklab,var(--danger-color),white 20%);cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--transition-fast, .2s) ease,background-color var(--transition-fast, .2s) ease,color var(--transition-fast, .2s) ease}.tab-wrapper:hover .tab-remove,.tab-wrapper:focus-within .tab-remove{opacity:1;pointer-events:auto}.tab-remove:hover,.tab-remove:focus-visible{background:color-mix(in oklab,var(--danger-color),transparent 82%);color:var(--danger-color)}.add-tab-button{display:inline-flex;justify-content:center;align-items:center;inline-size:2rem;block-size:2rem;border-radius:999px;border:1px solid var(--s-color-surface-glass-border);background:var(--s-color-surface-glass);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.add-tab-button:hover{background:var(--s-color-brand-primary);border-color:var(--s-color-brand-primary);color:var(--s-color-text-on-dark)}.variable-preview{margin-bottom:1.5rem;padding:1rem;background-color:var(--p-surface-cool-0);border-radius:var(--s-radius-card-shape);border:1px solid var(--p-glass-light-border);color:var(--p-color-cool-text)}.variable-list{line-height:1.8;font-size:.875rem}.variable-list code{background-color:var(--p-surface-cool-1);padding:.25rem .5rem;border-radius:.25rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;border:1px solid var(--p-glass-light-border);color:var(--p-color-primary-300-vivid);white-space:nowrap}.app-layout{container-type:inline-size;container-name:viewport}@container viewport (width < 640px){.container{padding:1rem}.color-preview-box{flex-direction:column;align-items:flex-start}.color-preview{width:100%;height:3rem;margin-right:0;margin-bottom:.5rem}.color-value{width:100%}}