/* RESET & BODY */
* { box-sizing: border-box; margin: 0; padding: 0; } 
body {
  background: #222;
  color: #fff;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* HEADER */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px auto;
}
#logo { height: 50px; }
.tagline { font-size: 1.2rem; }
#logo,
.tagline {
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* TOGGLE CONTROLS */
.toggle-controls {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 10px auto;
  flex-wrap: wrap;
}
.toggle-controls label {
  font-size: 1rem;
  font-weight: bold;
  margin-right: 10px;
  color: #fff;
}
.preview-mode .toggle-controls {
  display: none !important;
}
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: #555;
  border-radius: 999px;
  transition: background-color 0.3s ease;
}
.slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.switch input:checked + .slider {
  background-color: #1ed760;
}
.switch input:checked + .slider::before {
  transform: translateX(22px);
}
/* CONTAINER */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  max-width: 700px;
}
/* SPINNING VINYL */
.frame {
  position: relative; width: 300px; height: 300px;
  border-radius: 50%; overflow: hidden; margin-bottom: 20px;
}
.ring { 
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; 
  animation: spin 40s linear infinite;
}
.ring video {
  width: 100%; height: 100%; object-fit: cover;
  animation: spin 40s linear infinite;
}
.label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 140px; height: 140px; border-radius: 50%; overflow: hidden;
}
.text-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,0.7); border-radius: 50%;
}
#labelText {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; color: #f0f0f0; padding: 5px;
}
#labelText h2, #labelText p {
  margin: 2px 0; font-size: clamp(8px, 2.5vw, 14px);
}
.vinyl-controls {
  margin: 20px 0 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  width: 100%;
}
.vinyl-controls h3 {
  margin-bottom: 10px;
  font-size: 1rem;
}
.range-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
}
.range-control {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.range-control input[type="range"] {
  flex: 1;
  accent-color: #1ed760;
}
.range-value {
  min-width: 56px;
  text-align: right;
  font-weight: bold;
}
.range-row label {
  margin: 0;
}
/* QR + BARCODE */
.codes-container {
  width: 300px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.code { width: 80px; display: none; }
/* INPUT FORM */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  width: 100%;
}
input[type="text"], input[type="file"], input[type="url"] {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  background: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
}
label {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  margin: 10px 0 5px;
}
/* TOGGLE BUTTON */
#toggleModeBtn {
  font-size: 1.2rem;
  padding: 12px 20px;
  background: #555;
  color: #fff;
  border: 1px solid #444;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* FINALIZE BUTTON */
#finalizeMainBtn {
  font-size: 1.2rem;
  padding: 12px 20px;
  background: radial-gradient(circle at top left, #c8ffdf 0%, #37d67a 38%, #16b35c 70%, #0e7a40 100%);
  color: #fff;
  border: 1px solid #0f8a49;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(29, 185, 84, 0.35), inset 0 2px 6px rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#finalizeMainBtn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.35);
  opacity: 0.6;
}
#finalizeMainBtn::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -40%;
  width: 50%;
  height: 220%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 45%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-120%) rotate(10deg);
  transition: transform 0.6s ease;
}
.finalize-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.finalize-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  width: max-content;
  max-width: 240px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.finalize-tooltip-wrapper:hover .finalize-tooltip,
.finalize-tooltip-wrapper:focus-within .finalize-tooltip {
  opacity: 1;
  transform: translateY(0);
}
#finalizeMainBtn.is-pressing {
  transform: scale(0.98);
  background: radial-gradient(circle at top left, #9cf2c4 0%, #28c66d 42%, #0f944d 80%, #0b6a38 100%);
}
#finalizeMainBtn:hover::after {
  transform: translateX(260%) rotate(10deg);
}
/* Optional artifact actions are deliberately quiet links, not primary buttons. */
.action-btn,
.nft-btn {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.action-btn:hover,
.action-btn:focus-visible,
.nft-btn:hover,
.nft-btn:focus-visible {
  background: none;
  box-shadow: none;
  color: #fff;
  text-decoration-color: currentColor;
}
.action-btn:focus-visible,
.nft-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.preview-mode .nft-form-fields { display: none !important;
}
/* ================================
   HERO — FINAL LOOK (USED EVERYWHERE)
================================ */

.hero-preview {
  background: linear-gradient(to bottom right, #111, #333);
  color: #fff;
  text-align: center;
  padding: 4rem 2rem;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  font-family: 'Poppins', sans-serif;
  position: relative;
  width: 100%;
  max-width: 700px;
  animation: fade-in 0.6s ease both;
}
.hero-preview h1 {
  font-family: 'Bebas Neue', cursive;
  font-size: 3rem;
  letter-spacing: 1.5px;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}
.hero-preview p {
  font-size: 1.25rem;
  margin: 1rem 0 2rem;
  font-weight: 300;
}
.hero-preview .btn-primary {
  background: #1DB954;
  color: white;
  padding: 0.9rem 2rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-preview .btn-primary:hover {
  background: #1ed760;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.hero-preview button {
  margin-top: 1.5rem;
  background: transparent;
  color: white;
  border: 1px solid white;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
}

/* LIGHT MODE */
.light-mode {
  background: #f4f4f4;
  color: #111;
}
.light-mode input,
.light-mode label,
.light-mode .drop-zone {
  background: #fff;
  color: #111;
  border-color: #aaa;
}

/* DROP ZONE */
.drop-zone {
  border: 2px dashed #1DB954;
  padding: 20px;
  text-align: center;
  color: #ccc;
  cursor: pointer;
  margin: 20px auto;
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  transition: background 0.3s ease;
}
.drop-zone:hover {
  background: rgba(29, 185, 84, 0.1);
}
.drop-zone.dragover {
  background: rgba(29, 185, 84, 0.2);
  border-color: #1ed760;
  color: #fff;
}

/* live-3920 presentation transplant: compact native player and numeric clock */
.audio-preview-shell { display: grid; gap: .3rem; width: min(100%, 28rem); padding: .45rem .55rem; border: 1px solid rgba(255,255,255,.18); border-radius: .9rem; background: rgba(5,12,22,.46); backdrop-filter: blur(8px); }
.audio-preview-shell audio { display: block; width: 100%; height: 32px; }
#mp3-player-time { color: rgba(248,251,255,.78); font: 700 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }

.seal-product-overlay { position: fixed; inset: 0; z-index: 3000; overflow: auto; padding: clamp(1rem,3vw,2rem); background: rgba(3,8,16,.76); }
.seal-product-overlay[hidden] { display: none; }
.seal-product-dialog { width: min(62rem,100%); margin: auto; padding: clamp(1rem,2vw,1.5rem); border: 1px solid rgba(255,255,255,.18); border-radius: 1.5rem; color: #f8fbff; background: rgba(7,16,31,.82); backdrop-filter: blur(12px); }
.seal-product-dialog > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.seal-product-dialog h2, .seal-product-dialog p, .seal-product-card h3 { margin: 0 0 .4rem; }
.seal-product-dialog button { cursor: pointer; border: 1px solid rgba(255,255,255,.35); border-radius: .8rem; padding: .7rem 1rem; font-weight: 800; }
.seal-product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 1rem; }
.seal-product-card { display: grid; gap: .75rem; padding: 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1.2rem; background: rgba(255,255,255,.06); }
.seal-preview-phone { width: min(100%,14rem); height: 20rem; justify-self: center; padding: .35rem; border: 1px solid rgba(255,255,255,.18); border-radius: 1.4rem; overflow: hidden; }
.seal-preview-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 1.05rem; pointer-events: none; }
@media (max-width: 650px) { .seal-product-grid { grid-template-columns: 1fr; } .seal-preview-phone { height: 16rem; } }

/* PREVIEW MODE VISIBILITY */
.preview-mode .hero-editor,
.preview-mode .form-grid,
.preview-mode .nft-form-fields,
.preview-mode #inputForm,
.preview-mode #mp3-upload-section {
  display: none !important;
}
.preview-mode .hero-preview,
.preview-mode #mp3-player-section {
}
.preview-mode .toggle-controls {
  display: none !important;
}

