@font-face{font-family:Hellix;src:url('font/HellixTRIAL-Regular.otf')}@font-face{font-family:Hellix;src:url('font/HellixTRIAL-Medium.otf');font-weight:500}
:root{--cream:#fefff4;--muted:#9c9d93;--mint:#98e2de;--lime:#dbeb69;--red:#e75221}
*{box-sizing:border-box}html,body{margin:0;background:#e6f1ec;font-family:Hellix,Arial,sans-serif;color:#000}button{font:inherit;color:inherit}body{overflow:hidden}
#stage{position:relative;width:1728px;height:1117px;overflow:hidden;background:var(--cream);box-shadow:0 4px 4px rgba(0,0,0,.25);transform-origin:0 0}
.scene{position:absolute;left:453px;top:7px;width:1536px;height:1024px;overflow:hidden}.scene img{width:100%;height:100%;object-fit:cover}.scene-top-fade{position:absolute;left:453px;top:7px;width:1536px;height:380px;background:linear-gradient(180deg,#fefef4 9.55%,rgba(254,254,244,0) 84%)}.scene-left-fade{position:absolute;left:431px;top:80px;width:221px;height:985px;background:linear-gradient(90deg,#fefff4 0%,rgba(254,255,244,0) 100%)}.bottom-wash{position:absolute;left:0;top:664px;width:1728px;height:453px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(228,241,222,.7) 50%,#daefee);pointer-events:none}
.topbar{position:absolute;inset:0 0 auto 0;height:110px;z-index:10}.brand{position:absolute;left:41px;top:42px;width:37px;height:37px}.ghost-nav{position:absolute;left:136px;top:42px;display:flex;gap:16px;opacity:0;pointer-events:none}.ghost-nav span{width:117px;text-align:center}.search{position:absolute;left:728px;top:43.5px;width:428px;height:54px;border-radius:46px;background:#fff;box-shadow:2px 4px 26px rgba(0,0,0,.1);display:flex;align-items:center;padding:0 22px;color:var(--muted);font-size:16px}.search img{margin-left:auto;width:24px;height:24px}.circle-btn{position:absolute;top:50px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.6);display:grid;place-items:center}.circle-btn>img:first-child{width:20px;height:20px}.sun{left:1342px}.bell{left:1404px}.notice{position:absolute;left:0;top:-1px;width:8px;height:8px}.profile{position:absolute;left:1490px;top:42px;height:60px;display:flex;align-items:center;gap:10px}.avatar{width:60px;height:60px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.6);box-shadow:3px 3px 10px rgba(0,0,0,.1)}.avatar img{width:100%;height:150%;object-fit:cover;object-position:center top}.profile strong,.profile span{display:block;white-space:nowrap;font-size:16px}.profile strong{font-weight:500}.profile span{color:var(--muted)}
.rail-exact{position:absolute;left:6px;top:391px;width:124px;height:395px;object-fit:contain;z-index:11;pointer-events:none}.rail{position:absolute;left:33px;top:393px;width:66px;display:flex;flex-direction:column;gap:8px;z-index:12}.rail button{width:66px;height:66px;border:0;border-radius:50%;background:transparent;cursor:pointer}.settings{position:absolute;left:33px;top:1021px;width:66px;height:66px;padding:0;border:0;border-radius:50%;background:transparent;z-index:12;cursor:pointer}.settings img{width:66px;height:66px}.rail button:hover,.settings:hover{transform:translateY(-1px)}
h1{position:absolute;left:136px;top:135px;margin:0;font-size:64px;line-height:1.1;font-weight:400;z-index:5}.recommended-panel{position:absolute;left:90px;top:188px;width:619px;height:929px;object-fit:contain;z-index:5;pointer-events:none}
.route-label{position:absolute;height:49px;width:179px;border-radius:46px;display:grid;place-items:center;font-size:20px;font-weight:500;z-index:5}.route-label img{position:absolute;left:82px;bottom:-18px;width:15px;height:26px;transform:rotate(180deg)}.high-risk{left:1132px;top:207px;background:var(--red);color:#fff}.lower-risk{left:1342px;top:441px;background:var(--mint)}.handover-label{left:1059px;top:581px;background:var(--lime)}.map-marker{position:absolute;width:109.705px;height:73.409px;display:flex;align-items:center;justify-content:center;z-index:2}.marker-perspective{flex:none}.marker-face{position:relative;width:66px;height:66px;overflow:hidden;border:1px solid #e8ede0;border-radius:54.214px;box-shadow:2px 4px 28.7px rgba(0,0,0,.1)}.marker-face img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);object-fit:contain}.risk-marker{left:1184px;top:272px}.risk-marker .marker-perspective{transform:rotate(33.69deg) scaleY(.92) skewX(-22.42deg)}.risk-marker .marker-face{background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),linear-gradient(rgba(231,82,33,.6),rgba(231,82,33,.6))}.risk-marker .marker-face img{width:31px;height:31px}.handover-marker{left:1281px;top:600px}.handover-marker .marker-perspective{transform:rotate(-33.69deg) scaleY(.92) skewX(22.42deg)}.handover-marker .marker-face{background:rgba(219,235,105,.9)}.handover-marker .marker-face img{width:26px;height:26px}.pathway-title{position:absolute;left:679px;top:756px;width:315px;height:53px;border-radius:34px;background:var(--lime);display:grid;place-items:center;font-size:24px;font-weight:500;z-index:5}
.glass-card{position:absolute;background:rgba(255,255,255,.7);border-radius:32px;box-shadow:5px 4px 16px rgba(0,0,0,.05);z-index:5}.timeline-card{left:679px;top:865px;width:643px;height:544px}.status-card{left:1323px;top:865px;width:365px;height:544px;border:1px solid #def0eb;background:rgba(255,255,255,.8)}.panel-heading{position:absolute;left:44px;top:41px;font-size:24px;font-weight:500}.timeline-date{position:absolute;right:36px;top:45px;display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500}.timeline-date img{width:20px;height:20px}.timeline-table{position:absolute;left:41px;top:117px;width:563px}.table-head,.table-row{display:grid;grid-template-columns:104px 97px 125px 109px 127px;align-items:center}.table-head{font-size:16px;font-weight:500;height:42px}.line{height:1px;background:#d7d9d3;width:562px}.table-row{font-size:12px;font-weight:500;min-height:42px}.table-row b{float:right;font-weight:500}.details{margin-top:17px;width:306px}.details p,.status-lines p{margin:0 0 16px;display:flex;justify-content:space-between;font-size:16px;font-style:normal}.details em,.status-lines em{font-style:normal;color:var(--muted)}.details strong,.status-lines strong{font-weight:500}.status-card .panel-heading{left:34px}.status-card small{position:absolute;right:21px;top:50px;font-size:12px}.status-route{position:absolute;left:34px;top:89px}.status-route>span,.status-route>strong{display:block}.status-route>span{color:var(--muted);font-size:12px;line-height:15px;font-weight:500}.status-route>strong{margin-top:23px;font-size:32px;line-height:39px;font-weight:400;white-space:nowrap}.status-lines{position:absolute;left:34px;right:22px;top:181px}.handover-panel{position:absolute;left:1313px;top:162px;width:395px;height:495px;object-fit:contain;z-index:8;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.risk-marker,.handover-marker{animation:marker-in .55s cubic-bezier(.2,.8,.2,1) both}.handover-marker{animation-delay:.18s}@keyframes marker-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}}

/* Crop away the opaque Figma screenshot canvases and rebuild the rail from its exported SVG layers. */
.rail-exact{display:none}
.rail button{padding:0;border:1px solid #e8ede0;background:rgba(255,255,255,.6);box-shadow:2px 4px 28.7px rgba(0,0,0,.05);display:grid;place-items:center}
.rail button:nth-child(1) img{width:30px;height:30px}
.rail button:nth-child(2) img{width:28px;height:28px}
.rail button:nth-child(3) img{width:34px;height:34px}
.rail button:nth-child(4) img{width:27px;height:27px;transform:rotate(90deg) scaleY(-1)}
.rail button:nth-child(5) img{width:32px;height:32px}
.rail button.active{border-color:#000;background:#000}
.settings{background:rgba(255,255,255,.6);display:grid;place-items:center}
.settings img{width:32px;height:32px}
.recommended-panel{left:135px;top:238px;width:512px;height:846px;border-radius:32px;overflow:hidden;box-shadow:8px 4px 26.55px rgba(0,0,0,.05)}
.handover-panel{left:1325px;top:174px;width:363px;height:463px;border-radius:24px;overflow:hidden;box-shadow:5px 4px 16.05px rgba(0,0,0,.05)}

/* Figma cards rebuilt as individual DOM layers; no full-panel screenshot is rendered. */
.recommended-panel{background:rgba(255,255,255,.7);pointer-events:auto}
.recommended-title{position:absolute;left:39px;top:36px;height:30px;display:flex;align-items:center;gap:15px}
.recommended-title img{width:23px;height:23px}
.recommended-title h2{margin:0;font-size:24px;line-height:30px;font-weight:500}
.recommendation-card{position:absolute;left:38px;width:438px;height:379px;border:1px solid #f0f0e6;border-radius:16px;overflow:hidden;box-shadow:2px 4px 25.3px rgba(0,0,0,.05)}
.reuse-card{top:95px;background:#dbeb69}
.inspection-card{top:479px;background:#98e2de}
.recommendation-main{position:absolute;left:0;top:0;width:100%;height:299px;border-radius:16px;background:#fff}
.route-name{position:absolute;left:28px;top:24px;display:flex;flex-direction:column;gap:3px;font-size:16px;line-height:19px}
.route-name strong{font-weight:500}.route-name span{color:#9c9d93}
.route-state{position:absolute;right:24px;top:25px;height:20px;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;white-space:nowrap}
.route-state i{display:block;width:15px;height:15px;border-radius:50%}.route-state.best i{background:#80c756}.route-state.review i{background:#e75221}
.recommendation-divider{position:absolute;left:14px;top:84px;width:409px;height:1px;background:#d7d9d3}
.place-label{position:absolute;top:128px;font-size:16px;line-height:20px;font-weight:500;white-space:nowrap}.source-label{left:28px}.target-label{left:302px}
.place-image{position:absolute;object-fit:contain}.warehouse-image{left:40px;top:142px;width:75px;height:50px}.buyer-image{left:320px;top:137px;width:63px;height:59px}
.inspection-warehouse{left:28px;width:99px;height:66px}
.inspection-image{position:absolute;left:306px;top:133px;width:89px;height:67px;overflow:hidden}.inspection-image img{position:absolute;left:-3.4px;top:-11.5px;width:95.8px;height:95.4px;max-width:none}
.match-dots{position:absolute;left:180px;top:159px;width:76px;height:16px;display:flex;align-items:center;justify-content:center;gap:17px}.match-dots i{display:block;width:10px;height:10px;border-radius:50%}.match-dots i:nth-child(2){width:16px;height:16px}.lime-dots i{background:#dbeb69}.mint-dots i{background:#98e2de}
.metric{position:absolute;top:210px;display:flex;flex-direction:column;gap:5px;white-space:nowrap}.metric span{font-size:16px;line-height:20px;font-weight:500}.metric strong{font-size:32px;line-height:38px;font-weight:400}.metric-a{left:28px}.metric-b{left:165px}.metric-c{left:302px}
.recommendation-footer{position:absolute;left:0;top:299px;width:100%;height:80px}.recommendation-footer>strong{position:absolute;left:23px;top:20px;font-size:32px;line-height:40px;font-weight:400}.recommendation-footer button{position:absolute;left:280px;top:20px;width:131px;height:40px;border:1px solid #fff;border-radius:4px;background:rgba(255,255,255,.8);font-size:16px;font-weight:500;cursor:pointer}
.recommended-fade{position:absolute;left:25px;top:754px;width:460px;height:92px;object-fit:cover;border-radius:0 0 11px 11px;pointer-events:none;z-index:6}

.handover-panel{border:1px solid #fff;background:rgba(255,255,255,.9);pointer-events:auto}
.handover-title{position:absolute;left:23px;top:36px;height:27px;display:flex;align-items:center;gap:17px}.handover-title img{width:19px;height:19px}.handover-title h2{margin:0;font-size:21.25px;line-height:27px;font-weight:500;white-space:nowrap}
.handover-close{position:absolute;left:292px;top:27px;width:44.26px;height:44.26px;padding:0;border:.671px solid rgba(0,0,0,.3);border-radius:50%;background:transparent;box-shadow:1.341px 2.682px 19.246px rgba(0,0,0,.05);display:grid;place-items:center;cursor:pointer}.handover-close img{width:12px;height:12px}
.handover-grid{position:absolute;left:29px;top:171px;width:308px;height:132px;display:flex;justify-content:space-between;pointer-events:none}.handover-grid i{display:block;width:1.05px;height:132px;border-radius:4px;background:#fff}
.handover-art{position:absolute;left:45px;top:80px;width:272px;height:181px;object-fit:cover}
.handover-details{position:absolute;left:26px;right:30px;top:274px;margin:0;font-size:16px;font-weight:500}
.handover-details div{height:34px;display:flex;align-items:center;justify-content:space-between}.handover-details dt{color:#9c9d93}.handover-details dd{margin:0;color:#000;text-align:right;white-space:nowrap}

/* Same per-digit wheel used by Retirement Overview. The fixed digit window keeps
   complete values aligned before, during and after the animation. */
.roll-inline{display:inline-block;white-space:pre;font-size:1em!important;font-weight:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;vertical-align:baseline}
.roll-digit{position:relative;display:inline-block;width:.54em;height:1em;overflow:hidden;font-size:1em!important;font-weight:inherit!important;line-height:1em!important;letter-spacing:0!important;vertical-align:-.075em;font-variant-numeric:tabular-nums}
.roll-track{position:absolute;left:0;top:0;display:block;width:100%;font:inherit!important;line-height:1em!important;letter-spacing:0!important;text-align:center;will-change:transform}
.roll-track>span{display:block;width:100%;height:1em;font:inherit!important;line-height:1em!important;letter-spacing:0!important;text-align:center}
@media(prefers-reduced-motion:reduce){.roll-track{transition:none!important}}

/* v12: restore the Figma spacing and keep wheel glyphs fully visible. */
.place-label{top:104px}
.source-label{left:30px}
.roll-digit{height:1.12em;line-height:1.12em!important;vertical-align:-.09em}
.roll-track,.roll-track>span{line-height:1.12em!important}
.roll-track>span{height:1.12em}
.status-lines strong{flex:0 0 auto;white-space:nowrap;overflow:visible}