:root{--bambi-color-blue-500: oklch(55% .22 271);--bambi-color-blue-600: oklch(49% .23 271);--bambi-color-slate-50: oklch(97% .01 271);--bambi-color-slate-100: oklch(95% .008 271);--bambi-color-slate-200: oklch(90% .01 271);--bambi-color-slate-500: oklch(55% .021 271);--bambi-color-slate-950: oklch(9% 0 0);--bambi-color-red-500: oklch(65% .233 28);--bambi-color-red-600: oklch(58% .22 28);--bambi-color-green-500: oklch(73% .194 153);--bambi-color-green-600: oklch(64% .18 153);--bambi-color-amber-500: oklch(78% .159 74);--bambi-color-amber-600: oklch(69% .15 74);--bambi-color-white: oklch(100% 0 0);--bambi-color-black: oklch(0% 0 0);--bambi-space-1: .25rem;--bambi-space-1-5: .375rem;--bambi-space-2: .5rem;--bambi-space-3: .75rem;--bambi-space-4: 1rem;--bambi-space-5: 1.25rem;--bambi-radius-sm: .375rem;--bambi-radius-md: .5rem;--bambi-radius-lg: .75rem;--bambi-radius-xl: 1rem;--bambi-radius-full: 9999px;--bambi-font-sans: system-ui, sans-serif;--bambi-font-mono: ui-monospace, monospace;--bambi-text-xs: .75rem;--bambi-text-sm: .875rem;--bambi-text-base: 1rem;--bambi-text-lg: 1.125rem;--bambi-font-weight-normal: 400;--bambi-font-weight-medium: 500;--bambi-font-weight-semibold: 600;--bambi-font-weight-bold: 700;--bambi-shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / .05);--bambi-shadow-md: 0 4px 6px -1px oklch(0% 0 0 / .1), 0 2px 4px -2px oklch(0% 0 0 / .1);--bambi-shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / .1), 0 4px 6px -4px oklch(0% 0 0 / .1);--bambi-background: var(--bambi-color-slate-50);--bambi-foreground: var(--bambi-color-slate-950);--bambi-card: var(--bambi-color-white);--bambi-card-foreground: var(--bambi-color-slate-950);--bambi-popover: var(--bambi-color-white);--bambi-popover-foreground: var(--bambi-color-slate-950);--bambi-primary: var(--bambi-color-blue-500);--bambi-primary-foreground: var(--bambi-color-white);--bambi-secondary: var(--bambi-color-slate-100);--bambi-secondary-foreground: var(--bambi-color-slate-950);--bambi-accent: oklch(94% .008 271);--bambi-accent-foreground: var(--bambi-color-slate-950);--bambi-muted: oklch(94% .008 271);--bambi-muted-foreground: var(--bambi-color-slate-500);--bambi-danger: var(--bambi-color-red-500);--bambi-danger-foreground: var(--bambi-color-white);--bambi-success: var(--bambi-color-green-500);--bambi-success-foreground: var(--bambi-color-slate-950);--bambi-warning: var(--bambi-color-amber-500);--bambi-warning-foreground: var(--bambi-color-slate-950);--bambi-border: var(--bambi-color-slate-200);--bambi-input: var(--bambi-color-slate-200);--bambi-input-background: var(--bambi-color-white);--bambi-input-foreground: var(--bambi-color-slate-950);--bambi-input-placeholder: var(--bambi-color-slate-500);--bambi-ring: var(--bambi-primary);--bambi-separator: oklch(92% .01 271);--bambi-intent-primary-bg: var(--bambi-primary);--bambi-intent-primary-fg: var(--bambi-primary-foreground);--bambi-intent-primary-hover-bg: var(--bambi-color-blue-600);--bambi-intent-secondary-bg: var(--bambi-secondary);--bambi-intent-secondary-fg: var(--bambi-secondary-foreground);--bambi-intent-secondary-hover-bg: var(--bambi-accent);--bambi-intent-danger-bg: var(--bambi-danger);--bambi-intent-danger-fg: var(--bambi-danger-foreground);--bambi-intent-danger-hover-bg: var(--bambi-color-red-600);--bambi-intent-success-bg: var(--bambi-success);--bambi-intent-success-fg: var(--bambi-success-foreground);--bambi-intent-success-hover-bg: var(--bambi-color-green-600);--bambi-intent-warning-bg: var(--bambi-warning);--bambi-intent-warning-fg: var(--bambi-warning-foreground);--bambi-intent-warning-hover-bg: var(--bambi-color-amber-600);--bambi-state-hover-opacity: 1;--bambi-state-disabled-opacity: .5;--bambi-state-focus-ring: var(--bambi-ring);--bambi-state-focus-ring-width: 2px;--bambi-state-focus-ring-offset: 2px;--bambi-button-gap: var(--bambi-space-1-5);--bambi-button-border-width: 1px;--bambi-button-line-height: 1;--bambi-button-padding-sm: var(--bambi-space-1-5) var(--bambi-space-3);--bambi-button-padding-md: var(--bambi-space-2) var(--bambi-space-4);--bambi-button-padding-lg: .625rem var(--bambi-space-5);--bambi-button-padding-icon: var(--bambi-space-2);--bambi-button-font-family: var(--bambi-font-sans);--bambi-button-font-size-sm: var(--bambi-text-xs);--bambi-button-font-size-md: var(--bambi-text-sm);--bambi-button-font-size-lg: var(--bambi-text-base);--bambi-button-font-weight: var(--bambi-font-weight-medium);--bambi-button-radius: var(--bambi-radius-md);--bambi-button-transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;--bambi-button-bg: var(--bambi-intent-primary-bg);--bambi-button-fg: var(--bambi-intent-primary-fg);--bambi-button-border: transparent;--bambi-button-hover-bg: var(--bambi-intent-primary-hover-bg);--bambi-button-hover-fg: var(--bambi-button-fg);--bambi-button-disabled-opacity: var(--bambi-state-disabled-opacity);--bambi-button-focus-ring-width: var(--bambi-state-focus-ring-width);--bambi-button-focus-ring-offset: var(--bambi-state-focus-ring-offset);--bambi-button-ring: var(--bambi-state-focus-ring);--bambi-button-spinner-border-width: 2px;--bambi-button-spinner-duration: .6s;--bambi-button-link-underline-offset: 4px}[data-theme=dark],.dark{--bambi-color-blue-500: oklch(65% .22 271);--bambi-color-blue-600: oklch(72% .2 271);--bambi-background: oklch(12% .01 271);--bambi-foreground: oklch(98% 0 0);--bambi-card: oklch(21% .021 271);--bambi-card-foreground: oklch(98% 0 0);--bambi-popover: oklch(21% .021 271);--bambi-popover-foreground: oklch(98% 0 0);--bambi-primary: var(--bambi-color-blue-500);--bambi-primary-foreground: oklch(9% 0 0);--bambi-secondary: oklch(26% .016 271);--bambi-secondary-foreground: oklch(98% 0 0);--bambi-accent: oklch(27% .016 271);--bambi-accent-foreground: oklch(98% 0 0);--bambi-muted: oklch(27% .01 271);--bambi-muted-foreground: oklch(71% .021 271);--bambi-danger: oklch(59% .197 27);--bambi-danger-foreground: oklch(98% 0 0);--bambi-success: oklch(73% .194 153);--bambi-success-foreground: oklch(9% 0 0);--bambi-warning: oklch(82% .139 78);--bambi-warning-foreground: oklch(9% 0 0);--bambi-border: oklch(28% .01 271);--bambi-input: oklch(28% .01 271);--bambi-input-background: oklch(21% .021 271);--bambi-input-foreground: oklch(98% 0 0);--bambi-input-placeholder: oklch(71% .021 271);--bambi-ring: var(--bambi-primary);--bambi-separator: oklch(25% .01 271);--bambi-shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / .3);--bambi-shadow-md: 0 4px 6px -1px oklch(0% 0 0 / .4), 0 2px 4px -2px oklch(0% 0 0 / .4);--bambi-shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / .4), 0 4px 6px -4px oklch(0% 0 0 / .4)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}h3{color:var(--bambi-primary);margin:0;font-size:1.25rem;font-family:var(--bambi-font-sans)}#drawer-left{position:fixed;left:0;top:0;bottom:0;width:220px;background:var(--bambi-card);border-right:1px solid var(--bambi-border);z-index:100;display:flex;flex-direction:column;font-family:var(--bambi-font-sans)}.drawer-brand{padding:.875rem 1rem;border-bottom:1px solid var(--bambi-border);display:flex;align-items:center;gap:.5rem;flex-shrink:0;text-decoration:none;cursor:pointer}.drawer-brand:hover .brand-name{color:var(--bambi-primary)}.brand-logo{width:22px;height:22px;background:var(--bambi-primary);border-radius:var(--bambi-radius-sm);flex-shrink:0}.brand-name{font-weight:var(--bambi-font-weight-bold);font-size:var(--bambi-text-sm);color:var(--bambi-foreground);letter-spacing:-.01em}.drawer-section-label{padding:.75rem 1rem .25rem;font-size:10px;font-weight:var(--bambi-font-weight-semibold);color:var(--bambi-muted-foreground);text-transform:uppercase;letter-spacing:.07em;flex-shrink:0}.drawer-nav{padding:.25rem .5rem;display:flex;flex-direction:column;gap:1px}.nav-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .625rem;border-radius:var(--bambi-radius-sm);border:none;background:transparent;cursor:pointer;font-family:var(--bambi-font-sans);font-size:var(--bambi-text-sm);color:var(--bambi-foreground);text-align:left;transition:background .1s,color .1s}.nav-item:hover{background:var(--bambi-accent)}.nav-item.active{background:color-mix(in oklch,var(--bambi-primary) 14%,transparent);color:var(--bambi-primary);font-weight:var(--bambi-font-weight-medium)}.nav-item svg{flex-shrink:0}#drawer-right{position:fixed;right:0;top:0;bottom:0;width:280px;background:var(--bambi-card);border-left:1px solid var(--bambi-border);z-index:100;display:flex;flex-direction:column;transform:translate(calc(100% + 1px));transition:transform .25s cubic-bezier(.4,0,.2,1)}#drawer-right.open{transform:translate(0)}.drawer-header{padding:.875rem 1rem;border-bottom:1px solid var(--bambi-border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}#drawer-title{font-weight:var(--bambi-font-weight-semibold);font-size:var(--bambi-text-sm);color:var(--bambi-foreground);font-family:var(--bambi-font-sans)}.drawer-close-btn{width:24px;height:24px;border:none;background:transparent;cursor:pointer;color:var(--bambi-muted-foreground);border-radius:var(--bambi-radius-sm);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;padding:0}.drawer-close-btn:hover{background:var(--bambi-accent);color:var(--bambi-foreground)}#token-list{flex:1;overflow-y:auto;padding:.75rem .75rem 2rem;display:flex;flex-direction:column;gap:1.25rem}.token-group{display:flex;flex-direction:column;gap:.375rem}.token-group-label{font-size:10px;font-weight:var(--bambi-font-weight-semibold);color:var(--bambi-muted-foreground);text-transform:uppercase;letter-spacing:.07em;font-family:var(--bambi-font-sans);padding-bottom:.375rem;border-bottom:1px solid var(--bambi-separator);margin-bottom:.125rem}.token-row{display:flex;flex-direction:column;gap:.2rem}.token-name{font-family:var(--bambi-font-mono);font-size:10px;color:var(--bambi-muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.token-input-wrap{display:flex;align-items:center;gap:.375rem}.token-color-swatch{width:22px;height:22px;border-radius:var(--bambi-radius-sm);border:1px solid var(--bambi-border);flex-shrink:0}.token-input{flex:1;min-width:0;padding:.25rem .5rem;border-radius:var(--bambi-radius-sm);border:1px solid var(--bambi-input);background:var(--bambi-input-background);color:var(--bambi-input-foreground);font-family:var(--bambi-font-mono);font-size:11px;outline:none;transition:border-color .15s}.token-input:focus{border-color:var(--bambi-ring);box-shadow:0 0 0 2px color-mix(in oklch,var(--bambi-ring) 25%,transparent)}.token-row.inherited .token-input{opacity:.4;pointer-events:none}.token-row.inherited .token-color-swatch{opacity:.5}.token-override-btn{font-size:9px;font-family:var(--bambi-font-sans);font-weight:var(--bambi-font-weight-medium);padding:.15rem .4rem;border-radius:var(--bambi-radius-sm);border:1px solid var(--bambi-border);background:transparent;color:var(--bambi-muted-foreground);cursor:pointer;transition:background .1s,color .1s,border-color .1s;flex-shrink:0;white-space:nowrap;line-height:1.4}.token-override-btn:hover{background:var(--bambi-accent);color:var(--bambi-foreground)}.token-override-btn.active{background:color-mix(in oklch,var(--bambi-primary) 14%,transparent);color:var(--bambi-primary);border-color:color-mix(in oklch,var(--bambi-primary) 35%,transparent)}.gen-section{background:var(--bambi-background);border:1px solid var(--bambi-border);border-radius:var(--bambi-radius-md);padding:.75rem;display:flex;flex-direction:column;gap:.625rem;margin-bottom:.25rem}.gen-row{display:flex;gap:.5rem;align-items:flex-end}.gen-field{display:flex;flex-direction:column;gap:.3rem;flex:1}.gen-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:var(--bambi-font-weight-semibold);color:var(--bambi-muted-foreground);text-transform:uppercase;letter-spacing:.07em;font-family:var(--bambi-font-sans)}.gen-value{font-family:var(--bambi-font-mono);font-weight:var(--bambi-font-weight-normal);text-transform:none;letter-spacing:0}.gen-slider-wrap{height:20px;border-radius:10px;overflow:hidden;position:relative;cursor:pointer}.gen-slider-wrap input[type=range],.gen-base-wrap input[type=range]{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;background:transparent;margin:0;cursor:pointer}.gen-slider-wrap input[type=range]::-webkit-slider-thumb,.gen-base-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0006;cursor:pointer}.gen-slider-wrap input[type=range]::-moz-range-thumb,.gen-base-wrap input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0006;cursor:pointer;border:none}.gen-base-wrap{height:20px;border-radius:10px;overflow:hidden;position:relative;cursor:pointer}.gen-hex-wrap{display:flex;align-items:center;gap:.375rem;flex:0 0 auto}.gen-hex-swatch{width:20px;height:20px;border-radius:var(--bambi-radius-sm);border:1px solid var(--bambi-border);flex-shrink:0}.gen-hex-input{width:72px;padding:.25rem .4rem;border-radius:var(--bambi-radius-sm);border:1px solid var(--bambi-input);background:var(--bambi-input-background);color:var(--bambi-input-foreground);font-family:var(--bambi-font-mono);font-size:11px;outline:none;transition:border-color .15s}.gen-hex-input:focus{border-color:var(--bambi-ring)}.gen-pills{display:flex;gap:3px}.gen-pill{flex:1;padding:.25rem .125rem;border-radius:var(--bambi-radius-sm);border:1px solid var(--bambi-border);background:transparent;color:var(--bambi-muted-foreground);font-size:10px;font-family:var(--bambi-font-sans);cursor:pointer;text-align:center;transition:all .1s}.gen-pill:hover:not(.active){background:var(--bambi-accent);color:var(--bambi-foreground)}.gen-pill.active{background:color-mix(in oklch,var(--bambi-primary) 14%,transparent);color:var(--bambi-primary);border-color:color-mix(in oklch,var(--bambi-primary) 35%,transparent)}.drawer-footer{margin-top:auto;padding:.75rem .75rem 1rem;border-top:1px solid var(--bambi-border);display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}.drawer-footer-label{font-size:10px;font-weight:var(--bambi-font-weight-semibold);color:var(--bambi-muted-foreground);text-transform:uppercase;letter-spacing:.07em;font-family:var(--bambi-font-sans)}.theme-switcher{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--bambi-muted);padding:3px;border-radius:var(--bambi-radius-md)}.theme-btn{display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .5rem;border-radius:calc(var(--bambi-radius-md) - 2px);border:none;background:transparent;cursor:pointer;font-family:var(--bambi-font-sans);font-size:var(--bambi-text-xs);color:var(--bambi-muted-foreground);transition:background .15s,color .15s,box-shadow .15s}.theme-btn.active{background:var(--bambi-card);color:var(--bambi-foreground);box-shadow:var(--bambi-shadow-sm)}.card{position:absolute;padding:1rem;border-radius:var(--bambi-radius-md);border:1px solid var(--bambi-border);gap:1rem;display:flex;flex-direction:column;align-items:start;background-color:var(--bambi-card);min-width:420px}.cardHeader{display:flex;align-items:center;justify-content:space-between;width:100%}.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.col{display:flex;flex-direction:column;gap:.5rem;width:100%}.preview-section{display:flex;flex-direction:column;gap:.5rem;width:100%;padding-top:.75rem;border-top:1px solid var(--bambi-separator)}.preview-section:first-of-type{border-top:none;padding-top:0}.preview-section-label{font-size:var(--bambi-text-xs);font-weight:var(--bambi-font-weight-semibold);color:var(--bambi-muted-foreground);text-transform:uppercase;letter-spacing:.06em;font-family:var(--bambi-font-sans)}.color-group{display:flex;flex-direction:column;gap:.25rem}.color-group-label{font-size:var(--bambi-text-xs);color:var(--bambi-muted-foreground);font-family:var(--bambi-font-sans);margin-bottom:.25rem}.swatches{display:flex;flex-wrap:wrap;gap:.375rem}.swatch{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:64px}.swatch-color{width:64px;height:32px;border-radius:var(--bambi-radius-sm);border:1px solid var(--bambi-border);flex-shrink:0}.swatch-name{font-size:9px;color:var(--bambi-muted-foreground);font-family:var(--bambi-font-mono);text-align:center;line-height:1.2;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.type-section{display:flex;flex-direction:column;gap:.5rem;width:100%}.type-section-label{font-size:var(--bambi-text-xs);font-weight:var(--bambi-font-weight-semibold);color:var(--bambi-muted-foreground);text-transform:uppercase;letter-spacing:.06em;font-family:var(--bambi-font-sans)}.type-row{display:flex;align-items:baseline;gap:1rem;padding:.375rem 0;border-bottom:1px solid var(--bambi-separator)}.type-row:last-child{border-bottom:none}.type-meta{font-family:var(--bambi-font-mono);font-size:10px;color:var(--bambi-muted-foreground);min-width:80px;flex-shrink:0}.type-sample{color:var(--bambi-foreground);font-family:var(--bambi-font-sans)}.type-sample.mono{font-family:var(--bambi-font-mono)}#canvas{position:fixed;inset:0;background-color:var(--bambi-background);background-size:1rem 1rem;cursor:grab;overflow:hidden}#canvas.panning{cursor:grabbing}#canvas-transform{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.bambi-button{--bambi-button-bg: var(--bambi-intent-primary-bg);--bambi-button-fg: var(--bambi-intent-primary-fg);--bambi-button-border: transparent;--bambi-button-hover-bg: var(--bambi-intent-primary-hover-bg);--bambi-button-hover-fg: var(--bambi-button-fg);display:inline-flex;align-items:center;justify-content:center;gap:var(--bambi-button-gap);border:var(--bambi-button-border-width) solid var(--bambi-button-border);border-radius:var(--bambi-button-radius);background-color:var(--bambi-button-bg);color:var(--bambi-button-fg);font-family:var(--bambi-button-font-family);font-size:var(--bambi-button-font-size-md);font-weight:var(--bambi-button-font-weight);line-height:var(--bambi-button-line-height);white-space:nowrap;cursor:pointer;user-select:none;outline:none;transition:var(--bambi-button-transition)}.bambi-button[data-size=sm]{padding:var(--bambi-button-padding-sm);font-size:var(--bambi-button-font-size-sm)}.bambi-button[data-size=md]{padding:var(--bambi-button-padding-md);font-size:var(--bambi-button-font-size-md)}.bambi-button[data-size=lg]{padding:var(--bambi-button-padding-lg);font-size:var(--bambi-button-font-size-lg)}.bambi-button[data-size=icon]{padding:var(--bambi-button-padding-icon);aspect-ratio:1 / 1}.bambi-button[data-intent=secondary]{--bambi-button-bg: var(--bambi-intent-secondary-bg);--bambi-button-fg: var(--bambi-intent-secondary-fg);--bambi-button-border: var(--bambi-border);--bambi-button-hover-bg: var(--bambi-intent-secondary-hover-bg)}.bambi-button[data-intent=danger]{--bambi-button-bg: var(--bambi-intent-danger-bg);--bambi-button-fg: var(--bambi-intent-danger-fg);--bambi-button-hover-bg: var(--bambi-intent-danger-hover-bg)}.bambi-button[data-intent=success]{--bambi-button-bg: var(--bambi-intent-success-bg);--bambi-button-fg: var(--bambi-intent-success-fg);--bambi-button-hover-bg: var(--bambi-intent-success-hover-bg)}.bambi-button[data-intent=warning]{--bambi-button-bg: var(--bambi-intent-warning-bg);--bambi-button-fg: var(--bambi-intent-warning-fg);--bambi-button-hover-bg: var(--bambi-intent-warning-hover-bg)}.bambi-button[data-appearance=outline]{--bambi-button-bg: transparent;--bambi-button-fg: var(--bambi-button-hover-bg);--bambi-button-border: var(--bambi-button-hover-bg);--bambi-button-hover-bg: color-mix(in oklch, currentColor 10%, transparent);--bambi-button-hover-fg: var(--bambi-button-fg)}.bambi-button[data-appearance=ghost]{--bambi-button-bg: transparent;--bambi-button-fg: var(--bambi-foreground);--bambi-button-border: transparent;--bambi-button-hover-bg: var(--bambi-accent);--bambi-button-hover-fg: var(--bambi-accent-foreground)}.bambi-button[data-appearance=link]{--bambi-button-bg: transparent;--bambi-button-fg: var(--bambi-primary);--bambi-button-border: transparent;--bambi-button-hover-bg: transparent;--bambi-button-hover-fg: var(--bambi-primary);padding:0;height:auto;text-underline-offset:var(--bambi-button-link-underline-offset)}.bambi-button:hover:not(:disabled){background-color:var(--bambi-button-hover-bg);color:var(--bambi-button-hover-fg);opacity:var(--bambi-state-hover-opacity)}.bambi-button[data-appearance=link]:hover:not(:disabled){text-decoration:underline}.bambi-button-content{display:contents}.bambi-button[data-loading]{position:relative;pointer-events:none}.bambi-button[data-loading] .bambi-button-content{opacity:0}.bambi-button-spinner{position:absolute;top:50%;left:50%;width:1em;height:1em;margin:-.5em 0 0 -.5em;border:var(--bambi-button-spinner-border-width) solid currentColor;border-top-color:transparent;border-radius:var(--bambi-radius-full);animation:bambi-spin var(--bambi-button-spinner-duration) linear infinite}@keyframes bambi-spin{to{transform:rotate(360deg)}}.bambi-button:focus-visible{outline:var(--bambi-button-focus-ring-width) solid var(--bambi-button-ring);outline-offset:var(--bambi-button-focus-ring-offset)}.bambi-button:disabled{opacity:var(--bambi-button-disabled-opacity);pointer-events:none}