body {
  margin:0;
  background:#f7f8fa;
  color:#172a46;
  font:14px Arial,"Noto Sans","PingFang SC",sans-serif
}
* {
  box-sizing:border-box
}
[hidden] {
  display:none!important
}
button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer;
  border:1px solid #cbd5e1;
  border-radius:7px;
  background:#fff;
  padding:8px 12px;
  color:#172a46
}
button:disabled {
  opacity:.45;
  cursor:default
}
.primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#e9501c;
  color:#fff;
  border:0;
  padding:12px 22px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer
}
.tool-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:14px 4vw;
  background:#fff;
  border-bottom:1px solid #e2e8f0
}
.brand {
  display:flex;
  align-items:center;
  gap:9px;
  color:#172a46;
  text-decoration:none;
  font-size:22px;
  font-weight:700
}
.brand img {
  width:42px
}
.brand small {
  font-size:12px;
  color:#64748b
}
.header-side,.language-links {
  display:flex;
  gap:14px;
  align-items:center
}
.tool-main {
  max-width:1300px;
  margin:auto;
  padding:34px 24px
}
.tool-hero {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px
}
.tool-hero h1 {
  font-size:clamp(36px,5vw,66px);
  margin:10px 0
}
.tool-hero p {
  color:#64748b;
  font-size:16px
}
.eyebrow {
  color:#e9501c;
  font-weight:700
}
.hero-visual {
  font-size:64px;
  color:#e9501c
}
.hero-visual .photo:before {
  content:'▧'
}
.hero-visual .video:before {
  content:'▶'
}
.tool-panel {
  background:white;
  border:1px solid #e2e8f0;
  border-radius:16px;
  overflow:hidden
}
.panel-heading,.panel-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 22px;
  border-bottom:1px solid #e2e8f0
}
.panel-footer {
  border-top:1px solid #e2e8f0;
  border-bottom:0
}
.panel-body {
  padding:22px
}
.dropzone {
  display:grid;
  place-content:center;
  text-align:center;
  gap:10px;
  min-height:230px;
  border:2px dashed #cbd5e1;
  border-radius:12px;
  cursor:pointer
}
.dropzone.is-over {
  border-color:#e9501c
}
.dropzone .dropzone-icon {
  width:36px;
  height:36px;
  color:#e9501c
}
.dropzone input,.upload input {
  display:none
}
.studio {
  display:grid;
  grid-template-columns:minmax(180px,220px) minmax(300px,1fr) minmax(260px,330px);
  margin:-22px;
  min-height:580px
}
.studio>* {
  padding:18px;
  min-width:0
}
.pages,.preview {
  border-right:1px solid #e2e8f0
}
.section-label {
  font-weight:700;
  margin-bottom:12px
}
#pageList {
  display:grid;
  gap:8px;
  max-height:600px;
  overflow:auto
}
.page-item {
  display:flex;
  width:100%;
  align-items:center;
  gap:10px;
  text-align:left
}
.page-item.selected {
  border-color:#e9501c;
  background:#fff3ec
}
.page-item img {
  width:44px;
  height:68px;
  object-fit:contain;
  background:#171717
}
.page-item span {
  display:grid;
  gap:5px
}
.row {
  display:flex;
  gap:5px;
  margin-top:12px
}
.row button {
  flex:1
}
.page-actions .row {
  margin-top:0;
  flex-wrap:wrap
}
.page-actions .row button {
  flex:1 1 auto;
  white-space:nowrap
}
.upload {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin:12px 0;
  padding:9px;
  border:1px dashed #cbd5e1;
  border-radius:7px;
  cursor:pointer;
  text-align:center
}
.preview-toolbar,.preview-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px
}
.preview-bottom {
  margin-top:12px
}
#canvas {
  position:relative;
  aspect-ratio:9/16;
  width:min(100%, 36.5625vh);
  max-height:65vh;
  margin:auto;
  background:#171717;
  overflow:hidden;
  container-type:inline-size
}
#canvas img {
  width:100%;
  height:100%;
  object-fit:contain
}
.video-text {
  position:absolute;
  inset:0;
  pointer-events:none
}
.video-text span {
  position:absolute;
  left:0;
  width:100%;
  color:#fff;
  text-align:center;
  font:4.1667cqw/1 sans-serif;
  white-space:pre
}
.video-text .shade {
  background:#000;
  opacity:.65
}
.editor-card {
  padding:14px;
  margin-bottom:14px;
  border:1px solid #e2e8f0;
  border-radius:9px;
  background:#f8fafc
}
.editor-card textarea,.editor-card input,.editor-card select {
  display:block;
  width:100%;
  margin:8px 0 14px
}
.editor-card textarea {
  min-height:95px
}
#musicPreview,#renderedVideo {
  width:100%
}
#customMusicName {
  overflow-wrap:anywhere;
  cursor:pointer;
  color:#e9501c;
  text-decoration:underline
}
.footer-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  min-width:0
}
.footer-meta p {
  margin:0
}
#status:empty {
  display:none
}
.footer-actions {
  display:flex;
  flex:none
}
.hero-heading {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px
}
.upsell {
  margin:0;
  max-width:36em
}
.upsell a {
  color:#e9501c;
  font-weight:700;
  white-space:nowrap
}
.tool-main.has-pages .hero-visual,.tool-main.has-pages #intro {
  display:none
}
.tool-main.has-pages .tool-hero {
  margin-bottom:14px
}
.tool-main.has-pages h1 {
  font-size:30px;
  margin:0
}
.tool-main.has-pages .hero-copy {
  flex:1 1 100%
}
.tool-main.has-pages .hero-heading {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%
}
.tool-main.has-pages .upsell {
  flex:0 1 320px;
  text-align:right
}
@media(max-width:850px) {
  .studio {
    display:block
  }
  .pages,.preview {
    border-right:0;
    border-bottom:1px solid #e2e8f0
  }
  #pageList {
    display:flex;
    overflow-x:auto
  }
  .page-item {
    min-width:140px
  }
  #canvas {
    width:min(100%, 33.75vh);
    max-height:60vh
  }
  .tool-header {
    flex-wrap:wrap
  }
  .hero-visual {
    display:none
  }
  .panel-footer {
    display:grid;
    gap:10px
  }
  .footer-actions .primary {
    width:100%
  }
  .tool-main.has-pages .hero-heading {
    flex-direction:column;
    align-items:flex-start
  }
  .tool-main.has-pages .upsell {
    text-align:left
  }
}
#canvas img.video-text {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none
}

