/* ============================================================
   Product Foundation V1 — scoped CSS (Batch 2+)
   ONLY applies under [data-es-foundation] / .es-foundation-root
   Does NOT restyle legacy #app chrome outside V1 roots.
   ============================================================ */

[data-es-foundation],
.es-foundation-root {
  --es-background-base: #090d15;
  --es-background-surface: #0c111c;
  --es-background-elevated: #121a29;
  --es-background-subtle: #0b101b;
  --es-text-primary: #e7eef6;
  --es-text-secondary: #93a4ba;
  --es-text-muted: #5b6b81;
  --es-border-default: rgba(255, 255, 255, 0.06);
  --es-border-subtle: rgba(255, 255, 255, 0.04);
  --es-border-strong: rgba(255, 255, 255, 0.12);
  --es-brand-primary: #22d3ee;
  --es-brand-hover: #67e8f9;
  --es-brand-active: #2dd4bf;
  --es-brand-subtle: rgba(34, 211, 238, 0.14);
  --es-interaction-hover: rgba(255, 255, 255, 0.04);
  --es-interaction-selected: rgba(34, 211, 238, 0.14);
  --es-status-success: #34d399;
  --es-status-warning: #fbbf24;
  --es-status-error: #f87171;
  --es-status-info: #38bdf8;
  --es-focus-ring: #22d3ee;
  --es-space-1: 4px;
  --es-space-2: 8px;
  --es-space-3: 12px;
  --es-space-4: 16px;
  --es-space-5: 20px;
  --es-space-6: 24px;
  --es-space-8: 32px;
  --es-space-10: 40px;
  --es-space-12: 48px;
  --es-space-16: 64px;
  --es-radius-control: 6px;
  --es-radius-card: 8px;
  --es-radius-panel: 12px;
  --es-radius-pill: 16px;
  /* Size foundation — professional proportions (not tiny UI) */
  --es-page-gutter: clamp(1.25rem, 4vw, 2.75rem);
  --es-content-width: min(100% - (2 * var(--es-page-gutter)), 1120px);
  --es-content-width-reading: min(100%, 40rem);
  --es-workspace-gutter: clamp(0.75rem, 1.5vw, 1.25rem);
  --es-header-height: 52px;
  --es-header-height-landing: 60px;
  --es-control-height: 40px;
  --es-control-height-lg: 44px;
  --es-composer-min-height: 72px;
  --es-tap-target: 44px;
  --es-icon-sm: 16px;
  --es-icon-md: 20px;
  --es-type-display: clamp(2.25rem, 2.2vw + 1.4rem, 3.75rem);
  --es-type-headline: clamp(1.25rem, 0.6vw + 1rem, 1.625rem);
  --es-type-body-large: clamp(1.0625rem, 0.35vw + 0.95rem, 1.1875rem);
  --es-type-body: 1rem;
  --es-type-label: 0.875rem;
  --es-type-caption: 0.8125rem;
  --es-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --es-motion-fast: 140ms ease-out;
  --es-motion-surface: 200ms ease-out;
  color: var(--es-text-primary);
  font-family: var(--es-font-sans);
  font-size: 14px;
  box-sizing: border-box;
}

[data-es-foundation][data-es-appearance="light"],
.es-foundation-root[data-es-appearance="light"] {
  --es-background-base: #fbfbfa;
  --es-background-surface: #ffffff;
  --es-background-elevated: #fefefe;
  --es-background-subtle: #f5f5f4;
  --es-text-primary: #1f2126;
  --es-text-secondary: #666b73;
  --es-text-muted: #8c9199;
  --es-border-default: #e6e8ea;
  --es-border-subtle: #eef0f2;
  --es-border-strong: #d1d5d9;
  --es-brand-primary: #2e6b7a;
  --es-brand-hover: #265a66;
  --es-brand-active: #1f4b55;
  --es-brand-subtle: #edf5f6;
  --es-interaction-hover: rgba(31, 33, 38, 0.04);
  --es-interaction-selected: rgba(46, 107, 122, 0.12);
  --es-status-success: #338066;
  --es-status-warning: #b28026;
  --es-status-error: #b34038;
  --es-status-info: #4073b3;
  --es-focus-ring: #2e6b7a;
}

[data-es-foundation] *,
.es-foundation-root * {
  box-sizing: border-box;
}

/* ---- Primitives (Batch 3) ---- */
.es-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--es-space-2);
  min-height: 32px;
  padding: 0 var(--es-space-3);
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-default);
  background: var(--es-background-elevated);
  color: var(--es-text-primary);
  font: 500 13px/1.2 var(--es-font-sans);
  cursor: pointer;
  transition: background var(--es-motion-fast), border-color var(--es-motion-fast), opacity var(--es-motion-fast);
}
.es-btn:hover:not(:disabled) { background: var(--es-brand-subtle); }
.es-btn:focus-visible {
  outline: 2px solid var(--es-focus-ring);
  outline-offset: 2px;
}
.es-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.es-btn--primary {
  background: var(--es-brand-primary);
  border-color: transparent;
  color: #090d15;
}
[data-es-appearance="light"] .es-btn--primary { color: #fff; }
.es-btn--ghost { background: transparent; }
.es-btn--danger { border-color: var(--es-status-error); color: var(--es-status-error); }
.es-btn--sm { min-height: 28px; padding: 0 var(--es-space-2); font-size: 12px; }
.es-icon-btn {
  width: 32px; height: 32px; padding: 0;
  border-radius: var(--es-radius-control);
  border: 1px solid transparent;
  background: transparent;
  color: var(--es-text-secondary);
  cursor: pointer;
}
.es-icon-btn:hover { background: var(--es-brand-subtle); color: var(--es-text-primary); }
.es-icon-btn:focus-visible { outline: 2px solid var(--es-focus-ring); outline-offset: 2px; }

.es-input, .es-textarea, .es-select {
  width: 100%;
  min-height: 36px;
  padding: var(--es-space-2) var(--es-space-3);
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-default);
  background: var(--es-background-surface);
  color: var(--es-text-primary);
  font: 400 14px/1.4 var(--es-font-sans);
}
.es-textarea { min-height: 88px; resize: vertical; }
.es-input:focus-visible, .es-textarea:focus-visible, .es-select:focus-visible {
  outline: 2px solid var(--es-focus-ring);
  outline-offset: 1px;
  border-color: var(--es-brand-primary);
}
.es-input:disabled, .es-textarea:disabled { opacity: 0.5; }
.es-input[aria-invalid="true"], .es-textarea[aria-invalid="true"] {
  border-color: var(--es-status-error);
}

.es-check, .es-radio, .es-switch {
  display: inline-flex; align-items: center; gap: var(--es-space-2);
  color: var(--es-text-primary); font-size: 13px; cursor: pointer;
}
.es-switch input { width: 36px; height: 20px; }

/* ---- Surfaces (Batch 4) ---- */
.es-card, .es-panel {
  background: var(--es-background-surface);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  padding: var(--es-space-4);
}
.es-panel { border-radius: var(--es-radius-panel); }
.es-sheet, .es-modal-panel {
  background: var(--es-background-surface);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  padding: var(--es-space-4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}
.es-badge, .es-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--es-radius-pill);
  font-size: 11px; font-weight: 500;
  background: var(--es-brand-subtle); color: var(--es-brand-primary);
}
.es-status--success { color: var(--es-status-success); }
.es-status--warning { color: var(--es-status-warning); }
.es-status--error { color: var(--es-status-error); }
.es-status--info { color: var(--es-status-info); }
.es-empty, .es-error-state, .es-loading {
  padding: var(--es-space-6); color: var(--es-text-secondary); text-align: center;
}
.es-recovery {
  border: 1px solid var(--es-border-strong);
  border-radius: var(--es-radius-card);
  padding: var(--es-space-4);
  background: var(--es-background-elevated);
}

/* ---- Shell V1 (Batch 5–6) ---- */
.es-v1-shell {
  display: grid;
  grid-template-rows: 48px 1fr;
  grid-template-columns: auto 1fr;
  height: 100%;
  min-height: 0;
  width: 100%;
  background: var(--es-background-base);
  color: var(--es-text-primary);
  overflow: hidden;
  position: relative;
}
#app.es-v1-host,
#app.es-v1-host.shell-no-sidebar {
  display: flex;
  flex-direction: column;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}
#app.es-v1-host > .es-v1-shell {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
}
.es-v1-shell.es-v1-focus,
.es-v1-shell.es-v1-full-canvas {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-auto-rows: 0;
  grid-auto-columns: 0;
}
.es-v1-shell.es-v1-full-canvas > * {
  grid-column: 1;
  grid-row: 1;
}
/* ---- Public product surfaces (Plans, Download) ----
   Same brand and tokens as the project shell, different information
   architecture: no intent rail, no project identity, no workspace controls. */
.es-v1-shell.es-v1-shell--public {
  grid-template-columns: 1fr;
  grid-template-rows: var(--es-header-height-landing) 1fr;
}
.es-v1-shell--public .es-v1-header--public {
  gap: var(--es-space-4);
  padding: 0 var(--es-page-gutter);
  min-height: var(--es-header-height-landing);
  height: var(--es-header-height-landing);
  align-items: center;
  background: var(--es-background-base);
  white-space: nowrap;
}
.es-v1-brand--link {
  background: none;
  border: 0;
  padding: 4px 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--es-text-primary);
  cursor: pointer;
  min-height: 24px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.es-v1-public-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--es-space-1);
}
.es-v1-public-link,
.es-v1-shell--public .es-v1-brand--back,
.es-v1-shell--landing .es-v1-public-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  padding: 0 10px;
  border-radius: var(--es-radius-control);
  font-family: var(--es-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--es-text-secondary);
  cursor: pointer;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  white-space: nowrap;
  transform: none;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.es-v1-public-link:hover,
.es-v1-public-link:focus-visible {
  color: var(--es-text-primary);
  background: var(--es-interaction-hover);
  outline: none;
}
.es-v1-public-link:active {
  color: var(--es-text-primary);
  background: var(--es-interaction-hover);
  transform: none;
}
.es-v1-public-link.is-current {
  color: var(--es-text-primary);
  font-weight: 500;
  background: transparent;
}
.es-v1-public-link.is-current:hover,
.es-v1-public-link.is-current:focus-visible {
  background: var(--es-interaction-hover);
}

