/* Scene Maker v432
   Visual language: Frame & Media Studio.
   Workspace placement: Goal Maker.
   Presentation only: no functional elements, IDs, or application state are changed. */
:root{
  --scene-bg:#080611;
  --scene-panel:#12091f;
  --scene-panel-2:#171024;
  --scene-field:#1b1329;
  --scene-field-2:#221633;
  --scene-border:#4d2a70;
  --scene-border-strong:#6d38a2;
  --scene-text:#fff7ff;
  --scene-muted:#cdb7e8;
  --scene-accent:#8f2fff;
  --scene-accent-2:#f13cff;
  --scene-shadow:0 0 18px rgba(143,47,255,.14);
}

html,body{background:var(--scene-bg);color:var(--scene-text)}
body{background:radial-gradient(circle at 92% 0,rgba(143,47,255,.12),transparent 38%),var(--scene-bg)}
html.site-embedded .hero{display:none!important}
.page{width:100%;max-width:1900px;margin:0 auto;padding:20px 22px 34px}

/* Goal Maker placement: compact control rail beside the full live workspace. */
.workspace{display:grid;grid-template-columns:minmax(390px,460px) minmax(0,1fr);gap:18px;align-items:start;width:100%}
.editor{display:flex;flex-direction:column;gap:10px;min-width:0}
.previewPanel{position:sticky;top:12px;width:100%;min-width:0;padding:14px;overflow:visible}

