.commute-lab{background:#f0f1e9;color:#202a23;padding:clamp(72px,10vw,145px) 0;overflow:hidden;position:relative;--muted:#697268;--line:#25342220;--accent:#a94325}.commute-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,8vw,110px);align-items:center}.commute-intro .section-label{font-size:9px;letter-spacing:.15em;color:#66735f}.landing .commute-intro h2{font-size:clamp(38px,4.5vw,64px);line-height:1.04;letter-spacing:-.065em;margin:28px 0 23px}.commute-intro>p:not(.section-label){font-size:14px;line-height:1.85;color:#697268;max-width:340px}.commute-intro .commute-disclaimer{font-size:10px!important;margin-top:34px;color:#788171}.commute-demo{position:relative;max-width:620px;margin-left:auto;padding:clamp(22px,4vw,42px);border-radius:28px;background:#fff;box-shadow:0 35px 100px -55px #24352350;isolation:isolate}.commute-demo:before{content:'';position:absolute;inset:10px;border:1px solid #2435230a;border-radius:21px;pointer-events:none;z-index:-1}.commute-demo-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:30px}.commute-demo-top>span,.destination-field>span,.range-control>span>span:first-child,.leave-result>span{font-size:8px;letter-spacing:.14em;font-weight:700;color:#71806b}.commute-demo-top>span{display:flex;align-items:center;gap:8px}.commute-demo-top>span i{width:6px;height:6px;border-radius:50%;background:#73a765;box-shadow:0 0 0 4px #73a76520;animation:label-pulse 2.4s infinite}.commute-reset{border:0;background:#eef2e8;color:#4c6244;padding:8px 12px;border-radius:99px;font:600 9px var(--font);cursor:pointer;transition:background .2s,transform .2s}.commute-reset:hover{background:#dce8d2;transform:translateY(-1px)}.destination-field{display:grid;gap:8px;margin-bottom:22px}.destination-field input{min-height:48px;background:#f5f7f1;border:1px solid #e4e9de;border-radius:11px;font:600 15px var(--font);color:#243523}.range-control{display:grid;gap:9px;margin:21px 0}.range-control>span{display:flex;align-items:center;justify-content:space-between;gap:12px}.range-value{font-size:13px;color:#263a26;font-variant-numeric:tabular-nums}.range-control input[type=time]{width:150px;min-height:38px;padding:0 12px;font:600 13px var(--font);color:#243523;background:#f5f7f1;border:1px solid #e4e9de;border-radius:9px}.range-control input[type=range]{appearance:none;width:100%;height:4px;padding:0;margin:6px 0;background:linear-gradient(to right,#79976a var(--fill,30%),#e6eae1 var(--fill,30%));border:0;border-radius:9px;cursor:pointer}.range-control input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border:3px solid #fff;border-radius:50%;background:#58794a;box-shadow:0 1px 7px #23372545;transition:scale .2s}.range-control input[type=range]::-moz-range-thumb{width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:#58794a;box-shadow:0 1px 7px #23372545}.range-control input[type=range]:hover::-webkit-slider-thumb{scale:1.2}.leave-result{position:relative;overflow:hidden;margin-top:28px;padding:23px 25px 18px;background:#263b29;color:#f2f5e9;border-radius:18px}.leave-result:after{content:'';position:absolute;width:230px;height:230px;right:-115px;top:-140px;border:1px solid #d3edbe20;border-radius:50%;box-shadow:0 0 0 20px #d3edbe08,0 0 0 40px #d3edbe06;pointer-events:none}.leave-result>span{color:#c3d6b8}.leave-result>div:nth-child(2){display:flex;align-items:baseline;gap:8px;margin-top:8px;position:relative;z-index:1}.leave-result strong{font-size:clamp(48px,6vw,72px);font-weight:600;line-height:1;letter-spacing:-.075em;font-variant-numeric:tabular-nums}.leave-result>div:nth-child(2)>span{font-size:15px;color:#c4edaa}.leave-result>p{margin:9px 0 19px;color:#cfdbca;font-size:10px}.result-route{display:flex;align-items:center;gap:9px;max-width:390px}.result-route> b{height:1px;flex:1;background:#ffffff30;position:relative}.result-route>b:after{content:'';position:absolute;left:0;top:-1px;width:18%;height:3px;border-radius:3px;background:#c4edaa;animation:route-travel 3s linear infinite}.route-node{display:flex;align-items:center;gap:6px;font-size:7px;letter-spacing:.08em;color:#d7e4ce;white-space:nowrap}.route-node>i{display:grid;place-items:center;width:8px;height:8px;border:1px solid #c4edaa;border-radius:50%;font-style:normal}.bus-node>i{width:20px;height:16px;border:0;border-radius:5px;background:#d9efc5;color:#263b29;font-size:7px;font-weight:800}.commute-steps{display:flex;justify-content:space-between;gap:8px;margin:17px 3px 0}.commute-steps span{font-size:8px;color:#71806b}.commute-steps b{color:#30462d;font-weight:700}.leave-result.updated strong{animation:leave-time-pop .55s cubic-bezier(.16,1,.3,1)}.leave-result.updated:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#ffffff0c 50%,transparent 75%);transform:translateX(-100%);animation:result-flash .75s ease-out}.commute-demo.is-reset .leave-result{animation:result-reset .55s cubic-bezier(.16,1,.3,1)}@keyframes leave-time-pop{from{opacity:.3;transform:translateY(12px) scale(.92);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}@keyframes result-flash{to{transform:translateX(100%)}}@keyframes result-reset{50%{transform:scale(1.015);box-shadow:0 0 0 5px #87a77725}}
@media(max-width:800px){.commute-layout{grid-template-columns:1fr;gap:30px}.commute-intro .section-label{font-size:8px}.landing .commute-intro h2{font-size:40px;margin:20px 0 15px}.commute-intro>p:not(.section-label){font-size:12px}.commute-intro .commute-disclaimer{margin-top:17px}.commute-demo{width:100%;max-width:580px;margin:auto;padding:24px;border-radius:21px}.commute-demo-top{margin-bottom:23px}.leave-result{padding:21px}.leave-result strong{font-size:60px}}
@media(max-width:390px){.commute-demo{padding:19px}.range-control>span>span:first-child,.destination-field>span,.leave-result>span{font-size:7px}.leave-result strong{font-size:52px}.commute-steps span{font-size:7px}.commute-demo-top>span{font-size:7px}}
html.motion-paused .commute-demo *{animation-play-state:paused!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.commute-demo *{animation:none!important;transition:none!important}}