/* Match the public site's navigation rhythm. */
.tool-header {
  position: relative;
  z-index: 20;
  padding: 0;
}
.tool-header .header-inner {
  display: flex;
  width: 100%;
  max-width: 1500px;
  margin: auto;
  padding: 20px clamp(24px, 4vw, 48px);
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.tool-header .brand {
  gap: 12px;
  font-size: 24px;
  letter-spacing: -.025em;
}
.tool-header .brand img {
  width: 44px;
  height: 44px;
}
.header-side {
  display: flex;
  align-items: center;
  gap: 16px;
}
.language {
  position: relative;
}
.language summary {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  list-style: none;
  cursor: pointer;
}
.language summary::-webkit-details-marker {
  display: none;
}
.language-options {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + 8px);
  width: 48px;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 18px #0f172a1a;
}
.language-options a {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.language-options a:hover,
.language-options a[aria-current="page"] {
  background: #f1f5f9;
}
.workbench-link {
  display: inline-flex;
  min-height: 48px;
  padding: 0 20px;
  align-items: center;
  border-radius: 8px;
  background: #e9501c;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.workbench-link:hover {
  background: #c83e13;
}
.tool-hero {
  gap: clamp(24px, 4vw, 64px);
}
.hero-copy {
  flex: 1 1 45%;
}
.hero-visual {
  display: block;
  flex: 1 1 55%;
  width: min(55%, 650px);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 18px 42px #172a4617;
}
#previewModal {
  width: min(92vw, 460px);
  max-height: 94vh;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 80px #0f172a55;
}
#previewModal::backdrop {
  background: #0f172ac9;
}
.modal-head,
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-head {
  margin-bottom: 12px;
}
.modal-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 1;
}
.modal-foot {
  margin-top: 12px;
}
#modalCanvas,
#renderedVideo {
  position: relative;
  display: block;
  width: min(100%, 35vh);
  height: auto;
  aspect-ratio: 9 / 16;
  margin: auto;
  overflow: hidden;
  background: #171717;
}
#modalCanvas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#modalCanvas img.video-text {
  position: absolute;
  inset: 0;
  object-fit: fill;
}
@media (max-width: 850px) {
  .tool-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-visual {
    display: block;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
  }
}