/* Native hero component: the stage reserves room for the camera motion so
   perspective never clips the dashboard or overlaps the page copy. */
.hero-media{width:100%;margin-top:-12px;aspect-ratio:1.32;min-width:0;isolation:isolate}
#dashboard-animation{position:relative;width:100%;height:100%;min-width:0;contain:layout;overflow:visible}
.animation-stage{position:absolute;inset:0;background:radial-gradient(ellipse at 54% 55%,#3a090915,transparent 70%)}
.particle-plane{position:absolute;inset:0;pointer-events:none}
.dashboard-fit{position:absolute;left:50%;top:50%;width:1000px;height:630px;transform-origin:center}
.dashboard-camera{width:100%;height:100%;transform-origin:50% 55%;will-change:transform}
.mini-dashboard{height:100%;border:1px solid #ffffff38;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 68% 8%,#74221e 0,transparent 48%),radial-gradient(ellipse at 27% 90%,#511110 0,transparent 55%),#09090a;box-shadow:0 24px 80px #000a,0 0 40px #dc160711;color:#f7f7f7;font-family:Arial,Helvetica,sans-serif;opacity:0;position:relative}
.mini-dashboard::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 #ffffff40}
.dash-header{height:57px;display:flex;align-items:center;gap:22px;padding:0 20px;background:#242424b0;border-bottom:1px solid #ffffff25;font-size:12px;color:#ccc}
.dash-header img{width:158px;height:auto;margin-right:auto}.dash-search{width:235px;border:1px solid #ffffff1a;border-radius:22px;padding:10px 17px;background:#ffffff04}.dash-avatar{width:27px;height:27px;border-radius:50%;background:#ffffff14;display:grid;place-items:center}
.dash-shell{display:grid;grid-template-columns:164px 1fr;height:calc(100% - 57px)}.dash-sidebar{border-right:1px solid #ffffff15;background:#0505058a;padding:22px 12px;font-size:11px;color:#bbb}.dash-sidebar div{padding:9px 10px;white-space:nowrap}.dash-sidebar .dash-active{border-left:2px solid #ff241b;background:#ffffff12;border-radius:4px;color:#fff}.dash-sidebar h3{font-weight:400;font-size:10px;margin:20px 10px 9px;color:#999}.dash-content{padding:26px 23px;min-width:0}.dash-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.dash-heading h2{font-size:26px;font-weight:500;letter-spacing:-.5px;margin:0}.data-mode{font-size:10px;color:#bbb;letter-spacing:.3px}.dash-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:29px}.dash-metric{position:relative;min-height:98px;padding:13px 10px 10px;background:linear-gradient(130deg,#ffffff1d,#ffffff09);border:1px solid #ffffff30;border-radius:9px;overflow:hidden}.dash-metric::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent calc(var(--shine) - 10%),#ffffff0d var(--shine),transparent calc(var(--shine) + 10%));pointer-events:none}.dash-metric h3{font-size:10px;line-height:1.4;font-weight:400;margin:0 0 7px;color:#eee;min-height:28px}.dash-metric strong{font-size:17px;line-height:1.2;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.5px}.dash-metric p{font-size:7px;line-height:1.5;margin:8px 0 0}.positive{color:#8dd8a2}.negative{color:#ff827a}.attention{color:#ecce69}.dash-chart{border:1px solid #ffffff38;border-radius:12px;background:linear-gradient(130deg,#ffffff12,#ffffff06);overflow:hidden}.chart-heading{display:flex;align-items:center;gap:19px;padding:18px 18px 9px}.chart-heading h3{font-size:21px;margin:0;font-weight:500}.chart-range{font-size:10px;border:1px solid #ffffff26;padding:7px 10px;border-radius:5px;color:#ddd}.chart-key{margin-left:auto;display:flex;gap:16px;font-size:10px}.chart-key span{display:flex;align-items:center;gap:6px}.chart-key i{width:8px;height:8px;border-radius:50%;display:inline-block}.key-orders{background:#ff3026}.key-revenue{background:#eddb38}.sales-svg{width:100%;height:auto;display:block;stroke:none;overflow:visible}.sales-svg text{fill:#ccc;stroke:none;font-family:Arial,sans-serif}.axis-label{font-size:10px}.date-label{font-size:13px;fill:#eee!important}.animation-controls{position:absolute;right:12px;bottom:10px;display:flex;gap:8px;opacity:.45;transition:opacity .2s}.hero-media:hover .animation-controls,.animation-controls:focus-within{opacity:1}.animation-controls button{display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff26;border-radius:50%;background:#161616;color:#ddd;font-size:15px}.animation-controls button:hover{border-color:#ffffff70}.is-paused .dashboard-camera{will-change:auto}
@media(max-width:1199px){.hero-media{width:100%;margin-top:28px}}
@media(max-width:800px){.hero-media{margin:0;aspect-ratio:1.42}.animation-controls{bottom:0}}
@media(prefers-reduced-motion:reduce){.dashboard-camera{will-change:auto}.animation-pause{display:none}}
.dash-content{padding:20px 23px}.dash-heading{margin-bottom:18px}.dash-metrics{margin-bottom:18px}.chart-heading{padding:12px 18px 6px}
/* Matched 24-unit outline icons; no font glyphs or opaque logo strip. */
.dash-header .dash-brand{display:flex;align-items:center;gap:9px;margin-right:auto;flex-shrink:0}
.dash-header .dash-logo{width:32px;height:38px;margin:0;object-fit:contain;filter:drop-shadow(0 0 1px #ffffff30)}
.dash-header .dash-wordmark{width:120px;height:auto;margin:0;object-fit:contain}
.dash-icon{width:16px;height:16px;flex:none;display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.dash-search{display:flex;align-items:center;gap:10px;height:34px;padding:0 14px}.dash-search .dash-icon{width:15px;height:15px;color:#aaa}
.dash-timezone{display:flex;align-items:center;gap:7px;white-space:nowrap}.dash-timezone .dash-icon{width:12px;height:12px}
.dash-sidebar{padding:16px 12px}.dash-sidebar div{display:flex;align-items:center;gap:10px;padding:8px 8px;height:31px}.dash-sidebar .dash-icon{width:14px;height:14px;color:#aeb0b4}.dash-sidebar .dash-active .dash-icon{color:#f56a61}.dash-sidebar h3{display:flex;align-items:center;justify-content:space-between;margin:16px 8px 7px}.dash-sidebar h3 .dash-icon{width:10px;height:10px}
.chart-range{display:flex;align-items:center;gap:17px}.chart-range .dash-icon{width:10px;height:10px}

/* One continuous composition: chart appears before its surrounding dashboard. */
.mini-dashboard{background:transparent;border-color:transparent;box-shadow:none;overflow:visible;isolation:isolate}
.mini-dashboard::before{content:'';position:absolute;inset:0;z-index:-1;border:1px solid #ffffff38;border-radius:14px;background:radial-gradient(ellipse at 68% 8%,#74221e 0,transparent 48%),radial-gradient(ellipse at 27% 90%,#511110 0,transparent 55%),#09090a;box-shadow:0 24px 80px #000a;opacity:var(--scene-reveal,0)}
.mini-dashboard::after,.dash-header,.dash-sidebar,.dash-heading,.chart-heading{opacity:var(--scene-reveal,0)}
.dash-chart{position:relative;border-color:transparent;background:transparent;overflow:visible}
.dash-chart::before{content:'';position:absolute;inset:0;z-index:-1;border:1px solid #ffffff38;border-radius:12px;background:linear-gradient(130deg,#ffffff12,#ffffff06);opacity:var(--scene-reveal,0)}
.sales-svg>line,.sales-svg>text{opacity:var(--scene-reveal,0)}
.sales-svg>g{opacity:var(--bar-alpha,0);filter:drop-shadow(0 0 var(--bar-glow,0px) #ffb76b99)}
.particle-plane{z-index:2}

/* Translucent luminous material resolves into the final data bars. */
.sales-svg>g>path:first-of-type{fill-opacity:var(--bar-material,1);stroke:#ffffff38;stroke-width:.65;vector-effect:non-scaling-stroke}
.sales-svg>g>path:nth-of-type(2){fill-opacity:calc(var(--bar-material,1) * .7);stroke:#ffffff24;stroke-width:.45}
.sales-svg>g>path:nth-of-type(3){fill-opacity:calc(.6 + var(--bar-material,1) * .4);stroke:#fff6;stroke-width:.55}