/* Landing / Auth Home / Draft — product contexts without project chrome */
.es-v1-shell--landing,
.es-v1-shell--home,
.es-v1-shell--draft,
.es-v1-shell--bootstrap {
  grid-template-columns: 1fr;
  grid-template-rows: var(--es-header-height-landing) 1fr;
}
.es-v1-shell--landing .es-v1-header--landing,
.es-v1-shell--home .es-v1-header--home {
  min-height: var(--es-header-height-landing);
  height: var(--es-header-height-landing);
  padding: 0 var(--es-page-gutter);
  gap: var(--es-space-4);
  align-items: center;
  background: var(--es-background-base);
}
.es-v1-brand--back {
  background: transparent;
  border: 1px solid transparent;
  padding: 0 10px;
  font-family: var(--es-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--es-text-secondary);
  cursor: pointer;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  -webkit-font-smoothing: antialiased;
  transform: none;
  transition: color 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
}
.es-v1-brand--back:hover,
.es-v1-brand--back:focus-visible {
  color: var(--es-text-primary);
  background: var(--es-interaction-hover);
  opacity: 1;
  outline: none;
}
.es-v1-brand--back:active {
  transform: none;
}
.es-v1-shell--home .es-v1-brand--link {
  font-size: var(--es-type-label);
  font-weight: 700;
  letter-spacing: -0.01em;
  min-height: var(--es-control-height);
  padding: 0 var(--es-space-1);
}
.es-v1-brand-express {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.es-v1-brand-studio {
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-left: 0.38em;
  opacity: 0.78;
}
.es-v1-shell--landing .es-v1-public-link {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
}
.es-v1-shell--landing .es-v1-main--landing,
.es-v1-shell--home .es-v1-main--home,
.es-v1-shell--draft .es-v1-main--draft,
.es-v1-shell--bootstrap .es-v1-main--bootstrap {
  grid-column: 1;
  grid-row: 2;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
/* Create front door (signed-out landing + signed-in home): composer is the hero. */
.es-v1-shell--landing,
.es-v1-shell--home.es-v1-shell--create-door {
  /* Noticeable on first visit, still ambient — user-requested visibility bump. */
  --landing-intelligence-emerald: rgba(52, 211, 153, 0.88);
  --landing-intelligence-cyan: rgba(34, 211, 238, 0.82);
  --landing-intelligence-teal: rgba(45, 212, 191, 0.7);
  --landing-signal-muted: rgba(148, 180, 170, 0.68);
  --landing-signal-math: rgba(140, 220, 235, 0.82);
  --landing-signal-process: rgba(120, 220, 175, 0.86);
  --landing-signal-signature: rgba(120, 180, 170, 0.52);
  --landing-glow-emerald: rgba(16, 185, 129, 0.16);
  --landing-glow-cyan: rgba(34, 211, 238, 0.14);
  overflow: hidden;
}
.es-v1-shell--landing .es-v1-header--landing,
.es-v1-shell--home.es-v1-shell--create-door .es-v1-header--home {
  position: relative;
  z-index: 20;
}
.es-v1-shell--landing .es-v1-main--landing,
.es-v1-shell--home.es-v1-shell--create-door .es-v1-main--home {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}
.es-v1-shell--landing .es-v1-workspace--landing,
.es-v1-shell--home.es-v1-shell--create-door .es-v1-workspace--landing {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  padding: 0;
  background: transparent;
}
.es-v1-shell--landing .es-v1-workspace--landing > .es-v1-living-bg,
.es-v1-shell--home.es-v1-shell--create-door .es-v1-workspace--landing > .es-v1-living-bg {
  flex: none;
  width: auto;
  height: auto;
}
.es-v1-shell--landing .es-v1-workspace--landing > .es-v1-landing-viewport,
.es-v1-shell--home.es-v1-shell--create-door .es-v1-workspace--landing > .es-v1-landing-viewport {
  flex: 0 1 auto;
  width: 100%;
}
.es-v1-landing-identity {
  position: absolute;
  top: clamp(0.7rem, 3.2vh, 2.1rem);
  left: 0;
  right: 0;
  z-index: 12;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-family: var(--es-font-sans);
  font-size: clamp(1.7rem, 1.2vw + 1.35rem, 2.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.012em;
  color: var(--es-text-primary);
  pointer-events: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: "kern" 1, "liga" 1;
  text-shadow: 0 0 28px rgba(9, 13, 21, 0.92);
}
.es-v1-landing-identity .es-v1-brand-express {
  font-weight: 700;
  letter-spacing: -0.03em;
}
.es-v1-landing-identity .es-v1-brand-studio {
  font-weight: 500;
  letter-spacing: 0.09em;
  margin-left: 0.42em;
  opacity: 0.8;
}
.es-v1-landing-viewport {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding:
    clamp(1.25rem, 5vh, 2.75rem)
    var(--es-page-gutter)
    clamp(1.75rem, 7vh, 3.75rem);
  /* Optical lift: sit slightly above mathematical center of the usable canvas */
  transform: translateY(-2.4vh);
  box-sizing: border-box;
}
.es-v1-landing-stage {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.es-v1-home-stage {
  width: var(--es-content-width);
  max-width: 1120px;
  margin: 0 auto;
  padding:
    clamp(2.75rem, 11vh, 6.5rem)
    var(--es-page-gutter)
    clamp(2.5rem, 8vh, 5rem);
}
.es-v1-landing-canvas {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.es-v1-landing-title {
  font-size: var(--es-type-display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 var(--es-space-5);
  letter-spacing: -0.03em;
  max-width: 28ch;
  color: var(--es-text-primary);
  text-align: left;
}
.es-v1-landing-title--hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(1.5rem, 3.2vh, 2.5rem);
  text-align: center;
  font-size: clamp(1.75rem, 7.2vw, 3.75rem);
  /* Two-line slot — all three states occupy the same geometry. */
  height: calc(1.12em * 2);
  min-height: calc(1.12em * 2);
  overflow: hidden;
}
.es-v1-landing-title-state {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.es-v1-landing-title-state.is-active {
  opacity: 1;
  transform: translateY(0);
}
.es-v1-landing-title-line {
  display: block;
  width: 100%;
  text-align: center;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  white-space: nowrap;
}
.es-v1-landing-lead {
  max-width: var(--es-content-width-reading);
  width: 100%;
  margin: 0 0 clamp(2rem, 4.5vh, 3rem);
  font-size: var(--es-type-body-large);
  line-height: 1.55;
  color: var(--es-text-secondary);
  text-align: left;
}
.es-v1-landing-create {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 100%;
  width: 100%;
}
.es-v1-landing-create-title {
  font-size: var(--es-type-headline);
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--es-text-primary);
  text-align: left;
}
.es-v1-landing-note {
  margin: var(--es-space-1) 0 0;
  font-size: var(--es-type-caption);
  line-height: 1.45;
  /* Tertiary but readable — secondary text at high opacity, not washed muted */
  color: var(--es-text-secondary);
  max-width: 36rem;
  width: 100%;
  opacity: 0.88;
  text-align: left;
}
.es-v1-home-composer-wrap--landing {
  margin-top: 0;
  width: 100%;
  align-self: stretch;
  text-align: left;
}
.es-v1-home-composer-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3.5rem;
}
.es-v1-composer-invite {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  text-align: center;
  transition: opacity 0.7s ease;
}
.es-v1-composer-invite.is-hidden,
.es-v1-home-composer--landing:not(.is-idle) .es-v1-composer-invite {
  opacity: 0;
  visibility: hidden;
}
.es-v1-home-composer--landing.is-idle .es-v1-composer-invite {
  opacity: 1;
  visibility: visible;
}
.es-v1-composer-invite-state {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: none;
  transition: opacity 1.6s ease-in-out;
}
.es-v1-composer-invite-state.is-active {
  opacity: 1;
  transform: none;
}
.es-v1-composer-invite-line {
  display: block;
  width: 100%;
  font-family: var(--es-font-sans);
  font-size: clamp(1.02rem, 0.35vw + 0.92rem, 1.25rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--es-text-primary);
  white-space: nowrap;
  text-align: center;
}
.es-v1-composer-invite-line:last-child {
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--es-text-secondary);
}
.es-v1-home-composer--landing.is-idle .es-v1-home-composer-input {
  min-height: 3.5rem;
  caret-color: transparent;
  color: transparent;
}
.es-v1-home-composer--landing {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--es-space-3);
  padding: var(--es-space-4);
  min-height: var(--es-composer-min-height);
  border-width: 1px;
  border-style: solid;
  border-color: var(--es-border-strong);
  border-radius: var(--es-radius-panel);
  background: var(--es-background-elevated);
  box-sizing: border-box;
  text-align: left;
  overflow: visible;
}
.es-v1-home-composer--landing:focus-within {
  border-color: var(--es-brand-primary);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.22);
}
.es-v1-home-composer-wrap--landing .es-v1-composer-project { display: none; }
.es-v1-home-composer-row {
  display: flex;
  align-items: center;
  gap: var(--es-space-3);
  width: 100%;
  min-width: 0;
}
.es-v1-home-composer-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--es-space-1) var(--es-space-2);
  padding-left: 0;
  min-height: var(--es-control-height);
  overflow: visible;
}
.es-v1-home-composer--landing .es-v1-home-composer-tools {
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.es-v1-home-composer--landing .es-v1-home-composer-tools::-webkit-scrollbar {
  display: none;
}
.es-v1-home-tool {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.es-v1-home-composer--landing .es-v1-landing-overflow-more[hidden] {
  display: none !important;
}
.es-v1-home-composer--landing .es-v1-home-composer-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3.5rem;
  max-height: 9rem;
  font-size: var(--es-type-body-large);
  line-height: 1.45;
  padding: 0.7rem 0.35rem;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--es-text-primary);
  text-align: left;
  /* Insertion caret — text color, not brand status chrome */
  caret-color: var(--es-text-primary);
  resize: none;
  box-sizing: border-box;
}
.es-v1-home-composer--landing .es-v1-home-composer-input:focus,
.es-v1-home-composer--landing .es-v1-home-composer-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.es-v1-home-composer--landing .es-v1-home-composer-input::placeholder {
  color: var(--es-text-secondary);
  opacity: 0.85;
  line-height: 1.45;
}
.es-v1-home-composer-send {
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  height: var(--es-tap-target);
  min-width: var(--es-tap-target);
  min-height: var(--es-tap-target);
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--es-brand-primary);
  color: var(--es-text-onBrand, #090d15);
  font-size: var(--es-type-label, 0.8125rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.es-v1-home-composer-send:hover { filter: brightness(1.06); }
.es-v1-home-composer-send:focus-visible {
  outline: 2px solid var(--es-focus-ring);
  outline-offset: 2px;
}
.es-v1-home-composer-send:disabled,
.es-v1-home-composer-send[aria-disabled="true"] {
  opacity: 0.28;
  cursor: not-allowed;
  filter: none;
  background: rgba(34, 211, 238, 0.16);
  color: var(--es-text-secondary);
}
.es-v1-home-composer-send.is-busy {
  opacity: 0.55;
  cursor: progress;
}
.es-v1-home-composer--landing .es-v1-home-composer-action,
.es-v1-home-composer--landing .es-v1-home-composer-more {
  min-height: var(--es-control-height);
  padding: 0 var(--es-space-2);
  font-size: var(--es-type-label);
  color: var(--es-text-secondary);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
}
.es-v1-home-composer--landing .es-v1-home-composer-dot {
  color: var(--es-text-muted);
  opacity: 0.55;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* ---- Living Intelligence background (signed-out landing only) ----
   Living language environment: words / symbols / states.
   No trajectory lines, glows-as-blobs, particles, or grids. */
.es-v1-living-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none !important;
  contain: layout paint style;
}
.es-v1-living-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.es-v1-living-layer--mid { z-index: 2; }
.es-v1-living-readability {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(1080px, 88%);
  height: min(420px, 58%);
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 62% at 50% 50%,
      rgba(9, 13, 21, 0.82) 0%,
      rgba(9, 13, 21, 0.42) 48%,
      rgba(9, 13, 21, 0.12) 74%,
      transparent 100%);
}
.es-v1-living-entity {
  position: absolute;
  left: 10%;
  top: 20%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none !important;
  user-select: none;
  white-space: nowrap;
  will-change: transform, opacity;
  transition: opacity 0.6s ease, color 0.8s ease;
  font-weight: 400;
  letter-spacing: 0.04em;
  cursor: default;
}
.es-v1-living-math {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--landing-signal-math);
}
.es-v1-living-process {
  font-size: 12.5px;
  color: var(--landing-signal-process);
}
.es-v1-living-science {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--landing-signal-math);
}
.es-v1-living-compute {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.07em;
  color: var(--landing-signal-muted);
}
.es-v1-living-design {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--landing-intelligence-teal, rgba(45, 212, 191, 0.7));
}
.es-v1-living-music {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--landing-signal-process);
}
.es-v1-living-language {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--landing-signal-muted);
}
.es-v1-living-related {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--landing-intelligence-teal, rgba(45, 212, 191, 0.7));
}
.es-v1-living-entity.is-far {
  font-size: 11px;
  letter-spacing: 0.1em;
}
.es-v1-living-signature {
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--landing-signal-signature);
}
.es-v1-living-signature--org {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--landing-signal-signature);
}
.es-v1-living-entity.is-near {
  color: var(--landing-intelligence-emerald, rgba(52, 211, 153, 0.88));
}
.es-v1-living-math.is-near {
  color: var(--landing-intelligence-cyan, rgba(34, 211, 238, 0.82));
}
/* Paths / glow blobs / trajectory lines are retired — hide if any legacy markup remains */
.es-v1-living-path,
.es-v1-living-path--cyan,
.es-v1-living-path--emerald,
.es-v1-living-path--teal,
.es-v1-living-path--bright,
.es-v1-living-glow {
  display: none !important;
}
.es-v1-living-bg.is-reduced-motion .es-v1-living-entity {
  transition: none !important;
}
@media (max-width: 820px) {
  .es-v1-landing-viewport {
    transform: translateY(-1vh);
  }
  .es-v1-living-math { font-size: 11px; }
  .es-v1-living-process { font-size: 11px; }
  .es-v1-living-related,
  .es-v1-living-signature { font-size: 10px; }
}
@media (max-width: 640px) {
  .es-v1-landing-identity {
    font-size: 1.5rem;
    top: 0.85rem;
  }
  .es-v1-landing-viewport {
    transform: none;
    padding-top: clamp(1.25rem, 5vh, 2.25rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .es-v1-composer-invite-line {
    font-size: 1.02rem;
  }
  .es-v1-living-readability {
    width: 100%;
    height: 70%;
    background: radial-gradient(ellipse 90% 70% at 50% 40%,
      rgba(9, 13, 21, 0.88) 0%,
      rgba(9, 13, 21, 0.5) 55%,
      transparent 100%);
  }
}
.es-v1-auth-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--es-space-3);
  margin: var(--es-space-2) 0 var(--es-space-8);
}
.es-v1-auth-home-continue {
  text-align: left;
  width: 100%;
  max-width: 36rem;
  background: var(--es-background-elevated);
  border: 1px solid var(--es-border-strong);
  border-radius: var(--es-radius-panel);
  padding: var(--es-space-5);
  color: var(--es-text-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--es-space-2);
  margin-bottom: var(--es-space-6);
}
.es-v1-auth-home-continue:hover { background: var(--es-interaction-hover); }
.es-v1-auth-home-continue:focus-visible {
  outline: 2px solid var(--es-focus-ring);
  outline-offset: 2px;
}
.es-v1-auth-home-continue-label {
  font-size: var(--es-type-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--es-text-muted);
}
.es-v1-auth-home-continue strong {
  font-size: var(--es-type-headline);
  font-weight: 700;
  line-height: 1.25;
}
.es-v1-auth-home-continue span {
  font-size: var(--es-type-body);
  line-height: 1.45;
  color: var(--es-text-secondary);
}
.es-v1-auth-home-continue-cta {
  margin-top: var(--es-space-2);
  font-size: var(--es-type-label);
  font-weight: 600;
  color: var(--es-brand-primary);
}
.es-v1-auth-home-canvas .es-v1-landing-primary { margin: 0; }
.es-v1-landing-primary,
.es-v1-landing-secondary {
  border: 0;
  border-radius: var(--es-radius-control);
  padding: 0 var(--es-space-5);
  font-size: var(--es-type-label);
  cursor: pointer;
  min-height: var(--es-control-height-lg);
}
.es-v1-landing-primary {
  background: var(--es-brand-primary);
  color: var(--es-text-onBrand, #090d15);
  font-weight: 600;
}
.es-v1-landing-secondary {
  background: transparent;
  color: var(--es-text-secondary);
  border: 1px solid var(--es-border-strong);
}
.es-v1-landing-primary:focus-visible,
.es-v1-landing-secondary:focus-visible {
  outline: 2px solid var(--es-focus-ring);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .es-v1-home-stage {
    padding-top: clamp(2rem, 8vh, 3.5rem);
    max-width: 100%;
  }
  .es-v1-landing-title { max-width: none; }
}
@media (max-width: 640px) {
  .es-v1-shell--landing,
  .es-v1-shell--home {
    grid-template-rows: var(--es-header-height) 1fr;
  }
  .es-v1-shell--landing .es-v1-header--landing,
  .es-v1-shell--home .es-v1-header--home {
    min-height: var(--es-header-height);
    height: var(--es-header-height);
    padding: 0 var(--es-space-4);
  }
  .es-v1-home-stage {
    padding: clamp(1.75rem, 8vh, 2.75rem) var(--es-space-4) var(--es-space-8);
  }
  .es-v1-home-composer--landing {
    padding: var(--es-space-3);
  }
  .es-v1-home-composer-row {
    align-items: center;
  }
  .es-v1-auth-home-actions { flex-direction: column; align-items: stretch; }
  .es-v1-landing-primary,
  .es-v1-landing-secondary { width: 100%; }
}
.es-v1-auth-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--es-space-3);
  margin-top: var(--es-space-4);
}
.es-v1-auth-home-card {
  text-align: left;
  background: var(--es-background-elevated);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  padding: var(--es-space-4);
  color: var(--es-text-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--es-space-2);
  min-height: 88px;
}
.es-v1-auth-home-card:hover { background: var(--es-interaction-hover); }
.es-v1-auth-home-card:focus-visible {
  outline: 2px solid var(--es-focus-ring);
  outline-offset: 2px;
}
.es-v1-auth-home-card strong {
  font-size: var(--es-type-body);
  font-weight: 600;
}
.es-v1-auth-home-card span { font-size: var(--es-type-caption); color: var(--es-text-secondary); }
.es-v1-auth-home-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 8px;
  border-radius: var(--es-radius-pill);
  font-size: 11px;
  font-weight: 500;
  background: var(--es-brand-subtle);
  color: var(--es-brand-primary);
}
.es-v1-account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--es-border, rgba(255,255,255,0.16));
  background: var(--es-surface-elevated, rgba(255,255,255,0.06));
  color: var(--es-text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
}
.es-v1-account-menu {
  position: absolute;
  right: 12px;
  top: 48px;
  z-index: 80;
  min-width: 200px;
  padding: 6px;
  border-radius: var(--es-radius-control);
  background: var(--es-surface-elevated, #121820);
  border: 1px solid var(--es-border, rgba(255,255,255,0.12));
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.es-v1-account-menu-item {
  background: none;
  border: 0;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--es-text-primary);
  font-size: 13px;
  cursor: pointer;
}
.es-v1-account-menu-item:hover { background: var(--es-interaction-hover); }
.es-v1-bootstrap {
  padding: var(--es-space-8);
  color: var(--es-text-primary);
  font-size: 15px;
  letter-spacing: 0.01em;
}
.es-v1-exp-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.es-v1-exp-opt {
  border: 0;
  background: transparent;
  color: var(--es-text-secondary);
  cursor: pointer;
  padding: 5px 2px;
  min-height: 24px;
  font: 500 11px/1 var(--es-font-sans);
}
.es-v1-exp-opt.is-active {
  font-weight: 700;
  color: var(--es-text-primary);
}
.es-v1-header { position: relative; }
.es-v1-shell--public .es-v1-header--public .es-btn,
.es-v1-shell--public .es-v1-header--public .home-dash-auth-btn {
  white-space: nowrap;
  flex: 0 0 auto;
}
.es-v1-shell--public .es-v1-main--public {
  grid-column: 1;
  grid-row: 2;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
/* One scroll owner for public product pages. Legacy .workspace.standalone-host +
   .standalone-scroll{overscroll-behavior:contain} trapped the wheel and clipped
   Studio/Enterprise cards with no usable scroll. */
.es-v1-shell--public #workspace,
.es-v1-shell--public .workspace.standalone-host,
.es-v1-shell--public .es-v1-workspace--public {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: visible !important;
  flex: 0 0 auto;
}
.es-v1-shell--public .standalone-scroll,
.es-v1-shell--public .es-v1-route-content {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0;
  flex: none;
  overflow: visible !important;
  overscroll-behavior: auto;
  padding-bottom: clamp(20px, 4vh, 40px);
}

.es-v1-header {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 20;
  display: flex; align-items: center; gap: var(--es-space-3);
  padding: 0 var(--es-space-4);
  border-bottom: 1px solid var(--es-border-default);
  background: var(--es-background-surface);
  min-height: 48px;
}
.es-v1-identity { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.es-v1-id-sep { color: var(--es-text-muted); font-size: 12px; }
.es-v1-brand { font-size: 12px; color: var(--es-text-secondary); font-weight: 500; }
.es-v1-project { font-size: 14px; font-weight: 700; color: var(--es-text-primary); }
.es-v1-context { font-size: 12px; color: var(--es-text-secondary); }
.es-v1-header-spacer { flex: 1; }
.es-v1-command-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--es-radius-pill);
  background: var(--es-background-elevated); color: var(--es-text-secondary);
  font-size: 12px; border: 1px solid var(--es-border-default); cursor: pointer;
}
.es-v1-command-pill:focus-visible { outline: 2px solid var(--es-focus-ring); }
.es-v1-agent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 12px;
  background: rgba(52, 211, 153, 0.12); color: var(--es-status-success);
  font-size: 10px; font-weight: 500; border: none; cursor: pointer;
}
.es-v1-rail {
  grid-row: 2;
  width: 88px; padding: var(--es-space-3) var(--es-space-1);
  border-right: 1px solid var(--es-border-default);
  background: var(--es-background-surface);
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0;
  overflow: auto;
}
.es-v1-intent {
  display: flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 8px;
  border-radius: var(--es-radius-control);
  border: none; background: transparent;
  color: var(--es-text-secondary); font-size: 11px; text-align: left;
  cursor: pointer;
}
.es-v1-intent[aria-current="page"], .es-v1-intent.is-active {
  background: var(--es-interaction-selected); color: var(--es-text-primary); font-weight: 700;
}
.es-v1-intent:focus-visible { outline: 2px solid var(--es-focus-ring); outline-offset: 1px; }
.es-v1-intent-bar {
  width: 2px; height: 14px; border-radius: 1px; background: var(--es-brand-primary);
}
.es-v1-main {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  height: 100%;
  z-index: 1;
}
.es-v1-main > .es-v1-experience-host,
.es-v1-main > .es-system-banners,
.es-v1-main > #esV1PreviewModes,
.es-v1-main > #esV1Contextual,
.es-v1-main > .es-v1-composer-host {
  flex: 0 0 auto;
}
.es-v1-main > .es-v1-workspace {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
.es-v1-workspace {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: var(--es-background-surface);
  border: none;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.es-v1-shell[data-es-route="express"] .es-v1-workspace,
.es-v1-shell[data-es-route="preview"] .es-v1-workspace,
.es-v1-shell[data-es-route="conversation"] .es-v1-workspace,
.es-v1-shell.es-v1-full-canvas .es-v1-workspace {
  overflow: hidden;
}
.es-v1-workspace > * {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
.es-v1-workspace.es-v1-home > .es-v1-home-strip,
.es-v1-workspace.es-v1-home > .es-v1-home-composer-wrap,
.es-v1-workspace.es-v1-home > .es-v1-home-composer,
.es-v1-workspace.es-v1-home > .es-v1-composer-suggestions {
  flex: 0 0 auto;
}
.es-v1-workspace .fbw-root,
.es-v1-workspace .fbw-page,
.es-v1-workspace .fbw-shell,
.es-v1-workspace .express-page,
.es-v1-workspace .workspace,
.es-v1-workspace .fbw-develop-workbench {
  height: 100%;
  min-height: 0;
}
[data-es-appearance="light"] .es-v1-workspace .fbw-root,
[data-es-appearance="light"] .es-v1-workspace .fbw-body,
[data-es-appearance="light"] .es-v1-workspace .fbw-main,
[data-es-appearance="light"] .es-v1-workspace .home-dashboard-embedded,
[data-es-appearance="light"] .es-v1-home .home-dashboard-embedded {
  background: var(--es-background-surface);
  color: var(--es-text-primary);
}
.es-v1-composer-host {
  flex-shrink: 0;
  padding: 6px 8px 8px;
}
.es-v1-composer {
  display: flex; align-items: center; gap: var(--es-space-3);
  min-height: 40px; padding: 0 var(--es-space-3);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  background: var(--es-background-surface);
}
/* Duplicate V1 composer: Living Workspace already hosts Composer 2 */
.es-v1-shell:has(.fbw-studio-composer, .fbw-c2-input, .fbw-rail-composer) .es-v1-composer-host,
.es-v1-shell:has(.es-v1-home-composer) .es-v1-composer-host:not(.is-open) {
  display: none;
}
.es-v1-composer input, .es-v1-composer textarea {
  flex: 1; border: none; background: transparent; color: var(--es-text-primary);
  font: 400 13px/1.4 var(--es-font-sans); outline: none; resize: none;
}
.es-v1-command-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.es-v1-command-panel {
  width: min(560px, 92vw);
  background: var(--es-background-surface);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  padding: var(--es-space-4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.es-v1-command-panel input {
  width: 100%; min-height: 40px; margin-bottom: var(--es-space-3);
  border: 1px solid var(--es-border-default); border-radius: var(--es-radius-control);
  background: var(--es-background-base); color: var(--es-text-primary);
  padding: 0 var(--es-space-3); font-size: 14px;
}
.es-v1-command-list { list-style: none; margin: 0; padding: 0; }
.es-v1-command-list li button {
  width: 100%; text-align: left; padding: 10px 8px;
  border: none; background: transparent; color: var(--es-text-primary);
  border-radius: var(--es-radius-control); cursor: pointer; font-size: 13px;
}
.es-v1-command-list li button:hover, .es-v1-command-list li button:focus {
  background: var(--es-brand-subtle);
}
.es-v1-home-hero h1 {
  font-size: 22px; font-weight: 700; margin: 0 0 var(--es-space-2);
}
.es-v1-home-hero p { margin: 0 0 var(--es-space-5); color: var(--es-text-secondary); }

/* Authenticated Home = Figma workspace frame (not a nested website) */
.es-v1-shell[data-es-route="home"][data-es-signed-in="1"] .es-v1-main {
  padding: 0;
  gap: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.es-v1-shell[data-es-signed-in="1"] .es-v1-home.es-v1-workspace,
.es-v1-shell[data-es-signed-in="1"] .es-v1-workspace.es-v1-home {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 8px;
  background: var(--es-background-base);
  border: none;
  border-radius: 0;
  overflow: hidden;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.es-v1-home-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 24px;
  flex-shrink: 0;
}
.es-v1-home-strip-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--es-text-muted);
}
.es-v1-home-strip-mode {
  font-size: 11px;
  font-weight: 700;
  color: var(--es-text-primary);
}
.es-v1-home-canvas {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--es-background-surface);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  overflow: hidden;
}
.es-v1-home-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--es-text-primary);
}
.es-v1-home-title--quiet {
  font-size: 13px;
  font-weight: 600;
}
.es-v1-home-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--es-text-secondary);
}
.es-v1-home-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.es-v1-home-tile {
  width: 150px;
  min-height: 50px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--es-radius-control);
  background: var(--es-background-elevated);
  color: var(--es-text-primary);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.es-v1-home-tile:hover { background: var(--es-brand-subtle); }
