.onboarding-dialog {
  width: min(1320px, calc(100vw - 40px)); height: min(940px, calc(100dvh - 40px));
  max-width: calc(100vw - 40px); max-height: calc(100dvh - 40px); box-sizing: border-box;
  margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 24px;
  color: var(--text); background: var(--composer-card-solid); box-shadow: 0 32px 110px rgba(0, 0, 0, .25);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.onboarding-dialog[open] { display: flex; flex-direction: column; }
.onboarding-dialog .onboarding-steps[hidden] { display: none; }
.onboarding-browser-collection { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); }
.onboarding-browser-collection h3 { margin: 0 0 8px; font-size: 14px; }
.onboarding-browser-collected .onboarding-asset-card { max-width: 110px; margin-inline: auto; }
.onboarding-dialog::backdrop { background: rgba(17, 22, 31, .4); backdrop-filter: blur(12px); }
.onboarding-dialog *, .onboarding-empty-gallery *, .onboarding-empty-copy * { box-sizing: border-box; }
.onboarding-dialog [hidden] { display: none !important; }
.onboarding-header { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; padding: 23px 30px 16px; }
.onboarding-header > img, .onboarding-header > div > img { display: block; width: 132px; height: auto; max-height: 30px; }
:root:not([data-theme="light"]) .onboarding-header img { filter: brightness(0) invert(1); }
.onboarding-eyebrow { color: var(--muted); font-size: 11px; font-weight: 550; }
.onboarding-header #onboardingProgress { margin-inline-start: auto; }
.onboarding-steps { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin: 0 28px 14px; padding: 0; list-style: none; counter-reset: onboarding-step; }
.onboarding-steps li { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 32px; padding: 5px 7px; border-radius: 9px; color: var(--muted); font-size: 11px; line-height: 1.3; font-weight: 550; overflow-wrap: anywhere; }
.onboarding-steps li::before { counter-increment: onboarding-step; content: counter(onboarding-step); display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%; background: var(--surface-subtle); color: var(--muted); font-size: 10px; font-weight: 650; }
.onboarding-steps li[aria-current="step"] { color: var(--accent); background: var(--accent-faint); }
.onboarding-steps li[aria-current="step"]::before { background: var(--accent); color: var(--accent-ink); }
.onboarding-steps li.is-complete { color: var(--accent); }
.onboarding-scene { flex: 1 1 auto; min-height: 0; margin: 0 28px; padding: 18px; overflow: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-subtle); overscroll-behavior: contain; }
.onboarding-copy { flex: 1 1 0; min-width: 0; margin: 0; text-align: center; }
.onboarding-copy h2 { margin: 0; color: var(--text); font-size: 17px; line-height: 1.35; letter-spacing: -.025em; font-weight: 650; overflow-wrap: anywhere; }
.onboarding-copy p:first-child, .onboarding-copy h2[hidden] + p { margin-top: 0; }
.onboarding-copy p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.onboarding-footer { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; margin-top: 16px; padding: 18px 28px 22px; border-top: 1px solid var(--line); }
.onboarding-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: 48%; }
.onboarding-footer button { min-height: 40px; min-width: 72px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface-subtle); font: inherit; font-size: 12px; line-height: 1.4; font-weight: 600; cursor: pointer; }
#onboardingNext { display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: background 180ms ease, opacity 180ms ease; border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.onboarding-next-spinner { width: 14px; height: 14px; flex: 0 0 14px; border: 1.7px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: onboarding-next-spin .85s linear infinite; opacity: .85; }
.onboarding-next-spinner[hidden] { display: none; }
@keyframes onboarding-next-spin { to { transform: rotate(360deg); } }
.onboarding-footer button:disabled { opacity: .4; cursor: default; }
#onboardingPrevious:disabled { visibility: hidden; }
#onboardingProgress, .onboarding-footer [role="status"] { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.onboarding-status:not(:empty) { display: block; margin-top: 7px; color: var(--danger, #c43c3c); }
@media (max-width: 900px) {
  .onboarding-footer { flex-wrap: wrap; gap: 15px; }
  .onboarding-copy { flex-basis: 100%; }
  .onboarding-actions { flex: 1 1 100%; max-width: none; }
  #onboardingPrevious { margin-inline-end: auto; }
}
.onboarding-dialog :is(button, input, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.onboarding-dialog svg { display: block; width: 19px; height: 19px; flex: 0 0 19px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.onboarding-lab { display: flex; flex-direction: column; gap: 15px; min-height: 100%; min-width: 0; }
.onboarding-demo-bar { display: flex; align-items: center; gap: 13px; min-height: 38px; min-width: 0; }
.onboarding-demo-cue { flex: 1; min-width: 0; margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.onboarding-control { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 12px; margin: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--composer-card-solid); color: var(--text); font: inherit; font-size: 12px; line-height: 1.35; font-weight: 550; cursor: pointer; }
.onboarding-control:hover:not(:disabled) { border-color: var(--accent-line); background: var(--accent-faint); }
.onboarding-control:disabled { opacity: .38; cursor: default; }
.onboarding-practice-surface { flex: 1 1 auto; min-height: 390px; min-width: 0; }
.onboarding-subtle { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 0; }
.onboarding-mini-panel { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--composer-card-solid); }
.onboarding-mini-panel h3 { margin: 0 0 12px; font-size: 13px; line-height: 1.4; font-weight: 650; }
.onboarding-combine-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1.1fr) minmax(0, 1fr); gap: 15px; align-items: stretch; }
.onboarding-asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; }
.onboarding-asset-card { display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-subtle); color: var(--text); font: inherit; text-align: start; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.onboarding-asset-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.onboarding-asset-card span { display: block; width: 100%; padding: 7px; font-size: 10px; line-height: 1.4; font-weight: 550; overflow-wrap: anywhere; }
.onboarding-asset-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-faint); }
.onboarding-asset-card.is-pointer-dragging { opacity: .4; }
.onboarding-slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.onboarding-slot-cell { position: relative; min-width: 0; }
.onboarding-reference-remove { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; display: grid; place-items: center; width: 22px; height: 22px; padding: 4px; border: 0; border-radius: 50%; color: var(--muted); background: var(--composer-card-solid); cursor: pointer; }
.onboarding-dialog .onboarding-reference-remove svg { width: 12px; height: 12px; }
.onboarding-slot-cell:has(.has-reference) .onboarding-reference-slot { padding-inline-end: 25px; }
.onboarding-reference-slot { position: relative; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-content: center; align-items: center; column-gap: 8px; row-gap: 5px; width: 100%; min-width: 0; min-height: 81px; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 11px; background: var(--surface-subtle); color: var(--muted); font: inherit; text-align: start; cursor: pointer; }
.onboarding-reference-slot strong { min-width: 0; color: var(--text); font-size: 11px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.onboarding-reference-slot small { grid-column: 1 / -1; font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }
.onboarding-reference-slot img { grid-row: 1 / 3; width: 36px; height: 48px; border-radius: 5px; object-fit: contain; }
.onboarding-reference-slot.has-reference { grid-template-columns: 36px minmax(0, 1fr); border-style: solid; border-color: var(--accent-line); background: var(--accent-faint); }
.onboarding-reference-slot.has-reference small { grid-column: 2; color: var(--accent); }
.onboarding-reference-slot.is-drag-over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-faint); }
.onboarding-field { display: grid; gap: 7px; min-width: 0; width: 100%; color: var(--muted); font-size: 11px; line-height: 1.4; }
.onboarding-field > span { font-weight: 550; }
.onboarding-mini-panel > .onboarding-field { margin-top: 13px; }
.onboarding-field input, .onboarding-field textarea { display: block; width: 100%; min-width: 0; min-height: 38px; margin: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--composer-card-solid); color: var(--text); font: inherit; font-size: 13px; line-height: 1.6; caret-color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .03); }
.onboarding-field textarea { min-height: 104px; resize: vertical; max-height: 220px; }
.onboarding-field input::placeholder, .onboarding-field textarea::placeholder { color: var(--muted); opacity: .75; }
.onboarding-result { position: relative; display: flex; flex-direction: column; align-self: start; margin: 0; min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--composer-card-solid); box-shadow: 0 4px 15px rgba(0, 0, 0, .06); transition: opacity 260ms ease; }
.onboarding-result > img { display: block; width: 100%; max-height: 510px; aspect-ratio: 3 / 4; object-fit: contain; background: var(--surface-subtle); }
.onboarding-result figcaption { padding: 9px; text-align: center; font-size: 10px; color: var(--muted); }
.onboarding-result.is-pending > img { opacity: .2; filter: blur(6px); }
.onboarding-flexibility-hint { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; text-wrap: balance; }
.onboarding-prompt-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .85fr); align-items: start; gap: 28px; max-width: 880px; margin: auto; }
.onboarding-conversation { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 10px 0; }
.onboarding-prompt-reference { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.onboarding-prompt-reference img { width: 43px; height: 55px; border-radius: 8px; object-fit: contain; }
.onboarding-example { margin: 0; padding: 12px 14px; border: 0; border-inline-start: 2px solid var(--accent-line); background: var(--accent-faint); border-radius: 0 9px 9px 0; color: var(--text); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
[dir="rtl"] .onboarding-example { border-radius: 9px 0 0 9px; }
.onboarding-example small { color: var(--muted); font-size: 10px; }
.onboarding-example p { margin: 5px 0 0; }
.onboarding-conversation > .onboarding-control, .onboarding-draw-controls > [data-onboarding-apply] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.onboarding-applied-request { margin: 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.onboarding-applied-request:empty { display: none; }
.onboarding-draw-layout { display: grid; grid-template-columns: minmax(200px, .7fr) minmax(0, 1fr); align-items: start; gap: 26px; max-width: 920px; margin: auto; }
.onboarding-draw-controls { display: flex; flex-direction: column; min-width: 0; gap: 13px; padding: 10px 0; }
.onboarding-draw-controls > .onboarding-control { align-self: start; }
.onboarding-segments { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--composer-card-solid); }
.onboarding-segments .onboarding-control { flex: 1 0 auto; width: auto; min-width: max-content; white-space: nowrap; border-color: transparent; background: transparent; padding: 7px 10px; min-height: 32px; box-shadow: none; }
.onboarding-segments .onboarding-control > span { flex-shrink: 0; overflow: visible; text-overflow: clip; }
.onboarding-segments .onboarding-control > svg { flex-shrink: 0; }
.onboarding-segments .onboarding-control[aria-pressed="true"], .onboarding-control[data-onboarding-edit-mode][aria-pressed="true"] { color: var(--accent); background: var(--accent-faint); border-color: var(--accent-line); }
.onboarding-draw-photo { position: relative; min-width: 0; width: min(100%, 360px); aspect-ratio: 3 / 4; margin: auto; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--composer-card-solid); box-shadow: 0 5px 22px rgba(0, 0, 0, .09); }
.onboarding-draw-photo > img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.onboarding-dialog .onboarding-selection-overlay { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; user-select: none; stroke-width: 3px; }
.onboarding-selection-overlay.is-disabled { pointer-events: none; opacity: 0; }
.onboarding-selection-fill { stroke: #007aff; stroke-width: 5; fill: rgba(0, 122, 255, .26); stroke-dasharray: 13 9; }
.onboarding-selection-brush { stroke: rgba(0, 122, 255, .46); stroke-width: 50; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.onboarding-keyboard-cursor { display: none; stroke: #fff; stroke-width: 5; fill: #007aff; }
.onboarding-selection-overlay:focus-visible .onboarding-keyboard-cursor { display: block; }
.onboarding-selection-status { margin: 0; min-height: 20px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.onboarding-browser-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(200px, .8fr); gap: 24px; align-items: start; max-width: 880px; margin: auto; }
.onboarding-tutorial-browser { min-width: 0; min-height: 320px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--composer-card-solid); }
.onboarding-browser-title { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; }
.onboarding-tutorial-browser > .onboarding-control { margin-bottom: 14px; }
.onboarding-browser-content { display: flex; flex-direction: column; gap: 12px; }
.onboarding-browser-content > .onboarding-asset-card { max-width: 210px; margin: auto; }
.onboarding-browser-address { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-subtle); color: var(--muted); font-size: 12px; }
.onboarding-browser-reference { align-self: center; }
.onboarding-browser-reference .onboarding-reference-slot { min-height: 180px; }
.onboarding-browser-reference .onboarding-reference-slot.has-reference { grid-template-columns: 90px minmax(0, 1fr); }
.onboarding-browser-reference .onboarding-reference-slot img { width: 90px; height: 120px; }
.onboarding-drag-ghost { position: fixed; z-index: 20; display: block; width: 78px; height: 104px; margin: 0; border: 2px solid rgba(255, 255, 255, .9); border-radius: 10px; object-fit: contain; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.onboarding-demo-ghost { transition: left .504s cubic-bezier(.22, .7, .22, 1), top .504s cubic-bezier(.22, .7, .22, 1); }
@media (max-width: 1000px) {
  .onboarding-combine-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); }
  .onboarding-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .onboarding-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; }
  .onboarding-header { padding: 15px 16px 12px; gap: 9px; }
  .onboarding-header > img, .onboarding-header > div > img { width: 110px; }
  .onboarding-eyebrow { display: none; }
  .onboarding-steps { gap: 2px; margin: 0 10px 10px; }
  .onboarding-steps li { flex-direction: column; gap: 4px; padding: 5px 2px; font-size: 9px; line-height: 1.2; }
  .onboarding-steps li::before { width: 19px; height: 19px; flex-basis: 19px; font-size: 9px; }
  .onboarding-scene { margin: 0 10px; padding: 11px; border-radius: 13px; }
  .onboarding-copy { padding: 0; }
  .onboarding-copy h2 { font-size: 16px; }
  .onboarding-copy p:first-child, .onboarding-copy h2[hidden] + p { margin-top: 0; }
.onboarding-copy p { font-size: 11px; line-height: 1.5; }
  .onboarding-footer { gap: 8px; padding: 12px 14px 14px; }
  .onboarding-footer button { min-width: 70px; font-size: 12px; padding: 9px 11px; }
  .onboarding-footer [role="status"] { font-size: 10px; }
  .onboarding-demo-bar { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .onboarding-demo-cue { grid-row: 2; grid-column: 1 / -1; font-size: 11px; }
  .onboarding-practice-surface { min-height: 310px; }
  .onboarding-combine-layout, .onboarding-prompt-layout, .onboarding-draw-layout, .onboarding-browser-layout { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .onboarding-mini-panel { padding: 12px; }
  .onboarding-asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .onboarding-result { width: min(285px, 100%); margin: auto; }
  .onboarding-draw-photo { width: min(290px, 100%); }
  .onboarding-field textarea { min-height: 84px; }
  .onboarding-draw-controls { gap: 11px; padding: 0; }
  .onboarding-browser-layout .onboarding-tutorial-browser { min-height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-dialog *, .onboarding-empty-gallery * { animation: none !important; transition: none !important; }
}
/* The same image-led entry point remains available after the first tour. */
#canvasSurface:has(> #canvasEmpty:not([hidden])) .preview-window-title,
html[data-onboarding-open="true"] .preview-window-title { visibility: hidden; }
#canvasEmpty:has(.onboarding-empty-gallery) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; width: 100%; max-width: min(700px, 100%); padding: 40px 24px; min-height: 0; }
#canvasEmpty[hidden] { display: none !important; }
.onboarding-empty-gallery { display: flex; align-items: center; justify-content: center; gap: 12px; width: min(540px, 94%); }
.onboarding-empty-gallery img { display: block; width: calc((100% - 24px) / 3); aspect-ratio: 3 / 4; min-width: 0; object-fit: contain; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 9px 22px rgba(0, 0, 0, .08); }
.onboarding-empty-gallery img:nth-child(2) { transform: translateY(-12px); }
.onboarding-empty-copy { max-width: 440px; text-align: center; color: var(--text); }
.onboarding-empty-copy strong { display: block; font-size: clamp(18px, 2vw, 25px); font-weight: 680; line-height: 1.3; letter-spacing: -.04em; }
.onboarding-empty-copy p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; text-wrap: balance; }
.onboarding-empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.onboarding-empty-actions button { min-height: 38px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--composer-card-solid); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.onboarding-empty-actions #onboardingReplay { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.onboarding-empty-actions button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Keep all three tutorial columns legible in a short desktop window. */
.onboarding-typography-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.onboarding-combine-references .onboarding-reference-slot { min-height: 70px; }
.onboarding-combine-result { justify-self: center; width: min(100%, max(220px, calc((100dvh - 370px) * .75))); }
.onboarding-combine-result > img { max-height: none; }
@media (max-width: 600px) { .onboarding-combine-result { width: min(285px, 100%); } }

.onboarding-text-color { align-self: start; }
.onboarding-text-color .background-color-trigger { min-height: 30px; padding: 4px 8px; }
.onboarding-text-color .background-color-caption { display: inline; font-size: 11px; font-variant-numeric: tabular-nums; }
.onboarding-typography-fields > .onboarding-field { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.onboarding-typography-fields > .onboarding-field > span { grid-column: 1; grid-row: 1; }
.onboarding-typography-fields > .onboarding-field > input { grid-column: 1 / -1; grid-row: 2; }
.onboarding-typography-fields .onboarding-text-color { grid-column: 2; grid-row: 1; }
@media (max-height: 800px) and (min-width: 1001px) {
  .onboarding-combine-references .onboarding-reference-slot { min-height: 58px; }
  .onboarding-combine-references .onboarding-slot-grid { gap: 6px; }
  .onboarding-combine-references .onboarding-field input { min-height: 32px; padding: 6px 9px; }
  .onboarding-combine-references .onboarding-typography-fields,
  .onboarding-combine-references > .onboarding-field { margin-top: 8px; }
}

/* Tutorial scenes share the app's controls while keeping all input local. */
.onboarding-prompt-workflow { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(240px, 1.5fr) minmax(130px, .65fr); align-items: start; gap: 20px; }
.onboarding-prompt-workflow .onboarding-reference-slot { margin-block: 10px; }
.onboarding-prompt-workflow .onboarding-asset-card { max-width: 130px; margin: 10px auto; }
.onboarding-prompt-workflow .onboarding-field textarea { min-height: 190px; }
.onboarding-prompt-workflow [data-onboarding-apply] { width: 100%; min-height: 44px; font-size: 15px; background: var(--accent); color: var(--accent-ink); }
.onboarding-control.is-demo-pressed { transform: scale(.96); filter: brightness(.8); box-shadow: 0 0 0 5px var(--accent-faint); }
.onboarding-control { transition: transform .2s ease, background .2s ease; }
.onboarding-draw-source { width: 84px; }
.onboarding-draw-source img { max-height: 92px; }
.onboarding-draw-photo.is-awaiting-image > img, .onboarding-draw-photo.is-awaiting-image > svg { visibility: hidden; }
.onboarding-draw-photo.is-awaiting-image::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 36px; }
.onboarding-draw-layout.is-edit-mode .onboarding-draw-photo { border: 2px solid var(--accent); box-shadow: 0 0 0 5px var(--accent-faint); }
.onboarding-selection-overlay.is-demo-drawing .onboarding-keyboard-cursor { display: block; }
.onboarding-browser-layout { grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr); max-width: 1050px; }
.onboarding-browser-controls { display: flex; align-items: center; gap: 5px; }
.onboarding-browser-controls .onboarding-control { padding: 6px; min-height: 30px; }
.onboarding-browser-controls .onboarding-control span { display: none; }
.onboarding-browser-controls .onboarding-browser-address { width: 100%; min-width: 0; font: inherit; font-size: 12px; }
.onboarding-browser-gallery { position: relative; height: 310px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-items: start; padding: 5px; overscroll-behavior: contain; }
.onboarding-browser-gallery > img { width: 100%; border-radius: 10px; height: 150px; object-fit: contain; }
.onboarding-browser-gallery > img:nth-child(3n + 2) { height: 180px; }
.onboarding-browser-gallery .onboarding-asset-card img { height: 160px; }
.onboarding-browser-reference .onboarding-reference-slot { min-height: 110px; }
@media (max-width: 700px) {
  .onboarding-prompt-workflow, .onboarding-browser-layout { grid-template-columns: minmax(0, 1fr); }
  .onboarding-prompt-workflow > .onboarding-mini-panel { display: flex; flex-wrap: wrap; gap: 8px; }
  .onboarding-prompt-workflow > .onboarding-mini-panel h3 { width: 100%; }
  .onboarding-prompt-workflow .onboarding-reference-slot { flex: 1; }
  .onboarding-prompt-workflow .onboarding-asset-card { width: 90px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .onboarding-control { transition: none; } }
.onboarding-prompt-workflow .onboarding-asset-card img { height: 130px; aspect-ratio: auto; object-fit: contain; }
.onboarding-prompt-workflow .onboarding-applied-request { font-size: 11px; color: var(--muted); }
@media (max-height: 800px) and (min-width: 701px) {
  .onboarding-draw-photo { width: 260px; }
  .onboarding-draw-controls { gap: 8px; }
  .onboarding-draw-controls .onboarding-field textarea { min-height: 72px; }
}
.onboarding-browser-title > .onboarding-control { margin-inline-start: auto; min-height: 30px; padding: 5px; }
.onboarding-browser-title > .onboarding-control span { display: none; }
@media (max-height: 800px) { .onboarding-browser-gallery { height: 220px; } .onboarding-browser-title { margin-bottom: 9px; } }

/* The tutorial keeps the real workspace's left / canvas / right geography. */
.onboarding-prompt-workflow { grid-template-columns:minmax(250px,1fr) minmax(220px,1.15fr) minmax(140px,.6fr); }
.onboarding-prompt-workflow > .onboarding-mini-panel:first-child { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
.onboarding-prompt-workflow > .onboarding-mini-panel:first-child > :is(h3,.onboarding-conversation) { grid-column:1/-1; }
.onboarding-conversation { display:grid; gap:12px; min-width:0; }
.onboarding-app-prompt { position:relative; display:grid; gap:8px; margin-top:12px; }
.onboarding-app-prompt .onboarding-input-label { color:var(--text); font-size:12px; font-weight:600; }
.onboarding-app-prompt .prompt-input-surface { min-width:0; padding:12px 12px 30px; border:1px solid var(--line-strong); border-radius:13px; background:var(--surface-raised); box-shadow:0 1px 3px #00000006; }
.onboarding-app-prompt .prompt-input-surface textarea { display:block; width:100%; min-height:76px; height:96px; margin:0; padding:0; border:0; background:transparent; resize:vertical; box-shadow:none; font:inherit; font-size:12px; line-height:1.7; color:var(--text); caret-color:var(--accent); }
.onboarding-app-prompt .prompt-input-surface:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-faint); }
.onboarding-prompt-count { position:absolute; bottom:10px; inset-inline-end:12px; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.onboarding-app-prompt:has(.is-demo-typing) .prompt-input-surface { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-faint); }
.onboarding-copy-options { margin:0; border-top:1px solid var(--line); padding:10px; background:var(--surface-raised); border-radius:0 0 12px 12px; }
.onboarding-copy-options > button { width:100%; justify-content:space-between; border:0; background:transparent; padding:4px 0; min-height:26px; font-size:11px; }
.onboarding-copy-options .onboarding-typography-fields { grid-template-columns:1fr; margin-top:10px; gap:12px; }
.onboarding-copy-options .onboarding-field { margin:0; gap:7px; }
.onboarding-copy-options .onboarding-field > input { font-size:12px; min-height:36px; border-radius:8px; }
.onboarding-copy-options .onboarding-input-label { font-size:11px; font-weight:550; }
.onboarding-copy-options .typography-copy-help { margin:0; font-size:10px; color:var(--muted); }
.onboarding-combine-references .onboarding-slot-cell:last-child { grid-column:1/-1; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.onboarding-combine-references .onboarding-slot-cell:last-child > .onboarding-reference-slot { border:0; border-radius:0; }
.onboarding-generate { width:100%; margin-top:12px; color:var(--accent-ink); border-color:transparent; background:var(--accent); }
.onboarding-generation-preview { position:relative; width:100%; min-height:300px; align-self:start; aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); border-radius:16px; background:var(--surface-raised); overflow:hidden; }
.onboarding-generation-preview img { display:block; width:100%; height:auto; max-height:none; object-fit:contain; }
.onboarding-generation-preview figcaption { padding:9px; font-size:10px; }
.onboarding-generation-preview:not([data-generation="complete"]) figcaption { visibility:hidden; }
.onboarding-generation-status { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px; font-size:12px; color:var(--muted); }
.onboarding-generation-preview[data-generation="generating"] { background:linear-gradient(120deg,var(--surface-raised),var(--accent-faint),var(--surface-raised)); background-size:200% 100%; animation:onboarding-generating 1.7s ease-in-out infinite alternate; }
@keyframes onboarding-generating { to { background-position:100% 0; } }
.onboarding-editor-center { min-width:0; display:flex; flex-direction:column; align-items:center; gap:24px; }
.onboarding-live-editor { grid-template-columns:minmax(240px,.8fr) minmax(0,1.4fr); }
.onboarding-live-editor .onboarding-draw-photo { width:min(420px,100%); }
.onboarding-live-editor .onboarding-edit-palette { position:static; display:flex; align-items:center; flex-wrap:nowrap; gap:3px; width:100%; max-width:420px; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--composer-card-solid); box-shadow:0 4px 14px #0000000f; overflow-x:auto; }
.onboarding-live-editor .onboarding-edit-palette button { display:inline-flex; align-items:center; justify-content:center; flex:0 0 34px; width:34px; height:34px; min-height:34px; padding:7px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); }
.onboarding-live-editor .onboarding-edit-palette button > span:not(:empty) { display:none; }
.onboarding-live-editor .onboarding-edit-palette button svg { width:18px; height:18px; flex-basis:18px; stroke-width:1.6; }
.onboarding-live-editor .onboarding-edit-palette button[aria-pressed="true"] { color:var(--accent); background:var(--accent-faint); border-color:var(--accent-line); }
.onboarding-live-editor .edit-brush-settings { display:flex; flex:1; align-items:center; gap:5px; min-width:160px; }
.onboarding-live-editor .edit-brush-settings input { width:65px; min-width:40px; accent-color:var(--accent); }
.onboarding-live-editor .edit-brush-presets { display:flex; }
.onboarding-live-editor .edit-brush-presets button { flex-basis:24px; width:24px; padding:0; }
.onboarding-live-editor .edit-brush-presets span { border-radius:50%; background:currentColor; }
.onboarding-live-editor .edit-brush-value { font-size:11px; color:var(--muted); }
.onboarding-live-editor .onboarding-selection-brush { stroke-width:var(--tutorial-brush-size,12px); stroke:#ff2fa0; }
.onboarding-draw-photo.is-generating { opacity:.55; animation:onboarding-generating 1s ease infinite alternate; }
.onboarding-browser-layout { grid-template-columns:minmax(150px,.65fr) minmax(180px,.85fr) minmax(280px,1.4fr); align-items:stretch; max-width:none; }
.onboarding-browser-library { min-width:0; align-self:stretch; }
.onboarding-browser-working .onboarding-result[hidden] { display:none; }
.onboarding-browser-reference { display:grid; align-self:stretch; align-content:start; gap:8px; }
.onboarding-browser-reference .onboarding-reference-slot { min-height:80px; }
.onboarding-browser-working { min-width:0; display:flex; flex-direction:column; gap:14px; }
.onboarding-browser-working .onboarding-result { width:100%; margin:0; flex:1; }
.onboarding-browser-working .onboarding-subtle { text-align:center; }
.onboarding-browser-gallery { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px; height:400px; background:transparent; border-radius:12px; }
.onboarding-pin-column { display:flex; flex-direction:column; gap:18px; min-width:0; }
.onboarding-browser-gallery .onboarding-pin { border:0; background:transparent; border-radius:0; color:var(--text); }
.onboarding-browser-gallery .onboarding-pin img { height:auto; width:100%; aspect-ratio:3/4; border-radius:12px; object-fit:contain; }
.onboarding-pin-column:nth-child(2) .onboarding-pin:first-child img { aspect-ratio:3/5; }
.onboarding-browser-gallery .onboarding-pin > span { font-size:11px; font-weight:650; padding:8px 3px 3px; }
.onboarding-browser-gallery .onboarding-pin > small { font-size:10px; line-height:1.5; color:#526987; padding:0 3px; }
@media(max-width:1000px) {
 .onboarding-combine-layout,.onboarding-prompt-workflow { grid-template-columns:minmax(220px,1fr) minmax(130px,.7fr) minmax(180px,1fr);gap:12px; }
 .onboarding-browser-layout { grid-template-columns:minmax(135px,.7fr) minmax(140px,.7fr) minmax(230px,1.2fr);gap:12px; }
 .onboarding-asset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
 .onboarding-combine-layout,.onboarding-prompt-workflow,.onboarding-browser-layout { min-width:670px; }
 .onboarding-live-editor { min-width:610px; }
 .onboarding-scene { overflow:auto; }
}
@media(prefers-reduced-motion:reduce) { .onboarding-generation-preview,.onboarding-draw-photo.is-generating { animation:none; } }
@media(max-width:900px) {
 .onboarding-browser-layout { min-width:0; grid-template-columns:minmax(0,1fr); gap:16px; }
 .onboarding-browser-working .onboarding-result { max-width:320px; margin-inline:auto; }
}
.onboarding-copy-options .onboarding-field { grid-template-columns:minmax(0,1fr) auto auto; }
.onboarding-copy-options .onboarding-field > textarea { grid-column:1/-1; grid-row:2; width:100%; min-height:36px; height:38px; padding:8px 10px; resize:vertical; font-size:12px; line-height:1.5; }
.onboarding-copy-options .onboarding-text-placement { grid-column:2; grid-row:1; }
.onboarding-copy-options .onboarding-text-color { grid-column:3; grid-row:1; }
.onboarding-copy-options .text-placement-trigger { padding:3px 5px; gap:3px; min-height:28px; }
.onboarding-copy-options .text-placement-caption { font-size:10px; }
.onboarding-copy-options .background-color-caption { display:none; }
.onboarding-combine-references .onboarding-slot-cell:last-child { grid-column:auto; }
.onboarding-copy-options .onboarding-field { grid-template-columns:1fr auto; }
.onboarding-copy-options .onboarding-input-label { grid-column:1/-1; grid-row:1; }
.onboarding-copy-options .onboarding-text-placement { grid-column:1; grid-row:2; }
.onboarding-copy-options .onboarding-text-color { grid-column:2; grid-row:2; }
.onboarding-copy-options .onboarding-field > textarea { grid-column:1/-1; grid-row:3; }
.onboarding-copy-options .onboarding-typography-fields { gap:8px; }
.onboarding-copy-options .onboarding-field > textarea { min-height:32px; height:32px; padding:5px 7px; }
.onboarding-combine-references .onboarding-app-prompt textarea { min-height:38px; height:44px; }
.onboarding-combine-references .onboarding-reference-slot { min-height:58px; }
.onboarding-combine-references .onboarding-slot-grid { gap:6px; }
.onboarding-combine-result { width:100%; }
.onboarding-draw-layout,.onboarding-live-editor { max-width:none; grid-template-columns:minmax(200px,.8fr) minmax(180px,.65fr) minmax(260px,1.3fr); }
.onboarding-draw-library .onboarding-draw-source { width:100%; }
.onboarding-draw-library .onboarding-draw-source img { max-height:none; }
.onboarding-canvas-heading { margin:0; font-size:12px; font-weight:500; color:var(--muted); align-self:flex-start; }
@media(max-width:700px) { .onboarding-draw-layout { min-width:670px; } }

.onboarding-demo-bar:has(.onboarding-demo-cue:empty) { visibility: hidden; }

/* Static welcome on the empty creation canvas. */
#canvasEmpty .onboarding-empty-copy { max-width: 520px; }
#canvasEmpty .empty-welcome-title {
  font-size: clamp(20px, 2.1vw, 30px); line-height: 1.5;
  font-weight: 650; letter-spacing: -.035em; text-wrap: balance;
  animation: none; transform: none;
}

.onboarding-edit-reference { order: 5; }
.onboarding-edit-reference img { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }

.onboarding-edit-reference .edit-reference-box { display: grid; place-items: center; width: 96px; height: 96px; border: 1px dashed var(--line-strong); border-radius: 12px; font-size: 11px; color: var(--muted); overflow: hidden; }

/* Keep complete tutorial results visible at their natural proportions. */
.onboarding-result > img,
.onboarding-generation-preview img {
  width: 100%; height: auto; max-height: min(510px, 55vh);
  aspect-ratio: auto; object-fit: contain; flex: 0 0 auto;
}
.onboarding-generation-preview[data-generation="complete"] {
  min-height: 0; aspect-ratio: auto;
}

#onboardingHome { flex: 0 0 auto; white-space: nowrap; }

/* Reference refinement shows the attached product and its isolated selection. */
.onboarding-selected-product { position:relative; width:100%; aspect-ratio:410/700; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:repeating-conic-gradient(var(--composer-card-solid) 0% 25%,var(--surface) 0% 50%) 50%/16px 16px; }
.onboarding-selected-product > img { position:absolute; width:244%; max-width:none; height:auto; left:-11%; top:-75%; }
.onboarding-selected-product > img,.onboarding-draw-source.has-product-selection img { clip-path:polygon(20.3% 41.1%,21% 40.5%,35.2% 40.7%,36.5% 41.5%,36.2% 51.8%,41.3% 52.7%,42.7% 55.1%,43.8% 84.7%,44.1% 88.5%,42% 90.3%,38.3% 90.4%,37.1% 88.8%,12.1% 88.4%,10.5% 89.7%,7.2% 89.3%,5.5% 88.1%,5.3% 56%,7% 53.3%,10.1% 52.3%,20.5% 51.8%); }
.onboarding-draw-controls > .onboarding-draw-source { width:100%; max-width:180px; }
.onboarding-draw-controls > .onboarding-draw-source img { max-height:175px; object-fit:contain; }
.onboarding-draw-controls > [data-onboarding-region-open] { color:var(--accent); background:var(--accent-faint); }
.onboarding-selection-brush { stroke-width:var(--tutorial-brush-size,60px); }
.onboarding-pin > small:empty { display:none; }
.onboarding-browser-gallery .onboarding-pin > span { display:block; text-align:start; line-height:1.45; }
/* Fit the selected product/result into the visible lesson, including short windows. */
.onboarding-draw-photo,.onboarding-live-editor .onboarding-draw-photo { width:min(360px,100%,calc((100dvh - 380px)*.75)); }
.onboarding-editor-center { gap:16px; }
.onboarding-draw-library .onboarding-asset-card img { max-height:145px; }
.onboarding-draw-library { display:flex; flex-direction:column; gap:10px; }
.onboarding-draw-library h3 { margin-bottom:0; }
.onboarding-draw-controls h3 { font-size:13px; margin:0 0 6px; }
.onboarding-draw-controls .onboarding-field textarea { min-height:90px; }
.onboarding-browser-reference .onboarding-reference-slot > img { width:48px; height:64px; }
.onboarding-browser-reference .onboarding-reference-slot { min-height:88px; }
.onboarding-selected-product { width:min(100%,calc((100dvh - 350px)*.586)); }
.onboarding-demo-bar:has(.onboarding-demo-cue:empty) { display:none; }

/* Help uses independent assets and the same quiet surfaces as the workspace. */
.onboarding-scene { background:var(--surface); padding:20px; }
.onboarding-mini-panel,.onboarding-tutorial-browser { border:1px solid var(--line); border-radius:18px; background:var(--composer-card-solid); box-shadow:0 2px 6px #00000005; padding:16px; }
.onboarding-asset-grid { gap:10px; }
.onboarding-asset-card { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface-raised); }
.onboarding-asset-card img { display:block; width:100%; object-fit:contain; }
.onboarding-browser-gallery { height:clamp(260px,48vh,540px); align-content:start; }
.onboarding-browser-gallery .onboarding-pin { flex:0 0 auto; }
.onboarding-browser-gallery .onboarding-pin img { display:block; height:auto; aspect-ratio:3/4; object-fit:contain; background:var(--surface-raised); }
.onboarding-copy-workspace { max-width:960px; margin-inline:auto; }
.onboarding-copy-workspace .copy-layout-stage { display:grid; place-items:center; height:clamp(280px,48vh,520px); min-width:0; margin-top:16px; }
.onboarding-copy-workspace .copy-layout-subject svg { width:100%; height:100%; fill:currentColor; stroke:none; }
.onboarding-copy-workspace .copy-layout-tabs { flex-wrap:wrap; }
.onboarding-copy-workspace .copy-layout-toolbar { display:flex; flex-wrap:wrap; overflow-x:visible; }
.onboarding-copy-workspace .copy-layout-toolbar > input[type="range"] { flex:1 1 80px; width:auto; min-width:40px; }
.onboarding-copy-workspace .copy-layout-toolbar .copy-layout-depth { margin-inline-start:0; }
.onboarding-copy-workspace .copy-layout-help { white-space:normal; overflow-wrap:anywhere; }
.onboarding-copy-workspace .copy-layout-canvas { margin:0; }
.onboarding-copy-workspace.has-copy-result { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; max-width:none; align-items:start; }
.onboarding-copy-workspace.has-copy-result > h3 { grid-column:1/-1; }
.onboarding-copy-canvas { min-width:0; container-type:inline-size; }
.onboarding-copy-references { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; grid-column:1/-1; }
.onboarding-copy-reference { margin:0; min-width:0; text-align:center; }
.onboarding-copy-reference img { width:56px; height:64px; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.onboarding-copy-reference figcaption { font-size:11px; margin-top:4px; overflow-wrap:anywhere; }
.onboarding-app-result .copy-layout-subject { top:10%; height:auto; }
.onboarding-app-result .copy-layout-subject svg { display:block; height:auto; }
.onboarding-copy-result { width:100%; margin:0; }
.onboarding-copy-result > img { display:block; width:100%; height:auto; max-height:55vh; object-fit:contain; border-radius:12px; }
.onboarding-copy-result > p { padding:0 10px 10px; font-size:11px; line-height:1.5; }
@media(max-width:900px) { .onboarding-copy-workspace.has-copy-result { grid-template-columns:minmax(0,1fr); } }
.onboarding-copy-workspace .copy-layout-box textarea { display:block; width:100%; min-height:0; height:32px; padding:3px; border:0; background:transparent; resize:none; box-shadow:none; text-align:center; white-space:pre; overflow-wrap:normal; word-break:normal; }
.onboarding-copy-workspace .copy-layout-main textarea { font-weight:600; }
.onboarding-copy-workspace .copy-layout-box textarea[readonly] { pointer-events:none; user-select:none; }
.onboarding-copy-workspace .copy-layout-box textarea:focus-visible { outline:none; box-shadow:none; }
.onboarding-copy-workspace .copy-layout-depth { flex-wrap:wrap; min-width:0; max-width:100%; }
.onboarding-copy-workspace .copy-layout-colors .background-color-trigger { width:32px; height:32px; min-height:32px; padding:4px; border:1px solid var(--line); border-radius:8px; }
.onboarding-copy-workspace .background-color-caption { display:none; }
.onboarding-copy-workspace .copy-layout-symbol svg { width:16px; height:16px; }
.onboarding-inline-editor { margin-top:16px; }
.onboarding-editor-heading { display:flex; width:100%; align-items:center; gap:8px; flex-wrap:wrap; }
.onboarding-editor-heading > [data-onboarding-edit-mode] { min-width:94px; flex:none; }
.onboarding-editor-heading .onboarding-edit-palette { width:auto; max-width:100%; flex:1; }
.onboarding-draw-layout.is-edit-mode .onboarding-draw-photo { border:1px solid var(--line); box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 20%,transparent); }
.onboarding-live-editor .onboarding-selection-brush { stroke:var(--accent); }
.onboarding-edit-reference-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.onboarding-edit-reference-slots .edit-reference-box { position:relative; width:100%; height:auto; aspect-ratio:1; text-align:center; }
.onboarding-edit-reference-slots .edit-reference-box > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
@media(max-width:700px) {
 .onboarding-combine-layout,.onboarding-prompt-workflow,.onboarding-browser-layout,.onboarding-draw-layout,.onboarding-live-editor { min-width:0; grid-template-columns:minmax(0,1fr); }
 .onboarding-scene { margin-inline:12px; padding:12px; }
 .onboarding-copy-workspace .copy-layout-tabs button { flex:1 1 120px; }
 .onboarding-steps { margin-inline:12px; gap:3px; }
 .onboarding-steps li { flex-direction:column; font-size:10px; }
}
@media(max-width:480px) {
 .onboarding-copy-references { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-height:800px) {
 .onboarding-draw-controls { gap:8px; }
 .onboarding-draw-controls .onboarding-field textarea { height:64px; min-height:64px; }
 .onboarding-draw-photo,.onboarding-live-editor .onboarding-draw-photo { width:min(320px,100%,calc((100dvh - 405px)*.75)); }
 .onboarding-draw-library .onboarding-asset-card img { max-height:100px; }
 .onboarding-edit-reference img,.onboarding-edit-reference .edit-reference-box { width:70px;height:70px; }
 .onboarding-editor-center { gap:12px; }
}

/* Help mirrors composer → materials/browser → preview; navigation stays quiet. */
.onboarding-workspace-chrome { min-width:0; width:100%; flex:0 0 100%; margin-bottom:10px; font-size:12px; }
.onboarding-workspace-tabs { display:flex; gap:4px; min-height:36px; border-bottom:1px solid var(--line); }
.onboarding-workspace-tabs > span { display:flex; align-items:center; justify-content:center; min-width:0; padding:3px 7px; line-height:14px; color:var(--muted); border:1px solid transparent; border-radius:7px 7px 0 0; }
.onboarding-workspace-tabs > .is-active { color:var(--accent); border-color:var(--line); border-bottom-color:var(--composer-card-solid); background:var(--composer-card-solid); }
.onboarding-source-tabs { display:flex; width:220px; max-width:100%; min-height:28px; margin:10px 0; border:1px solid var(--line); border-radius:6px; background:var(--surface-subtle); }
.onboarding-source-tabs > span { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; padding:2px 6px; line-height:12px; color:var(--muted); }
.onboarding-source-tabs > .is-active { color:var(--accent); background:var(--surface-raised); border-radius:5px; }
.onboarding-category-filters { display:flex; overflow-x:auto; gap:0; padding-bottom:3px; }
.onboarding-category-filters > span { display:flex; align-items:center; justify-content:center; flex:1 0 calc(100% / 6); min-width:max-content; min-height:32px; padding:4px 6px; white-space:nowrap; color:var(--muted); border-bottom:2px solid transparent; }
.onboarding-category-filters > .is-active { color:var(--accent); border-bottom-color:var(--accent); }
.onboarding-mini-panel,.onboarding-tutorial-browser { border-radius:10px; box-shadow:none; padding:12px; }
.onboarding-combine-layout { grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) minmax(220px,1.1fr); }
.onboarding-prompt-workflow { grid-template-columns:minmax(220px,1fr) minmax(220px,.85fr) minmax(220px,1.1fr); }
@media(max-width:900px) {
 .onboarding-combine-layout,.onboarding-prompt-workflow,.onboarding-draw-layout,.onboarding-live-editor { min-width:0; grid-template-columns:minmax(0,1fr); }
}

.onboarding-combine-layout,.onboarding-prompt-workflow,.onboarding-browser-layout,.onboarding-draw-layout { direction:ltr; }
:root[dir="rtl"] :is(.onboarding-combine-layout,.onboarding-prompt-workflow,.onboarding-browser-layout,.onboarding-draw-layout) > * { direction:rtl; }