/* ---- the simulator (car-sim.js): everything is sized in units of 1/1280 of its width, --u ---------------------------- */
.sim{position:absolute; inset:0; overflow:hidden; --u:.5px; font:400 calc(22 * var(--u))/1.3 var(--body); color:var(--ink); background:var(--mapbg); user-select:none; -webkit-user-select:none;
  --panel:#FFFFFF; --ink:#14181B; --muted:#5D6870; --line:#E1E5E8; --chip:#EEF1F3; --accent:#1E6F5C; --on-accent:#FFFFFF; --mapbg:#E8ECEE}
.sim[data-night="1"]{--panel:#1C2126; --ink:#EEF2F4; --muted:#9AA6AD; --line:#2B333A; --chip:#2A3138; --accent:#8FD6C1; --on-accent:#04261D; --mapbg:#1A1D21}
.sim *{box-sizing:border-box}
.sim button{font:inherit; color:inherit; cursor:pointer}
.sim svg{display:block}
.sim-map{position:absolute; inset:0; cursor:grab; touch-action:none; overflow:hidden}
.sim-map.grab{cursor:grabbing}
.sim-img,.sim-ov{position:absolute; inset:0; width:100%; height:100%; transform:translate(calc(var(--dx,0) * var(--u)), calc(var(--dy,0) * var(--u)))}
.sim-img{opacity:0; transition:opacity .35s ease; object-fit:fill; pointer-events:none}
.sim-img.on{opacity:1}
.sim-ov{pointer-events:none}
.sim-lines{position:absolute; inset:0; width:100%; height:100%}
.sim-line{stroke:var(--accent); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; opacity:.5}
.sim-line.on{opacity:1; stroke-width:10; filter:drop-shadow(0 0 4px rgba(0,0,0,.25))}
.sim-pins{position:absolute; inset:0}
.sim-pin{position:absolute; transform:translate(-50%,-50%); pointer-events:auto; border:0; padding:0; display:grid; place-items:center; font-weight:700}
.sim-pin.car{width:calc(30 * var(--u)); height:calc(30 * var(--u)); border-radius:50%; background:#2F6FDB; border:calc(4 * var(--u)) solid #fff; box-shadow:0 0 0 calc(10 * var(--u)) rgba(47,111,219,.28); z-index:3}
.sim-pin.st{width:calc(44 * var(--u)); height:calc(44 * var(--u)); border-radius:50%; background:#8A949B; color:#fff; border:calc(3 * var(--u)) solid #fff; font-size:calc(22 * var(--u)); box-shadow:0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.35); cursor:pointer}
.sim-pin.st.fits{background:var(--accent); color:var(--on-accent)}
.sim[data-night="1"] .sim-pin.st{border-color:#101315}
.sim-pin.dest{width:calc(36 * var(--u)); height:calc(36 * var(--u)); background:#D9582B; border:calc(3 * var(--u)) solid #fff; border-radius:50% 50% 50% 0; transform:translate(-50%,-92%) rotate(-45deg); z-index:2}
.sim-panel{position:absolute; left:calc(24 * var(--u)); top:calc(24 * var(--u)); bottom:calc(70 * var(--u)); width:calc(440 * var(--u)); background:var(--panel); border-radius:calc(22 * var(--u)); box-shadow:0 calc(8 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden; z-index:5}
.sim-top,.sim-head{display:flex; align-items:center; gap:calc(12 * var(--u)); padding:calc(14 * var(--u)) calc(16 * var(--u)); border-bottom:calc(1 * var(--u)) solid var(--line); flex:none}
.sim-head b{font-size:calc(26 * var(--u)); font-weight:600; line-height:1.15; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sim-search{flex:1; display:flex; align-items:center; gap:calc(14 * var(--u)); background:var(--chip); border:0; border-radius:calc(30 * var(--u)); padding:calc(14 * var(--u)) calc(20 * var(--u)); text-align:left; color:var(--muted)}
.sim-search svg,.sim-back svg{width:calc(28 * var(--u)); height:calc(28 * var(--u))}
.sim-back{flex:none; width:calc(48 * var(--u)); height:calc(48 * var(--u)); border-radius:50%; border:0; background:var(--chip); display:grid; place-items:center}
.sim-input{flex:1; min-width:0; background:var(--chip); border:0; border-radius:calc(30 * var(--u)); padding:calc(14 * var(--u)) calc(20 * var(--u)); font:inherit; color:var(--ink); outline:none}
.sim-input:focus{box-shadow:0 0 0 calc(2 * var(--u)) var(--accent)}
.sim-scroll{flex:1; overflow-y:auto; scrollbar-width:none}
.sim-scroll::-webkit-scrollbar{display:none}
.sim-sec{padding:calc(16 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u)); font:600 calc(16 * var(--u))/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.sim-row{display:flex; align-items:center; gap:calc(16 * var(--u)); width:100%; padding:calc(13 * var(--u)) calc(18 * var(--u)); background:none; border:0; border-bottom:calc(1 * var(--u)) solid var(--line); text-align:left}
.sim-row:hover,.sim-row:focus-visible{background:var(--chip); outline:none}
.sim-row.sel{background:var(--chip)}
.sim-ic{flex:none; width:calc(46 * var(--u)); height:calc(46 * var(--u)); border-radius:50%; background:var(--chip); display:grid; place-items:center}
.sim-ic svg{width:calc(24 * var(--u)); height:calc(24 * var(--u))}
.sim-ic.num{background:#8A949B; color:#fff; font-weight:700; font-size:calc(22 * var(--u))}
.sim-row.fits .sim-ic.num{background:var(--accent); color:var(--on-accent)}
.sim-rt{flex:1; min-width:0}
.sim-rt b{display:block; font-weight:600; font-size:calc(23 * var(--u)); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sim-rt span{display:block; color:var(--muted); font-size:calc(18 * var(--u)); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sim-rr{flex:none; color:var(--muted); font-size:calc(18 * var(--u))}
.sim-chips{display:flex; gap:calc(8 * var(--u)); padding:calc(10 * var(--u)) calc(16 * var(--u)); flex:none; overflow:hidden}
.sim-chip{border:calc(1.5 * var(--u)) solid var(--line); background:none; border-radius:calc(22 * var(--u)); padding:calc(8 * var(--u)) calc(16 * var(--u)); white-space:nowrap; font-size:calc(18 * var(--u))}
.sim-chip.on{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.sim-note,.sim-sub{margin:0; padding:calc(12 * var(--u)) calc(20 * var(--u)); color:var(--muted); font-size:calc(19 * var(--u))}
.sim-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:calc(8 * var(--u)); padding:calc(6 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u))}
.sim-stats div{background:var(--chip); border-radius:calc(14 * var(--u)); padding:calc(12 * var(--u))}
.sim-stats b{display:block; font-size:calc(28 * var(--u)); line-height:1.1}
.sim-stats span{display:block; color:var(--muted); font-size:calc(15 * var(--u)); margin-top:calc(4 * var(--u))}
.sim-tags{display:flex; flex-wrap:wrap; gap:calc(8 * var(--u)); padding:calc(4 * var(--u)) calc(20 * var(--u))}
.sim-tags .tag{background:var(--chip); border-radius:calc(20 * var(--u)); padding:calc(6 * var(--u)) calc(14 * var(--u)); font-size:calc(17 * var(--u))}
.sim-tags .tag.ok{background:var(--accent); color:var(--on-accent)}
.sim-plug{margin:0; padding:calc(5 * var(--u)) calc(20 * var(--u)); font-size:calc(19 * var(--u))}
.sim-acts{display:flex; gap:calc(10 * var(--u)); padding:calc(12 * var(--u)) calc(16 * var(--u)); border-top:calc(1 * var(--u)) solid var(--line); flex:none}
.sim-btn{flex:1; border:calc(1.5 * var(--u)) solid var(--line); background:var(--chip); border-radius:calc(16 * var(--u)); padding:calc(16 * var(--u)); font-weight:600; font-size:calc(22 * var(--u))}
.sim-btn.primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.sim-foot{display:flex; justify-content:space-between; gap:calc(8 * var(--u)); padding:calc(10 * var(--u)) calc(20 * var(--u)); color:var(--muted); font-size:calc(15 * var(--u)); border-top:calc(1 * var(--u)) solid var(--line); flex:none}
.sim-drive{flex:1; padding:calc(22 * var(--u)) calc(24 * var(--u)); display:flex; flex-direction:column; gap:calc(10 * var(--u))}
.sim-kick{font:600 calc(16 * var(--u))/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.sim-dest{font-size:calc(30 * var(--u)); line-height:1.15}
.sim-big{margin-top:calc(8 * var(--u))}
.sim-big b{display:block; font-size:calc(64 * var(--u)); line-height:1; letter-spacing:-.02em}
.sim-big span{display:block; margin-top:calc(8 * var(--u)); color:var(--muted); font-size:calc(22 * var(--u))}
.sim-meter{height:calc(10 * var(--u)); background:var(--chip); border-radius:calc(6 * var(--u)); overflow:hidden; margin-top:calc(14 * var(--u))}
.sim-meter i{display:block; height:100%; width:0; background:var(--accent)}
.sim-batt{margin:calc(6 * var(--u)) 0 0; font-size:calc(24 * var(--u)); font-weight:600}
.sim-demo{margin:0; color:var(--muted); font-size:calc(16 * var(--u))}
/* compact (a phone): the same places as on a desktop, smaller: the card on the left, the map to its right, the map's buttons in a slim column at the top right */
.sim[data-orient="compact"]{font-size:calc(26 * var(--u))}
.sim[data-orient="compact"] .sim-panel{left:calc(12 * var(--u)); right:auto; top:calc(12 * var(--u)); bottom:calc(58 * var(--u)); width:calc(366 * var(--u)); border-radius:calc(18 * var(--u))}
.sim[data-orient="compact"] .sim-strip{right:calc(12 * var(--u)); left:auto; top:calc(12 * var(--u)); bottom:auto; display:flex; flex-direction:column; gap:calc(12 * var(--u))}
.sim[data-orient="compact"] .sim-sbtn{width:calc(62 * var(--u)); height:calc(62 * var(--u)); border-radius:calc(14 * var(--u)); background:color-mix(in srgb, var(--panel) 86%, transparent); position:relative}
.sim[data-orient="compact"] .sim-sbtn::after{content:""; position:absolute; inset:calc(-6 * var(--u))}
.sim[data-orient="compact"] .sim-sbtn svg{width:calc(30 * var(--u)); height:calc(30 * var(--u))}
.sim[data-orient="compact"] .sim-bar{height:calc(46 * var(--u)); font-size:calc(24 * var(--u)); padding:0 calc(20 * var(--u))}
.sim[data-orient="compact"] .sim-top,.sim[data-orient="compact"] .sim-head{padding:calc(10 * var(--u)) calc(12 * var(--u))}
.sim[data-orient="compact"] .sim-head b{font-size:calc(29 * var(--u))}
.sim[data-orient="compact"] .sim-back{width:calc(106 * var(--u)); height:calc(106 * var(--u))}
.sim[data-orient="compact"] .sim-back svg,.sim[data-orient="compact"] .sim-search svg{width:calc(42 * var(--u)); height:calc(42 * var(--u))}
.sim[data-orient="compact"] .sim-search,.sim[data-orient="compact"] .sim-input{padding-block:calc(30 * var(--u)); font-size:calc(26 * var(--u))}
.sim[data-orient="compact"] .sim-row{min-height:calc(106 * var(--u)); padding:calc(10 * var(--u)) calc(14 * var(--u)); gap:calc(14 * var(--u))}
.sim[data-orient="compact"] .sim-ic{width:calc(56 * var(--u)); height:calc(56 * var(--u))}
.sim[data-orient="compact"] .sim-ic svg{width:calc(30 * var(--u)); height:calc(30 * var(--u))}
.sim[data-orient="compact"] .sim-rt b{font-size:calc(28 * var(--u))}
.sim[data-orient="compact"] .sim-rt span,.sim[data-orient="compact"] .sim-rr{font-size:calc(21 * var(--u))}
.sim[data-orient="compact"] .sim-sec{font-size:calc(18 * var(--u))}
.sim[data-orient="compact"] .sim-note,.sim[data-orient="compact"] .sim-sub{font-size:calc(22 * var(--u)); padding:calc(10 * var(--u)) calc(16 * var(--u))}
.sim[data-orient="compact"] .sim-chips{overflow-x:auto; scrollbar-width:none; padding:calc(8 * var(--u)) calc(12 * var(--u))}
.sim[data-orient="compact"] .sim-chip{min-height:calc(90 * var(--u)); padding:0 calc(26 * var(--u)); font-size:calc(23 * var(--u)); flex:none}
.sim[data-orient="compact"] .sim-stats b{font-size:calc(32 * var(--u))}
.sim[data-orient="compact"] .sim-stats span{font-size:calc(18 * var(--u))}
.sim[data-orient="compact"] .sim-btn{min-height:calc(106 * var(--u)); font-size:calc(27 * var(--u))}
.sim[data-orient="compact"] .sim-foot{font-size:calc(17 * var(--u)); padding:calc(8 * var(--u)) calc(14 * var(--u))}
.sim[data-orient="compact"] .sim-plug,.sim[data-orient="compact"] .sim-tags .tag{font-size:calc(22 * var(--u))}
.sim[data-orient="compact"] .sim-dest{font-size:calc(32 * var(--u))}
.sim[data-orient="compact"] .sim-big b{font-size:calc(66 * var(--u))}
.sim[data-orient="compact"] .sim-big span,.sim[data-orient="compact"] .sim-batt{font-size:calc(26 * var(--u))}
.sim[data-orient="compact"] .sim-drive{padding:calc(14 * var(--u)) calc(18 * var(--u))}
/* a finger on the map scrolls the page up and down; dragging sideways still moves the map */
@media (pointer:coarse){ .sim-map{touch-action:pan-y} }
.sim-strip{position:absolute; right:calc(24 * var(--u)); top:calc(24 * var(--u)); display:flex; flex-direction:column; gap:calc(10 * var(--u)); z-index:5}
.sim-sbtn{width:calc(64 * var(--u)); height:calc(64 * var(--u)); border-radius:calc(16 * var(--u)); border:0; background:var(--panel); color:var(--ink); display:grid; place-items:center; box-shadow:0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.3)}
.sim-sbtn svg{width:calc(30 * var(--u)); height:calc(30 * var(--u))}
.sim-sbtn:hover,.sim-sbtn:focus-visible{outline:none; box-shadow:0 0 0 calc(3 * var(--u)) var(--accent)}
.sim-bar{position:absolute; left:0; right:0; bottom:0; height:calc(46 * var(--u)); background:rgba(10,12,14,.82); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 calc(28 * var(--u)); font-size:calc(18 * var(--u)); z-index:6}
.sim-bar svg{width:calc(24 * var(--u)); height:calc(24 * var(--u))}
.sim-bar-l,.sim-bar-r{display:inline-flex; align-items:center; gap:calc(10 * var(--u))}
.sim.sim-nomap .sim-map::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(128,128,128,.12) 0 calc(12 * var(--u)),transparent 0 calc(24 * var(--u)))}

/* ---- the cabin on the home page (car-showcase.js): thin dash, a light line, one large floating display under a glass roof ---- */
.showcase{--sky1:#8EC3EC; --sky2:#EAF2F6; --glow:rgba(255,238,200,.95); --city:#8DA0AD; --road:#5A6066; --lane:#EDEDED; --dash1:#2C3136; --dash2:#0D0F11; --amb:#5EE0BE; --lamp:.12}
.showcase[data-night="1"]{--sky1:#04070F; --sky2:#1A2A4A; --glow:rgba(255,196,120,.18); --city:#0C1322; --road:#14171B; --lane:#6B7076; --dash1:#1D2125; --dash2:#07090A; --amb:#79F0D0; --lamp:.5}
.showcase[hidden]{display:none}
.stage{position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:clamp(14px,2vw,28px); background:#000; isolation:isolate; container-type:inline-size; box-shadow:0 30px 80px -34px rgba(0,0,0,.7); --px:0; --py:0}
.art{position:absolute; inset:-3%; width:106%; height:106%; max-width:none; display:block; pointer-events:none;
  transform:translate3d(calc(var(--px) * var(--d,0) * 1px), calc(var(--py) * var(--d,0) * 1px), 0); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.slot{position:absolute; left:20.6%; top:33.3%; width:58.8%; aspect-ratio:16/9; overflow:hidden; border-radius:1.1cqw; background:#050607;
  box-shadow:0 0 0 .55cqw #06080A, 0 0 0 .75cqw #343A40, 0 1.6cqw 3.4cqw rgba(0,0,0,.6)}
.slot .glass{position:absolute; inset:0; z-index:9; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 66%,rgba(255,255,255,.07) 100%)}
.slot .glass::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%); transform:translateX(-120%)}
.slot:hover .glass::after{transform:translateX(120%); transition:transform 1.1s ease}
.amb{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55} 50%{opacity:1}}
.zw{position:absolute; inset:0; transform-origin:0 0; transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.stage.zoomed .zw{transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--tk,1))}
.sc-note{margin:14px 0 0; text-align:center}
@media (prefers-reduced-motion:no-preference){
  .showcase .stage{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none}}
}
@media (prefers-reduced-motion:reduce){ .art{transition:none} .amb{animation:none} .zw{transition:none} }
@media (max-width:900px){ .stage{border-radius:18px} }
/* phones: the screen keeps the proportions of a real one, wide, across the stage; "Full screen" turns it landscape */
@media (max-width:700px){
  .stage{aspect-ratio:1/.95}
  .slot{aspect-ratio:16/10; left:4%; width:92%; top:22%}
}
.slot.fs{position:fixed; z-index:1000; left:0; top:0; width:100vw; height:100vh; width:100dvw; height:100dvh; aspect-ratio:auto; border-radius:0; box-shadow:none; background:#000; transform:none}
@media (orientation:portrait){
  .slot.fs{left:100vw; left:100dvw; width:100vh; width:100dvh; height:100vw; height:100dvw; transform-origin:0 0; transform:rotate(90deg)}
}
.slot.fs .glass{display:none}
.slot.fs .sim-map{touch-action:none}
.sim[data-orient="compact"] .sim-drive{min-height:0; overflow-y:auto; gap:calc(4 * var(--u)); padding:calc(10 * var(--u)) calc(16 * var(--u))}
.sim[data-orient="compact"] .sim-dest{font-size:calc(27 * var(--u))}
.sim[data-orient="compact"] .sim-big{margin-top:calc(2 * var(--u))}
.sim[data-orient="compact"] .sim-big b{font-size:calc(54 * var(--u))}
.sim[data-orient="compact"] .sim-big span,.sim[data-orient="compact"] .sim-batt{font-size:calc(22 * var(--u))}
.sim[data-orient="compact"] .sim-meter{margin-top:calc(8 * var(--u))}
.sim[data-orient="compact"] .sim-demo{font-size:calc(15 * var(--u))}
.sim[data-orient="compact"] .sim-stats{gap:calc(6 * var(--u)); padding:calc(4 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u))}
.sim[data-orient="compact"] .sim-stats div{padding:calc(10 * var(--u)) calc(8 * var(--u)); min-width:0}
.sim[data-orient="compact"] .sim-stats b{font-size:calc(27 * var(--u)); white-space:nowrap}
.sim[data-orient="compact"] .sim-stats span{font-size:calc(15 * var(--u)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.sim-fs{appearance:none; border:0; background:none; color:#fff; width:calc(40 * var(--u)); height:calc(40 * var(--u)); padding:0; display:grid; place-items:center; position:relative; cursor:pointer; margin-right:calc(-6 * var(--u))}
.sim-fs svg,.sim-bar .sim-fs svg{width:calc(32 * var(--u)); height:calc(32 * var(--u)); fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease}
.sim-fs::after{content:""; position:absolute; inset:calc(-8 * var(--u))}
.sim-fs:hover svg,.sim-fs:focus-visible svg{transform:scale(1.18)}
.sim-fs:focus-visible{outline:calc(2 * var(--u)) solid #fff; outline-offset:calc(2 * var(--u)); border-radius:calc(6 * var(--u))}
.sim[data-orient="compact"] .sim-fs{width:calc(52 * var(--u)); height:calc(52 * var(--u))}
.sim[data-orient="compact"] .sim-fs::after{inset:calc(-14 * var(--u))}