@import"https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@600&display=swap";:root{--font-family-body: var(--font-body, system-ui, sans-serif);--font-family-heading: var(--font-heading, var(--font-body, system-ui, sans-serif));--font-size-large: var(--font-size-h4);--font-size-mini: var(--font-size-tiny);--font-weight-semibold: 600;--font-weight-bold: 700;--corner-xs: var(--radius-xs);--corner-sm: var(--radius-sm);--corner-md: var(--radius-md);--corner-lg: var(--radius-lg);--corner-xl: var(--radius-xl);--corner-pill: var(--radius-pill);--border-width-base: 1px;--border-style-base: solid;--size-spacing-xxs: var(--size-spacing-vertical-xxs);--size-spacing-xs: var(--size-spacing-vertical-xs);--size-spacing-sm: var(--size-spacing-vertical-sm);--size-spacing-md: var(--size-spacing-vertical-md);--size-spacing-lg: var(--size-spacing-vertical-lg);--size-spacing-xl: var(--size-spacing-vertical-xl);--surface-0-border-color: var(--color-neutral, #888);--surface-1-border-color: var(--color-neutral, #888);--surface-2-border-color: var(--color-neutral, #888);--surface-3-border-color: var(--color-neutral, #888);--surface-4-border-color: var(--color-neutral, #888);--surface-5-border-color: var(--color-neutral, #888);--surface-6-border-color: var(--color-neutral, #888);--surface-7-border-color: var(--color-neutral, #888);--surface-0-border-width: 1px;--surface-1-border-width: 1px;--surface-2-border-width: 1px;--surface-3-border-width: 1px;--surface-4-border-width: 1px;--surface-5-border-width: 1px;--surface-6-border-width: 1px;--surface-7-border-width: 1px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family-body, system-ui);font-size:var(--font-size-body);color:var(--role-app-background-text);font-weight:var(--font-weight-body);background:var(--role-app-background);line-height:1.6;accent-color:var(--color-primary)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading, var(--font-family-body, system-ui))}h1,h2,h3,h4,h5,h6,p,span,div,li,label,small{color:inherit}.surface-0 h1,.bg-surface-0 h1{color:var(--surface-0-h1)}.surface-0 h2,.bg-surface-0 h2{color:var(--surface-0-h2)}.surface-0 h3,.bg-surface-0 h3{color:var(--surface-0-h3)}.surface-0 h4,.bg-surface-0 h4,.surface-0 h5,.bg-surface-0 h5{color:var(--surface-0-h4)}.surface-0 h6,.bg-surface-0 h6,.surface-0 small,.bg-surface-0 small{color:var(--surface-0-caption)}input,select,textarea{background:var(--role-input);color:var(--role-input-text);border-color:var(--role-input-border-color);font-family:inherit}option,optgroup{background:Canvas;color:CanvasText}optgroup{font-weight:600}.app-header{display:flex;justify-content:space-between;align-items:center;width:100%}.app-header h1{font-family:var(--font-family-heading, var(--font-family-body, system-ui));font-size:var(--font-size-large);margin-bottom:var(--size-spacing-vertical-xs);font-weight:var(--font-weight-semibold)}.app-header p{font-size:var(--font-size-caption);opacity:var(--state-disabled-opacity)}.app-main{flex:1;padding:0}.test-card{max-width:600px;padding:var(--role-card-padding);background:var(--role-card);border:var(--role-card-border-width) var(--role-card-border-style) var(--role-card-border-color);border-radius:var(--role-card-border-radius);box-shadow:var(--role-card-shadow)}.test-card h2{font-family:var(--font-family-heading, var(--font-family-body, system-ui));margin-bottom:var(--size-spacing-vertical-md);color:inherit;font-size:var(--font-size-large)}.test-card p{margin-bottom:var(--size-spacing-vertical-md);color:inherit;line-height:1.6}.test-card p:last-of-type{margin-bottom:var(--size-spacing-vertical-lg)}code{display:inline-block;padding:var(--size-spacing-vertical-xxs) var(--size-spacing-horizontal-xxs);background:var(--role-inline-code, var(--role-panel, var(--ui-bg)));color:var(--role-inline-code-text, var(--role-panel-text, var(--ui-text)));border-width:var(--role-inline-code-border-width, 0);border-style:var(--role-inline-code-border-style, solid);border-color:var(--role-inline-code-border-color, transparent);border-radius:var(--role-inline-code-border-radius, var(--radius-sm));font-family:var(--font-family-mono, monospace);font-size:var(--font-size-caption)}button{padding:var(--role-button-padding);font-family:var(--font-family-body, sans-serif);font-size:var(--font-size-body);font-weight:var(--font-weight-button);border:none;border-radius:var(--role-button-border-radius);cursor:pointer;transition:none;display:inline-flex;align-items:center;justify-content:center;line-height:var(--line-height-body);color:inherit}.btn-primary{background:var(--role-button);color:var(--role-button-text);margin-right:var(--size-spacing-horizontal-sm)}.btn-primary:hover{background:var(--role-button-hover);box-shadow:var(--shadow-lg)}.btn-primary:active{box-shadow:var(--shadow-md)}.btn-secondary{background:var(--role-button);color:var(--role-button-text);border:var(--role-button-border-width) var(--role-button-border-style) var(--role-button-border-color)}.btn-secondary:hover{background:var(--role-button-hover);color:var(--role-button-hover-text);border-color:var(--role-button-hover-border-color)}:focus-visible{outline:var(--ui-border-width-thick) solid var(--color-primary);outline-offset:var(--ui-border-width-thick)}.info-panel{margin-top:var(--size-spacing-vertical-lg);padding:var(--role-info-panel-padding);background:var(--role-info-panel);color:var(--role-info-panel-text);border-left:var(--role-info-panel-border-width) solid var(--color-primary);border-radius:var(--role-info-panel-border-radius)}.info-panel h3{font-family:var(--font-family-heading, var(--font-family-body, system-ui));font-size:var(--font-size-body);margin-bottom:var(--size-spacing-vertical-sm);color:inherit}.info-panel ul{list-style:none;padding:0}.info-panel li{font-size:var(--font-size-caption);color:inherit;margin-bottom:var(--size-spacing-vertical-xs);padding-left:var(--size-spacing-horizontal-md);position:relative}.info-panel li:before{content:"✓";position:absolute;left:0;color:var(--color-primary);font-weight:var(--font-weight-bold)}[data-role=panel-content]{background:var(--role-panel-content);color:var(--role-panel-content-text);border-radius:var(--role-panel-content-border-radius);padding:var(--role-panel-content-padding)}[data-role=app-background]{background:var(--role-app-background);color:var(--role-app-background-text);border-radius:var(--role-app-background-border-radius);padding:var(--role-app-background-padding);min-width:0;overflow:hidden}[data-role=tab]{background:var(--role-tab);color:var(--role-tab-text);border-radius:var(--role-tab-border-radius);padding:var(--role-tab-padding)}[data-role=label]{font-weight:var(--font-weight-semibold);font-size:var(--font-size-caption);margin-bottom:var(--size-spacing-vertical-sm)}[data-role=card]{background:var(--role-card);color:var(--role-card-text);border-radius:var(--role-card-border-radius);padding:var(--role-card-padding);margin-bottom:var(--size-spacing-vertical-md)}[data-role=preview-card]{background:var(--role-card);color:var(--role-card-text);border-radius:var(--role-card-border-radius);padding:var(--role-card-padding);min-width:0;overflow:hidden}[data-role=chip]{background:var(--role-chip);color:var(--role-chip-text);border-radius:var(--role-chip-border-radius);padding:var(--role-chip-padding);font-size:var(--font-size-caption)}[data-role=chip]:hover{background:var(--role-chip-hover);color:var(--role-chip-hover-text)}[data-role=chip-active]{background:var(--role-chip-active);color:var(--role-chip-active-text);border-radius:var(--role-chip-active-border-radius);padding:var(--role-chip-active-padding);font-size:var(--font-size-caption)}[data-role=table-row]{background:var(--role-table-row);color:var(--role-table-row-text);padding:var(--role-table-row-padding)}[data-role=table-row]:hover{background:var(--role-table-row-hover);color:var(--role-table-row-hover-text)}[data-role=table-row-active]{background:var(--role-table-row-active);color:var(--role-table-row-active-text);padding:var(--role-table-row-active-padding)}[data-role=hint]{font-size:var(--font-size-caption);opacity:var(--state-disabled-opacity)}[data-role=collapsible-header]{background:var(--role-collapsible-header);color:var(--role-collapsible-header-text);border-radius:var(--role-collapsible-header-border-radius);padding:var(--role-collapsible-header-padding);width:100%;text-align:left;cursor:pointer;border:none}[data-role=collapsible-header]:hover{background:var(--role-collapsible-header-hover);color:var(--role-collapsible-header-hover-text)}[data-role=collapsible-content]{background:var(--role-collapsible-content);color:var(--role-collapsible-content-text);padding:var(--role-collapsible-content-padding);border-radius:0 0 var(--role-collapsible-content-border-radius) var(--role-collapsible-content-border-radius)}:root{--ui-primary: var(--color-primary);--ui-secondary: var(--color-secondary);--ui-accent: var(--color-accent);--ui-success: var(--role-success-text);--ui-warning: var(--role-warning-text);--ui-info: var(--role-info-panel-text);--ui-danger: var(--role-error-text);--ui-success-bg: var(--role-success);--ui-warning-bg: var(--role-warning);--ui-danger-bg: var(--role-error);--ui-font-body: var(--font-body);--ui-font-heading: var(--font-heading);--ui-font-instructional: var(--font-instructional);--ui-bg: var(--role-app-background);--ui-bg-muted: var(--role-panel);--ui-bg-subtle: var(--role-panel);--ui-panel-bg: var(--role-panel-content);--ui-panel-bg-alt: var(--role-panel-content-alt);--ui-border: var(--role-panel-content-border-color);--ui-border-subtle: var(--role-panel-content-border-color);--ui-border-width: var(--role-panel-content-border-width);--ui-border-style: var(--role-panel-content-border-style);--ui-text: var(--role-app-background-text);--ui-text-muted: var(--role-hint-text);--ui-text-subtle: var(--role-hint-text);--ui-opacity-disabled: var(--state-disabled-opacity);--ui-font-weight-regular: var(--font-weight-body);--ui-font-weight-medium: var(--font-weight-h4);--ui-font-weight-semibold: var(--font-weight-h3);--ui-font-weight-bold: var(--font-weight-h1);--ui-font-size-instruction: var(--ui-font-size-mini);--ui-font-size-component-label: calc(var(--ui-font-size-mini) * .9);--ui-letter-spacing-wide: .2px;--ui-border-width-strong: calc(var(--ui-border-width) * 2);--ui-swatch-size: var(--ui-icon-size, calc(var(--ui-space-sm) + var(--ui-space-xxs)))}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:var(--role-app-header);color:var(--role-app-header-text);padding:var(--role-app-header-padding);border-bottom:none;display:flex;justify-content:space-between;align-items:center;gap:var(--role-app-header-gap)}.app-brand{display:flex;align-items:center;gap:var(--role-app-header-gap)}.app-brand>div{display:flex;flex-direction:column;gap:.125rem}.app-brand-title{margin:0;font-size:var(--font-size-h1);line-height:1.2;font-weight:var(--font-weight-h1);font-family:var(--font-heading)}.app-brand-badge{font-size:.6em;font-weight:400;opacity:var(--ui-opacity-subtle);margin-left:var(--role-chip-gap)}.app-brand-subtitle{margin:0;font-size:var(--ui-font-size-small);opacity:var(--ui-opacity-subtle);font-weight:400}.app-header h1{margin:0;font-size:inherit;font-weight:inherit}.app-logo{height:var(--brand-logo-size, calc(var(--font-size-h1) * 1.8));width:auto;display:block}.brand-title{margin:0;font-size:var(--font-size-h1);line-height:var(--line-height);font-weight:var(--font-weight-h1);font-family:var(--font-heading)}.brand-word-primary{font-family:Cormorant Unicase,serif;font-variant:small-caps;letter-spacing:.08em}.brand-word-secondary{font-family:inherit}.brand-badge{font-size:.6em;font-weight:400;opacity:var(--ui-opacity-subtle)}.app-header h1{margin-bottom:0;padding-bottom:0;border-bottom:none}.app-header p{margin:0;font-size:var(--ui-font-size-small);opacity:var(--ui-opacity-subtle)}.app-layout{display:grid;grid-template-columns:400px 1fr 0px;gap:0;flex:1;overflow:hidden;transition:grid-template-columns .3s ease}.layout-relationships .app-layout{grid-template-columns:66% 34% 0px!important}.layout-relationships .editor-panel,.layout-relationships .editor-panel .config-info,.layout-relationships .editor-panel .vt-display,.layout-relationships .editor-panel .dt-display{padding:0}.layout-relationships .validation-panel{display:none}.layout-relationships .panel-toggle{display:none!important}.editor-panel{background-color:var(--role-panel-content);color:var(--role-panel-content-text);border-right-width:var(--role-panel-content-border-width);border-right-style:var(--role-panel-content-border-style);border-right-color:var(--role-panel-content-border-color);overflow-y:auto;padding:0}.validator-panel{border-right:none;border-left-width:var(--role-panel-content-alt-border-width);border-left-style:var(--role-panel-content-alt-border-style);border-left-color:var(--role-panel-content-alt-border-color)}.editor-panel h2{font-size:var(--ui-font-size-base);color:var(--ui-text);margin:0 0 var(--role-panel-content-gap) 0;padding-bottom:var(--role-panel-content-padding);border-bottom:var(--ui-border-width) var(--role-panel-content-border-style) var(--ui-border);font-weight:600}.config-display,.controls{margin-bottom:var(--role-panel-content-margin)}.config-info,.vt-display,.dt-display{background:var(--role-app-background);color:var(--role-app-background-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(--role-panel-content-border-radius);padding:var(--role-panel-content-padding);margin-bottom:var(--role-panel-content-gap);transition:background-color var(--ui-transition-normal) ease}.config-info h3,.vt-display h3,.dt-display h3{font-size:var(--ui-font-size-small);color:var(--ui-text);margin:0 0 var(--role-panel-gap) 0;text-transform:uppercase;letter-spacing:var(--ui-letter-spacing-caps);font-weight:600}.config-info p{font-size:var(--ui-font-size-small);color:inherit;margin:0 0 var(--role-panel-gap) 0;line-height:1.6}.config-info p:last-child{margin-bottom:0}.vt-display ul,.dt-display ul{list-style:none;padding:0;margin:0;font-size:var(--ui-font-size-small);color:inherit}.vt-display li,.dt-display li{padding:var(--role-panel-gap) 0;line-height:1.6}code{background:var(--role-inline-code, var(--role-panel, var(--ui-bg)));color:var(--role-inline-code-text, var(--role-panel-text, var(--ui-text)));padding:var(--role-inline-code-padding, var(--ui-space-tiny) var(--ui-space-micro));border-width:var(--role-inline-code-border-width, 0);border-style:var(--role-inline-code-border-style, solid);border-color:var(--role-inline-code-border-color, transparent);border-radius:var(--role-inline-code-border-radius, var(--ui-border-radius-sm));font-family:var(--ui-font-mono);font-size:.85em}code.code-plain{background:transparent;color:inherit;border:none;padding:0}.dt-inline-highlight{color:var(--color-highlight);font-weight:600}.dt-instruction{font-family:var(--ui-font-instructional);font-size:var(--ui-font-size-mini);font-style:normal;color:var(--ui-text);line-height:1.4}.dt-instruction-muted{font-family:var(--ui-font-instructional);font-size:var(--ui-font-size-mini);font-style:italic;color:inherit;line-height:1.4}.preview-panel{background-color:var(--role-app-background);color:var(--role-app-background-text);overflow-y:auto;padding:0}.validation-panel-container{border-left-width:var(--role-panel-content-alt-border-width);border-left-style:var(--role-panel-content-alt-border-style);border-left-color:var(--role-panel-content-alt-border-color);background:var(--role-panel-content-alt);color:var(--role-panel-content-alt-text);padding:var(--rim-spacing);overflow-y:auto}.preview-panel>h2{font-size:var(--ui-font-size-large);color:var(--ui-text);margin:0 0 var(--role-app-background-gap) 0;font-weight:600}.preview-description{font-family:var(--ui-font-instructional);font-size:var(--ui-font-size-small);font-style:italic;color:inherit;margin:0 0 var(--role-app-background-margin) 0;line-height:1.6}.preview-section{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);padding:var(--size-spacing-lg);margin-bottom:var(--size-spacing-md)}.preview-section:last-child{margin-bottom:0}.grid-2col{display:grid;gridTemplateColumns:1fr 1fr;gap:var(--size-spacing-md)}.flex-row{display:flex;gap:var(--size-spacing-xs);align-items:center;flex-wrap:wrap}.flex-col-center{display:flex;flex-direction:column;align-items:center;text-align:center}.mb-xxs{margin-bottom:var(--size-spacing-xxs)}.mb-xs{margin-bottom:var(--size-spacing-xs)}.mb-sm{margin-bottom:var(--size-spacing-sm)}.mb-md{margin-bottom:var(--size-spacing-md)}.mb-lg{margin-bottom:var(--size-spacing-lg)}.mb-xl{margin-bottom:var(--size-spacing-xl)}.mb-2xl{margin-bottom:var(--size-spacing-2xl)}.mt-xxs{margin-top:var(--size-spacing-xxs)}.mt-xs{margin-top:var(--size-spacing-xs)}.mt-sm{margin-top:var(--size-spacing-sm)}.mt-md{margin-top:var(--size-spacing-md)}.mt-lg{margin-top:var(--size-spacing-lg)}.mt-xl{margin-top:var(--size-spacing-xl)}.text-center{text-align:center}.font-mini{font-size:var(--ui-font-size-mini)}.font-small{font-size:var(--ui-font-size-small)}.bg-subtle{background:var(--ui-bg-subtle)}.surface-panel{background:var(--role-panel);color:var(--role-panel-text)}.surface-panel-alt{background:var(--role-panel-alt);color:var(--role-panel-alt-text)}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.display-flex{display:flex}.flex-wrap{flex-wrap:wrap}.align-center{align-items:center}.align-end{align-items:flex-end}.align-self-center{align-self:center}.justify-center{justify-content:center}.gap-xs{gap:var(--size-spacing-xs)}.gap-sm{gap:var(--size-spacing-sm)}.gap-md{gap:var(--size-spacing-md)}.row-gap-sm{row-gap:var(--size-spacing-sm)}.column-gap-sm{column-gap:var(--size-spacing-sm)}.grid-auto{display:grid}.grid-cols-2{grid-template-columns:1fr 1fr}.margin-0{margin:0}.padding-md{padding:var(--size-spacing-md)}.border-radius-sm{border-radius:var(--radius-sm)}.border-radius-md{border-radius:var(--radius-md)}.preview-with-chips{position:relative}.info-chips-row{display:flex;gap:var(--role-chip-gap);flex-wrap:wrap;margin-bottom:var(--role-panel-gap)}.severity-frame-error{outline:var(--ui-border-width-thick) var(--ui-danger);outline-offset:var(--ui-outline-offset);border-radius:var(--role-panel-border-radius)}.severity-frame-warning{outline:var(--ui-border-width-thick) var(--ui-warning);outline-offset:var(--ui-outline-offset);border-radius:var(--role-panel-border-radius)}.severity-frame-info{outline:var(--ui-border-width-thick) var(--ui-info);outline-offset:var(--ui-outline-offset);border-radius:var(--role-panel-border-radius)}.preview-section>h3{font-size:var(--ui-font-size-base);color:var(--ui-text);margin:0 0 var(--role-app-background-gap) 0;font-weight:600;border-bottom-width:var(--role-panel-content-alt-border-width);border-bottom-style:var(--role-panel-content-alt-border-style);border-bottom-color:var(--role-panel-content-alt-border-color);padding-bottom:var(--role-app-background-padding)}.preview-colors .swatch-row,.color-swatches,.swatch-grid{display:flex;flex-wrap:wrap;gap:var(--role-app-background-gap);align-items:flex-start}.state-layer{position:relative;overflow:hidden;isolation:isolate}.state-layer:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:opacity .15s ease-out;background:#000;border-radius:inherit}.state-layer--lighten:after{background:var(--role-state-layer-lighten)}.state-layer:hover:after{opacity:var(--state-hover-opacity)}.state-layer:active:after{opacity:var(--state-active-opacity)}.state-layer:focus-visible:after{opacity:var(--state-focus-opacity)}.state-layer:disabled,.state-layer[aria-disabled=true]{opacity:calc(1 - var(--state-disabled-opacity));pointer-events:none}.state-layer.dragging:after{opacity:var(--state-drag-opacity)}.interp-swatch{position:relative}.interp-tooltip{display:none;position:absolute;bottom:100%;left:0;transform:translateY(-2px);font-size:var(--ui-font-size-instruction);line-height:1;padding:var(--role-chip-padding);border-radius:var(--ui-border-radius-pill);border-width:var(--role-chip-border-width);border-style:var(--role-chip-border-style);border-color:var(--role-chip-border-color);white-space:nowrap;box-shadow:var(--role-chip-shadow);pointer-events:none}.interp-swatch:hover .interp-tooltip{display:inline-flex}[data-breakpoint=desktop] .app-layout,[data-breakpoint=tablet] .app-layout,[data-breakpoint=mobile] .app-layout{grid-template-columns:350px 1fr}[data-breakpoint=tablet] .app-layout,[data-breakpoint=mobile] .app-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}[data-breakpoint=tablet] .editor-panel,[data-breakpoint=mobile] .editor-panel{border-right:none;border-bottom-width:var(--role-panel-content-border-width);border-bottom-style:var(--role-panel-content-border-style);border-bottom-color:var(--role-panel-content-border-color);max-height:50vh}[data-breakpoint=tablet] .preview-panel,[data-breakpoint=mobile] .preview-panel{overflow-y:auto}[data-breakpoint=tablet] .validation-panel-container,[data-breakpoint=mobile] .validation-panel-container{display:none}