.page-module__UIBKnW__basicDemo{justify-content:center;align-items:center;padding:2rem;display:flex}.page-module__UIBKnW__demoBox{--demo-primary:#357a3a;--demo-spacing:2rem;--demo-radius:12px;background:var(--demo-primary);color:#fff;padding:var(--demo-spacing);border-radius:var(--demo-radius);transition:transform var(--transition-base);font-size:1.25rem;font-weight:600;box-shadow:0 4px 12px #357a3a4d;box-shadow:0 4px 12px lab(45.7706% -33.6758 28.0119/.3)}@supports (color:lab(0% 0 0)){.page-module__UIBKnW__demoBox{--demo-primary:lab(45.7706% -33.6758 28.0119)}}.page-module__UIBKnW__demoBox:hover{transform:scale(1.05)}.page-module__UIBKnW__syntaxBreakdown{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);margin-top:1.5rem;padding:1.5rem}.page-module__UIBKnW__syntaxBreakdown h3{color:var(--foreground);margin:0 0 1rem;font-size:1.05rem;font-weight:700}.page-module__UIBKnW__syntaxBreakdown ul{margin:0;padding-left:1.5rem;list-style:outside}.page-module__UIBKnW__syntaxBreakdown li{color:var(--foreground);margin:.5rem 0;line-height:1.7}.page-module__UIBKnW__syntaxBreakdown code{border-radius:var(--radius-sm);font-size:.875em;font-family:var(--font-mono);background:#357a3a1a;background:lab(45.7706% -33.6758 28.0119/.1);padding:.125rem .375rem}.page-module__UIBKnW__scopeDemo{flex-wrap:wrap;gap:1.5rem;display:flex}.page-module__UIBKnW__scopeBox{border-radius:var(--radius-lg);flex:1;min-width:200px;padding:1.5rem;font-weight:600}.page-module__UIBKnW__scopeGlobal{background:var(--color-brand-forest);color:#fff}.page-module__UIBKnW__scopeLocal{background:var(--color-success);color:#fff;flex-direction:column;gap:1rem;display:flex}.page-module__UIBKnW__scopeChild{border-radius:var(--radius-md);background:#fff3;padding:1rem;font-size:.9rem;font-weight:500}.page-module__UIBKnW__themeDemoContainer{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;display:grid}.page-module__UIBKnW__themeDemo{border-radius:var(--radius-lg);border:2px solid var(--border);padding:1.5rem}.page-module__UIBKnW__themeDemoLight{background:#fdfcf8;background:lab(98.8661% -.0120997 1.90746);border-color:#ddd7c9;border-color:lab(86.156% .645548 7.67696)}.page-module__UIBKnW__themeDemodark{background:#06150c;background:lab(5.57123% -6.71443 3.35061);border-color:#293729;border-color:lab(21.5039% -8.38576 6.62848)}.page-module__UIBKnW__themeCard h3{margin:0 0 .75rem;font-size:1.25rem}.page-module__UIBKnW__themeDemoLight .page-module__UIBKnW__themeCard h3{color:#2d1e14;color:lab(12.875% 6.46733 10.0543)}.page-module__UIBKnW__themeDemodark .page-module__UIBKnW__themeCard h3{color:#e0ded3;color:lab(88.5068% -.87449 5.65798)}.page-module__UIBKnW__themeCard p{opacity:.85;margin:0 0 1.5rem;line-height:1.6}.page-module__UIBKnW__themeDemoLight .page-module__UIBKnW__themeCard p{color:#2d1e14;color:lab(12.875% 6.46733 10.0543)}.page-module__UIBKnW__themeDemodark .page-module__UIBKnW__themeCard p{color:#e0ded3;color:lab(88.5068% -.87449 5.65798)}.page-module__UIBKnW__themeButton{color:#fff;border-radius:var(--radius-md);cursor:pointer;background:#357a3a;background:lab(45.7706% -33.6758 28.0119);border:none;padding:.75rem 1.5rem;font-family:inherit;font-weight:600;transition:all .2s}.page-module__UIBKnW__themeButton:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.page-module__UIBKnW__themeButtonDark{background:#72b875;background:lab(69.0092% -33.5937 27.2)}.page-module__UIBKnW__colourPickerDemo{max-width:500px;margin:0 auto}.page-module__UIBKnW__colourPreview{color:#fff;border-radius:var(--radius-lg);text-align:center;margin-bottom:1.5rem;padding:3rem 2rem;transition:background .1s;box-shadow:0 8px 24px #00000026}.page-module__UIBKnW__colourPreview p{text-shadow:0 2px 4px #0003;margin:0;font-size:1.5rem;font-weight:700}.page-module__UIBKnW__colourControls{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex}.page-module__UIBKnW__colourControlGroup{flex-direction:column;gap:.5rem;display:flex}.page-module__UIBKnW__colourControlHeader{justify-content:space-between;align-items:center;display:flex}.page-module__UIBKnW__colourControlLabel{color:var(--foreground);font-size:.875rem;font-weight:600}.page-module__UIBKnW__colourControlValue{font-weight:700;font-family:var(--font-mono);color:var(--color-brand-forest);text-align:right;min-width:4ch;font-size:.875rem}.page-module__UIBKnW__colourSlider{background:var(--border);appearance:none;border-radius:4px;outline:none;width:100%;height:8px}.page-module__UIBKnW__colourSlider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-brand-forest);cursor:pointer;border-radius:50%;width:20px;height:20px;transition:transform .15s;box-shadow:0 2px 4px #0003}.page-module__UIBKnW__colourSlider::-webkit-slider-thumb:hover{transform:scale(1.2)}.page-module__UIBKnW__colourSlider::-moz-range-thumb{background:var(--color-brand-forest);cursor:pointer;border:none;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 4px #0003}.page-module__UIBKnW__codeExplanation{background:var(--surface);border-radius:var(--radius-md);border:2px solid var(--border);padding:1rem}.page-module__UIBKnW__codeExplanation p{color:var(--foreground);margin:0;line-height:1.7}.page-module__UIBKnW__codeExplanation code{border-radius:var(--radius-sm);font-size:.875em;font-family:var(--font-mono);background:#357a3a1a;background:lab(45.7706% -33.6758 28.0119/.1);padding:.125rem .375rem}.page-module__UIBKnW__spacingDemo{background:var(--surface);border-radius:var(--radius-lg);flex-direction:column;padding:1rem;display:flex}.page-module__UIBKnW__spacingItem{--base-spacing:.5rem;--multiplier:1;background:linear-gradient(135deg,var(--color-brand-forest)0%,var(--color-brand-earth)100%);color:#fff;margin-bottom:calc(var(--base-spacing)*var(--multiplier));padding:calc(var(--base-spacing)*var(--multiplier));border-radius:var(--radius-md);font-size:.95rem;font-weight:600}.page-module__UIBKnW__spacingItem:last-child{margin-bottom:0}.page-module__UIBKnW__componentApiDemo{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.page-module__UIBKnW__apiButton{--button-color:#357a3a;--button-size:1;background:var(--button-color);padding:calc(.75rem*var(--button-size))calc(1.5rem*var(--button-size));font-size:calc(1rem*var(--button-size));color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;font-family:inherit;font-weight:600;transition:all .2s}@supports (color:lab(0% 0 0)){.page-module__UIBKnW__apiButton{--button-color:lab(45.7706% -33.6758 28.0119)}}.page-module__UIBKnW__apiButton:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.page-module__UIBKnW__designSystemDemo{justify-content:center;display:flex}.page-module__UIBKnW__dsCard{color:#0d3811;color:lab(19.7532% -22.4924 19.0615);background:#e7f2e6;background:lab(94.4641% -5.58892 4.3331);border-radius:12px;width:100%;max-width:400px;padding:1.5rem;box-shadow:0 4px 6px -1px #0000001a}.page-module__UIBKnW__dsCard h3{color:#0d3811;color:lab(19.7532% -22.4924 19.0615);margin:0 0 1rem;font-size:1.5rem}.page-module__UIBKnW__dsCard p{opacity:.85;margin:0 0 1.5rem;line-height:1.6}.page-module__UIBKnW__dsButton{background:var(--color-brand-forest);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:.75rem 1.5rem;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s}.page-module__UIBKnW__dsButton:hover{transform:translateY(-2px);box-shadow:0 4px 12px #357a3a4d;box-shadow:0 4px 12px lab(45.7706% -33.6758 28.0119/.3)}.page-module__UIBKnW__browserSupportDemo{padding:1rem}.page-module__UIBKnW__browserGrid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;display:grid}.page-module__UIBKnW__browserItem{background:var(--background);border:2px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-base);flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem;display:flex}.page-module__UIBKnW__browserItem:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.page-module__UIBKnW__browserSupported{border-color:var(--color-success)}.page-module__UIBKnW__browserIcon{background:linear-gradient(135deg,var(--color-success)0%,#059669 100%);color:#fff;width:2.5rem;height:2.5rem;font-size:1rem;font-weight:700;font-family:var(--font-mono);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.page-module__UIBKnW__browserName{color:var(--foreground);text-align:center;font-size:.875rem;font-weight:600}.page-module__UIBKnW__tipBox{border-left:4px solid var(--color-brand-forest);border-radius:var(--radius-md);background:linear-gradient(135deg,#e7f2e6 0%,#dceedc 100%);background:linear-gradient(135deg,lab(94.4641% -5.58892 4.3331) 0%,lab(92.2742% -8.38307 6.5173) 100%);margin-top:1.5rem;padding:1.5rem}.dark .page-module__UIBKnW__tipBox{border-left-color:var(--color-brand-forest-light);background:linear-gradient(135deg,#182619 0%,#101810 100%);background:linear-gradient(135deg,lab(13.3796% -8.38909 6.68447) 0%,lab(7.46751% -5.05014 3.78272) 100%)}.page-module__UIBKnW__tipBox h4{color:var(--foreground);margin:0 0 .75rem;font-size:1.05rem}.page-module__UIBKnW__tipBox p{color:var(--foreground);margin:0;line-height:1.8}.page-module__UIBKnW__tipBox code{border-radius:var(--radius-sm);font-size:.875em;font-family:var(--font-mono);background:#357a3a1a;background:lab(45.7706% -33.6758 28.0119/.1);padding:.125rem .375rem}.page-module__UIBKnW__tipsGrid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.page-module__UIBKnW__tipCard{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);transition:all var(--transition-base);padding:2rem}.page-module__UIBKnW__tipCard:hover{box-shadow:var(--shadow-lg);border-color:var(--color-brand-forest);transform:translateY(-4px)}.page-module__UIBKnW__tipIcon{background:linear-gradient(135deg,var(--color-brand-forest)0%,var(--color-brand-earth)100%);color:#fff;border-radius:var(--radius-md);width:2.5rem;height:2.5rem;font-weight:700;font-family:var(--font-mono);justify-content:center;align-items:center;margin-bottom:1rem;font-size:.875rem;display:inline-flex}.page-module__UIBKnW__tipCard h3{color:var(--foreground);margin:0 0 .5rem;font-size:1.1rem;font-weight:700}.page-module__UIBKnW__tipCard p{color:var(--text-secondary);margin:0;font-size:.95rem;line-height:1.6}.page-module__UIBKnW__tipCard code{border-radius:var(--radius-sm);font-size:.875em;font-family:var(--font-mono);background:#357a3a1a;background:lab(45.7706% -33.6758 28.0119/.1);padding:.125rem .375rem}@media (max-width:768px){.page-module__UIBKnW__scopeDemo{flex-direction:column}.page-module__UIBKnW__themeDemoContainer{grid-template-columns:1fr}.page-module__UIBKnW__colourPickerDemo{max-width:100%}.page-module__UIBKnW__colourPreview{padding:2rem 1.5rem}.page-module__UIBKnW__colourPreview p{font-size:1.25rem}.page-module__UIBKnW__componentApiDemo{flex-direction:column;align-items:stretch}.page-module__UIBKnW__apiButton{width:100%}.page-module__UIBKnW__browserGrid{grid-template-columns:repeat(2,1fr)}}@media (prefers-reduced-motion:reduce){.page-module__UIBKnW__demoBox,.page-module__UIBKnW__themeButton,.page-module__UIBKnW__apiButton,.page-module__UIBKnW__dsButton,.page-module__UIBKnW__browserItem,.page-module__UIBKnW__tipCard,.page-module__UIBKnW__colourPreview{transition:none!important}.page-module__UIBKnW__demoBox:hover,.page-module__UIBKnW__themeButton:hover,.page-module__UIBKnW__apiButton:hover,.page-module__UIBKnW__dsButton:hover,.page-module__UIBKnW__browserItem:hover,.page-module__UIBKnW__tipCard:hover{transform:none!important}}