.es-v1-home-tile:focus-visible {
  outline: 2px solid var(--es-focus-ring);
  outline-offset: 2px;
}
.es-v1-home-tile strong {
  font-size: 11px;
  font-weight: 500;
  color: var(--es-text-primary);
}
.es-v1-home-tile span {
  font-size: 10px;
  color: var(--es-text-muted);
}
.es-v1-home-canvas .es-v1-dev-panes {
  flex: 1;
  min-height: 0;
  height: 100%;
  border: none;
  border-radius: 0;
}
.es-v1-home-composer-wrap {
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.es-v1-home-pending:empty { display: none; }
.es-v1-home .es-v1-composer,
.es-v1-home-composer {
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  gap: 10px;
  background: var(--es-background-surface);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
}
.es-v1-home-composer-input {
  flex: 1;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  padding: 0;
  border: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--es-text-primary);
  font: 400 11px/1.3 var(--es-font-sans);
  outline: none;
}
.es-v1-home-composer-input::placeholder { color: var(--es-text-muted); }
.es-v1-home-composer-input:focus-visible {
  outline: 2px solid var(--es-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.es-v1-home-composer-grow { flex: 0 0 0; }
.es-v1-home-composer-action,
.es-v1-home-composer-more {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: 400 10px/1 var(--es-font-sans);
  color: var(--es-brand-primary);
  white-space: nowrap;
}
.es-v1-home-composer-more { color: var(--es-text-muted); }
.es-v1-home-composer-action:hover,
.es-v1-home-composer-more:hover { color: var(--es-brand-hover); }
.es-v1-home-composer-action:focus-visible,
.es-v1-home-composer-more:focus-visible {
  outline: 2px solid var(--es-focus-ring);
  outline-offset: 2px;
}
.es-v1-home-composer-dot {
  color: var(--es-brand-primary);
  font-size: 10px;
}
.es-v1-home-more-wrap { position: relative; display: inline-flex; align-items: center; }
.es-v1-home-more {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 8px);
  bottom: auto;
  z-index: 60;
  min-width: 220px;
  max-height: min(50vh, 360px);
  overflow: auto;
  padding: 6px;
  border-radius: var(--es-radius-card);
  border: 1px solid var(--es-border-default);
  background: var(--es-background-elevated);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.es-v1-home-more.is-portal {
  position: fixed;
  z-index: 240;
  max-height: min(55vh, 420px);
}
.es-v1-home-more-wrap:last-child .es-v1-home-more:not(.is-portal) {
  left: auto;
  right: 0;
}
.es-v1-home-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--es-text-primary);
  font-size: 12px;
  border-radius: var(--es-radius-control);
  cursor: pointer;
}
.es-v1-home-more-icon {
  width: 1.15em;
  flex: 0 0 auto;
  opacity: 0.72;
  font-size: 12px;
}
.es-v1-home-more-cat {
  padding: 8px 10px 4px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--es-text-secondary);
}
.es-v1-home-composer.is-drop {
  outline: 1px dashed var(--es-brand-primary);
}
@media (max-width: 640px) {
  .es-v1-home-more.is-portal {
    left: 12px !important;
    right: 12px !important;
    width: auto;
    min-width: 0;
    max-height: min(52vh, 360px);
  }
  .es-v1-landing .es-v1-home-composer-row {
    flex-wrap: wrap;
  }
}
.es-v1-home-more-item:hover { background: var(--es-brand-subtle); }

/* Rest test: suppress classic Home AND FBW duplicate chrome when hosted under Visual Shell V1 */
.es-v1-host .home-dash-sidebar,
.es-v1-shell .home-dash-sidebar,
.es-v1-host .home-dash-assistant,
.es-v1-shell .home-dash-assistant,
.es-v1-host .home-dash-pro,
.es-v1-shell .home-dash-pro,
.es-v1-host .home-dash-nav,
.es-v1-shell .home-dash-nav,
.es-v1-workspace .home-dash-sidebar,
.es-v1-workspace .home-dash-assistant,
.es-v1-home .home-dash-sidebar,
.es-v1-home .home-dash-assistant,
.es-v1-shell .fbw-sidebar,
.es-v1-workspace .fbw-sidebar,
.es-v1-home .fbw-sidebar,
.es-v1-host .zen-drawer,
.es-v1-shell .zen-drawer,
.es-v1-host .zen-menu-btn,
.es-v1-shell .build-workspace-tabs,
.es-v1-shell .zen-tabs,
.es-v1-shell .fbw-workflow-dock-shell,
.es-v1-workspace .fbw-workflow-dock-shell,
.es-v1-home .fbw-workflow-dock-shell,
.es-v1-shell .fbw-topbar--workflow,
.es-v1-workspace .fbw-topbar--workflow,
.es-v1-shell .fbw-topbar,
.es-v1-workspace .fbw-topbar,
.es-v1-shell .fbw-guest-topbar,
.es-v1-workspace .fbw-guest-topbar,
.es-v1-host .fbw-guest-topbar,
.es-v1-shell .fbw-live-toolbar-shell,
.es-v1-workspace .fbw-live-toolbar-shell,
.es-v1-shell .fbw-live-toolbar,
.es-v1-workspace .fbw-live-toolbar,
.es-v1-shell .fbw-root,
.es-v1-workspace > .fbw-root,
.es-v1-shell .express-page.fbw-page,
.es-v1-workspace > .fbw-page,
.es-v1-workspace > .express-page,
.es-v1-shell .page-nav,
.es-v1-host .page-nav,
.es-v1-shell .fbw-status-bar,
.es-v1-workspace .fbw-status-bar,
.es-v1-shell .fbw-float-layer,
.es-v1-workspace .fbw-float-layer,
.es-v1-host.es-v1-signed-in .fbw-guest-topbar,
.es-v1-shell[data-es-signed-in="1"] .fbw-guest-topbar,
.es-v1-host.es-v1-signed-in .home-dash-header,
.es-v1-shell[data-es-signed-in="1"] .home-dash-header {
  display: none !important;
}
.es-v1-home.home-dashboard-embedded,
.es-v1-workspace .home-dashboard-embedded {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.es-v1-home .home-dashboard-scroll--embedded {
  max-width: 920px;
  margin: 0 auto;
}

/* Empty system banners must never intercept V1 workspace clicks */
.es-v1-host .es-system-banners:empty,
.es-v1-main .es-system-banners:empty {
  display: none;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  z-index: 0;
}
.es-v1-host > .es-system-banners {
  /* Mis-mounted sibling of V1 shell — keep out of the hit-test path when empty */
  grid-column: 1 / -1;
}
.es-v1-host > .es-system-banners:empty {
  display: none !important;
  pointer-events: none !important;
}
.es-v1-preview-modes {
  display: flex;
  gap: 8px;
  margin: 0;
  flex-shrink: 0;
}
.es-v1-preview-modes:empty { display: none; }
#esV1Contextual { flex-shrink: 0; }
#esV1Contextual:empty { display: none; }
.es-v1-recs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin: 0;
  background: var(--es-background-elevated);
  border: none;
  border-top: 1px solid var(--es-border-default);
  border-radius: 0;
}
.es-v1-recs-title {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--es-text-secondary);
}
.es-v1-recs-body {
  margin: 0;
  font-size: 11px;
  color: var(--es-text-secondary);
}
.es-v1-recs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
[data-es-foundation] .es-creator-loop {
  display: none !important;
}
.es-v1-mentor, .es-v1-rec {
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  padding: var(--es-space-3) var(--es-space-4);
  background: var(--es-background-elevated);
}
.es-v1-dev-panes {
  display: flex; gap: 0; min-height: 320px;
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  overflow: hidden;
}
.es-v1-dev-pane {
  padding: var(--es-space-3);
  border-right: 1px solid var(--es-border-default);
  background: var(--es-background-subtle);
  min-width: 120px;
}
.es-v1-dev-pane:last-child { border-right: none; flex: 1; }
.es-v1-dev-pane h4 {
  margin: 0 0 var(--es-space-2); font-size: 9px; letter-spacing: 0.04em;
  color: var(--es-text-muted); text-transform: uppercase;
}

