:root{--demo-accent: var(--heading-color);--demo-accent-rgb: 255, 182, 54;--demo-surface: var(--light-bg);--demo-surface-alt: rgba(14, 18, 25, .6);--demo-surface-deep: rgba(14, 18, 25, .7);--demo-border: var(--border-color);--demo-fill-subtle: rgba(var(--demo-accent-rgb), .06);--demo-fill-light: rgba(var(--demo-accent-rgb), .08);--demo-fill-medium: rgba(var(--demo-accent-rgb), .12);--demo-fill-strong: rgba(var(--demo-accent-rgb), .18);--demo-fill-border: rgba(var(--demo-accent-rgb), .15);--demo-fill-border-hover: rgba(var(--demo-accent-rgb), .4);--demo-fill-border-strong: rgba(var(--demo-accent-rgb), .3);--demo-font-mono: "IBM Plex Mono", monospace;--demo-font-size-xs: 11px;--demo-font-size-sm: 12px;--demo-font-size-base: 13px;--demo-font-size-md: 14px;--demo-font-size-lg: 15px;--demo-font-noto: "Noto Sans Hebrew", Arial, sans-serif !important;--demo-radius: 3px;--demo-radius-lg: 6px;--demo-pad: 16px;--demo-pad-lg: 24px;--demo-gap: 8px;--demo-gap-lg: 16px;--demo-color-1: rgb(132, 13, 50);--demo-color-2: #2a5d8f;--demo-color-3: rgba(78, 173, 128, .8);--demo-color-4: #8b5e3c;--demo-color-5: #6a4c93;--demo-color-6: #b8113e}.savvy-demo{border:1px solid rgba(var(--demo-accent-rgb),.1);border-radius:var(--demo-radius);padding:28px var(--demo-pad-lg);margin:20px 0 32px;position:relative;overflow:hidden}.savvy-demo:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(var(--demo-accent-rgb),.03) 0%,transparent 60%);pointer-events:none;opacity:.35}.savvy-demo-label{font-family:var(--demo-font-noto);font-size:var(--demo-font-size-sm);color:var(--demo-accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:18px;opacity:.9;font-weight:600}.savvy-btn-group{display:flex;flex-wrap:wrap;gap:var(--demo-gap);margin:var(--demo-pad) 0 var(--demo-gap-lg)}.savvy-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-radius);padding:6px 14px;font-family:var(--demo-font-mono);font-size:var(--demo-font-size-sm);color:var(--secondary-text);cursor:pointer;transition:color .2s,border-color .2s,background .2s;line-height:1.4;letter-spacing:.3px}.savvy-btn:hover{background:var(--demo-fill-light);border-color:var(--demo-fill-border-hover);color:var(--demo-accent)}.savvy-btn.active{background:var(--demo-fill-medium);border-color:var(--demo-accent);color:var(--demo-accent);font-weight:700}.savvy-slider-row{display:flex;align-items:center;gap:var(--demo-gap);margin-bottom:16px;font-size:var(--demo-font-size-base);color:var(--secondary-text)}.savvy-slider-label{min-width:90px;font-family:var(--demo-font-mono);font-size:var(--demo-font-size-sm);white-space:nowrap;flex-shrink:0}.savvy-slider-val{min-width:42px;font-family:var(--demo-font-mono);font-size:var(--demo-font-size-sm);color:var(--demo-accent);text-align:end;flex-shrink:0}input[type=range].savvy-range{-webkit-appearance:none;appearance:none;width:260px;height:6px;background:var(--demo-border);border-radius:3px;outline:none;cursor:pointer}input[type=range].savvy-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--demo-accent);cursor:pointer}input[type=range].savvy-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--demo-accent);border:none;cursor:pointer}.savvy-code-output{font-family:var(--demo-font-mono);font-size:var(--demo-font-size-sm);color:var(--secondary-text);background:var(--demo-surface-alt);border:1px solid var(--demo-border);border-radius:var(--demo-radius);padding:12px var(--demo-pad);margin-top:var(--demo-pad);white-space:pre;line-height:1.6;overflow-x:auto;position:relative}.savvy-code-output pre{margin:0;padding:0;background:none;border:none;font:inherit;color:inherit;white-space:inherit;line-height:inherit;overflow:visible;text-indent:0}.savvy-copy-btn{position:absolute;top:8px;right:8px;background:var(--btn-bg);border:none;border-radius:var(--demo-radius);color:var(--text-color);font-size:var(--demo-font-size-xs);padding:4px 10px;cursor:pointer;font-family:var(--demo-font-mono);transition:background .2s ease}.savvy-copy-btn:hover{background:var(--btn-bg-hover)}.savvy-preview{display:flex;justify-content:center;align-items:center;min-height:160px;padding:20px;border:1px dashed var(--demo-border);border-radius:var(--demo-radius);position:relative;margin-bottom:var(--demo-pad-lg)}.savvy-codepen-form{text-align:start;margin-top:var(--demo-pad-lg)}.savvy-codepen-btn{display:flex;align-items:center;gap:11px;background:var(--demo-surface-deep);border:1px solid var(--demo-border);border-radius:var(--demo-radius);color:var(--secondary-text);font-family:var(--demo-font-mono);font-size:var(--demo-font-size-sm);letter-spacing:.03em;padding:5px 8px;cursor:pointer;line-height:1;transition:color .2s ease,border-color .2s ease,background .2s ease}.savvy-codepen-btn:hover{border-color:var(--demo-fill-border-hover);color:var(--demo-accent)}.savvy-codepen-btn svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}.savvy-play-btn{display:inline-flex;align-items:center;gap:6px;background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-radius);color:var(--text-color);padding:6px var(--demo-pad);font-size:var(--demo-font-size-base);cursor:pointer;font-family:var(--demo-font-mono);transition:all .2s ease}.savvy-play-btn:hover,.savvy-play-btn.playing{border-color:var(--demo-accent);color:var(--demo-accent)}input[type=color].savvy-color-swatch{-webkit-appearance:none;appearance:none;width:28px;height:28px;border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:none;cursor:pointer;padding:0;flex-shrink:0}input[type=color].savvy-color-swatch::-webkit-color-swatch-wrapper{padding:2px}input[type=color].savvy-color-swatch::-webkit-color-swatch{border:none;border-radius:2px}input[type=color].savvy-color-swatch::-moz-color-swatch{border:none;border-radius:2px}@media(max-width:640px){.savvy-demo{padding:20px var(--demo-pad)}.savvy-btn-group{gap:6px}.savvy-btn{padding:5px 10px;font-size:var(--demo-font-size-xs)}.savvy-slider-row{margin-bottom:10px;width:100%}.savvy-slider-label{min-width:56px}.savvy-slider-val{min-width:36px}input[type=range].savvy-range{flex:1;min-width:0;width:auto;height:8px;border-radius:4px;padding:0;background-size:100% 8px;background-repeat:no-repeat;background-position:center}input[type=range].savvy-range::-webkit-slider-thumb{width:28px;height:28px}input[type=range].savvy-range::-moz-range-thumb{width:28px;height:28px}}