.es-demo{border:1px solid var(--color-border-default);border-radius:var(--radius-xl);background:var(--color-bg-surface);min-width:0;color:var(--color-text-primary);font-family:var(--font-family-sans);text-align:start;box-shadow:var(--shadow-lift);overflow:hidden}.es-demo :where(button,input,select){font:inherit}.es-demo-card:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:3px}.es-demo__toolbar{align-items:center;gap:var(--space-3);min-height:64px;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border-default);background:var(--color-bg-elevated);display:flex}.es-demo-tabs{gap:var(--space-1);display:flex}.es-demo-tabs button{justify-content:center;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;font-size:var(--font-size-sm);background:0 0;border:0;display:inline-flex}.es-demo-tabs button[aria-pressed=true]{background:var(--color-bg-surface);color:var(--color-text-primary);font-weight:var(--font-weight-medium);box-shadow:var(--shadow-xs)}.es-demo__count{color:var(--color-text-muted);font-size:var(--font-size-xs);white-space:nowrap}.es-demo__reset,.es-demo__saved{justify-content:center;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-xs);white-space:nowrap;margin-inline-start:auto;display:inline-flex}.es-demo__reset{border-radius:var(--radius-md);cursor:pointer;background:0 0;border:0}.es-demo__canvas,.es-demo__comparison{isolation:isolate;touch-action:pan-y;background-color:var(--color-bg-canvas);background-image:radial-gradient(circle, color-mix(in srgb, var(--color-text-muted) 28%, transparent) 1px, transparent 1px);background-size:24px 24px;height:570px;margin:0;padding:0;list-style:none;position:relative;overflow:hidden}.es-demo-card{border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);width:min(320px,100% - 32px);height:520px;color:var(--color-text-primary);box-shadow:var(--shadow-lift);touch-action:pan-y;transition:border-color .18s var(--easing-standard), box-shadow .18s var(--easing-standard);flex-direction:column;display:flex;position:absolute;overflow:hidden}.es-demo-card.is-selected{border-color:var(--color-brand-default);box-shadow:0 0 0 2px var(--color-brand-border), var(--shadow-lift)}.es-demo-card.is-fresh{border-color:var(--color-brand-default)}.es-demo-card.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.es-demo-card__handle{align-items:center;gap:var(--space-2);width:100%;min-height:44px;padding:var(--space-2) var(--space-4);border:0;border-bottom:1px solid var(--color-border-default);color:var(--color-text-muted);background:var(--color-bg-elevated);text-align:start;touch-action:pan-y;cursor:grab;flex:none;display:flex;font-size:var(--font-size-xs)!important}.es-demo-card__handle span{margin-inline-start:auto;font-size:10px}.es-demo-card__body{min-height:0;padding:var(--space-4) var(--space-5);flex-direction:column;flex:1;display:flex}.es-demo-card__title{align-items:center;gap:var(--space-3);display:flex}.es-demo-card__title h3{font-family:var(--font-family-display);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:var(--font-leading-tight);letter-spacing:var(--font-tracking-tight);overflow-wrap:anywhere;flex:1;margin:0}.es-demo-card__title>svg{color:var(--color-text-muted);flex:none}.es-demo-card__summary{justify-content:space-between;align-items:center;gap:var(--space-2);margin-block:var(--space-3);display:flex}.es-demo-card__summary small{font-size:var(--font-size-xs);color:var(--color-text-muted)}.es-demo-card__readiness{align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);display:inline-flex}.es-demo-card__readiness--ready{color:var(--color-status-success-text)}.es-demo-card__readiness--review{color:var(--color-status-warning-text)}.es-demo-card__readiness--blocked{color:var(--color-status-danger-text)}.es-demo-card__fields{touch-action:pan-y;flex:1;min-height:0;overflow-y:auto}.es-demo-card__field{padding-block:var(--space-3);border-top:1px solid var(--color-border-default)}.es-demo-card__label{align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);display:flex}.es-demo-card__label>span{overflow-wrap:anywhere;flex:1;min-width:0}.es-demo-card__label>svg{color:var(--color-brand-text);flex:none}.es-demo-card__label>small{font-size:10px;font-weight:var(--font-weight-regular);color:var(--color-text-muted)}.es-demo-card__boolean{gap:var(--space-1);display:flex}.es-demo-card__boolean button{justify-content:center;align-items:center;gap:var(--space-1);min-height:40px;padding:var(--space-1);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text-secondary);font-size:var(--font-size-xs);cursor:pointer;flex:1;display:inline-flex}.es-demo-card__boolean button[aria-pressed=true]{border-color:var(--color-brand-border);background:var(--color-brand-subtle);color:var(--color-brand-text)}.es-demo-card__domain>span{margin-bottom:var(--space-1);color:var(--color-text-muted);font-size:var(--font-size-xs);display:block}.es-demo-card__domain select{width:100%;min-width:0;min-height:36px;font-size:var(--font-size-sm);appearance:auto}.es-demo-card__footer{min-height:30px;margin-top:var(--space-2);justify-content:space-between;align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:10px;display:flex}.es-demo-card__footer>span:first-child{align-items:center;gap:var(--space-1);display:inline-flex}.es-demo-card__footer svg{width:12px;height:12px}.es-demo__names{gap:var(--space-1);padding:var(--space-2) var(--space-3);border-top:1px solid var(--color-border-default);flex-wrap:wrap;display:flex}.es-demo__names button{min-height:36px;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--font-size-xs);cursor:pointer;overflow-wrap:anywhere;background:0 0;border:0}.es-demo__names button[aria-pressed=true]{color:var(--color-brand-text);background:var(--color-brand-subtle)}.es-demo__form{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4) var(--space-2);border-top:1px solid var(--color-border-default);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.es-demo__form>label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.es-demo__form .es-input{width:100%;min-width:0;min-height:44px}.es-demo__add{gap:var(--space-2);min-width:44px;min-height:44px;padding:var(--space-2);border-radius:var(--radius-md);background:var(--color-brand-subtle);color:var(--color-brand-text);cursor:pointer;border:0;justify-content:center;align-items:center;display:flex}.es-demo__add>span{color:var(--color-text-muted);white-space:nowrap;font-size:10px}.es-demo__add kbd{font-family:var(--font-family-mono)}.es-demo .es-demo__caption{padding:var(--space-2) var(--space-4) var(--space-4);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-xs);margin:0}.es-demo__canvas--list,.es-demo__comparison.is-list{gap:var(--space-3);height:auto;padding:var(--space-4);background-image:none;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.es-demo__canvas--list .es-demo-card,.es-demo__comparison.is-list .es-demo-card{width:100%;height:520px;position:relative;top:auto!important;left:auto!important}.es-demo__canvas--list .es-demo-card__handle,.es-demo__comparison.is-list .es-demo-card__handle{cursor:pointer}.es-demo__canvas--list .es-demo-card__handle>span{display:none}.es-demo--settings{max-width:560px;margin-inline:auto}.es-demo-settings__heading{align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:1px solid var(--color-border-default);font-weight:var(--font-weight-semibold);display:flex}.es-demo-settings__heading>svg{color:var(--color-brand-text)}.es-demo-settings__rows{padding-inline:var(--space-5)}.es-demo-settings__row{align-items:center;gap:var(--space-3);min-height:80px;padding-block:var(--space-3);border-bottom:1px solid var(--color-border-default);cursor:default;display:flex}.es-demo-settings__row:last-child{border-bottom:0}.es-demo-settings__row>svg{width:20px;height:20px;color:var(--color-text-muted);flex:none}.es-demo-settings__row.is-enabled>svg{color:var(--color-brand-text)}.es-demo-settings__switch{border-radius:var(--radius-full);background:var(--color-control-track);cursor:default;flex:none;width:36px;height:20px;display:block;position:relative}.es-demo-settings__switch:after{content:"";border-radius:var(--radius-full);background:var(--color-control-thumb);width:16px;height:16px;position:absolute;top:2px;left:2px}.es-demo-settings__switch.is-on{background:var(--color-brand-default)}.es-demo-settings__switch.is-on:after{background:var(--color-text-on-brand);translate:16px}.es-demo-settings__label{min-width:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.es-demo-settings__label small{color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);margin-top:var(--space-1);display:block}.es-demo-settings__add{align-items:center;gap:var(--space-2);min-height:48px;margin:var(--space-3) var(--space-5);padding:var(--space-2);color:var(--color-brand-text);cursor:pointer;font-size:var(--font-size-sm);background:0 0;border:0;display:flex}.es-demo-settings__add:disabled{color:var(--color-text-muted);cursor:default}.es-demo-settings__preview{padding:var(--space-5);background:var(--color-bg-canvas);border-top:1px solid var(--color-border-default)}.es-demo-settings__preview-title{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.es-demo-settings__preview-title>span{font:var(--font-weight-semibold) var(--font-size-xl) var(--font-family-display);overflow-wrap:anywhere}.es-demo-settings__preview-title small{color:var(--color-text-muted);font-size:var(--font-size-xs);white-space:nowrap}.es-demo-settings__results{align-items:center;gap:var(--space-2);min-height:56px;padding-top:var(--space-3);flex-wrap:wrap;display:flex}.es-demo-settings__result{align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text-secondary);font-size:var(--font-size-xs);animation:es-demo-result-in .24s var(--easing-emphasized) both;display:inline-flex}.es-demo-settings__result--available svg{color:var(--color-status-success-text)}.es-demo-settings__result--taken svg{color:var(--color-status-danger-text)}.es-demo-settings__empty{color:var(--color-text-muted);font-size:var(--font-size-sm)}@keyframes es-demo-result-in{0%{opacity:0;transform:translateY(5px)scale(.96)}}@media (hover:hover) and (pointer:fine){.es-demo-tabs button:hover,.es-demo__reset:hover,.es-demo__names button:hover,.es-demo-card__boolean button:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}}@media (max-width:640px){.es-demo__canvas,.es-demo__comparison{height:560px}.es-demo__canvas:not(.es-demo__canvas--list) .es-demo-card:not(.is-selected),.es-demo__comparison:not(.is-list) .es-demo-card:not(.is-selected){left:10%!important}.es-demo__canvas--list,.es-demo__comparison.is-list{grid-template-columns:minmax(0,1fr);height:auto}.es-demo__reset>span,.es-demo__saved,.es-demo__add>span{display:none}.es-demo__count{margin-inline-start:auto}.es-demo__reset{margin-inline-start:0}.es-demo__toolbar{gap:var(--space-1)}.es-demo__form{gap:var(--space-2);padding-inline:var(--space-3);grid-template-columns:minmax(0,1fr) auto}.es-demo__form>label{grid-column:1/-1}.es-demo-card__body,.es-demo-settings__rows{padding-inline:var(--space-4)}.es-demo-settings__heading,.es-demo-settings__preview{padding:var(--space-4)}}@media (pointer:coarse){.es-demo-card__boolean button,.es-demo__names button{min-height:44px}}.es-demo[data-motion=off] *,.es-demo[data-motion=off] :before,.es-demo[data-motion=off] :after{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){.es-demo *,.es-demo :before,.es-demo :after{transition:none!important;animation:none!important}}