.es-v1-full-canvas-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--es-radius-control);
  background: transparent;
  color: var(--es-text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.es-v1-full-canvas-btn:hover {
  background: var(--es-brand-subtle);
  color: var(--es-text-primary);
}
.es-v1-full-canvas-btn:focus-visible {
  outline: 2px solid var(--es-focus-ring);
  outline-offset: 2px;
}
.es-v1-full-canvas-btn[aria-pressed="true"] {
  color: var(--es-brand-primary);
  background: var(--es-brand-subtle);
}

.es-v1-full-canvas-cluster {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--es-background-elevated);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.es-v1-edge-top,
.es-v1-edge-left {
  display: none;
  position: absolute;
  z-index: 55;
  background: transparent;
}
.es-v1-edge-top {
  top: 0; left: 0; right: 0; height: 10px;
}
.es-v1-edge-left {
  top: 0; bottom: 0; left: 0; width: 10px;
}

.es-v1-shell.es-v1-full-canvas .es-v1-main {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  padding: 0;
  gap: 0;
  min-height: 0;
  height: 100%;
}
.es-v1-shell.es-v1-full-canvas .es-v1-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 58;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform var(--es-motion-fast), opacity var(--es-motion-fast);
}
.es-v1-shell.es-v1-full-canvas .es-v1-rail {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  z-index: 58;
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform var(--es-motion-fast), opacity var(--es-motion-fast);
}
.es-v1-shell.es-v1-full-canvas.es-v1-reveal-top .es-v1-header {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.es-v1-shell.es-v1-full-canvas.es-v1-reveal-left .es-v1-rail {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.es-v1-shell.es-v1-full-canvas .es-v1-full-canvas-cluster,
.es-v1-shell.es-v1-full-canvas .es-v1-edge-top,
.es-v1-shell.es-v1-full-canvas .es-v1-edge-left {
  display: flex;
}
.es-v1-shell.es-v1-full-canvas .es-v1-edge-top,
.es-v1-shell.es-v1-full-canvas .es-v1-edge-left {
  display: block;
}
.es-v1-shell.es-v1-full-canvas .es-v1-preview-modes:not(:empty) {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 56;
  display: flex;
  padding: 4px;
  background: var(--es-background-elevated);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
}
.es-v1-shell.es-v1-full-canvas:not([data-es-intent="Run"]) .es-v1-preview-modes,
.es-v1-shell.es-v1-full-canvas .es-v1-recs,
.es-v1-shell.es-v1-full-canvas .es-v1-composer-host:not(.is-open),
.es-v1-shell.es-v1-full-canvas .es-v1-experience-host,
.es-v1-shell.es-v1-full-canvas .fbw-status-bar,
.es-v1-shell.es-v1-full-canvas .es-creator-loop,
.es-v1-shell.es-v1-full-canvas .es-v1-home-strip,
.es-v1-shell.es-v1-full-canvas .es-v1-home-composer-wrap:not(.is-open),
.es-v1-shell.es-v1-full-canvas .es-system-banners:empty {
  display: none !important;
}
.es-v1-shell.es-v1-full-canvas #esV1Contextual:empty {
  display: none;
}
.es-v1-shell.es-v1-full-canvas #esV1Contextual:not(:empty) {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  width: min(560px, 92vw);
  z-index: 57;
  display: block;
  background: var(--es-background-elevated);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.es-v1-shell.es-v1-full-canvas .es-v1-composer-host.is-open,
.es-v1-shell.es-v1-full-canvas .es-v1-home-composer-wrap.is-open {
  display: flex;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 57;
  padding: 0;
  margin: 0;
}
.es-v1-shell.es-v1-full-canvas .es-v1-workspace {
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}
.es-v1-shell.es-v1-full-canvas .es-v1-workspace.es-v1-home,
.es-v1-shell.es-v1-full-canvas .es-v1-home.es-v1-workspace {
  padding: 0 !important;
  gap: 0 !important;
}
.es-v1-shell.es-v1-full-canvas .es-v1-home-canvas,
.es-v1-shell.es-v1-full-canvas .es-v1-intent-canvas {
  padding: 0;
  border: none;
  border-radius: 0;
  gap: 0;
}
.es-v1-shell.es-v1-full-canvas .es-v1-context-panel:not(.is-pinned) {
  display: none !important;
}
.es-v1-shell.es-v1-full-canvas .es-v1-device-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 56;
  background: var(--es-background-elevated);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  padding: 4px 8px;
}
.es-v1-preview-stage {
  flex: 1;
  min-height: 240px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--es-background-base);
  border-radius: var(--es-radius-card);
  overflow: hidden;
}
.es-v1-preview-empty {
  margin: auto;
  padding: 24px;
  color: var(--es-text-secondary);
  font-size: 14px;
  text-align: center;
  max-width: 28em;
}
.es-v1-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.es-v1-preview-stage--device .es-v1-preview-frame {
  width: min(390px, 100%);
  max-height: 100%;
  border-radius: 12px;
  border: 1px solid var(--es-border-default);
}
.es-v1-workspace .fbw-develop-workbench,
.es-v1-workspace .fbw-design-context {
  flex: 1;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: auto;
}
.es-v1-intent-canvas {
  flex: 1;
  min-height: 0;
}
.es-v1-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.es-v1-stage > .es-v1-home-canvas,
.es-v1-stage > .es-v1-intent-canvas {
  flex: 1 1 auto;
  min-width: 0;
}
.es-v1-context-panel {
  flex: 0 0 340px;
  width: 340px;
  min-width: 320px;
  max-width: 380px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--es-background-elevated);
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  overflow: hidden;
}
.es-v1-context-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 4px;
  flex-shrink: 0;
}
.es-v1-context-tab {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: var(--es-radius-control);
  background: transparent;
  color: var(--es-text-secondary);
  font: 500 13px/1 var(--es-font-sans);
  cursor: pointer;
}
.es-v1-context-tab.is-active {
  background: var(--es-interaction-selected);
  color: var(--es-text-primary);
}
.es-v1-context-spacer { flex: 1; }
.es-v1-context-icon {
  height: 24px;
  width: 24px;
  border: none;
  background: transparent;
  color: var(--es-text-muted);
  cursor: pointer;
  font-size: 12px;
}
.es-v1-context-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.es-v1-activity-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--es-text-primary);
}
.es-v1-activity-phase {
  margin: 0;
  font-size: 11px;
  color: var(--es-text-secondary);
}
.es-v1-activity-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  color: var(--es-text-primary);
}
.es-v1-activity-glyph { color: var(--es-brand-primary); flex-shrink: 0; }
.es-v1-activity-line--done .es-v1-activity-glyph { color: var(--es-status-success); }
.es-v1-activity-meta {
  color: var(--es-text-muted);
  font-size: 10px;
}
.es-v1-activity-agents {
  margin: 8px 0 0;
  font-size: 10px;
  color: var(--es-text-secondary);
}
.es-v1-finding {
  padding: 8px;
  border-radius: var(--es-radius-control);
  background: var(--es-background-surface);
  border: 1px solid var(--es-border-default);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  width: 100%;
}
.es-v1-finding strong { font-size: 13px; color: var(--es-text-primary); }
.es-v1-finding span { font-size: 12px; color: var(--es-text-secondary); }
.es-v1-home-canvas.es-v1-home-canvas--device,
.es-v1-home-canvas.es-v1-home-canvas--design,
.es-v1-home-canvas.es-v1-home-canvas--review,
.es-v1-home-canvas.es-v1-home-canvas--run,
.es-v1-home-canvas.es-v1-home-canvas--live,
.es-v1-home-canvas.es-v1-home-canvas--develop {
  padding: 6px 8px;
  gap: 6px;
}
/* Secondary choices sit directly under the canvas guidance rather than floating
   in the middle of the column. The quiet space below is intentional — it leads
   the eye down to the Composer. */
.es-v1-home-canvas.es-v1-home-canvas--empty {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px 24px 16px;
}
.es-v1-create-actions {
  margin-top: 12px;
  max-width: 640px;
}
.es-v1-design-callout {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-control);
  background: var(--es-background-elevated);
  color: inherit;
  cursor: pointer;
}
.es-v1-design-callout strong { font-size: 13px; color: var(--es-text-primary); }
.es-v1-design-callout span { font-size: 12px; color: var(--es-text-secondary); }
.es-v1-home-canvas .fbw-develop-workbench,
.es-v1-home-canvas .es-v1-develop-workbench {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.es-v1-home-canvas .es-v1-device-lab-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.es-v1-device-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  overflow-x: auto;
  max-width: 100%;
}
.es-v1-device-family,
.es-v1-device-orient,
.es-v1-device-zoom,
.es-v1-device-compare-btn {
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-control);
  background: var(--es-background-elevated);
  color: var(--es-text-secondary);
  font: 500 10px/1 var(--es-font-sans);
  cursor: pointer;
}
.es-v1-device-family.is-active,
.es-v1-device-compare-btn.is-active,
.es-v1-frame-toggle.is-active {
  background: var(--es-interaction-selected);
  color: var(--es-text-primary);
  border-color: var(--es-border-strong);
}
.es-v1-frame-toggle {
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-control);
  background: var(--es-background-elevated);
  color: var(--es-text-secondary);
  font: 500 11px/1 var(--es-font-sans);
  cursor: pointer;
}
.es-v1-device-canvas-label {
  font-size: 11px;
  color: var(--es-text-secondary);
  margin-left: 4px;
}
.es-v1-device-dim, .es-v1-device-x { font-size: 11px; color: var(--es-text-secondary); }
.es-v1-device-select,
.es-v1-device-custom {
  height: 24px;
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-control);
  background: var(--es-background-elevated);
  color: var(--es-text-primary);
  font: 500 10px/1 var(--es-font-sans);
}
.es-v1-device-custom { width: 64px; }
.es-v1-device-scrub { width: 120px; }
.es-v1-device-dim, .es-v1-device-x { font-size: 12px; color: var(--es-text-secondary); }
.es-v1-device-lab {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.es-v1-device-floor {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--es-background-base);
  border-radius: var(--es-radius-card);
}
.es-v1-device-slot {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.es-v1-device-slot--fluid {
  width: 100%;
  height: 100%;
}
.es-v1-device-native {
  transform-origin: top left;
  flex-shrink: 0;
}
.es-v1-phone {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--es-v1-vp-w, 430) * 1px + 32px);
  height: calc(var(--es-v1-vp-h, 932) * 1px + 38px);
  padding: 0;
}
.es-v1-phone-bezel {
  position: relative;
  box-sizing: border-box;
  width: calc(var(--es-v1-vp-w, 430) * 1px + 24px);
  height: calc(var(--es-v1-vp-h, 932) * 1px + 30px);
  border-radius: 52px;
  padding: 12px 12px 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 18%, transparent 42%),
    linear-gradient(165deg, #6e7078 0%, #3e4048 16%, #1c1d22 48%, #0e0f13 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    inset 2px 0 0 rgba(255, 255, 255, 0.12),
    inset -2px 0 0 rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1.5px rgba(0, 0, 0, 0.85),
    0 0 0 4px #1e1f24,
    0 0 0 5px #0a0a0c;
  overflow: hidden;
}
.es-v1-phone-bezel--classic {
  border-radius: 36px;
  width: calc(var(--es-v1-vp-w, 375) * 1px + 28px);
  height: calc(var(--es-v1-vp-h, 667) * 1px + 72px);
  padding: 16px 14px 56px;
}
.es-v1-phone-bezel--classic::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  z-index: 12;
  pointer-events: none;
}
.es-v1-phone-bezel--android {
  border-radius: 40px;
  padding: 14px 11px 16px;
}
.es-v1-phone .es-v1-device-screen {
  position: relative;
  z-index: 1;
  width: calc(var(--es-v1-vp-w, 430) * 1px);
  height: calc(var(--es-v1-vp-h, 932) * 1px);
  flex: 0 0 auto;
  border-radius: 38px;
  overflow: hidden;
  background: #fff;
}
.es-v1-device-native--bare {
  width: calc(var(--es-v1-vp-w, 430) * 1px);
  height: calc(var(--es-v1-vp-h, 932) * 1px);
  overflow: hidden;
  background: #fff;
}
.es-v1-device-native--bare .es-v1-device-screen {
  position: relative;
  width: 100%;
  height: 100%;
}
.es-v1-phone-bezel--classic .es-v1-device-screen {
  border-radius: 8px;
}
.es-v1-phone-island {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 34px;
  border-radius: 999px;
  background: #000;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 14px 0 18px;
  box-sizing: border-box;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.es-v1-phone-home {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 120px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  z-index: 12;
  pointer-events: none;
}
.es-v1-phone-punch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #050608;
  box-shadow:
    inset 0 0 0 1.5px #1a2436,
    0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 12;
  pointer-events: none;
}
.es-v1-phone .fbw-phone-btn {
  position: absolute;
  z-index: 8;
  pointer-events: none;
}
.es-v1-phone.is-landscape {
  width: calc(var(--es-v1-vp-w, 932) * 1px + 38px);
  height: calc(var(--es-v1-vp-h, 430) * 1px + 32px);
}
.es-v1-phone.is-landscape .es-v1-phone-island {
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  width: 34px;
  height: 118px;
  flex-direction: column;
  padding: 18px 0 14px;
}
.es-v1-phone.is-landscape .es-v1-phone-home {
  left: auto;
  right: 10px;
  bottom: 50%;
  transform: translateY(50%);
  width: 5px;
  height: 120px;
}
.es-v1-tablet {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--es-v1-vp-w, 1024) * 1px + 28px);
  height: calc(var(--es-v1-vp-h, 1366) * 1px + 48px);
  padding: 12px 12px 14px;
  border-radius: 24px;
  background: linear-gradient(160deg, #3a3d48 0%, #22252e 42%, #12141c 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 24px 56px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.es-v1-tablet-camera {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0a0c10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 2;
}
.es-v1-tablet-glass {
  position: relative;
  flex: 1 1 auto;
  width: calc(var(--es-v1-vp-w, 1024) * 1px);
  height: calc(var(--es-v1-vp-h, 1366) * 1px);
  margin-top: 4px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.es-v1-tablet-glass .es-v1-device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
.es-v1-tablet-home {
  width: 96px;
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
.es-v1-tablet--android {
  height: calc(var(--es-v1-vp-h, 1280) * 1px + 28px);
  padding-bottom: 12px;
}
.es-v1-device-lab .fbw-browser-frame.es-v1-device-native {
  width: calc(var(--es-v1-vp-w, 1440) * 1px);
  height: calc(var(--es-v1-vp-h, 900) * 1px + 36px);
  max-width: none;
  display: flex;
  flex-direction: column;
}
.es-v1-device-lab .fbw-browser-viewport,
.es-v1-device-lab .fbw-browser-viewport .fbw-preview-stage,
.es-v1-device-lab .es-v1-device-frame--browser {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
}
.es-v1-device-lab .es-v1-device-frame--browser .es-v1-device-screen {
  position: absolute;
  inset: 0;
  height: 100%;
}
.es-v1-device-lab iframe.es-v1-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.es-v1-device-chrome {
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  color: var(--es-text-muted);
  background: var(--es-background-elevated);
  border-bottom: 1px solid var(--es-border-default);
}
.es-v1-device-caption { display: none; }
.es-v1-device-lab .es-v1-preview-state {
  background: #fff;
}
.es-v1-preview-state--overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
}
.es-v1-preview-state {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--es-text-secondary);
  background: var(--es-background-surface);
}
.es-v1-preview-state--loading { color: var(--es-brand-primary); }
.es-v1-preview-retry {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-default);
  background: var(--es-background-elevated);
  color: var(--es-text-primary);
  font-size: 12px;
  cursor: pointer;
  z-index: 2;
}
.es-v1-device-lab--compare .es-v1-device-compare {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
}
.es-v1-device-lab--compare .es-v1-device-floor { flex: 1; }
.es-v1-device-compare-note {
  margin: 0;
  font-size: 11px;
  color: var(--es-text-secondary);
}
.es-v1-device-compare-switch { display: flex; gap: 6px; }

