.font-card{background:var(--role-card);color:var(--role-card-text);border-width:var(--role-card-border-width);border-style:var(--role-card-border-style);border-color:var(--role-card-border-color);border-radius:var(--role-card-border-radius);padding:var(--role-card-padding);display:flex;flex-direction:column;gap:var(--role-card-gap);transition:all var(--ui-transition-fast) ease;min-height:140px}.font-card-active{background:var(--role-card-active);color:var(--role-card-active-text);border-color:var(--role-card-active-border-color)}.font-card-header{display:flex;justify-content:space-between;align-items:flex-start}.font-card-info{flex:1;min-width:0}.font-card-name{font-weight:600;font-size:var(--ui-font-size-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}.font-card-category{font-size:var(--ui-font-size-mini);color:inherit;margin-top:var(--ui-space-micro)}.font-card-remove-btn{background:transparent;border:none;cursor:pointer;padding:var(--ui-space-xxs);color:inherit;font-size:var(--ui-font-size-large);line-height:1}.font-card-remove-btn:hover{color:var(--ui-danger);opacity:1}.font-card-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--ui-space-md) var(--ui-space-xs);background:var(--role-chip);color:var(--role-chip-text);border-radius:var(--ui-radius-xs);min-height:60px}.font-card-preview-text{font-size:24px;font-weight:400;color:inherit;-webkit-user-select:none;user-select:none}.font-card-footer{display:flex;justify-content:center}.font-card-toggle-btn{padding:var(--ui-space-xs) var(--ui-space-md);border-radius:var(--ui-radius-xs);font-size:var(--ui-font-size-instruction);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast) ease}.font-card-toggle-btn-active{background:var(--role-button-active);color:var(--role-button-active-text);border-width:var(--role-button-active-border-width);border-style:var(--role-button-active-border-style);border-color:var(--role-button-active-border-color)}.font-card-toggle-btn-inactive{background:var(--role-button);color:var(--role-button-text);border-width:var(--role-button-border-width);border-style:var(--role-button-border-style);border-color:var(--role-button-border-color)}.font-card-toggle-btn:hover{opacity:.9}.font-importer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--ui-overlay, rgba(0, 0, 0, .5));display:flex;align-items:center;justify-content:center;z-index:1000}.font-importer-modal{background:var(--role-panel-content);border-radius:var(--ui-border-radius);padding:var(--ui-space-xl, 24px);max-width:var(--ui-modal-max-width, 600px);width:90%;max-height:var(--ui-modal-max-height, 80vh);overflow:auto;box-shadow:var(--ui-shadow-lg, 0 8px 32px rgba(0, 0, 0, .2))}.font-importer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--ui-space-lg)}.font-importer-title{margin:0;font-size:var(--ui-font-size-h4, 20px);font-weight:600;color:var(--ui-text, #1a1a1a)}.font-importer-close{background:transparent;border:none;padding:var(--ui-space-xxs);color:var(--ui-text-muted, #666);font-size:var(--ui-font-size-heading, 24px);line-height:1;cursor:pointer}.font-importer-close:disabled{cursor:not-allowed;opacity:var(--ui-opacity-disabled, .5)}.font-importer-instructions{margin-bottom:var(--ui-space-md);padding:var(--ui-space-sm);background:var(--role-info-panel);color:var(--role-info-panel-text);border-radius:var(--ui-border-radius-sm, var(--ui-border-radius));font-size:var(--ui-font-size-small, 13px)}.font-importer-instructions pre{margin:var(--ui-space-xs) 0 0 0;font-size:var(--ui-font-size-mini, 11px);font-family:var(--ui-font-mono, monospace);white-space:pre-wrap}.font-importer-input{margin-bottom:var(--ui-space-md)}.font-importer-input input{display:block;width:100%;padding:var(--ui-space-sm);border:var(--ui-border-width) var(--ui-border-style) var(--ui-border);border-radius:var(--ui-border-radius-sm, var(--ui-border-radius));font-size:var(--ui-font-size-base, 14px);background:var(--role-input, var(--ui-bg));color:var(--role-input-text, var(--ui-text))}.font-importer-input input:disabled{cursor:not-allowed;opacity:var(--ui-opacity-disabled, .5)}.font-importer-divider{display:flex;align-items:center;gap:var(--ui-space-sm, 12px);margin:var(--ui-space-lg, 20px) 0}.font-importer-divider-line{flex:1;height:1px;background:var(--ui-border)}.font-importer-divider-label{font-size:var(--ui-font-size-mini, 12px);color:var(--ui-text-muted, #999)}.font-importer-textarea{margin-bottom:var(--ui-space-md)}.font-importer-label{display:block;margin-bottom:var(--ui-space-xs);font-size:var(--ui-font-size-base, 14px);font-weight:500;color:var(--ui-text, #1a1a1a)}.font-importer-textarea textarea{width:100%;height:200px;padding:var(--ui-space-sm);border:var(--ui-border-width) var(--ui-border-style) var(--ui-border);border-radius:var(--ui-border-radius-sm, var(--ui-border-radius));font-size:var(--ui-font-size-small, 13px);font-family:var(--ui-font-mono, monospace);resize:vertical}.font-importer-textarea textarea:disabled{cursor:not-allowed;opacity:var(--ui-opacity-disabled, .5)}.font-importer-error{margin-bottom:var(--ui-space-md);padding:var(--ui-space-sm);background:var(--ui-danger-bg, rgba(244, 67, 54, .1));border-left:var(--ui-border-width-strong, calc(var(--ui-border-width) * 2)) solid var(--ui-danger, #f44336);border-radius:var(--ui-border-radius-sm, var(--ui-border-radius));font-size:var(--ui-font-size-small, 13px);color:var(--ui-danger, #c62828)}.font-importer-actions{display:flex;gap:var(--ui-space-sm, 12px);justify-content:flex-end}.font-importer-btn{padding:var(--ui-space-sm) var(--ui-space-lg);border-radius:var(--ui-border-radius-sm, var(--ui-border-radius));font-size:var(--ui-font-size-base, 14px);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast, .15s) ease}.font-importer-btn:disabled{cursor:not-allowed;opacity:var(--ui-opacity-disabled, .5)}.font-importer-btn.secondary{border:var(--ui-border-width) var(--ui-border-style) var(--ui-border);background:transparent;color:var(--ui-text, #1a1a1a)}.font-importer-btn.primary{border:var(--role-button-border-width) var(--role-button-border-style) var(--role-button-border-color);background:var(--role-button);color:var(--role-button-text);box-shadow:var(--role-button-shadow)}.font-importer-btn.primary:disabled{background:var(--ui-border, #ccc)}.hint{display:flex;align-items:flex-start;gap:var(--size-spacing-vertical-sm);background:var(--role-hint);color:var(--role-hint-text);border-width:var(--role-hint-border-width);border-style:var(--role-hint-border-style);border-color:var(--role-hint-border-color);border-left-width:var(--role-hint-border-width);border-radius:var(--role-hint-border-radius);padding:var(--role-hint-padding);font-family:var(--font-family-body, system-ui);font-size:var(--font-size-caption)}.hint-icon{color:var(--role-hint-border-color);font-size:1.2em;line-height:1}.hint-body{flex:1}.hint-title{font-weight:600;margin:0 0 var(--size-spacing-vertical-xs) 0}.hint-text{color:inherit}.tabs{width:100%;display:flex;flex-direction:column;height:100%}.tabs-header-wrapper{flex-shrink:0;border-bottom:var(--ui-border-width-thick) var(--ui-border-style) var(--ui-border)}.tabs-header{display:flex;justify-content:flex-start;gap:var(--ui-space-xs);padding:0 var(--ui-space-sm);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.tabs-tab{padding:var(--ui-space-sm) var(--ui-space-sm);background:none;border:none;border-bottom:var(--ui-border-width-thick) var(--ui-border-style) transparent;font-size:var(--ui-font-size-small);font-weight:500;color:inherit;cursor:pointer;transition:all var(--ui-transition-fast) ease;position:relative;top:var(--ui-space-tiny);min-height:60px}.tabs-tab:hover{opacity:1;background-color:var(--tabs-active-bg)}.tabs-tab-active{color:var(--tabs-active-color);border-bottom-color:var(--tabs-active-color);font-weight:600;background-color:var(--tabs-active-bg)}.tabs-tab-content{display:flex;flex-direction:column;align-items:center;gap:var(--ui-space-xs)}.tabs-tab-label{white-space:nowrap}.tabs-tab-action{display:flex;align-items:center;justify-content:center}.tabs-content{animation:tabs-fadeIn var(--ui-transition-fast) ease;position:relative;z-index:1;background:transparent;flex:1;min-height:0;overflow:auto}@keyframes tabs-fadeIn{0%{opacity:0;transform:translateY(calc(var(--ui-space-xs) * -1))}to{opacity:1;transform:translateY(0)}}.slider{display:flex;flex-direction:column;gap:var(--ui-space-xs);padding:var(--ui-space-sm) 0}.slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--ui-space-tiny)}.slider-header-right{display:flex;align-items:center;gap:var(--ui-space-xs)}.slider-label{font-size:var(--ui-font-size-small);color:inherit;font-weight:var(--ui-font-weight-medium)}.slider-value{display:inline-flex;align-items:center;gap:var(--ui-space-tiny);color:inherit;position:relative}.slider-value-input{width:6ch;font-size:var(--ui-font-size-small);opacity:.9;font-family:var(--ui-font-mono);font-weight:var(--ui-font-weight-semibold);background:var(--role-input);border:none;text-align:right;color:var(--role-input-text);padding-right:var(--ui-space-lg);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.slider-value-input:disabled{opacity:var(--ui-opacity-disabled)}.slider-value-unit{font-size:var(--ui-font-size-mini);opacity:.9;color:inherit}.slider-range-labels{display:flex;justify-content:space-between;margin-top:var(--ui-space-tiny);font-size:var(--ui-font-size-mini);opacity:.9;font-family:var(--ui-font-mono);color:inherit}.slider-range-min,.slider-range-max{font-size:var(--ui-font-size-mini)}.slider-stepper{display:inline-flex;flex-direction:column;margin-left:var(--ui-space-xxs);gap:1px}.slider-stepper-btn{border-width:var(--role-input-border-width);border-style:var(--role-input-border-style);border-color:var(--role-input-hover-border-color);background:var(--role-input-hover);color:var(--role-input-hover-text);font-size:.75em;line-height:1;padding:2px 4px;border-radius:var(--ui-border-radius-xs);cursor:pointer}.slider-stepper-btn:disabled{opacity:var(--ui-opacity-disabled);cursor:default}.slider-stepper-btn:hover:not(:disabled){background:var(--role-input);color:var(--role-input-text);border-color:var(--role-input-border-color)}.slider-stepper-btn:focus-visible{outline:1px solid var(--role-input-focus-border-color);outline-offset:1px;background:var(--role-input-focus);color:var(--role-input-focus-text)}.slider-range-chip{border:var(--ui-border-width) solid var(--role-chip-border-color);background:var(--role-chip);color:var(--role-chip-text);font-size:var(--ui-font-size-component-label);padding:var(--ui-space-micro) var(--ui-space-xs);border-radius:var(--corner-pill);cursor:pointer;margin-left:var(--ui-space-xs);white-space:nowrap;transition:background-color var(--ui-transition-fast) ease,color var(--ui-transition-fast) ease}.slider-range-chip:disabled{cursor:default;opacity:var(--ui-opacity-disabled)}.slider-range-chip:hover:not(:disabled){background:var(--role-chip-hover);color:var(--role-chip-hover-text);border-color:var(--role-chip-hover-border-color)}.slider-range-chip:active:not(:disabled){background:var(--role-chip-active);color:var(--role-chip-active-text);border-color:var(--role-chip-active-border-color)}.slider-range-chip-inline{font-size:var(--ui-font-size-component-label);padding:var(--ui-space-micro) var(--ui-space-xs);margin-right:var(--ui-space-xs)}.slider-preset-button{border:none;background:transparent;font-family:var(--ui-font-heading);letter-spacing:var(--ui-letter-spacing-wide);font-size:var(--ui-font-size-instruction);color:inherit;cursor:pointer;padding:0;margin-left:var(--ui-space-xs)}.slider-preset-button .preset-active{opacity:1;font-weight:var(--ui-font-weight-semibold)}.slider-preset-button:disabled{cursor:default;opacity:var(--ui-opacity-disabled)}.slider-input{--slider-indicator: var(--ui-primary);--slider-track-bg: var(--ui-border);width:100%;height:var(--ui-space-sm);border-radius:var(--ui-border-radius-sm);background:var(--slider-track-bg);border:var(--ui-border-width) var(--ui-border-style) var(--ui-border);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.slider-input::-webkit-slider-runnable-track{height:var(--ui-space-sm);border-radius:var(--ui-border-radius-sm);background:var(--slider-track-bg)}.slider-input::-moz-range-track{height:var(--ui-space-sm);border-radius:var(--ui-border-radius-sm);background:var(--slider-track-bg)}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:calc(var(--ui-space-micro) * 3);height:calc(var(--ui-space-micro) * 3);border-radius:50%;background:var(--slider-indicator);cursor:pointer;transition:all var(--ui-transition-fast);border:var(--ui-border-width) var(--ui-border-style) var(--role-state-layer-lighten);box-shadow:var(--ui-shadow-sm)}.slider-input::-webkit-slider-thumb:hover{background:var(--slider-indicator);transform:scale(1.1);box-shadow:var(--ui-shadow-md)}.slider-input::-moz-range-thumb{width:calc(var(--ui-space-micro) * 3);height:calc(var(--ui-space-micro) * 3);border-radius:50%;background:var(--slider-indicator);cursor:pointer;transition:all var(--ui-transition-fast);border:var(--ui-border-width) solid var(--role-state-layer-lighten);box-shadow:var(--ui-shadow-sm)}.slider-input::-moz-range-thumb:hover{background:var(--slider-indicator);transform:scale(1.1);box-shadow:var(--ui-shadow-md)}.slider-input:focus-visible{outline:var(--ui-border-width-thick) solid var(--slider-indicator);outline-offset:var(--ui-outline-offset)}.font-selector{position:relative;isolation:isolate;margin-top:var(--ui-space-lg);margin-bottom:var(--ui-space-xs)}.font-selector:first-child{margin-top:0}.font-selector-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:var(--ui-space-micro);max-height:300px;overflow-y:auto;background-color:var(--role-panel-content);color:var(--role-panel-content-text);border-width:var(--role-panel-content-border-width);border-style:var(--role-panel-content-border-style);border-color:var(--role-panel-content-border-color);border-radius:var(--ui-border-radius);box-shadow:var(--ui-shadow-lg);z-index:10000}.font-selector:focus-within .font-selector-dropdown{z-index:10001}.font-selector-status{position:absolute;right:var(--ui-space-xs);pointer-events:none}@keyframes font-selector-pulse{0%,to{opacity:1}50%{opacity:.5}}.font-selector-status-loading{animation:font-selector-pulse 1.5s ease-in-out infinite}.font-selector-category{padding:var(--ui-space-xs)}.font-selector-empty{padding:var(--ui-space-sm);text-align:center}.color-removal-dialog__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--role-overlay);display:flex;align-items:center;justify-content:center;z-index:9999;padding:var(--ui-space-lg)}.color-removal-dialog{background-color:var(--role-panel);color:var(--role-panel-text);border:var(--role-panel-border-width) var(--role-panel-border-style) var(--role-panel-border-color);border-radius:var(--ui-border-radius);width:min(90vw,var(--ui-modal-max-width, 40rem));max-height:min(90vh,var(--ui-modal-max-height, 80vh));display:flex;flex-direction:column;overflow:hidden}.color-removal-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-sm);padding:var(--ui-space-md) var(--ui-space-lg);background-color:var(--role-table-header);color:var(--role-table-header-text);border-bottom:var(--role-table-header-border-width) var(--role-table-header-border-style) var(--role-table-header-border-color)}.color-removal-dialog__title{margin:0;font-size:var(--ui-font-size-heading);font-weight:var(--ui-font-weight-bold);color:inherit}.color-removal-dialog__close{background-color:transparent;border:none;padding:var(--ui-space-xs);color:inherit;opacity:.8;cursor:pointer;line-height:1;border-radius:var(--ui-border-radius)}.color-removal-dialog__close:hover{background-color:var(--role-table-row-hover);opacity:1}.color-removal-dialog__content{padding:var(--ui-space-md);display:flex;flex-direction:column;gap:var(--ui-space-md);overflow:auto}.color-removal-dialog__lead{padding:var(--ui-space-sm) var(--ui-space-md);border-radius:var(--ui-border-radius);background-color:var(--role-info-panel);color:var(--role-info-panel-text);border:var(--role-info-panel-border-width) var(--role-info-panel-border-style) var(--role-info-panel-border-color);font-size:var(--ui-font-size-small)}.color-removal-dialog__field{display:flex;flex-direction:column;gap:var(--ui-space-xs)}.color-removal-dialog__label{font-size:var(--ui-font-size-small);font-weight:var(--ui-font-weight-medium)}.color-removal-dialog__select{background-color:var(--role-input);color:var(--role-input-text);border:var(--role-input-border-width) var(--role-input-border-style) var(--role-input-border-color);border-radius:var(--ui-border-radius);padding:var(--ui-space-xs) var(--ui-space-sm);font-size:var(--ui-font-size-base)}.color-removal-dialog__impacts{background-color:var(--role-panel-alt);color:var(--role-panel-alt-text);border:var(--role-panel-alt-border-width) var(--role-panel-alt-border-style) var(--role-panel-alt-border-color);border-radius:var(--ui-border-radius);padding:var(--ui-space-sm);max-height:40vh;overflow:auto}.color-removal-dialog__impact{font-size:var(--ui-font-size-small);padding:var(--ui-space-xxs) 0}.color-removal-dialog__impact code{color:inherit}.color-removal-dialog__actions{display:flex;justify-content:flex-end;gap:var(--ui-space-sm)}.text-input{margin-bottom:var(--ui-space-md)}.spacing-overlay{position:relative}.spacing-overlay:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--surface-blueprint, transparent);pointer-events:none;z-index:1}.spacing-overlay-svg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.spacing-overlay-label{font-family:var(--ui-font-body);font-size:var(--ui-font-size-mini);fill:var(--ui-secondary);paint-order:stroke;stroke:var(--ui-bg);stroke-width:var(--ui-border-radius-sm)}.spacing-overlay-legend{position:absolute;right:var(--ui-space-sm);top:var(--ui-space-sm);background:var(--role-chip);color:var(--role-chip-text);border-width:var(--role-chip-border-width);border-style:var(--role-chip-border-style);border-color:var(--role-chip-border-color);border-radius:var(--ui-border-radius);padding:var(--ui-space-xs) var(--ui-space-sm);font-size:var(--ui-font-size-small);z-index:3}.info-chip{display:inline-flex;align-items:center;gap:var(--ui-space-sm);background:var(--role-chip);color:var(--role-chip-text);border:var(--ui-border-width) var(--ui-border-style) var(--role-chip-border-color);border-radius:var(--ui-border-radius-pill);padding:var(--ui-space-tiny) var(--ui-space-sm);font-family:var(--ui-font-instructional);font-size:var(--ui-font-size-mini);font-weight:var(--ui-font-weight-semibold);line-height:var(--ui-line-height-tight);margin:var(--ui-space-sm) var(--ui-space-tiny) 0 0;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;transition:background-color var(--ui-transition-fast) ease,color var(--ui-transition-fast) ease}.info-chip:hover{background:var(--role-chip-hover);color:var(--role-chip-hover-text);border-color:var(--role-chip-hover-border-color)}.info-chip:active{background:var(--role-chip-active);color:var(--role-chip-active-text);border-color:var(--role-chip-active-border-color)}.info-chip.tone-primary{color:var(--color-primary);border-color:var(--color-primary);background:var(--role-chip)}.info-chip.tone-secondary{color:var(--color-secondary);border-color:var(--color-secondary);background:var(--role-chip)}.info-chip.tone-warning{background:var(--role-warning);color:var(--role-warning-text);border-color:var(--role-warning-border-color)}.info-chip.tone-danger{background:var(--role-error);color:var(--role-error-text);border-color:var(--role-error-border-color)}.info-chip.tone-info{background:var(--role-info-panel);color:var(--role-info-panel-text);border-color:var(--role-info-panel-border-color)}.info-chip.sev-error{border-color:var(--ui-danger);color:var(--ui-danger)}.info-chip.sev-warning{border-color:var(--ui-warning);color:var(--ui-warning)}.info-chip.sev-info{border-color:var(--ui-info);color:var(--ui-info)}.info-chip-group{display:inline-flex;gap:var(--ui-space-xxs);align-items:center;margin-left:var(--ui-space-xxs);flex-wrap:wrap}.preview-canvas{--local-h1: var(--surface-0-h1);--local-h2: var(--surface-0-h2);--local-h3: var(--surface-0-h3);--local-h4: var(--surface-0-h4);--local-body: var(--surface-0-body);--local-small: var(--surface-0-caption)}.preview-card-surface{--local-h1: inherit;--local-h2: inherit;--local-h3: inherit;--local-h4: inherit;--local-body: inherit;--local-small: inherit}.preview-h1{font-size:var(--font-size-h1);font-family:var(--font-heading);font-weight:var(--font-weight-h1);color:var(--local-h1);letter-spacing:var(--letter-spacing-h1);line-height:var(--line-height-h1);margin:0}.preview-h2{font-size:var(--font-size-h2);font-family:var(--font-heading);font-weight:var(--font-weight-h2);color:var(--local-h2);letter-spacing:var(--letter-spacing-h2);line-height:var(--line-height-h2);margin:0}.preview-h3{font-size:var(--font-size-h3);font-family:var(--font-heading);font-weight:var(--font-weight-h3);color:var(--local-h3);letter-spacing:var(--letter-spacing-h3);line-height:var(--line-height-h3);margin:0}.preview-h4{font-size:var(--font-size-h4);font-family:var(--font-heading);font-weight:var(--font-weight-h4);color:var(--local-h4);letter-spacing:var(--letter-spacing-h4);line-height:var(--line-height-h4);margin:0}.preview-body{font-size:var(--font-size-body);font-family:var(--font-body);font-weight:var(--font-weight-body);color:var(--local-body);letter-spacing:var(--letter-spacing-body);line-height:var(--line-height-body);margin:0}.preview-small{font-size:var(--font-size-caption);font-family:var(--font-body);color:var(--local-small);letter-spacing:var(--letter-spacing-small);line-height:var(--line-height-small);margin:0}.preview-instructional{font-size:var(--font-size-instructional);font-family:var(--font-instructional);font-style:italic;color:var(--local-small);margin:0}.preview-label{font-size:var(--font-size-instructional);font-family:var(--font-instructional);color:var(--local-small);margin:0}.palette-swatch-row{position:relative}.palette-swatch-info{position:absolute;left:calc(var(--palette-swatch-size) + var(--role-card-padding));top:50%;transform:translateY(-50%);opacity:0;visibility:hidden;padding:var(--size-spacing-vertical-xxs) var(--size-spacing-horizontal-xs);background:var(--role-card);color:var(--role-card-text);border-radius:var(--role-card-border-radius);border:var(--role-card-border-width) var(--role-card-border-style) var(--role-card-border-color);box-shadow:var(--role-card-shadow);white-space:nowrap;z-index:1}.palette-swatch-row:hover .palette-swatch-info,.palette-swatch-row:focus-within .palette-swatch-info{opacity:1;visibility:visible}.preview-flex{display:flex}.preview-flex-wrap{flex-wrap:wrap}.preview-flex-col{flex-direction:column}.preview-flex-center{display:flex;align-items:center;justify-content:center}.preview-items-center{align-items:center}.preview-items-end{align-items:flex-end}.preview-self-center{align-self:center}.preview-justify-between{justify-content:space-between}.preview-text-center{text-align:center}.preview-grid{display:grid}.preview-grid-2{display:grid;grid-template-columns:1fr 1fr}.preview-grid-3{display:grid;grid-template-columns:repeat(3,1fr)}.preview-grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.preview-gap-xxs{gap:var(--size-spacing-vertical-xxs)}.preview-gap-xs{gap:var(--size-spacing-vertical-xs)}.preview-gap-sm{gap:var(--size-spacing-vertical-sm)}.preview-gap-md{gap:var(--size-spacing-vertical-md)}.preview-gap-lg{gap:var(--size-spacing-vertical-lg)}.preview-gap-xl{gap:var(--size-spacing-vertical-xl)}.preview-row-gap-sm{row-gap:var(--size-spacing-vertical-sm)}.preview-col-gap-sm{column-gap:var(--size-spacing-horizontal-sm)}.preview-m-0{margin:0}.preview-mb-xxs{margin-bottom:var(--size-spacing-vertical-xxs)}.preview-mb-xs{margin-bottom:var(--size-spacing-vertical-xs)}.preview-mb-sm{margin-bottom:var(--size-spacing-vertical-sm)}.preview-mb-md{margin-bottom:var(--size-spacing-vertical-md)}.preview-mb-lg{margin-bottom:var(--size-spacing-vertical-lg)}.preview-mb-xl{margin-bottom:var(--size-spacing-vertical-xl)}.preview-mt-xxs{margin-top:var(--size-spacing-vertical-xxs)}.preview-mt-xs{margin-top:var(--size-spacing-vertical-xs)}.preview-mt-sm{margin-top:var(--size-spacing-vertical-sm)}.preview-mt-lg{margin-top:var(--size-spacing-vertical-lg)}.preview-mt-xl{margin-top:var(--size-spacing-vertical-xl)}.preview-p-xs{padding:var(--size-spacing-vertical-xs)}.preview-p-sm{padding:var(--size-spacing-vertical-sm)}.preview-p-md{padding:var(--size-spacing-vertical-md)}.preview-p-lg{padding:var(--size-spacing-vertical-lg)}.preview-px-sm{padding-left:var(--size-spacing-horizontal-sm);padding-right:var(--size-spacing-horizontal-sm)}.preview-px-md{padding-left:var(--size-spacing-horizontal-md);padding-right:var(--size-spacing-horizontal-md)}.preview-py-xs{padding-top:var(--size-spacing-vertical-xs);padding-bottom:var(--size-spacing-vertical-xs)}.preview-py-sm{padding-top:var(--size-spacing-vertical-sm);padding-bottom:var(--size-spacing-vertical-sm)}.preview-pt-sm{padding-top:var(--size-spacing-vertical-sm)}.preview-radius-sm{border-radius:var(--radius-sm)}.preview-radius-md{border-radius:var(--radius-md)}.preview-radius-lg{border-radius:var(--radius-lg)}.preview-radius-pill{border-radius:var(--radius-pill)}.preview-border-top-1{border-top-width:var(--role-card-border-width);border-top-style:var(--role-card-border-style);border-top-color:var(--role-card-border-color)}.preview-surface-0{background:var(--surface-0);color:var(--surface-0-text)}.preview-surface-1{background:var(--surface-1);color:var(--surface-1-text);padding:var(--size-spacing-vertical-md);border-radius:var(--radius-md);border-width:var(--surface-1-border-width);border-style:var(--surface-1-border-style);border-color:var(--surface-1-border-color)}.preview-surface-2{background:var(--surface-2);color:var(--surface-2-text);padding:var(--size-spacing-vertical-md);border-radius:var(--radius-md);border-width:var(--surface-2-border-width);border-style:var(--surface-2-border-style);border-color:var(--surface-2-border-color)}.preview-surface-3{background:var(--surface-3);color:var(--surface-3-text);padding:var(--size-spacing-vertical-md);border-radius:var(--radius-md);border-width:var(--surface-3-border-width);border-style:var(--surface-3-border-style);border-color:var(--surface-3-border-color)}.preview-btn{padding:var(--role-button-padding);height:auto;font-size:var(--font-size-body);font-family:var(--font-body);font-weight:var(--font-weight-button);border-radius:var(--role-button-border-radius);box-sizing:border-box;cursor:pointer;border-width:var(--role-button-border-width);border-style:var(--role-button-border-style);border-color:var(--role-button-border-color);box-shadow:var(--role-button-shadow)}.preview-btn-primary{background-color:var(--button-primary-surface);color:var(--button-primary-surface-text);box-shadow:var(--role-button-shadow)}.preview-btn-secondary{background-color:var(--button-secondary-surface);color:var(--button-secondary-surface-text);box-shadow:var(--role-button-shadow)}.preview-btn-outline{background-color:var(--button-outline-surface);color:var(--color-accent);border:var(--role-button-border-width) var(--role-button-border-style) var(--color-accent)}.preview-input{padding:var(--role-input-padding);border-width:var(--role-input-border-width);border-style:var(--role-input-border-style);border-color:var(--role-input-border-color);border-radius:var(--role-input-border-radius);background:var(--role-input);color:var(--role-input-text);font-size:var(--font-size-body);font-family:var(--font-body)}.preview-select{padding:var(--size-spacing-vertical-sm);border-width:var(--role-input-border-width);border-style:var(--role-input-border-style);border-color:var(--role-input-border-color);border-radius:var(--radius-sm);background:var(--role-input);color:var(--role-input-text);font-size:var(--font-size-body);font-family:var(--font-body)}.preview-status{flex:1;min-width:0;padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-sm);border-radius:var(--radius-sm);display:flex;align-items:center;gap:var(--size-spacing-vertical-xs);font-size:var(--font-size-caption);font-family:var(--font-body)}.preview-status-success{background:var(--role-success);color:var(--role-success-text);border-width:var(--role-success-border-width);border-style:var(--role-success-border-style);border-color:var(--role-success-border-color)}.preview-status-warning{background:var(--role-warning);color:var(--role-warning-text);border-width:var(--role-warning-border-width);border-style:var(--role-warning-border-style);border-color:var(--role-warning-border-color)}.preview-status-error{background:var(--role-error);color:var(--role-error-text);border-width:var(--role-error-border-width);border-style:var(--role-error-border-style);border-color:var(--role-error-border-color)}.preview-status-dot{width:10px;height:10px;border-radius:var(--radius-pill);background-color:currentColor}.preview-spacing-swatch{background-color:var(--color-primary);border-radius:var(--radius-sm);margin-bottom:var(--size-spacing-vertical-xs)}.preview-spacing-swatch-xs{width:var(--size-spacing-horizontal-xs);height:var(--size-spacing-vertical-xs)}.preview-spacing-swatch-sm{width:var(--size-spacing-horizontal-sm);height:var(--size-spacing-vertical-sm)}.preview-spacing-swatch-md{width:var(--size-spacing-horizontal-md);height:var(--size-spacing-vertical-md)}.preview-spacing-swatch-lg{width:var(--size-spacing-horizontal-lg);height:var(--size-spacing-vertical-lg)}.preview-spacing-swatch-xl{width:var(--size-spacing-horizontal-xl);height:var(--size-spacing-vertical-xl)}.preview-card{border-width:var(--role-card-border-width);border-style:var(--role-card-border-style);border-color:var(--role-card-border-color);border-radius:var(--role-card-border-radius);overflow:hidden;cursor:pointer;transition:transform .2s ease;background:var(--role-card);color:var(--role-card-text)}.preview-card-body{padding:var(--role-card-padding);background:var(--role-card);color:var(--role-card-text)}.preview-semantic-row{display:flex;align-items:center;gap:var(--size-spacing-vertical-xs);font-size:var(--font-size-caption);font-family:var(--font-body)}.preview-semantic-dot{width:12px;height:12px;border-radius:var(--radius-pill);flex-shrink:0}.preview-semantic-label{font-weight:600;min-width:60px}.preview-semantic-arrow,.preview-semantic-value{color:var(--role-content-text)}.preview-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:var(--font-size-caption);background:var(--color-surface);padding:var(--size-spacing-vertical-xxs) var(--size-spacing-horizontal-xs);border-radius:var(--radius-xs);border-width:var(--role-card-border-width);border-style:var(--role-card-border-style);border-color:var(--role-card-border-color);color:var(--color-neutral-text)}.preview-section code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:var(--font-size-caption);background:var(--role-inline-code);color:var(--role-inline-code-text);padding:var(--role-inline-code-padding);border-radius:var(--role-inline-code-border-radius);border-width:var(--role-inline-code-border-width);border-style:var(--role-inline-code-border-style);border-color:var(--role-inline-code-border-color)}.preview-hint-box{background:var(--role-hint);color:var(--role-hint-text);padding:var(--role-hint-padding);border-radius:var(--role-hint-border-radius);border-width:var(--role-hint-border-width);border-style:var(--role-hint-border-style);border-color:var(--role-hint-border-color)}.preview-font-semibold{font-weight:600}.preview-font-bold{font-weight:700}.preview-w-full{width:100%}.preview-w-fit{width:fit-content}.preview-min-w-0{min-width:0}.preview-flex-1{flex:1}.preview-mt-md{margin-top:var(--size-spacing-vertical-md)}.preview-mb-2xl{margin-bottom:var(--size-spacing-vertical-2xl)}.preview-interp-grid{display:grid;grid-template-columns:160px 1fr;row-gap:var(--size-spacing-vertical-sm);column-gap:var(--size-spacing-horizontal-sm)}.preview-interp-label{align-self:center;font-size:var(--font-size-instructional);font-family:var(--font-instructional);color:var(--role-content-text)}.preview-interp-swatch{width:calc(var(--size-spacing-horizontal-md) * 1.75);height:calc(var(--size-spacing-vertical-md) * 1.75);border-radius:var(--radius-sm);border-width:var(--role-card-border-width);border-style:var(--role-card-border-style);border-color:var(--role-card-border-color)}.preview-btn-color-primary{background-color:var(--color-primary);color:var(--surface-1-text);border:none;padding:var(--btn-padding-y) var(--btn-padding-x);height:auto;font-size:var(--font-size-body);font-family:var(--font-body);border-radius:var(--radius-md);box-sizing:border-box;cursor:pointer;font-weight:var(--font-weight-button)}.preview-btn-color-secondary{background-color:var(--color-secondary);color:var(--surface-2-text);border:none;padding:var(--btn-padding-y) var(--btn-padding-x);height:auto;font-size:var(--font-size-body);font-family:var(--font-body);border-radius:var(--radius-md);box-sizing:border-box;cursor:pointer;font-weight:var(--font-weight-button)}.preview-btn-color-accent{background-color:var(--color-accent);color:var(--surface-4-text);border:none;padding:var(--btn-padding-y) var(--btn-padding-x);height:auto;font-size:var(--font-size-body);font-family:var(--font-body);border-radius:var(--radius-md);box-sizing:border-box;cursor:pointer;font-weight:var(--font-weight-button)}.preview-btn-color-outline{background-color:transparent;color:var(--color-primary);border:var(--role-button-border-width) var(--role-button-border-style) var(--color-primary);padding:var(--btn-padding-y) var(--btn-padding-x);height:auto;font-size:var(--font-size-body);font-family:var(--font-body);border-radius:var(--radius-md);box-sizing:border-box;cursor:pointer;font-weight:var(--font-weight-button)}.preview-hint-title{font-size:var(--font-size-caption);font-family:var(--font-body);font-weight:600;margin:0 0 var(--size-spacing-vertical-sm) 0;color:var(--color-text-default)}.preview-hint-text{font-size:var(--font-size-instructional);font-family:var(--font-instructional);margin:0 0 var(--size-spacing-vertical-sm) 0;color:var(--role-content-text)}.preview-gradient-label{font-size:var(--font-size-caption);font-family:var(--font-instructional);color:var(--role-content-text);margin-bottom:var(--size-spacing-vertical-xs);font-weight:600}.preview-gradient-swatch{height:60px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--surface-1-text);font-size:var(--font-size-caption);font-weight:600}.preview-gradient-swatch-lg{height:120px}.preview-category-title{font-size:var(--font-size-body);font-family:var(--font-body);margin:0 0 var(--size-spacing-vertical-xs) 0;font-weight:600;text-transform:capitalize;color:var(--color-text-default)}.preview-card{border-width:var(--role-card-border-width);border-style:var(--role-card-border-style);border-color:var(--role-card-border-color);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:transform .2s ease;background:var(--role-card);color:var(--role-card-text)}.preview-card:hover{transform:scale(1.02);background:var(--role-card-hover);color:var(--role-card-hover-text)}.preview-card-body{padding:var(--size-spacing-vertical-sm);background:var(--role-card);color:var(--role-card-text)}.preview-card-title{font-size:var(--font-size-caption);font-family:var(--font-body);font-weight:600;margin-bottom:var(--size-spacing-vertical-xs);color:var(--role-card-text)}.preview-card-description{font-size:var(--font-size-caption);font-family:var(--font-instructional);color:var(--role-card-text);opacity:.8}.preview-surface-header{margin-bottom:var(--size-spacing-vertical-xl);padding:var(--size-spacing-vertical-lg);background:var(--role-app-background);color:var(--role-app-background-text);border-width:var(--role-app-background-border-width);border-style:var(--role-app-background-border-style);border-color:var(--role-app-background-border-color);border-radius:var(--radius-md)}.preview-filter-box{margin-bottom:var(--size-spacing-vertical-lg);padding:var(--size-spacing-vertical-md);background:var(--role-card);color:var(--role-card-text);border-radius:var(--radius-md);border:var(--role-card-border-width) var(--role-card-border-style) var(--role-card-border-color)}.preview-filter-row{display:flex;align-items:center;gap:var(--size-spacing-vertical-md);flex-wrap:wrap}.preview-filter-label{font-size:var(--font-size-caption);font-weight:600;color:var(--color-text-default)}.preview-filter-btn{padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-sm);border-radius:var(--radius-sm);border:var(--role-card-border-width) var(--role-card-border-style) var(--role-card-border-color);background:var(--role-card);color:var(--role-card-text);font-size:var(--font-size-caption);cursor:pointer;font-weight:400}.preview-filter-btn--active{border:var(--role-card-border-width) solid var(--color-primary);background:var(--color-primary);color:var(--surface-1-text);font-weight:600}.preview-filter-btn--secondary-active{border:var(--role-card-border-width) solid var(--color-secondary);background:var(--color-secondary);color:var(--surface-2-text);font-weight:600}.preview-filter-hint{margin:0;margin-top:var(--size-spacing-vertical-sm);font-size:var(--font-size-instructional);font-family:var(--font-instructional);font-style:italic;color:var(--role-content-text)}.preview-surface-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--size-spacing-vertical-md)}.preview-surface-card{border-radius:var(--radius-md);padding:var(--size-spacing-vertical-lg);min-height:120px}.preview-surface-card-title{font-weight:600;margin-bottom:var(--size-spacing-vertical-sm);font-size:var(--font-size-body);display:flex;align-items:center;gap:var(--size-spacing-vertical-xs);flex-wrap:wrap}.preview-role-badge{padding:var(--size-spacing-vertical-xxs) var(--size-spacing-horizontal-xs);font-size:var(--font-size-caption);background:var(--role-chip);color:var(--role-chip-text);border-radius:var(--radius-sm)}.preview-role-badge--active{background:var(--color-secondary);color:var(--surface-2-text)}.preview-surface-info{font-size:var(--font-size-instructional);font-family:var(--font-instructional);color:var(--role-content-text)}.preview-empty-state{padding:var(--size-spacing-vertical-xl);text-align:center;color:var(--role-card-text);background:var(--role-card);border-radius:var(--radius-md)}.preview-component-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--size-spacing-vertical-md)}.preview-component-card{background:var(--color-background);border-radius:var(--radius-md);padding:var(--size-spacing-vertical-md);text-align:center}.preview-component-card--button{border-width:var(--role-button-border-width);border-style:var(--role-button-border-style);border-color:var(--role-button-border-color)}.preview-component-card--input{border-width:var(--role-input-border-width);border-style:var(--role-input-border-style);border-color:var(--role-input-border-color)}.preview-component-card--card{border-width:var(--role-card-border-width);border-style:var(--role-card-border-style);border-color:var(--role-card-border-color)}.preview-component-card--panel{border-width:var(--role-panel-border-width);border-style:var(--role-panel-border-style);border-color:var(--role-panel-border-color)}.preview-component-card--divider{border-width:var(--role-divider-border-width);border-style:var(--role-divider-border-style);border-color:var(--role-divider-border-color)}.preview-component-title{font-weight:600;margin-bottom:var(--size-spacing-vertical-xs);font-size:var(--font-size-caption)}.preview-component-value{font-size:var(--font-size-caption);color:var(--role-content-text)}.preview-role-card{border-radius:var(--radius-md);padding:var(--size-spacing-vertical-lg)}.preview-role-card--panel{background:var(--role-panel);color:var(--role-panel-text);border-width:var(--role-panel-border-width);border-style:var(--role-panel-border-style);border-color:var(--role-panel-border-color)}.preview-role-card--panelAlt{background:var(--role-panel-alt);color:var(--role-panel-alt-text);border-width:var(--role-panel-alt-border-width);border-style:var(--role-panel-alt-border-style);border-color:var(--role-panel-alt-border-color)}.preview-role-card--chip{background:var(--role-chip);color:var(--role-chip-text);border-width:var(--role-chip-border-width);border-style:var(--role-chip-border-style);border-color:var(--role-chip-border-color)}.preview-role-card--accent{background:var(--role-accent);color:var(--role-accent-text);border-width:var(--role-accent-border-width);border-style:var(--role-accent-border-style);border-color:var(--role-accent-border-color)}.preview-role-card--previewCard{background:var(--role-card);color:var(--role-card-text);border-width:var(--role-card-border-width);border-style:var(--role-card-border-style);border-color:var(--role-card-border-color)}.preview-role-title{font-weight:600;margin-bottom:var(--size-spacing-vertical-xs)}.preview-role-code{font-size:var(--font-size-caption);opacity:.7}.preview-container-title{margin:0;margin-bottom:var(--size-spacing-vertical-md);font-size:var(--font-size-body)}.preview-divider{border:none;border-top-width:var(--role-divider-border-width);border-top-style:var(--role-divider-border-style);border-top-color:var(--role-divider-border-color);margin:var(--size-spacing-vertical-sm) 0}.preview-state-btn{border:none;padding:var(--size-spacing-vertical-sm) var(--size-spacing-horizontal-lg);border-radius:var(--radius-md);font-size:var(--font-size-body);font-family:var(--font-body);cursor:pointer}.preview-state-btn--disabled{cursor:not-allowed}.preview-state-grid{font-size:var(--font-size-caption);color:var(--role-content-text);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--size-spacing-vertical-sm)}.preview-gradient-card{border-width:var(--role-card-border-width);border-style:var(--role-card-border-style);border-color:var(--role-card-border-color);border-radius:var(--radius-md);padding:var(--size-spacing-vertical-lg);min-height:160px;display:flex;flex-direction:column;justify-content:center}.preview-gradient-title{font-weight:600;margin-bottom:var(--size-spacing-vertical-sm);font-size:var(--font-size-body)}.preview-gradient-desc{font-size:var(--font-size-instructional);font-family:var(--font-instructional);color:var(--role-content-text)}.preview-wiki-section{background:var(--role-app-background);padding:var(--size-spacing-vertical-lg);border-radius:var(--radius-md);border-width:var(--role-app-background-border-width);border-style:var(--role-app-background-border-style);border-color:var(--role-app-background-border-color);font-family:var(--font-body);color:var(--role-app-background-text)}.preview-wiki-empty{padding:var(--size-spacing-vertical-lg);border-radius:var(--radius-md);background:var(--role-card);border-width:var(--role-card-border-width);border-style:var(--role-card-border-style);border-color:var(--role-card-border-color);color:var(--role-card-text)}.preview-wiki-header{display:flex;justify-content:flex-end;align-items:center;margin-bottom:var(--size-spacing-vertical-md);gap:var(--size-spacing-vertical-sm);flex-wrap:wrap}.preview-wiki-label{font-size:var(--font-size-caption);margin-right:var(--size-spacing-horizontal-xs)}.preview-wiki-select{padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-sm);font-size:var(--font-size-caption);font-family:var(--font-body);border-radius:var(--radius-sm);border-width:var(--role-input-border-width);border-style:var(--role-input-border-style);border-color:var(--role-input-border-color);background:var(--role-input);color:var(--role-input-text);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.preview-wiki-select:hover{background:var(--role-input-hover);color:var(--role-input-hover-text);border-color:var(--role-input-hover-border-color)}.preview-wiki-select:focus{outline:none;background:var(--role-input-focus);color:var(--role-input-focus-text);border-color:var(--role-input-focus-border-color);outline:2px solid var(--role-input-focus-border-color);outline-offset:1px}.preview-wiki-link{border:none;background:none;padding:0;margin:0;font:inherit;color:var(--color-primary);cursor:pointer;text-decoration:underline}.preview-wiki-link--dotted{text-decoration-style:dotted}.preview-wiki-p{margin:0 0 var(--size-spacing-vertical-sm);font-size:var(--font-size-body);font-family:var(--font-body);color:inherit;line-height:var(--line-height)}.preview-wiki-ul{margin:0 0 var(--size-spacing-vertical-md);padding-left:var(--size-spacing-horizontal-lg);font-size:var(--font-size-body);font-family:var(--font-body);color:inherit;line-height:var(--line-height)}.preview-wiki-li{margin-bottom:var(--size-spacing-vertical-xs);color:inherit}.preview-wiki-pre{margin:0 0 var(--size-spacing-vertical-md);padding:var(--size-spacing-vertical-sm);background:var(--role-card);border-radius:var(--radius-sm);border:var(--role-card-border-width) var(--role-card-border-style) var(--role-card-border-color);font-size:var(--font-size-caption);font-family:monospace;color:var(--role-card-text);overflow:auto}.preview-wiki-pre code{background:transparent;color:inherit;padding:0;border:none;font-size:inherit}.preview-wiki-hr{margin:var(--size-spacing-vertical-lg) 0;border:none;border-top-width:var(--role-divider-border-width);border-top-style:var(--role-divider-border-style);border-top-color:var(--role-divider-border-color)}.preview-wiki-h1{margin:0 0 var(--size-spacing-vertical-sm);font-size:var(--font-size-h1);font-family:var(--font-heading);color:var(--color-primary);font-weight:var(--font-weight-h1);letter-spacing:var(--letter-spacing-h1);line-height:var(--line-height-h1)}.preview-wiki-h2{margin:var(--size-spacing-vertical-lg) 0 var(--size-spacing-vertical-sm);font-size:var(--font-size-h3);font-family:var(--font-heading);color:var(--color-primary);font-weight:var(--font-weight-h2);letter-spacing:var(--letter-spacing-h2);line-height:var(--line-height-h2)}.preview-wiki-h3{margin:var(--size-spacing-vertical-md) 0 var(--size-spacing-vertical-xs);font-size:var(--font-size-h4);font-family:var(--font-heading);color:inherit;font-weight:var(--font-weight-h3);letter-spacing:var(--letter-spacing-h3);line-height:var(--line-height-h3)}.typo-ref-page-title{font-family:var(--font-heading);font-size:var(--font-size-h1);font-weight:var(--font-weight-h1);text-align:center;letter-spacing:var(--letter-spacing-h1);line-height:var(--line-height-h1);margin-bottom:var(--size-spacing-vertical-sm);color:var(--color-h1)}.typo-ref-page-subtitle{font-family:var(--font-body);font-size:var(--font-size-caption);font-weight:var(--font-weight-body);text-align:center;letter-spacing:var(--letter-spacing-small);line-height:var(--line-height-small);text-transform:uppercase;color:var(--role-app-background-text);opacity:.7;margin-bottom:var(--size-spacing-vertical-xl)}.typo-ref-section-title{font-family:var(--font-heading);font-size:var(--font-size-h2);font-weight:var(--font-weight-h2);letter-spacing:var(--letter-spacing-h2);line-height:var(--line-height-h2);color:var(--color-accent);margin-bottom:var(--size-spacing-vertical-lg);padding-bottom:var(--size-spacing-vertical-sm);border-bottom:var(--role-divider-border-width) var(--role-divider-border-style) var(--color-accent);opacity:.8}.typo-ref-ornament-divider{text-align:center;font-size:var(--font-size-h3);color:var(--color-accent);margin:var(--size-spacing-vertical-xl) 0;letter-spacing:1rem}.typo-ref-ornament-lg{font-size:var(--font-size-h2);letter-spacing:1.5rem}.typo-ref-ornament-sm{font-size:var(--font-size-body);letter-spacing:.5rem;opacity:.6}.typo-ref-line-divider{display:flex;align-items:center;justify-content:center;gap:var(--size-spacing-vertical-lg);margin:var(--size-spacing-vertical-xl) 0}.typo-ref-line-divider:before,.typo-ref-line-divider:after{content:"";flex:1;height:1px;background:linear-gradient(to right,transparent,var(--color-accent),transparent);opacity:.3}.typo-ref-line-ornament{color:var(--color-accent);font-size:var(--font-size-h4)}.typo-ref-symbol-grid{display:grid;grid-template-columns:repeat(auto-fit,100px);justify-content:center;gap:var(--size-spacing-vertical-md);margin:var(--size-spacing-vertical-lg) 0}.typo-ref-symbol-card{background:var(--role-card);color:var(--role-card-text);border-width:var(--role-card-border-width);border-style:solid;border-color:var(--role-card-border-color);border-radius:var(--role-card-border-radius);padding:var(--size-spacing-vertical-md);text-align:center;transition:all .3s ease}.typo-ref-symbol-card:hover{background:var(--role-card-hover);border-color:var(--color-accent);transform:translateY(-2px)}.typo-ref-symbol{font-size:var(--font-size-h2);color:var(--color-accent);display:block;margin-bottom:var(--size-spacing-vertical-xs)}.typo-ref-symbol-name{font-family:var(--font-body);font-size:var(--font-size-caption);color:var(--role-card-text);opacity:.7}.typo-ref-sample{background:var(--role-card);color:var(--role-card-text);border-left:var(--role-card-border-width) solid var(--color-accent);padding:var(--size-spacing-vertical-lg) var(--size-spacing-horizontal-xl);margin:var(--size-spacing-vertical-lg) 0;border-radius:0 var(--radius-md) var(--radius-md) 0}.typo-ref-lead{font-family:var(--font-heading);font-size:var(--font-size-h4);font-style:italic;color:var(--role-card-text);margin-bottom:var(--size-spacing-vertical-md);opacity:.9}.typo-ref-drop-cap:first-letter{font-family:var(--font-heading);font-size:4.5rem;float:left;line-height:.8;margin-right:var(--size-spacing-horizontal-sm);margin-top:.1rem;color:var(--color-accent)}.typo-ref-decorative-quote{text-align:center;padding:var(--size-spacing-vertical-xl) var(--size-spacing-horizontal-lg);position:relative}.typo-ref-decorative-quote:before{content:"❧";display:block;font-size:var(--font-size-h2);color:var(--color-accent);margin-bottom:var(--size-spacing-vertical-lg)}.typo-ref-decorative-quote blockquote{font-family:var(--font-heading);font-size:var(--font-size-h3);font-style:italic;font-weight:var(--font-weight-h3);letter-spacing:var(--letter-spacing-h3);line-height:var(--line-height-h3);max-width:600px;margin:0 auto;color:var(--role-app-background-text)}.typo-ref-decorative-quote cite{display:block;margin-top:var(--size-spacing-vertical-lg);font-family:var(--font-body);font-size:var(--font-size-caption);font-style:normal;letter-spacing:var(--letter-spacing-small);line-height:var(--line-height-small);text-transform:uppercase;color:var(--role-app-background-text);opacity:.7}.typo-ref-decorative-quote:after{content:"☙";display:block;font-size:var(--font-size-h2);color:var(--color-accent);margin-top:var(--size-spacing-vertical-lg)}.typo-ref-ornamental-list{list-style:none;padding:0;margin:0}.typo-ref-ornamental-list li{font-family:var(--font-body);font-size:var(--font-size-body);padding:var(--size-spacing-vertical-sm) 0;padding-left:var(--size-spacing-horizontal-xl);position:relative;color:var(--role-app-background-text)}.typo-ref-list-stars li:before{content:"✦";position:absolute;left:0;color:var(--color-accent)}.typo-ref-list-florettes li:before{content:"✿";position:absolute;left:0;color:var(--color-accent)}.typo-ref-list-hearts li:before{content:"❦";position:absolute;left:0;color:var(--color-accent)}.typo-ref-chapter-heading{text-align:center;margin:var(--size-spacing-vertical-xl) 0;padding:var(--size-spacing-vertical-lg)}.typo-ref-chapter-number{font-family:var(--font-body);font-size:var(--font-size-caption);letter-spacing:var(--letter-spacing-small);line-height:var(--line-height-small);text-transform:uppercase;color:var(--role-app-background-text);opacity:.6;margin-bottom:var(--size-spacing-vertical-sm)}.typo-ref-chapter-ornament{font-size:var(--font-size-h2);color:var(--color-accent);margin:var(--size-spacing-vertical-md) 0}.typo-ref-composition{background:var(--role-card);color:var(--role-card-text);border:var(--role-card-border-width) var(--role-card-border-style) var(--role-card-border-color);border-radius:var(--radius-lg);padding:var(--size-spacing-vertical-xl);margin:var(--size-spacing-vertical-lg) 0;text-align:center}.typo-ref-composition-ornament{font-size:var(--font-size-h3);color:var(--color-accent);letter-spacing:.5rem;margin:var(--size-spacing-vertical-md) 0}.typo-ref-footer{text-align:center;margin-top:var(--size-spacing-vertical-xl);padding-top:var(--size-spacing-vertical-xl);border-top:var(--role-divider-border-width) var(--role-divider-border-style) var(--color-accent);opacity:.5}.typo-ref-footer-ornament{font-size:var(--font-size-h2);color:var(--color-accent);letter-spacing:1rem}.typo-ref-footer-text{font-family:var(--font-body);font-size:var(--font-size-caption);letter-spacing:var(--letter-spacing-small);line-height:var(--line-height-small);text-transform:uppercase;margin-top:var(--size-spacing-vertical-md);color:var(--role-app-background-text);opacity:.7}.roles-preview-tabs{--rp-tabs-bg: var(--role-nav-tab);--rp-tabs-hover-bg: var(--role-nav-tab-hover);--rp-tabs-active-bg: var(--role-nav-tab-active);--rp-tabs-border: var(--role-nav-tab-border-color);--rp-tabs-hover-border: var(--role-nav-tab-hover-border-color);--rp-tabs-active-border: var(--role-nav-tab-active-border-color);--rp-tabs-text: var(--role-nav-tab-text);--rp-tabs-hover-text: var(--role-nav-tab-hover-text);--rp-tabs-active-text: var(--role-nav-tab-active-text)}.roles-preview-tabs .tabs-header-wrapper{border-bottom:var(--role-nav-tab-border-width) var(--role-nav-tab-border-style) var(--rp-tabs-border);padding:0 var(--size-spacing-horizontal-xs)}.roles-preview-tabs .tabs-header{gap:var(--size-spacing-vertical-xs);padding:0}.roles-preview-tabs .tabs-tab{background:var(--rp-tabs-bg);color:var(--rp-tabs-text);border:var(--role-nav-tab-border-width) var(--role-nav-tab-border-style) var(--rp-tabs-border);border-bottom-width:var(--role-nav-tab-border-width);border-radius:var(--corner-sm) var(--corner-sm) 0 0;padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-sm);min-height:auto;top:0}.roles-preview-tabs .tabs-tab:hover{background:var(--rp-tabs-hover-bg);color:var(--rp-tabs-hover-text);border-color:var(--rp-tabs-hover-border)}.roles-preview-tabs .tabs-tab-active{background:var(--rp-tabs-active-bg);color:var(--rp-tabs-active-text);border-color:var(--rp-tabs-active-border);border-bottom-color:var(--rp-tabs-active-border)}.preview-variables{padding:var(--size-spacing-vertical-md);background:var(--role-app-background);color:var(--role-app-background-text);min-height:100%}.preview-variables-header{margin-bottom:var(--size-spacing-vertical-md)}.preview-variables-title{font-family:var(--font-heading);font-size:var(--font-size-h2);font-weight:var(--font-weight-h2);color:var(--surface-0-h2);margin:0 0 var(--size-spacing-vertical-xs) 0}.preview-variables-subtitle{font-size:var(--font-size-caption);color:var(--surface-0-body);opacity:.8;margin:0}.preview-variables-controls{display:flex;flex-wrap:wrap;gap:var(--size-spacing-vertical-sm);margin-bottom:var(--size-spacing-vertical-md)}.preview-variables-filters{display:flex;gap:var(--size-spacing-vertical-xs);flex-wrap:wrap}.preview-variables-filter{padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-sm);font-size:var(--font-size-caption);border:var(--role-card-border-width) var(--role-card-border-style) var(--role-card-border-color);border-radius:var(--corner-sm);background:var(--role-card);color:var(--role-card-text);cursor:pointer;transition:all .15s ease}.preview-variables-filter:hover{background:var(--role-card-hover);color:var(--role-card-hover-text)}.preview-variables-filter.active{background:var(--role-button);color:var(--role-button-text);border-color:var(--role-button-border-color)}.preview-variables-search{flex:1;min-width:200px;padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-sm);font-size:var(--font-size-caption);border:var(--role-card-border-width) var(--role-card-border-style) var(--role-card-border-color);border-radius:var(--corner-sm);background:var(--role-card);color:var(--role-card-text)}.preview-variables-search::placeholder{color:var(--role-card-text);opacity:.5}.preview-variables-count{font-size:var(--font-size-caption);color:var(--surface-0-body);opacity:.7;margin-bottom:var(--size-spacing-vertical-sm)}.preview-variables-list{display:flex;flex-direction:column;gap:2px;font-family:var(--font-mono);font-size:var(--font-size-caption)}.preview-variable-row{display:flex;align-items:center;gap:var(--size-spacing-vertical-sm);padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-sm);background:var(--role-card);border-radius:var(--corner-xs)}.preview-variable-row:nth-child(2n){background:var(--role-app-background)}.preview-variable-name{color:var(--role-card-text);font-weight:600;min-width:280px;flex-shrink:0}.preview-variable-row:nth-child(2n) .preview-variable-name{color:var(--role-app-background-text)}.preview-variable-value{display:flex;align-items:center;gap:var(--size-spacing-vertical-xs);color:var(--role-card-text);word-break:break-all}.preview-variable-row:nth-child(2n) .preview-variable-value{color:var(--role-app-background-text)}.frames-preview{padding:var(--size-spacing-vertical-lg)}.frames-preview__subtitle{color:var(--role-content-text)}.frames-spine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--size-spacing-vertical-md)}.frames-spine-item{display:flex;flex-direction:column;gap:var(--size-spacing-vertical-xs)}.frames-spine-preview{min-height:var(--size-spacing-vertical-3xl);font-family:var(--font-mono);font-size:var(--font-size-body);font-weight:var(--font-weight-bold);display:flex;align-items:center;justify-content:center}.frames-spine-preview__inner{width:100%;text-align:center}.frames-spine-meta{text-align:center;font-family:var(--font-mono);font-size:var(--font-size-caption);color:var(--role-content-text);opacity:var(--state-disabled-opacity)}.frames-pad-s0{padding:var(--space-s0)}.frames-pad-s1{padding:var(--space-s1)}.frames-pad-s2{padding:var(--space-s2)}.frames-pad-s3{padding:var(--space-s3)}.frames-pad-s4{padding:var(--space-s4)}.frames-pad-s5{padding:var(--space-s5)}.frames-pad-s6{padding:var(--space-s6)}.frames-pad-s7{padding:var(--space-s7)}.frames-pad-s8{padding:var(--space-s8)}.frames-pad-s9{padding:var(--space-s9)}.frames-frame-f0{border-radius:var(--frame-f0-border-radius, 0);border-width:var(--frame-f0-border-width, 0);border-style:var(--frame-f0-border-style, solid);border-color:var(--frame-f0-border-color, var(--role-card-border-color));box-shadow:var(--frame-f0-shadow, none)}.frames-frame-f1{border-radius:var(--frame-f1-border-radius, 0);border-width:var(--frame-f1-border-width, 0);border-style:var(--frame-f1-border-style, solid);border-color:var(--frame-f1-border-color, var(--role-card-border-color));box-shadow:var(--frame-f1-shadow, none)}.frames-frame-f2{border-radius:var(--frame-f2-border-radius, 0);border-width:var(--frame-f2-border-width, 0);border-style:var(--frame-f2-border-style, solid);border-color:var(--frame-f2-border-color, var(--role-card-border-color));box-shadow:var(--frame-f2-shadow, none)}.frames-frame-f3{border-radius:var(--frame-f3-border-radius, 0);border-width:var(--frame-f3-border-width, 0);border-style:var(--frame-f3-border-style, solid);border-color:var(--frame-f3-border-color, var(--role-card-border-color));box-shadow:var(--frame-f3-shadow, none)}.frames-frame-f4{border-radius:var(--frame-f4-border-radius, 0);border-width:var(--frame-f4-border-width, 0);border-style:var(--frame-f4-border-style, solid);border-color:var(--frame-f4-border-color, var(--role-card-border-color));box-shadow:var(--frame-f4-shadow, none)}.frames-frame-f5{border-radius:var(--frame-f5-border-radius, 0);border-width:var(--frame-f5-border-width, 0);border-style:var(--frame-f5-border-style, solid);border-color:var(--frame-f5-border-color, var(--role-card-border-color));box-shadow:var(--frame-f5-shadow, none)}.frames-frame-f6{border-radius:var(--frame-f6-border-radius, 0);border-width:var(--frame-f6-border-width, 0);border-style:var(--frame-f6-border-style, solid);border-color:var(--frame-f6-border-color, var(--role-card-border-color));box-shadow:var(--frame-f6-shadow, none)}.frames-frame-f7{border-radius:var(--frame-f7-border-radius, 0);border-width:var(--frame-f7-border-width, 0);border-style:var(--frame-f7-border-style, solid);border-color:var(--frame-f7-border-color, var(--role-card-border-color));box-shadow:var(--frame-f7-shadow, none)}.frames-frame-f8{border-radius:var(--frame-f8-border-radius, 0);border-width:var(--frame-f8-border-width, 0);border-style:var(--frame-f8-border-style, solid);border-color:var(--frame-f8-border-color, var(--role-card-border-color));box-shadow:var(--frame-f8-shadow, none)}.frames-frame-f9{border-radius:var(--frame-f9-border-radius, 0);border-width:var(--frame-f9-border-width, 0);border-style:var(--frame-f9-border-style, solid);border-color:var(--frame-f9-border-color, var(--role-card-border-color));box-shadow:var(--frame-f9-shadow, none)}.frames-tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--size-spacing-vertical-lg)}.frames-tc-card{display:flex;flex-direction:column}.frames-tc-mappings{display:flex;flex-direction:column;gap:var(--size-spacing-vertical-xxs)}.frames-tc-row{display:flex;align-items:baseline;gap:var(--size-spacing-horizontal-sm)}.frames-tc-role,.frames-tc-step{font-size:var(--font-size-caption);font-family:var(--font-mono);color:var(--role-card-text);opacity:var(--state-disabled-opacity)}.frames-tc-role{width:50px}.frames-tc-step{width:24px}.frames-tc-sample{color:var(--role-card-text);white-space:nowrap}.frames-tc-sample--prose.frames-tc-sample--h1{font-size:var(--tc-prose-h1-size, var(--font-size-body))}.frames-tc-sample--prose.frames-tc-sample--h2{font-size:var(--tc-prose-h2-size, var(--font-size-body))}.frames-tc-sample--prose.frames-tc-sample--h3{font-size:var(--tc-prose-h3-size, var(--font-size-body))}.frames-tc-sample--prose.frames-tc-sample--h4{font-size:var(--tc-prose-h4-size, var(--font-size-body))}.frames-tc-sample--prose.frames-tc-sample--body{font-size:var(--tc-prose-body-size, var(--font-size-body))}.frames-tc-sample--prose.frames-tc-sample--caption{font-size:var(--tc-prose-caption-size, var(--font-size-body))}.frames-tc-sample--prose.frames-tc-sample--label{font-size:var(--tc-prose-label-size, var(--font-size-body))}.frames-tc-sample--prose-compact.frames-tc-sample--h1{font-size:var(--tc-prose-compact-h1-size, var(--font-size-body))}.frames-tc-sample--prose-compact.frames-tc-sample--h2{font-size:var(--tc-prose-compact-h2-size, var(--font-size-body))}.frames-tc-sample--prose-compact.frames-tc-sample--h3{font-size:var(--tc-prose-compact-h3-size, var(--font-size-body))}.frames-tc-sample--prose-compact.frames-tc-sample--h4{font-size:var(--tc-prose-compact-h4-size, var(--font-size-body))}.frames-tc-sample--prose-compact.frames-tc-sample--body{font-size:var(--tc-prose-compact-body-size, var(--font-size-body))}.frames-tc-sample--prose-compact.frames-tc-sample--caption{font-size:var(--tc-prose-compact-caption-size, var(--font-size-body))}.frames-tc-sample--prose-compact.frames-tc-sample--label{font-size:var(--tc-prose-compact-label-size, var(--font-size-body))}.frames-tc-sample--ui.frames-tc-sample--h1{font-size:var(--tc-ui-h1-size, var(--font-size-body))}.frames-tc-sample--ui.frames-tc-sample--h2{font-size:var(--tc-ui-h2-size, var(--font-size-body))}.frames-tc-sample--ui.frames-tc-sample--h3{font-size:var(--tc-ui-h3-size, var(--font-size-body))}.frames-tc-sample--ui.frames-tc-sample--h4{font-size:var(--tc-ui-h4-size, var(--font-size-body))}.frames-tc-sample--ui.frames-tc-sample--body{font-size:var(--tc-ui-body-size, var(--font-size-body))}.frames-tc-sample--ui.frames-tc-sample--caption{font-size:var(--tc-ui-caption-size, var(--font-size-body))}.frames-tc-sample--ui.frames-tc-sample--label{font-size:var(--tc-ui-label-size, var(--font-size-body))}.frames-tc-sample--ui-compact.frames-tc-sample--h1{font-size:var(--tc-ui-compact-h1-size, var(--font-size-body))}.frames-tc-sample--ui-compact.frames-tc-sample--h2{font-size:var(--tc-ui-compact-h2-size, var(--font-size-body))}.frames-tc-sample--ui-compact.frames-tc-sample--h3{font-size:var(--tc-ui-compact-h3-size, var(--font-size-body))}.frames-tc-sample--ui-compact.frames-tc-sample--h4{font-size:var(--tc-ui-compact-h4-size, var(--font-size-body))}.frames-tc-sample--ui-compact.frames-tc-sample--body{font-size:var(--tc-ui-compact-body-size, var(--font-size-body))}.frames-tc-sample--ui-compact.frames-tc-sample--caption{font-size:var(--tc-ui-compact-caption-size, var(--font-size-body))}.frames-tc-sample--ui-compact.frames-tc-sample--label{font-size:var(--tc-ui-compact-label-size, var(--font-size-body))}.frames-archetypes{display:flex;flex-direction:column;gap:var(--size-spacing-vertical-xl)}.frame-category-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--size-spacing-vertical-md);margin-bottom:var(--size-spacing-vertical-lg)}.frame-item{display:flex;flex-direction:column;gap:var(--size-spacing-vertical-xs)}.frame-example{min-height:var(--size-spacing-vertical-3xl);display:flex;align-items:center;justify-content:center}.frame-example__icon{font-size:var(--font-size-h2);opacity:var(--state-disabled-opacity)}.frame-info{display:flex;flex-direction:column;gap:var(--size-spacing-vertical-xxs)}.frame-info__label{font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);color:var(--role-content-text)}.frame-info__description{font-size:var(--font-size-caption);color:var(--role-content-text);opacity:.8}.frame-info__details{font-size:var(--font-size-caption);font-family:var(--font-mono);color:var(--role-content-text);opacity:var(--state-disabled-opacity);margin-top:var(--size-spacing-vertical-xxs)}.frames-vt-card-frame{border-radius:var(--frame-card-frame-border-radius, 0);border-width:var(--frame-card-frame-border-width, 0);border-style:var(--frame-card-frame-border-style, solid);border-color:var(--frame-card-frame-border-color, var(--role-card-border-color));padding:var(--frame-card-frame-padding, var(--role-card-padding));box-shadow:var(--frame-card-frame-shadow, none)}.frames-vt-panel-frame{border-radius:var(--frame-panel-frame-border-radius, 0);border-width:var(--frame-panel-frame-border-width, 0);border-style:var(--frame-panel-frame-border-style, solid);border-color:var(--frame-panel-frame-border-color, var(--role-card-border-color));padding:var(--frame-panel-frame-padding, var(--role-card-padding));box-shadow:var(--frame-panel-frame-shadow, none)}.frames-vt-chip-frame{border-radius:var(--frame-chip-frame-border-radius, 0);border-width:var(--frame-chip-frame-border-width, 0);border-style:var(--frame-chip-frame-border-style, solid);border-color:var(--frame-chip-frame-border-color, var(--role-card-border-color));padding:var(--frame-chip-frame-padding, var(--role-card-padding));box-shadow:var(--frame-chip-frame-shadow, none)}.frames-vt-button-frame{border-radius:var(--frame-button-frame-border-radius, 0);border-width:var(--frame-button-frame-border-width, 0);border-style:var(--frame-button-frame-border-style, solid);border-color:var(--frame-button-frame-border-color, var(--role-card-border-color));padding:var(--frame-button-frame-padding, var(--role-card-padding));box-shadow:var(--frame-button-frame-shadow, none)}.frames-vt-input-frame{border-radius:var(--frame-input-frame-border-radius, 0);border-width:var(--frame-input-frame-border-width, 0);border-style:var(--frame-input-frame-border-style, solid);border-color:var(--frame-input-frame-border-color, var(--role-card-border-color));padding:var(--frame-input-frame-padding, var(--role-card-padding));box-shadow:var(--frame-input-frame-shadow, none)}.frames-vt-pill-frame{border-radius:var(--frame-pill-frame-border-radius, 0);border-width:var(--frame-pill-frame-border-width, 0);border-style:var(--frame-pill-frame-border-style, solid);border-color:var(--frame-pill-frame-border-color, var(--role-card-border-color));padding:var(--frame-pill-frame-padding, var(--role-card-padding));box-shadow:var(--frame-pill-frame-shadow, none)}.frames-vt-subtle-frame{border-radius:var(--frame-subtle-frame-border-radius, 0);border-width:var(--frame-subtle-frame-border-width, 0);border-style:var(--frame-subtle-frame-border-style, solid);border-color:var(--frame-subtle-frame-border-color, var(--role-card-border-color));padding:var(--frame-subtle-frame-padding, var(--role-card-padding));box-shadow:var(--frame-subtle-frame-shadow, none)}.frames-vt-topOnly-frame{border-radius:var(--frame-topOnly-frame-border-radius, 0);border-width:var(--frame-topOnly-frame-border-width, 0);border-style:var(--frame-topOnly-frame-border-style, solid);border-color:var(--frame-topOnly-frame-border-color, var(--role-card-border-color));padding:var(--frame-topOnly-frame-padding, var(--role-card-padding));box-shadow:var(--frame-topOnly-frame-shadow, none)}.frames-vt-notched-frame{border-radius:var(--frame-notched-frame-border-radius, 0);border-width:var(--frame-notched-frame-border-width, 0);border-style:var(--frame-notched-frame-border-style, solid);border-color:var(--frame-notched-frame-border-color, var(--role-card-border-color));padding:var(--frame-notched-frame-padding, var(--role-card-padding));box-shadow:var(--frame-notched-frame-shadow, none)}.frames-vt-none-frame{border-radius:var(--frame-none-frame-border-radius, 0);border-width:var(--frame-none-frame-border-width, 0);border-style:var(--frame-none-frame-border-style, solid);border-color:var(--frame-none-frame-border-color, transparent);padding:var(--frame-none-frame-padding, 0);box-shadow:var(--frame-none-frame-shadow, none)}.preview-variable-swatch{width:var(--size-spacing-vertical-md);height:var(--size-spacing-vertical-md);border:var(--role-card-border-width) var(--role-card-border-style) var(--role-card-border-color);border-radius:var(--corner-xs);flex-shrink:0}._wrapper_12dxg_1{width:100%;height:auto}._debugPanel_12dxg_6{font-family:var(--ui-font-mono);font-size:var(--ui-font-size-mini);background:var(--role-panel);color:var(--role-panel-text);padding:var(--ui-space-xs);margin-bottom:var(--ui-space-xs);border-radius:var(--role-panel-border-radius);border-width:var(--role-panel-border-width);border-style:var(--role-panel-border-style);border-color:var(--role-panel-border-color)}._riveBox_12dxg_19{aspect-ratio:1 / 1}.save-preset-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--ui-overlay);display:flex;align-items:center;justify-content:center;z-index:1000}.save-preset-dialog{padding:var(--ui-space-lg);background:var(--role-panel);color:var(--role-panel-text);border:var(--ui-border-width) solid var(--role-panel-border-color);border-radius:var(--ui-border-radius);min-width:320px;max-width:420px;box-shadow:var(--ui-shadow-lg)}.save-preset-title{margin:0 0 var(--ui-space-md) 0;font-size:var(--ui-font-size-heading);font-weight:600;color:inherit}.save-preset-field{margin-bottom:var(--ui-space-md)}.save-preset-label{display:block;font-size:var(--ui-font-size-small);font-weight:500;margin-bottom:var(--ui-space-xs);color:inherit}.save-preset-input,.save-preset-textarea{width:100%;padding:var(--ui-space-sm);background:var(--role-input);color:var(--role-input-text);border:var(--ui-border-width) solid var(--role-input-border-color);border-radius:var(--ui-border-radius);font-size:var(--ui-font-size-base);font-family:inherit;box-sizing:border-box}.save-preset-input:focus,.save-preset-textarea:focus{outline:none;background:var(--role-input-focus);border-color:var(--role-input-focus-border-color)}.save-preset-textarea{resize:vertical;min-height:60px}.save-preset-type-options{display:flex;flex-direction:column;gap:var(--ui-space-xs)}.save-preset-radio{display:flex;align-items:center;gap:var(--ui-space-xs);cursor:pointer;font-size:var(--ui-font-size-small)}.save-preset-radio input[type=radio]{margin:0;accent-color:var(--role-accent)}.save-preset-error{background:var(--role-error);color:var(--role-error-text);padding:var(--ui-space-sm);border-radius:var(--ui-border-radius);margin-bottom:var(--ui-space-md);font-size:var(--ui-font-size-small)}.save-preset-actions{display:flex;justify-content:flex-end;gap:var(--ui-space-sm);margin-top:var(--ui-space-lg);padding-top:var(--ui-space-md);border-top:var(--ui-border-width) solid var(--role-panel-border-color)}.save-preset-cancel,.save-preset-submit{padding:var(--ui-space-sm) var(--ui-space-md);border-radius:var(--ui-border-radius);font-size:var(--ui-font-size-base);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast) ease}.save-preset-cancel{background:transparent;color:inherit;border:var(--ui-border-width) solid var(--role-panel-border-color)}.save-preset-cancel:hover{background:var(--role-panel-content-alt)}.save-preset-submit{background:var(--role-accent);color:var(--role-accent-text);border:none}.save-preset-submit:hover{opacity:var(--ui-opacity-hover, .9)}