:root{
  --paper:#f4f6fa;
  --paper-2:#eef1f7;
  --ink:#1c2b4f;
  --ink-2:#3b4a6b;
  --ink-soft:#7c8aa6;
  --grid:#e7ebf2;
  --grid-major:#d8dfeb;
  --accent:#c94b31;
  --dim:#2f7d76;
  --btn-active:#1c2b4f;
  --btn-toggle:#4c5d84;
  --race:#d7141a;     /* PLAY: racecar red */
  --race-2:#b30f14;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --minor:14px;
  --major:70px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--paper);overflow:hidden;font-family:var(--mono);color:var(--ink);
  -webkit-font-smoothing:antialiased;user-select:none}
body{
  background-color:var(--paper);
  background-image:
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:var(--major) var(--major), var(--major) var(--major), var(--minor) var(--minor), var(--minor) var(--minor);
  background-position:center center;
}
#sheet{position:absolute;inset:0;}
.frame{position:absolute;pointer-events:none;border:1px solid var(--ink);opacity:.75}
.frame-outer{inset:10px 12px 10px 12px}
.frame-inner{inset:34px 36px 34px 36px}
.zone{position:absolute;pointer-events:none;display:flex;color:var(--ink-soft);font-size:10px;letter-spacing:.08em}
.zone-top{top:10px;left:36px;right:36px;height:24px}
.zone-bottom{bottom:10px;left:36px;right:36px;height:24px}
.zone-left{top:34px;bottom:34px;left:12px;width:24px;flex-direction:column}
.zone-right{top:34px;bottom:34px;right:12px;width:24px;flex-direction:column}
.zone span{flex:1;display:flex;align-items:center;justify-content:center;position:relative}
.zone-top span:not(:last-child)::after,.zone-bottom span:not(:last-child)::after{content:"";position:absolute;right:0;top:-2px;bottom:-2px;width:1px;background:var(--ink);opacity:.5}
.zone-left span:not(:last-child)::after,.zone-right span:not(:last-child)::after{content:"";position:absolute;bottom:0;left:-2px;right:-2px;height:1px;background:var(--ink);opacity:.5}

#stage{position:absolute;inset:35px 37px 35px 37px;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#gl.dragging{cursor:grabbing}
#gl.hovering{cursor:pointer}
#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;font-family:var(--mono)}
#overlay text{font-family:var(--mono)}

/* the header is the page links and the agent chip, top left; the sheet carries no title here */
header{position:absolute;top:50px;display:flex;gap:12px;align-items:flex-start;pointer-events:none}
#hdr-left{left:52px}

.panel{position:absolute;background:rgba(244,246,250,.92);border:1.5px solid var(--ink);box-shadow:0 0 0 3px rgba(244,246,250,.6);
  transition:opacity .35s ease, transform .35s ease;pointer-events:auto}
.panel.hidden{opacity:0;pointer-events:none;transform:translateY(-6px)}
.panel-h{font-size:11.5px;font-weight:600;letter-spacing:.28em;padding:6px 8px 6px 12px;border-bottom:1.5px solid var(--ink);background:rgba(28,43,79,.06);display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-min{font-family:var(--mono);font-size:13px;line-height:1;width:20px;height:20px;padding:0;border:1.2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;letter-spacing:0}
.panel-min:hover{background:rgba(28,43,79,.1)}
.panel-min:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.panel.min > :not(.panel-h):not(.tb-title){display:none}
.panel.min .panel-h,.panel.min .tb-title{border-bottom:none}
.panel.min{width:auto;min-width:0}
.panel.min .tb-big{font-size:12px;line-height:1.4}
.panel.min .tb-lbl{display:none}
#key{left:52px;top:92px;width:470px}
.key-grid{display:grid;grid-template-columns:1fr 1fr;padding:8px 10px 4px 10px;gap:0 8px}
.key-grid > div:nth-child(odd){border-right:1px solid rgba(28,43,79,.25);padding-right:8px}
.key-item{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-2);height:27px;white-space:nowrap;cursor:pointer}
.key-item.hot{color:var(--accent)}
.num{width:20px;height:20px;border:1.2px solid var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:var(--ink);flex:none;background:var(--paper)}
.key-item.hot .num{border-color:var(--accent);color:var(--accent)}
.key-foot{display:flex;justify-content:space-between;border-top:1px solid rgba(28,43,79,.35);padding:6px 12px;font-size:9.5px;letter-spacing:.14em;color:var(--ink-soft)}
.key-foot b{color:var(--ink);font-weight:600}

