/* The dashboard animation belongs only to the first, front story card. */
.story__deck-card--front{background:#f3f0e8}
.story__scene--one .story__link{pointer-events:auto}
.db-scene{position:relative;width:100%;height:100%;overflow:hidden;container-type:inline-size;background:#f3f0e8;color:#063b2b;font-family:var(--sans),Arial,sans-serif;text-align:left;font-size:clamp(8px,.92cqw,12px)}
.db-scene *{box-sizing:border-box}
.db-panel{position:absolute;background:#fffefa;border:1px solid #e5e0d7;box-shadow:0 16px 36px rgba(23,42,32,.08)}
.db-code{z-index:1;left:7%;top:9%;width:37%;height:38%;border-radius:17px;overflow:hidden;animation:db-breathe 15s ease-in-out infinite paused}
.db-code__bar{height:21%;display:flex;align-items:center;gap:4px;padding:0 7%;border-bottom:1px solid #ede9e1;color:#65766e;font-size:clamp(7px,.72cqw,10px);font-weight:600}
.db-code__bar span:last-child{margin-left:auto}
.db-code__dot{width:6px;height:6px;border-radius:50%;background:#ddd8cf}.db-code__dot:first-child{background:#d7a99b}.db-code__dot:nth-child(2){background:#dfc998}.db-code__dot:nth-child(3){background:#a4cbb5}
.db-code__body{padding:5% 7%;font:500 clamp(7px,.77cqw,10px)/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;color:#35534c;white-space:nowrap;overflow:hidden}
.db-code__body>div{display:flex;gap:9px}.db-code__body i{font-style:normal;color:#a9aea8}.db-code__body b{color:#45846d;font-weight:600}.db-code__body em{font-style:normal;color:#9a7050}
.db-code__typed span{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;animation:db-type-one 15s steps(22,end) infinite paused}.db-code__typed--two span{animation-name:db-type-two}
.db-data{z-index:2;left:3%;top:36%;width:36%;height:54%;border-radius:18px;overflow:hidden;animation:db-breathe-two 15s ease-in-out infinite paused}
.db-data__head{display:flex;align-items:center;justify-content:space-between;padding:7% 7% 4%;font-size:clamp(9px,1.04cqw,13px);font-weight:700}.db-data__live{font-size:clamp(7px,.7cqw,10px);font-weight:600;color:#688076}.db-data__live i,.db-builder__status i,.db-preview__live i,.db-data__pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6bb787;vertical-align:middle;margin-right:3px}.db-data__live i,.db-data__pulse{animation:db-pulse 15s ease-in-out infinite paused}
.db-data__sources{display:flex;gap:4px;padding:0 7% 6%;flex-wrap:wrap}.db-data__sources span{padding:3px 6px;background:#f3f5f1;border-radius:5px;color:#6b7d71;font-size:clamp(6px,.64cqw,9px)}
.db-data__columns,.db-data__row{display:grid;grid-template-columns:1.22fr .8fr .63fr;align-items:center;gap:3px;padding:0 7%;height:10.7%;border-top:1px solid #f0eee8}.db-data__columns{color:#9a9c94;font-size:clamp(6px,.58cqw,9px);font-weight:700;letter-spacing:.05em}.db-data__row{font-size:clamp(7px,.75cqw,10px);color:#426057}.db-data__row span:nth-child(3){color:#58916d}.db-data__row--new{opacity:0;transform:translateY(5px);animation:db-new-row 15s ease-in-out infinite paused}.db-data__foot{position:absolute;left:7%;bottom:5%;color:#6c8876;font-size:clamp(7px,.68cqw,10px)}
.db-builder{z-index:3;left:31%;top:12%;width:65%;height:76%;border-radius:20px;overflow:hidden;box-shadow:0 24px 55px rgba(31,52,40,.15);animation:db-breathe-main 15s ease-in-out infinite paused}
.db-builder__top{height:12%;display:flex;align-items:center;gap:3%;padding:0 3.6%;border-bottom:1px solid #edeae3;background:#fff}.db-builder__top strong{font-size:clamp(10px,1.05cqw,14px);font-weight:700}.db-builder__mark{display:grid;place-items:center;width:clamp(20px,2.3cqw,29px);aspect-ratio:1;background:#063b2b;color:#fff;border-radius:8px;font:700 clamp(11px,1.2cqw,15px)/1 var(--serif),serif}.db-builder__status{margin-left:auto;color:#60806f;font-size:clamp(7px,.7cqw,10px);white-space:nowrap}
.db-builder__body{display:grid;grid-template-columns:22% 78%;height:77%;background:#fff}.db-builder__nav{display:flex;flex-direction:column;gap:1%;padding:10% 7%;border-right:1px solid #eeece7;color:#65776e}.db-nav__heading{font-size:clamp(6px,.6cqw,9px);font-weight:700;letter-spacing:.09em;color:#a0a69d;margin-bottom:5%}.db-nav__heading--data{margin-top:15%}.db-nav__item,.db-nav__source{display:flex;align-items:center;min-height:8%;padding:0 7%;border-radius:6px;font-size:clamp(7px,.78cqw,11px);white-space:nowrap}.db-nav__item--revenue{animation:db-revenue-select 15s ease-in-out infinite paused}.db-nav__item--customers{animation:db-customers-select 15s ease-in-out infinite paused}.db-nav__source i{width:6px;height:6px;border-radius:50%;margin-right:6px;background:#b9c5b9;animation:db-source-connect 15s ease-in-out infinite paused}
.db-preview{padding:5% 5% 4%;min-width:0;overflow:hidden}.db-preview__top{display:flex;justify-content:space-between;align-items:center;gap:6px}.db-preview__top>div{display:flex;flex-direction:column;gap:4px;min-width:0}.db-preview__eyebrow{color:#9baca0;font-size:clamp(6px,.62cqw,9px);font-weight:700;letter-spacing:.08em}.db-preview__top strong{position:relative;display:block;font-size:clamp(11px,1.25cqw,17px);white-space:nowrap;min-height:1.2em}.db-title--initial,.db-title--final{display:block;animation:db-initial-title 15s ease-in-out infinite paused}.db-title--final{position:absolute;inset:0;opacity:0;animation-name:db-final-title}.db-preview__live{white-space:nowrap;color:#60936f;font-size:clamp(7px,.7cqw,10px);opacity:0;animation:db-finish 15s ease-in-out infinite paused}
.db-preview__greeting{margin:5.3% 0 3.6%;font-size:clamp(8px,.85cqw,12px);font-weight:700}.db-preview__greeting span{display:block;margin-top:2px;color:#9aa69c;font-size:clamp(6px,.67cqw,9px);font-weight:400}
.db-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2%}.db-metric{min-width:0;min-height:clamp(42px,6.4cqw,84px);padding:9% 8%;border:1px solid #e8eae4;border-radius:10px;background:#fff;opacity:0;transform:translateY(6px);animation:db-metric-revenue 15s ease-in-out infinite paused}.db-metric--customers{animation-name:db-metric-customers}.db-metric--retention{animation-name:db-metric-retention}.db-metric>span{display:block;color:#87998b;font-size:clamp(6px,.64cqw,9px)}.db-metric strong{position:relative;display:block;margin:6px 0 2px;font-size:clamp(10px,1.25cqw,18px);font-weight:700;white-space:nowrap}.db-metric strong i,.db-metric strong b{font-style:normal;font-weight:inherit}.db-metric strong i{animation:db-old-number 15s ease-in-out infinite paused}.db-metric strong b{position:absolute;inset:0;opacity:0;animation:db-new-number 15s ease-in-out infinite paused}.db-metric small{color:#4f9d68;font-size:clamp(5px,.58cqw,8px);white-space:nowrap}
.db-preview__lower{display:grid;grid-template-columns:1.5fr 1fr;gap:3%;margin-top:3.5%;height:35%}.db-chart,.db-mix{min-width:0;padding:6% 7%;border:1px solid #e8eae4;border-radius:10px;background:#fff;opacity:0;animation:db-chart-appear 15s ease-in-out infinite paused}.db-chart>span,.db-mix>span{font-size:clamp(7px,.74cqw,10px);font-weight:700}.db-chart svg{display:block;width:100%;height:67%;margin-top:3%}.db-chart__grid{fill:none;stroke:#edf0e9;stroke-width:1}.db-chart__area{fill:rgba(107,183,135,.11);opacity:0;animation:db-chart-fill 15s ease-in-out infinite paused}.db-chart__line{fill:none;stroke:#589e73;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:500;stroke-dashoffset:500;animation:db-chart-draw 15s ease-in-out infinite paused}.db-chart__months{display:flex;justify-content:space-between;color:#b5bcb2;font-size:clamp(5px,.52cqw,7px)}.db-mix{animation-name:db-mix-appear}.db-mix>div{display:flex;align-items:center;gap:5px;margin-top:9%}.db-mix i{display:block;width:var(--bar);height:clamp(4px,.5cqw,7px);border-radius:4px;background:#9cc9aa}.db-mix>div:nth-child(3) i{background:#bdd1b8}.db-mix>div:nth-child(4) i{background:#d9d7bc}.db-mix small{font-size:clamp(5px,.55cqw,8px);color:#8a9a8c}
.db-builder__toolbar{height:11%;display:flex;align-items:center;gap:2%;padding:0 3.5%;border-top:1px solid #edeae3;color:#96a59b;font-size:clamp(6px,.65cqw,9px)}.db-builder__toolbar>span:first-child{margin-right:auto}.db-tool{padding:clamp(4px,.55cqw,7px) clamp(6px,.85cqw,11px);border:1px solid #e3e8df;border-radius:7px;color:#315746;font-size:clamp(7px,.67cqw,9px);font-weight:600;white-space:nowrap}.db-tool--metric{animation:db-tool-metric 15s ease-in-out infinite paused}.db-tool--chart{animation:db-tool-chart 15s ease-in-out infinite paused}.db-builder__option{position:absolute;right:19%;bottom:12%;padding:8px 12px;background:#fff;border:1px solid #dbe7dc;border-radius:8px;box-shadow:0 9px 20px #063b2b1a;font-size:clamp(7px,.68cqw,10px);white-space:nowrap;opacity:0;transform:translateY(4px);animation:db-option 15s ease-in-out infinite paused}
.db-cursor{position:absolute;z-index:9;left:12%;top:36%;width:clamp(12px,1.45cqw,20px);filter:drop-shadow(1px 2px 1px #ffffff);animation:db-cursor-path 15s cubic-bezier(.45,.1,.22,1) infinite paused}.db-cursor svg{width:100%;height:auto;display:block;fill:#174f3b;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.db-signoff{position:absolute;z-index:4;right:5%;bottom:4%;padding:5px 9px;border-radius:6px;background:#fffefa;color:#6b8775;font-size:clamp(7px,.76cqw,11px);opacity:0;animation:db-finish 15s ease-in-out infinite paused}
.db-scene.is-playing .db-code,.db-scene.is-playing .db-data,.db-scene.is-playing .db-builder,.db-scene.is-playing .db-code__typed span,.db-scene.is-playing .db-data__live i,.db-scene.is-playing .db-data__pulse,.db-scene.is-playing .db-data__row--new,.db-scene.is-playing .db-nav__item,.db-scene.is-playing .db-nav__source i,.db-scene.is-playing .db-title--initial,.db-scene.is-playing .db-title--final,.db-scene.is-playing .db-preview__live,.db-scene.is-playing .db-metric,.db-scene.is-playing .db-metric strong i,.db-scene.is-playing .db-metric strong b,.db-scene.is-playing .db-chart,.db-scene.is-playing .db-mix,.db-scene.is-playing .db-chart__area,.db-scene.is-playing .db-chart__line,.db-scene.is-playing .db-tool,.db-scene.is-playing .db-builder__option,.db-scene.is-playing .db-cursor,.db-scene.is-playing .db-signoff{animation-play-state:running}
@keyframes db-breathe{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(1px,-2px,0)}}
@keyframes db-breathe-two{0%,100%{transform:translate3d(0,0,0)}55%{transform:translate3d(-1px,2px,0)}}
@keyframes db-breathe-main{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(1px,1px,0)}}
@keyframes db-pulse{0%,12%,90%,100%{opacity:.3;box-shadow:none}15%,85%{opacity:1;box-shadow:0 0 0 3px rgba(107,183,135,.16)}}
@keyframes db-new-row{0%,17%,94%,100%{opacity:0;transform:translateY(5px)}21%,86%{opacity:1;transform:translateY(0)}}
@keyframes db-type-one{0%,25%,95%,100%{max-width:0}44%,88%{max-width:24ch}}
@keyframes db-type-two{0%,31%,95%,100%{max-width:0}48%,88%{max-width:33ch}}
@keyframes db-source-connect{0%,13%,93%,100%{background:#b9c5b9}16%,87%{background:#5bb477;box-shadow:0 0 0 2px #5bb4771f}}
@keyframes db-revenue-select{0%,25%,43%,100%{background:transparent;color:#65776e}27%,41%{background:#eef3ee;color:#063b2b}}
@keyframes db-customers-select{0%,53%,63%,100%{background:transparent;color:#65776e}55%,61%{background:#eef3ee;color:#063b2b}}
@keyframes db-tool-metric{0%,30%,38%,100%{background:#fff;border-color:#e3e8df}32%,36%{background:#eef3ee;border-color:#b6cdb8}}
@keyframes db-tool-chart{0%,43%,52%,100%{background:#fff;border-color:#e3e8df}45%,50%{background:#eef3ee;border-color:#b6cdb8}}
@keyframes db-option{0%,34%,42%,100%{opacity:0;transform:translateY(4px)}36%,40%{opacity:1;transform:translateY(0)}}
@keyframes db-metric-revenue{0%,37%,94%,100%{opacity:0;transform:translateY(6px)}41%,89%{opacity:1;transform:translateY(0)}}
@keyframes db-metric-customers{0%,54%,94%,100%{opacity:0;transform:translateY(6px)}59%,89%{opacity:1;transform:translateY(0)}}
@keyframes db-metric-retention{0%,62%,94%,100%{opacity:0;transform:translateY(6px)}67%,89%{opacity:1;transform:translateY(0)}}
@keyframes db-chart-appear{0%,45%,94%,100%{opacity:0}50%,89%{opacity:1}}
@keyframes db-mix-appear{0%,64%,94%,100%{opacity:0}69%,89%{opacity:1}}
@keyframes db-chart-fill{0%,52%,94%,100%{opacity:0}60%,89%{opacity:1}}
@keyframes db-chart-draw{0%,47%,94%,100%{stroke-dashoffset:500}61%,89%{stroke-dashoffset:0}}
@keyframes db-initial-title{0%,56%,94%,100%{opacity:1}60%,90%{opacity:0}}
@keyframes db-final-title{0%,56%,94%,100%{opacity:0}60%,90%{opacity:1}}
@keyframes db-old-number{0%,70%,94%,100%{opacity:1}74%,89%{opacity:0}}
@keyframes db-new-number{0%,70%,94%,100%{opacity:0}74%,89%{opacity:1}}
@keyframes db-finish{0%,68%,94%,100%{opacity:0}73%,89%{opacity:1}}
@keyframes db-cursor-path{
  0%,17%{left:var(--cursor-revenue-x,15%);top:var(--cursor-revenue-y,30%);opacity:0;transform:scale(1)}
  22%,25%{left:var(--cursor-revenue-x,15%);top:var(--cursor-revenue-y,30%);opacity:1;transform:scale(1)}
  27%{left:var(--cursor-revenue-x,15%);top:var(--cursor-revenue-y,30%);transform:scale(.77)}
  29%{left:var(--cursor-revenue-x,15%);top:var(--cursor-revenue-y,30%);transform:scale(1)}
  32%{left:var(--cursor-metric-x,73%);top:var(--cursor-metric-y,92%);transform:scale(1)}
  34%{left:var(--cursor-metric-x,73%);top:var(--cursor-metric-y,92%);transform:scale(.77)}
  35%{left:var(--cursor-metric-x,73%);top:var(--cursor-metric-y,92%);transform:scale(1)}
  38%{left:var(--cursor-metric-option-x,66%);top:var(--cursor-metric-option-y,83%);transform:scale(1)}
  40%{left:var(--cursor-metric-option-x,66%);top:var(--cursor-metric-option-y,83%);transform:scale(.77)}
  41%{left:var(--cursor-metric-option-x,66%);top:var(--cursor-metric-option-y,83%);transform:scale(1)}
  45%{left:var(--cursor-chart-x,90%);top:var(--cursor-chart-y,92%);transform:scale(1)}
  47%{left:var(--cursor-chart-x,90%);top:var(--cursor-chart-y,92%);transform:scale(.77)}
  48%{left:var(--cursor-chart-x,90%);top:var(--cursor-chart-y,92%);transform:scale(1)}
  50%{left:var(--cursor-chart-option-x,84%);top:var(--cursor-chart-option-y,83%);transform:scale(.77)}
  51%{left:var(--cursor-chart-option-x,84%);top:var(--cursor-chart-option-y,83%);transform:scale(1)}
  55%{left:var(--cursor-customers-x,15%);top:var(--cursor-customers-y,38%);transform:scale(1)}
  57%{left:var(--cursor-customers-x,15%);top:var(--cursor-customers-y,38%);transform:scale(.77)}
  58%{left:var(--cursor-customers-x,15%);top:var(--cursor-customers-y,38%);transform:scale(1)}
  64%{left:var(--cursor-retention-x,15%);top:var(--cursor-retention-y,46%);transform:scale(1)}
  66%{left:var(--cursor-retention-x,15%);top:var(--cursor-retention-y,46%);transform:scale(.77)}
  67%{left:var(--cursor-retention-x,15%);top:var(--cursor-retention-y,46%);transform:scale(1)}
  79%{left:var(--cursor-chart-x,90%);top:var(--cursor-chart-y,92%);opacity:1;transform:scale(1)}
  88%{left:var(--cursor-chart-x,90%);top:var(--cursor-chart-y,92%);opacity:0}
  100%{left:var(--cursor-revenue-x,15%);top:var(--cursor-revenue-y,30%);opacity:0}
}
@keyframes db-retention-select{0%,62%,72%,100%{background:transparent;color:#65776e}64%,70%{background:#eef3ee;color:#063b2b}}
@keyframes db-option-chart{0%,46%,53%,100%{opacity:0;transform:translateY(4px)}48%,51%{opacity:1;transform:translateY(0)}}

@media(max-width:850px){.db-code{left:4%;width:40%}.db-data{left:2%;width:39%}.db-builder{left:27%;width:70%;height:80%;top:10%}.db-builder__nav{padding-top:15%}.db-data__row--new{display:none}}
@media(max-width:650px){.db-code,.db-data{display:none}.db-builder{left:4%;top:9%;width:92%;height:82%;border-radius:13px}.db-builder__top{height:13%}.db-builder__body{height:76%;grid-template-columns:17% 83%}.db-builder__toolbar{height:11%}.db-builder__nav{padding:10% 2%}.db-nav__heading{font-size:6px}.db-nav__item,.db-nav__source{font-size:6px;padding:0 2px}.db-nav__item:nth-of-type(5),.db-nav__item:nth-of-type(6),.db-nav__heading--data,.db-nav__source{display:none}.db-preview{padding:5% 3%}.db-preview__top strong{font-size:10px}.db-preview__greeting{font-size:7px;margin:6% 0 5%}.db-preview__greeting span{font-size:6px}.db-metric{min-height:45px;padding:8% 6%}.db-metric strong{font-size:8px}.db-metric>span,.db-metric small{font-size:5px}.db-preview__lower{grid-template-columns:1fr;height:30%}.db-chart{padding:4% 6%}.db-chart svg{height:70%}.db-mix{display:none}.db-tool{font-size:6px;padding:3px 4px}.db-builder__toolbar>span:first-child{font-size:5px}.db-builder__status,.db-preview__live{font-size:6px}.db-signoff{bottom:2%;right:5%}}
@media(max-width:650px){.db-metric,.db-chart,.db-chart__area,.db-preview__live,.db-signoff{opacity:1;transform:none;animation:none}.db-chart__line{stroke-dashoffset:0;animation:none}.db-title--initial,.db-metric strong i,.db-cursor{display:none}.db-title--final,.db-metric strong b{position:static;opacity:1;animation:none}}
@media(prefers-reduced-motion:reduce){.db-scene *{animation:none!important;transition:none!important}.db-code__typed span{max-width:none}.db-data__row--new,.db-metric,.db-chart,.db-mix,.db-chart__area,.db-preview__live,.db-signoff{opacity:1;transform:none}.db-chart__line{stroke-dashoffset:0}.db-title--initial,.db-metric strong i,.db-cursor,.db-builder__option{display:none}.db-title--final,.db-metric strong b{position:static;opacity:1}.db-nav__source i{background:#5bb477}}

/* The original photograph remains visible as the stage's backdrop. */
.db-scene{background:url('./assets/dashboard-meadow-green.webp') center center/cover no-repeat}
.db-stage{position:absolute;inset:0;transform:scale(.9);transform-origin:center center}
.db-builder__mark{display:block;position:relative;flex:none;width:clamp(51px,6.8cqw,90px);height:clamp(18px,2.25cqw,30px);border-radius:5px;background:#591a30 url('./assets/dogguo-logo.png') center center/100% auto no-repeat}
.db-nav__item--revenue::before,.db-nav__item--customers::before,.db-nav__item--retention::before{content:'';display:inline-block;flex:none;width:clamp(5px,.57cqw,8px);height:clamp(5px,.57cqw,8px);margin-right:5px;border:1px solid #8dab98;border-radius:2px}
.db-nav__item--customers::before{border-radius:50%}
.db-nav__item--retention::before{border-radius:50%;background:#b6d2bd}
.db-nav__item--retention{animation:db-retention-select 15s ease-in-out infinite paused}
.db-builder__option--chart{right:2%;animation-name:db-option-chart}
@media(max-width:650px){.db-stage{transform:scale(.94)}.db-builder__mark{width:43px;height:17px}.db-nav__item--revenue::before,.db-nav__item--customers::before,.db-nav__item--retention::before{display:none}}