:root{font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;color:#293b32;background:#eeeee6;font-synthesis:none;font-weight:400;--ink:#293b32;--muted:#879084;--line:#d5d9ce;--accent:#dd794d;--paper:#eeeee6}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait}button,a,input{outline-offset:6px}button:focus-visible,a:focus-visible,input:focus-visible,#scene:focus-visible{outline:2px solid var(--accent)}button{border:0}a{color:inherit;text-decoration:none}svg{display:block}button svg{width:20px;height:20px}button{touch-action:manipulation}#app{position:relative;min-height:760px;height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 63% 47%,#f7f6ed00 10%,#eeeee63a 75%);transition:background 1.5s}body{transition:background 1.5s}body.sunset{background:#eee0d0;--paper:#eee0d0;--line:#d7cbbb}.header{height:120px;padding:0 5.1%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:4}.brand{display:flex;align-items:center;gap:12px;font-family:Arial,sans-serif;font-size:23px;font-weight:800;letter-spacing:1.2px;line-height:1}.brand-icon{width:44px;height:44px}.brand-sub{display:block;font-weight:500;font-size:9px;letter-spacing:4.7px;margin-top:8px}.header-nav{display:flex;gap:42px;font-size:12px;align-items:center;margin-left:-35px}.header-nav button{background:none;padding:10px 0;font-size:12px;color:#7b8279}.header-nav button span{margin-left:7px}.header-nav button:hover{color:var(--ink)}.nav-active{display:flex;align-items:center;gap:10px}.tiny-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;display:inline-block}.weather{font-size:11px;display:flex;gap:11px;align-items:center;letter-spacing:.5px}.weather svg{width:21px;height:21px}.weather-divider{height:13px;border-left:1px solid #b8bfb2;margin:0 6px}.weather>span:last-child{font-size:18px;font-family:Georgia,serif}main{position:static}#scene{position:absolute;inset:90px -8% 125px 19%;z-index:0;cursor:grab;outline-offset:-8px;touch-action:none}#scene:active{cursor:grabbing}#scene canvas{width:100%;height:100%;display:block;transition:opacity 1s;opacity:0}#scene.loaded canvas{opacity:1}.hero{position:absolute;top:24.4%;left:5.4%;z-index:2;pointer-events:none;transition:opacity .6s,transform .6s}.eyebrow{display:flex;align-items:center;gap:9px;font:9px/1.5 Arial,sans-serif;letter-spacing:2.3px;font-weight:600}.hero h1{font-size:clamp(39px,3.8vw,62px);line-height:1.4;letter-spacing:-2px;font-weight:500;margin:26px 0 23px}.serif-word{position:relative;font-family:Songti SC,STSong,"Noto Serif SC",serif;font-weight:600}.word-line{position:absolute;left:1px;right:0;bottom:-8px;height:9px;border-top:2px solid var(--accent);border-radius:50%;transform:rotate(-3deg)}.hero-copy{font-size:12px;color:#7b847a;line-height:2.1;letter-spacing:1px;margin-bottom:29px}.primary-button{pointer-events:auto;display:flex;align-items:center;gap:17px;border-radius:3px;padding:15px 22px;background:var(--ink);color:#fffef3;font-size:12px;letter-spacing:1px;box-shadow:0 4px 12px #293b3210;transition:transform .2s,background .2s}.primary-button:hover{background:#405746;transform:translateY(-2px)}#ride-icon{font:22px/1 Arial,sans-serif;width:19px}.primary-button[aria-pressed=true]{background:#405746}.hero-footnote{display:flex;align-items:center;gap:10px;font-size:10px;color:#949b8f;margin-top:24px;letter-spacing:.7px}.line{width:21px;height:1px;background:#9aa58e}.postcard{position:absolute;right:5%;top:20%;z-index:2;width:196px;transform:rotate(5deg);border:1px solid #fffefb;background:#f8f7edd9;box-shadow:0 7px 20px #3d493513;padding:17px 15px 14px;transition:opacity .5s,transform .5s;pointer-events:none}.postcard-top{display:flex;justify-content:space-between;font:7px Arial,sans-serif;letter-spacing:1.2px;color:#969d8a}.postcard-title{margin-top:15px;font-family:Songti SC,STSong,serif;font-size:21px;font-weight:600}.postcard-title span{font:italic 9px Georgia,serif;display:block;margin-top:5px;color:#7c8773}.route-map{width:100%;height:83px;margin:6px 0 3px}.postcard-bottom{border-top:1px solid #dce0d0;padding-top:10px;display:flex;justify-content:space-between;align-items:center;font-size:7px;color:#828d7a}.postcard-bottom span:first-child{display:flex;gap:5px;align-items:center}.postcard-bottom .tiny-dot{width:4px;height:4px;background:#839575}.scene-caption{position:absolute;left:48%;bottom:25.8%;font-size:9px;color:#748677;display:flex;align-items:center;gap:9px;z-index:1;pointer-events:none;letter-spacing:.6px}.caption-dot{width:4px;height:4px;background:#728870;border-radius:50%}.caption-coords{margin-left:16px;font:8px Arial,sans-serif;letter-spacing:1px;color:#96a08c}.scene-tools{position:absolute;right:5.1%;bottom:27%;display:flex;flex-direction:column;gap:9px;z-index:3}.tool-button{display:grid;place-items:center;width:37px;height:37px;border:1px solid #cfd6c688;background:#f8f8ee91;border-radius:50%;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,transform .2s}.tool-button:hover{background:#fffff4;transform:translateY(-2px)}.tool-button svg{width:16px;height:16px}.dashboard{position:absolute;bottom:80px;left:5.2%;right:5.2%;height:108px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:.83fr 1.23fr 1.4fr 1fr;align-items:center;background:#eeeee635;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:3}.ride-stat,.control-group{padding:0 31px;border-left:1px solid var(--line);height:54px;display:flex;flex-direction:column;justify-content:space-between}.ride-stat{border:0;padding-left:0}.label,.control-label{font-size:10px;letter-spacing:.7px;color:#7b8678}.ride-stat>div{display:flex;gap:8px;align-items:baseline}.distance-value{font-family:Georgia,Times New Roman,serif;font-size:32px;letter-spacing:-.9px;color:#344536;font-variant-numeric:tabular-nums}.unit{font-size:10px;letter-spacing:0;font-weight:400;color:#939b8d}.stat-spark{width:45px;height:23px;color:#8b9d79;margin-left:auto;margin-right:4px}.control-label{display:flex;justify-content:space-between;align-items:center}.control-label b{font:18px Georgia,serif;color:var(--ink)}.range-line{display:flex;align-items:center;gap:10px;font-size:8px;white-space:nowrap;color:#929b8a;height:28px}input[type=range]{appearance:none;flex:1;width:100%;min-width:20px;height:3px;background:linear-gradient(to right,#768d69 36%,#d7ddcc 36%);border-radius:4px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:#657d58;border:2px solid #f7f6eb;border-radius:50%;box-shadow:0 0 0 1px #7d9071}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:#657d58;border:2px solid #f7f6eb;border-radius:50%}.segmented{display:flex;gap:4px}.segmented button{padding:7px 9px;border-radius:3px;background:transparent;font-size:10px;color:#7d8976;white-space:nowrap;transition:background .2s,color .2s}.segmented button.selected{background:#dee4d6;color:#3f5940}.segmented button:hover{background:#e2e6db}.atmosphere-control{padding-right:0}.atmosphere-buttons{display:flex;justify-content:space-between;gap:7px;align-items:center}.atmosphere-button{display:flex;align-items:center;gap:8px;font-size:10px;padding:4px 0;background:transparent}.atmosphere-button svg{width:19px;height:19px}.atmosphere-button[aria-pressed=true]{color:#b87540}.sound-button{border:1px solid #d4dacb;background:transparent;width:29px;height:27px;border-radius:3px;display:flex;justify-content:center;align-items:center;gap:2px}.sound-button span{width:2px;height:7px;background:#829372;border-radius:1px}.sound-button span:nth-child(2){height:13px}.sound-button span:nth-child(3){height:10px}.sound-button[aria-pressed=true] span{animation:sound-bars .9s ease-in-out infinite alternate}.sound-button span:nth-child(2){animation-delay:-.5s!important}.sound-button span:nth-child(3){animation-delay:-.2s!important}.sound-button span:nth-child(4){animation-delay:-.7s!important}@keyframes sound-bars{to{transform:scaleY(.3)}}.footer{position:absolute;bottom:30px;left:5.2%;right:5.2%;display:flex;justify-content:space-between;align-items:center;font:8px Arial,sans-serif;letter-spacing:1.3px;color:#939c8b;z-index:3}.interaction-hint{display:flex;align-items:center;gap:11px;font:9px PingFang SC,sans-serif;letter-spacing:.3px}.interaction-hint i{font-style:normal;color:#aab3a0}kbd{display:inline-block;font:inherit;font-size:.9em;border:1px solid #cbd3c0;border-radius:3px;padding:2px 5px;margin-right:3px}.footer-end{color:#6b7e61;font-size:8px;letter-spacing:2px}.footer-end span{font-size:16px;margin-left:12px}.scene-loading{position:absolute;top:48%;left:65%;transform:translate(-50%,-50%);display:flex;gap:13px;align-items:center;font-size:12px;color:#839373;transition:opacity .4s;pointer-events:none}.scene-loading.done{opacity:0}.loading-wheel{width:22px;height:22px;border:1px solid #bdc7b1;border-top:2px solid #5b7552;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:absolute;bottom:207px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:10;padding:12px 21px;border-radius:5px;background:#293b32ed;color:#f6f4e8;font-size:11px;letter-spacing:.6px;transition:transform .3s,opacity .3s;max-width:85%;text-align:center}.toast.visible{opacity:1;transform:translate(-50%)}.camera-flash{position:absolute;inset:0;background:#fff;z-index:20;pointer-events:none;opacity:0}.camera-flash.active{animation:flash .45s ease-out}@keyframes flash{0%{opacity:.85}to{opacity:0}}dialog{border:1px solid #fff9;background:#f3f2e7;color:var(--ink);padding:54px;width:min(500px,90%);box-shadow:0 25px 100px #253a3330;border-radius:7px}dialog::backdrop{background:#263b3648;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.dialog-close{position:absolute;top:15px;right:20px;background:none;font-size:25px;color:#89917f}dialog h2{font-family:Songti SC,STSong,serif;font-size:32px;line-height:1.55;font-weight:500;margin:23px 0}dialog p{font-size:12px;line-height:2.2;color:#778271}.dialog-shortcuts{display:flex;flex-wrap:wrap;gap:12px;font-size:9px;color:#718063;border-top:1px solid #d6dbcd;padding-top:22px;margin-top:23px}.dialog-credit{font-size:9px;line-height:1.9;color:#98a08f;margin-top:25px}.webgl-error{position:absolute;top:35%;left:48%;max-width:350px;padding:30px;background:#f7f6ee;z-index:4;border:1px solid #d7ddcc;border-radius:6px}.webgl-error p{font-size:12px;line-height:1.9;color:#75826d}.webgl-error button{padding:8px 15px;background:var(--ink);color:#fff;border-radius:3px}.immersive .hero{opacity:0;transform:translate(-20px);pointer-events:none}.immersive .hero button{pointer-events:none}.immersive .postcard{opacity:0;transform:translateY(-10px) rotate(5deg)}.immersive #scene{left:0;right:0}.immersive .scene-caption{left:50%;transform:translate(-50%);white-space:nowrap}@media(min-width:1700px){.hero h1{font-size:68px}.hero-copy{font-size:14px}.header{height:140px}.postcard{width:220px}.dashboard{height:120px;bottom:90px}.scene-caption{bottom:27%}}@media(max-width:1100px){.header{padding:0 4%}.header-nav{gap:25px;margin-left:0}.hero{left:4%;top:25%}.hero h1{font-size:39px}.eyebrow{font-size:8px;letter-spacing:1.5px}.postcard{right:4%;width:164px;padding:13px;top:19%}.postcard-bottom{font-size:6px}.scene-caption{left:44%;font-size:8px;bottom:27%}.caption-coords{display:none}.dashboard{left:4%;right:4%;grid-template-columns:.7fr 1.1fr 1.4fr 1fr}.ride-stat,.control-group{padding-left:20px;padding-right:20px}.ride-stat{padding-left:0}.atmosphere-control{padding-right:0}.segmented button{font-size:9px;padding:7px}.range-line{gap:7px}.stat-spark{display:none}.footer{left:4%;right:4%;letter-spacing:.7px}}@media(max-width:760px){body{overflow:auto}#app{min-height:960px;height:100svh;max-height:1200px}.header{height:90px;padding:0 6%}.brand{font-size:18px;gap:8px}.brand-icon{width:34px;height:34px}.brand-sub{font-size:7px;letter-spacing:3.5px;margin-top:6px}.header-nav{display:none}.weather{font-size:9px;gap:8px}.weather svg{width:17px}.weather-divider{margin:0 1px}.weather>span:last-child{font-size:16px}.hero{left:7%;top:128px}.hero h1{font-size:40px;line-height:1.4;margin:16px 0 14px;letter-spacing:-1px}.hero-copy{font-size:11px;line-height:2;margin:0 0 18px}.eyebrow{font-size:7px;letter-spacing:1.7px}.primary-button{padding:12px 16px;font-size:10px;gap:10px}.hero-footnote{display:none}.postcard{right:7%;top:130px;width:123px;padding:10px;transform:rotate(7deg)}.postcard-top{font-size:5px;letter-spacing:.5px}.postcard-title{font-size:18px;margin-top:12px}.postcard-title span{font-size:7px}.route-map{height:60px}.postcard-bottom{font-size:5px;gap:6px}.postcard-bottom span:last-child{display:none}#scene{inset:285px -18% 240px -17%}.scene-caption{bottom:249px;left:50%;transform:translate(-50%);white-space:nowrap;font-size:8px}.scene-tools{right:6%;bottom:287px;gap:7px}.tool-button{width:33px;height:33px}.dashboard{bottom:68px;left:7%;right:7%;height:162px;grid-template-columns:1fr 1.25fr;grid-template-rows:1fr 1fr;gap:0}.ride-stat,.control-group{height:49px;padding:0 0 0 18px}.ride-stat{padding:0;border:0}.distance-value{font-size:28px}.speed-control{padding-right:0}.view-control{border:0;padding-left:0}.atmosphere-control{padding-left:18px}.label,.control-label{font-size:9px}.segmented{gap:0}.segmented button{font-size:8px;padding:6px}.atmosphere-button{font-size:9px;gap:5px}.atmosphere-button svg{width:16px}.sound-button{width:26px;height:25px}.footer{bottom:24px;left:7%;right:7%;font-size:6px;line-height:1.7;letter-spacing:.5px}.interaction-hint{display:none}.footer-end{font-size:6px;letter-spacing:1px}.footer-end span{font-size:13px;margin-left:3px}.scene-loading{top:53%;left:50%;font-size:10px}.toast{bottom:245px;font-size:10px;white-space:nowrap}.immersive #scene{inset:95px -10% 240px}.immersive .hero,.immersive .postcard{visibility:hidden}.webgl-error{left:10%;right:10%;top:45%;font-size:12px}dialog{padding:36px 27px}.dialog-shortcuts{font-size:8px}dialog h2{font-size:28px}}body{overflow-x:hidden;overflow-y:auto}@media(max-width:760px){.hero h1{font-size:clamp(32px,8.7vw,40px)}.postcard{width:clamp(100px,26vw,123px)}.postcard-title{font-size:16px}.postcard-title span{font-size:6px}.postcard-top{font-size:4px}.postcard-bottom{font-size:5px}}@media(max-width:380px){.postcard{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}