#instr{right:52px;top:92px;width:292px}
.instr-grid{padding:8px 12px 10px 12px;display:grid;grid-template-columns:1fr auto;row-gap:5px;font-size:10.5px;letter-spacing:.06em}
.instr-grid .k{color:var(--ink-soft)}
.instr-grid .v{color:var(--ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

#controls{left:52px;bottom:52px;padding:8px 12px}
.ctl-row{display:flex;align-items:center;gap:10px;margin:4px 0}
.ctl-label{width:52px;font-size:9.5px;letter-spacing:.2em;color:var(--ink-soft)}
.ctl-btns{display:flex;gap:5px}
.btn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);
  min-width:72px;height:27px;padding:0 6px;cursor:pointer;transition:background .35s ease,color .35s ease}
.btn:hover{background:rgba(28,43,79,.08)}
.btn.active{background:var(--btn-active);color:#fff}
.btn.toggled{background:var(--btn-active);color:#fff;border-color:var(--ink)}
.btn.pulse{animation:pulse .5s ease}
@keyframes pulse{0%{background:var(--accent);color:#fff}100%{background:var(--paper);color:var(--ink)}}

#titleblock{right:52px;bottom:52px;width:480px}
.tb-title{padding:8px 8px 10px 14px;border-bottom:1.5px solid var(--ink);display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.panel.min .tb-title{padding:6px 8px 6px 12px;align-items:center}
.tb-lbl{font-size:9px;letter-spacing:.22em;color:var(--ink-soft)}
.tb-big{font-size:15px;font-weight:600;letter-spacing:.18em;line-height:1.55;margin-top:2px}
.tb-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.tb-cell{padding:6px 10px 7px 12px;border-right:1px solid rgba(28,43,79,.35);border-bottom:1px solid rgba(28,43,79,.35)}
.tb-cell:nth-child(4n){border-right:none}
.tb-cell:nth-last-child(-n+4){border-bottom:none}
.tb-cell .tb-lbl{font-size:8.5px}
.tb-cell .tb-val{font-size:11.5px;font-weight:600;letter-spacing:.08em;margin-top:2px;white-space:nowrap}
.tb-cell .tb-val.red{color:var(--accent)}

#viewtitle{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity .4s ease}
#viewtitle.show{opacity:1}
.vt-rule{width:175px;height:1.5px;background:var(--ink);margin:0 auto 7px auto}
.vt-name{font-size:16px;font-weight:600;letter-spacing:.36em}
.vt-sub{font-size:10px;letter-spacing:.14em;color:var(--ink-soft);margin-top:5px}

#tooltip{position:absolute;pointer-events:none;background:rgba(244,246,250,.96);border:1.5px solid var(--accent);padding:6px 12px 7px 12px;
  width:max-content;max-width:min(280px,calc(100% - 16px));opacity:0;box-shadow:0 0 0 3px rgba(244,246,250,.7);z-index:5}
#tooltip.show{opacity:1}
.tt-name{font-size:11.5px;font-weight:600;letter-spacing:.2em;color:var(--accent)}
.tt-desc{font-size:10px;line-height:1.4;letter-spacing:.06em;color:var(--ink-soft);margin-top:3px;white-space:normal}
#tooltip.compact{width:max-content;max-width:min(176px,calc(100% - 16px));padding:6px 8px;border-width:1px;box-shadow:none}
#tooltip.compact .tt-name{font-size:11px;line-height:1.35;letter-spacing:.04em;overflow-wrap:anywhere}
#tooltip.compact .tt-desc{font-size:10px;line-height:1.4;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
#part-pointer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;display:none;overflow:hidden;fill:none;stroke:var(--accent);stroke-width:1}
#part-pointer.show{display:block}
#part-pointer .part-pointer__point{fill:var(--accent)}
#part-pointer .part-pointer__badge{fill:var(--paper)}
#part-pointer text{fill:var(--accent);stroke:none;font:600 10px var(--mono);text-anchor:middle}

#fallback[hidden]{display:none}
#fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink);background:var(--paper);z-index:50;text-align:center;padding:40px}

@media (max-width:1700px){ .vt-sub{font-size:9.5px;letter-spacing:.07em} }
@media (max-width:1100px){
  #key{width:380px}.key-item{font-size:10px}
  #titleblock{width:400px}
  #instr{width:250px}
}

/* ---- the console: CONSOLE (the tray's last button) fades every card away, matching the PANELS
   dissolve, and brings them back ---- */
#key,#instr,#controls,#titleblock,#hdr-left{transition:opacity .45s ease,transform .45s ease}
/* the very first paint must not animate: a page opened with the cards hidden should simply have none */
body.no-card-anim #key,body.no-card-anim #instr,body.no-card-anim #controls,
body.no-card-anim #titleblock,body.no-card-anim #hdr-left{transition:none}
body.cards-off #key,body.cards-off #instr,body.cards-off #controls,
body.cards-off #titleblock,body.cards-off #hdr-left{
  opacity:0;transform:translateY(-8px);pointer-events:none}

/* ---- narrow sheets ------------------------------------------------------------------
   The drawing sheet is drawn for a wide aspect. As the window narrows the cards are shrunk,
   then re-stacked down the left, then reduced to the controls and a one-line title block, so
   the drawing itself always keeps the middle of the sheet. ---------------------------------- */
@media (max-width:1500px){
  #key{width:412px}
  .key-item{font-size:10.5px;height:24px}
  #titleblock{width:392px}
  .tb-big{font-size:13px;letter-spacing:.14em}
  #instr{width:262px}
}
@media (max-width:1240px){
  /* the controls panel (with the tray as its third row) moves up under the page links */
  #controls{bottom:auto;top:92px;left:52px}
  #key{top:252px;width:392px}
  #instr{top:92px;width:236px}
  .instr-grid{font-size:9.5px}
  #titleblock{width:320px}
  .tb-grid{grid-template-columns:repeat(2,1fr)}
  .tb-cell:nth-child(2n){border-right:none}
  .tb-cell:nth-child(4n){border-right:1px solid rgba(28,43,79,.35)}
}
@media (max-width:980px){
  #key,#instr{display:none}
  #stage{inset:28px 30px}
  .frame-inner{inset:27px 29px}
  .zone-top{top:8px;left:29px;right:29px;height:19px}
  .zone-bottom{bottom:8px;left:29px;right:29px;height:19px}
  .zone-left{top:27px;bottom:27px;left:10px;width:19px}
  .zone-right{top:27px;bottom:27px;right:10px;width:19px}
  header{top:40px}
  #hdr-left{left:40px}
  #controls{top:88px;left:40px;padding:6px 9px}
  .btn{min-width:62px;height:24px;font-size:10px;padding:0 5px}
  .ctl-label{width:46px;font-size:8.5px;letter-spacing:.14em}
  #titleblock{width:290px;right:40px;bottom:40px}
  .tb-big{font-size:11.5px;letter-spacing:.1em}
  .tb-cell .tb-val{font-size:10px}
}
@media (max-width:640px){
  #stage{inset:20px 20px}
  .frame-outer{inset:6px 6px}
  .frame-inner{inset:19px 19px}
  .zone-top,.zone-bottom,.zone-left,.zone-right{display:none}
  header{top:28px}
  #hdr-left{left:26px;gap:8px}
  #controls{top:60px;left:26px;right:26px;padding:5px 7px}
  .ctl-row{gap:6px;margin:3px 0;min-width:0}
  .ctl-label{width:38px;font-size:8px;letter-spacing:.1em}
  .ctl-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;flex:1;min-width:0}
  .btn{min-width:0;width:100%;height:23px;font-size:9.5px;padding:0 2px;letter-spacing:.04em;overflow:hidden}
  #titleblock{width:auto;left:26px;right:26px;bottom:26px;max-width:calc(100vw - 52px)}
  .tb-title{padding:5px 8px 6px 10px}
  .tb-lbl{font-size:7.5px}
  .tb-big{font-size:10.5px;line-height:1.4;letter-spacing:.06em;overflow-wrap:anywhere}
  .tb-grid{display:none}
  #viewtitle{bottom:44px}
  .vt-name{font-size:11px;letter-spacing:.18em}
  .vt-rule{width:110px;margin-bottom:4px}
  .vt-sub{font-size:8px}
}

/* short viewports (phone held sideways, or a squat browser pane): the cards have to give up
   the vertical space, so the title block loses its grid and the controls sit in one strip */
@media (max-height:520px){
  #key,#instr{display:none}
  #controls{top:auto;bottom:20px;left:20px;padding:5px 8px}
  #titleblock{bottom:20px;right:20px;width:auto;max-width:44vw}
  .tb-grid{display:none}
  .tb-big{font-size:10.5px;line-height:1.35}
  #viewtitle{display:none}
  header{top:22px}
  #hdr-left{left:22px}
  #stage{inset:16px 18px}
  .frame-outer{inset:5px 6px}
  .frame-inner{inset:15px 17px}
  .zone-top,.zone-bottom,.zone-left,.zone-right{display:none}
}

/* The tour sits above the controls on wide sheets (above the tray too, when the console puts it in
   the controls panel), beside the title block below 1240. */
#tour-card{position:absolute;left:52px;bottom:166px;width:460px;max-width:calc(100vw - 104px);
  padding:12px 14px;background:rgba(244,246,250,.96);border-top:1.5px solid var(--ink);
  color:var(--ink);font-family:var(--mono);pointer-events:none}
#tour-card[hidden]{display:none}
.tour-step{font-size:10px;letter-spacing:.14em;color:var(--accent)}
.tour-title{font-size:13px;font-weight:600;letter-spacing:.16em;margin-top:7px}
.tour-caption{font-size:11px;line-height:1.6;margin:7px 0 10px;color:var(--ink-2)}
.tour-hint{font-size:9px;letter-spacing:.1em;color:var(--ink-soft)}
body.tray-in-panel #tour-card{bottom:208px}
@media (max-width:1240px){#tour-card,body.tray-in-panel #tour-card{bottom:52px;width:460px}}
/* console off, the tray holds the foot of the sheet: a held tour capture with ?cards=0 sits above it */
@media (min-width:981px) and (min-height:521px){body.cards-off #tour-card{bottom:108px}}
@media (max-width:980px){#tour-card{left:40px;bottom:240px;width:400px}}
@media (max-width:640px){#tour-card{left:26px;bottom:110px;width:calc(100vw - 52px);max-width:none}}
@media (max-height:520px){#tour-card{left:22px;top:70px;bottom:auto;width:400px}}

/* Registration and navigation use the same ink, rules and type as the sheet. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.header-tools{display:flex;align-items:center;gap:10px;pointer-events:auto}
.header-tools button,.header-tools a{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink);background:var(--paper)}
#agent-chip{border:1px solid var(--ink);padding:2px 6px;cursor:pointer;line-height:1.3}
#agent-chip.registered{color:var(--accent);border-color:var(--accent)}
.header-tools a{text-decoration:none;border-bottom:1px solid var(--ink-soft)}
.header-tools a:hover,#agent-chip:hover{color:var(--accent)}
.header-tools :focus-visible,.key-item:focus-visible,#gl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#agent-tools{left:52px;top:88px;width:530px;max-width:calc(100vw - 104px);max-height:calc(100vh - 168px);overflow:auto;z-index:8;background:var(--paper)}
#agent-tools[hidden]{display:none}
#agent-tools-list{display:grid;grid-template-columns:max-content 1fr;gap:8px 14px;padding:12px;margin:0;font-size:10px;line-height:1.5}
#agent-tools-list dt{color:var(--accent);font-weight:500}
#agent-tools-list dd{margin:0;color:var(--ink-2)}
body.cards-off #hdr-left{opacity:1;transform:none}
body.cards-off #key,body.cards-off #instr,body.cards-off #titleblock,body.cards-off #controls{visibility:hidden}
.panel.hidden .key-item{visibility:hidden}
@media (max-width:640px){
  #controls{top:82px}
  #agent-tools{left:26px;top:82px;max-width:calc(100vw - 52px);max-height:calc(100vh - 108px)}
  #agent-tools-list{grid-template-columns:1fr;gap:2px}
  #agent-tools-list dd{margin-bottom:7px}
}
@media (max-height:520px){#agent-tools{top:76px;max-height:calc(100vh - 96px)}}

/* header links: legible as buttons, not only as labels; AUTOLAB carries the mark, LEARN (this page)
   is the filled one */
.header-tools a{border:1px solid var(--ink-soft);border-radius:3px;padding:2px 7px;text-decoration:none;color:var(--ink);letter-spacing:.16em;
  min-height:22px;display:inline-flex;align-items:center}
#agent-chip{min-height:22px}
.header-tools .nav-home{gap:6px;padding-left:4px;font-weight:600}
.nav-mark{width:16px;height:16px;display:block;flex:none}
.nav-mark[hidden]{display:none}
.header-tools a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.header-tools a:hover,.header-tools a:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}
.header-tools a[aria-current="page"]:hover,.header-tools a[aria-current="page"]:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff}
body.nav-off .header-tools a{display:none}

/* phones: the sheet is a drawing designed for a desk, so on a phone the drawing panels stay off but the
   controls stay on, at a size a thumb can hit; the header links wrap under the title */
@media (max-width:640px){
  #hdr-left{right:64px}
  .header-tools{flex-wrap:wrap;gap:6px;margin-top:6px}
  .header-tools button:not([hidden]),.header-tools a{font-size:10.5px;padding:5px 8px;min-height:28px;display:inline-flex;align-items:center}
  /* framed inside the configurator on a phone the host's own controls drive the sheet; the caption card
     moves to the top, clear of the host's bottom sheet */
  body.framed #controls{display:none}
  body.framed #tour-card{top:150px;bottom:auto}
  body.cards-off #controls{visibility:visible;opacity:1;pointer-events:auto;transform:none}
  body.cards-off #controls .ctl-row{visibility:visible}
  body.cards-off #key,body.cards-off #instr,body.cards-off #titleblock{visibility:hidden}
  #controls{top:140px;left:22px;right:22px;padding:6px 8px;background:rgba(244,246,250,.92)}
  /* the caption card and the title block share the bottom edge; the tour wins while it runs */
  body:has(#tour-card:not([hidden])) #titleblock{visibility:hidden}
  .ctl-label{display:none}
  .ctl-row{gap:0;margin:4px 0}
  .ctl-btns{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .btn{height:34px;font-size:11px;letter-spacing:.06em}
  #tour-btn{height:34px}
  #tour-card{bottom:26px;left:22px;width:calc(100vw - 44px)}
}

/* ---- the tray: the vehicle, TOUR, the Roadster's PLAY, RESET and CONSOLE, one row of equal
   buttons. Console off it is centred at the foot of the sheet; console on it is the controls
   panel's third row (ui.js layoutTray moves it, and TOUR goes back to the MOTION row); the compact
   tray adds VIEWS, PARTS and MORE and keeps CONSOLE in MORE. ---- */
#primary-controls{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:7;display:flex;gap:6px}
#primary-controls .btn{height:44px;min-width:100px;padding:0 10px}
#primary-controls .btn[hidden]{display:none}
#tray-row{display:none;margin-top:8px}
body.tray-in-panel #tray-row{display:flex}
#tray-row #primary-controls{position:static;transform:none;flex:1;min-width:0;z-index:auto}
#tray-row #primary-controls .btn{flex:1 1 0;min-width:0}
/* PLAY in racecar red, and STOP (the same button in a run) too */
#play-btn,#play-btn.toggled{background:var(--race);border-color:var(--race);color:#fff;font-weight:600;letter-spacing:.14em}
#play-btn:hover,#play-btn.toggled:hover{background:var(--race-2);border-color:var(--race-2)}
#play-btn:focus-visible{outline-color:var(--ink)}
.compact-only{display:none}
/* The run controller's one line, just above the tray at the foot of a wide sheet and above the
   compact toolbar. An open sheet or vehicle menu covers its place, so it steps aside until that
   closes. */
#run-status{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);max-width:calc(100% - 104px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:7;margin:0;padding:3px 9px;font-size:10.5px;line-height:14px;letter-spacing:.08em;color:var(--ink);background:var(--paper);border:1px solid var(--ink-soft)}
#run-status[hidden]{display:none}
#compact-sheet[open] ~ #run-status{visibility:hidden}
#compact-vehicle-btns{grid-template-columns:repeat(2,minmax(0,1fr))}
/* On a wide sheet the vehicle choice is a small menu just above its tray button (ui.js sets where). */
@media (min-width:981px) and (min-height:521px){
  #compact-sheet[aria-modal="false"][data-section="vehicles"]{inset:auto auto var(--menu-bottom,104px) var(--menu-left,52px);width:240px;max-height:none;margin:0;border:1.5px solid var(--ink);border-radius:0;box-shadow:0 0 0 3px rgba(244,246,250,.6)}
  #compact-sheet[data-section="vehicles"] .compact-section{padding:8px}
  #compact-vehicle-btns{grid-template-columns:1fr;gap:5px}
  #compact-vehicle-btns .btn{min-height:40px;border:1.5px solid var(--ink);border-radius:0}
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.key-item{font-family:var(--mono);text-align:left;background:transparent;border:0;padding:0;width:100%;letter-spacing:0}
#compact-sheet{position:fixed;inset:auto 16px max(16px,env(safe-area-inset-bottom));margin:0 auto;padding:0;width:560px;max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--grid-major);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 10px 32px #1c2b4f18;z-index:20;overscroll-behavior:contain}
#compact-sheet[aria-modal="true"]::backdrop{background:#e7ebf270;backdrop-filter:blur(3px)}
.compact-sheet-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 0 16px;background:var(--paper);border-bottom:1px solid var(--grid-major);z-index:1}
.compact-sheet-header h2{font-size:11px;letter-spacing:.12em;margin:0}
.compact-sheet-header .panel-min{width:44px;height:44px;border:0;background:transparent;font-size:24px}
.compact-section{padding:12px 16px}
.compact-section[hidden],#selected-part[hidden]{display:none}
.compact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.compact-grid .btn{min-width:0;min-height:44px;width:100%;font-size:11px;line-height:1.3;letter-spacing:.02em;padding:6px 4px;white-space:normal;overflow:visible;border:1px solid var(--grid-major);border-radius:7px}
.compact-grid .btn.toggled,.compact-grid .btn.active{border-color:var(--ink)}
#compact-sheet[aria-modal="false"]{width:440px;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 68px);max-height:calc(100dvh - 104px)}
#compact-sheet[aria-modal="false"] .compact-sheet-header{display:none}
#compact-sheet[aria-modal="false"] .compact-section{padding:12px}
#compact-more:not([hidden]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#compact-motion-btns,#compact-more .compact-secondary{display:contents}
#compact-more .btn{min-height:44px}
@media (max-width:360px){#compact-sheet .compact-grid .btn{font-size:10px;letter-spacing:0}}
#compact-key-grid .key-item{min-height:48px;height:auto;padding:8px 0;border-bottom:1px solid var(--grid);font-size:12px;white-space:normal;line-height:1.5;gap:12px}
#compact-key-grid .key-item:last-child{border-bottom:0}
#compact-key-grid .num{width:26px;height:26px}
#selected-part{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#tooltip{max-width:min(280px,calc(100% - 16px))}
.tt-desc{white-space:normal;line-height:1.45}
body.cards-off #overlay{opacity:0}

/* A compact sheet reserves real space for navigation and a four-action toolbar. */
@media (max-width:980px),(max-height:520px){
  :root{--minor:28px;--major:140px;--tour-space:0px}
  /* the page links are the only header, so the drawing starts just under them */
  #stage{inset:76px 16px 100px}
  #hdr-left{top:20px;left:20px;right:20px;gap:10px;align-items:center}
  #key,#instr,#titleblock,#controls,#primary-controls #cards-toggle,#primary-controls #tour-btn{display:none}
  .header-tools{gap:6px;flex-wrap:nowrap;min-width:0}
  .header-tools a{min-height:44px;font-size:10px;padding:6px 9px;display:inline-flex;align-items:center;border-color:var(--grid-major);letter-spacing:.06em;white-space:nowrap}
  .header-tools a[aria-current="page"]{border-color:var(--ink)}
  .header-tools .nav-home{padding-left:6px}
  .header-tools #agent-chip{display:none}
  #primary-controls{left:16px;right:16px;top:auto;transform:none;bottom:max(16px,env(safe-area-inset-bottom));padding:7px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min-content,1fr);gap:5px;border:1px solid var(--grid-major);border-radius:10px;background:var(--paper);box-shadow:0 4px 18px #1c2b4f0a}
  #primary-controls .btn{display:block;min-width:0;height:44px;font-size:11px;letter-spacing:.04em;border:0;border-radius:5px;background:transparent}
  #primary-controls .btn[hidden]{display:none}
  #primary-controls .btn{padding:0 2px}
  #primary-controls #vehicle-btn{font-size:10px;letter-spacing:0}
  #primary-controls #play-btn,#primary-controls #play-btn.toggled{background:var(--race);color:#fff}
  #primary-controls #play-btn:hover{background:var(--race-2)}
  #run-status{left:16px;right:16px;top:auto;transform:none;max-width:none;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 64px);padding:3px 8px;font-size:10px;text-align:center;border-color:var(--grid-major);border-radius:6px}
  #primary-controls .btn:hover,#primary-controls .btn[aria-expanded="true"]{background:var(--paper-2)}
  #primary-controls #reset-btn{background:var(--ink);color:var(--paper)}
  #viewtitle{bottom:26px;max-width:100%;width:max-content}
  .vt-name{font-size:11px;letter-spacing:.14em}.vt-sub{display:none}.vt-rule{width:96px}
  .frame,.zone{display:none}
  #tour-card,body.tray-in-panel #tour-card,body.cards-off #tour-card{left:16px;right:16px;top:72px;bottom:auto;width:auto;max-width:none;max-height:35dvh;overflow:auto;margin:0;padding:10px 12px;border-color:var(--grid-major);pointer-events:auto}
  .tour-title{font-size:12px;letter-spacing:.08em;margin-top:4px}.tour-caption{margin:4px 0;font-size:11px}.tour-hint{font-size:8px}
  body.tour-active #stage{top:calc(76px + var(--tour-space,0px))}
  #agent-tools{left:16px;right:16px;top:72px;width:auto;max-width:none;max-height:calc(100dvh - 190px)}
  #agent-tools .panel-min{height:44px;width:44px;font-size:22px}
  #agent-tools-list{grid-template-columns:1fr;gap:3px;font-size:11px}
  #agent-tools-list dd{margin-bottom:10px}
}
@media (max-height:520px) and (min-width:641px){
  :root{--landscape-controls-width:clamp(288px,39vw,360px)}
  #hdr-left{top:12px;left:18px;right:18px}
  /* Reserve the controls column even when its tray is closed, so trying a
     combination of actions never moves the vehicle underneath the pointer. */
  #stage{inset:72px calc(var(--landscape-controls-width) + 36px) 18px 18px}
  #primary-controls{left:auto;right:18px;transform:none;width:var(--landscape-controls-width);bottom:10px}
  #run-status{left:auto;right:18px;width:var(--landscape-controls-width);bottom:76px}
  #compact-sheet[aria-modal="false"]{left:auto;right:18px;bottom:78px;width:var(--landscape-controls-width);max-height:calc(100dvh - 150px);margin:0}
  #tour-card,body.tray-in-panel #tour-card,body.cards-off #tour-card{left:18px;right:calc(var(--landscape-controls-width) + 36px);top:68px;max-height:32dvh}
  body.tour-active #stage{top:calc(72px + var(--tour-space,0px))}
}

/* The host provides the My Car navigation and controls; only its drawing occupies this frame. */
body.framed #hdr-left,body.framed #controls,body.framed #key,body.framed #instr,body.framed #titleblock,body.framed #primary-controls,body.framed #run-status,body.framed #selected-part,body.framed .frame,body.framed .zone,body.framed #viewtitle{display:none}
body.framed #stage{inset:0}
body.framed #tour-card,body.framed.cards-off #tour-card{left:12px;right:12px;top:8px;bottom:auto;width:auto;max-width:none;max-height:36dvh;overflow:auto;margin:0;padding:10px 12px;pointer-events:auto}
body.framed.tour-active #stage{top:var(--tour-space,0px)}
@media (prefers-reduced-motion:reduce){.btn,.panel,#overlay{transition:none}}

/* The Home exhibit shares its page's white surface and only reveals discovery
   controls once the short guided sequence ends or the visitor interrupts it. */
html:has(body.demo),body.demo{background:#fff;background-image:none}
body.demo{--paper:#fff;--paper-2:#f7f7f7;--ink:#202020;--ink-soft:#737373}
body.demo #hdr-left,body.demo #controls,body.demo #key,body.demo #instr,body.demo #titleblock,body.demo #primary-controls,body.demo #run-status,body.demo #selected-part,body.demo .frame,body.demo .zone,body.demo #viewtitle,body.demo #tooltip,body.demo #overlay,body.demo #agent-tools{display:none}
body.demo #stage{inset:0}
body.demo.tour-active #stage{top:var(--tour-space,0px)}
body.demo.demo-exploring #stage{bottom:var(--demo-space,88px)}
body.demo #tour-card,body.demo.cards-off #tour-card{left:16px;right:16px;top:0;bottom:auto;max-height:38dvh;width:auto;max-width:none;padding:10px 4px 6px;background:#fff;border:0;box-shadow:none;text-align:center}
body.demo #tour-card .tour-step,body.demo #tour-card .tour-hint{display:none}
body.demo #tour-card .tour-title{margin:0;font-size:12px;line-height:1.4;letter-spacing:.06em}
body.demo #tour-card .tour-caption{margin:5px auto 0;max-width:540px;color:#737373;font-size:11px;line-height:1.45}
#demo-discovery{display:none}
body.demo #demo-discovery:not([hidden]){position:absolute;left:12px;right:12px;bottom:4px;display:flex;flex-direction:column;align-items:center;gap:3px;background:#fff;z-index:8}
#demo-discovery-hint{max-width:100%;margin:0;font-size:11px;line-height:1.55;text-align:center;color:#737373;letter-spacing:0}
.demo-action-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
#demo-discovery button{font:inherit;font-size:11px;letter-spacing:0;line-height:1.3;color:#333;background:transparent;border:0;border-radius:5px;min-height:44px;padding:8px;cursor:pointer}
#demo-discovery button:hover{background:#f5f5f5}
#demo-discovery button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#demo-discovery button[aria-pressed="true"]{background:#242424;color:#fff}
#demo-options:not([hidden]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(100%,360px)}
#demo-discovery #demo-options-toggle{color:#737373}
@media (max-width:360px){.demo-action-row{gap:6px}#demo-discovery-hint{font-size:10px}}

/* ---- Run mode (the Roadster's PLAY) -----------------------------------------------------
   The drive owns the camera, so the callouts, dimensions, tooltip and part key leave the sheet;
   the frame, the page links and the TELEMETRY panel stay, the panel carrying the run's figures and
   the keys whatever the console is set to. The tray keeps STOP (the PLAY button) and RETRY at the
   foot of a wide sheet; on a compact one it becomes the drive pad: FANS HOP BOOST RETRY STOP over
   steer left, steer right, BRAKE and a wide GO, with the figures in a strip above the drawing. */
body.run-active #overlay,body.run-active #tooltip,body.run-active #part-pointer,body.run-active #viewtitle,
body.run-active #key,body.run-active #controls,body.run-active #tour-card,body.run-active #selected-part{display:none}
body.run-active #primary-controls > .btn:not(#play-btn){display:none}
body.run-active #instr{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.drive-pad{display:contents}
#primary-controls .drive-btn{display:none}
/* wide: STOP stays where PLAY was (so pressing it again ends the run) and RETRY follows it, in the
   same order in the page as on the screen (run-mode.js puts the pad after PLAY) */
#primary-controls .drive-btn.drive-retry{display:block}
#primary-controls .drive-btn.held{background:var(--btn-active);color:var(--paper)}
.drive-fans{grid-column:1;grid-row:1}.drive-hop{grid-column:2;grid-row:1}.drive-boost{grid-column:3;grid-row:1}.drive-retry{grid-column:4;grid-row:1}
body.run-active #play-btn{grid-column:5;grid-row:1}
.drive-left{grid-column:1;grid-row:2}.drive-right{grid-column:2;grid-row:2}.drive-brake{grid-column:3;grid-row:2}.drive-go{grid-column:4 / span 2;grid-row:2}
#run-keys{display:grid;grid-template-columns:max-content 1fr max-content 1fr;gap:4px 8px;border-top:1px solid rgba(28,43,79,.35);padding:7px 12px 9px;font-size:9.5px;letter-spacing:.1em;color:var(--ink-soft)}
#run-keys .rk{color:var(--ink);font-weight:600;white-space:nowrap}
#run-keys .rv{white-space:nowrap}
@media (max-width:1240px){#run-keys{grid-template-columns:max-content 1fr}}
#run-hud{display:none}
body.framed #run-hud{display:none}
/* a tablet held wide is still a touch screen: the pad sits at the bottom right */
@media (min-width:981px) and (min-height:521px) and (hover:none) and (pointer:coarse){
  body.run-active #primary-controls{top:auto;bottom:24px;right:24px;left:auto;transform:none;display:grid;grid-template-columns:repeat(5,80px);grid-template-rows:56px 56px;gap:6px}
  body.run-active #primary-controls .btn{height:auto;min-width:0}
  #primary-controls .drive-btn{display:block;touch-action:none;-webkit-touch-callout:none}
}
@media (max-width:980px),(max-height:520px){
  body.run-active #primary-controls{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:44px 44px}
  #primary-controls .drive-btn{display:block;border:1px solid var(--grid-major);border-radius:7px;background:var(--paper);touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  #primary-controls .drive-btn.held,#primary-controls .drive-btn.toggled{background:var(--btn-active);color:var(--paper);border-color:var(--ink)}
  #primary-controls .drive-btn.drive-go{border:1.5px solid var(--ink);font-weight:600;letter-spacing:.12em}
  body.run-active #run-status{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 115px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.run-active #stage{top:142px;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 145px)}
  #run-hud{display:grid;position:absolute;left:16px;right:16px;top:76px;z-index:6;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px 8px;padding:6px 10px;background:var(--paper);border:1px solid var(--grid-major);border-radius:6px}
  #run-hud .k{display:block;font-size:8px;letter-spacing:.1em;color:var(--ink-soft);white-space:nowrap}
  #run-hud .v{display:block;font-size:11px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
}
@media (max-height:520px) and (min-width:641px){
  body.run-active #stage{top:72px;bottom:18px}
  body.run-active #run-status{bottom:125px}
  #run-hud{left:auto;right:18px;top:68px;width:var(--landscape-controls-width)}
}
@media (max-height:520px) and (max-width:640px){
  #run-hud{display:none}
  body.run-active #stage{top:76px}
}