.es-v1-workspace .es-v1-develop-workbench {
  display: grid;
  grid-template-columns: minmax(132px, 180px) minmax(0, 1.55fr) minmax(220px, 0.85fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.es-v1-develop-workbench.es-v1-develop-workbench {
  display: grid;
}
.es-v1-develop-workbench > .fbw-develop-label:first-child {
  grid-column: 1 / -1;
}
.es-v1-develop-workbench .fbw-develop-files {
  grid-column: 1;
  grid-row: 2;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  overflow: auto;
  min-height: 0;
  height: 100%;
}
.es-v1-develop-workbench .fbw-develop-editor {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.es-v1-develop-workbench .fbw-develop-editor .code-page,
.es-v1-develop-workbench .fbw-develop-editor .monaco-editor {
  flex: 1;
  min-height: 0;
  height: 100%;
}
.es-v1-develop-workbench .es-v1-develop-preview {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--es-border-default);
}
.es-v1-develop-workbench .es-v1-develop-preview .es-v1-device-lab,
.es-v1-develop-workbench .es-v1-develop-preview .es-v1-device-floor {
  flex: 1;
  min-height: 0;
}
.es-v1-develop-workbench .fbw-develop-dock {
  grid-column: 1 / -1;
  grid-row: 3;
  max-height: 28%;
}
.es-v1-develop-workbench[data-es-develop="guided"][data-es-develop-editor="0"] {
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
}
.es-v1-develop-workbench[data-es-develop-layout="overview"] {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 42%);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 280px;
}
.es-v1-develop-workbench[data-es-develop-layout="overview"] .es-v1-develop-overview {
  grid-column: 1;
  grid-row: 2;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  min-height: 160px;
}
.es-v1-develop-workbench[data-es-develop-layout="overview"] .es-v1-develop-preview {
  grid-column: 2;
  grid-row: 2;
}
.es-v1-develop-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.es-v1-develop-file-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.es-v1-develop-back {
  justify-self: start;
}
.es-v1-shell[data-es-experience="developer"] .es-v1-develop-workbench[data-es-develop="developer"] {
  grid-template-columns: minmax(160px, 220px) minmax(0, 1.4fr) minmax(240px, 0.9fr);
}
.es-v1-shell[data-es-experience="developer"] .fbw-develop-editor {
  min-height: 280px;
}
.es-v1-develop-workbench[data-es-develop="guided"][data-es-develop-editor="0"] .es-v1-develop-preview {
  grid-column: 2;
}
.es-v1-develop-workbench[data-es-develop="guided"][data-es-develop-editor="0"] .fbw-develop-files {
  flex-wrap: wrap;
  flex-direction: row;
}
.es-v1-home-canvas[data-es-preview-mode="Full"] .es-v1-device-controls {
  display: none;
}
.es-v1-home-canvas.es-v1-home-canvas--split {
  flex-direction: row;
  align-items: stretch;
}
.es-v1-home-canvas.es-v1-home-canvas--split .es-v1-device-lab-host {
  flex: 1 1 68%;
  min-width: 0;
}
.es-v1-run-split-side {
  flex: 0 1 320px;
  max-width: 380px;
  min-width: 240px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.es-v1-home-canvas[data-es-preview-mode="Split"] .es-v1-device-lab-host {
  flex: 1;
}

/* Design source — compact, optional, never a gate */
.es-v1-design-source {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border: 1px solid var(--es-border-subtle);
  border-radius: var(--es-radius-control);
  background: var(--es-background-surface);
}
.es-v1-design-source-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--es-text-muted);
}
.es-v1-design-source-options {
  display: flex;
  gap: 4px;
}
.es-v1-design-source-option {
  padding: 4px 10px;
  border-radius: var(--es-radius-control);
  border: 1px solid transparent;
  background: transparent;
  color: var(--es-text-secondary);
  font-size: 12px;
  cursor: pointer;
}
.es-v1-design-source-option:hover { color: var(--es-text-primary); }
.es-v1-design-source-option.is-active {
  border-color: var(--es-border-default);
  background: var(--es-background-elevated);
  color: var(--es-text-primary);
}
.es-v1-design-source-connect {
  padding: 4px 10px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-default);
  background: transparent;
  color: var(--es-brand-primary);
  font-size: 12px;
  cursor: pointer;
}
.es-v1-design-source-hint {
  font-size: 11px;
  color: var(--es-text-muted);
}
.es-v1-design-delta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-subtle);
  background: var(--es-background-surface);
  font-size: 12px;
}
.es-v1-design-delta span { color: var(--es-text-secondary); }

/* Engineering truth — facts only */
.es-v1-eng-truth {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--es-border-subtle);
  font-size: 12px;
}
.es-v1-eng-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.es-v1-eng-fact-label {
  color: var(--es-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.es-v1-eng-fact-value { color: var(--es-text-primary); font-weight: 500; }
.es-v1-eng-fact.is-warn .es-v1-eng-fact-value { color: var(--es-warning); }
.es-v1-eng-fact--verify .es-v1-eng-fact-value { color: var(--es-text-secondary); }

/* Diff-first AI changes */
.es-v1-ai-change {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 5px 8px;
  border-bottom: 1px solid var(--es-border-subtle);
  font-size: 12px;
}
.es-v1-ai-change-title { color: var(--es-text-primary); }
.es-v1-ai-change-file {
  color: var(--es-text-secondary);
  font-family: var(--es-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
}
.es-v1-ai-change-action {
  padding: 2px 8px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-subtle);
  background: transparent;
  color: var(--es-text-secondary);
  font-size: 11px;
  cursor: pointer;
}
.es-v1-ai-change-action:last-child { margin-left: auto; }

/* Express Terminal — real, quiet, ours */
.es-v1-terminal {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--es-border-subtle);
  background: var(--es-background-base);
}
.es-v1-terminal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--es-text-secondary);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.es-v1-terminal-glyph {
  font-family: var(--es-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--es-text-muted);
}
.es-v1-terminal.is-open .es-v1-terminal-glyph { color: var(--es-brand-primary); }
.es-v1-terminal-name { color: var(--es-text-primary); }
.es-v1-terminal-state { margin-left: auto; color: var(--es-text-muted); }
.es-v1-terminal-state.is-error { color: var(--es-error); }
.es-v1-terminal-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
  max-height: 260px;
  overflow: auto;
  resize: vertical;
}
.es-v1-terminal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--es-text-muted);
}
.es-v1-terminal-spacer { flex: 1; }
.es-v1-terminal-action {
  padding: 3px 8px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-subtle);
  background: transparent;
  color: var(--es-text-secondary);
  font-size: 11px;
  cursor: pointer;
}
.es-v1-terminal-action.is-primary { color: var(--es-brand-primary); }
.es-v1-terminal-out {
  margin: 0;
  padding: 8px;
  border-radius: var(--es-radius-control);
  background: var(--es-background-surface);
  border: 1px solid var(--es-border-subtle);
  color: var(--es-text-secondary);
  font-family: var(--es-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}
.es-v1-terminal-input {
  display: flex;
  align-items: center;
  gap: 6px;
}
.es-v1-terminal-prompt {
  color: var(--es-brand-primary);
  font-family: var(--es-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.es-v1-terminal-input input {
  flex: 1;
  padding: 5px 8px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-subtle);
  background: var(--es-background-surface);
  color: var(--es-text-primary);
  font-family: var(--es-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
}
.es-v1-terminal-note, .es-v1-terminal-guided {
  margin: 0;
  font-size: 12px;
  color: var(--es-text-secondary);
}

/* Verification — evidence, not applause */
.es-v1-verification {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-subtle);
  background: var(--es-background-surface);
  font-size: 12px;
}
.es-v1-verification-status { color: var(--es-text-primary); }
.es-v1-verification[data-es-verification="VERIFIED"] .es-v1-verification-status { color: var(--es-success); }
.es-v1-verification[data-es-verification="NEEDS_ATTENTION"] .es-v1-verification-status,
.es-v1-verification[data-es-verification="PARTIALLY_VERIFIED"] .es-v1-verification-status { color: var(--es-warning); }
.es-v1-verification[data-es-verification="FAILED_VERIFICATION"] .es-v1-verification-status { color: var(--es-error); }
.es-v1-verification-task, .es-v1-verification-evidence { color: var(--es-text-secondary); }
.es-v1-verification-action {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-default);
  background: transparent;
  color: var(--es-text-primary);
  font-size: 11px;
  cursor: pointer;
}

/* Readiness — measured or silent */
.es-v1-readiness {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: var(--es-radius-surface, 10px);
  border: 1px solid var(--es-border-subtle);
  background: var(--es-background-surface);
}
.es-v1-readiness-score { margin: 0; color: var(--es-text-primary); font-size: 13px; }
.es-v1-readiness-list { display: flex; flex-direction: column; gap: 4px; }
.es-v1-readiness-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--es-text-secondary);
}
.es-v1-readiness-item strong { color: var(--es-text-primary); font-weight: 500; }
.es-v1-readiness-item.is-ok .es-v1-readiness-glyph { color: var(--es-success); }
.es-v1-readiness-item.is-open .es-v1-readiness-glyph { color: var(--es-text-muted); }

/* Returning-user continuity — one line, dismissible */
.es-v1-continuity {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-subtle);
  background: var(--es-background-surface);
  font-size: 12px;
}
.es-v1-continuity-title { color: var(--es-text-primary); }
.es-v1-continuity-detail { color: var(--es-text-secondary); }
.es-v1-continuity-action {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-default);
  background: transparent;
  color: var(--es-brand-primary);
  cursor: pointer;
  font-size: 12px;
}
.es-v1-continuity-dismiss {
  border: 0;
  background: transparent;
  color: var(--es-text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

/* Consequence notice inside approval modals */
.es-v1-consequence { display: flex; flex-direction: column; gap: 6px; }
.es-v1-consequence p { margin: 0; color: var(--es-text-primary); }
.es-v1-consequence-safe { color: var(--es-text-secondary); font-size: 12px; }
.es-v1-consequence-risk { color: var(--es-warning); font-size: 12px; }

/* Experience translator — same shell, different density */
.es-v1-experience-host {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 12px 0;
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
}
.es-v1-experience-host:empty { display: none; }
.es-v1-experience-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--es-text-primary);
  line-height: 1.35;
}
.es-v1-experience-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--es-text-secondary);
}
.es-v1-experience-decision {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.es-v1-experience-decision-q {
  margin: 0;
  font-size: 14px;
  color: var(--es-text-primary);
}
.es-v1-experience-decision-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.es-v1-shell[data-es-experience="guided"] .es-v1-activity-phase,
.es-v1-shell[data-es-experience="guided"] .es-v1-home-kicker {
  color: var(--es-text-secondary);
  font-size: 13px;
}
.es-v1-shell[data-es-experience="guided"] .es-v1-contextual:empty {
  display: none;
}
.es-v1-experience-brief {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-control);
  background: var(--es-background-surface);
  flex: 0 0 auto;
  max-width: none;
}
.es-v1-experience-brief[data-es-brief-compact="1"] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 6px 12px;
  max-width: none;
}
.es-v1-experience-brief[data-es-brief-surface="plan"] {
  gap: 8px;
  padding: 10px 14px;
  max-width: none;
}
.es-v1-experience-chips,
.es-v1-experience-facts.es-v1-experience-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.es-v1-experience-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-default);
  background: var(--es-background-elevated, var(--es-background-surface));
  color: var(--es-text-secondary);
  font-size: 12px;
  line-height: 1.3;
}
.es-v1-experience-chip.is-selected {
  border-color: var(--es-brand-primary);
  color: var(--es-text-primary);
}
.es-v1-experience-brief[data-es-brief-compact="1"] .es-v1-experience-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.es-v1-experience-brief[data-es-brief-compact="1"] .es-v1-experience-title {
  font-size: 13px;
  font-weight: 600;
  flex: 1 1 220px;
  line-height: 1.3;
}
.es-v1-experience-brief[data-es-brief-compact="1"] .es-v1-experience-actions {
  margin: 0;
}
.es-v1-experience-brief[data-es-brief-compact="1"] .es-v1-experience-action {
  padding: 6px 12px;
  font-size: 12px;
}
.es-v1-experience-brief[data-es-brief-compact="1"] .es-v1-experience-hatch {
  flex: 0 0 auto;
  white-space: nowrap;
}
.es-v1-experience-hatch {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--es-text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.es-v1-composer-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 4px 0;
}
.es-v1-home-composer-wrap > .es-v1-composer-suggestions {
  padding: 4px 8px 6px;
  max-height: 28px;
  overflow: hidden;
}
.es-v1-composer-chip {
  appearance: none;
  border: 1px solid var(--es-border-default);
  background: var(--es-background-elevated);
  color: var(--es-text-secondary);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.es-v1-create-actions[data-es-create-mode="developer"] .es-v1-home-tile span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}