/* Frame & Media Studio surfaces. */
.quickGuide,.step,.editor details,.previewPanel{
  background:linear-gradient(145deg,#150b24,#10091b)!important;
  border:1px solid #44255f!important;
  border-radius:14px!important;
  box-shadow:var(--scene-shadow)!important;
}
.quickGuide{padding:16px 18px;margin:18px 0 0;color:var(--scene-text)}
.quickGuide h2,.quickGuide b,.previewTop strong{color:var(--scene-text)}
.quickGuide small,.quickGuide .guideLines p,.note,.licenseBox,.status,.previewHelp{color:var(--scene-muted)}
.quickGuide span,.version,.eyebrow{color:var(--scene-accent-2)!important}

.editor details{overflow:hidden}
.editor summary{
  position:relative;display:flex;align-items:center;min-height:52px;padding:13px 48px 13px 17px;
  cursor:pointer;list-style:none;font-size:15px!important;font-weight:800;
  color:var(--scene-text);background:linear-gradient(90deg,rgba(143,47,255,.14),rgba(241,60,255,.025) 72%,transparent);
  border-left:3px solid transparent;border-bottom:1px solid transparent;transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.editor summary::-webkit-details-marker{display:none}
.editor .outputPicker>summary::before{display:none!important}
.editor summary::after{
  content:"+";position:absolute;right:15px;top:50%;display:grid;place-items:center;width:25px;height:25px;
  transform:translateY(-50%);border:1px solid #6d38a2;border-radius:7px;background:#1b1329;
  color:#efb9ff;font:800 18px/1 Inter,Segoe UI,sans-serif;
}
.editor details[open] summary{border-left-color:var(--scene-accent-2);border-bottom-color:#3d2452;color:#efb9ff;background:linear-gradient(90deg,rgba(143,47,255,.24),rgba(241,60,255,.05) 74%,transparent)}
.editor details[open] summary::after{content:"−"}
.editor details:not([open]) summary:hover{border-left-color:#8f2fff;background:linear-gradient(90deg,rgba(143,47,255,.22),rgba(241,60,255,.04) 74%,transparent)}
.inside,.outputPicker .stepInside{padding:2px 16px 16px}

.inside label{color:var(--scene-muted)}
.inside select,.inside input,.inside textarea,.inside button,button,.formatPick label,.checkcard{
  color:var(--scene-text);background:var(--scene-field)!important;border-color:var(--scene-border)!important;border-radius:10px;
}
.inside select,.inside input,.inside textarea{min-height:42px;padding:10px 12px}
.inside select{
  appearance:none;padding-right:42px!important;
  background-color:var(--scene-field)!important;
  background-image:linear-gradient(45deg,transparent 50%,#efb9ff 50%),linear-gradient(135deg,#efb9ff 50%,transparent 50%),linear-gradient(90deg,#4d2a70,#4d2a70)!important;
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%,calc(100% - 38px) 0!important;
  background-size:6px 6px,6px 6px,1px 100%!important;background-repeat:no-repeat!important;
}
.inside button,button{
  min-height:42px;font-size:14px;font-weight:800;
  background:linear-gradient(135deg,#9537ff,#7724df)!important;border:1px solid #b052ff!important;
}
.inside button:hover,button:hover{filter:brightness(1.1)}
.inside button:focus-visible,button:focus-visible,.inside input:focus-visible,.inside select:focus-visible{
  outline:2px solid var(--scene-accent-2);outline-offset:2px;
}
.danger{background:#351826!important;border-color:#8c4056!important}
.licenseBox,.status,.controlCard,.previewCard{background:#0f0918!important;border-color:#3d2452!important}
.controlCard{border:1px solid #3d2452}

.previewTop{align-items:center;min-height:42px;padding:2px 2px 12px}
.previewPanel{background:linear-gradient(145deg,#12091f,#0c0714)!important}
.previewCard{padding:10px!important;border:1px solid #39214d!important;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)}
.previewCard.active{border-color:#b052ff;box-shadow:0 0 0 2px rgba(143,47,255,.25)}
.formatHead{min-height:32px;align-items:center;padding:0 4px 9px;color:var(--scene-muted)}
.formatHead strong{letter-spacing:.06em;color:#fff7ff}
.formatHead span{padding:4px 7px;border:1px solid #3d2452;border-radius:6px;background:#171024;font-size:10px}
.stage{border:1px solid #4d2a70!important;border-radius:8px;background:#07040d;box-shadow:inset 0 0 28px rgba(143,47,255,.07)}
.previewGrid.both{grid-template-columns:minmax(0,1fr) minmax(210px,250px)!important;gap:12px!important}
.previewGrid.both #cardV{width:100%!important;max-width:250px!important}
.previewHelp{margin:10px 2px 0;padding-top:9px;border-top:1px solid #2d1a3d}
.stage .itemDelete{
  display:grid!important;place-items:center!important;width:22px!important;height:22px!important;min-height:22px!important;
  padding:0!important;margin:0!important;border:1px solid rgba(255,255,255,.5)!important;border-radius:6px!important;
  background:rgba(12,7,20,.9)!important;box-shadow:none!important;color:#fff!important;
  font:800 14px/1 Inter,Segoe UI,sans-serif!important;transform:none!important;
}
.stage .itemDelete:hover{background:#8b2744!important;border-color:#fff!important}
.stage .resize{width:16px!important;height:16px!important;min-height:0!important;padding:0!important;background:#fff!important;border:3px solid #8f2fff!important}

/* Instructions belong after the working area, not before it. */
.quickGuide .guideLines{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px!important}
.quickGuide h2{font-size:20px!important;margin-bottom:9px!important;color:#efb9ff}
.quickGuide small{display:block;padding-top:9px;border-top:1px solid #352246}

@media (min-width:1700px){
  .workspace{grid-template-columns:minmax(430px,500px) minmax(0,1fr);gap:22px}
  .page{padding-inline:28px}
}
@media (max-width:1100px){
  .workspace{grid-template-columns:350px minmax(0,1fr)}
}
@media (max-width:920px){
  .workspace{grid-template-columns:1fr}
  .previewPanel{position:static!important}
}
@media (max-width:650px){
  .page{padding:12px}
  .workspace{gap:12px}
  .quickGuide{padding:12px}
  .editor summary{min-height:50px;padding:14px}
  .inside,.outputPicker .stepInside{padding-inline:14px}
  .inside select,.inside input,.inside textarea,.inside button,button{font-size:16px;min-height:46px}
  .previewPanel{padding:10px}
  .previewGrid.both{grid-template-columns:1fr!important}
  .previewGrid.both #cardV{max-width:340px!important;justify-self:center!important}
  .quickGuide .guideLines{grid-template-columns:1fr}
}