@import"https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@600&display=swap";: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}.app-shell-header{display:flex;justify-content:space-between;align-items:center;padding:var(--size-spacing-vertical-md) var(--size-spacing-horizontal-lg);background-color:var(--role-app-header);color:var(--role-app-header-text);border-bottom-width:var(--role-app-header-border-width);border-bottom-style:var(--role-app-header-border-style);border-bottom-color:var(--role-app-header-border-color);height:auto}.app-shell-nav{display:flex;align-items:center;background-color:var(--role-nav-bar);color:var(--role-nav-bar-text);border-bottom-width:var(--role-nav-bar-border-width);border-bottom-style:var(--role-nav-bar-border-style);border-bottom-color:var(--role-nav-bar-border-color);height:auto}.nav-container{display:grid;grid-template-columns:var(--panel-left-width, 350px) 1fr var(--panel-right-width, 320px);gap:var(--size-spacing-vertical-xs);width:100%;align-items:center}.nav-container.nav-no-right{grid-template-columns:var(--panel-left-width, 350px) 1fr auto}.nav-group{display:flex;gap:var(--size-spacing-vertical-xs);align-items:center;padding:0 var(--size-spacing-horizontal-xs)}.nav-group:nth-child(2){justify-content:center}.nav-tab{padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-md);background:transparent;border:none;border-radius:var(--radius-md);color:var(--role-tab-text);opacity:.7;font-size:var(--font-size-caption);font-weight:500;cursor:pointer;transition:none;white-space:nowrap}.nav-tab:hover{background:var(--role-tab-hover);color:var(--role-tab-hover-text);opacity:1}.nav-tab.active{background:var(--role-tab-active);color:var(--role-tab-active-text);opacity:1}.nav-tab:active{transform:translateY(1px)}.nav-tab.nav-tab-accent{border:var(--border-width-base) dashed var(--color-primary);color:var(--color-primary)}.nav-tab.nav-tab-accent:hover{background:var(--role-nav-tab-hover);border-style:solid}.preview-pin-toggle{font-size:var(--font-size-micro, 10px);text-transform:uppercase;letter-spacing:.05em;padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-sm);opacity:.5}.preview-pin-toggle.pinned{opacity:.85;border:var(--ui-border-width) solid var(--role-tab-active-text)}.reset-button{padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-md);background:transparent;border:var(--role-app-header-border-width, var(--border-width-base)) var(--role-app-header-border-style, var(--border-style-base)) var(--role-app-header-border-color);border-radius:var(--radius-md);color:var(--role-app-header-text);font-size:var(--font-size-caption);font-weight:500;cursor:pointer;transition:none;white-space:nowrap}.reset-button:hover{background:var(--role-tab-hover);color:var(--role-tab-hover-text, var(--role-app-header-text))}.header-export-button{padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-md);background:var(--role-tab-active);border:var(--role-app-header-border-width, var(--border-width-base)) var(--role-app-header-border-style, var(--border-style-base)) var(--role-app-header-border-color);border-radius:var(--radius-md);color:var(--role-tab-active-text);font-size:var(--font-size-caption);font-weight:600;cursor:pointer;transition:none;white-space:nowrap}.header-export-button:hover{background:var(--role-tab-hover);color:var(--role-tab-hover-text, var(--role-tab-active-text))}.app-header-actions{display:flex;align-items:center;gap:var(--size-spacing-vertical-sm)}.focused-ui-link{padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-md);font-size:var(--font-size-caption);color:var(--role-app-header-text);text-decoration:none;border:var(--border-width-base) dashed var(--role-app-header-text);opacity:.7;border-radius:var(--radius-md);transition:none}.focused-ui-link:hover{background:var(--role-tab-hover);opacity:1;border-style:solid}.export-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0006}.export-dialog-panel{width:400px;max-width:90vw;padding:var(--ui-space-lg);border-radius:var(--ui-border-radius);box-shadow:var(--ui-shadow-lg);background:var(--role-panel);color:var(--role-panel-text)}.export-dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--ui-space-md)}.export-dialog-title{margin:0;font-size:var(--ui-font-size-heading)}.export-dialog-close{background:none;border:none;font-size:var(--ui-font-size-heading);cursor:pointer;padding:var(--ui-space-xs);color:inherit;line-height:1}.export-dialog-close:hover{opacity:var(--ui-muted-opacity, .7)}.export-dialog-body{display:flex;flex-direction:column;gap:var(--ui-space-md)}.export-dialog-label{display:block;margin-bottom:var(--ui-space-xs);font-weight:500}.export-dialog-select,.export-dialog-input{width:100%;padding:var(--ui-space-sm);border-radius:var(--ui-border-radius);border:var(--ui-border-width) solid var(--role-input-border-color);background:var(--role-input);color:var(--role-input-text, inherit);box-sizing:border-box;font-size:inherit;font-family:inherit}.export-dialog-select:focus,.export-dialog-input:focus{outline:var(--ui-border-width-thick) solid var(--role-accent);outline-offset:var(--ui-border-width)}.export-dialog-checkboxes{display:flex;flex-direction:column;gap:var(--ui-space-sm)}.export-dialog-checkbox-label{display:flex;align-items:center;gap:var(--ui-space-sm);cursor:pointer}.export-dialog-status{padding:var(--ui-space-sm);border-radius:var(--ui-border-radius)}.export-dialog-status[data-status=error]{background:var(--role-error);color:var(--role-error-text)}.export-dialog-status[data-status=success]{background:var(--role-success);color:var(--role-success-text)}.export-dialog-actions{display:flex;gap:var(--ui-space-sm);margin-top:var(--ui-space-sm)}.export-dialog-btn-primary{flex:1;padding:var(--ui-space-sm) var(--ui-space-md);border-radius:var(--ui-border-radius);border:none;cursor:pointer;font-weight:600;background:var(--role-accent);color:var(--role-accent-text)}.export-dialog-btn-primary:hover:not(:disabled){opacity:.85}.export-dialog-btn-primary:disabled{cursor:wait;opacity:var(--ui-muted-opacity, .7)}.export-dialog-btn-secondary{padding:var(--ui-space-sm) var(--ui-space-md);border-radius:var(--ui-border-radius);border:none;cursor:pointer;background:var(--role-button);color:var(--role-button-text)}.export-dialog-btn-secondary:hover:not(:disabled){opacity:.85}.export-dialog-btn-secondary:disabled{cursor:wait;opacity:var(--ui-muted-opacity, .7)}