/* FINAL MODE VISIBILITY — ADD THIS */
.finalized #actionButtonSection,
.finalized #nftButtonSection {
  display: block !important;
}


/* UTILITIES */
.hidden { display: none !important; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* TestStream presentation donor: its root Surface is a fixed, viewport-covering
   back plane. Staging adapts that paint to its page-owned authority host rather
   than restoring TestStream's former artifact-owned media nodes. */
#surfaceMediaHost {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}
#surfaceMediaHost > video,
#surfaceMediaHost > img,
#surfaceMediaHost > iframe {
  display: block;
  width: 100vw;
  height: 100vh;
  border: 0;
  object-fit: cover;
  object-position: center;
}
#viewerPage { position: relative; z-index: 1; width: 100%; min-height: 100vh; overflow: visible; }
#artifactRoot {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1rem;
  width: min(100% - 2rem, 36rem);
  min-height: 100vh;
  margin-inline: auto;
  padding: 5.2rem 1rem 4rem;
  overflow: visible;
}
.ambient-sound-control {
  display: block;
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1200;
  width: auto;
  max-width: min(15rem, calc(100vw - 2rem));
  margin: 0;
  padding: .48rem .72rem;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  color: #fff;
  background: rgba(5,12,22,.34);
  box-shadow: 0 .35rem 1.2rem rgba(0,0,0,.2);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  cursor: pointer;
  font: inherit;
  font-size: clamp(.68rem, 2.3vw, .78rem);
  font-weight: 700;
  line-height: 1.15;
  white-space: normal;
}

/* Collision-safe viewer controls. Optional actions and Surface sound share one
   lower-left flow, so clearance is physical layout space rather than z-index. */
.control-utility-dock {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  width: min(34rem, calc(100vw - max(2rem, env(safe-area-inset-left))));
  pointer-events: none;
}
.control-utility-dock > * { pointer-events: auto; }
.optional-cta-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 28px;
  max-width: 100%;
}
.optional-cta-links[hidden] { display: none !important; }
.optional-cta-links > div,
.optional-cta-links a { min-width: 0; max-width: 100%; }
.optional-cta-links a {
  max-width: min(18rem, calc(100vw - 2rem - env(safe-area-inset-left)));
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.2;
}
.light-mode .optional-cta-links .action-btn,
.light-mode .optional-cta-links .nft-btn { color: rgba(17, 17, 17, 0.65); }
.light-mode .optional-cta-links .action-btn:hover,
.light-mode .optional-cta-links .action-btn:focus-visible,
.light-mode .optional-cta-links .nft-btn:hover,
.light-mode .optional-cta-links .nft-btn:focus-visible { color: #111; }
.control-utility-dock .ambient-sound-control { position: static; }
#previewCTA { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }

/* The measurement guard selects this deterministic reflow mode whenever any
   protected rectangles (including the untouched Seal trigger) are too close. */
body.controls-reflow #artifactRoot {
  padding-bottom: calc(12rem + env(safe-area-inset-bottom));
}
body.controls-reflow .control-utility-dock {
  position: relative;
  left: auto;
  bottom: auto;
  order: 10;
  justify-self: start;
  margin-top: 28px;
  margin-left: env(safe-area-inset-left);
}
body.controls-reflow .optional-cta-links { flex-direction: column; align-items: stretch; }

@media (max-width: 600px), (max-height: 480px) {
  .optional-cta-links { flex-direction: column; align-items: stretch; }
  .control-utility-dock { width: min(18rem, calc(100vw - 2rem - env(safe-area-inset-left))); }
}
.ambient-sound-control {
  opacity: .32;
  transition: opacity 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
body:not([data-exported="true"]) .ambient-sound-control {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
body[data-exported="true"] .ambient-sound-control:hover,
body[data-exported="true"] .ambient-sound-control:focus-visible {
  opacity: 1;
}
.ambient-sound-control[aria-pressed="false"] { color: #ddd; background: #333c; }
html { min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body.preview-mode, body.finalized, body[data-exported="true"] { align-items: stretch; min-height: 100%; overflow: visible; background: transparent; }
body.preview-mode .container, body.finalized .container { position: relative; z-index: 1; max-width: none; padding: 0; background: transparent; }
body.preview-mode #surfaceMediaHost, body.finalized #surfaceMediaHost, body[data-exported="true"] #surfaceMediaHost { position: fixed; inset: 0; }
.system-spinner { position: relative; display: grid; place-items: center; order: 2; margin: 1rem auto; width: min(18rem, 70vw); aspect-ratio: 1; min-height: 18rem; }
#artifactLogoBadge { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); display: block; width: clamp(5.4rem, 9vw, 7.2rem); height: auto; margin: 0; z-index: 2; opacity: .92; filter: drop-shadow(0 .35rem .8rem rgba(0,0,0,.45)); }
#faceplateImage { display: block; width: min(80vw, 38rem); max-height: 70vh; object-fit: contain; margin: 1rem auto; }
[data-artifact-module][data-visible="false"] { display: none !important; }
.system-spinner__record { position: absolute; inset: 0; width: 100%; height: 100%; border: .55rem solid #1c2635; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at center, transparent 0 16%, rgba(145,152,165,.72) 16% 31%, transparent 31%), conic-gradient(from 30deg,#04070c,#111927,#04070c,#1c2635,#04070c); box-shadow: 0 0 3rem rgba(52,213,255,.12); animation: recordSpin 7s linear infinite; }
.system-spinner__record::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle,rgba(255,255,255,.06) 0 .45px,rgba(0,0,0,.16) .45px 1.1px,transparent 1.1px 2.2px); mix-blend-mode: screen; opacity: .82; }
.system-spinner__record::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 146deg,rgba(255,255,255,.28) 0deg,rgba(255,255,255,.08) 20deg,transparent 62deg,transparent 220deg,rgba(255,255,255,.12) 278deg,transparent 324deg,rgba(255,255,255,.2) 360deg); mix-blend-mode: screen; opacity: .72; }
@keyframes recordSpin { to { transform: rotate(360deg); } }
.system-spinner__label { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: min(8rem, 44.444%); aspect-ratio: 1; padding: 0; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; color: rgba(22,28,32,.86); background: radial-gradient(circle at center,rgba(150,154,145,.82) 0 38%,rgba(112,118,114,.72) 39% 58%,rgba(70,78,82,.58) 59% 100%); container-type: inline-size; }
.center-label-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.015rem,.28vw,.08rem); width: 50%; height: 50%; overflow: hidden; text-align: center; border-radius: 50%; line-height: 1; }
.center-label-text > strong, .center-label-text > span, .center-label-text > small { display: block; width: 100%; max-width: 100%; margin: 0 auto; overflow: hidden; overflow-wrap: anywhere; line-height: .92; text-align: center; }
.center-label-text > strong { font-size: clamp(.34rem,2.4cqw,.58rem); font-weight: 800; }
.center-label-text > span { font-size: clamp(.3rem,2.05cqw,.5rem); font-weight: 700; }
.center-label-text > small { font-size: clamp(.26rem,1.75cqw,.42rem); font-weight: 700; }
#heroPreview { order: 1; }
#codesOutput, #mp3-player-section, #actionButtonSection, #nftButtonSection, #bottomLinksSection, #copyLinkSection { order: 3; }
body.preview-mode #artifactRoot, body.finalized #artifactRoot, body[data-exported="true"] #artifactRoot { display: grid; }

