.tool-icon{width:20px;height:20px;filter:invert(1);opacity:.8;display:none;flex:none}
.camera-bar .button-label{width:auto;height:auto;margin:0;background:none}
.vehicle-status{top:274px}

/* The mobile canvas owns a grid track, not the entire screen behind the UI. */
@media(max-width:900px){
  html{height:100%;overflow:hidden}
  body{height:100vh;height:100dvh;display:grid;grid-template-areas:"header" "title" "stage" "status" "camera" "panel";grid-template-rows:auto auto minmax(0,1fr) 28px 52px clamp(200px,34dvh,320px);letter-spacing:0}
  body.panel-collapsed{grid-template-areas:"header" "title" "stage" "status" "camera";grid-template-rows:auto auto minmax(0,1fr) 28px 52px;padding-bottom:env(safe-area-inset-bottom)}
  header{grid-area:header;position:relative;inset:auto;height:auto;min-height:56px;margin:0 16px;padding-top:env(safe-area-inset-top);gap:8px}
  .brand{font-size:22px;letter-spacing:0;flex:none}
  .brand span,.header-note{display:none}
  .header-actions{gap:4px}
  .header-actions button{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:4px}
  .header-actions button:hover,.header-actions button:focus-visible{background:#ffffff0c}
  .header-actions button[aria-expanded=true]{background:#ffffff0a}
  .header-actions .button-label,#rotate .button-label{display:none}
  .tool-icon{display:block}
  .title{grid-area:title;position:relative;inset:auto;padding:10px 16px 6px;min-width:0}
  .title p{margin:0 0 3px;font-size:10px;line-height:14px;letter-spacing:0}
  .title h1{font-size:28px;line-height:34px;letter-spacing:0}
  .title h1 span{font-size:12px;letter-spacing:0}
  .edition{font-size:11px;line-height:16px;margin:2px 0 0;letter-spacing:0;color:#a7b0b4}
  #stage{grid-area:stage;position:relative;inset:auto;min-width:0;min-height:0;overflow:hidden}
  #stage canvas{position:absolute;inset:0;width:100%;height:100%}
  .vehicle-status{grid-area:status;position:relative;inset:auto;justify-content:center;gap:12px;font-size:11px;line-height:20px;letter-spacing:0;background:#141719;color:#b2bdc4}
  .specs,.hint{display:none}
  .camera-bar,.panel-collapsed .camera-bar{grid-area:camera;position:relative;inset:auto;transform:none;max-width:none;width:100%;margin:0;padding:4px 12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 1px repeat(3,40px);gap:2px;border:0;border-top:1px solid #ffffff12;border-radius:0;background:#1a1f22;backdrop-filter:none;overflow:visible;min-width:0}
  .camera-bar button,.camera-bar .zoom{min-width:0;width:100%;height:44px;padding:0;display:grid;place-items:center;font-size:12px;letter-spacing:0}
  .camera-bar .zoom{font-size:22px}
  .camera-bar>span{width:1px;height:20px;margin:0;background:#ffffff18}
  .panel{grid-area:panel;position:relative;inset:auto;min-height:0;max-height:none;width:auto;display:flex;flex-direction:column;padding:0 0 env(safe-area-inset-bottom);border:0;border-top:1px solid #ffffff1a;border-radius:0;background:#22282c;backdrop-filter:none;overflow:hidden}
  .panel-heading{flex:none;min-height:42px;padding:0 16px;font-size:13px;color:#bcc6cb}
  .panel-heading button{min-height:40px;padding:0 0 0 12px;font-size:12px}
  .tabs{flex:none;margin:0;padding:0 12px;background:#22282c}
  .tabs button{height:42px;min-width:0;padding:0;font-size:14px}
  .tab-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px;scrollbar-width:thin;scrollbar-color:#626761 transparent}
  .section-label{font-size:13px;line-height:20px;margin:0 0 10px}
  .section-label span{font-size:11px}
  .door-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #body>.section-label:first-child+.door-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .door-grid button{min-height:48px;padding:10px 8px;font-size:13px;line-height:18px}
  #body>.section-label:first-child+.door-grid button{font-size:12px}
  .door-grid button i{font-size:11px!important;margin-top:4px;line-height:16px}
  .wide{min-height:44px;padding:11px 12px;font-size:13px;line-height:20px;flex-wrap:wrap}
  .wide i,.wide span,output{font-size:11px!important}
  .line{margin:16px 0}
  .control-row{line-height:20px;margin:0;font-size:13px}
  input[type=range]{height:32px;margin:4px 0 8px}
  .signal-grid button{min-height:44px}
  .swatches{flex-wrap:wrap;gap:14px;padding:6px 2px}
  .swatches button,.ambient-colors button{width:32px;height:32px;flex:none}
  .swatches span{font-size:11px!important}
  .ambient-colors{gap:22px;margin:18px 3px}
  .subtle{min-height:40px}
  #toast,.panel-collapsed #toast{grid-area:status;position:relative;inset:auto;transform:none;max-width:none;width:100%;z-index:3;font-size:11px;line-height:20px;padding:4px 8px;border:0;border-radius:0;background:#2c383e}
  dialog{width:calc(100% - 24px);max-width:600px;max-height:calc(100dvh - 32px);padding:20px}
  dialog .close{width:44px;height:44px}
}

@media(max-width:900px) and (max-height:700px) and (orientation:portrait){
  .title{padding:6px 16px 4px}
  .title h1{font-size:24px;line-height:28px}
  .edition{font-size:10px;line-height:14px;margin:0}
}

@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  body{grid-template-areas:"header header" "title panel" "stage panel" "status panel" "camera panel";grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:48px auto minmax(0,1fr) 24px 48px;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  body.panel-collapsed{grid-template-areas:"header" "title" "stage" "status" "camera";grid-template-columns:minmax(0,1fr);grid-template-rows:48px auto minmax(0,1fr) 24px 48px}
  header{min-height:48px;padding:0}
  .title{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:12px;padding:6px 16px}
  .title h1{font-size:24px;line-height:28px;order:-1}
  .title p{margin:0}
  .edition{display:none}
  .panel{border-left:1px solid #ffffff1a}
  #body>.section-label:first-child+.door-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .camera-bar{padding:2px 8px;grid-template-columns:repeat(4,minmax(0,1fr)) 1px repeat(3,36px)}
}