/* One guided product scene; native imagery and the graphite world are retained. */
.guided-demo { text-align: left; }
.guided-demo .demo-viewport { position: relative; overflow: hidden; background: #f4f7f4; isolation: isolate; }
.guided-demo .demo-screen { position: absolute; inset: 0; height: 100%; }
.guided-demo .demo-image { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; opacity: 0; transition: opacity 150ms ease-out; }
.guided-demo .demo-image.is-current { opacity: 1; z-index: 1; }
.demo-cursor,.demo-click,.demo-scroll-cue { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.demo-cursor { --cursor-anchor-x: 3px; --cursor-anchor-y: 2px; --cursor-flip-x: 1; --cursor-flip-y: 1; transition: opacity 180ms ease-out; }
.demo-cursor svg { width: 28px; height: 34px; display: block; transform-origin: var(--cursor-anchor-x) var(--cursor-anchor-y); transform: translate(calc(-1 * var(--cursor-anchor-x)),calc(-1 * var(--cursor-anchor-y))) scale(var(--cursor-flip-x),var(--cursor-flip-y)); }
.demo-cursor span { position: absolute; top: 25px; left: 18px; padding: 2px 7px; border-radius: 4px; background: #173c30; color: #fff; font-size: 11px; line-height: 1.6; }
.demo-cursor[data-edge-x=right] { --cursor-flip-x: -1; }
.demo-cursor[data-edge-x=right] span { left: -12px; transform: translateX(-100%); }
.demo-cursor[data-edge-y=bottom] { --cursor-flip-y: -1; }
.demo-cursor[data-edge-y=bottom] span { top: -30px; }
.guided-demo[data-playback=playing]:not(.is-reduced-motion) .demo-cursor { opacity: 1; }
.guided-demo[data-phase=review] .demo-cursor { opacity: 0; }
.demo-click i { position: absolute; width: 42px; height: 42px; left: -21px; top: -21px; border: 2px solid #155f4b; border-radius: 50%; }
.guided-demo.is-clicking .demo-click { opacity: 1; }
.guided-demo.is-clicking .demo-click i { animation: demo-tap 350ms cubic-bezier(.16,1,.3,1) both; }
.demo-scroll-cue svg { width: 26px; height: 26px; background: #173c30; color: #fff; border-radius: 6px; padding: 4px; }
.guided-demo.is-scrolling .demo-scroll-cue { opacity: 1; }
.demo-controls { padding: 22px 24px 0; border-top: 1px solid var(--ui-rule); background: var(--ui-panel); }
.demo-caption { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; min-height: 66px; }
.demo-caption strong { display: block; color: var(--ink); font-weight: 500; font-size: 16px; line-height: 1.5; }
.demo-caption p { font-size: 13px; color: #bdc7c1; line-height: 1.7; margin: 4px 0 0; }
.demo-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; padding: 9px 14px; min-height: 44px; min-width: 98px; border: 1px solid #3f5148; border-radius: 8px; background: #18221d; color: #e6f1eb; font: inherit; font-size: 13px; cursor: pointer; transition: background 150ms ease-out; }
.demo-play:hover:not(:disabled) { background: #25372c; }
.demo-play:disabled { opacity: 1; color: #becbc3; cursor: wait; }
.demo-play .icon { width: 15px; height: 15px; }
.demo-steps { display: flex; align-items: stretch; gap: 24px; margin-top: 14px; }
.demo-step { display: flex; align-items: center; gap: 9px; position: relative; min-height: 46px; border: 0; padding: 9px 0 12px; background: transparent; color: #aebcb4; font: inherit; font-size: 13px; cursor: pointer; }
.demo-step:hover { color: #f0f5f2; }
.demo-step.is-current { color: #e3f6eb; }
.demo-step-number { color: #a7b9ad; font-size: 11px; font-variant-numeric: tabular-nums; }
.demo-step i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #a8d4bd; transform: scaleX(var(--demo-progress,0)); transform-origin: left; }
.guided-demo .frame-bottom { padding-inline: 24px; background: var(--ui-panel); border-top: 1px solid var(--ui-rule); margin: 0; }
.guided-demo .frame-bottom button { min-height: 44px; }
.guided-demo :is(.demo-play,.demo-step,[data-demo-retry]):focus-visible { outline: 2px solid #bbdec9; outline-offset: 4px; border-radius: 5px; }
.demo-error { align-items: center; gap: 14px; padding-block: 14px; font-size: 13px; color: #e8d7c1; }
.demo-error:not([hidden]) { display: flex; }
.demo-error button { min-height: 44px; padding: 8px 12px; color: #f3e8da; background: #2c251e; border: 1px solid #6d5842; border-radius: 6px; font: inherit; cursor: pointer; }
.demo-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes demo-tap { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
@media (max-width: 650px) {
  .demo-controls { padding: 16px 16px 0; }
  .demo-caption { gap: 12px; min-height: 112px; }
  .demo-caption strong { font-size: 14px; }
  .demo-caption p { font-size: 12px; line-height: 1.65; }
  .demo-play { min-width: 44px; padding-inline: 10px; }
  .demo-play span { display: none; }
  .demo-steps { gap: 16px; margin-top: 7px; }
  .demo-step { font-size: 12px; gap: 6px; flex: 1; }
  .demo-step-number { font-size: 10px; }
  .guided-demo .frame-bottom { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px; padding-inline: 16px; }
  .guided-demo .frame-bottom>span { max-width: none; line-height: 1.7; }
  .demo-cursor { --cursor-anchor-x: 2.357143px; --cursor-anchor-y: 1.571429px; }
  .demo-cursor svg { width: 22px; height: 26.714286px; }
  .demo-cursor span { font-size: 10px; padding: 1px 5px; top: 20px; left: 14px; }
  .demo-cursor[data-edge-y=bottom] span { top: -26px; }
}
@media (prefers-reduced-motion: reduce) {
  .guided-demo .demo-image { transition-duration: 100ms; }
  .guided-demo .demo-cursor,.guided-demo .demo-click,.guided-demo .demo-scroll-cue { display: none; }
}
@media (forced-colors: active) {
  .demo-play { border-color: ButtonText; }
  .demo-step.is-current { outline: 1px solid Highlight; }
  .demo-step i { background: Highlight; }
}