/* Viewer presentation parity. These are the staging adaptations of the donor
   logo, ambient sound, audio-preview-shell and artifact-info-panel rules. */
body.preview-mode .ambient-sound-control[aria-pressed="false"],
body.finalized .ambient-sound-control[aria-pressed="false"],
body[data-exported="true"] .ambient-sound-control[aria-pressed="false"] {
  background: rgba(20,27,38,.3);
}

#mp3-player-section {
  width: min(100%, 24rem);
  padding: .25rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1rem;
  background: rgba(255,255,255,.07);
  box-shadow: 0 .45rem 1.6rem rgba(0,0,0,.14);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.audio-preview-shell {
  width: 100%;
  padding: .3rem .4rem;
  border-color: rgba(255,255,255,.12);
  background: rgba(4,10,18,.14);
  box-shadow: none;
}
#mp3-player-time { color: rgba(255,255,255,.9); padding-inline: .2rem; }

#heroPreview.artifact-info-panel {
  width: min(100%, 25rem);
  max-width: 25rem;
  padding: clamp(.7rem, 2vw, 1rem);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 1.05rem;
  color: #fff;
  background: rgba(5,12,22,calc(var(--hero-panel-opacity, .82) * .18)) !important;
  box-shadow: 0 .6rem 1.8rem rgba(0,0,0,.16);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  overflow: hidden;
}
#heroPreview.artifact-info-panel::before { content: none !important; }
#heroPreview.artifact-info-panel .hero-content {
  padding: clamp(.55rem, 2vw, .85rem);
  border-radius: .8rem;
  background: rgba(0,0,0,.08) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#heroPreview.artifact-info-panel h1 { font-size: clamp(1.35rem, 5vw, 2rem); margin-bottom: .35rem; }
#heroPreview.artifact-info-panel p { font-size: clamp(.9rem, 3vw, 1.05rem); margin: .35rem 0 .75rem; }
#heroPreview.artifact-info-panel .btn-primary { padding: .62rem 1.25rem; font-size: .92rem; }

#artifactRoot[data-logo-visible="true"] #artifactLogoBadge[data-visible="true"] { display: block !important; }
#artifactRoot[data-logo-visible="false"] #artifactLogoBadge { display: none !important; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* FINALIZED MODE */
.finalized .toggle-controls,
.finalized .hero-editor,
.finalized .form-grid,
.finalized .nft-form-fields,
.finalized #inputForm,
.finalized #mp3-upload-section,
.finalized #toggleModeBtn {
  display: none !important;
}
.finalized #heroPreview,
.finalized #actionButtonSection,
.finalized #nftButtonSection,
.finalized #mp3-player-section {
}
.finalized #actionButtonSection {
  order: 1;
}
.finalized #mp3-player-section {
  order: 2;
}
.finalized #nftButtonSection {
  order: 3;
}
.finalized #copyLinkSection {
  order: 4;
}
.finalized #actionButtonLink,
.finalized #nftButtonLink {
  pointer-events: auto;
}
.finalized #logo,
.finalized .tagline {
  opacity: 0.06;
  filter: grayscale(100%);
}

#toggleModeBtn:disabled,
#finalizeBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* ✅ Finalize button becomes a status indicator */
.finalized #finalizeBtn {
  display: inline-flex !important;
  pointer-events: none;
  opacity: 0.85;
  cursor: default;
}


body:not(.preview-mode):not(.finalized) #actionButtonSection,
body:not(.preview-mode):not(.finalized) #nftButtonSection {
  display: none !important;
}
#heroPreview {
  background-color: rgba(0, 0, 0, 0.3); /* 30% opaque black overlay */
}

#heroPreview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: 0;
}
#heroPreview .hero-content {
  position: relative;
  z-index: 1;
}

#heroPreview {
  position: relative;
  overflow: hidden;
}

#heroPreview::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: black; /* fallback opaque background */
  opacity: 0.5;
  z-index: 0;
}

#heroPreview .hero-content {
  position: relative;
  z-index: 1;
}

#heroPreview {
  background: none !important;
}

#heroPreview {
  background: #111 !important; /* dark flat background */
}

#heroPreview {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

#heroPreview::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 50% black overlay */
  z-index: 0;
}

#heroPreview .hero-content {
  position: relative;
  z-index: 1;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 50% black overlay */
  z-index: 0;
  pointer-events: none;
}
body > * {
  position: relative;
  z-index: 1;
}

/* HERO OVERLAY GRADIENT */
#heroPreview::before {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2));
}

/* COPY LINK */
#copyLinkSection {
  display: none;
  margin-top: 14px;
  text-align: center;
}
#copyLinkButton {
  border-radius: 999px;
  padding: 10px 18px;
  background: #1e88e5;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#copyLinkButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}
#copyLinkFeedback {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: #cbe7ff;
  min-height: 1rem;
}
.finalized #copyLinkSection {
  display: block;
}

/* DEVICE PREVIEW */
body.portrait-mode .container {
  max-width: 420px;
}
body.portrait-mode .hero-preview {
  max-width: 420px;
}
body.portrait-mode .frame {
  width: 220px;
  height: 220px;
}
body.portrait-mode .codes-container {
  width: 100%;
  justify-content: center;
  gap: 14px;
}

/* SMOOTH FINALIZED MODE */
.toggle-controls,
.hero-editor,
.form-grid,
.nft-form-fields,
#inputForm,
#mp3-upload-section,
#toggleModeBtn {
  transition: opacity 0.3s ease;
}

/* BUTTON HOVER LIFT */
#toggleModeBtn:hover,
#finalizeMainBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

/* FOOTER */
.site-footer {
  align-self: center;
  max-width: 100%;
  margin: 0;
  padding: 1px 4px;
  color: currentColor;
  font-size: 8px;
  line-height: 1.05;
  text-align: center;
  opacity: 0.1;
  transition: opacity 160ms ease;
}
.site-footer p { margin: 0; }
.site-footer:hover,
.site-footer:focus,
.site-footer:focus-within { opacity: 0.42; }
.site-footer:focus { outline: 1px solid currentColor; outline-offset: 1px; }
body.preview-mode:not(.finalized):not([data-exported="true"]) > .site-footer { display: none !important; }

