:root{--demo-accent:var(--heading-color);--demo-accent-rgb:255, 182, 54;--demo-surface:var(--light-bg);--demo-surface-alt:rgba(14, 18, 25, 0.6);--demo-surface-deep:rgba(14, 18, 25, 0.7);--demo-border:var(--border-color);--demo-fill-subtle:rgba(var(--demo-accent-rgb), 0.06);--demo-fill-light:rgba(var(--demo-accent-rgb), 0.08);--demo-fill-medium:rgba(var(--demo-accent-rgb), 0.12);--demo-fill-strong:rgba(var(--demo-accent-rgb), 0.18);--demo-fill-border:rgba(var(--demo-accent-rgb), 0.15);--demo-fill-border-hover:rgba(var(--demo-accent-rgb), 0.4);--demo-fill-border-strong:rgba(var(--demo-accent-rgb), 0.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, 0.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 0.2s,border-color 0.2s,background 0.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 0.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 0.2s ease,border-color 0.2s ease,background 0.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 0.2s ease}.savvy-play-btn:hover{border-color:var(--demo-accent);color:var(--demo-accent)}.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 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}}