/* The editable Studio is independent from the unchanged five-card demo gallery. */
.studio-mode-tabs{display:flex;gap:8px;padding:5px;background:#0d111b;border:1px solid #2a3040;border-radius:13px;margin:0 0 18px;max-width:720px}
.studio-mode-tabs button{flex:1;border:1px solid transparent;background:transparent;border-radius:9px;padding:12px 16px;text-align:left;color:#929db1;font-size:12px;font-weight:700}
.studio-mode-tabs button small{display:block;font-size:9px;font-weight:500;margin-top:4px;color:#7e8b9d}
.studio-mode-tabs button[aria-selected=true]{background:#222b3b;color:#f4f7fc;border-color:#43546b;box-shadow:0 3px 12px #0002}
.studio-mode-tabs button[aria-selected=true] small{color:#a3bbcc}
#visualStudioPanel[hidden],#codeStudioPanel[hidden],.vs [hidden]{display:none!important}
.vs{--vs-line:#2a3341;--vs-accent:#8cc4d4;--vs-muted:#8d9bac;color:#e9eef5;min-width:0}
.vs[data-loading=true]{opacity:.6;pointer-events:none}
.vs-projectbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:0 2px}
.vs-projectbar>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px}
.vs-projectbar strong{font-size:11px;font-weight:650}.vs-projectbar #visualSaveStatus{color:#8e9cae;font-size:10px}.vs-projectbar .btn{font-size:10px;padding:8px 11px}
.vs-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7fc3ae;flex:none}
.vs-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.vs-controls,.vs-workspace{display:grid;gap:14px;min-width:0}
.vs-card{border:1px solid var(--vs-line);border-radius:14px;background:#111722;padding:17px;min-width:0;overflow:hidden}
.vs-section-head{display:flex;align-items:center;gap:9px;margin-bottom:15px;flex-wrap:wrap}
.vs-section-head>span:first-child{width:23px;height:23px;display:grid;place-items:center;border:1px solid #3b495b;border-radius:7px;color:#91a6ba;font-size:9px;font-weight:700;flex:none}
.vs-section-head h2{font-size:12px;letter-spacing:-.015em;margin:0;font-weight:700}.vs-section-head>.vs-text-button{margin-left:auto}
.vs-template-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.vs-template{position:relative;border:1px solid #303d4d;border-radius:9px;background:#18202d;color:#bbc9d9;padding:12px 10px;text-align:left;min-height:65px;transition:background .15s,border-color .15s}
.vs-template strong{display:block;font-size:10px;font-weight:650;line-height:1.5}.vs-template small{display:block;margin-top:4px;font-size:8px;line-height:1.4;color:#7f91a6}
.vs-template:hover{border-color:#607a91;background:#1e2b3a}.vs-template[aria-pressed=true]{border-color:#91b5c6;background:#243645;box-shadow:inset 3px 0 #91b5c6}.vs-template[aria-pressed=true] strong{color:#f1f8ff}.vs-template[aria-pressed=true] small{color:#a2bfce}
.vs-field{display:grid;gap:8px;margin:0 0 14px;font-size:10px;color:#bdc9d8;font-weight:600;min-width:0}
.vs-field>span:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.vs-field output{margin-left:auto;color:#8cc4d4;font-size:9px;font-variant-numeric:tabular-nums}
.vs input[type=text],.vs textarea,.vs select{width:100%;min-width:0;background:#0c121c;border:1px solid #344255;border-radius:8px;color:#eff5fc;padding:10px 11px;font:11px/1.5 inherit;font-size:11px;line-height:1.5;outline:none}
.vs textarea{font-family:inherit;resize:vertical;min-height:62px}.vs input:focus,.vs textarea:focus,.vs select:focus{border-color:#8cb6c9;box-shadow:0 0 0 2px #8cb6c91a}
.vs input[type=range]{width:100%;accent-color:#9ac6d7;height:15px;margin:0;cursor:pointer}.vs input[type=checkbox]{accent-color:#94becf}
.vs-palettes{display:flex;gap:10px;flex-wrap:wrap;padding:3px}
.vs-palette{width:28px;height:28px;border:2px solid #ffffff40;border-radius:50%;box-shadow:0 0 0 3px transparent}.vs-palette[aria-pressed=true]{box-shadow:0 0 0 2px #111722,0 0 0 4px #b3c8d5}
.vs-file-pick{position:relative;display:flex!important;justify-content:center!important;align-items:center;padding:11px;border:1px dashed #52677f;border-radius:8px;background:#182332;color:#c5d8e8;overflow:hidden;cursor:pointer;font-size:10px}
.vs-file-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.vs-file-summary{display:flex;align-items:start;gap:8px;min-width:0;margin-top:-4px;font-size:9px;color:#9fadc0;line-height:1.5}.vs-file-summary>span{min-width:0;overflow-wrap:anywhere;flex:1}
.vs-text-button{border:0;background:transparent;padding:2px;color:#a7c8da;font-size:10px;text-decoration:none;white-space:nowrap}.vs-text-button:hover{color:#e0f2ff;text-decoration:underline}
.vs-help{display:block;color:#8294a9;font-size:9px;line-height:1.7;margin:9px 0 0;font-weight:400}
.vs-preview-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:9px;color:#a3b3c8;letter-spacing:.05em}.vs-preview-head>div{display:flex;align-items:center;gap:7px}.vs-preview-head>span{font-size:9px;letter-spacing:0;text-align:right}
.vs-stage{width:100%;aspect-ratio:16/9;position:relative;border:1px solid #344255;border-radius:10px;overflow:hidden;background:#0c1721;max-height:560px;margin:0 auto}
.vs-stage canvas{display:block;width:100%;height:100%;object-fit:contain}
.vs-stage.portrait{aspect-ratio:9/16;width:min(100%,315px);max-height:none}
.vs-transport{display:flex;align-items:center;gap:10px;padding-top:13px}.vs-transport input{flex:1;min-width:40px}.vs-transport>span{font-size:9px;color:#a8bbce;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:58px}
.vs-play{width:32px;height:32px;border:1px solid #4b6076;border-radius:50%;background:#233649;color:#e4f2ff;font-size:12px;display:grid;place-items:center;flex:none}
.vs-status{font-size:10px;line-height:1.65;color:#a6c9c1;padding:10px 11px;border:1px solid #29443f;border-radius:8px;background:#11201f;margin-top:12px;overflow-wrap:anywhere}.vs-status.error{color:#f5b2b5;background:#291b22;border-color:#62404d}
.vs-export-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.vs-export-options .vs-field{margin-bottom:10px}
.vs-export-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:5px}.vs-export-actions a{text-decoration:none}
.vs .btn.primary{background:#537487;border-color:#7e9fad;box-shadow:none}.vs .btn.primary:hover{background:#62869b;border-color:#a4c3ce}
.vs button:disabled{opacity:.5;cursor:not-allowed;transform:none}.vs #visualCancel:disabled{cursor:wait}.vs progress{width:100%;height:7px;accent-color:#85b6c5;display:block;margin-top:16px}
.vs-local-chip{margin-left:auto;font-size:8px!important;color:#97b5c6!important;white-space:nowrap;background:#182a35;border:1px solid #344e5e;border-radius:5px;padding:4px 6px;width:auto!important;height:auto!important}
.vs-checkbox{display:flex;align-items:center;gap:8px;font-size:10px;color:#b7c9da;padding-top:20px;align-self:start}
.vs-metadata .vs-help:first-of-type{margin:-4px 0 14px}.vs-metadata>.btn{margin-top:4px}.vs-metadata>.vs-help:last-child{margin-top:10px}
@media(min-width:1200px){.vs-player-card{position:relative}.vs-layout{grid-template-columns:310px minmax(0,1fr)}}
@media(max-width:1100px){.vs-layout{grid-template-columns:270px minmax(0,1fr);gap:12px}.vs-card{padding:14px}.vs-local-chip{margin-left:32px}.vs-section-head{gap:7px}.vs-transport{gap:7px}.vs-preview-head{align-items:start}}
@media(max-width:980px){.vs-layout{grid-template-columns:1fr}.vs-controls,.vs-workspace{display:contents}.vs-controls>.vs-card:first-child{order:0}.vs-player-card{order:1}.vs-controls>.vs-card:nth-child(2){order:2}.vs-controls>.vs-card:nth-child(3){order:3}.vs-export{order:4}.vs-metadata{order:5}.vs-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.vs-stage.portrait{width:min(100%,270px)}.vs-local-chip{margin-left:auto}.studio-mode-tabs{max-width:none}}
@media(max-width:620px){.studio-mode-tabs{gap:4px;padding:4px}.studio-mode-tabs button{padding:10px;font-size:10px}.studio-mode-tabs button small{font-size:8px;line-height:1.5}.vs-projectbar{align-items:start}.vs-projectbar>div{gap:5px;font-size:9px}.vs-projectbar #visualSaveStatus{display:block;flex-basis:100%;padding-left:11px;font-size:9px}.vs-projectbar .btn{white-space:nowrap;font-size:9px;padding:7px 9px}.vs-layout{gap:12px}.vs-controls{grid-template-columns:1fr}.vs-controls>.vs-card:first-child{grid-column:auto}.vs-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vs-card{padding:13px;border-radius:11px}.vs-preview-head{font-size:8px}.vs-preview-head>span{font-size:8px}.vs-transport{gap:7px}.vs-transport>span{min-width:52px;font-size:8px}.vs-field{font-size:10px}.vs-stage.portrait{width:min(100%,255px)}.vs-local-chip{margin-left:32px}.vs-export-options{gap:9px}.vs-export-actions .btn{font-size:10px;padding:9px 10px}.vs-section-head h2{font-size:12px}.vs-section-head>.vs-text-button{margin-left:32px;margin-top:-5px}.vs-help{font-size:9px}.vs-status{font-size:9px}.vs-metadata .vs-section-head{margin-bottom:12px}}
/* Studio identity: deep navy keeps the moving canvas prominent; muted cyan marks editable controls and local status colors carry state. */
.vs button:not(:disabled):hover{filter:brightness(1.08)}
.vs button:not(:disabled):active{transform:translateY(1px)}
.vs :is(button,a,input,select,textarea):focus-visible,.studio-mode-tabs button:focus-visible{outline:3px solid #b7d9e8;outline-offset:2px;box-shadow:none}
@media(max-width:620px){
  .studio-mode-tabs button{min-height:44px;font-size:11px}
  .studio-mode-tabs button small{font-size:10px}
  .vs .btn:not(:disabled){min-height:44px}
  .vs .vs-text-button:not(:disabled){display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .vs .vs-play,.vs .vs-palette{width:44px;height:44px}
  .vs input[type=range]{height:44px}
  .vs input[type=text],.vs textarea,.vs select{min-height:44px;font-size:16px}
  .vs .vs-file-pick{min-height:48px}
  .vs .vs-checkbox{min-height:44px;padding-top:0;cursor:pointer}
  .vs .vs-checkbox input[type=checkbox]{width:24px;height:24px;flex:none;cursor:pointer}
  .vs select{cursor:pointer}
  .vs .vs-field{font-size:11px}
  .vs .vs-file-summary{font-size:10px}
  .vs .vs-help,.vs .vs-status{font-size:11px}
  .vs .vs-preview-head,.vs .vs-preview-head>span,.vs .vs-transport>span{font-size:10px}
}
@media(max-width:220px){
  .vs-transport{flex-wrap:wrap}
  .vs-transport input{min-width:44px}
}
@media(max-width:620px){
  .studio-mode-tabs{gap:8px}
  .vs-template-grid{gap:8px}
  .vs-transport{gap:8px}
  .vs-export-options{gap:10px}
}