.app-root{display:flex;height:100vh;background:var(--background);color:var(--foreground);font-family:var(--font-sans);letter-spacing:var(--tracking, 0em)}.theme-list{width:200px;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--card);flex-shrink:0}.theme-list__header{padding:0 16px;font-size:var(--text-lg);font-weight:600;display:flex;align-items:center;box-sizing:border-box}.theme-list__tabs{display:flex;border-bottom:1px solid var(--border);padding:0 8px}.theme-list__body{flex:1;overflow-y:auto;padding:8px 0}.theme-list__section{margin-bottom:8px}.theme-list__section-label{font-size:var(--text-xs);color:var(--muted-foreground);padding:4px 16px;letter-spacing:.05em}.theme-item{padding:6px 16px;font-size:var(--text-md);color:var(--muted-foreground);background:transparent;cursor:pointer;display:flex;align-items:center;gap:8px}.theme-item--active{color:var(--primary);background:var(--accent)}.theme-item__dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}.theme-add-button{padding:6px 16px;font-size:var(--text-md);color:var(--muted-foreground);cursor:pointer}.theme-tab-btn{flex:1;padding:8px 4px;font-size:var(--text-sm);font-weight:400;color:var(--muted-foreground);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px}.theme-tab-btn--active{font-weight:600;color:var(--foreground);border-bottom:2px solid var(--primary)}.theme-create-form{padding:6px 16px;display:flex;flex-direction:column;gap:6px}.theme-create-form__input{padding:4px 8px;font-size:var(--text-sm);background:var(--background);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--foreground)}.theme-create-form__actions{display:flex;gap:6px}.theme-create-form__btn{flex:1;padding:4px;font-size:var(--text-xs);border-radius:var(--radius-sm);cursor:pointer}.theme-create-form__btn--submit{background:var(--primary);color:var(--primary-foreground);border:none}.theme-create-form__btn--cancel{background:transparent;color:var(--muted-foreground);border:1px solid var(--border)}.reference-list{padding:8px 0}.reference-item{padding:6px 16px;font-size:var(--text-md);color:var(--muted-foreground);cursor:pointer}.reference-item:hover{color:var(--foreground)}.preview{flex:1;display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden}.preview__header{height:48px;padding:0 calc(var(--spacing-unit) * 4);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--card);box-sizing:border-box}.preview__header-title{font-size:var(--text-sm);color:var(--muted-foreground)}.preview__header-spacer{flex:1}.preview__body{flex:1;overflow-y:auto;padding:calc(var(--spacing-unit) * 6);display:flex;flex-direction:column;gap:24px;background:var(--background)}.preview-section{cursor:default;display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 2)}.preview-source{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 2)}.preview-section--clickable{cursor:pointer}.preview-section__label{font-size:var(--text-xs);color:var(--muted-foreground);margin-bottom:10px;letter-spacing:.05em}.preview-row{display:flex;gap:8px;flex-wrap:wrap}.preview-row--tight{display:flex;gap:6px;flex-wrap:wrap}.preview-hint{font-size:var(--text-xs);color:var(--warning);margin-top:6px}.preview-input{width:100%;padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);background:color-mix(in srgb,var(--input) 30%,transparent);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--foreground);font-size:var(--text-md);outline:none;transition:box-shadow .15s ease;box-sizing:border-box}.preview-input::placeholder{color:var(--muted-foreground)}.preview-input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 30%,transparent)}.preview-input[aria-invalid=true]{border-color:var(--destructive)}.preview-input[aria-invalid=true]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--destructive) 30%,transparent)}.preview-input:disabled{opacity:.5;cursor:not-allowed}.preview-input--phone-demo{display:flex;align-items:center;gap:calc(var(--spacing-unit) * 2);color:var(--muted-foreground)}.preview-input--phone-demo__flag{width:calc(var(--spacing-unit) * 5);border-radius:2px;line-height:1}.preview-input-demo-grid{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 3);max-width:320px}.preview-textarea-demo{min-height:96px;resize:none;font-family:inherit;text-align:left;vertical-align:top}.mode-btn{padding:calc(var(--spacing-unit) * .75) calc(var(--spacing-unit) * 2.5);font-size:var(--text-sm);border:1px solid var(--border);border-radius:var(--radius-md);background:transparent;color:var(--muted-foreground);cursor:pointer;font-weight:400}.mode-btn--active{background:var(--muted);color:var(--foreground);font-weight:500}.preview-btn{padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);border-radius:var(--radius-md);font-size:var(--text-md);font-weight:500;cursor:pointer}.preview-btn--primary{background:var(--primary);color:var(--primary-foreground);border:none;box-shadow:var(--shadow-sm)}.preview-btn--secondary{background:var(--secondary);color:var(--secondary-foreground);border:none;box-shadow:var(--shadow-sm)}.preview-btn--ghost{background:transparent;color:var(--accent-foreground);border:1px solid var(--border);box-shadow:none}.preview-btn--danger{background:var(--destructive);color:var(--destructive-foreground);border:none;box-shadow:var(--shadow-sm)}.preview-btn--success{background:var(--success);color:var(--success-foreground);border:none;box-shadow:var(--shadow-sm)}.preview-btn--primary:hover{background:color-mix(in oklab,var(--primary) 90%,transparent)}.preview-btn--secondary:hover{background:color-mix(in oklab,var(--secondary) 80%,transparent)}.preview-btn--ghost:hover{background:var(--accent);color:var(--accent-foreground)}.preview-btn--danger:hover{background:color-mix(in oklab,var(--destructive) 90%,transparent)}.preview-btn--success:hover{background:color-mix(in oklab,var(--success) 90%,transparent)}.preview-badge{padding:calc(var(--spacing-unit) * .5) calc(var(--spacing-unit) * 2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500;border:1px solid var(--border)}.typography-showcase{display:flex;flex-direction:column;gap:8px}.typography-showcase__title{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:600;color:var(--foreground)}.typography-showcase__section{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:500;color:var(--foreground)}.typography-showcase__body{font-size:var(--text-md);color:var(--foreground)}.typography-showcase__caption{font-size:var(--text-sm);color:var(--muted-foreground)}.typography-showcase__mono{font-family:var(--font-mono);font-size:var(--text-md);color:var(--foreground)}.typography-showcase__label{font-size:var(--text-xs);color:var(--muted-foreground);letter-spacing:.05em}.typography-showcase__mono{display:block;font-family:var(--font-mono);font-size:var(--text-md);color:var(--foreground);letter-spacing:normal;margin-top:4px}.preview-selected-outline{outline:2px solid var(--warning);outline-offset:2px;cursor:pointer}.sidebar-primitive{width:260px;height:100%;background-color:var(--sidebar);color:var(--sidebar-foreground);border:1px solid var(--sidebar-border);border-radius:var(--radius-lg);box-sizing:border-box;display:flex;flex-direction:column;gap:4px;padding:8px 0}.sidebar-primitive__item{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:0 8px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:400;cursor:pointer;background-color:transparent;color:inherit}.sidebar-primitive__item:hover{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.sidebar-primitive__item--active{font-weight:500;background-color:var(--sidebar-primary);color:var(--sidebar-primary-foreground)}.preview-block{width:100%;padding:calc(var(--spacing-unit) * 6);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);box-sizing:border-box}.preview-table{width:100%;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-sizing:border-box}.preview-table table{width:100%;border-collapse:collapse}.preview-table thead tr{background:var(--card)}.preview-table th{padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);text-align:left;font-size:var(--text-sm);font-weight:500;color:var(--muted-foreground);border-bottom:1px solid var(--border)}.preview-table td{padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);font-size:var(--text-md);color:var(--foreground);border-bottom:1px solid var(--border)}.preview-table tbody tr:last-child td{border-bottom:none}.preview-table tbody tr:hover{background:var(--accent)}.preview-table tbody tr:hover td{color:var(--accent-foreground)}.block-registry{gap:calc(var(--spacing-unit) * 4)}.block-registry__hint{font-size:var(--text-sm);color:var(--muted-foreground)}.block-registry__list{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 1)}.block-registry__item{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);cursor:pointer}.block-registry__item:hover{background:var(--accent)}.block-registry__item--active{background:var(--accent);border-color:var(--primary)}.block-registry__item-label{font-size:var(--text-md);color:var(--foreground)}.block-registry__item-badge{font-size:var(--text-xs);color:var(--muted-foreground)}.block-registry__card{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 3);padding:calc(var(--spacing-unit) * 4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-sm)}.block-registry__card-header{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:calc(var(--spacing-unit) * 2)}.block-registry__card-title{font-size:var(--text-md);font-weight:500;color:var(--foreground)}.block-registry__card-version{font-size:var(--text-xs);color:var(--muted-foreground);font-family:var(--font-mono)}.block-registry__card-section{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 1)}.block-registry__card-label{font-size:var(--text-xs);color:var(--muted-foreground);letter-spacing:.05em}.block-registry__card-text{font-size:var(--text-sm);color:var(--foreground);line-height:1.5}.block-registry__card-mono{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--foreground);white-space:pre-wrap;word-break:break-word}.block-registry__card-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--spacing-unit) * 3)}.block-registry__card-box{padding:calc(var(--spacing-unit) * 2);background:var(--background);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 1)}.block-registry__card-files{display:flex;gap:calc(var(--spacing-unit) * 1);flex-wrap:wrap}.block-registry__file-chip{padding:calc(var(--spacing-unit) * .5) calc(var(--spacing-unit) * 2);background:var(--muted);color:var(--muted-foreground);border-radius:var(--radius-md);font-size:var(--text-xs);font-family:var(--font-mono)}.block-registry__card-editable{padding:calc(var(--spacing-unit) * 1.5);border-radius:var(--radius-md);border:1px solid transparent;cursor:text}.block-registry__card-editable:hover{border-color:var(--border)}.block-registry__card-editable:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 30%,transparent);background:var(--card)}.block-registry__richtext-editor{border-radius:var(--radius-md);border:1px solid var(--border);background:var(--card);overflow:hidden}.block-registry__richtext-editor:focus-within{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 30%,transparent)}.block-registry__richtext-toolbar{display:flex;align-items:center;padding:calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);border-bottom:1px solid var(--border);background:var(--background)}.block-registry__richtext-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--card);color:var(--foreground);font-size:var(--text-xs);cursor:pointer}.block-registry__richtext-btn:hover{background:var(--muted)}.block-registry__richtext-content{display:block;width:100%;min-height:6em;padding:calc(var(--spacing-unit) * 1.5);color:var(--foreground);font-size:var(--text-sm);line-height:1.5;box-sizing:border-box;outline:none;white-space:pre-wrap;word-break:break-word}.global-panel-group{padding:8px 16px;border-bottom:1px solid var(--border)}.global-panel-group__label{font-size:var(--text-xs);color:var(--muted-foreground);margin-bottom:8px;letter-spacing:.05em}.global-panel-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.global-panel-row__label{flex:1;font-size:var(--text-sm);color:var(--muted-foreground)}.global-panel-row__number-input{width:72px;padding:2px 6px;font-size:var(--text-xs);background:var(--background);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--foreground);font-family:var(--font-mono)}.global-panel-row__color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:30px;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:0;background:none;overflow:hidden}.global-panel-row__color-input::-webkit-color-swatch-wrapper{padding:0;margin:0;border-radius:calc(var(--radius-sm) - 2px);overflow:hidden;box-sizing:border-box}.global-panel-row__color-input::-webkit-color-swatch{border:none;border-width:0;border-style:none;outline:none;border-radius:calc(var(--radius-sm) - 2px);box-sizing:border-box}.global-panel-row--slider{gap:6px}.global-panel-row__slider-input{flex:2;accent-color:var(--primary);cursor:pointer}.global-panel-row__slider-value{width:30px;flex-shrink:0;text-align:right;font-size:var(--text-xs);color:var(--foreground);font-family:var(--font-mono);font-variant-numeric:tabular-nums}.token-panel{width:280px;display:flex;flex-direction:column;background:var(--card);flex-shrink:0}.token-panel--empty{width:280px;display:flex;align-items:center;justify-content:center;color:var(--muted-foreground);font-size:var(--text-sm);flex-shrink:0}.token-panel__header{height:48px;padding:0 16px;border-bottom:1px solid var(--border);font-family:var(--font-heading);font-size:var(--text-md);font-weight:500;display:flex;align-items:center;gap:8px;box-sizing:border-box}.token-panel__back-btn{background:none;border:none;color:var(--muted-foreground);cursor:pointer;font-size:var(--text-sm);padding:0}.token-panel__breadcrumb{padding:6px 16px;font-size:var(--text-xs);color:var(--muted-foreground);border-bottom:1px solid var(--border);cursor:pointer}.token-panel__body{flex:1;overflow-y:auto;padding:8px 0}.token-group{padding:8px 16px;border-bottom:1px solid var(--border)}.token-group__label{font-size:var(--text-xs);color:var(--muted-foreground);margin-bottom:8px;letter-spacing:.05em}.token-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.token-row__label{flex:1;font-size:var(--text-sm);color:var(--muted-foreground)}.token-row__text-input{width:64px;padding:2px 6px;font-size:var(--text-xs);background:var(--background);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--foreground);font-family:var(--font-mono)}.token-row__color-group,.token-row__unit-group{display:flex;align-items:center;gap:4px}.font-select{position:relative;width:140px}.font-select__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:calc(var(--spacing-unit) * .5) calc(var(--spacing-unit) * 1.5);font-size:var(--text-xs);background:var(--background);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--foreground);cursor:pointer;text-align:left}.font-select__trigger:hover{border-color:var(--ring)}.font-select__chevron{font-size:8px;color:var(--muted-foreground);flex-shrink:0}.font-select__menu{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:240px;overflow-y:auto;background:var(--popover);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:20}.font-select__option{padding:calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 1.5);font-size:var(--text-sm);color:var(--popover-foreground);cursor:pointer;-webkit-user-select:none;user-select:none}.font-select__option:hover{background:var(--accent);color:var(--accent-foreground)}.font-select__option--active{background:var(--muted);color:var(--foreground);font-weight:500}.token-row__unit-suffix{font-size:var(--text-xs);color:var(--muted-foreground);font-family:var(--font-mono)}.token-row__color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:30px;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:0;background:none;overflow:hidden}.token-row__color-input::-webkit-color-swatch-wrapper{padding:0;margin:0;border-radius:calc(var(--radius-sm) - 2px);overflow:hidden;box-sizing:border-box}.token-row__color-input::-webkit-color-swatch{border:none;border-width:0;border-style:none;outline:none;border-radius:calc(var(--radius-sm) - 2px);box-sizing:border-box}.token-row__color-value{font-size:var(--text-xs);color:var(--muted-foreground);font-family:var(--font-mono)}.token-panel__footer{padding:12px 16px;display:flex;flex-direction:column;gap:8px}.token-panel__save-btn{padding:8px;background:var(--primary);color:var(--primary-foreground);border:none;border-radius:var(--radius-md);font-size:var(--text-md);font-weight:500;cursor:pointer}.token-panel__save-btn:disabled{cursor:not-allowed}.token-panel__export-btn{padding:8px;background:transparent;color:var(--muted-foreground);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);cursor:pointer}.token-panel__export-group{display:flex;gap:8px}.token-panel__export-format{padding:8px;background:var(--background);color:var(--foreground);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);cursor:pointer}.token-panel__export-group .token-panel__export-btn{flex:1}:root{--text-xs: 11px;--text-sm: 12px;--text-md: 13px;--text-lg: 14px;--text-xl: 16px;--spacing-unit: 4px;--font-sans: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);font-size:var(--text-md);background:var(--background);color:var(--foreground)}*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-sm)}*::-webkit-scrollbar-thumb:hover{background:var(--muted-foreground)}