.demo-toggle-switch .toggle-label{display: inline-flex;align-items: center;gap: 1rem;cursor: pointer;font-family: system-ui, sans-serif;font-size: 1rem;user-select: none;}.demo-toggle-switch .toggle-input{display: none;}.demo-toggle-switch .toggle-track{width: 52px;height: 28px;background: var(--border);border-radius: 999px;position: relative;transition: background .25s;}:is(.demo-toggle-switch .toggle-track)::after{content: "";position: absolute;top: 3px;left: 3px;width: 22px;height: 22px;background: var(--surface);border-radius: 50%;box-shadow: 0 1px 4px rgba(0,0,0,.2);transition: transform .25s;}.demo-toggle-switch .toggle-input:checked + .toggle-track{background: var(--accent);}.demo-toggle-switch .toggle-input:checked + .toggle-track::after{transform: translateX(24px);}@media (prefers-reduced-motion: reduce){.demo-toggle-switch .toggle-track, .demo-toggle-switch .toggle-track::after, .demo-toggle-switch .toggle-solo{transition: none;}}
.demo-floating-labels{flex-direction: column;align-items: center;}.demo-floating-labels .field{position: relative;margin: .5rem 0;}.demo-floating-labels input{width: 240px;padding: 1.25rem 1rem .5rem;border: 2px solid var(--border);border-radius: 8px;font-size: 1rem;font-family: inherit;background: var(--surface);color: var(--text);outline: none;transition: border-color .2s;}:is(.demo-floating-labels input):focus{border-color: var(--accent);}:is(.demo-floating-labels input):focus + label,:is(.demo-floating-labels input):not(:placeholder-shown) + label{top: .5rem;font-size: .75rem;color: var(--accent);transform: none;}.demo-floating-labels label{position: absolute;top: 50%;left: 1rem;transform: translateY(-50%);font-size: 1rem;color: var(--text-muted);pointer-events: none;transition: top .2s, font-size .2s, color .2s;}@media (prefers-reduced-motion: reduce){.demo-floating-labels label{transition: none;}}
.demo-star-rating .stars{display: inline-flex;flex-direction: row-reverse;gap: .25rem;}:is(.demo-star-rating .stars) input{display: none;}:is(.demo-star-rating .stars) label{font-size: 2rem;color: var(--text-muted);cursor: pointer;transition: color .15s;}:is(.demo-star-rating .stars) input:checked ~ label,:is(.demo-star-rating .stars) label:hover,:is(.demo-star-rating .stars) label:hover ~ label{color: var(--yellow);}@media (prefers-reduced-motion: reduce){.demo-star-rating .star-forward label{transition: none;}}
.demo-custom-checkboxes .check-group{display: flex;flex-direction: column;gap: .5rem;}.demo-custom-checkboxes .check-label{display: inline-flex;align-items: center;gap: .65rem;cursor: pointer;font-size: .95rem;user-select: none;margin: .25rem 0;}.demo-custom-checkboxes input[type="checkbox"]{appearance: none;-webkit-appearance: none;width: 20px;height: 20px;border: 2px solid var(--border);border-radius: 5px;flex-shrink: 0;position: relative;transition: border-color .2s, background .2s;cursor: pointer;}:is(.demo-custom-checkboxes input[type="checkbox"]):checked{background: var(--accent);border-color: var(--accent);}:is(.demo-custom-checkboxes input[type="checkbox"]):checked::after{content: "";position: absolute;top: 2px;left: 5px;width: 6px;height: 10px;border: 2px solid var(--bg);border-top: none;border-left: none;transform: rotate(45deg);}.demo-custom-checkboxes input[type="checkbox"]:focus-visible{outline: 2px solid var(--accent);outline-offset: 2px;}@media (prefers-reduced-motion: reduce){.demo-custom-checkboxes input[type="checkbox"], .demo-custom-checkboxes .todo-text, .demo-custom-checkboxes .check-card{transition: none;}}
.demo-custom-radio .radio-group{display: flex;flex-direction: column;gap: .5rem;}.demo-custom-radio .radio-label{display: inline-flex;align-items: center;gap: .65rem;cursor: pointer;font-size: .95rem;user-select: none;margin: .25rem 0;}.demo-custom-radio input[type="radio"]{appearance: none;-webkit-appearance: none;width: 20px;height: 20px;border: 2px solid var(--border);border-radius: 50%;flex-shrink: 0;position: relative;transition: border-color .2s;cursor: pointer;}:is(.demo-custom-radio input[type="radio"]):checked{border-color: var(--accent);}:is(.demo-custom-radio input[type="radio"]):checked::after{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;background: var(--accent);border-radius: 50%;}.demo-custom-radio input[type="radio"]:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}@media (prefers-reduced-motion: reduce){.demo-custom-radio input[type="radio"], .demo-custom-radio .seg span, .demo-custom-radio .radio-anim input[type="radio"]::after{transition: none;}}
.demo-range-slider input[type="range"]{-webkit-appearance: none;appearance: none;width: 220px;height: 6px;background: var(--border);border-radius: 999px;outline: none;cursor: pointer;}:is(.demo-range-slider input[type="range"])::-webkit-slider-thumb{-webkit-appearance: none;appearance: none;width: 22px;height: 22px;background: var(--accent);border-radius: 50%;box-shadow: 0 1px 4px rgba(0,0,0,.35);transition: box-shadow .2s;}:is(.demo-range-slider input[type="range"]):hover::-webkit-slider-thumb{box-shadow: 0 1px 10px rgba(0,0,0,.5);}:is(.demo-range-slider input[type="range"])::-moz-range-thumb{width: 22px;height: 22px;background: var(--accent);border: none;border-radius: 50%;box-shadow: 0 1px 4px rgba(0,0,0,.35);}:is(.demo-range-slider input[type="range"])::-moz-range-track{background: var(--border);height: 6px;border-radius: 999px;}.demo-range-slider input[type="range"]:focus-visible{outline: 2px solid var(--accent);outline-offset: 4px;}@media (prefers-reduced-motion: reduce){.demo-range-slider input[type="range"]::-webkit-slider-thumb{transition: none;}}
.demo-input-validation .field{position: relative;margin: .75rem 0;}.demo-input-validation input{display: block;width: 260px;padding: .65rem 2.5rem .65rem .9rem;border: 2px solid var(--border);border-radius: 8px;font-size: .95rem;font-family: inherit;background: var(--surface);color: var(--text);outline: none;transition: border-color .2s;}:is(.demo-input-validation input):focus{border-color: var(--accent);}:is(.demo-input-validation input):user-invalid{border-color: var(--coral);}:is(.demo-input-validation input):user-valid{border-color: var(--teal);}.demo-input-validation input:user-invalid ~ .field-icon::after,.demo-input-validation input:user-valid ~ .field-icon::after{content: "";display: block;width: 16px;height: 16px;-webkit-mask-size: contain;mask-size: contain;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-position: center;mask-position: center;}.demo-input-validation input:user-invalid ~ .field-icon::after{background: var(--coral);-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");}.demo-input-validation input:user-valid ~ .field-icon::after{background: var(--teal);-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");}.demo-input-validation .field-icon{position: absolute;right: .75rem;top: 50%;transform: translateY(-50%);font-size: 1rem;pointer-events: none;}.demo-input-validation input:user-invalid ~ .field-icon{color: var(--coral);}.demo-input-validation input:user-valid ~ .field-icon{color: var(--teal);}.demo-input-validation .hint{font-size: .75rem;color: var(--text-muted);margin-top: .25rem;}.demo-input-validation input:user-invalid ~ .hint{color: var(--coral);}.demo-input-validation input:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}@media (prefers-reduced-motion: reduce){.demo-input-validation input, .demo-input-validation .gate-submit{transition: none;}}
.demo-multi-step-form .msf-radio{display: none;}.demo-multi-step-form .msf-wrap{max-width: 400px;margin: 0 auto;background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;}.demo-multi-step-form .msf-progress{display: flex;background: var(--surface-2);border-bottom: 1px solid var(--border);}.demo-multi-step-form .msf-step-label{flex: 1;padding: .6rem;text-align: center;font-size: .75rem;color: var(--text-muted);font-weight: 500;position: relative;}.demo-multi-step-form .msf-body{padding: 1.5rem;}.demo-multi-step-form .msf-panel{display: none;flex-direction: column;gap: .75rem;}:is(.demo-multi-step-form .msf-panel) h3{font-size: 1.1rem;margin-bottom: .25rem;}:is(.demo-multi-step-form .msf-panel) input[type="text"],:is(.demo-multi-step-form .msf-panel) input[type="email"],:is(.demo-multi-step-form .msf-panel) input[type="tel"]{width: 100%;padding: .65rem .9rem;background: var(--surface-2);border: 1px solid var(--border);border-radius: var(--radius);color: var(--text);font-family: var(--font-sans);font-size: .95rem;outline: none;transition: border-color .2s;}:is(.demo-multi-step-form .msf-panel) input:focus{border-color: var(--accent);}.demo-multi-step-form .msf-actions{display: flex;gap: .5rem;margin-top: .5rem;}.demo-multi-step-form .msf-btn{display: inline-block;padding: .6rem 1.2rem;background: var(--accent);color: var(--bg);border-radius: var(--radius);font-weight: 600;font-size: .9rem;cursor: pointer;text-align: center;user-select: none;transition: opacity .15s;}:is(.demo-multi-step-form .msf-btn):hover{opacity: .85;}.demo-multi-step-form .msf-btn-back{background: var(--surface-2);color: var(--text);border: 1px solid var(--border);}.demo-multi-step-form .msf-success{text-align: center;padding: 1rem 0;color: var(--teal);font-size: 1rem;}#msf-step1:checked ~ .msf-wrap .msf-panel-1{display: flex;}#msf-step2:checked ~ .msf-wrap .msf-panel-2{display: flex;}#msf-step3:checked ~ .msf-wrap .msf-panel-3{display: flex;}#msf-step1:checked ~ .msf-wrap .msf-step-label:nth-child(1), #msf-step2:checked ~ .msf-wrap .msf-step-label:nth-child(2), #msf-step3:checked ~ .msf-wrap .msf-step-label:nth-child(3){color: var(--accent);border-bottom: 2px solid var(--accent);margin-bottom: -1px;}@media (prefers-reduced-motion: reduce){.demo-multi-step-form .msf2-track{transition: none;}}
.demo-styled-select .select-wrap{display: flex;flex-direction: column;gap: 1rem;max-width: 320px;margin: 0 auto;}.demo-styled-select label{display: block;font-size: .82rem;color: var(--text-muted);margin-bottom: .25rem;font-weight: 500;}.demo-styled-select select{appearance: none;-webkit-appearance: none;width: 100%;padding: .7rem 2.75rem .7rem 1rem;background-color: var(--surface-2);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2388888f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 1rem center;border: 2px solid var(--border);border-radius: var(--radius);color: var(--text);font-family: var(--font-sans);font-size: .95rem;cursor: pointer;outline: none;transition: border-color .2s;}:is(.demo-styled-select select):focus{border-color: var(--accent);}:is(.demo-styled-select select):hover{border-color: var(--text-muted);}.select-accent:is(.demo-styled-select select){border-color: var(--accent);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b8ff57' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}.demo-styled-select select:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}@media (prefers-reduced-motion: reduce){.demo-styled-select select, .demo-styled-select .select-shell::after{transition: none;}}
.demo-date-input .date-wrap{display: flex;flex-direction: column;gap: 1rem;max-width: 320px;margin: 0 auto;}.demo-date-input .date-field{display: flex;flex-direction: column;gap: .3rem;}.demo-date-input label{font-size: .82rem;color: var(--text-muted);font-weight: 500;}.demo-date-input input[type="date"]{appearance: none;-webkit-appearance: none;width: 100%;padding: .7rem 1rem;background: var(--surface-2);border: 2px solid var(--border);border-radius: var(--radius);color: var(--text);font-family: var(--font-sans);font-size: .95rem;outline: none;cursor: pointer;transition: border-color .2s;}:is(.demo-date-input input[type="date"]):focus{border-color: var(--accent);}:is(.demo-date-input input[type="date"]):hover{border-color: var(--text-muted);}:is(.demo-date-input input[type="date"])::-webkit-calendar-picker-indicator{filter: invert(1) opacity(.5);cursor: pointer;}:is(.demo-date-input input[type="date"])::-webkit-calendar-picker-indicator:hover{filter: invert(1) opacity(1);}:is(.demo-date-input input[type="date"])::-webkit-datetime-edit{color: var(--text);}:is(.demo-date-input input[type="date"])::-webkit-datetime-edit-fields-wrapper{padding: 0;}:is(.demo-date-input input[type="date"])::-webkit-inner-spin-button{display: none;}.date-accent:is(.demo-date-input input[type="date"]){border-color: var(--accent);}.demo-date-input input[type="date"]:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}@media (prefers-reduced-motion: reduce){.demo-date-input input[type="date"]{transition: none;}}
.demo-numeric-stepper .stepper-group{display: flex;flex-direction: column;gap: 1.25rem;max-width: 280px;margin: 0 auto;}.demo-numeric-stepper .stepper-field{display: flex;flex-direction: column;gap: .3rem;}.demo-numeric-stepper label{font-size: .82rem;color: var(--text-muted);font-weight: 500;}.demo-numeric-stepper input[type="number"]{appearance: textfield;-moz-appearance: textfield;width: 100%;padding: .7rem 1rem;background: var(--surface-2);border: 2px solid var(--border);border-radius: var(--radius);color: var(--text);font-family: var(--font-mono);font-size: 1.1rem;font-weight: 500;text-align: center;outline: none;transition: border-color .2s;}:is(.demo-numeric-stepper input[type="number"]):focus{border-color: var(--accent);}:is(.demo-numeric-stepper input[type="number"])::-webkit-inner-spin-button,:is(.demo-numeric-stepper input[type="number"])::-webkit-outer-spin-button{-webkit-appearance: none;appearance: none;}.demo-numeric-stepper .stepper-row{display: flex;align-items: center;gap: 0;border: 2px solid var(--border);border-radius: var(--radius);overflow: hidden;background: var(--surface-2);transition: border-color .2s;}:is(.demo-numeric-stepper .stepper-row):focus-within{border-color: var(--accent);}:is(.demo-numeric-stepper .stepper-row) input[type="number"]{border: none;border-radius: 0;flex: 1;background: transparent;padding: .7rem .5rem;}:is(:is(.demo-numeric-stepper .stepper-row) input[type="number"]):focus{border-color: transparent;}.demo-numeric-stepper .step-btn{width: 40px;background: var(--surface);border: none;border-left: 1px solid var(--border);color: var(--text);font-size: 1.2rem;font-weight: 300;cursor: pointer;padding: .6rem 0;line-height: 1;transition: background .15s, color .15s;font-family: var(--font-sans);}:is(.demo-numeric-stepper .step-btn):first-child{border-left: none;border-right: 1px solid var(--border);}:is(.demo-numeric-stepper .step-btn):hover{background: var(--accent-dim);color: var(--accent);}.demo-numeric-stepper input[type="number"]:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}.demo-numeric-stepper .step-btn:focus-visible{outline: 2px solid var(--accent);outline-offset: -2px;}@media (prefers-reduced-motion: reduce){.demo-numeric-stepper input[type="number"], .demo-numeric-stepper .stepper-row, .demo-numeric-stepper .step-btn, .demo-numeric-stepper .qty-opt span{transition: none;}}
.demo-color-swatch .swatch-section{display: flex;flex-direction: column;gap: 1.5rem;max-width: 340px;margin: 0 auto;}.demo-color-swatch .swatch-label{font-size: .82rem;color: var(--text-muted);font-weight: 500;margin-bottom: .4rem;}.demo-color-swatch .swatch-group{display: flex;gap: .6rem;flex-wrap: wrap;}:is(.demo-color-swatch .swatch-group) input[type="radio"]{display: none;}:is(.demo-color-swatch .swatch-group) label{display: block;width: 32px;height: 32px;border-radius: 50%;cursor: pointer;border: 3px solid transparent;outline: 2px solid transparent;outline-offset: 2px;transition: outline-color .15s, transform .15s;}:is(:is(.demo-color-swatch .swatch-group) label):hover{transform: scale(1.1);}:is(.demo-color-swatch .swatch-group) input[type="radio"]:checked + label{outline-color: var(--text);}.demo-color-swatch .swatch-group--large label{width: 42px;height: 42px;}.demo-color-swatch .selected-label{font-size: .85rem;color: var(--text-muted);margin-top: .5rem;}@media (prefers-reduced-motion: reduce){.demo-color-swatch .swatch-group label{transition: none;}}
.demo-character-count .cc-wrap{display: flex;flex-direction: column;gap: 1.5rem;max-width: 400px;margin: 0 auto;}.demo-character-count .cc-field{display: flex;flex-direction: column;gap: .4rem;}.demo-character-count label{font-size: .85rem;color: var(--text-muted);font-weight: 500;}.demo-character-count input,.demo-character-count textarea{width: 100%;padding: .75rem 1rem;background: var(--surface-2);border: 2px solid var(--border);border-radius: var(--radius);color: var(--text);font-family: var(--font-sans);font-size: .95rem;transition: border-color .2s;outline: none;}:is(.demo-character-count input,.demo-character-count textarea):focus{border-color: var(--accent);}:is(.demo-character-count input,.demo-character-count textarea):user-valid{border-color: var(--teal);}:is(.demo-character-count input,.demo-character-count textarea):user-invalid{border-color: var(--coral);}.demo-character-count textarea{resize: vertical;min-height: 80px;}.demo-character-count .cc-meta{display: flex;justify-content: space-between;font-size: .75rem;color: var(--text-muted);}.demo-character-count input:user-valid ~ .cc-meta,.demo-character-count textarea:user-valid ~ .cc-meta{color: var(--teal);}.demo-character-count input:user-invalid ~ .cc-meta,.demo-character-count textarea:user-invalid ~ .cc-meta{color: var(--coral);}.demo-character-count input:focus-visible,.demo-character-count textarea:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}@media (prefers-reduced-motion: reduce){.demo-character-count input, .demo-character-count textarea{transition: none;}}