@import "/page/tutorial/features/lesson_deck.css";
.tutorial-rail, .tutorial-sidebar { min-width: 0; min-height: 0; }
.tut-sidebar-footer { padding: var(--xui-space-4); display: grid; gap: var(--xui-space-2); }
.tut-sidebar-footer a { display: flex; align-items: center; gap: var(--xui-space-2); min-height: var(--xui-control-h); color: var(--xui-ink-muted); }
.tut-sidebar-footer p { margin: 0; color: var(--xui-ink-muted); font-size: var(--xui-text-sm); }
.tutorial-head { flex-shrink: 0; }
.tutorial-scroll:focus { outline: none; }
.tutorial-content { width: 100%; max-width: 1280px; margin: 0; display: grid; align-content: start; gap: var(--xui-space-5); min-width: 0; padding-bottom: max(var(--xui-space-5), env(safe-area-inset-bottom)); text-align: left; }
.tutorial-content:has(> #ideasFeature) { max-width: none; grid-template-columns: minmax(0, 1fr); }
.tutorial-content h2 { margin: 0; font-size: var(--xui-text-lg); line-height: 1.5; }
.tutorial-content h3 { margin: 0; font-size: var(--xui-text-md); line-height: 1.6; }
.tutorial-content p { margin: 0; color: var(--xui-ink-muted); line-height: 1.8; overflow-wrap: anywhere; }
.tutorial-content a:not(.xui-button):not(.tut-journey-item):not(.xui-segment a) { color: var(--xui-accent-strong); text-decoration: none; }
.tutorial-content a:not(.xui-button):not(.xui-segment a):hover { text-decoration: none; }
.tut-lead { display: grid; gap: var(--xui-space-3); padding-bottom: var(--xui-space-2); }
.tut-lead > h2 { font-size: var(--xui-text-xl); line-height: 1.5; }
.tut-kicker { font-size: var(--xui-text-sm); color: var(--xui-accent-strong) !important; font-weight: 650; }
.tut-intro { max-width: 60em; }
.tut-section { display: grid; gap: var(--xui-space-3); min-width: 0; }
.tut-actions, .tut-card-actions, .tut-prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xui-space-3); min-width: 0; }
.tut-actions a:not(.xui-button) { min-height: var(--xui-control-h); display: inline-flex; align-items: center; }
.tutorial-body :focus-visible { outline: 2px solid var(--xui-accent); outline-offset: 3px; }
.tut-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--xui-space-4); }
.tut-product { min-width: 0; display: flex; flex-direction: column; border: var(--xui-border) solid var(--xui-line-mid); border-radius: var(--xui-radius-panel); background: var(--xui-surface); overflow: hidden; }
.tut-product-body { display: grid; gap: var(--xui-space-3); padding: var(--xui-space-4); flex: 1; }
.tut-product-body img { object-fit: contain; }
.tut-card-actions { padding: var(--xui-space-3) var(--xui-space-4); border-top: var(--xui-border) solid var(--xui-line-soft); }
.tut-journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--xui-space-4); }
.tut-journey-item { padding: var(--xui-space-3) 0; display: grid; gap: var(--xui-space-2); color: var(--xui-ink); }
.tut-journey-item > span { color: var(--xui-accent-strong); font-weight: 750; }
.tut-journey-item:hover { text-decoration: none !important; }
.tut-details { border-top: var(--xui-border) solid var(--xui-line-soft); }
.tut-details > summary { min-height: var(--xui-control-h); padding: var(--xui-space-3) 0; cursor: pointer; line-height: 1.7; }
.tut-details > :not(summary) { margin: 0 0 var(--xui-space-3); }
.tut-note { padding-left: var(--xui-space-4); border-left: 2px solid var(--xui-accent); display: grid; gap: var(--xui-space-2); }
.tut-note-text { font-size: var(--xui-text-sm); color: var(--xui-ink-muted); }
.tut-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--xui-space-4); }
.tut-steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--xui-space-3); align-items: start; }
.tut-step-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--xui-accent-strong); border: var(--xui-border) solid var(--xui-line-soft); font-weight: 700; }
.tut-prompt { min-width: 0; }
.tut-prompt-actions > span { color: var(--xui-ink-muted); font-size: var(--xui-text-sm); line-height: 1.7; }
.tut-checklist { display: grid; gap: var(--xui-space-2); }
.tut-checklist strong { color: var(--xui-ink); }
.tut-bullets { margin: 0; padding-left: 1.5em; display: grid; gap: var(--xui-space-2); color: var(--xui-ink-muted); line-height: 1.8; }
.tut-search { width: min(100%, 520px); display: flex; align-items: center; gap: var(--xui-space-3); min-height: var(--xui-control-h); padding: 0 var(--xui-space-3); border: var(--xui-border) solid var(--xui-line-mid); border-radius: var(--xui-radius-control); background: var(--xui-surface); color: var(--xui-ink-muted); }
.tut-search input { flex: 1; width: 100%; min-width: 0; border: 0; border-radius: inherit; min-height: var(--xui-control-h); background: transparent; color: var(--xui-ink); }
.tut-library-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xui-space-3); justify-content: space-between; }
.tut-result-count { font-size: var(--xui-text-sm); }
.tut-filter-bar { display: flex; flex-wrap: wrap; gap: var(--xui-space-2); margin: var(--xui-space-3) 0 var(--xui-space-4); }
.tut-filter-bar button { border: var(--xui-border) solid transparent; border-radius: 999px; background: transparent; color: var(--xui-ink-muted); padding: 0 var(--xui-space-3); min-height: var(--xui-control-h); }
.tut-filter-bar button.is-active { background: var(--xui-accent-soft); color: var(--xui-accent-strong); border-color: var(--xui-accent); }
.tut-filter-bar button:hover:not(.is-active) { background: var(--xui-hover-tint); }
/* Normal grid is the fallback; metadata-driven packing adds two-column covers. */
.tut-idea-grid { --tut-idea-min-width: 220px; position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tut-idea-min-width)), 1fr)); align-items: start; gap: var(--xui-space-4); }
.tut-idea-grid.is-packed { display: block; }
.tut-idea-grid.is-packed > .tut-idea { position: absolute; }
.tut-idea { --tut-caption-rgb: 255, 255, 255; --tut-fade-middle: .52; --tut-fade-bottom: .60; display: block; position: relative; width: 100%; min-width: 0; margin: 0; aspect-ratio: 9 / 16; isolation: isolate; border: 0; border-radius: var(--xui-radius-panel); background: var(--xui-bg-quiet); box-shadow: 0 4px 16px rgba(12, 25, 18, .13); }
[data-xui-theme="dark"] .tut-idea { --tut-caption-rgb: 0, 0, 0; --tut-fade-middle: .26; --tut-fade-bottom: .46; box-shadow: 0 5px 20px rgba(0, 0, 0, .42); }
.tut-idea.is-landscape { aspect-ratio: 16 / 9; }
/* Clip composited image/glass inside the column; keep the outer shadow intact. */
.tut-idea-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; isolation: isolate; clip-path: inset(0 round var(--xui-radius-panel)); }
.tut-idea-cover { position: absolute; inset: -1px; display: block; width: calc(100% + 2px); height: calc(100% + 2px); padding: 0; border: 0; border-radius: 0; background: transparent; }
.tut-idea-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 0; }
.tut-idea-cover:focus-visible { outline-offset: -4px; }
.tut-idea-badge { position: absolute; z-index: 1; top: var(--xui-space-3); right: var(--xui-space-3); display: inline-flex; align-items: center; gap: var(--xui-space-1); padding: 3px var(--xui-space-2); border: 0; border-radius: 999px; color: var(--xui-ink); background: rgba(var(--tut-caption-rgb), .64); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: var(--xui-text-xs); pointer-events: none; }
/* Local photo glass: one compact caption for either image orientation. */
.tut-idea-overlay { position: absolute; z-index: 1; inset: auto 0 0; padding: 36px var(--xui-space-3) var(--xui-space-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--xui-space-2); color: var(--xui-ink); }
/* The shared inner clip also contains the overscan of this filtered glass. */
.tut-idea-overlay::before { content: ""; position: absolute; z-index: -1; inset: -64px -1px -1px; pointer-events: none; background: linear-gradient(to bottom, rgba(var(--tut-caption-rgb), 0) 0, rgba(var(--tut-caption-rgb), .08) 20%, rgba(var(--tut-caption-rgb), .25) 42%, rgba(var(--tut-caption-rgb), var(--tut-fade-middle)) 66%, rgba(var(--tut-caption-rgb), var(--tut-fade-bottom)) 100%); -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 64px); mask-image: linear-gradient(to bottom, transparent, #000 64px); }
[data-xui-theme="dark"] .tut-idea-overlay::before { inset-block-start: -112px; background: linear-gradient(to top, rgba(0, 0, 0, var(--tut-fade-bottom)) 0%, rgba(0, 0, 0, .38) 18%, rgba(0, 0, 0, var(--tut-fade-middle)) 38%, rgba(0, 0, 0, .14) 58%, rgba(0, 0, 0, .06) 76%, rgba(0, 0, 0, .015) 90%, transparent 100%); -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .92) 30%, rgba(0, 0, 0, .65) 55%, rgba(0, 0, 0, .25) 78%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .92) 30%, rgba(0, 0, 0, .65) 55%, rgba(0, 0, 0, .25) 78%, transparent 100%); }
[data-xui-theme="dark"] .tut-idea .tut-idea-body h3 { text-shadow: 0 1px 3px rgba(0, 0, 0, .72); }
.tut-idea-body { min-width: 0; }
.tut-idea .tut-idea-body h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--xui-ink); font-size: var(--xui-text-md); line-height: 1.5; }
.tut-idea-summary { display: none; }
.tut-idea .tut-card-actions { padding: 0; border: 0; gap: var(--xui-space-1); flex-wrap: nowrap; }
.tut-idea .tut-card-actions > .xui-button { padding: 0; border: 0; background: rgba(var(--tut-caption-rgb), .28); color: var(--xui-ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tut-idea .tut-card-actions > .is-primary { flex: 0 0 auto; background: color-mix(in srgb, var(--xui-accent) 16%, rgba(var(--tut-caption-rgb), .36)); }
.tut-idea .tut-card-actions > .xui-button:hover { background: color-mix(in srgb, var(--xui-accent) 24%, rgba(var(--tut-caption-rgb), .5)); }
[data-xui-theme="dark"] .tut-idea .tut-card-actions > .xui-button { background: rgba(0, 0, 0, .16); }
[data-xui-theme="dark"] .tut-idea .tut-card-actions > .is-primary { background: color-mix(in srgb, var(--xui-accent) 16%, rgba(0, 0, 0, .20)); }
[data-xui-theme="dark"] .tut-idea .tut-card-actions > .xui-button:hover { background: color-mix(in srgb, var(--xui-accent) 22%, rgba(0, 0, 0, .28)); }
.tut-text-action { display: inline-flex; align-items: center; justify-content: start; gap: var(--xui-space-2); min-height: var(--xui-control-h); padding: 0; border: 0; background: transparent; color: var(--xui-ink-muted); font: inherit; cursor: pointer; }
.tut-text-action:hover { color: var(--xui-accent-strong); }
.tut-empty { padding: var(--xui-space-5) 0; grid-column: 1 / -1; display: grid; justify-items: start; gap: var(--xui-space-3); }
#helpResults { display: grid; }
.tut-faq { border: 0; border-bottom: var(--xui-border) solid var(--xui-line-soft); background: transparent; border-radius: 0; }
.tut-faq > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--xui-space-4); padding: var(--xui-space-4) 0; list-style: none; cursor: pointer; font-weight: 650; }
.tut-faq > summary::-webkit-details-marker { display: none; }
.tut-faq > summary i { color: var(--xui-ink-muted); font-size: var(--xui-text-sm); }
.tut-faq[open] > summary i { transform: rotate(180deg); }
.tut-faq-number { color: var(--xui-ink-muted); font-variant-numeric: tabular-nums; min-width: 2ch; }
.tut-faq-title { flex: 1; }
.tut-faq-content { display: grid; gap: var(--xui-space-2); max-width: 76em; padding-bottom: var(--xui-space-4); }
.tut-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xui-space-4); }
.tut-help-actions > a { display: inline-flex; align-items: center; gap: var(--xui-space-2); }
.tut-task-drawer p { margin: 0; line-height: 1.8; color: var(--xui-ink-muted); }
.tut-task-drawer .tut-kicker { margin-bottom: var(--xui-space-2); }
.tut-drawer-scene { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: var(--xui-space-4); }
.tut-drawer-scene img { display: block; width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover; border-radius: var(--xui-radius-control); border: var(--xui-border) solid var(--xui-line-soft); }
.tut-drawer-scene.is-landscape { grid-template-columns: 180px minmax(0, 1fr); }
.tut-drawer-scene.is-landscape img { aspect-ratio: 16 / 9; }
.tut-scene-thumbnail { display: block; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: var(--xui-radius-control); background: transparent; cursor: zoom-in; }
.tut-scene-thumbnail:focus-visible { outline: 2px solid var(--xui-accent); outline-offset: 3px; }
.tut-scene-preview { position: fixed; inset: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: max(56px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border: 0; background: rgba(10, 10, 16, .96); color: #fff; overflow: hidden; }
.tut-scene-preview[open] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.tut-scene-preview::backdrop { background: rgba(10, 10, 16, .9); }
.tut-scene-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.tut-scene-preview-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .12); font: inherit; cursor: pointer; }
.tut-scene-preview-close:hover { background: rgba(255, 255, 255, .24); }
.tut-scene-preview-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tut-drawer-scene small { display: block; margin-top: var(--xui-space-2); color: var(--xui-ink-muted); }
.tut-composer { display: grid; gap: var(--xui-space-4); min-width: 0; }
.tut-composer .xui-field > span { color: var(--xui-ink); font-weight: 650; }
.tut-composer .xui-field small { color: var(--xui-ink-muted); font-weight: 400; margin-left: var(--xui-space-2); }
.tut-composer :is(input, textarea) { line-height: 1.8; }
.tut-task-drawer .tut-task-output { min-height: 360px; width: 100%; resize: vertical; line-height: 1.9; }
.tut-composer-hint, .tut-drawer-note { font-size: var(--xui-text-sm); }
.tut-library-product-count { margin-left: var(--xui-space-2); font-size: var(--xui-text-sm); font-variant-numeric: tabular-nums; opacity: .75; }
.tut-scenario-prep { display: grid; gap: var(--xui-space-2); color: var(--xui-ink-muted); }
.tut-scenario-prep p { font-size: var(--xui-text-sm); }
.tut-scenario-prep strong { margin-top: var(--xui-space-2); color: var(--xui-ink); font-size: var(--xui-text-md); font-weight: 650; }
.tut-scenario-prep ul { margin: 0; padding-left: 1.4em; display: grid; gap: var(--xui-space-1); font-size: var(--xui-text-sm); line-height: 1.7; }
.tutorial-mobile-top, .tutorial-compact-nav { display: none; }
@media (width < 1280px) and (aspect-ratio < 1/1) {
  .tutorial-shell { padding: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .tutorial-mobile-top { display: block; min-width: 0; background: var(--xui-bg-shell); }
  .tutorial-workspace { grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; }
  .tutorial-rail, .tutorial-sidebar { display: none; }
  .tutorial-compact-nav { display: flex; flex: 0 0 auto; min-width: 0; padding: var(--xui-space-2) var(--xui-space-3); gap: var(--xui-space-1); overflow-x: auto; border-bottom: var(--xui-border) solid var(--xui-line-soft); background: var(--xui-surface); }
  .tutorial-compact-nav a { min-height: var(--xui-control-h); white-space: nowrap; display: inline-flex; align-items: center; flex-shrink: 0; padding: 0 var(--xui-space-3); border-radius: var(--xui-radius-control); color: var(--xui-ink-muted); }
  .tutorial-compact-nav a.is-active { color: var(--xui-accent-strong); background: transparent; }
  .tutorial-head { min-height: auto; padding: var(--xui-space-3) var(--xui-space-4); }
  .tutorial-scroll { padding: var(--xui-space-4); scrollbar-gutter: auto; }
  .tutorial-content { gap: var(--xui-space-5); }
  .tut-journey { grid-template-columns: minmax(0, 1fr); }
  .tut-drawer-scene { grid-template-columns: 72px minmax(0, 1fr); }
  .tut-drawer-scene.is-landscape { grid-template-columns: 128px minmax(0, 1fr); }
  .tut-task-drawer .xui-drawer-content { padding: var(--xui-space-4); }
}

.tut-search { background: var(--xui-field-bg); border-color: transparent; }