:root{--ui-radius:.5rem;--design-surface:#f1f5f9;--design-surface-alt:#f1f5f9;--design-section-surface:var(--design-surface);--design-section-border-color:transparent;--design-section-border:none;--design-shadow-raised-1:-2px -2px 2px 0px #b8cce0;--design-shadow-inset-1:inset 6px 6px 10px #b8cce073,inset -6px -6px 12px #f1f5f9bf;--design-section-shadow:var(--design-shadow-raised-1);--design-section-radius:var(--design-card-radius);--design-section-padding-y:clamp(2.5rem,5vw,3.5rem);--design-section-padding-x:clamp(1.5rem,4vw,3rem);--design-section-margin-y:clamp(2.5rem,6vw,4rem);--design-column-gap:clamp(2rem,4vw,3rem);--design-row-gap:clamp(2rem,4vw,3rem);--design-block-gap:clamp(1.25rem,3vw,1.75rem);--design-card-gap:clamp(1rem,2.5vw,1.5rem);--design-card-radius:var(--ui-radius);--design-card-padding:clamp(1.25rem,2.5vw,1.75rem);--design-card-surface:var(--column-card-bg);--design-card-border-color:transparent;--design-card-border:none;--design-card-hover-surface:var(--column-card-hover-bg);--design-card-hover-border-color:transparent;--design-card-hover-shadow:var(--neumorphic-shadow-raised-strong-pressed);--design-card-icon-surface:linear-gradient(135deg,#b8cce0,#9bb3d1);--design-card-icon-color:#1e293b;--design-button-radius:999px;--design-button-secondary-bg:var(--design-card-surface);--design-button-secondary-text:var(--design-text-primary);--design-button-secondary-hover-bg:var(--design-card-hover-surface);--design-button-secondary-shadow:var(--design-shadow-raised-1);--design-button-primary-bg:var(--column-button-bg);--design-button-primary-hover-bg:var(--column-button-hover-bg);--design-button-primary-text:#1e293b;--design-button-primary-shadow:var(--column-button-border-shadow);--design-button-cta-bg:#12110f;--design-button-cta-hover-bg:#26211b;--design-button-cta-text:#f1f5f9;--neumorphic-shadow-raised-strong:8px 8px 16px 0 var(--neumorphic-shadow-dark),-8px -8px 16px 0 var(--neumorphic-shadow-light);--neumorphic-shadow-raised-strong-pressed:4px 4px 8px 0 var(--neumorphic-shadow-dark),-4px -4px 8px 0 var(--neumorphic-shadow-light);--design-heading-xl:clamp(3rem,6vw,4rem);--design-heading-lg:clamp(2.25rem,5vw,3rem);--design-heading-md:clamp(1.75rem,3.5vw,2.25rem);--design-text-body:1rem;--design-body-line-height:1.6;--design-text-muted:#000000ad;--design-border-radius-sm:var(--ui-radius);--design-text-primary:#3c3327;--design-hover-surface:var(--design-surface-alt);--design-overlay-color:#251e1673;--design-focus-shadow:var(--design-shadow-inset-1);--design-input-surface:var(--design-card-surface);--design-input-placeholder:#786e5f99;--design-input-text:var(--design-text-primary);--neumorphic-surface:#f1f5f9;--neumorphic-shadow-light:#f1f5f9;--neumorphic-shadow-dark:#b8cce0;--code-50:#e3e7f5;--code-100:#c5cceb;--code-200:#a3aede;--code-300:#818fd1;--code-400:#6777c8;--code-500:#4d5fbf;--code-600:#4657b3;--code-700:#3d4da5;--code-800:#344397;--code-900:#000052;--code-surface:#000;--code-surface-variant:#000;--code-border:#ffffff1a;--code-border-focus:#4d5fbf99;--code-header-surface:#000;--code-header-border:#4d5fbf4d;--code-text-primary:#e3e7f5;--code-text-secondary:#c5cceb;--code-text-muted:#a3aede;--code-text-disabled:#a3aede66;--code-token-keyword:#6777c8;--code-token-keyword-alt:#818fd1;--code-token-string:#ec652b;--code-token-string-alt:#f8a067;--code-token-number:#fab88d;--code-token-number-alt:#fcd0b3;--code-token-variable:#e3e7f5;--code-token-property:#e3e7f5;--code-token-attribute:#e3e7f5;--code-token-function:#4d5fbf;--code-token-function-name:#6777c8;--code-token-operator:#e3e7f5;--code-token-operator-alt:#c5cceb;--code-token-punctuation:#e3e7f5;--code-token-comment:#a3aede99;--code-token-comment-alt:#c5cceb80;--code-token-class:#6777c8;--code-token-constant:#f8a067;--code-copy-button:#e3e7f5b3;--code-copy-button-hover:#e3e7f5;--code-copy-button-bg-hover:#4d5fbf33;--column-card-bg:#ffffffbf;--column-card-border-shadow:#fff 0px 0px 0px 1px inset;--column-card-border-radius:8px;--column-card-padding:20px;--column-card-hover-bg:#ffffffd9;--column-card-hover-shadow:#fff 0px 0px 0px 1px inset,#0000000d 0px 4px 12px 0px;--column-button-bg:#ec652b;--column-button-hover-bg:#dc5a23;--column-button-border-shadow:#0000000d 0px 0px 0px 1px inset,#0000001a 0px -1px 0px 0px inset,#00000005 0px -48px 24px -24px inset,#0000000d 0px 4px 8px 0px,#0000000d 0px 2px 4px 0px,#0000000d 0px 1px 1px 0px;--column-button-active-shadow:#00000014 0px 0px 0px 1px inset,#00000026 0px -1px 0px 0px inset,#00000008 0px -48px 24px -24px inset,#00000008 0px 2px 4px 0px,#00000005 0px 1px 2px 0px;--column-button-focus-shadow:#0000000d 0px 0px 0px 1px inset,#0000001a 0px -1px 0px 0px inset,#00000005 0px -48px 24px -24px inset,#0000000d 0px 4px 8px 0px,#0000000d 0px 2px 4px 0px,#0000000d 0px 1px 1px 0px,0 0 0 3px #ec652b4d}.demo-section{background:var(--design-section-surface);border:var(--design-section-border);border-radius:var(--design-section-radius);box-shadow:var(--design-section-shadow);padding:var(--design-section-padding-y)var(--design-section-padding-x);margin:var(--design-section-margin-y)auto}