.es-v1-experience-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--es-text-primary);
  line-height: 1.3;
  white-space: pre-wrap;
}
.es-v1-experience-body {
  margin: 0;
  font-size: 14px;
  color: var(--es-text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
}
.es-v1-experience-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--es-text-primary);
}
.es-v1-experience-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.es-v1-experience-action {
  padding: 8px 14px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-default);
  background: transparent;
  color: var(--es-text-primary);
  font-size: 13px;
  cursor: pointer;
}
.es-v1-experience-action.is-primary {
  background: var(--es-brand-primary);
  border-color: var(--es-brand-primary);
  color: var(--es-background-base);
  font-weight: 600;
}
.es-v1-experience-hatch {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--es-text-muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.es-v1-experience-brief[data-es-error-notice="1"] {
  border-color: var(--es-warning, #f59e0b);
}
.es-v1-shell[data-es-experience="guided"] .es-v1-experience-brief {
  padding: 10px 14px;
  max-width: none;
}
.es-v1-shell[data-es-experience="guided"] .es-v1-experience-brief[data-es-brief-compact="1"],
.es-v1-shell[data-es-experience="developer"] .es-v1-experience-brief[data-es-brief-compact="1"] {
  padding: 6px 12px;
  max-width: none;
}
.es-v1-shell[data-es-experience="developer"] .es-v1-experience-brief {
  max-width: none;
  padding: 10px 14px;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.es-v1-shell[data-es-experience="developer"] .es-v1-experience-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.es-v1-shell[data-es-experience="developer"] .es-v1-experience-body {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--es-text-primary);
}
.es-v1-shell[data-es-experience="developer"] .es-v1-experience-facts {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.es-v1-shell[data-es-experience="developer"] .es-v1-experience-action {
  padding: 4px 10px;
  font-size: 11px;
}
.es-v1-shell[data-es-experience="guided"] .es-v1-home-canvas--develop .es-v1-eng-truth {
  font-size: 12px;
}
.es-v1-shell[data-es-experience="developer"] .es-v1-context-panel {
  min-width: 280px;
}

@media (max-width: 1024px) {
  .es-v1-eng-truth { gap: 4px 10px; font-size: 11px; }
  .es-v1-design-source { padding: 4px 6px; }
  .es-v1-design-source-hint { display: none; }
  .es-v1-terminal-body { max-height: 180px; }
}

@media (max-width: 1280px) {
  .es-v1-rail { width: 80px; }
  .es-v1-project { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .es-v1-command-pill { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .es-v1-shell[data-es-signed-in="1"] .es-v1-home.es-v1-workspace {
    padding: 10px 12px 8px;
  }
  .es-v1-context-panel {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 12;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  }
}
@media (max-width: 1024px) {
  .es-v1-header { padding: 0 var(--es-space-3); gap: var(--es-space-2); }
  .es-v1-main { padding: 0; }
  .es-v1-shell[data-es-route="home"][data-es-signed-in="1"] .es-v1-main { padding: 0; }
  .es-v1-project { max-width: 140px; }
  .es-v1-rail { width: 76px; }
  .es-v1-intent { font-size: 10px; padding: 0 6px; }
  /* Keep intent text at 1024 — Figma recomposes density, does not drop labels */
  .es-v1-home-tile { width: 132px; }
  .es-v1-home-title { font-size: 20px; }
  .es-v1-home-composer-action { font-size: 12px; }
}
@media (max-width: 820px) {
  .es-v1-rail { width: 48px; }
  .es-v1-intent-label { display: none; }
}

.es-v1-composer-project {
  font-size: 11px;
  font-weight: 600;
  color: var(--es-text-primary);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.es-v1-composer-status {
  font-size: 12px;
  color: var(--es-status-info);
  padding: 0 14px 6px;
}
.es-v1-home-composer-wrap[data-es-composer-state="ERROR"] .es-v1-composer-status,
.es-v1-home-composer-wrap[data-es-composer-state="INSUFFICIENT_CREDITS"] .es-v1-composer-status {
  color: var(--es-status-error);
}
.es-v1-home-composer-wrap[data-es-composer-state="BUILDING"] .es-v1-composer-status,
.es-v1-home-composer-wrap[data-es-composer-state="WAITING_FOR_AGENT"] .es-v1-composer-status {
  color: var(--es-brand-active);
}
.es-v1-composer-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.es-v1-composer-retry {
  font: inherit;
  font-size: 12px;
  color: var(--es-text-primary);
  background: var(--es-background-elevated);
  border: 1px solid var(--es-border-default);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
}
.es-v1-compare-caption {
  padding: 0 0 6px;
}
.es-v1-design-ref {
  min-height: 180px;
  padding: 12px;
  border: 1px solid var(--es-border-default);
  border-radius: 10px;
  background: var(--es-background-elevated);
  color: var(--es-text-secondary);
}
.es-v1-design-ref-frame {
  font-size: 12px;
  padding: 4px 0;
  color: var(--es-text-primary);
}
.es-v1-file-lock {
  font-size: 12px;
  color: var(--es-status-info);
  padding: 4px 8px;
}
.fbw-develop-diff-snip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--es-text-secondary);
  padding: 0 8px;
  white-space: pre-wrap;
}
.es-v1-engine-rail {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.es-v1-agent-chip[data-es-agent-state="WORKING"],
.es-v1-agent-chip[data-es-agent-state="WAITING"] {
  color: var(--es-brand-active);
  background: rgba(45, 212, 191, 0.12);
}
.es-v1-agent-chip[data-es-agent-state="IDLE"] {
  color: var(--es-text-secondary);
  background: transparent;
}
.es-v1-shell.es-v1-full-canvas .es-v1-preview-modes,
.es-v1-shell.es-v1-full-canvas .es-v1-device-family,
.es-v1-shell.es-v1-full-canvas .es-v1-device-compare-select {
  display: none;
}
.es-v1-terminal.is-open {
  border-color: var(--es-border-strong);
}
.es-v1-terminal.is-open .es-v1-terminal-glyph { color: var(--es-brand-active); }
.es-v1-home-composer-action { font-size: 12px; color: var(--es-text-secondary); }

/* ---------------------------------------------------------------------------
   Accessibility floor for V1 controls.
   Audited against WCAG 2.2 AA: 1.4.3 contrast, 2.5.8 target size, 2.4.7 focus.
   --------------------------------------------------------------------------- */

.es-v1-home-composer-more { color: var(--es-text-secondary); }
.es-v1-id-sep { color: var(--es-text-secondary); }

/* --es-text-muted is 3.47:1 on our surfaces — below AA for body text.
   Muted is fine for decoration, not for labels a user has to read. */
.es-v1-design-source-label,
.es-v1-terminal-glyph,
.es-v1-terminal-state {
  color: var(--es-text-secondary);
}
.es-v1-shell .fbw-develop-label,
.es-v1-shell .fbw-develop-empty {
  color: var(--es-text-secondary);
}

/* The device lab renders on white, so shell-dark text drops to 2.54:1 there. */
.es-v1-device-lab .es-v1-preview-state,
.es-v1-preview-state--overlay {
  color: #44536b;
}
.es-v1-experience-hatch { color: var(--es-text-secondary); }

.es-v1-home-composer-action,
.es-v1-home-composer-more,
.es-v1-agent-chip,
.es-v1-experience-action,
.es-v1-experience-hatch,
.es-v1-terminal-action,
.es-v1-ai-change-action,
.es-v1-preview-retry,
.es-v1-design-source-btn,
.es-v1-design-source-connect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
}

/* Keep the hit area at 24px without inflating the visual weight of text links. */
.es-v1-home-composer-action,
.es-v1-home-composer-more {
  padding: 7px 4px;
}

.es-v1-shell :focus-visible {
  outline: 2px solid var(--es-focus-ring);
  outline-offset: 2px;
}

.es-v1-data-tables {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--es-text-secondary);
  font-size: 13px;
  line-height: 1.7;
}
.es-v1-data-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--es-text-secondary);
}

/* Status that must not depend on colour alone. */
.es-v1-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-es-foundation] *, .es-foundation-root *, .es-v1-shell * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .es-v1-landing-title-state,
  .es-v1-composer-invite-state {
    transform: none !important;
  }
}

/* Publish — one workspace scroll owner. Canvas is document flow, not a nested scroller. */
.es-v1-shell[data-es-intent="Publish"] .es-v1-experience-host {
  display: none !important;
}
.es-v1-shell[data-es-intent="Publish"] .es-v1-context-panel {
  display: none;
}
.es-v1-shell[data-es-intent="Publish"] .es-v1-workspace {
  overflow: hidden;
}
.es-v1-shell[data-es-intent="Publish"] .es-v1-stage {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  min-width: 0;
}
.es-v1-shell[data-es-intent="Publish"] .es-v1-home-canvas--publish {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: min-content;
  align-self: flex-start;
  overflow: visible;
  overflow-x: hidden;
  padding-bottom: 28px;
}
.es-v1-publish-host,
.es-v1-publish-host.upc-page {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 0 12px;
}
.es-v1-shell[data-es-intent="Publish"] .upc-v1-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.es-v1-shell[data-es-intent="Publish"] .upc-v1-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--es-text-primary);
  line-height: 1.2;
}
.es-v1-shell[data-es-intent="Publish"] .upc-v1-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-intent="Publish"] .upc-readiness-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 12px;
  margin: 0 0 12px;
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-card);
  background: var(--es-background-elevated);
}
.es-v1-shell[data-es-intent="Publish"] .upc-readiness-identity {
  font-size: 12px;
  font-weight: 600;
  color: var(--es-text-primary);
  flex: 1 1 180px;
}
.es-v1-shell[data-es-intent="Publish"] .upc-readiness-plain {
  margin: 0;
  font-size: 12px;
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-intent="Publish"] .upc-readiness-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-intent="Publish"] .upc-readiness-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.es-v1-shell[data-es-intent="Publish"] .upc-readiness-more {
  position: relative;
}
.es-v1-shell[data-es-intent="Publish"] .upc-readiness-menu {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 4px;
  min-width: 160px;
  padding: 4px;
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-control);
  background: var(--es-background-surface);
  z-index: 4;
  display: flex;
  flex-direction: column;
}
.es-v1-shell[data-es-intent="Publish"] .upc-readiness-menu button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--es-text-primary);
  font-size: 12px;
  text-align: left;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.es-v1-shell[data-es-intent="Publish"] .upc-readiness-menu button:hover {
  background: var(--es-brand-subtle);
}
.es-v1-shell[data-es-intent="Publish"] .upc-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.es-v1-shell[data-es-intent="Publish"] .upc-tab {
  flex: 0 0 auto;
  background: var(--es-background-elevated);
  border-color: var(--es-border-default);
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-intent="Publish"] .upc-tab.active,
.es-v1-shell[data-es-intent="Publish"] .upc-tab[aria-selected="true"] {
  background: var(--es-interaction-selected);
  border-color: var(--es-brand-primary);
  color: var(--es-text-primary);
}
.es-v1-shell[data-es-intent="Publish"] .upc-dest-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.es-v1-shell[data-es-intent="Publish"] .upc-dest-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--es-radius-control);
  border: 1px solid transparent;
}
.es-v1-shell[data-es-intent="Publish"] .upc-dest-row:hover {
  background: var(--es-interaction-hover);
}
.es-v1-shell[data-es-intent="Publish"] .upc-dest-row.is-selected {
  background: var(--es-interaction-selected);
  border-color: var(--es-border-default);
}
.es-v1-shell[data-es-intent="Publish"] .upc-dest-row.is-unavailable {
  opacity: 0.55;
  pointer-events: none;
}
.es-v1-shell[data-es-intent="Publish"] .upc-dest-name {
  font-size: 13px;
  color: var(--es-text-primary);
  min-width: 0;
}
.es-v1-shell[data-es-intent="Publish"] .upc-dest-method {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--es-text-secondary);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0;
  text-align: right;
}
.es-v1-shell[data-es-intent="Publish"] .upc-dest-method:hover {
  color: var(--es-brand-primary);
}
.es-v1-shell[data-es-intent="Publish"] .upc-dest-search {
  width: 100%;
  max-width: 320px;
  margin: 0 0 10px;
  padding: 7px 10px;
  border-radius: var(--es-radius-control);
  border: 1px solid var(--es-border-default);
  background: var(--es-background-base);
  color: var(--es-text-primary);
  font-size: 12px;
}
.es-v1-shell[data-es-intent="Publish"] .upc-group-label {
  margin: 10px 0 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--es-text-muted);
}
.es-v1-shell[data-es-intent="Publish"] .upc-panel--category {
  padding: 10px 12px;
}
.es-v1-shell[data-es-intent="Publish"] .upc-suggested-inline {
  font-size: 12px;
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-intent="Publish"] .upc-guided-flow {
  padding: 8px 0 16px;
}
.es-v1-shell[data-es-intent="Publish"] .upc-guided-copy {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--es-text-primary);
}

.es-v1-publish-ready {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 16px 0;
  max-width: 420px;
}
.es-v1-publish-ready dt {
  color: var(--es-text-secondary);
  font-size: 13px;
}
.es-v1-publish-ready dd {
  margin: 0;
  color: var(--es-text-primary);
  font-size: 13px;
  font-weight: 600;
}
.es-v1-publish-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}
.es-v1-publish-primary,
.es-v1-publish-ghost {
  appearance: none;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--es-radius-control);
  font-size: 13px;
  cursor: pointer;
}
.es-v1-publish-primary {
  border: 0;
  background: var(--es-brand-primary);
  color: var(--es-text-on-brand, #fff);
}
.es-v1-publish-ghost {
  border: 1px solid var(--es-border-default);
  background: transparent;
  color: var(--es-text-secondary);
}
.es-v1-publish-facts,
.es-v1-publish-fact {
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px;
  color: var(--es-text-secondary);
  max-width: 520px;
}
.es-v1-publish-facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.es-v1-publish-destinations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.es-v1-home-canvas--publish {
  padding: 20px 24px 28px;
  overflow: visible;
}
#esV1Contextual:empty {
  display: none;
}
.es-v1-shell[data-es-intent="Publish"] .upc-guided-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.es-v1-shell[data-es-intent="Publish"] .page-head {
  display: none;
}

