.story-scene{display:block;width:100%;height:auto;border-radius:18px;font-family:Outfit,Arial,sans-serif;color:var(--ink)}
.scene-story{container-type:inline-size;background:var(--scene-canvas);margin:0;padding:22px;overflow:hidden;box-sizing:border-box}
.scene-story .scene-heading{margin:0 0 22px;font-size:22px;font-weight:600;line-height:1.18;letter-spacing:-.025em;text-wrap:balance;text-align:center;color:var(--ink)}
.scene-story p{margin:0;line-height:1.35;letter-spacing:0;color:var(--ink)}
.scene-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch}
.scene-card{display:flex;align-items:center;gap:16px;min-width:0;padding:14px;background:var(--scene-paper);border-radius:12px;position:relative}
.scene-card-copy{min-width:0;flex:1}
.scene-story .scene-object-title{font-size:17px;font-weight:600;line-height:1.3;text-wrap:balance}
.scene-story .scene-step-label{font-size:15px;font-weight:400;line-height:1.4;text-wrap:balance}
.scene-card-copy .scene-step-label{margin-top:7px}
.scene-story .scene-status{display:inline-block;margin-top:10px;font-size:14px;line-height:1.35;font-weight:600;color:var(--scene-action);background:var(--scene-digital-panel);padding:5px 8px;border-radius:6px}
.scene-object{display:block;width:90px;height:84px;flex-shrink:0;overflow:visible}
.scene-link{display:flex;align-items:center;justify-content:center;height:22px;color:var(--scene-connector)}
.scene-link svg{display:block;width:24px;height:24px;transform:rotate(90deg);fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.scene-link-loss{color:var(--scene-loss)}
.scene-story .scene-loss-copy{color:var(--scene-loss-ink)}
.scene-story .scene-note{display:block;margin:18px 0 0;font-size:14px;line-height:1.4;text-align:center;color:var(--muted)}
.scene-steps-pair{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:7px;align-items:center}
.scene-steps-pair .scene-card{flex-direction:column;justify-content:center;gap:16px;align-self:stretch;padding:12px 10px}
.scene-steps-pair .scene-link svg{transform:none}
.scene-steps-pair .scene-step-label{text-align:center}
.scene-browser{width:100%;border:1px solid var(--scene-panel-border);border-radius:8px;overflow:hidden;background:var(--scene-paper);padding-bottom:10px;text-align:center}
.scene-browser-bar{display:flex;gap:5px;padding:8px 10px;border-bottom:1px solid var(--scene-panel-border);margin-bottom:12px}
.scene-browser-bar i{width:4px;height:4px;border-radius:50%;background:var(--scene-browser-control)}
.scene-browser .scene-object-title{font-size:15px;padding-inline:4px}
.scene-store{display:block;width:100%;max-width:160px;height:76px;margin:5px auto}
.scene-faux-button{display:block;width:calc(100% - 14px);margin:auto;padding:8px 3px;border-radius:5px;background:var(--scene-action);color:var(--scene-paper);font-size:14px;font-weight:600;line-height:1.25;box-sizing:border-box}
.scene-buyer-object{width:100%;height:auto;max-width:230px}
.scene-ad-object{position:relative;flex-shrink:0;width:90px}
.scene-coin-copy{position:absolute;left:66%;top:10%;font-size:14px;font-weight:600;color:var(--scene-action);transform:translateX(-50%)}
.scene-message-object{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:96px;padding:14px 12px;border-radius:10px;background:var(--scene-loss-surface)}
.scene-message-object p{font-size:15px;line-height:1.6}
.scene-message-object .waiting-clock{position:absolute;top:-8px;right:-7px;width:37px;height:37px}
.scene-waiting>.scene-step-label{flex:1;min-width:0}
.scene-story .scene-fields{display:flex;gap:5px 10px;flex-wrap:wrap;margin-top:7px;font-size:14px;color:var(--muted)}
.scene-fields span{border-bottom:1px solid var(--scene-document-line);padding-bottom:2px}
.scene-caseboard{background:var(--scene-paper);border-radius:12px;padding:18px}
.scene-case-header{display:flex;gap:12px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--scene-document-line);flex-wrap:wrap}
.scene-case-header>svg{width:40px;height:40px;flex-shrink:0}
.scene-case-header .scene-status{margin:0 0 0 auto}
.scene-case-row{display:flex;align-items:center;gap:15px;margin-top:18px}
.scene-case-icon{width:48px;height:48px;flex-shrink:0}
.scene-case-row .scene-step-label{flex:1;min-width:0;font-size:16px}
.scene-owner-marker{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:33px;height:33px;border-radius:50%;background:var(--scene-digital-panel)}
.scene-owner-marker svg{width:23px;height:23px;fill:none;stroke:var(--scene-action);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.scene-progress{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:22px;height:8px}
.scene-progress span{background:var(--scene-document-panel);border-radius:3px}
.scene-progress span:first-child{background:var(--scene-action)}
.scene-progress i{position:absolute;width:calc((100% - 10px)/3);height:8px;border-radius:3px;background:var(--scene-action)}
@container (min-width:460px){
 .scene-story .scene-heading{font-size:26px;margin-bottom:26px}
 .scene-steps{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr);gap:6px;align-items:center}
 .scene-card{flex-direction:column;align-self:stretch;justify-content:flex-start;gap:14px;padding:16px 10px;text-align:center}
 .scene-card-copy{flex:0 1 auto;width:100%}
 .scene-object{width:110px;height:98px;max-width:100%}
 .scene-link svg{transform:none}
 .scene-link{height:auto}
 .scene-steps-pair{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:12px}
 .scene-steps-pair .scene-card{padding:18px;gap:18px}
 .scene-steps-pair .scene-object-title{font-size:18px}
 .scene-steps-pair .scene-step-label{font-size:18px}
 .scene-steps-pair .scene-buyer-object{width:100%;height:auto}
 .scene-browser-bar{padding:10px 12px}
 .scene-faux-button{font-size:15px}
 .scene-ad-object{width:110px;height:98px}
 .scene-coin-copy{top:11%}
 .scene-message-object{flex:0 1 auto;width:100%;min-height:98px;padding:10px;box-sizing:border-box}
 .scene-waiting>.scene-step-label{flex:0 1 auto}
 .scene-fields{justify-content:center}
}
.story-scene .motion{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:no-preference){
 .story-scene.is-playing .buyer-one{animation:buyer-arrives 650ms .15s both}
 .story-scene.is-playing .buyer-two{animation:buyer-arrives 650ms .5s both}
 .story-scene.is-playing .buyer-three{animation:buyer-arrives 650ms .85s both}
 .story-scene.is-playing .purchase-check{animation:purchase-pop 400ms 1.25s both}
 .story-scene.is-playing .paid-coin{animation:coin-spent 900ms .1s both}
 .story-scene.is-playing .waiting-clock{animation:clock-waits 550ms .95s 2}
 .story-scene.is-playing .lost-buyer{animation:buyer-leaves 800ms 1.45s both}
 .story-scene.is-playing .record-check,.story-scene.is-playing .human-check,.story-scene.is-playing .owner-check,.story-scene.is-playing .next-step-check{stroke-dasharray:50;animation:task-done 500ms both}
 .story-scene.is-playing .record-check{animation-delay:.2s}
 .story-scene.is-playing .draft-pencil{animation:copy-work 700ms .75s both}
 .story-scene.is-playing .human-check{animation-delay:1.65s}
 .story-scene.is-playing .owner-check{animation-delay:.25s}
 .story-scene.is-playing .next-step-check{animation-delay:.9s}
 .story-scene.is-playing .case-progress{animation:progress-recorded 650ms 1.25s both}
}
@keyframes buyer-arrives{from{opacity:.65;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@keyframes purchase-pop{from{transform:scale(.85)}to{transform:scale(1)}}
@keyframes coin-spent{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes clock-waits{0%,100%{transform:rotate(0)}35%{transform:rotate(-10deg)}70%{transform:rotate(10deg)}}
@keyframes buyer-leaves{from{transform:translateX(0);opacity:1}to{transform:translateX(7px);opacity:.65}}
@keyframes copy-work{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes task-done{from{stroke-dashoffset:50}to{stroke-dashoffset:0}}
@keyframes progress-recorded{from{transform:scaleX(.35);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
.scene-replay{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:0;background:none;color:var(--muted);font:400 14px/1.4 Outfit,Arial,sans-serif;padding:9px 12px;cursor:pointer}
.scene-replay:focus-visible{outline:3px solid var(--scene-action);outline-offset:3px}
.hero-visual .scene-replay{display:flex;margin:10px auto 0}
.home-stage .story-scene{width:100%}
@media(max-width:700px){.scene-story{padding:18px}.hero-visual{padding-top:0}}