:root{
  --black:#050505;
  --gold:#d4af37;
  --gold-soft:#f6e7b0;
  --muted:#cfc6ad;
  --serif:Georgia, "Times New Roman", serif;
  --sans:Arial, sans-serif;
}

*{box-sizing:border-box}

body{
  min-height:100vh;
  margin:0;
  color:white;
  background:
    radial-gradient(circle at 70% 10%, rgba(212,175,55,0.18), transparent 28%),
    linear-gradient(135deg, #050505, #1b120b 58%, #050505);
  font-family:var(--sans);
}

.studio-shell{
  width:min(1040px, calc(100% - 32px));
  margin:0 auto;
  padding:30px 0 64px;
}

.studio-header{
  display:flex;
  gap:16px;
  margin-bottom:26px;
}

.home-link{
  color:var(--gold-soft);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.6px;
  text-decoration:none;
  text-transform:uppercase;
}

.studio-panel{
  display:grid;
  grid-template-columns:minmax(280px, 0.95fr) minmax(280px, 1.05fr);
  gap:28px;
  align-items:start;
  padding:34px;
  background:
    radial-gradient(circle at top right, rgba(246,231,176,0.1), transparent 38%),
    linear-gradient(145deg, rgba(17,17,17,0.96), rgba(5,5,5,0.98));
  border:1px solid rgba(212,175,55,0.34);
  border-radius:8px;
  box-shadow:0 28px 80px rgba(0,0,0,0.48);
}

.studio-copy,.studio-form,.studio-result{
  min-width:0;
}

.eyebrow{
  color:var(--gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  margin:0 0 10px;
  text-transform:uppercase;
}

h1{
  color:white;
  font-family:var(--serif);
  font-size:clamp(42px, 7vw, 72px);
  line-height:1;
  margin:0 0 16px;
}

.studio-copy p:not(.eyebrow),
.studio-result p{
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  margin:0;
}

.studio-form{
  display:grid;
  gap:18px;
}

label,fieldset{
  display:grid;
  gap:8px;
  margin:0;
}

fieldset{
  padding:0;
  border:0;
}

label span,legend{
  color:var(--gold-soft);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

select,input{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  color:white;
  background:rgba(5,5,5,0.78);
  border:1px solid rgba(212,175,55,0.36);
  border-radius:8px;
  font:inherit;
}

.page-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}

.studio-btn,.download-btn{
  appearance:none;
  background:linear-gradient(135deg, var(--gold), var(--gold-soft));
  border:1px solid rgba(246,231,176,0.62);
  border-radius:8px;
  color:#050505;
  cursor:pointer;
  display:inline-flex;
  font-size:12px;
  font-weight:700;
  justify-content:center;
  letter-spacing:1.1px;
  min-height:44px;
  padding:14px 18px;
  text-decoration:none;
  text-transform:uppercase;
  transition:0.25s;
}

.studio-btn:hover,.download-btn:hover{
  transform:translateY(-1px);
}

.studio-result{
  grid-column:1 / -1;
  display:grid;
  gap:14px;
  padding:18px;
  background:rgba(5,5,5,0.46);
  border:1px solid rgba(212,175,55,0.2);
  border-radius:8px;
}

.studio-preview{
  grid-column:1 / -1;
  width:min(320px, 100%);
  aspect-ratio:9 / 16;
  background:#050505;
  border:1px solid rgba(212,175,55,0.34);
  border-radius:8px;
  box-shadow:0 20px 54px rgba(0,0,0,0.45);
}

@media (max-width:760px){
  .studio-panel{
    grid-template-columns:1fr;
    padding:24px;
  }

  .page-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:480px){
  .page-grid{
    grid-template-columns:1fr;
  }
}