:root{
  --tp-blue:#170E3A;
  --tp-orange:#E05206;
  --tp-grey:#818A8F;
  --tp-white:#ffffff;
  --tp-card:#f5f6fb;
  --tp-green:#5d994f;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:transparent;font-family:"Mr Eaves XL Mod OT","Aptos","Inter","Segoe UI",Arial,sans-serif;color:var(--tp-white);overflow:hidden}
.tp-stage{position:relative;min-height:100vh;overflow:hidden;background:transparent}
#routeCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.75}
.tp-grain{display:none;position:absolute;inset:-20%;opacity:.105;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");animation:grain 7s steps(8) infinite}
.tp-glow{display:none;position:absolute;border-radius:999px;filter:blur(42px);pointer-events:none}.tp-glow-one{width:360px;height:260px;right:15%;top:7%;background:rgba(224,82,6,.22);animation:glowFloat 9s ease-in-out infinite}.tp-glow-two{width:280px;height:240px;left:6%;bottom:10%;background:rgba(129,138,143,.15);animation:glowFloat 11s ease-in-out infinite reverse}
.tp-component{position:relative;z-index:3;min-height:100vh;width:min(920px,calc(100vw - 44px));margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding:42px 0 36px;transform:translateX(110px)}
.glass{background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.14);box-shadow:0 32px 90px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
.movement-board{width:760px;max-width:100%;border-radius:34px;padding:26px 28px 28px;transform:perspective(1100px) rotateY(-5deg) rotateX(2deg);margin-bottom:26px}
.board-header{display:flex;align-items:center;justify-content:space-between;margin:0 0 24px;padding:0 6px;color:rgba(255,255,255,.68);font-size:18px;line-height:1;letter-spacing:.34em;font-weight:700}.live-dot{display:flex;align-items:center;gap:10px;color:#b7e793;letter-spacing:.11em;font-weight:800}.live-dot i{width:8px;height:8px;border-radius:50%;display:block;background:#80bf61;box-shadow:0 0 16px rgba(128,191,97,.75);animation:pulse 1.5s ease-in-out infinite}
.board-row{height:66px;display:grid;grid-template-columns:116px 1fr 168px;gap:18px;align-items:center;margin:12px 0;padding:0 22px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(0,0,0,.105));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}.code{color:var(--tp-orange);font-size:26px;font-weight:800;letter-spacing:.08em}.city{color:#fff;font-size:26px;font-weight:700;letter-spacing:.08em}.board-row strong{position:relative;color:#fff;text-align:right;font-size:19px;font-weight:800;letter-spacing:.08em;white-space:nowrap;transform-origin:center;will-change:transform,filter,opacity}.board-row strong.flip{animation:splitFlip .58s cubic-bezier(.2,.8,.2,1)}
.metric-grid{width:742px;max-width:calc(100% - 56px);display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-right:28px}.metric-card,.tracking-card{background:rgba(246,247,252,.96);color:#1f2430;border-radius:24px;box-shadow:0 28px 74px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.44)}.metric-card{min-height:220px;padding:32px 32px 28px}.label{display:block;color:#68717e;font-size:22px;font-weight:800;line-height:1.2}.metric-card strong{display:block;margin:22px 0 22px;color:var(--tp-blue);font-size:74px;line-height:.85;font-weight:900;letter-spacing:.015em}.metric-card em{font-style:normal;color:#55924d;font-size:21px;font-weight:600}.metric-card small{display:block;color:#68717e;font-size:22px;font-weight:700;letter-spacing:.02em}.tracking-card{grid-column:1/3;min-height:166px;padding:30px 32px 28px}.tracking-card .label{font-size:22px}.tracking-card .label b{color:#65707f}.tracking-card small{display:block;color:#68717e;font-size:22px}.progress{position:relative;height:10px;margin:36px 0 25px;background:#e1e5ef;border-radius:999px;overflow:visible}.progress i{position:absolute;left:0;top:0;bottom:0;width:70%;border-radius:999px;background:linear-gradient(90deg,var(--tp-orange) 0%,#bb4a16 56%,var(--tp-blue) 100%);animation:progressBar 4.2s ease-in-out infinite}.progress b{position:absolute;left:70%;top:50%;width:13px;height:13px;border-radius:50%;background:var(--tp-orange);box-shadow:0 0 22px rgba(224,82,6,.85);transform:translate(-50%,-50%);animation:progressDot 4.2s ease-in-out infinite}
.float-one{animation:floatOne 6.8s ease-in-out infinite}.float-two{animation:floatTwo 7.2s ease-in-out infinite}.float-three{animation:floatTwo 7.2s ease-in-out infinite -2.1s}.float-four{animation:floatThree 8s ease-in-out infinite -3.2s}
@keyframes floatOne{50%{transform:perspective(1100px) rotateY(-4deg) rotateX(2deg) translateY(-11px)}}@keyframes floatTwo{50%{transform:translateY(-8px)}}@keyframes floatThree{50%{transform:translateY(-7px)}}@keyframes splitFlip{0%{opacity:1;filter:blur(0);transform:rotateX(0) translateY(0)}45%{opacity:.52;filter:blur(3px);transform:rotateX(76deg) translateY(-2px)}100%{opacity:1;filter:blur(0);transform:rotateX(0) translateY(0)}}@keyframes progressBar{50%{width:47%}}@keyframes progressDot{50%{left:47%}}@keyframes pulse{50%{transform:scale(1.35);opacity:.7}}@keyframes glowFloat{50%{transform:translate3d(22px,-18px,0) scale(1.08)}}@keyframes grain{to{transform:translate3d(-4%,3%,0)}}
@media(max-width:1100px){.tp-component{transform:none;align-items:center}.movement-board{width:min(760px,100%)}.metric-grid{margin-right:0;width:min(742px,calc(100% - 20px));max-width:100%}}
@media(max-width:760px){html,body{overflow:auto}.tp-stage{min-height:100svh}.tp-component{padding:24px 14px}.movement-board{border-radius:24px;padding:18px 14px 16px;transform:none}.board-header{font-size:12px;letter-spacing:.22em;margin-bottom:16px}.board-row{height:54px;grid-template-columns:76px 1fr 98px;gap:8px;padding:0 12px;border-radius:12px}.code,.city{font-size:15px}.board-row strong{font-size:11px}.metric-grid{grid-template-columns:1fr;gap:14px;width:100%;max-width:100%}.metric-card{min-height:152px;padding:22px}.metric-card strong{font-size:52px}.metric-card,.tracking-card{border-radius:20px}.tracking-card{grid-column:auto;padding:22px}.label,.tracking-card .label{font-size:18px}.metric-card em,.metric-card small,.tracking-card small{font-size:17px}}