.view-play-actions{display:flex;gap:6px;align-items:center;padding:4px;background:#1c2528e8;border:1px solid #354044;border-radius:8px}.view-play-actions button{padding:7px 10px;font-size:11px}#drone-demo{color:#f4d9a4;background:#3b3326;border:1px solid #776344}.drone-card{padding:15px;margin-bottom:20px;border:1px solid #536059;border-radius:10px;background:linear-gradient(135deg,#263c38,#202731)}.drone-card h2{font-size:19px;font-weight:450;margin:10px 0}.drone-card p{font-size:11px;line-height:1.6;color:#bacac2}.drone-card button{width:100%;padding:11px 6px;border:1px solid #708c80;background:#344c44;color:#d8f1e5}.drone-card small{display:block;margin-top:9px;line-height:1.6;font-size:9px;color:#82998e}
.drone-mode .topbar .project,.drone-mode #editor-files,.drone-mode #editor-history,.drone-mode #editor-tools,.drone-mode #editor-inspector,.drone-mode>footer{display:none}.drone-mode .workspace{display:block;height:calc(100dvh - 72px)}.drone-mode .viewport{width:100%;height:100%}.drone-mode .viewport>:not(canvas):not(#drone-show):not(#toast){display:none!important}.drone-mode canvas{cursor:grab!important}
#drone-show{position:absolute;inset:0;z-index:6;pointer-events:none;color:#dfeaf0;font-family:Inter,"Segoe UI",sans-serif}
/* Late afternoon: a soft scrim keeps the title and status readable against the bright evening sky. */
#drone-show[data-sky=afternoon]::before{content:"";position:absolute;left:0;right:0;top:0;height:min(300px,42%);background:linear-gradient(#03080fb0,#03080f55 55%,transparent);pointer-events:none}#drone-show button,#drone-show input,#drone-show select{pointer-events:auto}.show-heading{position:absolute;left:36px;right:36px;top:24px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.show-eyebrow{font-size:9px;font-weight:600;letter-spacing:2px;color:#8faec1}.show-heading h1{font-size:30px;font-weight:350;letter-spacing:4px;margin:9px 0}.show-heading p{font-size:11px;letter-spacing:.4px;color:#6f8da3;margin:0}.show-heading button{font-size:12px;border:1px solid #3e596a;padding:10px 16px;background:#0c1925dc;color:#bad6e4}.show-status{position:absolute;top:145px;left:36px;display:flex;align-items:center;gap:9px;letter-spacing:1.4px;font-size:8px;color:#91b3c4}.show-live-dot{width:5px;height:5px;background:#88e5d0;border-radius:50%;box-shadow:0 0 9px #65ffd377}.show-simulation{border:1px solid #334b59;padding:5px 7px;border-radius:4px;color:#9aabbb;font-size:7px;margin-left:6px}.show-telemetry{position:absolute;top:94px;right:36px;display:flex;gap:30px;text-align:right;font-size:8px;letter-spacing:1.5px;color:#657f94}.show-telemetry strong{display:block;font-size:17px;color:#aac4d8;font-weight:400;letter-spacing:0;margin-top:8px;font-variant-numeric:tabular-nums}.show-bottom{position:absolute;bottom:0;left:0;right:0;padding:55px 36px 17px;background:linear-gradient(transparent,#050d17e8 25%,#08121a 100%)}.show-phase-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.show-phase-row h2{font-size:24px;font-weight:400;letter-spacing:.2px;margin:5px 0 0}.show-phase-row #show-time{font:11px ui-monospace,monospace;color:#95adbf}#show-cues{display:flex;gap:6px;margin-top:17px;flex-wrap:wrap;pointer-events:auto}#show-cues button{border:1px solid #263e4e;border-radius:5px;padding:7px 14px;font-size:10px;color:#789aad;background:#0a1622}#show-cues button.active{color:#d5fff1;border-color:#589f94;background:#1c3836}.show-seek{position:relative;margin:18px 0;height:3px;background:#213443;border-radius:5px}.show-seek #show-progress{position:absolute;height:100%;width:0;background:linear-gradient(90deg,#347c96,#8effd0);box-shadow:0 0 15px #70e7df42}.show-seek #show-scrub{position:absolute;inset:0;width:100%;height:3px;margin:0;opacity:.01;transition:opacity .15s}.show-seek:hover #show-scrub,.show-seek #show-scrub:focus-visible{opacity:1}.show-controls{display:flex;justify-content:space-between;align-items:center;gap:15px}.show-controls>div{display:flex;align-items:center;gap:8px}.show-controls button{font-size:11px;min-height:38px;padding:8px 14px;border:1px solid #304856}.show-controls label{display:flex;align-items:center;gap:6px;font-size:10px;color:#8da7b9;pointer-events:auto}.show-controls select{width:auto;min-width:55px;border:1px solid #304856;background:#0c1c29;padding:7px;font-size:11px}.show-controls input{width:15px;height:15px;margin:0}.show-controls #show-pause{min-width:100px}.show-footnote{font-size:9px;color:#49687e;text-align:center;margin:13px 0 0;letter-spacing:.25px}
@media(max-width:800px){.drone-mode .workspace{height:calc(100dvh - 60px)}.show-heading{left:22px;right:22px;top:20px}.show-heading h1{font-size:24px;letter-spacing:2px}.show-status{left:22px;top:123px}.show-telemetry{right:22px;top:84px}.show-bottom{padding:45px 22px 13px}.show-heading button{font-size:10px;padding:9px 10px}.show-phase-row h2{font-size:21px}.show-controls button{padding:8px 10px}}
@media(max-width:560px){.viewbar{left:8px;right:8px}.view-presets button{font-size:9px;padding:7px 6px}.view-play-actions{gap:2px;padding:3px}.view-play-actions button,#play{font-size:9px;padding:7px 6px}.view-play-actions #play span{display:none}.show-heading{left:18px;right:18px;top:18px}.show-heading h1{font-size:20px;letter-spacing:1.7px;margin:10px 0 5px}.show-heading p{font-size:9px;max-width:150px;line-height:1.6}.show-heading .show-eyebrow{font-size:7px;letter-spacing:1.4px}.show-heading button{min-height:44px;max-width:110px;padding:8px 9px}.show-status{top:126px;left:18px;font-size:7px;gap:5px;letter-spacing:.7px}.show-telemetry{right:18px;top:76px;gap:15px;font-size:7px}.show-telemetry strong{font-size:13px}.show-bottom{padding:34px 18px 12px}.show-phase-row h2{font-size:20px}.show-phase-row #show-time{font-size:10px}#show-cues{gap:4px;margin-top:10px}#show-cues button{padding:8px;font-size:9px;min-height:36px}.show-controls{flex-wrap:wrap;gap:8px}.show-controls>div{gap:5px}.show-controls button,.show-controls select{min-height:44px;padding:8px 10px;font-size:10px}.show-controls #show-pause{min-width:94px}.show-controls label{font-size:9px}.show-footnote{font-size:8px;line-height:1.6;margin-top:8px}.show-seek{margin:14px 0}.show-seek #show-scrub{height:28px;top:-13px}.show-simulation{font-size:6px;margin-left:3px}.show-controls input{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){#drone-show *{transition:none}}

#demo-settings{max-height:85dvh;overflow:auto}#demo-settings form>label{display:block;margin:14px 0}#demo-settings select{margin-top:6px}#demo-settings fieldset{border:1px solid #4b6657;border-radius:8px;padding:12px}#demo-settings fieldset label{display:flex;align-items:center;gap:8px;margin:9px 0}#demo-settings .demo-actions{display:flex;justify-content:flex-end;gap:12px;align-items:center;flex-wrap:wrap}#demo-settings .demo-actions #demo-edit{margin-right:auto}
#demo-settings.player-settings .demo-only,#demo-settings:not(.player-settings) .player-only{display:none}.show-controls>div{flex-wrap:wrap}@media(max-width:560px){.viewbar{flex-wrap:wrap}.view-play-actions{flex-wrap:wrap}#demo-settings{padding:20px}}

#demo-settings{padding-bottom:0}#demo-settings .demo-actions{position:sticky;bottom:0;background:#1c2925;padding:10px 0 24px}#drone-demo-settings{margin-bottom:8px}

/* Studio 13: cinematic sky stage */
.drone-card button{font-size:12px;font-weight:550;letter-spacing:.2px;transition:background .15s,border-color .15s}.drone-card button:hover{background:#3f5d53;border-color:#8fb5a4}
.show-quality{color:#b9d7e6;border-color:#3d6178}.show-loading{display:inline-flex;align-items:center;gap:7px;margin-left:8px;color:#9fc3d6;letter-spacing:1px}.show-loading i{width:10px;height:10px;border-radius:50%;border:2px solid #365a70;border-top-color:#9fe7ff;animation:show-spin .8s linear infinite}
@keyframes show-spin{to{transform:rotate(360deg)}}
#drone-show .show-heading h1{text-shadow:0 2px 24px #000a;text-transform:uppercase}.show-bottom{background:linear-gradient(transparent,#02060dcc 28%,#03080fee 100%)}
#show-cues button{transition:color .15s,border-color .15s,background .15s}#show-cues button:hover{color:#cde8f5;border-color:#3c6479}
.show-controls button:hover,.show-heading button:hover{border-color:#5c8aa3}
@media(prefers-reduced-motion:reduce){.show-loading i{animation:none}}
@media(max-width:560px){#show-cues{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-18px;margin-right:-18px;padding:0 18px;mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}#show-cues::-webkit-scrollbar{display:none}#show-cues button{flex:none}.show-quality{display:none}}
#drone-demo.busy{pointer-events:none;opacity:.75;background:linear-gradient(90deg,#3b3326 0%,#5a4a2c 50%,#3b3326 100%) 0 0/200% 100%;animation:demo-busy 1s linear infinite}@keyframes demo-busy{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){#drone-demo.busy{animation:none}}
#show-music[aria-pressed="false"]{color:#7d95a6}#show-music.locked{color:#ffe3a1;border-color:#c99a3c;animation:music-hint 1.6s ease-in-out infinite}@keyframes music-hint{50%{border-color:#ffd36b;box-shadow:0 0 12px #ffd36b55}}
@media(prefers-reduced-motion:reduce){#show-music.locked{animation:none}}
@media(max-width:560px){#show-music:not(.locked) .music-label{display:none}#show-music{min-width:44px;font-size:14px}#show-music.locked{font-size:10px}}
/* Studio 15: phones, portrait and landscape. The show gets the screen: title, status and actions share one slim
   top bar, playback sits in one compact bottom panel, and the editor's header is hidden while the show plays. */
@media (max-width:560px),(max-height:500px){
  .drone-mode .topbar{display:none}
  .drone-mode .workspace{height:100dvh}
  #drone-show .show-heading{top:8px;left:12px;right:12px;align-items:center;gap:8px}
  #drone-show .show-heading>div:first-child{min-width:0}
  #drone-show .show-heading .show-eyebrow,#drone-show .show-heading p,#drone-show .show-telemetry,#drone-show .show-simulation,#drone-show .show-quality,#drone-show .show-footnote,#drone-show .show-phase-row .show-eyebrow{display:none}
  #drone-show .show-heading h1{font-size:13px;letter-spacing:1.8px;margin:0;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #drone-show .show-heading-actions{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;position:relative;max-width:none;width:auto}
  #drone-show .show-heading button{min-height:36px;min-width:0;max-width:none;padding:6px 10px;font-size:10px;white-space:nowrap}
  #drone-show .show-record-status{position:absolute;top:40px;right:0;width:max-content;max-width:min(240px,70vw);text-align:right;font-size:9px}
  #drone-show .show-record-status[data-idle]{display:none}
  #drone-show .show-status{top:40px;left:12px;font-size:7px;gap:5px;letter-spacing:.8px}
  #drone-show .show-bottom{padding:26px 12px 8px;background:linear-gradient(transparent,#02060dc4 30%,#03080fe8 100%)}
  #drone-show .show-phase-row{align-items:baseline}
  #drone-show .show-phase-row h2{font-size:16px;margin:0}
  #drone-show .show-phase-row #show-time{font-size:10px}
  #drone-show #show-cues{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:4px;margin:6px -12px 0;padding:0 12px;mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
  #drone-show #show-cues::-webkit-scrollbar{display:none}
  #drone-show #show-cues button{flex:none;min-height:32px;padding:6px 9px;font-size:9px}
  #drone-show .show-seek{margin:12px 0 10px}
  #drone-show .show-seek #show-scrub{height:28px;top:-13px}
  #drone-show .show-controls,#drone-show .show-controls>div{flex-wrap:nowrap;gap:5px}
  #drone-show .show-controls button,#drone-show .show-controls select{min-height:40px;padding:6px 10px;font-size:12px}
  #drone-show .show-controls #show-pause{min-width:48px}
  #drone-show .show-controls .label{display:none}
  #drone-show .show-controls label{font-size:9px;gap:4px}
}
/* Landscape phones: the formation name sits beside the cue strip, so the sky keeps about two thirds of the height. */
@media (max-height:500px) and (min-width:561px){
  #drone-show .show-bottom{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;padding:20px 16px 6px}
  #drone-show .show-phase-row{grid-column:1;flex-direction:column;align-items:flex-start;gap:2px}
  #drone-show #show-cues{grid-column:2;margin:0;padding:0 12px}
  #drone-show .show-seek,#drone-show .show-controls{grid-column:1/-1}
  #drone-show .show-seek{margin:10px 0 8px}
  #drone-show .show-controls button,#drone-show .show-controls select{min-height:36px}
}