.footer-tagline {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 6px;
}

/* MOBILE POLISH */
@media (max-width: 600px) {
  .container {
    padding: 16px;
  }

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

  .hero-preview {
    padding: 3rem 1.5rem;
  }

  .hero-preview h1 {
    font-size: 2.2rem;
  }

  .hero-preview p {
    font-size: 1rem;
  }

  #heroPreview {
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem;
    margin: 0 12px;
  }

  #heroPreview .hero-content {
    padding: 1.25rem;
  }

  .codes-container {
    width: 100%;
    justify-content: center;
    gap: 16px;
  }

  .mode-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  #actionButtonSection,
  #nftButtonSection {
    width: 100%;
  }

  .soft-gate-card {
    padding: 22px;
  }
}

@media (max-width: 420px) {
  .mode-indicator {
    flex-wrap: wrap;
    gap: 6px;
    text-align: center;
  }

  .mode-indicator .mode-separator {
    display: none;
  }
}

#heroPreview {
  background-color: rgba(0, 0, 0, 0.35); /* 35% transparent black background */
  padding: 2rem;
  border-radius: 12px;
}
#heroPreview .hero-content {
  position: relative;
  z-index: 1;
  color: white;
}

#heroPreview {
  background: none !important;
  padding: 2rem;
}
#heroPreview .hero-content {
  background: none;
  color: white;
  text-align: center;
}

#heroPreview .hero-content {
  background: rgba(0, 0, 0, 0.2); /* semi-transparent for contrast */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 1.5rem;
  color: white;
}

#heroPreview {
  background-color: rgba(0, 0, 0, 0.35);  /* 35% opaque black background */
  padding: 2rem;
  border-radius: 12px;
  color: white;
}
#heroPreview .hero-content {
  background: none;
  position: relative;
  z-index: 1;
}

#heroPreview .btn-primary {
  background-color: #00c853 !important;  /* Bright green CTA */
  color: white !important;
  font-weight: bold;
  z-index: 2;
  position: relative;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  border-radius: 8px;
  opacity: 1 !important;
}

/* Restrict opaque background only to the heroPreview container */
#heroPreview {
  background-color: rgba(0, 0, 0, 0.35);
  padding: 2rem;
  border-radius: 12px;
}

/* Restrict any styling effects (like z-index or opacity) to hero text/button only */
#heroPreview .hero-content {
  background: none;
  color: white;
  position: relative;
  z-index: 1;
}
#heroPreview .hero-content {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
}
/* Style CTA button in hero only */
#heroPreview .btn-primary {
  background-color: #00c853 !important;
  color: white !important;
  font-weight: bold;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  border-radius: 8px;
  opacity: 1 !important;
  position: relative;
  z-index: 2;
}

/* Everywhere else: leave all .btn-primary alone */
body .btn-primary:not(#heroPreview .btn-primary) {
  opacity: 1 !important;
  filter: none !important;
}

/* Hero area still gets slight opacity */
#heroPreview {
  background-color: rgba(0, 0, 0, 0.35);
  padding: 2rem;
  border-radius: 12px;
}

/* Hero text remains clean */
#heroPreview .hero-content {
  background: rgba(0, 0, 0, 0.1);
  color: white;
  position: relative;
  z-index: 1;
}

/* GLOBAL CTA button protection — no blur, no fade */
.btn-primary {
  background-color: #00c853 !important;
  color: white !important;
  font-weight: bold;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  border-radius: 8px;
  opacity: 1 !important;
  filter: none !important;
  z-index: 2;
  position: relative;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
}
}

/* Fix finalize-mode CTA (assumes it's inside #finalScreen or similar) */
#finalScreen .btn-primary,
.finalize-section .btn-primary,
body.finalized .btn-primary {
  opacity: 1 !important;
  filter: none !important;
  background-color: #00c853 !important;
  color: white !important;
  font-weight: bold;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  border-radius: 8px;
  position: relative;
  z-index: 3;
}

/* Match any final screen button */
#finalScreen .btn-primary,
.final-cta,
body.finalized .btn-primary,
footer .btn-primary {
  background-color: #00c853 !important;
  color: white !important;
  font-weight: bold;
  opacity: 1 !important;
  filter: none !important;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  border-radius: 8px;
  position: relative;
  z-index: 10;
}

/* TestStream creator-room shell: presentation donor adapted only at staging's
   existing control and artifact authority seams. */
