:root{--ink:#163f40;--paper:#fff9eb;--coral:#db5c43;--muted:#65807b;--line:#16413e24}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:#edbd95}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ed8e49;outline-offset:5px}#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(0deg,#071e2236,transparent 35%,transparent 75%,#fff2da19);transition:opacity 1s}.topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:30px 40px;z-index:3;pointer-events:none}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;letter-spacing:3px;font-size:17px;font-weight:800;pointer-events:auto}.brand-icon{display:grid;place-items:center;font-size:39px;line-height:1;background:var(--ink);color:var(--paper);width:49px;height:49px;border-radius:50%;padding-bottom:6px}.brand-sub{display:block;font-size:8px;letter-spacing:2px;margin-top:6px;font-weight:500}.top-actions{display:flex;align-items:center;gap:10px;pointer-events:auto}.weather{font-size:12px;display:flex;align-items:center;gap:8px;margin-right:12px;letter-spacing:.4px}.weather #daydot{width:8px;height:8px;border-radius:50%;background:#d86c3c;box-shadow:0 0 0 4px #fff2cc50}.round-btn{border:1px solid #fff9eb88;background:#fff9ebd6;border-radius:30px;height:42px;padding:0 17px;display:flex;align-items:center;gap:9px;backdrop-filter:blur(15px);font-size:18px;transition:transform .2s,background .2s}.round-btn:hover{transform:translateY(-2px);background:var(--paper)}.btn-label{font-size:11px;letter-spacing:.2px}.btn-label b{font-weight:400;opacity:.65;margin-left:3px}.intro{position:fixed;top:23%;left:5%;pointer-events:none;transition:opacity 1.4s,transform 1.4s;z-index:2}.intro.hidden{opacity:0;transform:translateY(-14px);visibility:hidden}.eyebrow{font-size:9px;letter-spacing:2px;display:flex;align-items:center;gap:9px;font-weight:600}.eyebrow i{width:20px;height:1px;background:currentColor}.intro h1{font-family:Georgia,"Songti SC","SimSun",serif;font-weight:500;font-size:clamp(40px,4.5vw,70px);line-height:1.28;letter-spacing:1px;margin:23px 0 19px}.intro h1 span{color:#b34c34}.intro p{font-size:12px;line-height:2;letter-spacing:1px;color:#355f58}.ride-button{pointer-events:auto;border:0;border-radius:30px;background:var(--ink);color:var(--paper);padding:14px 22px;font-size:12px;letter-spacing:1px;margin-top:17px;display:flex;align-items:center;gap:35px;box-shadow:0 7px 20px #163f4020;transition:transform .2s}.ride-button:hover{transform:translateY(-3px)}.ride-button span{font-size:20px}.intro small{display:block;font-size:9px;letter-spacing:.4px;margin-top:14px;opacity:.7}.camera-control{position:fixed;right:40px;top:112px;z-index:3}.tiny-label{font-size:8px;letter-spacing:2px;display:block;text-align:right;margin:0 4px 10px}.camera-control>button{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid #fff9eb77;background:#fff9ebb5;border-radius:7px;font-size:12px;backdrop-filter:blur(14px)}.cam-icon{font-size:19px}.cam-fraction{font-size:9px;opacity:.55;letter-spacing:1px;margin-left:15px}.cam-dots{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}.cam-dots button{width:22px;height:3px;border:0;background:#16413e30;border-radius:3px;padding:0}.cam-dots button.active{background:var(--ink)}.bottom-hud{position:fixed;left:40px;right:40px;bottom:22px;z-index:3;pointer-events:none}.ride-status{display:flex;gap:8px;align-items:center;font-size:10px;letter-spacing:1px;margin:0 5px 12px;color:#fff9eb;text-shadow:0 1px 4px #0d343b60}.status-dot{width:6px;height:6px;background:#b4df99;border-radius:50%;box-shadow:0 0 0 4px #b4df9922}.status-hint{opacity:.65;margin-left:10px;font-size:9px;letter-spacing:.3px}.dashboard{display:flex;align-items:center;width:fit-content;gap:0;border:1px solid #fff9eb8c;border-radius:15px;background:#fff9ebed;backdrop-filter:blur(18px);box-shadow:0 12px 44px #143d4020;padding:17px 0;pointer-events:auto}.speed{padding:0 28px}.speed>div{display:flex;gap:7px;align-items:baseline}.speed #speed{font-family:Georgia,serif;font-size:45px;font-weight:500;line-height:1}.unit{font-size:11px;opacity:.6}.stat-label{font-size:8px;letter-spacing:1px;display:block;opacity:.65;margin-top:7px}.stat{padding:0 27px;border-left:1px solid var(--line)}.stat strong{font-size:23px;letter-spacing:-.5px;font-weight:500;font-variant-numeric:tabular-nums}.stat em{font-size:9px;font-style:normal;margin-left:6px;opacity:.55}.pedal-mark{padding:0 19px 0 5px}.pedal-mark svg{width:37px;height:37px;fill:none;stroke:#6f8d7a;stroke-width:1}.bottom-hud footer{display:flex;justify-content:space-between;align-items:center;margin-top:17px;color:#fff9eb;font-size:9px;text-shadow:0 1px 5px #143f4044}.keyboard{display:flex;gap:16px}.keyboard>span{display:flex;align-items:center;gap:4px}kbd{font-family:inherit;background:#fff9eb24;border:1px solid #fff9eb77;border-radius:4px;min-width:19px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;padding:0 5px}.quality{letter-spacing:.5px;opacity:.75}#toast{position:fixed;left:50%;top:108px;transform:translate(-50%,-30px);z-index:8;background:#fff9ebf5;box-shadow:0 10px 30px #153f401a;border:1px solid #fff8e7;border-radius:12px;padding:16px 24px;display:flex;align-items:center;gap:15px;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s}#toast.visible{opacity:1;transform:translate(-50%,0)}.toast-star{font-size:32px;color:#c7813c}#toast small{display:block;font-size:9px;letter-spacing:2px;color:#9b7850;margin-bottom:5px}#toast strong{font-size:14px;font-weight:500;letter-spacing:1px;white-space:nowrap}#catchFlash{position:fixed;inset:0;pointer-events:none;background:#fff2a3;opacity:0;z-index:1}.combo{position:fixed;right:43px;top:43%;text-align:right;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none}.combo.visible{opacity:1;transform:none}.combo strong{display:block;font:italic 68px Georgia,serif;color:#fff7dd;text-shadow:0 3px 0 #cc7952}.combo span{font-size:8px;letter-spacing:3px;color:#fff9eb}.touch-controls{display:none}#drawer{position:fixed;right:0;top:0;bottom:0;width:min(440px,100%);z-index:12;background:var(--paper);padding:35px 28px 20px;transform:translateX(101%);transition:transform .4s;overflow-y:auto}#drawer.open{transform:translateX(0)}.drawer-head{display:flex;align-items:flex-start;justify-content:space-between}.drawer-head .eyebrow{font-size:7px;letter-spacing:1.3px}.drawer-head h2{font:32px Georgia,"Songti SC",serif;margin:16px 0 25px}.drawer-head h2 span{display:block;font:10px Arial,sans-serif;letter-spacing:1px;margin-top:9px;opacity:.6}.drawer-head>button{border:0;background:transparent;font-size:29px;padding:0 4px}#achievementList{display:grid;grid-template-columns:1fr 1fr;gap:10px}.achievement{border:1px solid var(--line);border-radius:10px;padding:14px 12px;position:relative;opacity:.55;min-height:122px}.achievement.unlocked{opacity:1;background:#e4edda;border-color:#bfd1b6}.achievement .a-icon{font:22px Georgia,serif;margin-bottom:9px;color:#7c9a81}.achievement.unlocked .a-icon{color:#b9783b}.achievement h3{font-size:11px;font-weight:600;margin:0 0 6px}.achievement p{font-size:9px;line-height:1.6;opacity:.7;margin:0}.achievement .check{position:absolute;right:12px;top:13px;font-size:11px}.save-note{font-size:9px;opacity:.6;line-height:1.8;text-align:center;margin-top:24px}#scrim{position:fixed;inset:0;background:#0d303b55;z-index:11;opacity:0;pointer-events:none;transition:opacity .4s;backdrop-filter:blur(3px)}#scrim.open{opacity:1;pointer-events:auto}#loading{position:fixed;inset:0;z-index:30;background:#f6efd9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;transition:opacity .7s}.loading-wave{font:80px Georgia,serif;color:#1e625a;animation:drift 1.6s ease-in-out infinite}#loading strong{font:24px Georgia,"Songti SC",serif;font-weight:400}#loading>span:last-child{font-size:11px;color:#6e8c7a;letter-spacing:1px}#loading.done{opacity:0;pointer-events:none}@keyframes drift{50%{transform:translateX(10px)}}body.night .brand,body.night .weather,body.night .tiny-label{color:#f8ebcc}body.night .brand-icon{background:#f8ebcc;color:#163f40}body.night .intro{color:#f8ebcc}body.night .intro p{color:#dfddcb}body.night .intro h1 span{color:#ffb58d}body.night .cam-dots button.active{background:#fff2d7}
@media(min-width:1700px){.intro{left:7%;top:27%}.intro h1{font-size:76px}.topbar{padding:40px 55px}.bottom-hud{left:55px;right:55px;bottom:30px}}
@media(max-width:900px){.topbar{padding:22px}.brand{font-size:13px;letter-spacing:2px}.brand-icon{width:40px;height:40px;font-size:33px}.brand-sub{font-size:6px;letter-spacing:1px}.top-actions{gap:7px}.round-btn{height:37px;padding:0 12px}.weather{margin-right:5px;font-size:10px}.camera-control{right:22px;top:93px}.bottom-hud{left:22px;right:22px;bottom:18px}.intro{left:6%;top:24%}.intro h1{font-size:46px}.stat{padding:0 20px}.speed{padding:0 22px}.keyboard{gap:10px}.extra-key{display:none!important}}
@media(max-width:600px){.topbar{padding:18px 16px}.brand{font-size:11px;letter-spacing:1.8px;gap:7px}.brand-icon{width:34px;height:34px;font-size:28px}.brand-sub{font-size:5px;letter-spacing:.6px}.top-actions .btn-label{display:none}.round-btn{width:35px;height:35px;padding:0;justify-content:center}.weather{font-size:9px;gap:6px;margin-right:2px}.weather #daydot{width:5px;height:5px}.camera-control{right:16px;top:77px}.tiny-label{display:none}.camera-control>button{padding:8px 10px;font-size:10px;gap:8px}.cam-fraction{margin-left:4px;font-size:8px}.cam-icon{font-size:15px}.cam-dots{gap:5px;margin-top:7px}.cam-dots button{width:17px}.intro{top:19%;left:24px}.intro .eyebrow{font-size:6px;letter-spacing:1.3px}.intro h1{font-size:39px;margin:17px 0 13px}.intro p{font-size:10px;line-height:1.9}.ride-button{font-size:10px;padding:10px 17px;gap:25px;margin-top:14px}.intro small{font-size:8px;max-width:190px}.bottom-hud{left:15px;right:15px;bottom:max(15px,env(safe-area-inset-bottom))}.dashboard{width:100%;border-radius:12px;padding:12px 0;justify-content:space-around}.speed{padding:0 14px}.speed #speed{font-size:33px}.unit{font-size:9px}.stat{padding:0 13px}.stat strong{font-size:19px}.stat-label{font-size:7px;margin-top:5px;letter-spacing:.3px}.stat em{font-size:8px;margin-left:3px}.cadence-stat,.pedal-mark{display:none}.bottom-hud footer{margin-top:9px}.keyboard{display:none}.quality{font-size:7px;margin-left:auto}.ride-status{font-size:9px;margin-bottom:9px}.status-hint{font-size:8px;margin-left:3px}.touch-controls{display:flex;position:fixed;bottom:152px;left:14px;right:14px;justify-content:space-between;pointer-events:none;z-index:4}.touch-cluster{display:flex;gap:7px;align-items:end;pointer-events:auto}.touch-cluster>button{width:43px;height:43px;border:1px solid #fff7df99;border-radius:50%;background:#fff9ebc9;backdrop-filter:blur(10px);font-size:19px;touch-action:none;user-select:none}.touch-cluster>button:active,.touch-cluster>button.pressed{background:#1c5552;color:#fff9eb;transform:scale(.94)}.touch-right{gap:5px}.touch-right>button{width:36px;height:36px}.touch-right .wing-btn,.touch-right .jump-btn{font-size:10px;width:43px;height:43px}.touch-right .jump-btn{background:#174d4ae8;color:#fff9eb}.combo{right:20px;top:38%}.combo strong{font-size:50px}#toast{top:129px;padding:11px 18px}#toast strong{font-size:11px}#toast small{font-size:8px}.toast-star{font-size:25px}}
@media(pointer:coarse) and (min-width:601px){.touch-controls{display:flex;position:fixed;bottom:170px;left:24px;right:24px;justify-content:space-between;pointer-events:none;z-index:4}.touch-cluster{display:flex;gap:9px;pointer-events:auto}.touch-cluster button{width:50px;height:50px;border-radius:50%;border:1px solid #fff9eb99;background:#fff9ebc9;touch-action:none}.wing-btn,.jump-btn{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}.loading-wave{animation:none}}

@media(max-width:600px){.intro{top:128px}.intro h1{font-size:30px;line-height:1.18;margin:12px 0}.intro p,.intro small{display:none}.intro .ride-button{margin-top:12px;padding:9px 15px;font-size:9px}.intro .ride-button span{font-size:16px}}
