.hub-demo{display:flex;flex-direction:column;gap:var(--primitive-spacing-24);max-width:var(--layout-content-max-width)}.hub-demo__token-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-12);padding:var(--primitive-spacing-12) var(--primitive-spacing-16);background:var(--color-fill-surface-sunken);border:var(--primitive-border-width-1) solid var(--color-border-element-neutral-softer);border-radius:var(--primitive-radius-8)}.hub-demo__token-bar code{font-family:var(--font-mono);color:var(--color-content-secondary)}.hub-demo__token-actions{display:flex;gap:var(--primitive-spacing-8)}.hub-demo__tabs{display:flex;gap:var(--primitive-spacing-4);border-bottom:var(--primitive-border-width-1) solid var(--color-border-element-neutral-softer)}.hub-demo__tab{appearance:none;background:transparent;border:0;border-bottom:var(--primitive-border-width-2) solid transparent;padding:var(--primitive-spacing-10) var(--primitive-spacing-16);color:var(--color-content-secondary);font:inherit;cursor:pointer}.hub-demo__tab[data-active=true]{color:var(--color-content-primary);border-bottom-color:var(--color-content-brand)}.hub-demo__panel{display:flex;flex-direction:column;gap:var(--primitive-spacing-20)}.hub-demo__form{display:flex;flex-direction:column;gap:var(--primitive-spacing-8)}.hub-demo__label{color:var(--color-content-primary)}.hub-demo__textarea,.hub-demo__input,.hub-demo__select{width:100%;padding:var(--primitive-spacing-10) var(--primitive-spacing-12);background:var(--color-fill-surface-raised);color:var(--color-content-primary);border:var(--primitive-border-width-1) solid var(--color-border-element-neutral-softer);border-radius:var(--primitive-radius-8);font-family:inherit;resize:vertical}.hub-demo__textarea:focus,.hub-demo__input:focus,.hub-demo__select:focus{outline:var(--primitive-border-width-2) solid var(--color-border-brand);outline-offset:var(--primitive-spacing-2)}.hub-demo__row{display:flex;align-items:center;gap:var(--primitive-spacing-12)}.hub-demo__row .hub-demo__select{width:auto;min-width:var(--primitive-spacing-160)}.hub-demo__actions{display:flex;align-items:center;gap:var(--primitive-spacing-16);margin-top:var(--primitive-spacing-8)}.hub-demo__actions--right{justify-content:flex-end}.hub-demo__btn{appearance:none;border:var(--primitive-border-width-1) solid transparent;padding:var(--primitive-spacing-8) var(--primitive-spacing-16);border-radius:var(--primitive-radius-8);cursor:pointer;font:inherit}.hub-demo__btn--primary{background:var(--color-fill-element-brand-bold);color:var(--color-content-button-brand-primary);border-color:var(--color-fill-element-brand-bold)}.hub-demo__btn--primary:disabled{opacity:.5;cursor:not-allowed}.hub-demo__btn--ghost{appearance:none;background:transparent;border:var(--primitive-border-width-1) solid var(--color-border-element-neutral-softer);padding:var(--primitive-spacing-4) var(--primitive-spacing-10);border-radius:var(--primitive-radius-6);color:var(--color-content-secondary);cursor:pointer;font:inherit}.hub-demo__btn--ghost:hover{color:var(--color-content-primary)}.hub-demo__meta{color:var(--color-content-tertiary)}.hub-demo__result{display:flex;flex-direction:column;gap:var(--primitive-spacing-16)}.hub-demo__section{display:flex;flex-direction:column;gap:var(--primitive-spacing-8);padding:var(--primitive-spacing-16);background:var(--color-fill-surface-raised);border:var(--primitive-border-width-1) solid var(--color-border-element-neutral-softer);border-radius:var(--primitive-radius-10)}.hub-demo__section[data-muted=true]{background:var(--color-fill-surface-sunken)}.hub-demo__section-head{display:flex;align-items:center;justify-content:space-between}.hub-demo__list{list-style:disc;padding-left:var(--primitive-spacing-20);display:flex;flex-direction:column;gap:var(--primitive-spacing-6)}.hub-demo__kv{display:flex;gap:var(--primitive-spacing-8);align-items:center;color:var(--color-content-primary)}.hub-demo__muted{color:var(--color-content-secondary)}.hub-demo__source{font-family:var(--font-mono);color:var(--color-content-tertiary);word-break:break-all}.hub-demo__badge{padding:var(--primitive-spacing-2) var(--primitive-spacing-8);border-radius:var(--primitive-radius-full);font-size:11px;letter-spacing:.02em}.hub-demo__badge[data-kind=pass]{background:var(--color-fill-element-soft);color:var(--color-content-positive)}.hub-demo__badge[data-kind=fail]{background:var(--color-fill-element-soft);color:var(--color-content-negative)}.hub-demo__error{padding:var(--primitive-spacing-16);border:var(--primitive-border-width-1) solid var(--color-border-negative-softer);background:var(--color-fill-surface-raised);border-radius:var(--primitive-radius-10);color:var(--color-content-negative)}.hub-demo__code{position:relative;border:var(--primitive-border-width-1) solid var(--color-border-element-neutral-softer);border-radius:var(--primitive-radius-8);background:var(--color-fill-surface-sunken)}.hub-demo__code pre{margin:0;padding:var(--primitive-spacing-16);overflow:auto;font-family:var(--font-mono);background:transparent;color:var(--color-content-primary);max-height:30rem}.hub-demo__copy{position:absolute;top:var(--primitive-spacing-8);right:var(--primitive-spacing-8);appearance:none;border:var(--primitive-border-width-1) solid var(--color-border-element-neutral-softer);background:var(--color-fill-surface-raised);color:var(--color-content-secondary);padding:var(--primitive-spacing-4) var(--primitive-spacing-10);border-radius:var(--primitive-radius-6);cursor:pointer;font:inherit}.hub-demo__code-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.hub-demo__preview{border:var(--primitive-border-width-1) solid var(--color-border-element-neutral-softer);border-radius:var(--primitive-radius-8);background:var(--color-fill-surface-page);overflow:hidden}.hub-demo__preview-frame{width:100%;min-height:220px;border:0;display:block}.hub-demo__native-preview{padding:var(--primitive-spacing-24);display:flex;gap:var(--primitive-spacing-12);align-items:center;flex-wrap:wrap;background:var(--color-fill-surface-sunken);border-radius:var(--primitive-radius-8)}.hub-demo__dialog-backdrop{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.hub-demo__dialog{background:var(--color-fill-surface-page);padding:var(--primitive-spacing-24);border-radius:var(--primitive-radius-12);display:flex;flex-direction:column;gap:var(--primitive-spacing-12);max-width:440px;width:90vw}.hub-demo__dialog-actions{display:flex;justify-content:flex-end;gap:var(--primitive-spacing-8);margin-top:var(--primitive-spacing-8)}