:root{--huesys-color-bg:#f6f6f8;--huesys-color-surface:#fff;--huesys-color-border:#e2e2e8;--huesys-color-control-border:#8c8c9c;--huesys-color-text:#16161f;--huesys-color-text-muted:#6b6b78;--huesys-color-sidebar-bg:#14141f;--huesys-color-sidebar-text:#f4f4f7;--huesys-color-sidebar-text-muted:#b5b5c1;--huesys-color-sidebar-active-bg:#24242f;--huesys-color-primary:#604cf6;--huesys-color-primary-hover:#5b4be0;--huesys-color-primary-soft:#ece9fe;--huesys-color-primary-text:#fff;--huesys-color-accent:#2dd4bf;--huesys-font-family:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;--huesys-font-size-xs:.65rem;--huesys-font-size-sm:.75rem;--huesys-font-size-base:.875rem;--huesys-font-size-lg:1rem;--huesys-font-weight-regular:400;--huesys-font-weight-medium:500;--huesys-font-weight-semibold:600;--huesys-radius-sm:4px;--huesys-radius-md:8px;--huesys-radius-lg:16px;--huesys-shadow-sm:0 1px 2px #0f0f1e0f;--huesys-shadow-md:0 8px 24px #0f0f1e14;--huesys-shadow-panel:0 8px 12px #0f0f1e14;--huesys-border-width:1px;--huesys-transition-fast:.15s ease}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-base);font-weight:var(--huesys-font-weight-regular);color:var(--huesys-color-text);background-color:var(--huesys-color-bg)}.huesys-button{min-height:2.75rem;font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-base);font-weight:var(--huesys-font-weight-semibold);border-radius:var(--huesys-radius-md);border:var(--huesys-border-width) solid transparent;cursor:pointer;white-space:nowrap;transition:background-color var(--huesys-transition-fast), border-color var(--huesys-transition-fast), color var(--huesys-transition-fast);justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;display:inline-flex}.huesys-button:disabled{cursor:not-allowed;background:var(--huesys-color-bg);color:var(--huesys-color-text-muted);border-color:#0000}.huesys-button:focus-visible{outline:2px solid var(--huesys-color-primary);outline-offset:2px}.huesys-button--icon-only{flex-shrink:0;width:2.75rem;padding:0}.huesys-button--primary{background-color:var(--huesys-color-primary);color:var(--huesys-color-primary-text)}.huesys-button--primary:hover:not(:disabled){background-color:var(--huesys-color-primary-hover)}.huesys-button--soft{background-color:var(--huesys-color-primary-soft);color:var(--huesys-color-primary)}.huesys-button--soft:hover:not(:disabled){background-color:var(--huesys-color-primary);color:var(--huesys-color-primary-text)}.huesys-button--special{color:var(--huesys-color-primary-text);background:linear-gradient(270deg,#38c6b8 0%,#6f5ff5 100%);border:none}.huesys-button--special:hover:not(:disabled){background:linear-gradient(270deg,#f66676 0%,#6f5ff5 100%)}.huesys-button--outline{background-color:var(--huesys-color-surface);color:var(--huesys-color-text);border-color:var(--huesys-color-control-border)}.huesys-button--outline:hover:not(:disabled){background-color:var(--huesys-color-bg)}.huesys-button--ghost{color:var(--huesys-color-text);background-color:#0000}.huesys-button--ghost:hover:not(:disabled){background-color:var(--huesys-color-bg)}.app-header{background-color:var(--huesys-color-surface);border-bottom:var(--huesys-border-width) solid var(--huesys-color-border);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;row-gap:.75rem;padding:1rem 1.5rem;display:flex}.app-header__tagline{min-width:12rem;font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-base);font-weight:var(--huesys-font-weight-medium);color:var(--huesys-color-text);flex:auto;margin:0}.app-header__actions{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.5rem;display:flex}@media (width<=768px){.app-header__actions{z-index:20;padding:.75rem 1rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom));background-color:var(--huesys-color-surface);flex-wrap:nowrap;gap:.75rem;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -1px 4px #0f0f1e14}.app-header__actions>:last-child{margin-left:auto}}.mobile-header{background-color:var(--huesys-color-sidebar-bg);justify-content:center;align-items:center;height:3.25rem;padding:0 1rem;display:none}.mobile-header svg{width:7.75rem;height:auto;display:block}@media (width<=1100px){.mobile-header{display:flex}}.nav-item{width:100%;font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-sm);font-weight:var(--huesys-font-weight-medium);color:var(--huesys-color-sidebar-text-muted);border-radius:var(--huesys-radius-md);cursor:pointer;text-align:left;transition:background-color var(--huesys-transition-fast), color var(--huesys-transition-fast);background:0 0;border:none;align-items:center;gap:.625rem;padding:.625rem .75rem;display:flex}.nav-item:hover{color:var(--huesys-color-sidebar-text)}.nav-item:focus-visible{outline:2px solid var(--huesys-color-primary);outline-offset:2px}.nav-item--active{background-color:var(--huesys-color-sidebar-active-bg);color:var(--huesys-color-sidebar-text)}.nav-item--active .nav-item__icon svg{stroke:url(#nav-icon-gradient)}.nav-item__icon{flex-shrink:0;display:inline-flex}.sidebar{background-color:var(--huesys-color-sidebar-bg);width:15rem;color:var(--huesys-color-sidebar-text);flex-direction:column;flex-shrink:0;padding:1.5rem 1rem;display:flex;overflow-y:auto}@media (width<=1100px){.sidebar{display:none}}.sidebar__brand{margin:0 0 2rem;padding:0 .5rem}.sidebar__brand svg{width:8.75rem;height:auto;display:block}.sidebar__section-label{font-size:.6875rem;font-weight:var(--huesys-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--huesys-color-sidebar-text-muted);margin-bottom:.5rem;padding:0 .5rem}.sidebar__nav{flex-direction:column;gap:.25rem;display:flex}.sidebar__footer{color:var(--huesys-color-sidebar-text-muted);margin:auto 0 0;padding:0 .5rem;font-size:.75rem}.top-nav{background-color:var(--huesys-color-surface);border-bottom:var(--huesys-border-width) solid var(--huesys-color-border);align-items:center;gap:.25rem;padding:0 1rem;display:none;overflow-x:auto}@media (width<=1100px){.top-nav{display:flex}}.top-nav__item{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-base);font-weight:var(--huesys-font-weight-medium);color:var(--huesys-color-text-muted);cursor:pointer;transition:color var(--huesys-transition-fast), border-color var(--huesys-transition-fast);background:0 0;border:none;border-bottom:2px solid #0000;flex-shrink:0;align-items:center;gap:.5rem;padding:.875rem .75rem;display:flex}.top-nav__item:hover{color:var(--huesys-color-text)}.top-nav__item:focus-visible{outline:2px solid var(--huesys-color-primary);outline-offset:-2px}.top-nav__item--active{color:var(--huesys-color-primary);font-weight:var(--huesys-font-weight-semibold);border-bottom-color:var(--huesys-color-primary)}.top-nav__icon{display:inline-flex}.segmented-control{background-color:var(--huesys-color-bg);border-radius:var(--huesys-radius-md);gap:.5rem;width:100%;min-height:2.75rem;padding:.25rem;display:flex}.segmented-control__option{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-base);font-weight:var(--huesys-font-weight-semibold);color:var(--huesys-color-text-muted);border-radius:var(--huesys-radius-sm);cursor:pointer;transition:background-color var(--huesys-transition-fast), color var(--huesys-transition-fast);background:0 0;border:1px dashed #0000;flex:1;padding:.4rem 1rem}.segmented-control__option:hover:not(.segmented-control__option--active),.segmented-control__option:active:not(.segmented-control__option--active){color:var(--huesys-color-text);background-color:var(--huesys-color-border)}.segmented-control__option:focus-visible{border-color:var(--huesys-color-text-muted)}.segmented-control__option--active{background-color:var(--huesys-color-surface);color:var(--huesys-color-text);box-shadow:var(--huesys-shadow-sm)}.huesys-input{width:100%;min-height:2.75rem;font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-base);color:var(--huesys-color-text);background-color:var(--huesys-color-surface);border:var(--huesys-border-width) solid var(--huesys-color-control-border);border-radius:var(--huesys-radius-md);transition:border-color var(--huesys-transition-fast);padding:.5rem 1rem}.huesys-input::placeholder{color:var(--huesys-color-text-muted)}.huesys-input:hover:not(:disabled){border-color:var(--huesys-color-text-muted)}.huesys-input:disabled{cursor:not-allowed;opacity:.6}.huesys-input:focus-visible{outline:2px solid var(--huesys-color-primary);outline-offset:2px}.custom-color-control{grid-template-columns:repeat(auto-fit,minmax(4.75rem,1fr));gap:1rem;display:grid}.custom-color-control__field{flex-direction:column;gap:.375rem;min-width:0;display:flex}.custom-color-control__swatch{border-radius:var(--huesys-radius-sm);cursor:pointer;background:0 0;border:none;width:100%;height:3.125rem;padding:0}.custom-color-control__swatch::-webkit-color-swatch-wrapper{padding:0}.custom-color-control__swatch::-webkit-color-swatch{border-radius:calc(var(--huesys-radius-sm) - 1px);border:none}.custom-color-control__swatch::-moz-color-swatch{border-radius:calc(var(--huesys-radius-sm) - 1px);border:none}.custom-color-control__swatch:focus-visible{outline:2px solid var(--huesys-color-primary);outline-offset:2px}.custom-color-control__hex{font-size:var(--huesys-font-size-sm);text-align:center;min-height:2rem;padding-left:.5rem;padding-right:.5rem}.palette-control{flex-direction:column;gap:1rem;display:flex}.palette-control__base{flex-direction:column;gap:.5rem;display:flex}.palette-control__label{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-sm);font-weight:var(--huesys-font-weight-semibold);letter-spacing:.03em;text-transform:uppercase;color:var(--huesys-color-text-muted)}.palette-control__base-row{align-items:center;gap:.75rem;display:flex}.palette-control__swatch{cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;width:2.75rem;height:2.75rem;padding:0}.palette-control__swatch::-webkit-color-swatch-wrapper{padding:0}.palette-control__swatch::-webkit-color-swatch{border:none;border-radius:50%}.palette-control__swatch::-moz-color-swatch{border:none;border-radius:50%}.palette-control__swatch:focus-visible{outline:2px solid var(--huesys-color-primary);outline-offset:2px}.palette-control__hex{flex:1;min-width:0}.color-control{flex-direction:column;gap:1.5rem;display:flex}.color-control__mode{flex-direction:column;gap:.5rem;display:flex}.color-control__label{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-sm);font-weight:var(--huesys-font-weight-semibold);letter-spacing:.03em;text-transform:uppercase;color:var(--huesys-color-text-muted)}.huesys-select-wrapper{width:100%;display:block;position:relative}.huesys-select-wrapper:after{content:"";background-color:var(--huesys-color-text-muted);pointer-events:none;width:.75rem;height:.75rem;position:absolute;top:50%;right:.75rem;transform:translateY(-50%);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.huesys-select{appearance:none;width:100%;min-height:2.75rem;font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-base);color:var(--huesys-color-text);background-color:var(--huesys-color-surface);border:var(--huesys-border-width) solid var(--huesys-color-control-border);border-radius:var(--huesys-radius-md);cursor:pointer;transition:border-color var(--huesys-transition-fast);padding:.5rem 2rem .5rem 1rem}.huesys-select:hover{border-color:var(--huesys-color-text-muted)}.huesys-select:focus-visible{outline:2px solid var(--huesys-color-primary);outline-offset:2px}.style-control{flex-direction:column;gap:2rem;display:flex}.style-control__field{flex-direction:column;gap:.5rem;display:flex}.style-control__field-label{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-sm);font-weight:var(--huesys-font-weight-semibold);letter-spacing:.03em;text-transform:uppercase;color:var(--huesys-color-text-muted)}.typography-control{flex-direction:column;gap:2rem;display:flex}.typography-control__field{flex-direction:column;gap:.5rem;display:flex}.typography-control__field-label{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-sm);font-weight:var(--huesys-font-weight-semibold);letter-spacing:.03em;text-transform:uppercase;color:var(--huesys-color-text-muted)}.generated-palette{flex-direction:column;gap:1.5rem;display:flex}.generated-palette__title{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.generated-palette__group{flex-direction:column;gap:.75rem;display:flex}.generated-palette__label{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-sm);font-weight:var(--huesys-font-weight-semibold);letter-spacing:.03em;text-transform:uppercase;color:var(--huesys-color-text-muted);margin:0}.generated-palette__row{flex-wrap:wrap;justify-content:flex-start;gap:1rem;display:flex}.generated-palette__announcer{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.palette-swatch{flex-direction:column;flex-shrink:0;align-items:flex-start;gap:.25rem;width:3.125rem;display:flex}.palette-swatch__button{aspect-ratio:1;border-radius:var(--huesys-radius-sm);cursor:pointer;border:none;width:100%;padding:0}.palette-swatch__button:focus-visible{outline:2px solid var(--huesys-color-primary);outline-offset:2px}.palette-swatch__tooltip{z-index:50;border:var(--huesys-border-width) solid var(--huesys-color-border);border-radius:var(--huesys-radius-sm);background-color:var(--huesys-color-surface);color:var(--huesys-color-text);font-family:var(--huesys-font-family);font-size:.75rem;font-weight:var(--huesys-font-weight-medium);white-space:nowrap;box-shadow:var(--huesys-shadow-sm);pointer-events:none;padding:.25rem .5rem;position:fixed;transform:translate(-50%,calc(-100% - .375rem))}.palette-swatch__label{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-xs);color:var(--huesys-color-text-muted);text-align:center}.options-panel{background-color:var(--huesys-color-surface);border:var(--huesys-border-width) solid var(--huesys-color-border);border-radius:var(--huesys-radius-lg);min-width:18rem;max-height:100%;box-shadow:var(--huesys-shadow-panel);flex-direction:column;flex:1 1 0;align-self:flex-start;display:flex;overflow-y:auto}@media (width<=768px){.options-panel{flex:none;align-self:auto;width:100%;min-width:0;max-height:none;overflow-y:visible}}.options-panel__header{border-bottom:var(--huesys-border-width) solid var(--huesys-color-border);padding:1.5rem}.options-panel__title{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-lg);font-weight:var(--huesys-font-weight-semibold);color:var(--huesys-color-text);margin:0 0 .25rem}.options-panel__description{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-sm);color:var(--huesys-color-text-muted);margin:0}.options-panel__content{flex-direction:column;gap:2rem;padding:1.5rem;display:flex}.alert{gap:var(--space-2);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-body);color:var(--color-text);padding:var(--space-4);border-radius:var(--radius-md);border:var(--border-width) solid var(--color-border);box-shadow:var(--shadow-md);background-color:#fff;flex-direction:column;display:flex}.alert--info{border-color:var(--color-info)}.alert--success{border-color:var(--color-success)}.alert--warning{border-color:var(--color-warning)}.alert--danger{border-color:var(--color-danger)}.alert__header{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.alert__title-group{align-items:center;gap:var(--space-3);min-width:0;display:flex}.alert__title{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-control);color:inherit;margin:0}.alert__description{color:var(--color-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-body);margin:0}.alert__description p{margin:0}.alert__icon{flex-shrink:0;width:1.25rem;height:1.25rem;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.alert__icon--info{background-color:var(--color-info);-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E")}.alert__icon--success{background-color:var(--color-success);-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}.alert__icon--warning{background-color:var(--color-warning);-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}.alert__icon--danger{background-color:var(--color-danger);-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E")}.alert__close{border-radius:var(--radius-sm);width:1.25rem;height:1.25rem;color:inherit;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0;position:relative}.alert__close:before{content:"";background-color:currentColor;position:absolute;inset:0;-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.alert__close:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.badge{font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-control);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);white-space:nowrap;align-items:center;line-height:1;display:inline-flex}.badge--neutral{background-color:var(--color-surface);color:var(--color-text-muted)}.badge--primary{background-color:var(--color-secondary);color:var(--color-secondary-text)}.badge--accent{background-color:var(--color-accent-surface);color:var(--color-accent-surface-text)}.badge--success{background-color:var(--color-success-surface);color:var(--color-success-text)}.badge--warning{background-color:var(--color-warning-surface);color:var(--color-warning-text)}.badge--danger{background-color:var(--color-danger-surface);color:var(--color-danger-text)}.button{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-control);border-radius:var(--radius-full);border:var(--border-width) solid transparent;padding:var(--space-2) var(--space-4);cursor:pointer;transition:background-color var(--transition-fast), border-color var(--transition-fast)}.button:disabled{cursor:not-allowed;background-color:var(--color-disabled);color:var(--color-disabled-text);border-color:#0000}.button:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.button--primary{background-color:var(--color-primary);color:var(--color-primary-text)}.button--primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.button--primary:active:not(:disabled){background-color:var(--color-primary-active)}.button--secondary{background-color:var(--color-secondary);color:var(--color-secondary-text)}.button--secondary:hover:not(:disabled){background-color:var(--color-secondary-hover)}.button--secondary:active:not(:disabled){filter:brightness(.96)}.button--outline{color:var(--color-secondary-text);border-color:var(--color-secondary-text);background-color:#0000}.button--outline:hover:not(:disabled){background-color:var(--color-secondary)}.button--ghost{color:var(--color-secondary-text);background-color:#0000}.button--ghost:hover:not(:disabled){background-color:var(--color-secondary)}.card{align-items:flex-start;gap:var(--space-3);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-body);color:var(--color-text);background-color:var(--color-background);border:var(--border-width) solid var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-5);flex-direction:column;display:flex}.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,.card p{margin:0}.checkbox{align-items:center;gap:var(--space-2);cursor:pointer;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-body);color:var(--color-text);display:inline-flex}.checkbox:has(:disabled){cursor:not-allowed;opacity:.6}.checkbox__input{appearance:none;border:var(--border-width) solid var(--color-border);border-radius:min(var(--radius-sm), 8px);background-color:var(--color-background);width:1.125rem;height:1.125rem;transition:background-color var(--transition-fast), border-color var(--transition-fast);flex-shrink:0;place-content:center;margin:0;display:grid}.checkbox__input:hover:not(:disabled):not(:checked){border-color:var(--color-border-strong)}.checkbox__input:before{content:"";background-color:var(--color-primary-text);width:.65rem;height:.65rem;transition:transform var(--transition-fast);transform:scale(0);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.checkbox__input:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox__input:checked:before{transform:scale(1)}.checkbox__input:disabled{cursor:not-allowed}.checkbox__input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.input{width:100%;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-body);color:var(--color-text);background-color:var(--color-field-background);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full);padding:var(--space-2) var(--space-3);transition:border-color var(--transition-fast)}.input::placeholder{color:var(--color-text-muted)}.input:hover:not(:disabled){border-color:var(--color-border-strong)}.input:disabled{cursor:not-allowed;background-color:var(--color-disabled);border-color:var(--color-border);color:var(--color-disabled-text)}.input[aria-invalid=true]{border-color:var(--color-danger)}.input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-color:var(--color-focus-ring)}.input[aria-invalid=true]:focus-visible{border-color:var(--color-danger)}.radio{align-items:center;gap:var(--space-2);cursor:pointer;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-body);color:var(--color-text);display:inline-flex}.radio:has(:disabled){cursor:not-allowed;opacity:.6}.radio__input{appearance:none;border:var(--border-width) solid var(--color-border);background-color:var(--color-background);width:1.125rem;height:1.125rem;transition:background-color var(--transition-fast), border-color var(--transition-fast);border-radius:50%;flex-shrink:0;place-content:center;margin:0;display:grid}.radio__input:hover:not(:disabled):not(:checked){border-color:var(--color-border-strong)}.radio__input:before{content:"";background-color:var(--color-primary-text);width:.5rem;height:.5rem;transition:transform var(--transition-fast);border-radius:50%;transform:scale(0)}.radio__input:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.radio__input:checked:before{transform:scale(1)}.radio__input:disabled{cursor:not-allowed}.radio__input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.select-wrapper{width:100%;display:inline-block;position:relative}.select-wrapper:after{content:"";top:50%;right:var(--space-3);background-color:var(--color-text-muted);pointer-events:none;width:.75rem;height:.75rem;position:absolute;transform:translateY(-50%);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.select{width:100%;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-body);color:var(--color-text);background-color:var(--color-field-background);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full);padding:var(--space-2) var(--space-3);transition:border-color var(--transition-fast)}.select::placeholder{color:var(--color-text-muted)}.select:hover:not(:disabled){border-color:var(--color-border-strong)}.select:disabled{cursor:not-allowed;background-color:var(--color-disabled);border-color:var(--color-border);color:var(--color-disabled-text)}.select[aria-invalid=true]{border-color:var(--color-danger)}.select:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-color:var(--color-focus-ring)}.select[aria-invalid=true]:focus-visible{border-color:var(--color-danger)}.select{appearance:none;padding-right:var(--space-6);cursor:pointer}.select:hover:not(:disabled){background-color:color-mix(in oklab, var(--color-border) 25%, var(--color-surface))}.select:disabled{cursor:not-allowed}.switch{align-items:center;gap:var(--space-2);cursor:pointer;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-body);color:var(--color-text);display:inline-flex}.switch:has(:disabled){cursor:not-allowed;color:var(--color-disabled-text)}.switch__input{appearance:none;background-color:var(--color-text-muted);width:2.25rem;height:1.25rem;transition:background-color var(--transition-fast);border:none;border-radius:9999px;flex-shrink:0;margin:0;position:relative}.switch__input:before{content:"";width:.85rem;height:.85rem;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast);background-color:#fff;border-radius:50%;position:absolute;top:50%;left:.15rem;transform:translateY(-50%)}.switch__input:checked{background-color:var(--color-primary)}.switch__input:checked:before{transform:translateY(-50%)translate(1rem)}.switch__input:disabled{cursor:not-allowed;background-color:var(--color-disabled)}.switch__input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.textarea{width:100%;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-body);color:var(--color-text);background-color:var(--color-field-background);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);transition:border-color var(--transition-fast)}.textarea::placeholder{color:var(--color-text-muted)}.textarea:hover:not(:disabled){border-color:var(--color-border-strong)}.textarea:disabled{cursor:not-allowed;background-color:var(--color-disabled);border-color:var(--color-border);color:var(--color-disabled-text)}.textarea[aria-invalid=true]{border-color:var(--color-danger)}.textarea:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-color:var(--color-focus-ring)}.textarea[aria-invalid=true]:focus-visible{border-color:var(--color-danger)}.textarea{resize:vertical;min-height:6rem}.component-preview{flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.component-preview__gallery{column-width:20rem;column-gap:1rem}.component-preview__section{border:var(--border-width) solid var(--color-border);border-radius:var(--huesys-radius-md);flex-direction:column;gap:1rem;min-width:0;padding:1.5rem;display:flex}.component-preview__gallery>.component-preview__section{break-inside:avoid;margin-bottom:1rem}.component-preview__heading{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);margin:0;font-size:.8125rem;font-weight:600}.component-preview__stage{background-color:#0000}.component-preview__typography{flex-direction:column;gap:.75rem;display:flex}.component-preview__type-lg{font-family:var(--font-family);font-size:var(--font-size-lg);font-weight:var(--font-weight-control);color:var(--color-text);margin:0}.component-preview__type-base{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-body);color:var(--color-text);margin:0}.component-preview__type-sm{font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-body);color:var(--color-text-muted);margin:0}.component-preview__row{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.component-preview__column{flex-direction:column;align-items:flex-start;gap:1rem;max-width:24rem;display:flex}.component-preview__card{border:var(--huesys-border-width) solid var(--huesys-color-border);max-width:24rem;box-shadow:var(--shadow-md);background-color:#fff}.component-preview__fieldset{border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-family);flex-direction:column;gap:.5rem;margin:0;padding:.75rem 1rem;display:flex}.component-preview__fieldset legend{color:var(--color-text-muted);padding:0 .25rem;font-size:.8125rem}.live-preview{background-color:var(--huesys-color-surface);border:var(--huesys-border-width) solid var(--huesys-color-border);border-radius:var(--huesys-radius-lg);min-width:0;box-shadow:var(--huesys-shadow-panel);flex-direction:column;flex:2 1 0;display:flex;overflow:hidden}@media (width<=768px){.live-preview{flex:none;width:100%;overflow:visible}}.live-preview__header{border-bottom:var(--huesys-border-width) solid var(--huesys-color-border);padding:1.5rem}.live-preview__title{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-lg);font-weight:var(--huesys-font-weight-semibold);color:var(--huesys-color-text);margin:0 0 .25rem}.live-preview__description{font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-sm);color:var(--huesys-color-text-muted);margin:0}.live-preview__scroll{background-color:#fff;flex:1;overflow-y:auto;container-type:inline-size}@media (width<=768px){.live-preview__scroll{border-bottom-left-radius:var(--huesys-radius-lg);border-bottom-right-radius:var(--huesys-radius-lg);flex:none;overflow-y:visible}}.export-dialog{border-radius:var(--huesys-radius-lg);width:min(28rem,100vw - 2rem);max-width:100%;max-height:min(32rem,100vh - 4rem);box-shadow:var(--huesys-shadow-md);background-color:var(--huesys-color-surface);color:var(--huesys-color-text);font-family:var(--huesys-font-family);border:none;padding:0}.export-dialog::backdrop{background-color:#0f0f1e73}.export-dialog__header{justify-content:space-between;align-items:center;gap:.75rem;padding:1.25rem 1.25rem .75rem;display:flex}.export-dialog__title{font-size:var(--huesys-font-size-lg);font-weight:var(--huesys-font-weight-semibold);margin:0}.export-dialog__close{border-radius:var(--huesys-radius-sm);width:2rem;height:2rem;color:var(--huesys-color-text-muted);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.export-dialog__close:hover{background-color:var(--huesys-color-bg);color:var(--huesys-color-text)}.export-dialog__close:focus-visible{outline:2px solid var(--huesys-color-primary);outline-offset:2px}.export-dialog__options{flex-direction:column;gap:.75rem;padding:.5rem 1.25rem 1.25rem;display:flex}.export-dialog__option{border:var(--huesys-border-width) solid var(--huesys-color-border);border-radius:var(--huesys-radius-md);flex-direction:column;align-items:flex-start;gap:.5rem;padding:1rem;display:flex}.export-dialog__option-title{font-size:var(--huesys-font-size-base);font-weight:var(--huesys-font-weight-semibold);margin:0}.export-dialog__option-description{font-size:var(--huesys-font-size-sm);color:var(--huesys-color-text-muted);margin:0}.export-dialog__action{align-self:stretch;margin-top:.25rem}.export-dialog__error{border-radius:var(--huesys-radius-sm);background-color:var(--huesys-color-bg);color:var(--huesys-color-text);font-size:var(--huesys-font-size-sm);margin:0 1.25rem 1.25rem;padding:.75rem}.export-dialog__retry{color:var(--huesys-color-primary);font:inherit;font-weight:var(--huesys-font-weight-semibold);cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.app{height:100svh;display:flex;overflow:hidden}@media (width<=768px){.app{height:auto;display:block;overflow:visible}}.workspace{background-color:var(--huesys-color-bg);flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}@media (width<=768px){.workspace{min-height:100svh}}.workspace__content{background:linear-gradient(124deg, #f6f6f6 70.19%, var(--workspace-gradient-accent,#6f60f5) 100%);flex:1;gap:1rem;min-height:0;padding:1rem;display:flex}@media (width<=768px){.workspace__content{height:auto;padding-bottom:calc(5rem + env(safe-area-inset-bottom));flex-direction:column}}.sidebar,.options-panel,.live-preview{min-height:0}.skip-link{z-index:100;background-color:var(--huesys-color-primary);color:var(--huesys-color-primary-text);font-family:var(--huesys-font-family);font-size:var(--huesys-font-size-base);font-weight:var(--huesys-font-weight-semibold);border-radius:var(--huesys-radius-md);transition:top var(--huesys-transition-fast);padding:.625rem 1rem;text-decoration:none;position:fixed;top:-3rem;left:1rem}.skip-link:focus-visible{outline:2px solid var(--huesys-color-primary-text);outline-offset:2px;top:1rem}