.ppt-workspace {
  display: grid;
  grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr);
  gap: 18px;
  align-items: start;
}
.ppt-form { position: sticky; top: 96px; }
.ppt-form .field textarea[name="topic"] { min-height: 92px; }
.ppt-form .field textarea[name="instructions"] { min-height: 100px; }
.optional { font-weight: 400; color: #8a9ab5; }
.ppt-preview-panel { min-height: 620px; }
.ppt-preview-panel .panel-head { gap: 16px; }
.ppt-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ppt-preview > .empty {
  grid-column: 1 / -1;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.ppt-preview > .empty strong { color: #50637d; font-size: 14px; }
.ppt-preview > .empty span { font-size: 11px; }
.ppt-slide {
  aspect-ratio: 16 / 9;
  background: #f7f9fc;
  border: 1px solid #dfe6f0;
  border-radius: 10px;
  padding: 30px 26px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 7px 18px #1739660c;
}
.ppt-slide input, .ppt-slide textarea {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 7px;
  color: #314866;
  width: 100%;
  padding: 6px 8px;
}
.ppt-slide input:hover, .ppt-slide textarea:hover,
.ppt-slide input:focus, .ppt-slide textarea:focus {
  border-color: #bdd0ef;
  background: #fff;
}
.ppt-slide .ppt-title-input {
  font-size: 16px;
  font-weight: 800;
  color: #13213b;
  margin-bottom: 8px;
}
.ppt-slide textarea {
  font-size: 11px;
  line-height: 1.55;
  resize: none;
  flex: 1;
  min-height: 0;
  white-space: pre-wrap;
}
.ppt-slide small { font-size: 7px; color: #8494aa; letter-spacing: .4px; margin: 2px 8px; }
.ppt-number { position: absolute; right: 12px; top: 11px; font-size: 8px; font-weight: 800; color: #8b9ab0; }
.ppt-cover { background: #0a1e3f; border-color: #0a1e3f; justify-content: center; padding: 42px 30px; }
.ppt-cover .ppt-title-input { color: #fff; font-size: 21px; }
.ppt-cover textarea { color: #b9cbe4; flex: 0; height: 58px; }
.ppt-cover input:hover, .ppt-cover textarea:hover,
.ppt-cover input:focus, .ppt-cover textarea:focus { background: #ffffff0d; border-color: #5b7da8; }
.ppt-cover small { color: #73a7ff; margin-top: 20px; }
.ppt-cover .ppt-number { color: #7188a8; }

@media (max-width: 1150px) {
  .ppt-workspace { grid-template-columns: 1fr; }
  .ppt-form { position: static; }
  .ppt-preview-panel { min-height: 0; }
}
@media (max-width: 760px) {
  .ppt-preview { grid-template-columns: 1fr; }
  .ppt-preview-panel .panel-head { align-items: flex-start; flex-direction: column; }
  .ppt-slide { padding: 28px 21px 18px; }
}