/* Deep-link fallback: publishing-center still scrolls inside V1 chrome. */
.es-v1-shell .workspace.module-host {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.es-v1-shell .es-v1-route-content.module-focus-stage-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.es-v1-shell .es-v1-route-content .module-focus-stage,
.es-v1-shell .es-v1-route-content .module-focus-body {
  overflow: visible;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .es-v1-shell[data-es-intent="Publish"] .upc-dest-row {
    grid-template-columns: 18px minmax(0, 1fr) auto;
  }
  .es-v1-shell[data-es-intent="Publish"] .upc-v1-head {
    flex-wrap: wrap;
  }
}

/* Landing / draft / auth-home — beat earlier .es-v1-home-canvas / composer cascade */
.es-v1-landing .es-v1-home-canvas.es-v1-landing-canvas,
.es-v1-draft .es-v1-home-canvas.es-v1-draft-canvas,
.es-v1-auth-home .es-v1-home-canvas.es-v1-auth-home-canvas {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  gap: 0;
}
.es-v1-landing .es-v1-home-composer.es-v1-home-composer--landing,
.es-v1-home .es-v1-home-composer.es-v1-home-composer--landing,
.es-v1-auth-home .es-v1-home-composer.es-v1-home-composer--landing {
  min-height: var(--es-composer-min-height);
  height: auto;
  padding: var(--es-space-4);
  gap: var(--es-space-3);
  flex-direction: column;
  align-items: stretch;
  background: var(--es-background-elevated);
  border: 1px solid var(--es-border-strong);
  border-radius: var(--es-radius-panel);
  text-align: left;
  overflow: visible;
}
.es-v1-landing .es-v1-home-composer--landing .es-v1-home-composer-input,
.es-v1-home .es-v1-home-composer--landing .es-v1-home-composer-input,
.es-v1-auth-home .es-v1-home-composer--landing .es-v1-home-composer-input {
  height: auto;
  min-height: 3.5rem;
  max-height: 9rem;
  font-size: var(--es-type-body-large);
  line-height: 1.45;
  padding: 0.7rem 0.35rem;
  overflow-y: auto;
  caret-color: var(--es-text-primary);
  text-align: left;
}
.es-v1-landing .es-v1-landing-note {
  color: var(--es-text-secondary);
  opacity: 0.88;
}
.es-v1-landing .es-v1-landing-title {
  font-size: var(--es-type-display);
  line-height: 1.12;
}
.es-v1-landing .es-v1-landing-title--hero {
  text-align: center;
  font-size: clamp(1.75rem, 7.2vw, 3.75rem);
}
.es-v1-landing .es-v1-landing-create-title {
  font-size: var(--es-type-headline);
}
.es-v1-develop-question {
  margin: 0;
  font-size: var(--es-type-headline);
  font-weight: 600;
  line-height: 1.25;
  color: var(--es-text-primary);
}
.es-v1-shell[data-es-experience="developer"] .es-v1-home-canvas--develop .es-v1-eng-truth {
  display: flex;
}

/* Guided project workspace consolidation — never apply these to landing.
   Make Implement-Instructions tokens + header (project only). */
.es-v1-shell[data-es-surface="project"] {
  --es-background-base: #0a0e14;
  --es-background-surface: #0d131c;
  --es-background-elevated: #141b26;
  --es-background-subtle: #10161f;
  --es-text-primary: #e8edf3;
  --es-text-secondary: #8b97a7;
  --es-text-muted: #5b6472;
  --es-border-default: #1c2431;
  --es-border-subtle: #1c2431;
  --es-border-strong: #2a3444;
  --es-brand-primary: #22d3ee;
  --es-brand-subtle: rgba(34, 211, 238, 0.14);
  --es-interaction-selected: rgba(34, 211, 238, 0.12);
  background: var(--es-background-base);
  color: var(--es-text-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-header {
  min-height: 64px;
  height: 64px;
  padding: 0 20px;
  gap: 16px;
  background: var(--es-background-base);
  border-bottom-color: var(--es-border-default);
}
.es-v1-shell[data-es-surface="project"] .es-v1-brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--es-brand-subtle);
  color: var(--es-brand-primary);
  flex-shrink: 0;
}
.es-v1-shell[data-es-surface="project"] .es-v1-brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--es-text-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--es-text-primary);
  font: 600 14px/1 var(--es-font-sans);
  cursor: pointer;
}
.es-v1-shell[data-es-surface="project"] .es-v1-project-btn:hover {
  background: var(--es-interaction-hover);
}
.es-v1-shell[data-es-surface="project"] .es-v1-project-chev {
  color: var(--es-text-muted);
}
/* Make desktop Header has no Saved chip — keep in DOM for a11y status, hide visually on guided */
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-saved-chip {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.es-v1-shell[data-es-surface="project"] .es-v1-saved-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--es-font-sans);
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-agent-chip--make-bell {
  position: relative;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--es-text-secondary);
  display: grid;
  place-items: center;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-agent-chip--make-bell:hover {
  background: var(--es-background-elevated);
  color: var(--es-text-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-saved-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--es-status-success);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16);
}
.es-v1-shell[data-es-surface="project"] .es-v1-exp-switch--make {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--es-border-default);
  border-radius: 999px;
  background: var(--es-background-surface);
}
.es-v1-shell[data-es-surface="project"] .es-v1-exp-switch--make .es-v1-exp-opt {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 28px;
  background: transparent;
  color: var(--es-text-secondary);
  font: 600 12.5px/1 var(--es-font-sans);
  cursor: pointer;
  text-transform: capitalize;
}
.es-v1-shell[data-es-surface="project"] .es-v1-exp-switch--make .es-v1-exp-opt.is-active {
  background: var(--es-brand-primary);
  color: #0a0e14;
}
.es-v1-shell[data-es-surface="project"] .es-v1-header-spacer {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
}
.es-v1-shell[data-es-surface="project"] .es-v1-command-pill--make {
  flex: 1 1 auto;
  max-width: 28rem;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--es-border-default);
  background: var(--es-background-surface);
  color: var(--es-text-muted);
  font: 400 13.5px/1 var(--es-font-sans);
}
.es-v1-shell[data-es-surface="project"] .es-v1-command-pill--make .es-v1-command-label {
  flex: 1;
  text-align: left;
  color: var(--es-text-muted);
}
.es-v1-shell[data-es-surface="project"] .es-v1-command-keys {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.es-v1-shell[data-es-surface="project"] .es-v1-command-keys kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--es-border-strong);
  border-radius: 6px;
  font: 500 11px/1 var(--es-font-sans);
  color: var(--es-text-muted);
}
.es-v1-shell[data-es-surface="project"] .es-v1-credits-chip {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-pill);
  background: var(--es-background-surface);
  color: var(--es-text-primary);
  font: 600 13px/1 var(--es-font-sans);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-credits-spark {
  color: var(--es-brand-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-credits-chev {
  color: var(--es-text-muted);
}
.es-v1-shell[data-es-surface="project"] .es-v1-rail[data-es-rail="workspace"] {
  width: 248px;
  padding: 16px 12px;
  gap: 6px;
  justify-content: space-between;
}
.es-v1-shell[data-es-surface="project"] .es-v1-rail[data-es-rail="workspace"][data-es-rail-collapsed="1"] {
  width: 68px;
  padding: 16px 8px;
  align-items: center;
}
.es-v1-shell[data-es-surface="project"] .es-v1-rail-collapse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--es-text-muted);
  font: 500 13px/1 var(--es-font-sans);
  cursor: pointer;
}
.es-v1-shell[data-es-surface="project"] .es-v1-rail-collapse:hover {
  background: var(--es-interaction-hover);
  color: var(--es-text-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-rail[data-es-rail="workspace"] .es-v1-intent {
  min-height: 52px;
  align-items: flex-start;
  padding: 10px 12px;
  gap: 12px;
  border-radius: 12px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-rail[data-es-rail="workspace"] .es-v1-intent.is-active {
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.3);
}
.es-v1-shell[data-es-surface="project"] .es-v1-rail[data-es-rail="workspace"] .es-v1-intent-glyph {
  flex: 0 0 18px;
  width: 18px;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1;
  color: var(--es-text-muted);
}
.es-v1-shell[data-es-surface="project"] .es-v1-rail[data-es-rail="workspace"] .es-v1-intent.is-active .es-v1-intent-glyph {
  color: var(--es-brand-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-rail[data-es-rail="workspace"] .es-v1-intent-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.es-v1-shell[data-es-surface="project"] .es-v1-rail[data-es-rail="workspace"] .es-v1-intent-label {
  display: block;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}
.es-v1-shell[data-es-surface="project"] .es-v1-rail[data-es-rail="workspace"] .es-v1-intent-kicker {
  display: block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--es-text-muted);
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-stage {
  gap: 0;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-context-panel {
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  width: auto;
  min-width: 92px;
  max-width: 472px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-right: none;
  background: var(--es-background-surface);
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-right-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 92px;
  width: 92px;
  padding: 16px 8px 12px;
  gap: 4px;
  border-right: 1px solid var(--es-border-default);
  border-left: 1px solid var(--es-border-default);
  background: var(--es-background-surface);
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-right-nav-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  width: 76px;
  padding-top: 12px;
  border-top: 1px solid var(--es-border-default);
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-right-nav-ctrl {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--es-text-muted);
  cursor: pointer;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-right-nav-ctrl:hover {
  background: var(--es-background-elevated);
  color: var(--es-text-primary);
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-intel-minimize {
  color: var(--es-text-muted);
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-right-nav-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 76px;
  min-height: 56px;
  padding: 10px 4px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--es-text-secondary);
  cursor: pointer;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-right-nav-btn.is-active {
  background: var(--es-interaction-selected);
  color: var(--es-brand-primary);
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-right-nav-glyph {
  font-size: 14px;
  line-height: 1;
  color: inherit;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-right-nav-label {
  font: 500 11px/1.15 var(--es-font-sans);
  text-align: center;
  max-width: 72px;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-right-nav-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--es-brand-primary);
  color: var(--es-text-onBrand, #090d15);
  font: 700 10px/16px var(--es-font-sans);
  text-align: center;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-right-nav .es-v1-context-icon {
  margin-top: auto;
  width: 36px;
  height: 36px;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-context-column {
  display: flex;
  flex-direction: column;
  min-width: 300px;
  width: 380px;
  min-height: 0;
  background: var(--es-background-subtle, #10161f);
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-context-eyebrow {
  font: 600 12px/1 var(--es-font-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--es-text-muted);
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-context-head {
  flex-wrap: nowrap;
  padding: 16px 20px 8px;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-context-panel.is-compact {
  flex: 0 0 92px;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-context-panel.is-compact .es-v1-context-column,
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-context-panel.is-compact .es-v1-context-body {
  display: none;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"][data-es-intent="Publish"] .es-v1-context-panel {
  display: flex;
}
.es-v1-shell[data-es-surface="project"] .es-v1-project-floor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--es-border-default);
  background: var(--es-background-surface);
}
.es-v1-shell[data-es-surface="project"] .es-v1-project-floor [hidden],
.es-v1-shell[data-es-surface="project"] .es-v1-project-floor .es-v1-home-composer-wrap[hidden],
.es-v1-shell[data-es-surface="project"] .es-v1-project-floor .es-v1-home-composer[hidden] {
  display: none !important;
}
.es-v1-shell[data-es-surface="project"] .es-v1-floor-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
}
.es-v1-shell[data-es-surface="project"] .es-v1-floor-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--es-border-default);
  border-radius: 12px;
  background: var(--es-background-surface);
}
.es-v1-shell[data-es-surface="project"] .es-v1-floor-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--es-text-secondary);
  font: 600 13px/1 var(--es-font-sans);
  cursor: pointer;
}
.es-v1-shell[data-es-surface="project"] .es-v1-floor-tab.is-active {
  background: var(--es-interaction-selected);
  color: var(--es-brand-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-floor-tab-glyph {
  font-size: 12px;
  opacity: 0.85;
}
.es-v1-shell[data-es-surface="project"] .es-v1-floor-tab--split {
  margin-left: 0;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--es-border-default);
  border-radius: 8px;
  opacity: 1;
  font-size: 12.5px;
  font-weight: 500;
}
.es-v1-shell[data-es-surface="project"] .es-v1-floor-tab--split.is-active {
  border-color: rgba(34, 211, 238, 0.4);
  background: var(--es-interaction-selected);
  color: var(--es-brand-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-project-floor .es-v1-home-composer {
  min-height: 52px;
  height: auto;
  padding: 6px 8px 6px 12px;
  border-radius: 16px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-project-floor .es-v1-home-composer-input {
  min-height: 28px;
  max-height: 72px;
  height: auto;
  font-size: 13px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-project-floor .es-v1-composer-project {
  display: none;
}
.es-v1-shell[data-es-surface="project"] .es-v1-home-composer-send--project {
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 2px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-head-glyph {
  color: var(--es-status-warning);
  font-size: 16px;
  line-height: 1;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide .es-v1-activity-title {
  font-size: 19px;
  font-weight: 700;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide > .es-v1-activity-phase {
  font-size: 13px;
  margin-bottom: 12px;
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--es-border-default);
  border-radius: 16px;
  background: rgba(18, 26, 41, 0.6);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--es-interaction-selected);
  color: var(--es-brand-primary);
  font-size: 15px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card .es-v1-guide-label {
  font: 600 13px/1.3 var(--es-font-sans);
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card-desc {
  font: 400 11px/1.35 var(--es-font-sans);
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card-go {
  color: var(--es-text-muted);
  font-size: 16px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-item {
  border-bottom: none;
  padding: 0 0 8px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card-go {
  transition: transform 160ms ease;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-item.is-open .es-v1-guide-card-go {
  transform: rotate(90deg);
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-item .es-v1-guide-actions {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 12px;
  border: 1px solid var(--es-border-default);
  border-top: none;
  border-radius: 0 0 16px 16px;
  background: rgba(18, 26, 41, 0.6);
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-item.is-open .es-v1-guide-actions {
  display: flex;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-item.is-open .es-v1-guide-card {
  border-radius: 16px 16px 0 0;
}
@media (max-width: 820px) {
  .es-v1-shell[data-es-surface="project"] .es-v1-rail[data-es-rail="workspace"] {
    width: 68px;
    padding: 12px 8px;
  }
  .es-v1-shell[data-es-surface="project"] .es-v1-rail[data-es-rail="workspace"] .es-v1-intent-stack,
  .es-v1-shell[data-es-surface="project"] .es-v1-rail-collapse-label {
    display: none;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-context-column {
    width: 300px;
    min-width: 260px;
  }
}
@media (max-width: 1280px) {
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-context-panel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    box-shadow: none;
  }
}
.es-v1-shell[data-es-surface="project"] .es-v1-queue-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--es-border-subtle);
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-label,
.es-v1-shell[data-es-surface="project"] .es-v1-queue-label {
  text-align: left;
  border: none;
  background: transparent;
  color: var(--es-text-primary);
  font: 500 13px/1.35 var(--es-font-sans);
  cursor: pointer;
  padding: 0;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-mini {
  height: auto;
  padding: 6px 14px;
  border: 1px solid var(--es-border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--es-text-primary);
  font: 500 12.5px/1 var(--es-font-sans);
  cursor: pointer;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-mini.is-primary {
  background: var(--es-brand-primary);
  border-color: var(--es-brand-primary);
  color: #0a0e14;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-mini.is-done {
  background: rgba(52, 211, 153, 0.15);
  border-color: transparent;
  color: #6ee7b7;
}
.es-v1-shell[data-es-surface="project"] .es-v1-queue-status {
  font-size: 11px;
  color: var(--es-text-muted);
}
.es-v1-shell[data-es-surface="project"] .es-v1-build-chat-thread {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-build-chat-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-build-chat-ta {
  width: 100%;
  min-height: 52px;
  resize: vertical;
  border: 1px solid var(--es-border-default);
  border-radius: var(--es-radius-control);
  background: var(--es-background-surface);
  color: var(--es-text-primary);
  font: 400 13px/1.4 var(--es-font-sans);
  padding: 8px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-split-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] #esV1ComposerHost:not(.is-open) {
  display: none;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .fbw-studio-composer,
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .expr-conversation-rail,
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] #esV1Contextual .es-v1-recs {
  display: none;
}
.es-v1-shell[data-es-surface="project"] .es-v1-ico,
.es-v1-shell[data-es-surface="project"] .es-v1-intent-glyph,
.es-v1-shell[data-es-surface="project"] .es-v1-right-nav-glyph,
.es-v1-shell[data-es-surface="project"] .es-v1-floor-tab-glyph,
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card-glyph,
.es-v1-shell[data-es-surface="project"] .es-v1-guide-head-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.es-v1-shell[data-es-surface="project"] .es-v1-ico svg,
.es-v1-shell[data-es-surface="project"] .es-v1-intent-glyph svg,
.es-v1-shell[data-es-surface="project"] .es-v1-right-nav-glyph svg,
.es-v1-shell[data-es-surface="project"] .es-v1-floor-tab-glyph svg,
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card-glyph svg,
.es-v1-shell[data-es-surface="project"] .es-v1-guide-head-glyph svg,
.es-v1-shell[data-es-surface="project"] .es-v1-continue-arrow svg {
  display: block;
}
.es-v1-shell[data-es-surface="project"] .es-v1-home-canvas--create-hero {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.es-v1-shell[data-es-surface="project"] .es-v1-create-hero {
  display: grid;
  grid-template-columns: minmax(200px, 0.38fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 0;
  height: 100%;
  padding: 8px 8px 8px 20px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-create-vision-kicker {
  margin: 0 0 10px;
  letter-spacing: 0.2em;
  font: 600 11px/1 var(--es-font-sans);
  color: var(--es-text-muted);
}
.es-v1-shell[data-es-surface="project"] .es-v1-create-vision-title {
  margin: 0 0 12px;
  font-size: clamp(2rem, 3.6vw, 3.15rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--es-text-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-create-vision-impact {
  font-style: italic;
  font-weight: 650;
  color: var(--es-brand-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-create-vision-body {
  margin: 0;
  max-width: 16rem;
  font: 400 14px/1.45 var(--es-font-sans);
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-create-hero-stage {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card-glyph.is-info {
  background: rgba(56, 189, 248, 0.16);
  color: var(--es-status-info);
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card-glyph.is-success {
  background: rgba(52, 211, 153, 0.16);
  color: var(--es-status-success);
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card-glyph.is-warning {
  background: rgba(251, 191, 36, 0.16);
  color: var(--es-status-warning);
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-card-glyph.is-brand {
  background: var(--es-brand-subtle);
  color: var(--es-brand-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-project-floor {
  border-top: 1px solid var(--es-border-default);
  border-radius: 0;
  padding: 14px 20px;
  background: var(--es-background-surface);
}
.es-v1-shell[data-es-surface="project"] .es-v1-project-floor .es-v1-home-composer {
  border: 1px solid var(--es-border-default);
  background: var(--es-background-surface);
  box-shadow: none;
}
.es-v1-shell[data-es-surface="project"] .es-v1-project-floor .es-v1-home-composer-wrap {
  border: none;
  background: transparent;
  box-shadow: none;
}
.es-v1-shell[data-es-surface="project"] .es-v1-home-composer-ico-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-home-composer-send--project {
  gap: 6px;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-device-family {
  border-radius: 999px;
  height: 28px;
  padding: 0 12px;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-right-nav-btn.is-active {
  color: var(--es-brand-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-guide-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--es-brand-primary);
  font: 500 13px/1.3 var(--es-font-sans);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-status-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font: 600 11.5px/1 var(--es-font-sans);
  white-space: nowrap;
  background: var(--es-background-elevated);
  color: var(--es-text-secondary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-status-chip.is-ok { background: rgba(52, 211, 153, 0.12); color: var(--es-status-success); }
.es-v1-shell[data-es-surface="project"] .es-v1-status-chip.is-warn { background: rgba(251, 191, 36, 0.12); color: var(--es-status-warning); }
.es-v1-shell[data-es-surface="project"] .es-v1-status-chip.is-err { background: rgba(248, 113, 113, 0.12); color: var(--es-status-error); }
.es-v1-shell[data-es-surface="project"] .es-v1-status-chip.is-info { background: rgba(56, 189, 248, 0.12); color: var(--es-status-info); }
.es-v1-shell[data-es-surface="project"] .es-v1-status-chip.is-working { background: var(--es-interaction-selected); color: var(--es-brand-primary); }
.es-v1-shell[data-es-surface="project"] .es-v1-queue-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--es-border-default);
  border-radius: 12px;
  background: rgba(18, 26, 41, 0.6);
  margin-bottom: 10px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-queue-card .es-v1-guide-actions {
  grid-column: 1 / -1;
  display: flex;
}
.es-v1-shell[data-es-surface="project"] .es-v1-queue-check {
  margin-top: 3px;
  accent-color: var(--es-brand-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-queue-index {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 6px;
  background: var(--es-background-base);
  color: var(--es-text-muted);
  font: 600 12px/1 var(--es-font-sans);
}
.es-v1-shell[data-es-surface="project"] .es-v1-queue-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.es-v1-shell[data-es-surface="project"] .es-v1-queue-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.es-v1-shell[data-es-surface="project"] .es-v1-queue-title-row .es-v1-queue-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.es-v1-shell[data-es-surface="project"] .es-v1-queue-meta {
  font: 400 11px/1.35 var(--es-font-mono, ui-monospace, monospace);
  color: var(--es-text-muted);
}
.es-v1-shell[data-es-surface="project"] .es-v1-queue-batch {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-agent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--es-border-default);
  border-radius: 12px;
  background: rgba(18, 26, 41, 0.6);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.es-v1-shell[data-es-surface="project"] .es-v1-agent-card-glyph {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--es-interaction-selected);
  color: var(--es-brand-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-agent-card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.es-v1-shell[data-es-surface="project"] .es-v1-agent-card-name {
  font: 600 13px/1.3 var(--es-font-sans);
}
.es-v1-shell[data-es-surface="project"] .es-v1-agent-card-task {
  font: 400 12.5px/1.35 var(--es-font-sans);
  color: var(--es-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.es-v1-shell[data-es-surface="project"] .es-v1-agent-add {
  width: 100%;
  justify-content: center;
  border-style: dashed;
}
.es-v1-shell[data-es-surface="project"] .es-v1-intel-reopen {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  width: 48px;
  margin: 0;
  padding: 12px 6px;
  border: none;
  border-left: 1px solid var(--es-border-default);
  border-radius: 0;
  background: var(--es-background-surface);
  color: var(--es-text-muted);
  cursor: pointer;
}
.es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-intel-reopen {
  display: flex;
}
.es-v1-shell[data-es-surface="project"] .es-v1-intel-reopen:hover {
  color: var(--es-brand-primary);
  border-color: rgba(34, 211, 238, 0.4);
}
.es-v1-shell[data-es-surface="project"] .es-v1-intel-reopen-label {
  font: 600 11px/1 var(--es-font-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  color: var(--es-text-secondary);
}
/* Make mobile chrome — hidden on desktop, shown ≤1024 for guided project only */
.es-v1-shell[data-es-surface="project"] .es-v1-mobile-menu-btn,
.es-v1-shell[data-es-surface="project"] .es-v1-mobile-intent-strip,
.es-v1-shell[data-es-surface="project"] .es-v1-mobile-intel-trigger,
.es-v1-shell[data-es-surface="project"] .es-v1-mobile-chrome {
  display: none;
}
@media (max-width: 1024px) {
  /* Make MobileWorkspace header: hamburger · mark · centered title · mode · credits · avatar */
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    min-height: 44px;
    padding: max(env(safe-area-inset-top), 12px) 12px 10px;
    flex-wrap: nowrap;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-menu-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--es-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    z-index: 2;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-identity {
    gap: 6px;
    flex: 0 0 auto;
    z-index: 2;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-brand--link,
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-saved-chip,
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-command-pill,
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-agent-chip,
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-full-canvas-btn {
    display: none !important;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-project-btn {
    position: absolute;
    left: 50%;
    top: calc(max(env(safe-area-inset-top), 12px) + 22px);
    transform: translate(-50%, -50%);
    max-width: 36%;
    margin: 0;
    padding: 4px 8px;
    pointer-events: auto;
    z-index: 1;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-project-btn .es-v1-project {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font: 600 15px/1.2 var(--es-font-sans);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-project-chev {
    display: none;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-exp-switch--make {
    margin-left: auto;
    flex-shrink: 0;
    z-index: 2;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-exp-switch--make .es-v1-exp-opt {
    padding: 4px 10px;
    min-height: 24px;
    font-size: 11.5px;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-credits-chip {
    height: 28px;
    padding: 0 10px;
    gap: 4px;
    flex-shrink: 0;
    z-index: 2;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-credits-chev {
    display: none;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-credits-label {
    font-size: 12px;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-account-btn,
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    z-index: 2;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-rail[data-es-rail="workspace"] {
    display: none;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-context-panel {
    display: none !important;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-intel-reopen {
    display: none !important;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intent-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--es-border-default);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intent-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 58%;
    padding: 6px 12px;
    border: none;
    border-radius: 10px;
    background: var(--es-interaction-selected);
    color: var(--es-brand-primary);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.3);
    font: 600 13px/1 var(--es-font-sans);
    cursor: pointer;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-device-cats {
    display: inline-flex;
    margin-left: auto;
    overflow: hidden;
    border: 1px solid var(--es-border-default);
    border-radius: 10px;
    background: var(--es-background-surface);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-device-cat {
    min-width: 32px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: var(--es-text-muted);
    font: 500 12px/1 var(--es-font-sans);
    cursor: pointer;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-device-cat.is-active {
    background: var(--es-interaction-selected);
    color: var(--es-brand-primary);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intel-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-top: 1px solid var(--es-border-default);
    background: var(--es-background-surface);
    color: var(--es-text-primary);
    text-align: left;
    cursor: pointer;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intel-label {
    font: 600 13px/1 var(--es-font-sans);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intel-hint {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 12px/1 var(--es-font-sans);
    color: var(--es-text-secondary);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intel-chev {
    margin-left: auto;
    color: var(--es-text-muted);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-chrome {
    display: block;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-scrim {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intent-drawer {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min(82%, 20rem);
    padding: max(env(safe-area-inset-top), 44px) 12px 16px;
    border-right: 1px solid var(--es-border-default);
    background: var(--es-background-subtle, #10161f);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-drawer-kicker {
    margin: 0 8px 8px;
    font: 600 11px/1 var(--es-font-sans);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--es-text-muted);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intent-row .es-v1-intent-label {
    display: block;
    font: 600 14px/1.2 var(--es-font-sans);
    color: var(--es-text-primary);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intent-row .es-v1-intent-kicker {
    display: block;
    margin-top: 2px;
    font: 400 12px/1.3 var(--es-font-sans);
    color: var(--es-text-muted);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intent-row.is-active {
    background: var(--es-interaction-selected);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.3);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-intel-sheet {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    border-top: 1px solid var(--es-border-default);
    border-radius: 24px 24px 0 0;
    background: var(--es-background-subtle, #10161f);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-sheet-handle {
    width: 40px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 99px;
    background: var(--es-border-strong);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-lens-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex-shrink: 0;
    padding: 12px;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-lens-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: var(--es-background-elevated);
    color: var(--es-text-secondary);
    font: 500 12.5px/1 var(--es-font-sans);
    cursor: pointer;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-lens-tab.is-active {
    background: var(--es-interaction-selected);
    color: var(--es-brand-primary);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-mobile-sheet-body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 0 16px max(env(safe-area-inset-bottom), 24px);
  }
  /* Make mobile floor: Chat|Terminal only (Split is desktop) */
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-floor-tab--split {
    display: none !important;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-project-floor {
    padding: 10px 12px max(env(safe-area-inset-bottom), 10px);
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-floor-tabs {
    justify-content: center;
    margin-bottom: 8px;
  }
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-project-floor .es-v1-home-composer-input,
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-project-floor textarea,
  .es-v1-shell[data-es-surface="project"][data-es-experience="guided"] .es-v1-project-floor [data-es-composer-input] {
    font-size: 14px;
  }
}
@media (max-width: 820px) {
  .es-v1-shell[data-es-surface="project"] .es-v1-create-hero {
    grid-template-columns: 1fr;
  }
  .es-v1-shell[data-es-surface="project"] .es-v1-create-vision {
    display: none;
  }
}

/* Make Guided canvas — PreviewToolbar + DeviceFrame (expressstudioshell App.tsx) */
.es-v1-shell[data-es-surface="project"] .es-v1-make-guided-canvas {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  position: relative;
}
.es-v1-shell[data-es-surface="project"] .es-v1-make-guided-canvas .es-v1-device-lab-host {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  height: 100%;
}
.es-v1-shell[data-es-surface="project"] .es-v1-make-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  min-height: 56px;
  padding: 0 20px;
  border-bottom: none;
  background: transparent;
  flex-wrap: nowrap;
}
.es-v1-shell[data-es-surface="project"] .es-v1-make-device-cats {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--es-border-default);
  border-radius: 12px;
  background: var(--es-background-surface);
}
.es-v1-shell[data-es-surface="project"] .es-v1-make-device-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--es-text-secondary);
  font: 500 13px/1.2 var(--es-font-sans);
  cursor: pointer;
}
.es-v1-shell[data-es-surface="project"] .es-v1-make-device-cat.is-active {
  background: rgba(34, 211, 238, 0.15);
  color: var(--es-brand-primary);
}
.es-v1-shell[data-es-surface="project"] .es-v1-make-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.es-v1-shell[data-es-surface="project"] .es-v1-make-fit-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--es-border-default);
  border-radius: 8px;
  background: var(--es-background-surface);
  color: var(--es-text-secondary);
  cursor: pointer;
}
.es-v1-shell[data-es-surface="project"] .es-v1-make-guided-canvas .es-v1-device-lab,
.es-v1-shell[data-es-surface="project"] .es-v1-make-guided-canvas .es-v1-device-floor {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.es-v1-shell[data-es-surface="project"] .es-v1-make-guided-canvas .es-v1-device-floor::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(34, 211, 238, 0.06), transparent 60%),
    radial-gradient(900px 500px at 120% 120%, rgba(120, 80, 220, 0.08), transparent 55%);
}
.es-v1-shell[data-es-surface="project"] .es-v1-make-guided-canvas .es-v1-create-hero,
.es-v1-shell[data-es-surface="project"] .es-v1-make-guided-canvas .es-v1-create-vision {
  display: none !important;
}
/* ============================================================
   Guest landing — floating glass plan dock (under Composer)
   ============================================================ */
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-dock {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 920px;
  margin: 22px auto 0;
  padding: 0 4px 8px;
  pointer-events: auto;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-dock--hidden {
  display: none !important;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-track {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-card {
  flex: 1 1 148px;
  max-width: 176px;
  min-width: 136px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 180, 220, 0.18);
  background: linear-gradient(165deg, rgba(18, 28, 42, 0.72), rgba(10, 16, 26, 0.55));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--es-text-primary, #e8edf3);
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    max-width 180ms ease,
    flex-basis 180ms ease;
  outline: none;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-card.is-featured {
  border-color: rgba(34, 211, 238, 0.28);
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-card:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(34, 211, 238, 0.36);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(34, 211, 238, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-card:focus-visible {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.28);
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-card.is-focused {
  flex: 1 1 220px;
  max-width: 260px;
  z-index: 2;
  transform: translateY(-4px) scale(1.04);
  border-color: rgba(34, 211, 238, 0.48);
  background: linear-gradient(165deg, rgba(22, 36, 54, 0.88), rgba(12, 20, 32, 0.78));
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(34, 211, 238, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-dock[data-es-plan-selected]:not([data-es-plan-selected=""]) .es-landing-plan-card:not(.is-focused) {
  opacity: 0.72;
  transform: scale(0.98);
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-name {
  margin: 0 0 6px;
  font: 650 14px/1.2 var(--es-font-sans, system-ui, sans-serif);
  letter-spacing: -0.01em;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-price-n {
  font: 700 20px/1 var(--es-font-sans, system-ui, sans-serif);
  letter-spacing: -0.02em;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-price-period {
  font: 500 12px/1 var(--es-font-sans, system-ui, sans-serif);
  color: var(--es-text-secondary, #8b97a7);
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-audience {
  margin: 0 0 6px;
  font: 400 11.5px/1.35 var(--es-font-sans, system-ui, sans-serif);
  color: var(--es-text-secondary, #8b97a7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-card.is-focused .es-landing-plan-audience {
  -webkit-line-clamp: 4;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-credits {
  margin: 0;
  font: 550 11.5px/1.3 var(--es-font-sans, system-ui, sans-serif);
  color: rgba(34, 211, 238, 0.92);
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 180, 220, 0.14);
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-feats {
  margin: 0;
  padding: 0 0 0 14px;
  font: 400 12px/1.4 var(--es-font-sans, system-ui, sans-serif);
  color: var(--es-text-secondary, #8b97a7);
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-feats li + li {
  margin-top: 4px;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-cta {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 999px;
  background: #22d3ee;
  color: #061018;
  font: 650 13px/1.2 var(--es-font-sans, system-ui, sans-serif);
  cursor: pointer;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-cta:hover {
  filter: brightness(1.06);
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-compare {
  display: block;
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--es-text-secondary, #8b97a7);
  font: 500 12.5px/1.3 var(--es-font-sans, system-ui, sans-serif);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.es-v1-shell[data-es-surface="landing"] .es-landing-plan-compare:hover {
  color: var(--es-text-primary, #e8edf3);
}

@media (max-width: 1024px) {
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-track {
    gap: 10px;
  }
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-card {
    flex-basis: calc(50% - 10px);
    max-width: none;
  }
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-card.is-focused {
    flex-basis: 100%;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-dock {
    margin-top: 18px;
    max-width: none;
    padding: 0;
  }
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-track {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
    padding: 4px 16px 8px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-track::-webkit-scrollbar {
    display: none;
  }
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-card {
    flex: 0 0 min(78vw, 280px);
    max-width: min(78vw, 280px);
    scroll-snap-align: center;
  }
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-card.is-focused {
    flex: 0 0 min(86vw, 320px);
    max-width: min(86vw, 320px);
    transform: translateY(-2px) scale(1.02);
  }
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-compare {
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-card,
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-card:hover,
  .es-v1-shell[data-es-surface="landing"] .es-landing-plan-card.is-focused {
    transition: none;
    transform: none;
  }
}