/* Last Voyage: embodiment rail onboarding & accessible camera dock.
   The tutorial never blocks pointer control of the scene. */
.wheel-tip{
  position:fixed;z-index:32;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(330px,calc(100vw - 32px));
  display:grid;place-items:center;gap:9px;padding:20px 24px;text-align:center;
  border:1px solid rgba(255,187,117,.53);border-radius:16px;
  background:rgba(8,9,17,.87);box-shadow:0 16px 60px rgba(0,0,0,.67);
  -webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px);
  color:#f1e4d4;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
.wheel-tip.is-visible{visibility:visible;opacity:1}
.wheel-tip-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,187,117,.6);color:#ffc388;
  font:24px/1 "IBM Plex Mono",monospace}
.wheel-tip strong{font:400 29px/1.1 "Instrument Serif",Georgia,serif}
.wheel-tip span:last-child{font:12px/1.6 "IBM Plex Sans",sans-serif;color:#d1c6c0}
.camera-actions{
  position:fixed;z-index:26;right:20px;bottom:101px;
  max-width:calc(100vw - 40px);display:flex;align-items:center;gap:5px;
  padding:6px;border:1px solid rgba(255,192,126,.32);
  border-radius:11px;background:rgba(8,9,17,.78);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)
}
.camera-actions button{
  min-height:38px;border:1px solid rgba(255,255,255,.16);
  padding:8px 11px;border-radius:7px;color:#f2e4d4;
  background:rgba(255,255,255,.055);font:11px "IBM Plex Sans",sans-serif
}
.camera-actions button:hover,.camera-actions button:focus-visible{border-color:#ffc17e}
.camera-actions button[aria-pressed=true]{border-color:#ffc17e;background:#ffc17e26}
.camera-actions output{font:10px "IBM Plex Mono",monospace;color:#b9c8ca;padding:0 8px;white-space:nowrap}
body.ui-hidden .camera-actions{opacity:.3;transition:opacity .2s}
body.ui-hidden .camera-actions:hover,body.ui-hidden .camera-actions:focus-within{opacity:1}
@media(max-width:700px){
 .wheel-tip{top:44%;padding:14px 16px}
 .wheel-tip strong{font-size:26px}
 .camera-actions{left:8px;right:8px;bottom:82px;max-width:none;justify-content:space-between}
 .camera-actions button{min-height:44px;flex:1;padding:8px 5px}
 .camera-actions output{font-size:9px;max-width:111px;white-space:normal;text-align:right}
}
@media(prefers-reduced-motion:reduce){.wheel-tip{transition:none}.camera-actions{transition:none}}

/* Premiere mobile composition: keep stage visible and controls secondary. */
@media(max-width:700px){
 .header{height:66px;min-height:66px;align-items:flex-start;justify-content:space-between;gap:5px;padding:9px}
 .header .brand{min-width:0;flex:1;overflow:hidden}
 .header .brand a{font-size:9px;letter-spacing:.045em;white-space:nowrap}
 .header .brand .eyebrow,.header .brand p{display:none}
 .header .brand h1{font-size:25px;line-height:1.1;margin:6px 0}
 .header-actions{flex:none;gap:4px}
 .header-actions .pill{min-height:40px;padding:6px 7px;font-size:10px;max-width:74px;overflow-wrap:break-word}
 #fullBtn,#hideBtn,#guideBtn{display:none}
 #musicBtn{max-width:67px}
 #settingsBtn{max-width:83px}
 .panel{top:auto!important;bottom:82px!important;max-height:min(65dvh,500px)!important}
 .frame-controls{top:71px}
 .status{bottom:150px;max-width:calc(100vw - 20px)}
 .status h2{font-size:22px}
 .transport .clock{min-width:41px}
 .transport .pace{max-width:91px}
 .camera-actions output{font-size:9px}
}

/* Clear the premiere masthead: never let window switches compete with global actions. */
@media(min-width:1051px){.frame-controls{top:92px}}
@media(min-width:701px) and (max-width:1050px){.frame-controls{top:92px}}