@import"https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@600&display=swap";:root{--ui-bg: var(--role-app-background);--ui-bg-subtle: var(--role-panel-content);--ui-panel-bg: var(--role-panel-content);--ui-border: var(--role-panel-content-border-color);--ui-border-subtle: var(--role-panel-content-border-color);--ui-border-style: var(--role-panel-content-border-style, var(--ui-border-style));--ui-text: var(--role-content-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-letter-spacing-wide: calc(var(--size-spacing-xs) * .01);--ui-font-size-base: var(--font-size-body);--ui-font-size-small: var(--font-size-caption);--ui-font-size-large: var(--font-size-h4);--ui-font-size-heading: var(--font-size-h2);--ui-font-size-instruction: var(--font-size-instructional);--ui-font-size-mini: calc(var(--font-size-body) * .6875);--ui-font-size-component-label: calc(var(--font-size-body) * .625);--ui-border-width-strong: calc(var(--ui-border-width) * 2);--ui-swatch-size: var(--ui-icon-size)}.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)}.preview-button{position:relative;overflow:hidden;isolation:isolate;transition:transform .15s ease-out,box-shadow .15s ease-out}.preview-button: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}.preview-button--light-text:after{background:var(--role-state-layer-lighten)}.preview-button:hover:after{opacity:var(--state-hover-opacity)}.preview-button:active:after{opacity:var(--state-active-opacity)}.preview-button:focus-visible:after{opacity:var(--state-focus-opacity)}.preview-button:hover{transform:translateY(-1px);box-shadow:var(--ui-shadow-md)}.preview-button:active{transform:translateY(0);box-shadow:var(--ui-shadow-sm)}.preview-section button{transition:all var(--ui-transition-fast) ease}.preview-section button:hover{opacity:var(--ui-opacity-hover);transform:translateY(var(--ui-lift-small))}.preview-section button:active{transform:translateY(0)}.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}.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))}.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}:root{--resize-handle-hit: var(--size-spacing-horizontal-md);--scrollbar-gutter: var(--size-spacing-horizontal-md)}.app-shell{display:grid;grid-template-rows:auto auto 1fr auto;height:100vh;overflow:hidden}.app-shell-footer{padding:var(--size-spacing-vertical-md) var(--size-spacing-horizontal-md);text-align:center;border-top-width:var(--role-app-footer-border-width);border-top-style:var(--role-app-footer-border-style);border-top-color:var(--role-app-footer-border-color);background-color:var(--role-app-footer);color:var(--role-app-footer-text);font-size:var(--font-size-caption);font-family:var(--font-body);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--size-spacing-vertical-sm)}.app-shell-footer>*{color:inherit}.app-shell-main{display:grid;grid-template-columns:var(--panel-left-width, 350px) 1fr var(--panel-right-width, 320px);gap:var(--size-spacing-vertical-xs);overflow:hidden;background-color:var(--role-app-background);color:var(--role-app-background-text)}.app-shell-main.no-right-panel{grid-template-columns:var(--panel-left-width, 350px) 1fr}.app-shell-panel{overflow-y:auto;overflow-x:hidden;padding:var(--size-spacing-vertical-xs) var(--size-spacing-horizontal-xs);background-color:var(--role-app-background);color:var(--role-app-background-text);position:relative}.app-shell-panel-left{padding:0;padding-right:calc(var(--scrollbar-gutter) + var(--resize-handle-hit));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)}.app-shell-panel-middle{background-color:var(--role-app-background);color:var(--role-app-background-text);padding:var(--size-spacing-vertical-lg) var(--size-spacing-horizontal-lg)}.app-shell-panel-right{padding:0;padding-left:calc(var(--scrollbar-gutter) + var(--resize-handle-hit));background-color:var(--role-panel-content-alt);color:var(--role-panel-content-alt-text);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)}