:root { --creator-ink:#f7f8fb; --creator-muted:#aeb7c5; --creator-line:rgba(255,255,255,.14); --creator-panel:rgba(12,17,25,.82); --creator-accent:#66e3a4; }
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) { display:block; min-height:100%; color:var(--creator-ink); background:#080c12; }
.creator-toolbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:1rem; width:100%; min-height:3.75rem; padding:.55rem clamp(.75rem,2vw,1.5rem); border-bottom:1px solid var(--creator-line); background:rgba(7,11,17,.9); backdrop-filter:blur(18px) saturate(135%); }
.creator-toolbar__brand { display:flex; align-items:center; gap:.55rem; margin-right:auto; white-space:nowrap; }.creator-toolbar #logo{height:2rem}.creator-toolbar .tagline{font-size:.78rem;color:var(--creator-muted)}
.mode-toggle-button { display:flex; align-items:center; gap:.15rem; padding:.2rem; border:1px solid var(--creator-line); border-radius:999px; background:#05080d; }.mode-toggle-button legend{position:absolute}.mode-toggle-button label{margin:0;padding:.35rem .55rem;font-size:.72rem}.mode-toggle-button input{accent-color:var(--creator-accent)}#creatorModeToggleBtn{min-width:3.4rem;padding:.42rem .7rem;border:0;border-radius:999px;color:#06100b;background:var(--creator-accent);font-weight:800}
.toolbar-switches,.viewport-controls{display:flex;align-items:center;gap:.6rem}.toolbar-switches__label{color:var(--creator-muted);font-size:.7rem;white-space:nowrap}.compact-switch,.viewport-controls label{display:flex;align-items:center;gap:.3rem;margin:0;color:var(--creator-muted);font-size:.73rem}.compact-switch input,.viewport-controls input{accent-color:var(--creator-accent)}
.creator-room { position:relative; z-index:2; display:grid; grid-template-columns:minmax(17rem,21rem) minmax(0,1fr); gap:clamp(1rem,2.2vw,2rem); width:min(100%,96rem); margin:0 auto; padding:clamp(1rem,2vw,2rem); align-items:start; }
.authoring-rail { display:grid; gap:.75rem; min-width:0; }.authoring-card { padding:1rem; border:1px solid var(--creator-line); border-radius:1rem; background:var(--creator-panel); box-shadow:0 .8rem 2rem rgba(0,0,0,.2); backdrop-filter:blur(15px) saturate(125%); }.authoring-card h2{margin:0 0 .2rem;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase}.authoring-card>p{margin:.2rem 0 .65rem;color:var(--creator-muted);font-size:.76rem}.authoring-card label{margin:.65rem 0 .25rem;font-size:.76rem;color:#dfe5ee}.authoring-card input[type="text"],.authoring-card input[type="url"],.authoring-card input[type="file"],.authoring-card textarea{width:100%;margin:0;padding:.62rem .7rem;border:1px solid var(--creator-line);border-radius:.55rem;color:#fff;background:rgba(2,5,9,.68);font:inherit}.choice-row{display:flex!important;align-items:center;gap:.45rem}.control-status,.later-batch{line-height:1.4}.rail-button{margin-top:.75rem;padding:.55rem .75rem;border:1px solid var(--creator-line);border-radius:999px;color:#fff;background:#263241}.drop-zone{padding:.8rem;border:1px dashed rgba(102,227,164,.5);border-radius:.6rem;color:var(--creator-muted);background:rgba(0,0,0,.2)}
.authoring-guide{padding:1rem;border:1px solid var(--creator-line);border-radius:1rem;background:linear-gradient(145deg,rgba(25,37,50,.96),rgba(8,13,20,.96));box-shadow:0 1rem 2.5rem rgba(0,0,0,.24)}.authoring-guide__eyebrow{margin:0 0 .35rem;color:var(--creator-accent);font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.authoring-guide h1{margin:0;font-size:1.25rem;line-height:1.15}.authoring-guide__intro>p:last-child{margin:.55rem 0 1rem;color:var(--creator-muted);font-size:.76rem;line-height:1.45}.authoring-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}.authoring-step{display:flex;align-items:center;gap:.35rem;min-width:0;padding:.45rem;border:1px solid transparent;border-radius:.55rem;color:var(--creator-muted);background:rgba(255,255,255,.035);font-size:.7rem;cursor:pointer}.authoring-step span{display:grid;place-items:center;flex:0 0 1.25rem;height:1.25rem;border-radius:50%;background:rgba(255,255,255,.08);font-size:.62rem}.authoring-step:hover,.authoring-step:focus-visible{border-color:var(--creator-line);color:#fff}.authoring-step.is-suggested-next{border-color:rgba(139,240,190,.24);color:rgba(225,255,240,.86);box-shadow:inset 0 0 .7rem rgba(102,227,164,.035)}.authoring-step.is-suggested-next::after{content:'\203A';margin-left:auto;color:rgba(139,240,190,.72);font-size:.9rem;line-height:1}.authoring-step.is-active{border-color:rgba(102,227,164,.5);color:#fff;background:rgba(102,227,164,.11)}.authoring-step.is-active span{color:#07110c;background:var(--creator-accent)}.has-progressive-authoring>.authoring-card:not(.is-authoring-active){display:none}.has-progressive-authoring>.authoring-card.is-authoring-active{animation:authoring-card-in .2s ease-out}.authoring-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.65rem}.authoring-pagination button{padding:.6rem .8rem;border:1px solid var(--creator-line);border-radius:999px;color:#fff;background:#263241;cursor:pointer}.authoring-pagination button:last-child{background:var(--creator-accent);color:#07110c;font-weight:800}.authoring-pagination button:disabled{opacity:.35;cursor:not-allowed}.authoring-pagination p{color:var(--creator-muted);font-size:.72rem}.authoring-pagination button:last-child{text-align:center}@keyframes authoring-card-in{from{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:none}}
.vinyl-controls{margin:.3rem 0 0;padding:0;background:none}.range-row{gap:.25rem;padding:.35rem 0}.range-control output{min-width:3rem;text-align:right;font-size:.72rem}.secondary-details{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.7rem;padding:.7rem;border-top:1px solid var(--creator-line);opacity:.78}.authoring-card .secondary-field{margin-top:.5rem!important;opacity:.78}.plus-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.plus-choice-grid label{margin:0;padding:.55rem;border:1px solid var(--creator-line);border-radius:.6rem}
.artifact-workspace { position:sticky; top:4.75rem; min-width:0; min-height:calc(100vh - 6rem); overflow:visible; }.artifact-workspace #artifactRoot{width:min(100%,38rem);min-height:calc(100vh - 7rem);padding:4.5rem 1rem 2rem;border:0;background:transparent}.artifact-workspace .system-spinner{width:clamp(20rem,42vw,30rem);max-width:90vw;min-height:0}.artifact-info-panel{width:min(100%,32rem);padding:1.2rem 1.05rem;border:1px solid rgba(255,255,255,.18);border-radius:1.2rem;background:rgba(8,12,18,var(--hero-panel-opacity,.82))!important;box-shadow:0 1rem 3rem rgba(0,0,0,.28);backdrop-filter:blur(18px) saturate(140%)}/* Keep the existing Preview/Mint authority attached to the viewport rather than
   to the tall artifact/authoring geometry. Surface Media stays below this UI. */
.mode-controls{position:fixed;right:clamp(.75rem,2vw,1.5rem);bottom:clamp(.75rem,2vw,1.5rem);z-index:70;display:flex;justify-content:center;gap:.7rem;max-width:calc(100vw - 1.5rem);padding:.65rem;border:1px solid var(--creator-line);border-radius:1rem;background:rgba(7,11,17,.92);box-shadow:0 .8rem 2.5rem rgba(0,0,0,.45);backdrop-filter:blur(18px) saturate(135%)}.mode-controls button{margin:0!important}
#faceplateImage { display:none!important; } /* public-card asset, never foreground Preview */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.preview-mode .creator-toolbar,.preview-mode .authoring-rail,.finalized .creator-toolbar,.finalized .authoring-rail,.finalized .mode-controls,[data-exported="true"] .creator-toolbar,[data-exported="true"] .authoring-rail,[data-exported="true"] .mode-controls{display:none!important}.preview-mode .creator-room,.finalized .creator-room,[data-exported="true"] .creator-room{display:block;width:100%;padding:0}.preview-mode .artifact-workspace,.finalized .artifact-workspace,[data-exported="true"] .artifact-workspace{position:relative;top:auto;min-height:100vh}
@media(max-width:900px){.creator-toolbar{flex-wrap:wrap}.creator-toolbar__brand{width:auto}.creator-room{grid-template-columns:minmax(15rem,18rem) minmax(0,1fr);padding:.75rem;gap:.75rem}.artifact-workspace .system-spinner{width:clamp(14.5rem,48vw,24rem)}}
@media(max-width:700px){.creator-toolbar{position:relative}.creator-toolbar__brand{width:100%}.toolbar-switches{order:3;width:100%;justify-content:space-between}.viewport-controls{margin-left:auto}.creator-room{display:flex;flex-direction:column;padding:.75rem}.authoring-rail{width:100%}.artifact-workspace{position:relative;top:auto;order:-1;width:100%;min-height:auto}.artifact-workspace #artifactRoot{min-height:auto;padding:4rem .5rem 1rem}.artifact-workspace .system-spinner{width:min(20rem,82vw)}.mode-controls{right:.5rem;bottom:.5rem;left:.5rem;z-index:70}.mode-controls>#toggleModeBtn,.mode-controls>.finalize-tooltip-wrapper{flex:1}.mode-controls button{width:100%}.secondary-details{grid-template-columns:1fr}}

/* Runtime-only Mint presentation. It is a viewport sibling of artifactRoot so
   it can neither replace the accepted artifact nor enter its frozen clone. */
.mint-curtain[hidden] { display: none !important; }
.mint-curtain { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: clamp(1rem,3vw,2.5rem); color: #effffc; background: rgba(1,10,14,.76); backdrop-filter: blur(10px) saturate(120%); }
.mint-curtain::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 28%,rgba(45,231,193,.17),transparent 30%),radial-gradient(circle at 12% 8%,rgba(48,164,165,.14),transparent 35%),linear-gradient(135deg,rgba(3,18,23,.45),rgba(1,8,13,.82)); }
.mint-curtain__glass { position: relative; width: min(74rem,100%); display: grid; grid-template-columns: minmax(0,1.08fr) minmax(22rem,.92fr); overflow: hidden; border: 1px solid rgba(128,255,226,.28); border-radius: 2rem; background: linear-gradient(145deg,rgba(10,29,34,.94),rgba(3,15,21,.92)); box-shadow: 0 2rem 7rem rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.09); }
.mint-curtain__main { padding: clamp(2rem,5vw,4.5rem) clamp(1.6rem,4.5vw,4rem) 3rem; }
.mint-curtain__eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; color: #71f4d4; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.mint-curtain__eyebrow span { width: .55rem; height: .55rem; border-radius: 50%; background: #5af0cc; box-shadow: 0 0 1rem rgba(90,240,204,.8); }
.mint-curtain h2 { margin: 0; max-width: 12ch; color: white; font-size: clamp(2rem,5vw,4.25rem); line-height: .98; letter-spacing: -.045em; }
#mintCurtainMessage { max-width: 37rem; margin: 1.35rem 0; color: #c4d8d5; font-size: clamp(.95rem,1.5vw,1.12rem); line-height: 1.6; }
.mint-curtain__timer-card { margin-top: 2rem; padding: clamp(1.25rem,3vw,2rem); border: 1px solid rgba(126,255,225,.24); border-radius: 1.25rem; background: linear-gradient(135deg,rgba(24,67,67,.52),rgba(4,21,27,.7)); box-shadow: inset 0 1px rgba(255,255,255,.07),0 1rem 3rem rgba(0,0,0,.2); }
.mint-curtain__activity { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.25rem; color: #aafbe8; font-size: .96rem; font-weight: 750; }
.mint-curtain__pulse { width: .72rem; height: .72rem; border-radius: 50%; background: #42e7bf; box-shadow: 0 0 0 0 rgba(66,231,191,.55); animation: mint-curtain-pulse 1.7s infinite; }
.mint-curtain__elapsed { display: grid; gap: .15rem; padding-top: 1.1rem; border-top: 1px solid rgba(164,255,234,.18); color: #91aaa6; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.mint-curtain__elapsed strong { color: #fff; font-variant-numeric: tabular-nums; font-size: clamp(3.4rem,7vw,5.6rem); font-weight: 650; line-height: 1.05; letter-spacing: .04em; text-shadow: 0 0 2.2rem rgba(92,244,208,.16); }
.mint-curtain__keep-open { margin: .65rem 0 0; color: #9bb3af; font-size: .84rem; }
.mint-curtain__minty { display: grid; align-content: end; min-width: 0; padding: 1.5rem 1.5rem 2.2rem; border-left: 1px solid rgba(164,255,234,.13); background: radial-gradient(circle at 50% 28%,rgba(78,238,201,.14),transparent 39%),linear-gradient(180deg,rgba(40,229,190,.06),rgba(0,0,0,.28)); }
.mint-curtain__minty img { width: min(100%,25rem); height: clamp(15rem,34vh,25rem); margin-bottom: -2.6rem; justify-self: center; object-fit: contain; filter: none; }
.mint-curtain__conversation { position: relative; z-index: 1; padding: 1.25rem; border: 1px solid rgba(174,255,237,.24); border-radius: 1.2rem; background: linear-gradient(135deg,rgba(17,46,50,.88),rgba(5,24,29,.91)); box-shadow: 0 1.2rem 2.5rem rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.mint-curtain__conversation .mint-curtain__minty-name { margin: 0 0 .5rem; color: #72efd2; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.mint-curtain__minty h3 { margin: 0 0 .65rem; color: #f4fffc; font-size: 1.03rem; line-height: 1.35; }
.mint-curtain__minty p { margin: 0 0 1rem; color: #c4d9d5; font-size: .84rem; line-height: 1.55; }
.mint-curtain__ask { display: flex; align-items: center; gap: .75rem; }
.mint-curtain__minty button { min-width: 8rem; padding: .65rem 1rem; border: 1px solid rgba(127,244,216,.24); border-radius: 999px; color: #78958e; background: rgba(0,0,0,.22); cursor: not-allowed; }
.mint-curtain__ask span { color: #718d87; font-size: .65rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.mint-curtain__reassurance { grid-column: 1/-1; margin: 0; padding: .85rem 1.5rem; border-top: 1px solid rgba(164,255,234,.13); color: #91aaa5; background: rgba(4,17,22,.64); font-size: .76rem; text-align: center; }
.mint-curtain__reassurance span { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: .4rem; border: 1px solid rgba(93,235,201,.5); border-radius: 50%; color: #65e7c8; font-size: .65rem; }
.mint-curtain[data-state="complete"] .mint-curtain__pulse { animation: none; background: #8affdf; box-shadow: 0 0 1.2rem rgba(91,255,214,.7); }
.mint-curtain-accepted-preview { position: fixed; inset: 0; z-index: 99998; width: 100%; height: 100%; border: 0; pointer-events: none; }
@keyframes mint-curtain-pulse { 70% { box-shadow: 0 0 0 .65rem rgba(66,231,191,0); } 100% { box-shadow: 0 0 0 0 rgba(66,231,191,0); } }
@media (prefers-reduced-motion: reduce) { .mint-curtain__pulse { animation: none; } }
@media (max-width: 700px) { .mint-curtain { align-items: end; padding: .65rem; overflow: auto; } .mint-curtain__glass { grid-template-columns: 1fr; max-height: calc(100dvh - 1.3rem); overflow: auto; border-radius: 1.2rem; } .mint-curtain__main { padding: 1.5rem 1.25rem; } .mint-curtain h2 { max-width: none; font-size: clamp(2rem,11vw,3rem); } .mint-curtain__timer-card { margin-top: 1.4rem; } .mint-curtain__elapsed strong { font-size: clamp(3.25rem,18vw,4.8rem); } .mint-curtain__minty { padding: 1rem 1.25rem 1.4rem; border-top: 1px solid rgba(164,255,234,.15); border-left: 0; } .mint-curtain__minty img { width: min(100%,19rem); height: 14rem; } .mint-curtain__reassurance { grid-column: 1; } }

/* Terminal product UI unrelated to the terminal seal presentation. */
.rights-questionnaire{display:grid;gap:.55rem;margin-top:.75rem;padding:.8rem;border:1px solid rgba(255,255,255,.12);border-radius:.8rem;opacity:.9}.rights-choice label{display:flex;align-items:flex-start;gap:.55rem;margin:0;padding:.65rem;border:1px solid var(--creator-line);border-radius:.65rem;cursor:pointer}.rights-choice label:has(input:checked){border-color:rgba(102,227,164,.6);background:rgba(102,227,164,.09)}.rights-choice input{flex:0 0 auto;margin:.15rem 0 0;accent-color:var(--creator-accent)}.rights-choice span{display:grid;gap:.2rem}.rights-choice strong{color:#fff;font-size:.78rem}.rights-choice small{color:var(--creator-muted);font-size:.72rem;line-height:1.4}.rights-questionnaire .rights-explanation{margin:.15rem 0 0;color:var(--creator-muted);font-size:.68rem;line-height:1.4}.stripe-return-recovery{position:fixed;z-index:90;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(92vw,34rem);padding:1.25rem;border:1px solid rgba(255,255,255,.24);border-radius:1rem;background:rgba(5,12,22,.94);box-shadow:0 1.5rem 5rem rgba(0,0,0,.55)}.stripe-return-recovery[data-status="error"]{border-color:#ff9d9d}.recovery-actions{display:flex;gap:.65rem;flex-wrap:wrap}.viewport-bottom-sentinel{display:none!important;pointer-events:none!important}@media(max-width:600px){.stripe-return-recovery{max-height:85vh;overflow:auto}}

/* Keep the authoring pager visually secondary to the separate Preview action. */
#authoringNext {
  justify-self: end;
  width: 50%;
  min-width: 3.5rem;
  padding: .3rem .4rem;
  border-color: rgba(102, 227, 164, .32);
  color: #c8ead9;
  background: rgba(102, 227, 164, .12);
  font-size: .7rem;
  box-shadow: none;
}

/* Preview is the primary visual action; its behavior remains independently wired. */
#toggleModeBtn {
  min-width: 10.5rem;
  min-height: 4rem;
  padding: 1rem 2.4rem;
  border: 1px solid #78f0b4;
  border-radius: 1rem;
  color: #04110b;
  background: linear-gradient(135deg, #9af7c8 0%, #45df91 48%, #18b968 100%);
  box-shadow: 0 .85rem 2rem rgba(31, 210, 123, .34), inset 0 1px 0 rgba(255, 255, 255, .5);
  font-size: 1.35rem;
  font-weight: 800;
}

#toggleModeBtn:hover,
#toggleModeBtn:focus-visible {
  box-shadow: 0 1rem 2.4rem rgba(31, 210, 123, .48), inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* Pinned acherry-inspired dark music-tech presentation. These selectors are
   deliberately limited to the editable Creator shell and never style exports. */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) {
  --creator-ink: #f7f3ed;
  --creator-muted: #afa8b2;
  --creator-line: rgba(238, 177, 70, .18);
  --creator-panel: linear-gradient(155deg, rgba(25, 20, 28, .96), rgba(8, 9, 13, .96));
  --creator-accent: #e8ad43;
  background:
    radial-gradient(circle at 12% 4%, rgba(229, 151, 40, .10), transparent 26rem),
    radial-gradient(circle at 88% 19%, rgba(37, 196, 214, .08), transparent 31rem),
    radial-gradient(circle at 58% 82%, rgba(203, 50, 134, .07), transparent 34rem),
    linear-gradient(145deg, #09090c 0%, #050609 55%, #0b080d 100%);
}
body:not(.preview-mode):not(.finalized):not([data-exported="true"])::before {
  background: linear-gradient(110deg, rgba(255,255,255,.018), transparent 38%, rgba(255,255,255,.012));
}
.creator-toolbar {
  border-bottom-color: rgba(232, 173, 67, .2);
  background: linear-gradient(180deg, rgba(15, 13, 17, .96), rgba(7, 8, 11, .92));
  box-shadow: 0 .75rem 2.4rem rgba(0,0,0,.4), inset 0 -1px rgba(43,205,220,.04);
}
.mode-toggle-button { border-color: rgba(232,173,67,.25); background: rgba(2,3,6,.82); box-shadow: inset 0 1px .4rem rgba(0,0,0,.8); }
#creatorModeToggleBtn { color:#1a1002; background:linear-gradient(135deg,#f2c56c,#d58b28); box-shadow:0 0 1.2rem rgba(232,173,67,.14); }
.compact-switch input,.viewport-controls input,.mode-toggle-button input,.range-control input[type="range"] { accent-color:#e8ad43; }
.authoring-guide,.authoring-card {
  position:relative;
  border-color:rgba(232,173,67,.18);
  background:linear-gradient(150deg,rgba(28,22,29,.97),rgba(9,10,14,.96) 62%,rgba(12,9,15,.98));
  box-shadow:0 1.15rem 3.2rem rgba(0,0,0,.38), inset 0 1px rgba(255,218,151,.06), inset -1px -1px rgba(34,204,220,.025);
}
.authoring-guide::after,.authoring-card::after { content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(232,173,67,.035),transparent 30%,rgba(205,43,132,.018) 72%,rgba(39,196,217,.03)); }
.authoring-guide__eyebrow { color:#e9b454; text-shadow:0 0 1rem rgba(232,173,67,.14); }
.authoring-step { border-color:rgba(255,255,255,.035);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.12)); }
.authoring-step:hover,.authoring-step:focus-visible { border-color:rgba(45,202,217,.34);box-shadow:0 0 1rem rgba(45,202,217,.06); }
.authoring-step.is-active { border-color:rgba(232,173,67,.55);background:linear-gradient(135deg,rgba(232,173,67,.16),rgba(202,44,131,.07));box-shadow:inset 0 0 1rem rgba(232,173,67,.05); }
.authoring-step.is-active span { color:#170e02;background:linear-gradient(135deg,#f3c56c,#d88e2d); }
.authoring-card input[type="text"],.authoring-card input[type="url"],.authoring-card input[type="file"],.authoring-card input[type="date"],.authoring-card textarea {
  border-color:rgba(232,173,67,.16);background:linear-gradient(180deg,rgba(2,3,6,.88),rgba(11,9,14,.9));box-shadow:inset 0 .2rem .65rem rgba(0,0,0,.45);
}
.authoring-card input:focus,.authoring-card textarea:focus,.authoring-card button:focus-visible,.creator-policy-line a:focus-visible { outline:2px solid rgba(45,202,217,.78);outline-offset:2px;border-color:rgba(45,202,217,.55);box-shadow:0 0 1rem rgba(45,202,217,.1); }
.drop-zone { border-color:rgba(204,48,134,.42);background:linear-gradient(135deg,rgba(204,48,134,.055),rgba(45,202,217,.035)); }
.authoring-pagination button { border-color:rgba(232,173,67,.2);background:linear-gradient(180deg,#242028,#121218);box-shadow:inset 0 1px rgba(255,255,255,.04); }
#authoringNext { border-color:rgba(232,173,67,.38);color:#f3d79e;background:rgba(232,173,67,.1); }
.mode-controls { border-color:rgba(232,173,67,.24);background:linear-gradient(145deg,rgba(20,16,22,.96),rgba(5,7,10,.95));box-shadow:0 1rem 3rem rgba(0,0,0,.55),inset 0 1px rgba(255,214,139,.07); }
#toggleModeBtn { border-color:#efbf62;color:#1b1002;background:linear-gradient(135deg,#f4d082,#e3a43b 52%,#bc6b20);box-shadow:0 .85rem 2rem rgba(205,124,31,.27),0 0 1.6rem rgba(203,48,134,.06),inset 0 1px rgba(255,255,255,.52); }
.creator-policy-line { margin:0 0 .15rem;padding:.15rem 0;color:var(--creator-muted);font-size:.58rem;line-height:1.35;text-align:center; }
.creator-policy-line nav { display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:0; }
.creator-policy-line a { color:inherit;text-decoration:none;white-space:nowrap; }
.creator-policy-line a:not(:first-child)::before { content:'\00b7';display:inline-block;margin:0 .3rem;color:rgba(255,255,255,.3); }
.creator-policy-line a:hover,.creator-policy-line a:focus-visible { color:#fff;text-decoration:underline;text-underline-offset:.15rem; }
.preview-mode .creator-policy-line,.finalized .creator-policy-line,[data-exported="true"] .creator-policy-line { display:none!important; }

/* Creator presentation cleanup: keep the editor controls in real layout flow. */
.creator-toolbar,
.creator-toolbar > *,
.toolbar-switches,
.viewport-controls,
.mode-toggle-button { min-width: 0; }

.mode-toggle-button {
  flex: 0 0 auto;
}

.mode-toggle-button > input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.mode-toggle-button > button {
  display: inline-flex !important;
  align-items: center;
  gap: .38rem;
  min-width: 5.4rem;
  min-height: 2rem;
  margin: 0;
  padding: .38rem .72rem;
  border: 1px solid rgba(131, 198, 215, .34);
  border-radius: 999px;
  color: #eaf8fb;
  background: linear-gradient(145deg, rgba(27, 57, 69, .96), rgba(9, 20, 30, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 .25rem .8rem rgba(0, 0, 0, .24);
  font: inherit;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .12em;
  line-height: 1;
  cursor: pointer;
}

.mode-toggle-button > button > span:first-child {
  width: .48rem;
  height: .48rem;
  flex: 0 0 .48rem;
  border: 1px solid rgba(126, 216, 230, .78);
  border-radius: 50%;
  background: #76d6e3;
  box-shadow: 0 0 .55rem rgba(77, 202, 222, .28);
}

.mode-toggle-button[data-mode="plus"] > button {
  border-color: rgba(208, 121, 167, .42);
  background: linear-gradient(145deg, rgba(67, 34, 61, .96), rgba(24, 12, 26, .98));
}

.mode-toggle-button[data-mode="plus"] > button > span:first-child {
  border-color: rgba(226, 143, 187, .8);
  background: #d887b1;
  box-shadow: 0 0 .55rem rgba(205, 76, 143, .25);
}

.mode-toggle-button > button:hover,
.mode-toggle-button > button:focus-visible {
  border-color: rgba(166, 224, 232, .68);
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 .35rem 1rem rgba(0, 0, 0, .3);
}

.mode-toggle-button > button:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px .45rem rgba(0, 0, 0, .45), 0 .12rem .45rem rgba(0, 0, 0, .22);
}

.toolbar-switches {
  flex-wrap: wrap;
}

.compact-switch {
  min-width: 0;
}

#mp3-player-section {
  display: grid;
  justify-items: center;
  gap: .3rem;
  width: min(100%, 25rem);
  margin: 0 auto;
}

.audio-preview-shell {
  width: min(100%, 24.5rem);
  padding: .3rem .4rem;
}

.audio-preview-shell audio {
  height: 31px;
  min-width: 0;
}

.mode-controls {
  position: relative;
  inset: auto;
  width: min(100%, 25rem);
  max-width: 100%;
  margin: 22px auto 0;
  padding: .55rem;
}

.mode-controls #toggleModeBtn {
  min-width: 9rem;
  min-height: 3.15rem;
  padding: .78rem 1.6rem;
  font-size: 1.08rem;
}

.artifact-workspace {
  position: relative;
  min-height: 0;
}

.artifact-workspace #artifactRoot {
  min-height: 0;
}

.artifact-workspace .system-spinner {
  overflow: hidden;
}

@media (max-width: 700px) {
  .creator-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .48rem;
    padding: .55rem .65rem;
  }

  .creator-toolbar__brand {
    width: auto;
    min-width: 0;
    margin-right: 0;
  }

  .mode-toggle-button {
    justify-self: start;
    width: max-content;
    max-width: 100%;
  }

  .toolbar-switches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: .3rem;
    padding: .25rem;
  }

  .toolbar-switches__label {
    display: none;
  }

  .compact-switch {
    justify-content: center;
    min-width: 0;
    padding-inline: .2rem !important;
    font-size: .67rem !important;
    white-space: nowrap;
  }

  .viewport-controls {
    display: none !important;
  }

  .mode-controls {
    width: min(100%, 25rem);
    margin-top: 20px;
  }
}


/* Reuse the removed post-4621 terminal-seal housing on Pick Your Proof.
   This is a visual-only transplant; Preview and checkout behavior are untouched. */
.mode-controls #finalizeMainBtn {
  min-width: 13rem;
  min-height: 3rem;
  margin: 0;
  padding: .42rem .85rem .42rem 3.25rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: .7rem;
  color: #fff;
  background: linear-gradient(135deg, rgba(13, 31, 49, .94), rgba(18, 29, 47, .98));
  box-shadow:
    0 .35rem 1rem rgba(0, 0, 0, .32),
    0 0 1.1rem rgba(52, 213, 255, .2),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  font: 700 .86rem/1.15 system-ui, sans-serif;
  text-align: left;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mode-controls #finalizeMainBtn::before {
  content: "";
  position: absolute;
  left: .48rem;
  top: 50%;
  width: 2.2rem;
  height: 2.2rem;
  inset-block: auto;
  right: auto;
  border: 1px solid rgba(220, 252, 255, .8);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 7%, #9ff3ff 18%, #25bddd 43%, #173854 70%);
  box-shadow:
    0 0 .7rem rgba(75, 222, 255, .75),
    inset 0 0 .35rem rgba(255, 255, 255, .65);
  opacity: 1;
  transform: translateY(-50%);
}

.mode-controls #finalizeMainBtn::after {
  content: none;
}

.mode-controls #finalizeMainBtn:hover,
.mode-controls #finalizeMainBtn:focus-visible {
  border-color: rgba(220, 252, 255, .72);
  background: linear-gradient(135deg, rgba(17, 40, 61, .97), rgba(18, 29, 47, 1));
  box-shadow:
    0 .42rem 1.15rem rgba(0, 0, 0, .38),
    0 0 1.35rem rgba(52, 213, 255, .3),
    inset 0 1px 0 rgba(255, 255, 255, .25);
}

.mode-controls #finalizeMainBtn.is-pressing {
  transform: scale(.98);
  background: linear-gradient(135deg, rgba(10, 25, 40, .98), rgba(13, 23, 38, 1));
}

@media (max-width: 700px) {
  .mode-controls #finalizeMainBtn {
    min-width: 0;
    width: 100%;
  }
}