@font-face{font-family:MaerskHeadline;src:url('/assets/fonts/MaerskHeadline-Bold.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:MaerskText;src:url('/assets/fonts/MaerskText-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--board-ratio:1.776833;--gold:#f4b928;--blue:#13aee8;--green:#36f785}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000}body{display:grid;place-items:center;font-family:MaerskText,Arial,sans-serif}
.pixel-board{--shift-x:0px;--shift-y:0px;position:relative;isolation:isolate;width:min(100vw,calc(100vh * var(--board-ratio)));height:min(100vh,calc(100vw / var(--board-ratio)));overflow:hidden;background:#001a31 url('/assets/retail-super-bowl-reference.png') center/100% 100% no-repeat;transform:translate(var(--shift-x),var(--shift-y)) scale(1.006);transition:transform 2s ease-in-out}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.motion-layer{position:absolute;z-index:2;inset:0;pointer-events:none;overflow:hidden}.stadium-glow{position:absolute;inset:0;background:radial-gradient(circle at 33% 9%,rgba(255,255,255,.18),transparent 8%),radial-gradient(circle at 68% 9%,rgba(181,224,244,.16),transparent 8%);mix-blend-mode:screen;opacity:.22;animation:stadium-shimmer 26s ease-in-out infinite}.football-motion{position:absolute;inset:0;background:url('/assets/retail-super-bowl-reference.png') center/100% 100% no-repeat;clip-path:ellipse(4.8% 8.2% at 50% 7.7%);transform-origin:50% 7.7%;animation:football-wobble 18s ease-in-out infinite}.confetti{position:absolute;top:var(--piece-top,3%);width:var(--piece-width,.75%);height:var(--piece-height,1.8%);opacity:0;background:var(--piece-color);clip-path:polygon(0 16%,100% 0,84% 100%,12% 82%);animation:confetti-drift 24s ease-in-out infinite;animation-delay:var(--piece-delay)}.confetti--1{left:27%;--piece-color:#f4b928;--piece-delay:1s}.confetti--2{left:34%;--piece-color:#16b6f3;--piece-delay:1.45s}.confetti--3{left:41%;--piece-color:#fff;--piece-delay:1.9s}.confetti--4{left:57%;--piece-color:#f4b928;--piece-delay:2.3s}.confetti--5{left:64%;--piece-color:#16b6f3;--piece-delay:2.7s}.confetti--6{left:71%;--piece-color:#fff;--piece-delay:3.1s}.confetti--7{left:23%;--piece-color:#16b6f3;--piece-delay:3.45s}.confetti--8{left:76%;--piece-color:#f4b928;--piece-delay:3.8s}.confetti--9{left:18%;--piece-color:#fff;--piece-delay:1.2s;--piece-top:7%;--piece-width:.55%;--piece-height:1.35%}.confetti--10{left:31%;--piece-color:#f4b928;--piece-delay:2.05s;--piece-top:1%;--piece-width:.9%}.confetti--11{left:38%;--piece-color:#16b6f3;--piece-delay:2.55s;--piece-top:8%}.confetti--12{left:45%;--piece-color:#f4b928;--piece-delay:3.25s;--piece-top:2%;--piece-width:.6%}.confetti--13{left:53%;--piece-color:#fff;--piece-delay:1.7s;--piece-top:6%;--piece-width:.55%}.confetti--14{left:61%;--piece-color:#16b6f3;--piece-delay:2.9s;--piece-top:1%;--piece-width:.9%}.confetti--15{left:68%;--piece-color:#f4b928;--piece-delay:3.55s;--piece-top:8%}.confetti--16{left:81%;--piece-color:#16b6f3;--piece-delay:2.15s;--piece-top:5%;--piece-width:.58%}.confetti--17{left:14%;--piece-color:#f4b928;--piece-delay:3.05s;--piece-top:2%;--piece-width:.65%}.confetti--18{left:85%;--piece-color:#fff;--piece-delay:3.9s;--piece-top:3%;--piece-width:.6%}.progress-glint{position:absolute;top:71%;width:26.2%;height:5%;overflow:hidden;border-radius:.55vw;opacity:.42}.progress-glint:after{content:"";position:absolute;top:-35%;bottom:-35%;width:18%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:skewX(-20deg);animation:bar-sheen 14s ease-in-out infinite}.progress-glint--completed{left:15.4%}.progress-glint--shipped{left:52.45%}.progress-glint--shipped:after{animation-delay:5s}
.metric{position:absolute;inset:0;pointer-events:none}.metric .actual,.metric .goal,.metric .bar-shell,.metric .percent{position:absolute;opacity:0}.is-live .metric .actual,.is-live .metric .goal,.is-live .metric .bar-shell,.is-live .metric .percent{opacity:1}
.metric .actual{top:52.3%;height:13.3%;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(1,15,18,.99),rgba(2,21,20,.99));font-family:MaerskHeadline,Impact,sans-serif;font-size:clamp(2rem,7.05vw,8.35rem);line-height:1;color:#fff;letter-spacing:.015em;font-variant-numeric:tabular-nums;text-shadow:.025em .04em 0 #9aa1a5,.055em .075em .05em rgba(0,0,0,.9)}
.metric .goal{top:65.7%;height:4.5%;display:flex;align-items:center;justify-content:center;background:#021515;color:#fff;text-transform:uppercase;font-family:MaerskHeadline,Impact,sans-serif;font-size:clamp(.8rem,1.72vw,2rem);letter-spacing:.06em}.metric .goal strong{margin-left:.28em}.metric .bar-shell{top:71.05%;height:4.85%;border:.12vw solid currentColor;border-radius:.55vw;background:#071d22;overflow:hidden}.metric .bar-fill{height:100%}.metric .percent{top:70.6%;height:5.8%;display:flex;align-items:center;justify-content:flex-end;background:#031b20;font-family:MaerskHeadline,Impact,sans-serif;font-size:clamp(1rem,3.25vw,3.85rem);line-height:1;font-variant-numeric:tabular-nums}.metric .percent.is-three-digit{padding-right:.15vw;font-size:clamp(.9rem,2.65vw,3.15rem);letter-spacing:-.025em}
.metric--completed .actual{left:18.2%;width:26.6%}.metric--completed .goal{left:24.7%;width:15.2%}.metric--completed .bar-shell{left:15.4%;width:26.15%;color:var(--green)}.metric--completed .bar-fill{background:repeating-linear-gradient(130deg,#28e975 0 1.1vw,#38f98b 1.1vw 2.2vw)}.metric--completed .percent{left:42.1%;width:6.3%;color:var(--green)}
.metric--shipped .actual{left:56.45%;width:25.1%;background:linear-gradient(90deg,rgba(2,15,25,.99),rgba(1,19,31,.99))}.metric--shipped .goal{left:62.1%;width:14.6%;background:#011421}.metric--shipped .bar-shell{left:52.45%;width:26.35%;color:var(--blue)}.metric--shipped .bar-fill{background:repeating-linear-gradient(130deg,#0e9ee2 0 1.1vw,#16b6f3 1.1vw 2.2vw)}.metric--shipped .percent{left:79.2%;width:6.7%;color:var(--blue);background:#021526}
.metric.is-updating .actual{animation:number-pop 1.7s ease-out}.pixel-board.is-celebrating{animation:milestone-glow 2.3s ease-out}
.clock-panel{position:absolute;z-index:3;left:72.7%;top:3.8%;width:18.4%;height:25.8%;clip-path:polygon(5% 8%,98% 0,94% 87%,8% 100%,0 80%,3% 20%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.1% 1.5% 2%;background:linear-gradient(145deg,#003d6d,#001f3a 68%,#0073ab);color:#fff;text-align:center;filter:drop-shadow(0 .65vw .7vw rgba(0,0,0,.7));transform:rotate(-2deg)}.clock-panel:before{content:"";position:absolute;inset:5%;border-top:.2vw solid rgba(66,176,213,.75);border-bottom:.18vw solid rgba(244,185,40,.9);pointer-events:none}.clock-label,.clock-date{position:relative;text-transform:uppercase;font-weight:700;letter-spacing:.13em}.clock-label{font-size:clamp(.58rem,.86vw,1rem);color:var(--gold)}.clock-panel time{position:relative;margin:.02em 0;font-family:MaerskHeadline,Impact,sans-serif;font-size:clamp(1.3rem,2.95vw,3.5rem);line-height:.92;font-variant-numeric:tabular-nums;text-shadow:.05em .07em 0 rgba(0,0,0,.7)}.clock-date{font-size:clamp(.6rem,1.02vw,1.2rem);line-height:1.2;color:#b5e0f4;transform:translateY(-.08vw)}
.sync-status{position:absolute;z-index:4;right:1.3%;bottom:1.1%;display:flex;gap:.28em;align-items:center;padding:.24em .48em;background:rgba(0,20,35,.72);color:#b5e0f4;font-size:clamp(.44rem,.62vw,.74rem);opacity:.72}.status-dot{width:.5em;height:.5em;border-radius:50%;background:#42b0d5}.sync-status.is-offline .status-dot{background:var(--gold)}.sync-status time:before{content:"•";margin-right:.28em}@media(max-aspect-ratio:4/3){.clock-panel time{font-size:clamp(1rem,4.1vw,2.1rem)}.clock-label,.clock-date{letter-spacing:.06em}}
@keyframes stadium-shimmer{0%,10%,100%{opacity:.18}4%{opacity:.72}7%{opacity:.3}55%{opacity:.24}60%{opacity:.5}}@keyframes football-wobble{0%,68%,100%{transform:rotate(0) scale(1)}72%{transform:rotate(-2.8deg) scale(1.025)}76%{transform:rotate(2.5deg) scale(1.035)}80%{transform:rotate(-1.8deg) scale(1.025)}84%{transform:rotate(1deg) scale(1.015)}88%{transform:rotate(0) scale(1)}}@keyframes confetti-drift{0%,66%,100%{opacity:0;transform:translate(0,0) rotate(0)}70%{opacity:.95}84%{opacity:.82;transform:translate(2.5vw,18vh) rotate(250deg)}91%{opacity:0;transform:translate(-1.5vw,25vh) rotate(380deg)}}@keyframes bar-sheen{0%,72%{left:-30%}84%,100%{left:125%}}@keyframes number-pop{0%{transform:scale(1);filter:brightness(1)}20%{transform:scale(1.045);filter:brightness(1.55)}100%{transform:scale(1);filter:brightness(1)}}@keyframes milestone-glow{0%,100%{box-shadow:inset 0 0 0 rgba(244,185,40,0)}25%{box-shadow:inset 0 0 8vw rgba(244,185,40,.48)}55%{box-shadow:inset 0 0 3vw rgba(66,176,213,.34)}}
@media(prefers-reduced-motion:reduce){.pixel-board{transform:none;transition:none}.stadium-glow,.football-motion,.confetti,.progress-glint:after,.metric.is-updating .actual,.pixel-board.is-celebrating{animation:none}.confetti{display:none}}