:root{--bg:#000;--fg:#f4f7fb;--dim:#9aa6b2;--accent:#38d6ff;--pro:#ffd24a;--warn:#ffb347;--danger:#ff5a4a;--ok:#5cff9d;--focus:#38d6ff;--panel:#10161d}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);margin:0}body{-webkit-font-smoothing:antialiased;place-items:center;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:grid;overflow:hidden}#app{flex-direction:column;gap:14px;width:600px;height:600px;padding:28px 32px;display:flex;position:relative;overflow:hidden}.top{justify-content:space-between;align-items:center;gap:12px;min-height:40px;display:flex}h1{letter-spacing:.01em;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:30px;font-weight:650;overflow:hidden}.pill{color:var(--pro);border:2px solid var(--pro);border-radius:999px;padding:2px 12px;font-size:16px;font-weight:700}.note{color:var(--dim);margin:0;font-size:20px;line-height:1.35}.note.small{font-size:17px}.note.dim{opacity:.7}.note.warn{color:var(--warn)}.note.pro{color:var(--pro)}.big{font-size:64px;font-weight:700;line-height:1}.big.ok{color:var(--ok);font-size:44px}.list{flex-direction:column;gap:10px;min-height:0;display:flex}.rail{gap:12px;margin-top:auto;display:flex}.btn{appearance:none;background:var(--panel);color:var(--fg);font:inherit;text-align:left;border:2px solid #26313c;border-radius:18px;outline:none;flex-direction:column;justify-content:center;gap:2px;min-height:72px;padding:10px 18px;font-size:22px;font-weight:600;display:flex}.btn .sub{color:var(--dim);text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:500;overflow:hidden}.btn .label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.btn:focus,.btn:focus-visible,.field:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus)}.btn.primary{border-color:var(--accent);background:#06364a;flex:1;align-items:center;min-height:88px;font-size:28px}.btn.chip{min-height:72px}.rail .btn.chip{flex:1}.btn.locked .label:before{content:"🔒 "}.btn.locked{color:var(--pro);border-color:#5a4a12}.btn.danger{color:var(--danger);border-color:#5a1f1a}.field{width:100%;min-height:88px;font:inherit;color:var(--fg);background:var(--panel);border:2px solid #26313c;border-radius:18px;outline:none;padding:0 22px;font-size:26px}.field::placeholder{color:var(--dim)}.code{letter-spacing:.18em;color:var(--accent);text-align:center;font-variant-numeric:tabular-nums;font-size:84px;font-weight:800}.s-drive{padding:0!important}.surface{background:0 0;border:0;outline:none;position:absolute;inset:0}.surface:focus-visible{box-shadow:none}.hud{pointer-events:none;position:absolute;inset:0}.slot{position:absolute}.hero{align-items:flex-start;gap:16px;display:flex}.arrow{color:var(--accent);flex:none;width:112px;height:112px}.arrow svg{width:100%;height:100%;display:block}.soon .arrow{color:#7cf0ff;filter:drop-shadow(0 0 6px #38d6ff99)}.words{flex-direction:column;gap:4px;min-width:0;display:flex}.dist{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:60px;font-weight:750;line-height:1}.dist.as-words{white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:38px;line-height:1.1;display:-webkit-box;overflow:hidden}.road{color:var(--fg);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:24px;font-weight:600;line-height:1.2;display:-webkit-box;overflow:hidden}.event{border-radius:12px;padding:6px 14px;font-size:22px;font-weight:700;display:none}.event.on{display:block}.event.reroute{color:var(--accent);border:2px solid var(--accent)}.event.alert{color:var(--warn);border:2px solid var(--warn)}.event.gps{color:var(--dim);border:2px solid #3a4652}.event.info{color:var(--ok);border:2px solid var(--ok)}.trip{color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:22px;font-weight:600}.speed{align-items:center;gap:10px;display:flex}.speed .num{font-variant-numeric:tabular-nums;font-size:52px;font-weight:750;line-height:1}.speed .unit{color:var(--dim);align-self:flex-end;padding-bottom:6px;font-size:16px}.speed .limit{border:5px solid var(--danger);width:58px;height:58px;color:var(--fg);border-radius:50%;justify-content:center;align-items:center;font-size:24px;font-weight:800;display:none}.speed .limit.on{display:flex}.speed.over .num{color:var(--danger)}.nextlist{margin:0;padding:0;list-style:none;display:none}.page-next .nextlist{flex-direction:column;gap:10px;display:flex}.nextlist li{color:var(--fg);align-items:center;gap:12px;font-size:22px;font-weight:600;display:flex}.nextlist .mini{width:40px;height:40px;color:var(--accent);flex:none}.nextlist .mini svg{width:100%;height:100%}.drivemenu{position:absolute;bottom:20px;left:24px;right:24px}.menu-open .trip,.menu-open .speed{visibility:hidden}.layout-corner .hero{top:28px;left:28px;right:28px}.layout-corner .event{top:168px;left:28px}.layout-corner .nextlist{top:224px;left:28px;right:28px}.layout-corner .trip{bottom:30px;left:28px}.layout-corner .speed{bottom:24px;right:28px}.layout-band .hero{border-bottom:2px solid #1b2530;padding-bottom:14px;top:20px;left:24px;right:24px}.layout-band .arrow{width:96px;height:96px}.layout-band .dist{font-size:52px}.layout-band .event{top:158px;left:24px}.layout-band .nextlist{top:214px;left:24px;right:24px}.layout-band .trip{bottom:26px;left:24px}.layout-band .speed{bottom:18px;right:24px}.layout-column .hero{flex-direction:column;gap:10px;width:220px;top:24px;left:24px}.layout-column .arrow{width:120px;height:120px}.layout-column .dist{font-size:56px}.layout-column .road{-webkit-line-clamp:3;font-size:22px}.layout-column .event{max-width:260px;top:336px;left:24px}.layout-column .nextlist{top:24px;left:270px;right:24px}.layout-column .trip{bottom:96px;left:24px}.layout-column .speed{bottom:22px;left:24px}