:root{color-scheme:dark;--bg:#07111f;--panel:rgba(13,25,43,0.86);--glass:rgba(13,25,43,0.42);--line:rgba(126,217,255,0.22);--text:#eff8ff;--muted:#abc2d4;--accent:#34d5ff;--ok:#6ef2a2;--danger:#ff7a90;--font-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-display:var(--font-ui);--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font-ui);background:radial-gradient(circle at top left,rgba(52,213,255,0.2),transparent 34rem),var(--bg);color:var(--text)}.app-header{display:flex;justify-content:space-between;align-items:center;gap:0.6rem;padding:0.4rem clamp(0.65rem,2vw,1.2rem);border-bottom:1px solid var(--line);background:rgba(3,10,18,0.92);position:sticky;top:0;z-index:20;overflow:visible}.header-brand{flex:0 0 auto;min-width:0;display:flex;align-items:center;gap:0.4rem}.header-logo{height:1.7rem;width:auto;display:block;opacity:.95}.header-logo-secondary{opacity:.5}.eyebrow,.layer-label{margin:0 0 0.2rem;color:var(--accent);font-size:0.75rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase}h1,h2,h3,p{margin-top:0}.header-note,.panel-copy,.hint{color:var(--muted)}.app-shell{display:grid;grid-template-columns:minmax(18rem,22rem) minmax(0,1fr);gap:1rem;padding:1rem clamp(1rem,4vw,3rem) 3rem;position:relative;z-index:1;min-height:calc(100vh - 5.5rem);align-items:start}.panel{max-height:none;overflow:visible;background:var(--panel);border:1px solid var(--line);border-radius:1.25rem;padding:1rem;box-shadow:0 1rem 4rem rgba(0,0,0,0.22)}.authoring-layer{min-width:0}.preview-layer,.panel.preview-layer{min-width:0;max-height:none;overflow:visible}.proof-layer{position:sticky;top:5.9rem;align-self:start;max-height:calc(100vh - 7.25rem)}form{display:grid;gap:0.65rem}.authoring-card{border:1px solid var(--line);border-radius:.95rem;padding:.72rem;background:rgba(2,8,18,.35);display:grid;gap:.62rem}.authoring-card h3{margin:0;font-size:1rem}.card-title-inline{line-height:1.2}.required-card{border-color:color-mix(in srgb,var(--danger) 58%,var(--line));background:color-mix(in srgb,var(--danger) 12%,rgba(2,8,18,.35))}.required-card[data-required-complete="true"]{border-color:color-mix(in srgb,var(--ok) 58%,var(--line));background:color-mix(in srgb,var(--ok) 12%,rgba(2,8,18,.35))}label{display:grid;gap:0.35rem;color:var(--muted);font-size:0.9rem}.field-row{display:grid;gap:0.6rem}@media (min-width:860px){.field-row-compact{grid-template-columns:repeat(2,minmax(0,1fr))}}fieldset{border:1px solid var(--line);border-radius:0.9rem;padding:0.75rem}legend{color:var(--accent);font-weight:700}.media-group-title{margin:0.2rem 0 0;padding-top:0.5rem;border-top:1px solid rgba(171,194,212,0.25);color:var(--text);font-size:0.8rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}.media-choice .media-group-title:first-of-type{border-top:0;padding-top:0}.mode-choice label{display:flex;align-items:center;gap:0.55rem;margin-top:0.45rem}.mode-choice input{width:auto}.mode-choice-header{margin:0;display:flex;flex-wrap:nowrap;align-items:center;gap:0.4rem;flex:1 1 auto;min-width:0;padding:0.35rem 0.45rem;border-radius:0.75rem;background:rgba(255,255,255,0.03);overflow-x:auto;overflow-y:hidden}.mode-choice-header legend{flex:0 0 auto}.mode-choice-header label{margin-top:0;font-size:0.7rem;line-height:1;padding:0.28rem 0.38rem;border:1px solid rgba(126,217,255,0.2);border-radius:999px;background:rgba(2,8,18,0.58)}.mode-choice-header>*{flex:0 0 auto}.plus-choices{border:1px solid var(--line);border-radius:0.9rem;padding:0.75rem}.plus-choices summary{cursor:pointer;color:var(--accent);font-weight:700}.plus-choice-grid{display:grid;gap:0.8rem;margin-top:0.8rem}input,textarea,select,button{width:100%;border:1px solid var(--line);border-radius:0.75rem;padding:0.75rem 0.85rem;background:rgba(2,8,18,0.78);color:var(--text);font:inherit}input[type="checkbox"]{width:auto}input:focus,textarea:focus,select:focus,button:focus{outline:2px solid var(--accent);outline-offset:2px}button{cursor:pointer;font-weight:700}button:disabled{cursor:not-allowed;opacity:0.55}button.primary,.btn-primary{background:linear-gradient(135deg,#1fc8ff,#2fa8de);color:white}.media-choice label{display:flex;align-items:center;gap:0.55rem;margin-top:0.45rem}.hero-message-controls{display:grid;gap:0.65rem}.hero-message-controls>label:first-of-type{display:flex;align-items:center;gap:0.55rem}.opacity-controls{display:grid;gap:0.65rem}.opacity-controls input[type="range"]{padding-inline:0}.type-overlay-field{position:relative;z-index:3;margin:0.45rem 0 0.8rem;pointer-events:none}.type-overlay-label{display:grid;gap:0.35rem;max-width:22rem;margin-left:auto;font-size:0.76rem;color:var(--muted);pointer-events:auto}.type-overlay-label select{background:rgba(2,8,18,0.9);border-color:rgba(126,217,255,0.45)}.type-field-anchor{display:grid;gap:0.4rem}.preview-layer .artifact-card{position:relative;isolation:isolate;display:grid;gap:1rem;width:min(100%,calc((100vh - 8rem)*9/16));min-height:max(42rem,calc(100vh - 8rem));height:auto;max-height:none;margin-inline:auto;border-radius:1rem;padding:1rem 1rem calc(6.25rem + env(safe-area-inset-bottom,0px));overflow:hidden;background:linear-gradient(160deg,rgba(7,20,38,0.95),rgba(16,39,64,0.8));aspect-ratio:9 / 16}.artifact-card[data-video-owned="true"],.artifact-card[data-image-owned="true"]{min-height:0;background:#020712}.artifact-video-preview,.artifact-image-preview{position:fixed;inset:0;z-index:0;width:100vw;height:100vh;object-fit:cover;object-position:center center;pointer-events:none;background:#020712}.artifact-content-stack{display:grid;gap:1rem;position:relative;z-index:1;padding-top:4.2rem;align-content:center;min-height:100%}.hero-preview{border:1px solid var(--line);border-radius:1rem;padding:1rem;background:rgba(255,255,255,0.05);text-align:center}.hero-preview .hero-content{display:grid;justify-items:center}.preview-logo{position:absolute;top:1rem;left:50%;transform:translateX(-50%);width:clamp(5.4rem,9vw,7.2rem);height:auto;display:block;z-index:2;opacity:0.92;filter:drop-shadow(0 0.35rem 0.8rem rgba(0,0,0,.45))}.artifact-info-panel{border:1px solid var(--line);border-radius:0.9rem;padding:0.9rem;background:rgba(255,255,255,0.03);display:grid;gap:0.45rem}.artifact-info-panel h3{margin:0}.artifact-info-panel p{margin:0;color:var(--muted)}.hero-preview-helper{margin:.35rem 0 0;font-size:.78rem;color:var(--muted);opacity:.9}
.artifact-type-line strong{color:var(--text)}.btn-primary{display:inline-block;width:auto;margin-top:0.5rem;text-decoration:none;border-radius:999px;padding:0.6rem 0.9rem}.record-preview{display:grid;place-items:center;position:relative;min-height:18rem}.record-disc{width:min(18rem,70vw);aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;background:radial-gradient(circle at center,transparent 0 16%,rgba(145,152,165,0.72) 16% 31%,transparent 31%),conic-gradient(from 30deg,#04070c,#111927,#04070c,#1c2635,#04070c);border:0.55rem solid #1c2635;animation:recordSpin 7s linear infinite;box-shadow:0 0 3rem rgba(52,213,255,0.12)}.record-disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,0.06) 0 0.45px,rgba(0,0,0,0.16) 0.45px 1.1px,transparent 1.1px 2.2px),var(--vinyl-surface-image,none);background-size:auto,cover;background-position:center;mix-blend-mode:screen;opacity:0.82}.record-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 146deg,rgba(255,255,255,0.28) 0deg,rgba(255,255,255,0.08) 20deg,transparent 62deg,transparent 220deg,rgba(255,255,255,0.12) 278deg,transparent 324deg,rgba(255,255,255,0.2) 360deg);mix-blend-mode:screen;opacity:0.72}@keyframes recordSpin{to{transform:rotate(360deg)}}.record-label{position:absolute;width:8rem;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.16rem;text-align:center;border-radius:50%;padding:1rem;background:radial-gradient(circle at center,rgba(150,154,145,0.82) 0 38%,rgba(112,118,114,0.72) 39% 58%,rgba(70,78,82,0.58) 59% 100%);color:rgba(22,28,32,0.86)}.record-label strong,.record-label span,.record-label small{display:block;max-width:54%;margin-inline:auto;overflow-wrap:anywhere;line-height:1.05;text-align:center}.record-label strong{font-size:clamp(0.54rem,1.2vw,0.82rem)}.record-label span{font-size:clamp(0.48rem,1vw,0.72rem)}.record-label small{font-size:clamp(0.42rem,0.85vw,0.62rem)}.audio-preview-shell{border:1px solid var(--line);border-radius:1rem;padding:1rem;background:rgba(255,255,255,0.06)}.audio-preview-shell audio{width:100%}.metadata-preview{display:grid;grid-template-columns:auto 1fr;gap:0.35rem 0.75rem;color:var(--muted)}.metadata-preview dt{color:var(--text);font-weight:700}.actions{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}.actions button{width:auto;justify-self:start}#mintActions button,#stripeReturnResumeActions button{width:100%;justify-self:stretch}#statusOutput{display:block;min-height:2rem;margin-top:1rem;color:var(--muted)}#statusOutput.ok{color:var(--ok)}#statusOutput.error{color:var(--danger)}.proof-summary{margin-top:1rem;overflow-wrap:anywhere}code{color:var(--ok)}body[data-mode="preview"]{overflow-x:hidden;overflow-y:auto;background:#020712}body[data-mode="preview"] .app-header{display:none}body[data-mode="preview"] .app-shell{display:block;min-height:100vh;padding:0}body[data-mode="preview"] .preview-layer{position:relative;inset:auto;z-index:1;border:0;border-radius:0;max-height:none;padding:clamp(.5rem,1.6vw,1rem) clamp(.5rem,1.6vw,1rem) calc(5.5rem + env(safe-area-inset-bottom,0px));background:transparent;display:grid;place-items:start center;overflow:visible}body[data-mode="preview"] .preview-layer>.layer-label,body[data-mode="preview"] .preview-layer>h2,body[data-mode="preview"] .type-overlay-field{display:none}body[data-mode="preview"] .preview-layer .artifact-card{width:min(calc((100vh - 5.5rem)*9/16),calc(100vw - 1rem));height:auto;min-height:calc(100vh - 5.5rem);max-width:100%;max-height:none;margin:0 auto;aspect-ratio:9 / 16;border-radius:clamp(.55rem,1.3vw,1rem);padding:clamp(1rem,4vw,2rem) clamp(1rem,4vw,2rem) calc(6rem + env(safe-area-inset-bottom,0px));overflow:hidden}body[data-mode="preview"] .artifact-content-stack{width:100%;max-width:100%;margin:auto}body[data-mode="preview"] .authoring-layer,body[data-mode="preview"] .proof-layer{display:none}body[data-mode="preview"][data-preview-details="false"] .artifact-card[data-video-owned="true"] .artifact-content-stack,body[data-mode="preview"][data-preview-details="false"] .artifact-card[data-image-owned="true"] .artifact-content-stack{display:none}body[data-mode="preview"][data-preview-overlay-visible="true"] .artifact-card[data-video-owned="true"] .artifact-content-stack,body[data-mode="preview"][data-preview-overlay-visible="true"] .artifact-card[data-image-owned="true"] .artifact-content-stack{display:grid}body[data-artifact-logo="false"] .preview-logo{display:none}body[data-hero-enabled="false"] #heroPreview,body[data-audio-enabled="false"] #audioPreviewShell{display:none !important}body[data-opacity-controls-enabled="false"] .vinyl-record{display:none !important;}body[data-mode="finalized"] .authoring-layer,body[data-mode="finalized"] .type-overlay-field{display:none}@media (max-width:1200px){.app-shell{grid-template-columns:1fr;min-height:auto}.panel{max-height:none;overflow:visible}.app-header{display:grid;grid-template-columns:1fr}.mode-choice-header{width:100%}}@media (min-width:1201px){.app-shell{grid-template-areas:"authoring preview" "authoring proof"}.authoring-layer{grid-area:authoring}.preview-layer{grid-area:preview;max-height:none;overflow:visible;align-self:start}.proof-layer{grid-area:proof;justify-self:end;width:min(32rem,100%)}.preview-layer .artifact-card{height:calc(100vh - 8rem);min-height:clamp(42rem,calc(100vh - 8rem),78rem)}}.preview-actions .hint,.actions .hint{grid-column:1/-1;margin:0 0 .5rem;color:var(--muted);font-size:.8rem}.pure-curve-controls{display:grid;gap:.5rem}body[data-creator-mode="pure"] #pureCurveContrastControls{display:grid}

.metadata-preview{font-family:var(--font-mono);font-size:.27rem;line-height:1.15;align-self:end;justify-self:stretch;margin-top:auto;padding-top:.35rem;border-top:1px dashed rgba(126,217,255,0.2)}
.metadata-preview dt{font-weight:700}

.seal-mint-helper{margin:0;font-size:.8rem;color:var(--muted)}

/* A2A edit surface composition repair */
.mode-choice-header label{font-size:.65rem;padding:.2rem .32rem}
.mode-choice-header .mode-toggle-button,.viewport-mode-toggle .mode-toggle-button{padding:.24rem .5rem;min-height:1.55rem;font-size:.68rem}

.preview-layer .artifact-card .artifact-content-stack{grid-template-rows:auto;min-height:auto}
.preview-actions,.preview-bottom-links,.metadata-preview{align-self:auto}

body[data-opacity-controls-enabled="false"] .vinyl-record{display:none !important;}
body[data-opacity-controls-enabled="false"] .vinyl-record .record-disc{animation-play-state:paused;opacity:.82 !important}

.record-preview[data-spin-enabled="false"] .record-disc{animation-play-state:paused}
.record-preview[data-spin-enabled="true"] .record-disc{animation-play-state:running}

/* A2A rendering corridor contract */
body[data-mode="edit"] .app-shell{
  display:grid;
  grid-template-columns:minmax(18rem,22rem) minmax(0,1fr);
  grid-template-areas:"authoring preview" "authoring proof";
  gap:1rem;
  align-items:start;
}

body[data-mode="edit"] .authoring-layer{grid-area:authoring;position:relative;top:auto;max-height:none;overflow:visible;align-self:start;z-index:3}
body[data-mode="edit"] .preview-layer{grid-area:preview;position:relative;z-index:2;min-width:0;max-height:none;overflow:visible;display:block}
body[data-mode="edit"] .proof-layer{grid-area:proof;position:relative;top:auto;max-height:none;overflow:visible;align-self:start;justify-self:end;width:min(32rem,100%);z-index:3}

body[data-mode="edit"] .preview-layer>.layer-label,
body[data-mode="edit"] .preview-layer>h2,
body[data-mode="edit"] .preview-layer .type-overlay-field{display:none}


body[data-mode="edit"] .preview-layer .artifact-card{
  position:relative;
  width:min(100%,calc((100vh - 8rem)*9/16));
  min-height:max(42rem,calc(100vh - 8rem));
  height:auto;
  margin-inline:auto;
  border-radius:1rem;
  aspect-ratio:9/16;
}

body[data-mode="edit"] .app-header,
body[data-mode="edit"] .authoring-layer,
body[data-mode="edit"] .proof-layer,
body[data-mode="edit"] .preview-layer .artifact-content-stack{position:relative;z-index:3}

body[data-mode="preview"] .preview-layer{
  position:relative;
  inset:auto;
  z-index:1;
  border:0;
  border-radius:0;
  max-height:none;
  padding:clamp(.5rem,1.6vw,1rem) clamp(.5rem,1.6vw,1rem) calc(5.5rem + env(safe-area-inset-bottom,0px));
  background:transparent;
  display:grid;
  place-items:start center;
  overflow:visible;
}

body[data-mode="preview"] .preview-layer .artifact-card{
  width:min(calc((100vh - 5.5rem)*9/16),calc(100vw - 1rem));
  min-height:calc(100vh - 5.5rem);
  height:auto;
  max-width:100%;
  max-height:none;
  margin:0 auto;
  aspect-ratio:9 / 16;
  border-radius:clamp(.55rem,1.3vw,1rem);
  padding:clamp(1rem,4vw,2rem) clamp(1rem,4vw,2rem) calc(6rem + env(safe-area-inset-bottom,0px));
  overflow:hidden;
}

@media (max-width:1200px){
  body[data-mode="edit"] .app-shell{
    grid-template-columns:1fr;
    grid-template-areas:"authoring" "preview" "proof";
  }

  body[data-mode="edit"] .proof-layer{justify-self:stretch;width:100%}
}

/* A2A UI restoration: compact header controls + viewport toggle + optional CTA visibility */
.mode-choice-header label {
  font-size: 0.68rem;
  line-height: 1;
  padding: 0.22rem 0.34rem;
  border-radius: 999px;
}
.mode-choice-header input[type="checkbox"] {
  transform: scale(0.88);
}
.mode-choice-header .mode-toggle-button,
.viewport-mode-toggle .mode-toggle-button {
  width: auto;
  padding: 0.2rem 0.46rem;
  min-height: 1.45rem;
  font-size: 0.64rem;
}
.viewport-mode-toggle {
  display: inline-flex;
  gap: 0.28rem;
}
.mode-toggle-button.is-active {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: rgba(52, 213, 255, 0.16);
}
body[data-viewport-mode="mobile"] .preview-layer .artifact-card {
  width: min(22rem, 100%);
}
.preview-actions[hidden] {
  display: none !important;
}
.upload-status-row{display:flex;align-items:center;gap:.5rem;min-width:0}.upload-status{min-width:0;max-width:100%;overflow:hidden;color:var(--muted);font-size:.78rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.upload-clear-btn{flex-shrink:0;width:auto;padding:.28rem .6rem;border-radius:999px}
/* Mirrored overlay/CSS contract guard (#2403): no overlay, helper layer, contract layer, countdown layer, CTA layer, proof seal, or mirrored CSS authority may hide, reparent, cover, replace, downgrade, or remove proof data from #mintedStatusBadge once proof exists. */.minted-status-badge{position:fixed!important;right:max(1rem,env(safe-area-inset-right,0px))!important;bottom:max(1rem,env(safe-area-inset-bottom,0px))!important;z-index:2147483000!important;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;visibility:visible;opacity:.64;transform:scale(.86);transform-origin:right bottom;filter:saturate(1.08);transition:opacity 160ms ease,transform 160ms ease,filter 160ms ease}.minted-status-badge:hover,.minted-status-badge:focus-within{opacity:1;transform:scale(1);filter:saturate(1.22)}.minted-status-badge[hidden]{display:none}.minted-status-badge button{width:auto;min-height:1.8rem;border-radius:999px;padding:.36rem .62rem;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.3),transparent 32%),linear-gradient(135deg,rgba(52,213,255,.72),rgba(126,242,162,.42),rgba(18,29,47,.92));border:1px solid rgba(255,255,255,.36);box-shadow:0 .35rem 1rem rgba(0,0,0,.28),0 0 1.1rem rgba(52,213,255,.18),inset 0 1px 0 rgba(255,255,255,.34);color:#eff8ff;font-size:.74rem;letter-spacing:.01em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}body[data-final-badge-tier-kind="sealed"] #mintedStatusBadge,body[data-final-badge-tier-kind="sealed-chained"] #mintedStatusBadge{display:inline-flex!important;visibility:visible!important;opacity:1!important;position:fixed!important;right:max(1rem,env(safe-area-inset-right,0px))!important;bottom:max(1rem,env(safe-area-inset-bottom,0px))!important;z-index:2147483000!important}body[data-mint-state="minted"] #mintedStatusBadge,body[data-exported="true"] #mintedStatusBadge{display:inline-flex!important;visibility:visible!important;opacity:1!important;position:fixed!important;right:max(1rem,env(safe-area-inset-right,0px))!important;bottom:max(1rem,env(safe-area-inset-bottom,0px))!important;z-index:2147483000!important}.minting-overlay,.contract-overlay,.cta,[data-overlay-authority],[data-contract-overlay]{z-index:2147482999!important}#mintedStatusBadgeTooltip{position:absolute;right:0;bottom:2.55rem;max-width:min(28rem,82vw);white-space:normal;padding:.52rem .66rem;border-radius:.62rem;background:rgba(2,8,18,.96);border:1px solid rgba(126,217,255,.34);box-shadow:0 .65rem 2rem rgba(0,0,0,.38);font-size:.76rem;line-height:1.22;color:#eff8ff;text-align:left}.minted-status-badge button:hover + #mintedStatusBadgeTooltip,.minted-status-badge button:focus + #mintedStatusBadgeTooltip,.minted-status-badge:focus-within #mintedStatusBadgeTooltip{display:block}@media (max-width:640px){.minted-status-badge{opacity:.78;transform:scale(.92)}.minted-status-badge:hover,.minted-status-badge:focus-within{opacity:1;transform:scale(1)}.minted-status-badge button{min-height:2rem;font-size:.76rem;padding:.42rem .68rem}}


/* Card 4 premium blank-state polish */
.artifact-info-panel{position:relative;border:1px solid rgba(207,236,255,0.28);border-radius:1.2rem;padding:1.2rem 1.05rem;background:linear-gradient(160deg,rgba(255,255,255,0.18),rgba(255,255,255,0.05));display:grid;gap:0.55rem;text-align:center;justify-items:center;backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);box-shadow:0 0.8rem 2.2rem rgba(2,12,24,0.42),0 0 0 1px rgba(255,255,255,0.06) inset,0 0 2.2rem rgba(95,179,255,0.16)}

.artifact-info-panel h3{margin:0;font-family:var(--font-display);font-size:clamp(1.22rem,1.8vw,1.5rem);font-weight:650;letter-spacing:-.02em;line-height:1.14;color:#f5fbff;text-shadow:0 0.4rem 1rem rgba(5,10,24,.45)}
.artifact-info-panel p{margin:0;color:rgba(222,238,249,0.78);font-family:var(--font-ui);letter-spacing:-0.01em;line-height:1.32}
#previewTagline{font-size:clamp(.94rem,1.35vw,1.02rem);font-weight:460;color:rgba(222,238,249,0.72)}
.artifact-type-line{font-size:.84rem;font-weight:500;letter-spacing:.01em;color:rgba(210,230,244,0.66) !important}
.hero-preview-helper{margin:.35rem 0 0;font-size:.76rem;color:rgba(214,233,247,0.66);opacity:.9}
.artifact-info-panel .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.36rem;margin-top:.65rem;min-height:2.2rem;padding:.58rem 1.08rem;border:1px solid rgba(255,255,255,0.3);border-radius:999px;background:linear-gradient(140deg,rgba(255,255,255,0.2),rgba(255,255,255,0.08)),linear-gradient(135deg,#1ab8ff,#2f9ed8);box-shadow:0 .35rem .95rem rgba(83,134,255,.32),0 0 0 1px rgba(255,255,255,0.14) inset;color:#f7fbff;font-size:.84rem;font-weight:620;letter-spacing:.005em;text-decoration:none;text-shadow:0 1px 0 rgba(4,12,24,.38);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.artifact-info-panel .btn-primary:hover{transform:translateY(-1px);box-shadow:0 .55rem 1.2rem rgba(83,134,255,.42),0 0 0 1px rgba(255,255,255,0.2) inset;filter:brightness(1.03)}


/* A2A preview viewport authority: artifact geometry owns preview framing. */
body[data-mode="preview"]{
  min-height:100svh;
  overflow-y:auto;
}
body[data-mode="preview"] .app-shell{
  min-height:100svh;
  overflow:visible;
  padding:0;
}
body[data-mode="preview"] .preview-layer{
  min-height:100svh;
  overflow:visible;
  align-content:start;
  padding:clamp(.5rem,1.6vw,1rem) clamp(.5rem,1.6vw,1rem) calc(7.75rem + env(safe-area-inset-bottom,0px));
}
body[data-mode="preview"] .preview-layer .artifact-card{
  width:100%;
  max-width:var(--artifact-preview-max-width,42rem);
  min-height:max(calc(100svh - 7rem),42rem);
  height:auto;
  max-height:none;
  overflow:visible;
  padding-bottom:calc(8rem + env(safe-area-inset-bottom,0px));
}
body[data-mode="preview"] .artifact-content-stack{
  min-height:100%;
  align-content:start;
  padding-bottom:calc(3rem + env(safe-area-inset-bottom,0px));
}

/* Viewport Bottom Sentinel:
   Visual proof marker for full-page/back-page reachability.
   Must remain outside postcard/card/stage/vinyl containers.
   Used to verify Edit → Preview → Final → Mint parity.
*/
.viewport-bottom-sentinel {
  position: fixed;
  left: max(0.9rem, env(safe-area-inset-left, 0px));
  bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
  transform: none;
  z-index: 9999;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  max-width: min(76vw, 36rem);
  overflow: hidden;
  background: rgba(255, 214, 0, 0.72);
  color: #111;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  backdrop-filter: blur(4px);
}

.viewport-bottom-sentinel-arrow {
  font-size: 0.9rem;
  line-height: 1;
}
@media (max-width: 860px) {
  .viewport-bottom-sentinel {
    left: max(0.5rem, env(safe-area-inset-left, 0px));
  }
}
/* Hover-reveal sentinel contract across ALL modes (edit/preview/final/finalized) and viewports.
   The ledger marker is present for proof/readability but remains visually invisible until hover/focus/active.
   No mirrored overlay or CSS authority may overwrite this opacity contract. */
.viewport-bottom-sentinel {
  opacity: 0;
  max-width: 12.5rem;
  transition: opacity 160ms ease, max-width 200ms ease;
}
.viewport-bottom-sentinel .viewport-bottom-sentinel-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-mode="preview"] .viewport-bottom-sentinel,
body[data-mode="final"] .viewport-bottom-sentinel,
body.final-mode .viewport-bottom-sentinel,
body.finalized .viewport-bottom-sentinel {
  left: max(.75rem, env(safe-area-inset-left, 0px));
  bottom: max(.5rem, env(safe-area-inset-bottom, 0px));
  opacity: .95;
  max-width: min(86vw, 34rem);
}
body[data-mode="preview"] .viewport-bottom-sentinel .viewport-bottom-sentinel-arrow { display:none; }
.viewport-bottom-sentinel:hover,
.viewport-bottom-sentinel:focus-within,
.viewport-bottom-sentinel:active {
  opacity: .95;
  max-width: min(86vw, 34rem);
}
/* Touch/mobile fallback: keep hidden until an explicit press/diagnostic reveal. */
@media (hover: none) {
  .viewport-bottom-sentinel { opacity: 0; }
  .viewport-bottom-sentinel:active { opacity: .95; max-width: min(84vw, 28rem); }
}
body[data-sentinel-preview-visible="true"] .viewport-bottom-sentinel { opacity: .95; max-width: min(86vw, 34rem); }

/* AREV-style MP3 player restoration */
.audio-preview-shell{
  margin-top:auto;
  order:99;
  border:1px solid rgba(126,217,255,.3);
  background:linear-gradient(160deg,rgba(10,26,47,.92),rgba(5,15,29,.88));
  box-shadow:0 .6rem 1.8rem rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04);
}
.audio-preview-shell .preview-kicker{margin:0 0 .45rem;color:var(--accent);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.audio-preview-shell audio{
  width:100%;
  min-height:2.65rem;
  border-radius:.75rem;
  background:rgba(5,12,24,.75);
}
.artifact-content-stack{grid-template-rows:auto auto auto auto 1fr auto}
.metadata-preview{padding-bottom:.4rem}
.upload-state{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.ghost-btn{width:auto;padding:.45rem .7rem;border-radius:999px;background:rgba(255,255,255,.06)}
body[data-mode="preview"] .audio-preview-shell{
  position:relative;
  left:auto;
  right:auto;
  transform:none;
  top:auto;
  bottom:auto;
  width:min(100%,24rem);
  max-width:100%;
  margin:auto auto 0;
  border:1px solid rgba(255,255,255,.34);
  border-radius:.85rem;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(126,217,255,.12) 42%,rgba(5,15,29,.24));
  box-shadow:0 .55rem 1.6rem rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(126,217,255,.12);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  z-index:2;
  pointer-events:auto;
}

/* UX tune-up: larger vinyl, neutral label, improved preview controls/layout swap */
.record-preview{
  min-height:22rem;
}
.record-disc{
  width:clamp(20rem,58vw,30rem);
  border-width:0.72rem;
  background:
    radial-gradient(circle at center,transparent 0 16%,rgba(145,152,165,0.72) 16% 31%,transparent 31%),
    conic-gradient(from 30deg,#04070c,#111927,#04070c,#1c2635,#04070c);
}
.record-label{
  width:clamp(8.8rem,25%,10.8rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.16rem;
  padding:1.1rem;
  background:radial-gradient(circle at center,
    rgba(150,154,145,0.82) 0 38%,
    rgba(112,118,114,0.72) 39% 58%,
    rgba(70,78,82,0.58) 59% 100%);
  color:rgba(22,28,32,0.86);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 0.45rem 1rem rgba(0,0,0,.32);
}
.record-label strong,
.record-label span,
.record-label small{
  display:block;
  max-width:54%;
  margin-inline:auto;
  overflow-wrap:anywhere;
  line-height:1.05;
  text-align:center;
}
.record-label strong{font-size:clamp(0.54rem,1.2vw,0.82rem);letter-spacing:.04em}
.record-label span{font-size:clamp(0.48rem,1vw,0.72rem)}
.record-label small{font-size:clamp(0.42rem,0.85vw,0.62rem)}

/* keep vinyl enlarged in edit/preview/finalized modes */
body[data-mode="edit"] .record-disc,
body[data-mode="preview"] .record-disc,
body[data-mode="finalized"] .record-disc{
  width:clamp(20rem,58vw,30rem);
}

/* swap visual order so controls are above and MP3 player sits at bottom */
.preview-actions{order:4}
.preview-bottom-links{order:5}
.metadata-preview{order:6}
.audio-preview-shell{order:7;margin-top:auto}
body[data-mode="preview"] .audio-preview-shell{
  position:relative;
  top:auto;
  bottom:auto;
  z-index:2;
}


.minting-overlay{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:1rem}.minting-overlay[hidden]{display:none !important}.minting-overlay-backdrop{position:absolute;inset:0;background:rgba(2,8,18,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.minting-overlay-dialog{position:relative;z-index:1;display:grid;justify-items:center;gap:.75rem;min-width:min(24rem,92vw);padding:1.1rem 1.2rem;border-radius:1rem;border:1px solid rgba(126,217,255,.34);background:rgba(6,14,28,.9);box-shadow:0 1rem 2.6rem rgba(0,0,0,.42)}.minting-overlay-disc{width:5.2rem;aspect-ratio:1;border-radius:50%;border:.4rem solid rgba(255,255,255,.18);border-top-color:#f3c766;border-left-color:#ffe59a;background:radial-gradient(circle at center,#f4dd8a 0 26%,#111927 27% 100%);animation:mintingSpin 1.1s linear infinite}.minting-overlay[data-ceremony-state="success"] .minting-overlay-disc{animation-play-state:paused;border-top-color:#6ef2a2;border-left-color:#7ed9ff}.minting-overlay-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.22rem .66rem;font-weight:700;font-size:.78rem;letter-spacing:.01em}.minting-overlay-badge.is-pending{background:rgba(243,199,102,.2);color:#ffe59a;border:1px solid rgba(243,199,102,.62)}.minting-overlay-badge.is-success{background:rgba(110,242,162,.2);color:#b8ffda;border:1px solid rgba(110,242,162,.62)}.minting-overlay-title{margin:0;color:var(--text);font-weight:700}.minting-overlay-subtitle{margin:0;color:var(--muted);font-size:.86rem}.minting-overlay-countdown{display:grid;place-items:center;width:2.35rem;aspect-ratio:1;border-radius:999px;background:#f3c766;color:#3a2a00;font-weight:800}.minting-overlay-countdown[hidden]{color:transparent!important;text-shadow:none!important}@keyframes mintingSpin{to{transform:rotate(360deg)}}

/* Mint ceremony alignment repair:
   keep decorative orbit/proof visuals behind the timer/dialog content. */
#mintingOverlay {
  position: fixed;
  isolation: isolate;
}

#mintingOverlay .minting-overlay-dialog {
  position: relative;
  isolation: isolate;
  z-index: 2;
  overflow: hidden;
}

#mintingOverlay .minting-overlay-ambient {
  z-index: 0;
}

#mintingOverlay .minting-overlay-backdrop,
#mintingOverlay .minting-overlay-disc,
#mintingOverlay .minting-overlay-ambient {
  pointer-events: none;
}

#mintingOverlay .minting-overlay-dialog > * {
  position: relative;
  z-index: 2;
}

#mintingOverlay .minting-overlay-dialog::before {
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  #mintingOverlay .minting-overlay-disc,
  #mintingOverlay .minting-overlay-ambient,
  #mintingOverlay .minting-overlay-dialog::before {
    animation: none !important;
    transition: none !important;
  }
}

/* UI simplification: stable editor shell + neutral preview surface + compact finalize card */
:root{
  --editor-rail-width:minmax(260px,320px);
  --editor-stage-width:minmax(520px,1fr);
  --artifact-stage-max:520px;
}

body[data-mode="edit"] .app-shell{
  grid-template-columns:var(--editor-rail-width) var(--editor-stage-width);
  grid-template-areas:"authoring preview" "authoring proof";
  column-gap:1rem;
  row-gap:1rem;
}

body[data-mode="edit"] .preview-layer .artifact-card{
  width:min(100%,var(--artifact-stage-max));
  min-height:0;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

body[data-mode="edit"] .preview-layer{
  display:grid;
  place-items:start center;
}

body[data-mode="edit"] .proof-layer{
  align-self:start;
  margin-top:0;
}

@media (max-width:1200px){
  body[data-mode="edit"] .app-shell{
    grid-template-columns:1fr;
    grid-template-areas:"authoring" "preview" "proof";
  }
  body[data-mode="edit"] .preview-layer .artifact-card{
    width:min(100%,420px);
    margin-inline:auto;
  }
  body[data-mode="edit"] .proof-layer{
    margin-top:0;
  }
}





/* Edit-mode overlay retirement: non-system overlay shells stay inactive in edit mode unless explicitly opened. */
body[data-mode="edit"] :is(.app-overlay,.summary-overlay,.modal-backdrop,.proof-overlay,.helper-overlay,.comfort-panel):not(.is-open) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Mode dock authority: state-aware root runtime controls */
#previewReturnControls.mode-control-dock.preview-return {
  position: fixed;
  display: none;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  z-index: 10030;
  pointer-events: auto;
}

#previewReturnControls.mode-control-dock.preview-return button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  pointer-events: auto;
}

#previewReturnControls.mode-control-dock.preview-return [hidden] {
  display: none;
}

body[data-mode="edit"] #previewReturnControls.mode-control-dock.preview-return {
  grid-area: mode-dock;
  position: static;
  display: grid;
  grid-template-columns: minmax(8rem, 24rem);
  justify-content: center;
  justify-self: center;
  width: min(100%, var(--artifact-stage-max));
  margin: clamp(1rem, 10%, 3.25rem) auto 0;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-mode="edit"] #toggleModeBtn {
  min-width: 8rem;
}

body[data-mode="edit"] #previewExitToEditBtn,
body[data-mode="edit"] #previewGoFinalBtn {
  display: none;
}

body[data-mode="preview"] #previewReturnControls.mode-control-dock.preview-return {
  position: fixed;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "copy copy"
    "finalize edit";
  width: min(88vw, 28rem);
  max-width: calc(100vw - 1rem);
  left: 50%;
  right: auto;
  top: auto;
  bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 10030;
  pointer-events: auto;
}

body[data-mode="preview"] #toggleModeBtn {
  display: none;
}

body[data-mode="preview"] #previewFinalizationCopy {
  display: block;
  grid-area: copy;
  text-align: center;
  color: rgba(232, 246, 255, 0.9);
}

.preview-finalization-copy p {
  margin: 0;
}

.preview-finalization-prompt {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.preview-finalization-helper {
  margin-top: 0.25rem !important;
  color: rgba(207, 236, 255, 0.72);
  font-size: 0.82rem;
}

body[data-mode="preview"] #previewGoFinalBtn {
  grid-area: finalize;
  width: 100%;
}

body[data-mode="preview"] #previewExitToEditBtn {
  grid-area: edit;
  width: 100%;
}

body[data-mode="final"] #previewReturnControls.mode-control-dock.preview-return,
body[data-mode="finalized"] #previewReturnControls.mode-control-dock.preview-return,
body.final-mode #previewReturnControls.mode-control-dock.preview-return,
body.finalized #previewReturnControls.mode-control-dock.preview-return {
  display: none;
}

@media (max-width: 640px) {
  body[data-mode="edit"] #previewReturnControls.mode-control-dock.preview-return {
    width: min(100%, 22rem);
    margin-top: clamp(0.75rem, 8%, 1.5rem);
  }

  body[data-mode="preview"] #previewReturnControls.mode-control-dock.preview-return {
    width: min(92vw, 22rem);
    bottom: calc(clamp(4.5rem, 16vh, 7rem) + env(safe-area-inset-bottom, 0px));
  }
}

/* Edit-only readability scrim sentinel guard: excluded from final/export/minted states. */
body[data-mode="edit"]:not([data-finalizing="true"]):not([data-exported="true"]):not([data-mint-state="minted"])::before {
  content: none;
  display: none;
}

.machine-description-label{margin-top:.15rem;color:var(--muted);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;opacity:.55}.machine-description-appendix{margin-top:.05rem;padding:.45rem .55rem;font-family:var(--font-mono);font-size:.55rem;line-height:1.25;opacity:.45;white-space:pre-wrap;max-height:5rem;overflow:auto;pointer-events:none;border:1px solid rgba(255,255,255,.12);border-radius:.5rem;background:rgba(2,8,18,.38);color:var(--muted)}

/* Preview quarantine: runtime sentinels and diagnostics must not tint or cross the artifact surface.
   The yellow ledger keeper stays root-level and visible as bottom-authority proof. */
body[data-mode="preview"] #viewportBottomSentinel,
body[data-mode="preview"] .viewport-bottom-sentinel,
body[data-mode="preview"] [data-layer-role="runtime-ui"][data-contract="viewport-bottom-sentinel"],
body[data-mode="final"] #viewportBottomSentinel,
body.final-mode #viewportBottomSentinel,
body.finalized #viewportBottomSentinel{
  opacity:.95 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
body[data-mode="preview"] .preview-layer [data-layer-role="runtime-ui"],
body[data-mode="preview"] .artifact-card [data-layer-role="runtime-ui"]{
  display:none !important;
}

/* Preview cleanup: remove only the artifact card shell so nested artifact content remains visible. */
body[data-mode="preview"] #artifactPreview.artifact-card{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:1px solid rgba(180,220,255,.18) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
  visibility:visible !important;
  display:grid !important;
  overflow:visible !important;
}

/* Preview audio controls are centered in-flow at the bottom of the portrait artifact stage. */
body[data-mode="preview"] #mp3-player-section{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:min(100%,24rem) !important;
  max-width:100% !important;
  min-height:unset !important;
  margin:auto auto 0 !important;
  padding:.2rem .35rem !important;
  border:1px solid rgba(255,255,255,.34) !important;
  border-radius:.85rem !important;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(126,217,255,.12) 42%,rgba(5,15,29,.24)) !important;
  box-shadow:0 .55rem 1.6rem rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(126,217,255,.12) !important;
  backdrop-filter:blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%) !important;
  z-index:2 !important;
  pointer-events:auto !important;
}
body[data-mode="preview"] #mp3-player-section audio{
  display:block;
  width:100%;
  height:32px;
  border-radius:.65rem;
  opacity:.88;
}
body[data-mode="preview"] #mp3-player-section .hint{
  display:none !important;
}

/* The bottom sentinel remains separate from the preview return strip and visible as authority proof. */
body[data-mode="preview"] #viewportBottomSentinel.viewport-bottom-sentinel,
body[data-mode="final"] #viewportBottomSentinel.viewport-bottom-sentinel,
body.final-mode #viewportBottomSentinel.viewport-bottom-sentinel,
body.finalized #viewportBottomSentinel.viewport-bottom-sentinel{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:.95 !important;
  pointer-events:auto !important;
}
body[data-mode="preview"] #viewportBottomSentinel.viewport-bottom-sentinel:hover,
body[data-mode="preview"] #viewportBottomSentinel.viewport-bottom-sentinel:focus-within,
body[data-mode="preview"] #viewportBottomSentinel.viewport-bottom-sentinel:active{
  opacity:.95 !important;
  max-width:min(86vw,34rem);
}


.card5-machine-identity{
  display:grid;
  gap:.28rem;
  padding:.65rem .75rem;
  border:1px solid rgba(126,217,255,.34);
  border-radius:.78rem;
  background:rgba(2,8,18,.58);
  color:var(--text);
  overflow-wrap:anywhere;
}
.card5-machine-identity-label{
  color:var(--accent);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.card5-machine-identity-value{
  display:block;
  width:100%;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:.86rem;
  line-height:1.35;
}

/* Card 5 machine identity is authoring-only and must not surface in Preview, Final, or exported artifacts. */
body:not([data-mode="edit"]) #card5MachineIdentity,
body:not([data-mode="edit"]) .card5-machine-identity,
body:not([data-mode="edit"]) .card5-machine-identity-label,
body:not([data-mode="edit"]) #mintPrintedId,
body:not([data-mode="edit"]) #mintPrintedTimestamp,
body:not([data-mode="edit"]) #machineDescriptionAppendix,
body:not([data-mode="edit"]) .machine-description-appendix,
body:not([data-mode="edit"]) .machine-description-label,
body[data-mode="preview"] #card5MachineIdentity,
body[data-mode="preview"] #machineDescriptionAppendix,
body[data-mode="final"] #card5MachineIdentity,
body[data-mode="final"] #machineDescriptionAppendix,
body[data-exported="true"] #card5MachineIdentity,
body[data-exported="true"] #machineDescriptionAppendix{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Typography uses system font variables only; no remote or bundled font files are loaded in this pass. */

/* START: Clear Glass Hero Look */
.hero-clear,
.hero-preview,
#heroPreview,
.hero-reference {
  position: relative;
  width: 100%;
  min-height: 455px;
  border-radius: 18px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(28px, 6vw, 62px);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero-clear:not([hidden]),
.hero-preview:not([hidden]),
#heroPreview:not([hidden]),
.hero-reference {
  display: flex;
  flex-direction: column;
}

.hero-clear::before,
.hero-preview::before,
#heroPreview::before,
.hero-reference::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.04);
  pointer-events: none;
}

.hero-copy,
.hero-content,
#heroPreview > :not(.btn-primary),
.hero-reference > :not(.btn-primary) {
  position: relative;
  z-index: 1;
}

.hero-copy,
.hero-content {
  max-width: 730px;
  margin: 0 auto;
}

.hero-copy h1,
.hero-content h1,
.hero-preview h1,
#heroPreview h1,
#heroPreview h3,
#previewName,
.hero-reference h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.2vw, 4.6rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: white;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.32),
    0 10px 24px rgba(0, 0, 0, 0.38);
}

.hero-copy p,
.hero-content p,
.hero-preview p,
#previewTagline,
.hero-reference p {
  max-width: 650px;
  margin: 24px auto 32px;
  font-family: var(--font-ui);
  font-size: clamp(1.12rem, 2.35vw, 1.55rem);
  line-height: 1.25;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.48);
}

#heroPreview .hero-preview-helper,
#heroPreview .artifact-type-line {
  margin: 0 auto 14px;
  font-size: 0.95rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.74) !important;
}

#heroPreview .artifact-type-line strong {
  color: rgba(255, 255, 255, 0.95);
}

.hero-button,
.hero-preview .btn-primary,
#previewCTA:not([hidden]),
.hero-reference .btn-primary,
#heroPreview .btn-primary:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 58px;
  padding: 0 34px;
  border-radius: 8px;
  background: linear-gradient(#d5ad72, #a7793f);
  color: white;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid rgba(75, 45, 20, 0.55);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
  opacity: 1;
  filter: none;
  position: relative;
  z-index: 1;
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.hero-button:hover,
.hero-preview .btn-primary:hover,
#previewCTA:hover,
.hero-reference .btn-primary:hover,
#heroPreview .btn-primary:hover {
  background: linear-gradient(#1ed760, #00c853);
  transform: translateY(-2px);
  box-shadow:
    0 8px 22px rgba(0, 200, 83, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.hero-button:active,
.hero-preview .btn-primary:active,
#previewCTA:active,
.hero-reference .btn-primary:active,
#heroPreview .btn-primary:active {
  transform: translateY(0);
}

@media (max-width: 640px) {
  .hero-clear,
  .hero-preview,
  #heroPreview,
  .hero-reference {
    min-height: 520px;
    padding: 28px 18px;
  }

  .hero-button,
  .hero-preview .btn-primary,
  #previewCTA:not([hidden]),
  .hero-reference .btn-primary,
  #heroPreview .btn-primary:not([hidden]) {
    min-width: 220px;
    width: 100%;
  }
}
/* END: Clear Glass Hero Look */


/* Edit-mode authoring parent hitbox clamp: the legacy .container wrapper holds the authoring rail outside .app-shell, so clamp the first full-page parent before Card 5 field rules run. */
body[data-mode="edit"] > .container {
  width: min(calc(100% - 2rem), 24rem);
  max-width: 24rem;
  margin: 1rem 0 0 clamp(1rem, 4vw, 3rem);
  position: relative;
  z-index: 4;
  pointer-events: none;
}

body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
  width: 100%;
  max-width: 100%;
  pointer-events: auto;
}

body[data-mode="edit"] > .container #artifactForm,
body[data-mode="edit"] > .container #inputForm {
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}

/* Edit-mode responsive workspace contract: stack only below the explicit desktop breakpoint. */
body[data-mode="edit"] > .container > .app-shell.workspace-shell {
  pointer-events: auto;
}

body[data-mode="edit"] > .container > .app-shell.workspace-shell .preview-layer {
  width: 100%;
  pointer-events: auto;
}

@media (min-width: 900px) {
  body[data-mode="edit"] > .container {
    --edit-artifact-card-width: clamp(26rem, 48vw, 34rem);
    --edit-record-size: clamp(15.5rem, 30vw, 22rem);
    --edit-record-min-height: clamp(16rem, 32vw, 22rem);
    display: grid;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    grid-template-areas: "authoring preview";
    align-items: start;
    gap: clamp(0.65rem, 1.4vw, 1rem);
    width: min(calc(100% - 1.5rem), 1120px);
    max-width: none;
    margin: 0.75rem auto 0;
    padding: 0;
  }

  body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
    grid-area: authoring;
    align-self: start;
    justify-self: stretch;
  }

  body[data-mode="edit"] > .container > .app-shell.workspace-shell {
    grid-area: preview;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "preview";
    align-items: start;
    gap: 0;
    min-height: auto;
    padding: 0;
    width: 100%;
  }

  body[data-mode="edit"] > .container > .app-shell.workspace-shell .preview-layer {
    grid-area: preview;
    align-self: start;
    display: grid;
    margin-top: 0;
    min-height: auto;
    padding: 0;
    place-items: start center;
  }
}

@media (min-width: 900px) and (max-width: 1200px) {
  body[data-mode="edit"] .preview-logo {
    width: clamp(4.6rem, 7vw, 5.8rem);
  }

  body[data-mode="edit"] #heroPreview.artifact-info-panel {
    padding: clamp(0.7rem, 1.2vw, 0.95rem);
  }

  body[data-mode="edit"] #previewCTA:not([hidden]) {
    min-width: min(100%, 13.5rem);
    min-height: 2.7rem;
    padding-inline: clamp(0.8rem, 2vw, 1.3rem);
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  }
}

/* Edit-mode Card 5 hitbox contract: labels and controls must not expose page-wide ghost click targets. */
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields > label,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields > .upload-field-label {
  justify-self: start;
  align-self: start;
  max-width: 100%;
  pointer-events: auto;
}

body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields > label:not(.upload-field-label) {
  display: grid;
  width: min(100%, 22rem);
}

body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields > .upload-field-label {
  display: inline-grid;
  width: fit-content;
}

body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields input:not([type="hidden"]),
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields textarea,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields select {
  width: min(100%, 22rem);
  max-width: 22rem;
  justify-self: start;
}

body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields input[type="hidden"],
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields #mintedAtInput {
  display: none !important;
  pointer-events: none !important;
}

body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields .hint,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields .machine-description-appendix {
  max-width: 22rem;
}

body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields::before,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields::after,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields > label::before,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields > label::after,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields > .upload-field-label::before,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields > .upload-field-label::after {
  pointer-events: none;
}

/* Card 5 customer-required field readiness: browser constraint visuals only; validation and Preview/Finalize flows stay unchanged. */
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields #artistNamed:required:invalid,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields #mintTitleInput:required:invalid {
  border-color: rgba(255, 183, 77, 0.86);
  outline: 2px solid rgba(255, 122, 144, 0.42);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 183, 77, 0.13), 0 0 16px rgba(255, 122, 144, 0.18);
}

body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields #artistNamed:required:valid,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields #mintTitleInput:required:valid {
  border-color: rgba(110, 242, 162, 0.9);
  outline: 2px solid rgba(110, 242, 162, 0.38);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(110, 242, 162, 0.12), 0 0 16px rgba(110, 242, 162, 0.16);
}

/* Card 5 machine-filled required field readiness: visual only, validation remains in existing Preview/Finalize flows. */
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields #mintIdInput.is-required-empty,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields #mintDateInput.is-required-empty {
  border-color: rgba(255, 183, 77, 0.86);
  outline: 2px solid rgba(255, 122, 144, 0.42);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 183, 77, 0.13), 0 0 16px rgba(255, 122, 144, 0.18);
}

body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields #mintIdInput.is-required-ready,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields #mintDateInput.is-required-ready {
  border-color: rgba(110, 242, 162, 0.9);
  outline: 2px solid rgba(110, 242, 162, 0.38);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(110, 242, 162, 0.12), 0 0 16px rgba(110, 242, 162, 0.16);
}

#toggleModeBtn.is-required-empty,
#previewGoFinalBtn.is-required-empty,
#a1aPreviewGoFinalBtn.is-required-empty,
#finalizeMainBtn.is-required-empty,
#sealMintBtn.is-required-empty {
  opacity: 0.72;
  filter: saturate(0.72);
  box-shadow: 0 0 0 1px rgba(255, 183, 77, 0.24) inset;
}

#toggleModeBtn.is-required-ready,
#previewGoFinalBtn.is-required-ready,
#a1aPreviewGoFinalBtn.is-required-ready,
#finalizeMainBtn.is-required-ready,
#sealMintBtn.is-required-ready {
  box-shadow: 0 0 0 1px rgba(110, 242, 162, 0.35) inset, 0 0 18px rgba(110, 242, 162, 0.14);
}

/* Region 2 edit-mode visual shell audit fix (2026-05-29): keep the Card 5 hitbox clamp, but collapse decorative nested authoring/runtime frames. */
body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 4rem rgba(0,0,0,0.22);
}

body[data-mode="edit"] > .container #artifactForm,
body[data-mode="edit"] > .container #inputForm {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card,
body[data-mode="edit"] > .container .authoring-rail .required-card,
body[data-mode="edit"] > .container .authoring-rail fieldset,
body[data-mode="edit"] > .container .authoring-rail .plus-choices {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card {
  border-radius: 0;
}

body[data-mode="edit"] > .container .authoring-rail input,
body[data-mode="edit"] > .container .authoring-rail textarea,
body[data-mode="edit"] > .container .authoring-rail select,
body[data-mode="edit"] > .container .authoring-rail button {
  border: 1px solid var(--line);
}


body[data-mode="edit"] #viewportBottomSentinel.viewport-bottom-sentinel:not(:hover):not(:focus-within):not(:active) {
  border: 0;
  box-shadow: none;
}

/* Edit mode preview frame cleanup: keep the artifact as a light placement guide only. */
body[data-mode="edit"] .preview-layer,
body[data-mode="edit"] .preview-layer .artifact-card,
body[data-mode="edit"] .artifact-content-stack {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-mode="edit"] .preview-layer {
  border: 0 !important;
}

body[data-mode="edit"] .preview-layer .artifact-card {
  border: 1px solid rgba(180, 220, 255, 0.12) !important;
  height: auto;
  margin-top: 0;
  max-height: none;
  min-height: 0;
  overflow: visible;
  padding: 0;
  width: min(100%, 520px);
}

body[data-mode="edit"] .artifact-content-stack {
  border: 0 !important;
  outline: 0 !important;
}

body[data-mode="edit"] .artifact-card[data-video-owned="true"],
body[data-mode="edit"] .artifact-card[data-image-owned="true"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

@media (min-width: 1201px) {
  body[data-mode="edit"] > .container {
    --edit-artifact-card-width: clamp(30rem, 42vw, 38rem);
    --edit-record-size: clamp(20rem, 32vw, 30rem);
    --edit-record-min-height: clamp(20rem, 34vw, 30rem);
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: clamp(0.75rem, 2vw, 1.25rem);
    width: min(calc(100% - 2rem), 1220px);
    margin-top: 0.5rem;
  }

  body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
    grid-area: authoring;
    align-self: start;
    justify-self: stretch;
  }

  body[data-mode="edit"] > .container > .app-shell.workspace-shell {
    grid-area: preview;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "preview";
    align-items: start;
    gap: 0;
    min-height: auto;
    padding: 0;
    width: 100%;
  }

  body[data-mode="edit"] > .container > .app-shell.workspace-shell .preview-layer {
    align-self: start;
    display: grid;
    margin-top: 0;
    min-height: auto;
    padding: 0;
    place-items: start center;
    width: 100%;
  }

  body[data-mode="edit"] .artifact-content-stack {
    align-content: start;
    gap: clamp(0.65rem, 1.5vh, 1rem);
    grid-auto-rows: max-content;
    grid-template-rows: none;
    justify-content: center;
    min-height: 0;
    padding-top: clamp(0.5rem, 1.5vh, 1.25rem);
  }

  body[data-mode="edit"] #heroPreview,
  body[data-mode="edit"] #vinylVideo,
  body[data-mode="edit"] .record-preview {
    align-self: start;
    margin-top: 0;
  }

  body[data-mode="edit"] .record-preview {
    min-height: auto;
  }

  body[data-mode="edit"] .metadata-preview,
  body[data-mode="edit"] .audio-preview-shell,
  body[data-mode="edit"] #mp3-player-section {
    align-self: start;
    margin-top: 0;
    order: initial;
  }
}

/* Root authoring toolbar normalization: compact, framed editor chrome only. */
.app-header {
  justify-content: center;
  padding: 0.34rem clamp(0.55rem, 1.6vw, 1rem);
  overflow: visible;
}

.editor-toolbar {
  width: min(100%, 72rem);
  display: flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  padding: 0.25rem;
  border: 1px solid rgba(126, 217, 255, 0.28);
  border-radius: 0.92rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(3, 10, 18, 0.74);
  box-shadow:
    0 0.75rem 2rem rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(16px) saturate(132%);
  -webkit-backdrop-filter: blur(16px) saturate(132%);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.editor-toolbar::before,
.editor-toolbar::after {
  content: "";
  flex: 0 0 0.32rem;
  align-self: stretch;
  border-block: 1px solid rgba(126, 217, 255, 0.22);
  opacity: 0.72;
}

.editor-toolbar::before { border-left: 1px solid rgba(126, 217, 255, 0.28); border-radius: 0.45rem 0 0 0.45rem; }
.editor-toolbar::after { border-right: 1px solid rgba(126, 217, 255, 0.28); border-radius: 0 0.45rem 0.45rem 0; }

.mode-choice-header {
  flex: 1 1 auto;
  min-width: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.26rem;
  overflow: visible;
}

.mode-choice-header legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.toolbar-chip,
.mode-choice-header label.toolbar-chip,
.mode-choice-header .mode-toggle-button.toolbar-chip,
.viewport-mode-toggle .mode-toggle-button.toolbar-chip {
  width: auto;
  min-height: 1.68rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(126, 217, 255, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(2, 8, 18, 0.58);
  color: rgba(239, 248, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.toolbar-chip:hover,
.mode-choice-header .mode-toggle-button.toolbar-chip:hover {
  border-color: rgba(126, 217, 255, 0.42);
  color: #eff8ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.032)),
    rgba(6, 18, 34, 0.78);
}

.toolbar-chip:focus-within,
.mode-choice-header .mode-toggle-button.toolbar-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, white 8%);
  outline-offset: 2px;
}

.toolbar-logo-chip {
  flex: 0 0 auto;
  min-height: 1.86rem;
  padding: 0.26rem 0.5rem;
  border-color: rgba(126, 217, 255, 0.34);
  background:
    radial-gradient(circle at 20% 18%, rgba(52, 213, 255, 0.18), transparent 45%),
    rgba(2, 8, 18, 0.68);
}

.toolbar-logo-chip .header-logo {
  height: 1.28rem;
  max-width: 8rem;
  object-fit: contain;
}

.logo-toggle-control input,
.toolbar-toggle input[type="checkbox"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.toolbar-logo-chip:has(input:checked),
.toolbar-toggle:has(input:checked),
.mode-toggle-button.is-active,
.mode-choice-header .mode-toggle-button.toolbar-mode-toggle {
  border-color: color-mix(in srgb, var(--accent) 62%, rgba(126, 217, 255, 0.24));
  background:
    linear-gradient(180deg, rgba(52, 213, 255, 0.18), rgba(52, 213, 255, 0.055)),
    rgba(5, 18, 32, 0.86);
  color: #f5fbff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(52, 213, 255, 0.055),
    0 0.35rem 1rem rgba(52, 213, 255, 0.09);
}

.toolbar-toggle:not(:has(input:checked)),
.toolbar-logo-chip:not(:has(input:checked)) {
  color: rgba(171, 194, 212, 0.72);
  border-color: rgba(126, 217, 255, 0.16);
  background: rgba(2, 8, 18, 0.48);
}

.toolbar-toggle:has(input:checked)::after,
.toolbar-logo-chip:has(input:checked)::after,
.mode-toggle-button.is-active::after,
.mode-choice-header .mode-toggle-button.toolbar-mode-toggle::after {
  content: "";
  inline-size: 0.28rem;
  block-size: 0.28rem;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0.55rem rgba(110, 242, 162, 0.58);
}

.toolbar-segment,
.viewport-mode-toggle.toolbar-segment {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.16rem 0.2rem 0.16rem 0.42rem;
  border: 1px solid rgba(126, 217, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.026);
  white-space: nowrap;
}

.toolbar-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  color: rgba(171, 194, 212, 0.82);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.toolbar-divider {
  color: rgba(126, 217, 255, 0.34);
  font-size: 0.68rem;
  line-height: 1;
  padding-inline: 0.02rem;
}

.toolbar-icon {
  position: relative;
  flex: 0 0 auto;
  inline-size: 0.82rem;
  block-size: 0.82rem;
  display: inline-block;
  color: currentColor;
}

.preview-icon::before {
  content: "";
  position: absolute;
  inset: 0.16rem 0.08rem;
  border: 1.5px solid currentColor;
  border-radius: 999px 999px 70% 70%;
  transform: rotate(-8deg);
  opacity: 0.82;
}
.preview-icon::after {
  content: "";
  position: absolute;
  inset: 0.31rem;
  border-radius: 50%;
  background: currentColor;
}

.desktop-icon::before {
  content: "";
  position: absolute;
  left: 0.08rem;
  top: 0.12rem;
  width: 0.66rem;
  height: 0.44rem;
  border: 1.45px solid currentColor;
  border-radius: 0.1rem;
}
.desktop-icon::after {
  content: "";
  position: absolute;
  left: 0.27rem;
  bottom: 0.1rem;
  width: 0.28rem;
  height: 0.22rem;
  border-bottom: 1.45px solid currentColor;
  border-inline: 1.45px solid transparent;
  box-shadow: 0 0.17rem 0 -0.06rem currentColor;
}

.phone-icon::before {
  content: "";
  position: absolute;
  left: 0.24rem;
  top: 0.06rem;
  width: 0.36rem;
  height: 0.68rem;
  border: 1.45px solid currentColor;
  border-radius: 0.15rem;
}
.phone-icon::after {
  content: "";
  position: absolute;
  left: 0.38rem;
  bottom: 0.13rem;
  width: 0.08rem;
  height: 0.08rem;
  border-radius: 50%;
  background: currentColor;
}

.message-icon::before {
  content: "";
  position: absolute;
  inset: 0.12rem 0.08rem 0.2rem;
  border: 1.45px solid currentColor;
  border-radius: 0.16rem;
}
.message-icon::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.35rem;
  width: 0.42rem;
  height: 1.45px;
  background: currentColor;
  box-shadow: 0 0.16rem 0 currentColor;
}

.audio-icon::before {
  content: "";
  position: absolute;
  left: 0.14rem;
  bottom: 0.14rem;
  width: 0.1rem;
  height: 0.34rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0.18rem -0.16rem 0 currentColor, 0.36rem -0.04rem 0 currentColor, 0.54rem -0.24rem 0 currentColor;
}

.spin-icon::before {
  content: "";
  position: absolute;
  inset: 0.08rem;
  border: 1.45px solid currentColor;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 0.13rem, currentColor 0.14rem 0.17rem, transparent 0.18rem);
}
.spin-icon::after {
  content: "";
  position: absolute;
  left: 0.18rem;
  top: 0.18rem;
  width: 0.18rem;
  height: 0.18rem;
  border-top: 1.25px solid currentColor;
  border-radius: 50%;
  transform: rotate(-24deg);
  opacity: 0.7;
}

@media (max-width: 1200px) {
  .app-header { display: flex; }
  .editor-toolbar { width: 100%; }
  .mode-choice-header { width: auto; }
}

@media (max-width: 720px) {
  .app-header { padding-inline: 0.42rem; }
  .editor-toolbar { gap: 0.22rem; padding: 0.2rem; }
  .editor-toolbar::before,
  .editor-toolbar::after { flex-basis: 0.18rem; }
  .toolbar-chip,
  .mode-choice-header label.toolbar-chip,
  .mode-choice-header .mode-toggle-button.toolbar-chip,
  .viewport-mode-toggle .mode-toggle-button.toolbar-chip {
    min-height: 1.56rem;
    padding: 0.26rem 0.43rem;
    font-size: 0.61rem;
    gap: 0.22rem;
  }
  .toolbar-logo-chip .header-logo { height: 1.1rem; max-width: 6.7rem; }
  .toolbar-segment,
  .viewport-mode-toggle.toolbar-segment { gap: 0.16rem; padding-left: 0.32rem; }
  .toolbar-section-label { font-size: 0.58rem; }
}

#ambientToggleMint{position:fixed;left:max(.65rem,env(safe-area-inset-left,0px));bottom:max(.65rem,env(safe-area-inset-bottom,0px));z-index:10000;width:auto;min-width:0;min-height:1.45rem;padding:.22rem .46rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(2,8,18,.18);color:rgba(255,255,255,.82);font-size:.64rem;font-weight:700;letter-spacing:.01em;line-height:1;opacity:.42;backdrop-filter:blur(10px) saturate(125%);-webkit-backdrop-filter:blur(10px) saturate(125%);box-shadow:0 .28rem .9rem rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.18);text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 5px rgba(0,0,0,.72);transition:opacity 160ms ease,background 160ms ease,border-color 160ms ease,transform 160ms ease}
#ambientToggleMint:hover,#ambientToggleMint:focus-visible{opacity:.92;background:rgba(2,8,18,.42);border-color:rgba(255,255,255,.42);transform:translateY(-1px)}
#ambientToggleMint[aria-pressed="true"]{color:rgba(225,255,238,.94)}
#ambientToggleMint[aria-pressed="false"]{color:rgba(235,242,255,.78)}
@media (max-width:640px){#ambientToggleMint{opacity:.58;font-size:.68rem;min-height:1.8rem;padding:.34rem .58rem}#ambientToggleMint:hover,#ambientToggleMint:focus-visible{opacity:.95}}

/* Live authoring composition pass: retire container scaffolding while preserving preview ownership. */
body[data-mode="edit"] .preview-layer,
body[data-mode="preview"] .preview-layer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-mode="edit"] #artifactPreview.artifact-card,
body[data-mode="preview"] #artifactPreview.artifact-card {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-mode="edit"] #artifactPreview.artifact-card {
  align-self: start;
  aspect-ratio: auto;
  border: 1px solid rgba(180, 220, 255, 0.12) !important;
  height: auto;
  justify-self: center;
  margin-top: 0;
  max-width: 100%;
  min-height: 0;
  overflow: visible;
  padding: 0;
  width: min(100%, var(--edit-artifact-card-width, 34rem));
}

body[data-mode="preview"] #artifactPreview.artifact-card {
  border: 1px solid rgba(180, 220, 255, 0.14) !important;
}

body[data-mode="edit"] .artifact-content-stack,
body[data-mode="preview"] .artifact-content-stack {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body[data-mode="edit"] .app-shell {
  align-items: start;
  padding-top: 0.5rem;
}

body[data-mode="edit"] .preview-layer {
  align-self: start;
  display: grid;
  margin-top: 0;
  padding-top: 0;
  place-items: start center;
}

body[data-mode="edit"] .artifact-content-stack {
  align-content: start;
  grid-auto-rows: max-content;
  justify-content: center;
  max-width: 100%;
  min-height: 0;
  padding-top: clamp(0.75rem, 2vh, 1.5rem);
  width: 100%;
}

body[data-mode="edit"] #heroPreview,
body[data-mode="edit"] #vinylVideo {
  align-self: start;
}

body[data-mode="edit"] #vinylVideo.record-preview {
  min-height: var(--edit-record-min-height, 18rem);
  width: 100%;
}

body[data-mode="edit"] .record-disc {
  width: min(var(--edit-record-size, 20rem), 100%);
}

body[data-mode="edit"] .record-label {
  width: clamp(6.9rem, 32%, 10.8rem);
  padding: clamp(0.72rem, 2vw, 1.1rem);
}

/* Edit-mode responsive workspace stabilization (2026-05-30): explicit widths for the rail, Card 5, preview, spinner, and audio controls at the tested breakpoints. */
body[data-mode="edit"] > .container {
  --edit-workspace-gap: clamp(0.7rem, 1.6vw, 1.15rem);
  --edit-workspace-inline: clamp(0.5rem, 2vw, 1rem);
  --edit-artifact-card-width: min(100%, 30rem);
  --edit-record-size: clamp(13rem, 68vw, 20rem);
  --edit-record-min-height: clamp(13rem, 70vw, 20rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "authoring"
    "preview";
  gap: var(--edit-workspace-gap);
  align-items: start;
  justify-items: center;
  width: min(calc(100% - (var(--edit-workspace-inline) * 2)), 48rem);
  max-width: none;
  margin: clamp(0.5rem, 1.6vw, 0.85rem) auto 0;
  padding: 0;
  pointer-events: none;
}

body[data-mode="edit"] > .container > .authoring-layer.authoring-rail,
body[data-mode="edit"] > .container > .app-shell.workspace-shell,
body[data-mode="edit"] > .container > .app-shell.workspace-shell .preview-layer,
body[data-mode="edit"] > .container #artifactForm,
body[data-mode="edit"] > .container #inputForm,
body[data-mode="edit"] > .container .authoring-card,
body[data-mode="edit"] > .container #card5MintFields,
body[data-mode="edit"] #artifactPreview,
body[data-mode="edit"] .artifact-content-stack,
body[data-mode="edit"] #vinylVideo,
body[data-mode="edit"] #mp3-player-section {
  min-width: 0;
  max-width: 100%;
}

body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
  grid-area: authoring;
  justify-self: center;
  width: 100%;
  max-width: min(100%, 42rem);
  pointer-events: auto;
}

body[data-mode="edit"] > .container #artifactForm,
body[data-mode="edit"] > .container #inputForm {
  display: grid;
  gap: clamp(0.55rem, 1.4vw, 0.75rem);
  width: 100%;
  justify-items: stretch;
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card {
  display: grid;
  gap: clamp(0.5rem, 1.2vw, 0.7rem);
  padding-block: clamp(0.55rem, 1.5vw, 0.8rem);
  padding-inline: 0;
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card + .authoring-card,
body[data-mode="edit"] > .container .authoring-rail #card5MintFields,
body[data-mode="edit"] > .container .authoring-rail .plus-choices {
  border-top: 1px solid rgba(126, 217, 255, 0.18);
  margin-top: clamp(0.35rem, 1vw, 0.55rem);
  padding-top: clamp(0.7rem, 1.6vw, 0.9rem);
}

body[data-mode="edit"] > .container .authoring-rail #card5MintFields {
  border-radius: 0.85rem;
  box-shadow: inset 0 0 0 1px rgba(126, 217, 255, 0.12);
  padding-inline: clamp(0.45rem, 1.4vw, 0.75rem);
}

body[data-mode="edit"] > .container .authoring-rail label,
body[data-mode="edit"] > .container .authoring-rail fieldset,
body[data-mode="edit"] > .container .authoring-rail .plus-choices,
body[data-mode="edit"] > .container .authoring-rail input,
body[data-mode="edit"] > .container .authoring-rail textarea,
body[data-mode="edit"] > .container .authoring-rail select,
body[data-mode="edit"] > .container .authoring-rail button {
  min-width: 0;
  max-width: 100%;
}

body[data-mode="edit"] > .container > .app-shell.workspace-shell {
  grid-area: preview;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "preview"
    "mode-dock";
  align-items: start;
  justify-items: center;
  gap: 0;
  width: 100%;
  max-width: min(100%, 42rem);
  min-height: auto;
  padding: 0;
  pointer-events: auto;
}

body[data-mode="edit"] > .container > .app-shell.workspace-shell .preview-layer {
  grid-area: preview;
  display: grid;
  place-items: start center;
  width: 100%;
  min-height: auto;
  padding: 0;
  overflow: visible;
}

body[data-mode="edit"] #artifactPreview.artifact-card {
  width: var(--edit-artifact-card-width);
  max-width: 100%;
}

body[data-mode="edit"] .artifact-content-stack {
  justify-items: center;
  width: 100%;
}

body[data-mode="edit"] #vinylVideo.record-preview {
  width: 100%;
  min-height: var(--edit-record-min-height);
}

body[data-mode="edit"] #vinylVideo .record-disc,
body[data-mode="edit"] .record-disc {
  width: min(var(--edit-record-size), 100%);
}

body[data-mode="edit"] #mp3-player-section {
  width: min(100%, 28rem);
  justify-self: center;
}

body[data-mode="edit"] #mp3-player-section audio {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 900px) {
  body[data-mode="edit"] > .container {
    --edit-artifact-card-width: clamp(25rem, 48vw, 34rem);
    --edit-record-size: clamp(15rem, 30vw, 22rem);
    --edit-record-min-height: clamp(15rem, 32vw, 22rem);
    grid-template-columns: minmax(15.625rem, 20rem) minmax(0, 1fr);
    grid-template-areas: "authoring preview";
    justify-items: stretch;
    width: min(calc(100% - 1.5rem), 70rem);
  }

  body[data-mode="edit"] > .container > .authoring-layer.authoring-rail,
  body[data-mode="edit"] > .container > .app-shell.workspace-shell {
    max-width: 100%;
  }
}

@media (min-width: 1201px) {
  body[data-mode="edit"] > .container {
    --edit-artifact-card-width: clamp(30rem, 42vw, 38rem);
    --edit-record-size: clamp(20rem, 32vw, 30rem);
    --edit-record-min-height: clamp(20rem, 34vw, 30rem);
    grid-template-columns: minmax(16.25rem, 21.25rem) minmax(0, 1fr);
    width: min(calc(100% - 2rem), 76.25rem);
  }
}

@media (max-width: 768px) {
  body[data-mode="edit"] > .container {
    --edit-artifact-card-width: min(100%, 28rem);
    --edit-record-size: clamp(13rem, 62vw, 18rem);
    --edit-record-min-height: clamp(13rem, 64vw, 18rem);
  }
}

@media (max-width: 640px) {
  body[data-mode="edit"] > .container {
    --edit-workspace-inline: clamp(0.5rem, 3vw, 0.75rem);
    --edit-artifact-card-width: min(100%, 26rem);
    --edit-record-size: clamp(12.5rem, 74vw, 17rem);
    --edit-record-min-height: clamp(12.5rem, 76vw, 17rem);
  }

  body[data-mode="edit"] > .container > .authoring-layer.authoring-rail,
  body[data-mode="edit"] > .container > .app-shell.workspace-shell {
    max-width: 100%;
  }

  body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
    padding: clamp(0.75rem, 3vw, 1rem);
  }
}

@media (max-width: 480px) {
  body[data-mode="edit"] > .container {
    --edit-artifact-card-width: 100%;
    --edit-record-size: clamp(11.5rem, 72vw, 15rem);
    --edit-record-min-height: clamp(11.5rem, 74vw, 15rem);
  }

  body[data-mode="edit"] > .container .authoring-rail #card5MintFields {
    padding-inline: clamp(0.35rem, 2.5vw, 0.55rem);
  }
}

@media (max-width: 390px) {
  body[data-mode="edit"] > .container {
    --edit-workspace-inline: 0.5rem;
    --edit-record-size: clamp(10.75rem, 70vw, 13.5rem);
    --edit-record-min-height: clamp(10.75rem, 72vw, 13.5rem);
  }
}

/* Artifact composition scale pass (2026-05-30): compact the message card, system spinner, and edit MP3 alignment without changing Card 5 or export logic. */
body[data-mode="edit"] #artifactPreview.artifact-card,
body[data-mode="preview"] #artifactPreview.artifact-card {
  --artifact-hero-min-height: clamp(10rem, 22vw, 14.5rem);
  --artifact-hero-padding: clamp(0.8rem, 2vw, 1.35rem);
  --artifact-hero-title-size: clamp(1.25rem, 2.8vw, 2.35rem);
  --artifact-hero-body-size: clamp(0.82rem, 1.45vw, 0.98rem);
  --artifact-hero-helper-size: clamp(0.68rem, 1vw, 0.78rem);
  --artifact-record-size: clamp(12rem, 34vw, 18rem);
  --artifact-record-min-height: clamp(12rem, 36vw, 18rem);
  --artifact-mp3-width: min(100%, 24rem);
}

body[data-mode="edit"] #heroPreview,
body[data-mode="preview"] #heroPreview {
  min-height: var(--artifact-hero-min-height);
  padding: var(--artifact-hero-padding);
  border-radius: clamp(0.8rem, 2vw, 1rem);
}

body[data-mode="edit"] #previewName,
body[data-mode="preview"] #previewName,
body[data-mode="edit"] #heroPreview h1,
body[data-mode="preview"] #heroPreview h1,
body[data-mode="edit"] #heroPreview h3,
body[data-mode="preview"] #heroPreview h3 {
  font-size: var(--artifact-hero-title-size);
  line-height: 0.98;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.28),
    0 7px 18px rgba(0, 0, 0, 0.34);
}

body[data-mode="edit"] #previewTagline,
body[data-mode="preview"] #previewTagline {
  max-width: min(100%, 34rem);
  margin: clamp(0.6rem, 1.8vw, 0.9rem) auto clamp(0.75rem, 2vw, 1rem);
  font-size: var(--artifact-hero-body-size);
  line-height: 1.28;
}

body[data-mode="edit"] #heroPreview .hero-preview-helper,
body[data-mode="edit"] #heroPreview .artifact-type-line,
body[data-mode="preview"] #heroPreview .hero-preview-helper,
body[data-mode="preview"] #heroPreview .artifact-type-line {
  margin-bottom: clamp(0.45rem, 1.2vw, 0.65rem);
  font-size: var(--artifact-hero-helper-size);
  line-height: 1.25;
}

body[data-mode="edit"] #heroPreview .btn-primary:not([hidden]),
body[data-mode="edit"] #previewCTA:not([hidden]),
body[data-mode="preview"] #heroPreview .btn-primary:not([hidden]),
body[data-mode="preview"] #previewCTA:not([hidden]) {
  min-width: min(100%, 13rem);
  min-height: 2.55rem;
  padding: 0 1.15rem;
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
}

body[data-mode="edit"] #vinylVideo.record-preview,
body[data-mode="preview"] #vinylVideo.record-preview {
  min-height: var(--artifact-record-min-height);
}

body[data-mode="edit"] #vinylVideo .record-disc,
body[data-mode="edit"] .record-disc,
body[data-mode="preview"] #vinylVideo .record-disc,
body[data-mode="preview"] .record-disc {
  width: min(var(--artifact-record-size), 100%);
  border-width: clamp(0.46rem, 1.35vw, 0.58rem);
}

body[data-mode="edit"] #mp3-player-section {
  align-self: start;
  justify-self: center;
  width: var(--artifact-mp3-width);
  max-width: var(--artifact-mp3-width);
  margin: clamp(0.2rem, 1vw, 0.45rem) auto 0;
  text-align: center;
}

body[data-mode="edit"] #mp3-player-section audio {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

@media (min-width: 900px) {
  body[data-mode="edit"] > .container {
    --edit-record-size: clamp(12rem, 24vw, 17.6rem);
    --edit-record-min-height: clamp(12rem, 25.6vw, 17.6rem);
  }
}

@media (min-width: 1201px) {
  body[data-mode="edit"] > .container {
    --edit-record-size: clamp(16rem, 25.6vw, 24rem);
    --edit-record-min-height: clamp(16rem, 27.2vw, 24rem);
  }
}

@media (max-width: 768px) {
  body[data-mode="edit"] #artifactPreview.artifact-card,
  body[data-mode="preview"] #artifactPreview.artifact-card {
    --artifact-hero-min-height: clamp(13rem, 44vw, 16rem);
    --artifact-record-size: clamp(10.5rem, 50vw, 14.5rem);
    --artifact-record-min-height: clamp(10.5rem, 52vw, 14.5rem);
  }

  body[data-mode="edit"] > .container {
    --edit-record-size: clamp(10.5rem, 50vw, 14.5rem);
    --edit-record-min-height: clamp(10.5rem, 52vw, 14.5rem);
  }
}

@media (max-width: 640px) {
  body[data-mode="edit"] #artifactPreview.artifact-card,
  body[data-mode="preview"] #artifactPreview.artifact-card {
    --artifact-hero-min-height: clamp(12rem, 48vw, 14.25rem);
    --artifact-hero-padding: clamp(0.9rem, 4vw, 1.35rem);
    --artifact-hero-title-size: clamp(1.25rem, 6.5vw, 2.05rem);
    --artifact-hero-body-size: clamp(0.84rem, 3.6vw, 0.96rem);
    --artifact-record-size: clamp(10rem, 60vw, 13.6rem);
    --artifact-record-min-height: clamp(10rem, 62vw, 13.6rem);
  }

  body[data-mode="edit"] > .container {
    --edit-record-size: clamp(10rem, 60vw, 13.6rem);
    --edit-record-min-height: clamp(10rem, 62vw, 13.6rem);
  }

  body[data-mode="edit"] #heroPreview,
  body[data-mode="preview"] #heroPreview {
    min-height: var(--artifact-hero-min-height);
    padding: var(--artifact-hero-padding);
  }
}

@media (max-width: 480px) {
  body[data-mode="edit"] #artifactPreview.artifact-card,
  body[data-mode="preview"] #artifactPreview.artifact-card {
    --artifact-record-size: clamp(9.2rem, 58vw, 12rem);
    --artifact-record-min-height: clamp(9.2rem, 60vw, 12rem);
  }

  body[data-mode="edit"] > .container {
    --edit-record-size: clamp(9.2rem, 58vw, 12rem);
    --edit-record-min-height: clamp(9.2rem, 60vw, 12rem);
  }
}

@media (max-width: 390px) {
  body[data-mode="edit"] #artifactPreview.artifact-card,
  body[data-mode="preview"] #artifactPreview.artifact-card {
    --artifact-record-size: clamp(8.6rem, 56vw, 10.8rem);
    --artifact-record-min-height: clamp(8.6rem, 58vw, 10.8rem);
  }

  body[data-mode="edit"] > .container {
    --edit-record-size: clamp(8.6rem, 56vw, 10.8rem);
    --edit-record-min-height: clamp(8.6rem, 58vw, 10.8rem);
  }
}

body[data-mode="edit"] .interface-rail {
  display: grid;
  justify-items: center;
  width: 100%;
}

/* Compact top rail pass: one device toggle, smaller secondary helpers, no side-scroll rail. */
.app-header {
  overflow-x: clip;
}

.editor-toolbar {
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  overflow-x: hidden;
  scrollbar-width: none;
}

.editor-toolbar::-webkit-scrollbar {
  display: none;
}

.mode-choice-header {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
  overflow: visible;
}

.viewport-mode-toggle.toolbar-segment {
  padding: 0.12rem;
  gap: 0;
}

.viewport-mode-toggle .mode-toggle-button.toolbar-chip {
  min-width: 6.4rem;
  padding-inline: 0.46rem;
}

.viewport-mode-toggle .mode-toggle-button.is-active {
  border-color: color-mix(in srgb, var(--accent) 72%, rgba(126, 217, 255, 0.24));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(52, 213, 255, 0.08),
    0 0.35rem 0.95rem rgba(52, 213, 255, 0.1);
}

@media (min-width: 980px) {
  .editor-toolbar {
    flex-wrap: nowrap;
  }

  .mode-choice-header {
    flex-wrap: nowrap;
  }
}

@media (max-width: 520px) {
  .toolbar-chip,
  .mode-choice-header label.toolbar-chip,
  .mode-choice-header .mode-toggle-button.toolbar-chip,
  .viewport-mode-toggle .mode-toggle-button.toolbar-chip {
    padding-inline: 0.34rem;
  }

  .viewport-mode-toggle .mode-toggle-button.toolbar-chip {
    min-width: 5.9rem;
  }
}

/* Preview block guidance: visible customer-facing feedback when existing Card 5 readiness blocks global Preview. */
.preview-readiness-message {
  display: grid;
  grid-column: 1 / -1;
  justify-self: stretch;
  gap: 0.55rem;
  width: min(100%, 24rem);
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 183, 77, 0.72);
  border-radius: 0.85rem;
  background: rgba(48, 25, 12, 0.92);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(255, 122, 144, 0.28) inset, 0 0.75rem 1.75rem rgba(0, 0, 0, 0.24);
  font-size: 0.88rem;
  line-height: 1.35;
  text-align: left;
}

.preview-readiness-message[hidden] {
  display: none !important;
}

.preview-readiness-link {
  width: auto;
  justify-self: start;
  padding: 0.45rem 0.7rem;
  border-color: rgba(255, 183, 77, 0.78);
  background: rgba(255, 183, 77, 0.12);
  color: var(--text);
  font-size: 0.82rem;
}

body[data-preview-readiness-blocked="true"] #card5MintFields {
  scroll-margin-top: 5.75rem;
  box-shadow: 0 0 0 2px rgba(255, 183, 77, 0.42), 0 0 1.5rem rgba(255, 122, 144, 0.18);
}

/* Authoring glass transparency pass (2026-05-31): keep uploaded media visible behind authoring panels while preserving field readability. */
body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
  background: rgba(2, 8, 18, 0.06);
  border: 1px solid rgba(126, 217, 255, 0.16);
  box-shadow: none;
  backdrop-filter: blur(5px) saturate(112%);
  -webkit-backdrop-filter: blur(5px) saturate(112%);
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card,
body[data-mode="edit"] > .container .authoring-rail .required-card,
body[data-mode="edit"] > .container .authoring-rail fieldset,
body[data-mode="edit"] > .container .authoring-rail .plus-choices,
body[data-mode="edit"] > .container .authoring-rail .mode-choice-header {
  background: rgba(2, 8, 18, 0.045);
  border: 1px solid rgba(126, 217, 255, 0.12);
  box-shadow: none;
  backdrop-filter: blur(3px) saturate(108%);
  -webkit-backdrop-filter: blur(3px) saturate(108%);
}

body[data-mode="edit"] > .container .authoring-rail .required-card {
  border-color: rgba(255, 122, 144, 0.24);
}

body[data-mode="edit"] > .container .authoring-rail .required-card[data-required-complete="true"] {
  border-color: rgba(110, 242, 162, 0.26);
}

body[data-mode="edit"] > .container .authoring-rail input,
body[data-mode="edit"] > .container .authoring-rail textarea,
body[data-mode="edit"] > .container .authoring-rail select,
body[data-mode="edit"] > .container .authoring-rail button,
body[data-mode="edit"] > .container .authoring-rail .file-input-wrap,
body[data-mode="edit"] > .container .authoring-rail .drop-zone,
body[data-mode="edit"] > .container .authoring-rail .upload-status-row {
  background: rgba(2, 8, 18, 0.52);
  border-color: rgba(170, 229, 255, 0.32);
  color: #f4fbff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

body[data-mode="edit"] > .container .authoring-rail input::placeholder,
body[data-mode="edit"] > .container .authoring-rail textarea::placeholder {
  color: rgba(217, 238, 255, 0.78);
  opacity: 1;
}

body[data-mode="edit"] > .container .authoring-rail button:hover,
body[data-mode="edit"] > .container .authoring-rail button:focus-visible {
  background: rgba(2, 8, 18, 0.62);
  border-color: rgba(126, 217, 255, 0.5);
}

/* Premium glass creator rail polish (2026-05-31): compact controls, soften cards, and clarify uploaded states without changing behavior. */
body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
  background: linear-gradient(180deg, rgba(10, 24, 42, 0.18), rgba(3, 10, 18, 0.08));
  border-color: rgba(207, 236, 255, 0.18);
  border-radius: 1rem;
  box-shadow: 0 1.1rem 3rem rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px) saturate(118%);
  -webkit-backdrop-filter: blur(10px) saturate(118%);
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card,
body[data-mode="edit"] > .container .authoring-rail .required-card,
body[data-mode="edit"] > .container .authoring-rail fieldset,
body[data-mode="edit"] > .container .authoring-rail .plus-choices,
body[data-mode="edit"] > .container .authoring-rail .mode-choice-header {
  background: linear-gradient(180deg, rgba(10, 24, 42, 0.2), rgba(2, 8, 18, 0.08));
  border-color: rgba(207, 236, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(6px) saturate(112%);
  -webkit-backdrop-filter: blur(6px) saturate(112%);
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card {
  border-radius: 0.82rem;
}

body[data-mode="edit"] > .container .authoring-rail .required-card {
  border-color: rgba(255, 122, 144, 0.22);
  background: linear-gradient(180deg, rgba(42, 16, 26, 0.18), rgba(2, 8, 18, 0.08));
}

body[data-mode="edit"] > .container .authoring-rail .required-card[data-required-complete="true"] {
  border-color: rgba(110, 242, 162, 0.24);
  background: linear-gradient(180deg, rgba(15, 42, 29, 0.18), rgba(2, 8, 18, 0.08));
}

body[data-mode="edit"] > .container .authoring-rail label {
  gap: 0.28rem;
}

body[data-mode="edit"] > .container .authoring-rail fieldset,
body[data-mode="edit"] > .container .authoring-rail .plus-choices {
  padding: 0.62rem;
  border-radius: 0.72rem;
}

body[data-mode="edit"] > .container .authoring-rail input,
body[data-mode="edit"] > .container .authoring-rail textarea,
body[data-mode="edit"] > .container .authoring-rail select,
body[data-mode="edit"] > .container .authoring-rail button {
  border-radius: 0.58rem;
  padding: 0.52rem 0.68rem;
  line-height: 1.25;
}

body[data-mode="edit"] > .container .authoring-rail input,
body[data-mode="edit"] > .container .authoring-rail select,
body[data-mode="edit"] > .container .authoring-rail button {
  min-height: 2.28rem;
}

body[data-mode="edit"] > .container .authoring-rail textarea {
  min-height: 4.8rem;
  resize: vertical;
}

body[data-mode="edit"] > .container .authoring-rail input[type="file"] {
  padding: 0.42rem 0.58rem;
  min-height: 2.16rem;
  font-size: 0.82rem;
}

body[data-mode="edit"] > .container .authoring-rail input[type="file"]::file-selector-button {
  margin-inline-end: 0.58rem;
  border: 1px solid rgba(170, 229, 255, 0.3);
  border-radius: 999px;
  padding: 0.3rem 0.58rem;
  background: rgba(255, 255, 255, 0.08);
  color: #eff8ff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
}

body[data-mode="edit"] > .container .authoring-rail button:not(.primary):not(.btn-primary):not(.upload-clear-btn) {
  font-size: 0.9rem;
  font-weight: 650;
}

body[data-mode="edit"] > .container .authoring-rail button.primary,
body[data-mode="edit"] > .container .authoring-rail .btn-primary {
  min-height: 2.72rem;
  padding: 0.68rem 0.94rem;
  border-radius: 0.72rem;
}

body[data-mode="edit"] > .container .authoring-rail input[type="range"] {
  min-height: 1.65rem;
  padding-block: 0.2rem;
}

body[data-mode="edit"] > .container .authoring-rail input[type="checkbox"] {
  min-height: 0;
  padding: 0;
}

body[data-mode="edit"] > .container .authoring-rail .upload-status-row {
  min-width: 0;
  justify-content: space-between;
  gap: 0.48rem;
  min-height: 2rem;
  padding: 0.34rem 0.44rem 0.34rem 0.58rem;
  border: 1px solid rgba(170, 229, 255, 0.22);
  border-radius: 0.64rem;
  background: rgba(2, 8, 18, 0.34);
}

body[data-mode="edit"] > .container .authoring-rail .upload-status {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: rgba(228, 244, 255, 0.84);
  font-size: 0.76rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-mode="edit"] > .container .authoring-rail .upload-status:not(:empty) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

body[data-mode="edit"] > .container .authoring-rail .upload-status-row:has(.upload-clear-btn:not([hidden])) {
  border-color: rgba(110, 242, 162, 0.26);
  background: linear-gradient(90deg, rgba(110, 242, 162, 0.11), rgba(2, 8, 18, 0.3));
}

body[data-mode="edit"] > .container .authoring-rail .upload-status-row:has(.upload-clear-btn:not([hidden])) .upload-status {
  color: #effff6;
  font-size: 0.76rem;
  font-weight: 650;
}

body[data-mode="edit"] > .container .authoring-rail .upload-clear-btn,
body[data-mode="edit"] > .container .authoring-rail #bgVideoInputClear,
body[data-mode="edit"] > .container .authoring-rail #vinylUploadClear,
body[data-mode="edit"] > .container .authoring-rail #audioInputClear,
body[data-mode="edit"] > .container .authoring-rail #mintCoverInputClear {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: auto;
  min-height: 1.42rem;
  padding: 0.16rem 0.45rem;
  border-color: rgba(207, 236, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(213, 232, 244, 0.72);
  font-size: 0.68rem;
  font-weight: 560;
  letter-spacing: 0.01em;
  text-shadow: none;
  box-shadow: none;
}

body[data-mode="edit"] > .container .authoring-rail .upload-clear-btn:hover,
body[data-mode="edit"] > .container .authoring-rail .upload-clear-btn:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(207, 236, 255, 0.32);
  color: rgba(244, 251, 255, 0.92);
}


/* Hide native empty file text after the app has accepted an upload; keep the input focusable/clickable for replacement. */
body[data-mode="edit"] > .container .authoring-rail input[type="file"][data-upload-attached="true"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  min-height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0.01;
  overflow: hidden;
  clip-path: inset(50%);
}

body[data-mode="edit"] > .container .authoring-rail input[type="file"][data-upload-attached="true"] + .upload-status-row {
  margin-top: 0.18rem;
}

body[data-mode="edit"] > .container .authoring-rail input[type="file"][data-upload-attached="true"]:focus-visible + .upload-status-row {
  outline: 2px solid rgba(170, 229, 255, 0.74);
  outline-offset: 2px;
}

/* Second-pass artifact studio polish (2026-05-31): premium empty media surface and lighter one-sheet creator rail. */
body[data-mode="edit"] #artifactPreview.artifact-card {
  border-color: transparent !important;
  overflow: hidden;
}

body[data-mode="edit"] #artifactPreview.artifact-card[data-video-owned="false"]:not([data-image-owned="true"])::before {
  content: "";
  position: absolute;
  inset: clamp(0.15rem, 0.8vw, 0.35rem);
  z-index: 0;
  border-radius: clamp(1rem, 2.6vw, 1.45rem);
  background:
    radial-gradient(circle at 50% 12%, rgba(214, 244, 255, 0.16), rgba(126, 217, 255, 0.055) 27%, transparent 56%),
    radial-gradient(circle at 82% 76%, rgba(122, 92, 255, 0.075), transparent 38%),
    linear-gradient(180deg, rgba(8, 22, 42, 0.26), rgba(2, 8, 18, 0.09) 46%, rgba(2, 8, 18, 0.28)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 38%, rgba(255, 255, 255, 0.025));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1.4rem 4.5rem rgba(0, 0, 0, 0.14),
    0 1.4rem 4rem rgba(0, 0, 0, 0.08);
  opacity: 0.92;
  pointer-events: none;
}

body[data-mode="edit"] #artifactPreview.artifact-card[data-video-owned="false"]:not([data-image-owned="true"])::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(2.4rem, 8vw, 4.15rem);
  z-index: 4;
  width: clamp(4.5rem, 18vw, 7.25rem);
  height: 0.34rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(229, 246, 255, 0.28), transparent);
  opacity: 0.56;
  filter: blur(0.4px);
  transform: translateX(-50%);
  pointer-events: none;
}

body[data-mode="edit"] #artifactPreview.artifact-card[data-video-owned="true"]::before,
body[data-mode="edit"] #artifactPreview.artifact-card[data-image-owned="true"]::before,
body[data-mode="edit"] #artifactPreview.artifact-card[data-video-owned="true"]::after,
body[data-mode="edit"] #artifactPreview.artifact-card[data-image-owned="true"]::after,
body[data-mode="preview"] #artifactPreview.artifact-card::before,
body[data-mode="preview"] #artifactPreview.artifact-card::after {
  content: none;
  display: none;
}

body[data-mode="edit"] #artifactPreview .artifact-content-stack {
  position: relative;
  z-index: 2;
}

body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
  background:
    linear-gradient(180deg, rgba(12, 27, 48, 0.24), rgba(3, 10, 18, 0.1)),
    radial-gradient(circle at 50% 0%, rgba(207, 236, 255, 0.08), transparent 42%);
  border-color: rgba(207, 236, 255, 0.13);
  box-shadow:
    0 1.2rem 3.2rem rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card,
body[data-mode="edit"] > .container .authoring-rail .required-card,
body[data-mode="edit"] > .container .authoring-rail fieldset,
body[data-mode="edit"] > .container .authoring-rail .plus-choices,
body[data-mode="edit"] > .container .authoring-rail .mode-choice-header {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card {
  border-radius: 0;
  padding-block: clamp(0.62rem, 1.5vw, 0.85rem);
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card + .authoring-card,
body[data-mode="edit"] > .container .authoring-rail .plus-choices {
  border-top-color: rgba(207, 236, 255, 0.11);
}

body[data-mode="edit"] > .container .authoring-rail .card-title-inline,
body[data-mode="edit"] > .container .authoring-rail legend {
  color: rgba(235, 248, 255, 0.86);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

body[data-mode="edit"] > .container .authoring-rail fieldset {
  padding-inline: 0;
}

body[data-mode="edit"] > .container .authoring-rail .required-card {
  border-top-color: rgba(255, 183, 77, 0.18);
  background: linear-gradient(180deg, rgba(255, 183, 77, 0.035), transparent 44%);
  box-shadow: inset 0 1px 0 rgba(255, 183, 77, 0.08);
}

body[data-mode="edit"] > .container .authoring-rail .required-card[data-required-complete="true"] {
  border-top-color: rgba(110, 242, 162, 0.16);
  background: linear-gradient(180deg, rgba(110, 242, 162, 0.035), transparent 44%);
  box-shadow: inset 0 1px 0 rgba(110, 242, 162, 0.08);
}

body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields :is(#artistNamed,#mintTitleInput,#mintIdInput,#mintDateInput).is-required-empty,
body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields :is(#artistNamed,#mintTitleInput,#mintIdInput,#mintDateInput):required:invalid {
  border-color: rgba(255, 183, 77, 0.52);
  outline: 1px solid rgba(255, 183, 77, 0.22);
  box-shadow: 0 0 0 3px rgba(255, 183, 77, 0.08);
}

body[data-mode="edit"] .authoring-layer .authoring-card.required-card#card5MintFields :is(#artistNamed,#mintTitleInput,#mintIdInput,#mintDateInput).is-required-ready {
  border-color: rgba(110, 242, 162, 0.54);
  outline: 1px solid rgba(110, 242, 162, 0.2);
  box-shadow: 0 0 0 3px rgba(110, 242, 162, 0.075);
}

body[data-mode="edit"] > .container .authoring-rail input,
body[data-mode="edit"] > .container .authoring-rail textarea,
body[data-mode="edit"] > .container .authoring-rail select,
body[data-mode="edit"] > .container .authoring-rail button {
  background: rgba(2, 8, 18, 0.42);
  border-color: rgba(207, 236, 255, 0.21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body[data-mode="edit"] > .container .authoring-rail input[type="file"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(2, 8, 18, 0.38);
  border-color: rgba(207, 236, 255, 0.19);
  color: rgba(231, 245, 255, 0.78);
}

body[data-mode="edit"] > .container .authoring-rail input[type="file"]::file-selector-button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
  border-color: rgba(207, 236, 255, 0.24);
  color: rgba(244, 251, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

body[data-mode="edit"] > .container .authoring-rail .upload-status-row {
  border-color: rgba(207, 236, 255, 0.17);
  background: rgba(2, 8, 18, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body[data-mode="edit"] > .container .authoring-rail .upload-status-row:has(.upload-clear-btn:not([hidden])) {
  border-color: rgba(110, 242, 162, 0.24);
  background: linear-gradient(90deg, rgba(110, 242, 162, 0.105), rgba(2, 8, 18, 0.25));
}

body[data-mode="edit"] > .container .authoring-rail button:not(.primary):not(.btn-primary):not(.upload-clear-btn):not(#toggleModeBtn):not(#previewGoFinalBtn) {
  background: rgba(2, 8, 18, 0.34);
  border-color: rgba(207, 236, 255, 0.18);
  color: rgba(232, 246, 255, 0.82);
  box-shadow: none;
}

body[data-mode="edit"] > .container .authoring-rail .upload-clear-btn,
body[data-mode="edit"] > .container .authoring-rail #bgVideoInputClear,
body[data-mode="edit"] > .container .authoring-rail #vinylUploadClear,
body[data-mode="edit"] > .container .authoring-rail #audioInputClear,
body[data-mode="edit"] > .container .authoring-rail #mintCoverInputClear {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(207, 236, 255, 0.14);
  color: rgba(218, 235, 246, 0.68);
}

body[data-mode="edit"] #toggleModeBtn,
body[data-mode="preview"] #previewGoFinalBtn {
  background: linear-gradient(135deg, #1fc8ff, #2fa8de);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 0.65rem 1.45rem rgba(31, 200, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-mode="preview"] #previewExitToEditBtn {
  background: rgba(2, 8, 18, 0.52);
  border-color: rgba(207, 236, 255, 0.18);
  color: rgba(232, 246, 255, 0.82);
  box-shadow: none;
}


.seal-choice-overlay[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.seal-choice-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ss-layer-seal-choice) !important;
  display: grid;
  place-items: center;
  padding: clamp(0.5rem, 1.5vw, 1rem);
  pointer-events: auto !important;
}

.seal-choice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 18, 0.74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.seal-choice-dialog {
  position: relative;
  z-index: 2;
  width: min(96vw, 68rem);
  max-height: 92svh;
  border: 1px solid rgba(142, 231, 255, 0.32);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(7, 18, 34, 0.98), rgba(11, 32, 49, 0.96));
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.48);
  color: var(--text);
  padding: clamp(0.9rem, 2vw, 1.35rem);
}

.seal-choice-dialog h2,
.seal-choice-dialog h3 {
  margin: 0;
}

.seal-choice-dialog > p {
  color: rgba(232, 246, 255, 0.82);
  margin: 0.45rem 0 0;
}

.seal-choice-options {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);
  margin: 0.85rem 0;
}

.seal-choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1vw, 0.75rem);
  border: 1px solid rgba(207, 236, 255, 0.18);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1rem 2.2rem rgba(0, 0, 0, 0.22);
  padding: clamp(0.85rem, 1.5vw, 1.1rem);
}

.seal-choice-card-premium {
  border-color: rgba(255, 214, 119, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1rem 2.6rem rgba(255, 180, 64, 0.12);
}

.seal-choice-card p {
  margin: 0;
  color: rgba(232, 246, 255, 0.78);
}

.seal-choice-badge {
  align-self: flex-start;
  border: 1px solid rgba(255, 214, 119, 0.42);
  border-radius: 999px;
  background: rgba(255, 214, 119, 0.12);
  color: rgba(255, 237, 189, 0.96);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  text-transform: uppercase;
}

.seal-choice-preview {
  display: grid;
  gap: 0.32rem;
  justify-items: center;
  margin: 0.1rem 0 0.25rem;
}

.seal-choice-preview-label {
  color: rgba(142, 231, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.seal-choice-preview-frame {
  aspect-ratio: 9 / 16;
  width: min(48%, 8.25rem);
  min-width: 6.25rem;
  max-height: clamp(10rem, 34svh, 14rem);
  display: grid;
  place-items: center;
  border: 1px solid rgba(142, 231, 255, 0.26);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 18%, rgba(142, 231, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(4, 12, 24, 0.76), rgba(8, 18, 32, 0.92));
  box-shadow: inset 0 0 1.6rem rgba(0, 0, 0, 0.36), 0 0.75rem 1.8rem rgba(0, 0, 0, 0.26);
  color: rgba(232, 246, 255, 0.62);
  font-size: 0.76rem;
  line-height: 1.25;
  overflow: hidden;
  padding: 0.75rem;
  pointer-events: none;
  text-align: center;
}

.seal-choice-card .primary {
  position: relative;
  z-index: 4;
  margin-top: auto;
}

.seal-choice-back {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  background: rgba(2, 8, 18, 0.52);
  border-color: rgba(207, 236, 255, 0.18);
  color: rgba(232, 246, 255, 0.82);
}

/* Desktop: seal-choice modal should fit without inner scroll */
@media (min-width: 761px) {
  #sealChoiceOverlay {
    overflow: hidden;
    padding: clamp(0.5rem, 1.5vh, 1rem);
  }

  #sealChoiceOverlay .seal-choice-dialog {
    display: flex;
    flex-direction: column;
    width: min(94vw, 64rem);
    max-height: calc(100svh - clamp(1rem, 3vh, 2rem));
    overflow: visible;
    padding: clamp(0.75rem, 1.4vw, 1.1rem);
    gap: clamp(0.45rem, 1vh, 0.75rem);
  }

  #sealChoiceOverlay .seal-choice-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.65rem, 1.2vw, 1rem);
    min-height: 0;
    margin: 0;
  }

  #sealChoiceOverlay .seal-choice-card {
    min-height: 0;
    overflow: visible;
    padding: clamp(0.7rem, 1.2vw, 1rem);
    gap: clamp(0.4rem, 0.9vh, 0.65rem);
  }

  #sealChoiceOverlay .seal-choice-card h3,
  #sealChoiceOverlay #sealChoiceTitle,
  #sealChoiceOverlay #sealChoiceBody,
  #sealChoiceOverlay .seal-choice-card p {
    margin-block: 0;
  }

  #sealChoiceOverlay .seal-choice-dialog h2 {
    font-size: clamp(1.35rem, 3.2vh, 1.9rem);
    line-height: 1.05;
  }

  #sealChoiceOverlay .seal-choice-card h3 {
    font-size: clamp(1.05rem, 2.4vh, 1.35rem);
    line-height: 1.1;
  }

  #sealChoiceOverlay #sealChoiceBody,
  #sealChoiceOverlay .seal-choice-card p {
    font-size: clamp(0.84rem, 1.8vh, 1rem);
    line-height: 1.25;
  }

  #sealChoiceOverlay .seal-choice-badge,
  #sealChoiceOverlay .seal-choice-preview-label {
    font-size: clamp(0.62rem, 1.55vh, 0.75rem);
  }

  #sealChoiceOverlay .seal-choice-preview {
    margin: 0;
  }

  #sealChoiceOverlay .seal-choice-preview-frame {
    height: clamp(5rem, 16svh, 7.5rem);
    max-height: clamp(5rem, 16svh, 7.5rem);
    min-height: 0;
  }

  #sealChoiceStandardBtn,
  #sealChoiceBlockchainBtn {
    min-height: 2.75rem;
    margin-top: auto;
  }

  #sealChoiceBackBtn {
    position: relative;
    margin-top: 0.4rem;
    min-height: 2.5rem;
  }
}

@media (min-width: 761px) and (max-height: 680px) {
  #sealChoiceOverlay {
    padding: 0.5rem;
  }

  #sealChoiceOverlay .seal-choice-dialog {
    border-radius: 18px;
    max-height: calc(100svh - 1rem);
    padding: clamp(0.55rem, 1.6vh, 0.75rem);
    gap: clamp(0.32rem, 0.8vh, 0.5rem);
  }

  #sealChoiceOverlay .seal-choice-options {
    gap: clamp(0.45rem, 1vw, 0.7rem);
  }

  #sealChoiceOverlay .seal-choice-card {
    border-radius: 16px;
    padding: clamp(0.52rem, 1.5vh, 0.7rem);
    gap: clamp(0.28rem, 0.8vh, 0.45rem);
  }

  #sealChoiceOverlay .seal-choice-preview {
    gap: 0.18rem;
  }

  #sealChoiceOverlay .seal-choice-preview-frame {
    height: clamp(3.15rem, 10svh, 4.75rem);
    max-height: clamp(3.15rem, 10svh, 4.75rem);
    min-width: 4.6rem;
    padding: 0.35rem;
  }

  #sealChoiceStandardBtn,
  #sealChoiceBlockchainBtn,
  #sealChoiceBackBtn {
    min-height: 2.25rem;
    padding-block: 0.42rem;
  }

  #sealChoiceBackBtn {
    margin-top: 0.1rem;
  }
}

@media (min-width: 761px) and (max-height: 560px) {
  #sealChoiceOverlay .seal-choice-preview {
    display: none;
  }

  #sealChoiceOverlay .seal-choice-dialog h2 {
    font-size: clamp(1.15rem, 4vh, 1.45rem);
  }

  #sealChoiceOverlay #sealChoiceBody,
  #sealChoiceOverlay .seal-choice-card p {
    font-size: clamp(0.78rem, 2.4vh, 0.9rem);
  }
}

/* Mobile: allow overlay-level scroll, not inner card/dialog scroll */
@media (max-width: 760px) {
  #sealChoiceOverlay {
    align-items: start;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #sealChoiceOverlay .seal-choice-dialog {
    max-height: none;
    overflow: visible;
  }

  #sealChoiceOverlay .seal-choice-options {
    grid-template-columns: 1fr;
  }

  #sealChoiceOverlay .seal-choice-preview-frame {
    max-height: clamp(9rem, 30svh, 12rem);
  }
}

/* Typography variable pass: system stacks only, no remote or bundled font loading. */
body,
label,
legend,
button,
input,
textarea,
select,
.upload-status,
.hint,
.panel-copy,
.preview-readiness-message,
.minted-status-badge,
.minting-overlay,
.proof-summary,
.artifact-info-panel p,
.hero-copy p,
.hero-content p,
.hero-preview p,
#previewTagline,
.hero-reference p {
  font-family: var(--font-ui);
}

h1,
h2,
h3,
.card-title-inline,
.artifact-info-panel h3,
.hero-copy h1,
.hero-content h1,
.hero-preview h1,
#heroPreview h1,
#heroPreview h3,
#previewName,
.hero-reference h1 {
  font-family: var(--font-display);
}

code,
pre,
.metadata-preview,
.card5-machine-identity-value,
.machine-description-label,
.machine-description-appendix {
  font-family: var(--font-mono);
}

/* Post-merge visual QA refinement (2026-05-31): restrained weight reduction only; no media or authoring behavior changes. */
body[data-mode="edit"] #artifactPreview.artifact-card[data-video-owned="false"]:not([data-image-owned="true"])::before {
  background:
    radial-gradient(circle at 50% 12%, rgba(214, 244, 255, 0.12), rgba(126, 217, 255, 0.038) 28%, transparent 58%),
    radial-gradient(circle at 82% 76%, rgba(122, 92, 255, 0.052), transparent 40%),
    linear-gradient(180deg, rgba(8, 22, 42, 0.2), rgba(2, 8, 18, 0.07) 48%, rgba(2, 8, 18, 0.22)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 38%, rgba(255, 255, 255, 0.018));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    inset 0 -1.2rem 3.6rem rgba(0, 0, 0, 0.11),
    0 1rem 3rem rgba(0, 0, 0, 0.06);
  opacity: 0.86;
}

body[data-mode="edit"] #artifactPreview.artifact-card[data-video-owned="false"]:not([data-image-owned="true"])::after {
  bottom: clamp(1.8rem, 6vw, 3.3rem);
  background: rgba(2, 8, 18, 0.095);
  border: 1px solid rgba(207, 236, 255, 0.055);
  color: rgba(229, 246, 255, 0.34);
  font-weight: 540;
  text-shadow: 0 1px 7px rgba(0, 0, 0, 0.38);
}

body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
  background:
    linear-gradient(180deg, rgba(12, 27, 48, 0.16), rgba(3, 10, 18, 0.07)),
    radial-gradient(circle at 50% 0%, rgba(207, 236, 255, 0.045), transparent 44%);
  border-color: rgba(207, 236, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card + .authoring-card,
body[data-mode="edit"] > .container .authoring-rail .plus-choices {
  border-top-color: rgba(207, 236, 255, 0.075);
}

body[data-mode="edit"] > .container .authoring-rail .required-card {
  border-top-color: rgba(255, 183, 77, 0.13);
  background: linear-gradient(180deg, rgba(255, 183, 77, 0.024), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255, 183, 77, 0.045);
}

body[data-mode="edit"] > .container .authoring-rail .required-card[data-required-complete="true"] {
  border-top-color: rgba(110, 242, 162, 0.12);
  background: linear-gradient(180deg, rgba(110, 242, 162, 0.024), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(110, 242, 162, 0.045);
}

body[data-mode="edit"] > .container .authoring-rail input,
body[data-mode="edit"] > .container .authoring-rail textarea,
body[data-mode="edit"] > .container .authoring-rail select,
body[data-mode="edit"] > .container .authoring-rail button {
  padding: 0.46rem 0.62rem;
  border-color: rgba(207, 236, 255, 0.17);
  background: rgba(2, 8, 18, 0.38);
}

body[data-mode="edit"] > .container .authoring-rail input,
body[data-mode="edit"] > .container .authoring-rail select,
body[data-mode="edit"] > .container .authoring-rail button {
  min-height: 2.14rem;
}

body[data-mode="edit"] > .container .authoring-rail input[type="file"] {
  min-height: 2.04rem;
  padding: 0.36rem 0.52rem;
  border-color: rgba(207, 236, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.044), rgba(255, 255, 255, 0.014)),
    rgba(2, 8, 18, 0.32);
}

body[data-mode="edit"] > .container .authoring-rail .upload-status-row {
  border-color: rgba(207, 236, 255, 0.14);
  background: rgba(2, 8, 18, 0.22);
}

body[data-mode="edit"] > .container .authoring-rail .upload-status-row:has(.upload-clear-btn:not([hidden])) {
  border-color: rgba(110, 242, 162, 0.22);
  background: linear-gradient(90deg, rgba(110, 242, 162, 0.095), rgba(2, 8, 18, 0.22));
}

body[data-mode="edit"] #heroPreview {
  background: linear-gradient(180deg, rgba(2, 8, 18, 0.26), rgba(2, 8, 18, 0.12));
  border-color: rgba(207, 236, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(5px) saturate(108%);
  -webkit-backdrop-filter: blur(5px) saturate(108%);
}

body[data-mode="edit"] #previewName,
body[data-mode="edit"] #previewTagline,
body[data-mode="edit"] #heroPreview .hero-preview-helper,
body[data-mode="edit"] #labelTitle,
body[data-mode="edit"] #labelArtist,
body[data-mode="edit"] #labelYear {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.52);
}

@media (min-width: 900px) and (max-width: 1100px) {
  body[data-mode="edit"] > .container {
    --edit-artifact-card-width: clamp(24rem, 52vw, 30rem);
    grid-template-columns: minmax(14.25rem, 16.875rem) minmax(0, 1fr);
    gap: clamp(0.5rem, 1.2vw, 0.75rem);
    width: min(calc(100% - 1rem), 68rem);
  }

  body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
    padding: clamp(0.58rem, 1.2vw, 0.78rem);
  }

  body[data-mode="edit"] > .container #artifactForm,
  body[data-mode="edit"] > .container #inputForm {
    gap: clamp(0.42rem, 1vw, 0.58rem);
  }

  body[data-mode="edit"] > .container .authoring-rail .authoring-card {
    gap: clamp(0.42rem, 0.95vw, 0.58rem);
    padding-block: clamp(0.5rem, 1.2vw, 0.68rem);
  }
}

@media (max-width: 899px) {
  body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
    max-width: min(100%, 36rem);
  }
}

@media (max-width: 640px) {
  body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
    padding: clamp(0.64rem, 2.8vw, 0.86rem);
  }

  body[data-mode="edit"] > .container .authoring-rail .authoring-card {
    padding-block: clamp(0.5rem, 2.4vw, 0.68rem);
  }
}

/* System typography refinement (2026-05-31): premium hierarchy using existing local font variables only. */
body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
  font-family: var(--font-ui);
  color: rgba(244, 251, 255, 0.94);
  font-size: 0.92rem;
  line-height: 1.45;
}

body[data-mode="edit"] > .container .authoring-rail :is(h2, h3, legend, summary),
body[data-mode="edit"] > .container .authoring-rail .card-title-inline,
body[data-mode="edit"] > .container .authoring-rail .layer-label {
  font-family: var(--font-display);
  text-wrap: balance;
}

body[data-mode="edit"] > .container .authoring-rail #authoringTitle {
  margin: 0;
  color: rgba(247, 252, 255, 0.96);
  font-size: clamp(1.04rem, 1.45vw, 1.22rem);
  font-weight: 735;
  letter-spacing: -0.026em;
  line-height: 1.08;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.38);
}

body[data-mode="edit"] > .container .authoring-rail .layer-label {
  margin-bottom: 0.18rem;
  color: rgba(126, 217, 255, 0.82);
  font-size: 0.64rem;
  font-weight: 720;
  letter-spacing: 0.18em;
  line-height: 1.1;
}

body[data-mode="edit"] > .container .authoring-rail .panel-copy {
  max-width: 24rem;
  margin: 0.16rem 0 0.34rem;
  color: rgba(219, 238, 250, 0.68);
  font-size: 0.78rem;
  font-weight: 420;
  letter-spacing: 0.002em;
  line-height: 1.42;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.36);
}

body[data-mode="edit"] > .container .authoring-rail .card-title-inline,
body[data-mode="edit"] > .container .authoring-rail legend,
body[data-mode="edit"] > .container .authoring-rail .plus-choices summary {
  color: rgba(241, 250, 255, 0.88);
  font-size: 0.74rem;
  font-weight: 740;
  letter-spacing: 0.135em;
  line-height: 1.16;
  text-transform: uppercase;
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.34);
}

body[data-mode="edit"] > .container .authoring-rail .plus-choices summary {
  color: rgba(126, 217, 255, 0.84);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

body[data-mode="edit"] > .container .authoring-rail label,
body[data-mode="edit"] > .container .authoring-rail .upload-field-label,
body[data-mode="edit"] > .container .authoring-rail .type-overlay-label {
  color: rgba(222, 240, 252, 0.76);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 610;
  letter-spacing: 0.018em;
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.34);
}

body[data-mode="edit"] > .container .authoring-rail .mode-choice-header label,
body[data-mode="edit"] > .container .authoring-rail :is(.media-choice, .opacity-controls, .hero-message-controls) label,
body[data-mode="edit"] > .container .authoring-rail .plus-choice-grid label {
  color: rgba(225, 242, 253, 0.74);
  font-size: 0.73rem;
  font-weight: 560;
  letter-spacing: 0.008em;
}

body[data-mode="edit"] > .container .authoring-rail input,
body[data-mode="edit"] > .container .authoring-rail textarea,
body[data-mode="edit"] > .container .authoring-rail select {
  font-family: var(--font-ui);
  color: rgba(247, 252, 255, 0.96);
  font-size: 0.86rem;
  font-weight: 450;
  letter-spacing: -0.004em;
  line-height: 1.32;
}

body[data-mode="edit"] > .container .authoring-rail input::placeholder,
body[data-mode="edit"] > .container .authoring-rail textarea::placeholder {
  color: rgba(218, 237, 250, 0.54);
  font-weight: 410;
  letter-spacing: 0;
}

body[data-mode="edit"] > .container .authoring-rail #mintIdInput,
body[data-mode="edit"] > .container .authoring-rail #mintPrintedId,
body[data-mode="edit"] > .container .authoring-rail #mintPrintedTimestamp,
body[data-mode="edit"] > .container .authoring-rail .card5-machine-identity-value {
  font-family: var(--font-mono);
  letter-spacing: -0.018em;
}

body[data-mode="edit"] > .container .authoring-rail .hint,
body[data-mode="edit"] > .container .authoring-rail #ambientToggleReason,
body[data-mode="edit"] > .container .authoring-rail .hero-preview-helper {
  color: rgba(216, 236, 250, 0.66);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 420;
  letter-spacing: 0.002em;
  line-height: 1.42;
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.48);
}

body[data-mode="edit"] > .container .authoring-rail .required-card > .hint:first-of-type {
  color: rgba(235, 246, 255, 0.7);
  font-size: 0.74rem;
  line-height: 1.38;
}

body[data-mode="edit"] > .container .authoring-rail .upload-status {
  color: rgba(231, 245, 255, 0.76);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  line-height: 1.28;
}

body[data-mode="edit"] > .container .authoring-rail .upload-status-row:has(.upload-clear-btn:not([hidden])) .upload-status {
  color: rgba(232, 255, 244, 0.9);
  font-size: 0.73rem;
  font-weight: 660;
  letter-spacing: 0.002em;
}

body[data-mode="edit"] > .container .authoring-rail button,
body[data-mode="edit"] > .container .authoring-rail input[type="file"]::file-selector-button {
  font-family: var(--font-ui);
  line-height: 1.1;
}

body[data-mode="edit"] > .container .authoring-rail button:not(.primary):not(.btn-primary):not(.upload-clear-btn),
body[data-mode="edit"] > .container .authoring-rail input[type="file"]::file-selector-button {
  color: rgba(239, 248, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.014em;
}

body[data-mode="edit"] > .container .authoring-rail button.primary,
body[data-mode="edit"] > .container .authoring-rail .btn-primary {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 760;
  letter-spacing: 0.012em;
  line-height: 1.08;
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.24);
}

body[data-mode="edit"] > .container .authoring-rail .upload-clear-btn,
body[data-mode="edit"] > .container .authoring-rail #bgVideoInputClear,
body[data-mode="edit"] > .container .authoring-rail #vinylUploadClear,
body[data-mode="edit"] > .container .authoring-rail #audioInputClear,
body[data-mode="edit"] > .container .authoring-rail #mintCoverInputClear {
  color: rgba(217, 235, 247, 0.66);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 570;
  letter-spacing: 0.018em;
  line-height: 1.05;
  text-transform: none;
}

/* Uploaded filename overflow guard: keep every media status pill inside its rounded row without crowding Remove. */
body[data-mode="edit"] > .container .authoring-rail .upload-status-row {
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

body[data-mode="edit"] > .container .authoring-rail .upload-status {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1.2;
}

body[data-mode="edit"] > .container .authoring-rail .upload-status-row:has(.upload-clear-btn:not([hidden])) .upload-status {
  font-size: 0.72rem;
  line-height: 1.2;
}

body[data-mode="edit"] > .container .authoring-rail .upload-clear-btn,
body[data-mode="edit"] > .container .authoring-rail #bgVideoInputClear,
body[data-mode="edit"] > .container .authoring-rail #vinylUploadClear,
body[data-mode="edit"] > .container .authoring-rail #audioInputClear,
body[data-mode="edit"] > .container .authoring-rail #mintCoverInputClear {
  flex-shrink: 0;
}

body[data-mode="edit"] > .container .authoring-rail .card5-machine-identity-label,
body[data-mode="edit"] > .container .authoring-rail .machine-description-label {
  font-family: var(--font-mono);
  letter-spacing: 0.075em;
}

#previewReturnControls.mode-control-dock.preview-return button,
.preview-readiness-link,
#statusOutput,
.minted-status-badge button {
  font-family: var(--font-ui);
}

body[data-mode="edit"] #toggleModeBtn,
body[data-mode="preview"] #previewGoFinalBtn {
  font-size: 0.9rem;
  font-weight: 760;
  letter-spacing: 0.012em;
  line-height: 1.08;
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.24);
}

body[data-mode="preview"] #previewExitToEditBtn,
.preview-readiness-link {
  font-size: 0.8rem;
  font-weight: 630;
  letter-spacing: 0.012em;
  line-height: 1.1;
}

#statusOutput {
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.004em;
  line-height: 1.38;
}

.minted-status-badge button {
  font-weight: 720;
  letter-spacing: 0.012em;
  line-height: 1.08;
}

/* Customer-facing artifact visual parity polish: preview/final/export-safe presentation only. */
body[data-mode="preview"] .preview-layer .artifact-card,
body[data-mode="final"] .preview-layer .artifact-card,
body.final-mode .preview-layer .artifact-card,
body.finalized .preview-layer .artifact-card {
  background: transparent !important;
  border-color: rgba(180, 220, 255, 0.18) !important;
  box-shadow: 0 1.35rem 4.5rem rgba(0, 0, 0, 0.24) !important;
}

body[data-mode="preview"] .artifact-card[data-video-owned="true"]::before,
body[data-mode="preview"] .artifact-card[data-image-owned="true"]::before,
body[data-mode="preview"] .artifact-card[data-video-owned="true"]::after,
body[data-mode="preview"] .artifact-card[data-image-owned="true"]::after,
body[data-mode="final"] .artifact-card[data-video-owned="true"]::before,
body[data-mode="final"] .artifact-card[data-image-owned="true"]::before,
body[data-mode="final"] .artifact-card[data-video-owned="true"]::after,
body[data-mode="final"] .artifact-card[data-image-owned="true"]::after,
body.final-mode .artifact-card[data-video-owned="true"]::before,
body.final-mode .artifact-card[data-image-owned="true"]::before,
body.final-mode .artifact-card[data-video-owned="true"]::after,
body.final-mode .artifact-card[data-image-owned="true"]::after,
body.finalized .artifact-card[data-video-owned="true"]::before,
body.finalized .artifact-card[data-image-owned="true"]::before,
body.finalized .artifact-card[data-video-owned="true"]::after,
body.finalized .artifact-card[data-image-owned="true"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body[data-mode="preview"] .hero-reference,
body[data-mode="final"] .hero-reference,
body.final-mode .hero-reference,
body.finalized .hero-reference {
  background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.11), transparent 30rem), rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

body[data-mode="preview"] .hero-reference::before,
body[data-mode="final"] .hero-reference::before,
body.final-mode .hero-reference::before,
body.finalized .hero-reference::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.28));
}

body[data-mode="final"] .authoring-layer,
body[data-mode="final"] .proof-layer,
body.final-mode .authoring-layer,
body.final-mode .proof-layer,
body.finalized .authoring-layer,
body.finalized .proof-layer {
  display: none !important;
}

body[data-mode="final"] .audio-preview-shell,
body.final-mode .audio-preview-shell,
body.finalized .audio-preview-shell,
body[data-mint-state="minted"] .audio-preview-shell {
  bottom: max(3.45rem, calc(env(safe-area-inset-bottom, 0px) + 3.45rem));
}

body[data-mode="preview"] :is(.empty-artifact-helper, .hero-preview-helper[data-empty-helper="true"], [data-empty-artifact-helper="true"], [data-edit-ghost-cue="true"]),
body[data-mode="final"] :is(.empty-artifact-helper, .hero-preview-helper[data-empty-helper="true"], [data-empty-artifact-helper="true"], [data-edit-ghost-cue="true"]),
body.final-mode :is(.empty-artifact-helper, .hero-preview-helper[data-empty-helper="true"], [data-empty-artifact-helper="true"], [data-edit-ghost-cue="true"]),
body.finalized :is(.empty-artifact-helper, .hero-preview-helper[data-empty-helper="true"], [data-empty-artifact-helper="true"], [data-edit-ghost-cue="true"]) {
  display: none !important;
}

/* Customer-facing parity finish: preview/final/export readability over creator media only. */
body[data-mode="preview"] .artifact-video-preview,
body[data-mode="preview"] .artifact-image-preview,
body[data-mode="final"] .artifact-video-preview,
body[data-mode="final"] .artifact-image-preview,
body.final-mode .artifact-video-preview,
body.final-mode .artifact-image-preview,
body.finalized .artifact-video-preview,
body.finalized .artifact-image-preview {
  object-fit: cover !important;
  object-position: center center !important;
}

body[data-mode="preview"] .artifact-content-stack,
body[data-mode="final"] .artifact-content-stack,
body.final-mode .artifact-content-stack,
body.finalized .artifact-content-stack {
  position: relative;
  z-index: 2;
}

body[data-mode="preview"] #heroPreview,
body[data-mode="final"] #heroPreview,
body.final-mode #heroPreview,
body.finalized #heroPreview {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.13), transparent 30rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body[data-mode="preview"] #heroPreview::before,
body[data-mode="final"] #heroPreview::before,
body.final-mode #heroPreview::before,
body.finalized #heroPreview::before {
  background:
    radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.22) 58%, rgba(0, 0, 0, 0.42)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.10) 42%, rgba(0, 0, 0, 0.36)) !important;
}

body[data-mode="preview"] #previewName,
body[data-mode="final"] #previewName,
body.final-mode #previewName,
body.finalized #previewName {
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.38),
    0 10px 24px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(0, 0, 0, 0.38) !important;
}

body[data-mode="preview"] #previewTagline,
body[data-mode="final"] #previewTagline,
body.final-mode #previewTagline,
body.finalized #previewTagline {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.58),
    0 0 20px rgba(0, 0, 0, 0.35) !important;
}

body[data-mode="final"] #mintedStatusBadge,
body.final-mode #mintedStatusBadge,
body.finalized #mintedStatusBadge,
body[data-mint-state="minted"] #mintedStatusBadge {
  z-index: 2147483000 !important;
}

/* Audio authoring polish (2026-05-31): keep upload + MP3 player visible, compact, and glassy without changing media logic. */
body[data-mode="edit"] > .container .authoring-rail #card2AudioUploads {
  gap: 0.48rem;
  background: linear-gradient(145deg, rgba(11, 28, 48, 0.34), rgba(2, 8, 18, 0.12));
  border-color: rgba(170, 229, 255, 0.2);
  box-shadow: 0 0.72rem 1.8rem rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.065);
  backdrop-filter: blur(12px) saturate(124%);
  -webkit-backdrop-filter: blur(12px) saturate(124%);
}

body[data-mode="edit"] > .container .authoring-rail #card2AudioUploads .card-title-inline {
  margin: 0;
}

body[data-mode="edit"] > .container .authoring-rail .audio-fieldset,
body[data-mode="edit"] > .container .authoring-rail #mp3-upload-section.audio-upload-section {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

body[data-mode="edit"] > .container .authoring-rail .audio-fieldset {
  display: grid;
  gap: 0.48rem;
  margin: 0;
  padding: 0.58rem;
  border-color: rgba(207, 236, 255, 0.18);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.075), rgba(126, 217, 255, 0.055) 42%, rgba(2, 8, 18, 0.16));
  box-shadow: 0 0.55rem 1.35rem rgba(0, 0, 0, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

body[data-mode="edit"] > .container .authoring-rail .audio-fieldset-title {
  padding: 0 0.28rem;
  color: rgba(231, 246, 255, 0.84);
  font-size: 0.78rem;
  font-weight: 720;
  letter-spacing: 0.035em;
  line-height: 1.1;
}

body[data-mode="edit"] > .container .authoring-rail #mp3-upload-section.audio-upload-section {
  display: grid;
  gap: 0.42rem;
}

body[data-mode="edit"] > .container .authoring-rail #mp3-upload-section .upload-field-label {
  margin: 0;
  color: rgba(225, 242, 253, 0.78);
  font-size: 0.72rem;
  font-weight: 620;
}

body[data-mode="edit"] > .container .authoring-rail #mp3-upload-section #audioInput {
  max-width: 100%;
}

body[data-mode="edit"] > .container .authoring-rail #mp3-upload-section #audioInputStatus {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
}

body[data-mode="edit"] > .container .authoring-rail #mp3-upload-section #ambientControlLabel {
  max-width: 100%;
  min-width: 0;
  margin-top: 0.1rem;
  padding: 0.38rem 0.48rem;
  border: 1px solid rgba(170, 229, 255, 0.18);
  border-radius: 0.58rem;
  background: rgba(2, 8, 18, 0.28);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-mode="edit"] #mp3-player-section {
  overflow: hidden;
  padding: 0.34rem 0.44rem;
  border: 1px solid rgba(207, 236, 255, 0.2);
  border-radius: 0.86rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(126, 217, 255, 0.075) 45%, rgba(2, 8, 18, 0.2));
  box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(128%);
  -webkit-backdrop-filter: blur(14px) saturate(128%);
}

body[data-mode="edit"] #mp3-player-section audio {
  overflow: hidden;
  border-radius: 0.62rem;
}

/* Authority quarantine:
   This visual polish intentionally excludes #card5MintFields and #previewReturnControls.
   Card 5 readiness visuals and Preview/Edit/Finalize controls are governed by existing authority CSS/JS.
   Do not widen these selectors without rerunning webkit-a2a-authority.
*/
/* Narrow edit-mode authoring presentation polish: scoped away from Card 5, preview controls, preview layer, and MP3 surfaces. */
body[data-mode="edit"] .authoring-layer {
  --author-polish-card-bg: linear-gradient(180deg, rgba(11, 28, 49, 0.46), rgba(3, 10, 18, 0.34));
  --author-polish-card-line: rgba(207, 236, 255, 0.135);
  --author-polish-card-line-soft: rgba(126, 217, 255, 0.105);
  --author-polish-field-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)), rgba(2, 8, 18, 0.52);
  --author-polish-field-line: rgba(207, 236, 255, 0.18);
  --author-polish-text: rgba(244, 251, 255, 0.96);
  --author-polish-muted: rgba(203, 226, 241, 0.68);
  --author-polish-accent: rgba(126, 217, 255, 0.78);
}

body[data-mode="edit"] .authoring-rail .layer-label {
  color: var(--author-polish-accent);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

body[data-mode="edit"] .authoring-rail > h2 {
  margin-bottom: 0.22rem;
  color: var(--author-polish-text);
  font-size: clamp(1.16rem, 1.9vw, 1.42rem);
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

body[data-mode="edit"] .authoring-rail > .panel-copy {
  max-width: 30rem;
  margin-bottom: 0.82rem;
  color: var(--author-polish-muted);
  font-size: 0.82rem;
  line-height: 1.42;
}

body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) {
  padding: clamp(0.82rem, 1.5vw, 1.02rem);
  gap: 0.72rem;
  border-color: var(--author-polish-card-line);
  background:
    radial-gradient(circle at 12% 0%, rgba(126, 217, 255, 0.078), transparent 34%),
    var(--author-polish-card-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    0 0.55rem 1.45rem rgba(0, 0, 0, 0.115);
}

body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) + .authoring-card:not(#card2AudioUploads):not(#card5MintFields),
body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) .plus-choices {
  border-top-color: var(--author-polish-card-line-soft);
}

body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) .card-title-inline {
  color: rgba(245, 251, 255, 0.94);
  font-size: 0.96rem;
  font-weight: 720;
  letter-spacing: -0.018em;
  line-height: 1.16;
}

body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) fieldset,
body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) .plus-choices {
  border-color: rgba(207, 236, 255, 0.13);
  background: rgba(2, 8, 18, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) legend,
body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) .plus-choices summary {
  color: rgba(183, 233, 255, 0.84);
  font-size: 0.78rem;
  font-weight: 680;
  letter-spacing: 0.035em;
}

body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) label,
body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) .upload-field-label,
body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) .type-overlay-label {
  color: rgba(225, 241, 251, 0.78);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.012em;
  line-height: 1.28;
}

body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) input,
body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) textarea,
body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) select {
  border-color: var(--author-polish-field-line);
  background: var(--author-polish-field-bg);
  color: var(--author-polish-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.046),
    0 0.38rem 1rem rgba(0, 0, 0, 0.105);
}

body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) input:focus-visible,
body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) textarea:focus-visible,
body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) select:focus-visible {
  border-color: rgba(126, 217, 255, 0.44);
  outline-color: rgba(126, 217, 255, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(126, 217, 255, 0.12),
    0 0.45rem 1.15rem rgba(0, 0, 0, 0.13);
}

body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) input::placeholder,
body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) textarea::placeholder {
  color: rgba(202, 225, 240, 0.5);
}

body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) .hint,
body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) .hero-preview-helper {
  color: rgba(203, 226, 241, 0.6);
  font-size: 0.715rem;
  line-height: 1.46;
  text-shadow: 0 1px 7px rgba(0, 0, 0, 0.38);
}

body[data-mode="edit"] .authoring-rail .authoring-card:not(#card2AudioUploads):not(#card5MintFields) .upload-status-row {
  border-color: rgba(207, 236, 255, 0.125);
  background: rgba(2, 8, 18, 0.24);
}

/* Authority safety reset for protected Card 5 and Preview/Edit/Finalize control surfaces. */
body[data-mode="edit"] #card5MintFields,
body[data-mode="edit"] #card5MintFields *,
body[data-mode="edit"] #previewReturnControls,
body[data-mode="edit"] #previewReturnControls * {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Edit-mode Preview dock stability guard: keeps the runtime button physically action-ready for WebKit. */
body[data-mode="edit"] #previewReturnControls.mode-control-dock.preview-return {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8rem, 24rem);
  justify-content: center;
  justify-self: center;
  width: min(100%, var(--artifact-stage-max, 520px));
  margin: 1rem auto 0;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  contain: layout paint;
  will-change: auto;
}

body[data-mode="edit"] #previewReturnControls.mode-control-dock.preview-return,
body[data-mode="edit"] #previewReturnControls.mode-control-dock.preview-return *,
body[data-mode="edit"] #toggleModeBtn {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

body[data-mode="edit"] #toggleModeBtn {
  min-width: 8rem;
  pointer-events: auto;
}


/* Runtime layer authority: media < composition < editor < preview < mint < proof. */
.artifact-video-preview,
.artifact-image-preview {
  z-index: var(--ss-layer-media) !important;
  pointer-events: none !important;
}

.app-header[data-layer-authority="editor-chrome"],
.authoring-layer.authoring-rail[data-layer-authority="editor-chrome"] {
  z-index: var(--ss-layer-editor-chrome) !important;
  pointer-events: auto;
}

#previewReturnControls.mode-control-dock.preview-return[data-layer-authority="preview-runtime-chrome"] {
  z-index: var(--ss-layer-preview-chrome) !important;
  pointer-events: auto !important;
}

#mintingOverlay.minting-overlay[data-layer-authority="mint-ceremony"] {
  z-index: var(--ss-layer-mint-ceremony) !important;
  pointer-events: auto;
}

#mintedStatusBadge.minted-status-badge[data-authority="mint-proof-status-badge"] {
  z-index: var(--ss-layer-proof-status) !important;
  pointer-events: auto !important;
}

/* Seal-choice hit-test boundary: when the purchase modal is open,
   preview chrome must remain visually behind the modal and must not steal
   pointer events from the two purchase buttons. */
body[data-seal-choice-open="true"] #sealChoiceOverlay.seal-choice-overlay:not([hidden]) {
  z-index: var(--ss-layer-seal-choice) !important;
  pointer-events: auto !important;
}

body[data-seal-choice-open="true"] #sealChoiceOverlay.seal-choice-overlay:not([hidden]) :is(#sealChoiceStandardBtn, #sealChoiceBlockchainBtn) {
  position: relative;
  z-index: 4 !important;
  pointer-events: auto !important;
}

body[data-seal-choice-open="true"] #previewReturnControls.mode-control-dock.preview-return,
body[data-seal-choice-open="true"] .preview-return {
  pointer-events: none !important;
}

/* Edit-mode resize stability: keep the authoring rail painted and interactive while the
   viewport crosses desktop/three-quarter-size breakpoints. Seal-choice hit-test state
   must never hide or fade the authoring chrome. */
body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;
  animation: none !important;
  content-visibility: visible !important;
  isolation: isolate;
}

@media (min-width: 900px) and (max-width: 1200px) {
  body[data-mode="edit"] > .container > .authoring-layer.authoring-rail {
    grid-area: authoring;
    align-self: start;
    justify-self: stretch;
  }
}

/* Back-page/upload surface authority (2026-06-01):
   Preview and final rendering must not be owned by a centered postcard.
   The fixed full-page uploaded background/back page and the scrollable root page
   own the viewport; artifact content floats on that page without a card frame. */
:root {
  --back-page-content-max: min(72rem, calc(100vw - 2rem));
  --preview-action-dock-width: min(88vw, 24rem);
  --artifact-stage-content-width: min(100%, var(--artifact-stage-max, 520px));
  --artifact-background-portrait-min-height: max(100svh, min(140rem, calc(100vw * 16 / 9)));
  --ss-layer-media: 0;
  --ss-layer-composition: 1;
  --ss-layer-editor-chrome: 20;
  --ss-layer-preview-chrome: 30;
  --ss-layer-seal-choice: 10040;
  --ss-layer-mint-ceremony: 10050;
  --ss-layer-proof-status: 10060;
}

body[data-mode="preview"] {
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-mode="preview"] > .container {
  display: block !important;
  min-height: var(--artifact-background-portrait-min-height);
  width: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

body[data-mode="preview"] > .container > .authoring-layer,
body[data-mode="preview"] .proof-layer,
body[data-mode="preview"] .app-header,
body[data-mode="preview"] .header.workspace-topbar {
  display: none !important;
}

body[data-mode="preview"] > .container > .app-shell.workspace-shell,
body[data-mode="preview"] .preview-layer {
  display: block !important;
  width: 100%;
  max-width: none;
  min-height: var(--artifact-background-portrait-min-height);
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none;
}

body[data-mode="preview"] #artifactPreview.artifact-card {
  width: 100% !important;
  max-width: none !important;
  min-height: 100svh !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(1rem, 3vh, 2rem) clamp(1rem, 4vw, 3rem) calc(8rem + env(safe-area-inset-bottom, 0px)) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
  display: grid !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  pointer-events: none;
  isolation: isolate;
}

body[data-mode="preview"] #artifactPreview.artifact-card[data-video-owned="true"],
body[data-mode="preview"] #artifactPreview.artifact-card[data-image-owned="true"] {
  background: transparent !important;
}

body[data-mode="preview"] #artifactPreview .artifact-content-stack {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(max-content, 25svh) minmax(var(--artifact-record-min-height), 1fr) auto;
  grid-auto-rows: max-content;
  align-content: stretch;
  justify-items: center;
  gap: clamp(0.7rem, 1.8vh, 1.15rem);
  width: var(--artifact-stage-content-width);
  max-width: calc(100vw - 2rem);
  min-height: var(--artifact-background-portrait-min-height);
  margin: 0 auto;
  padding: clamp(0.75rem, 2vh, 1.25rem) 0 calc(2.25rem + env(safe-area-inset-bottom, 0px));
  overflow: visible;
  pointer-events: none;
}

body[data-mode="final"],
body.final-mode,
body.finalized,
body[data-mint-state="minted"] {
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-mode="final"] > .container,
body.final-mode > .container,
body.finalized > .container,
body[data-mint-state="minted"] > .container,
body[data-mode="final"] > .container > .app-shell.workspace-shell,
body.final-mode > .container > .app-shell.workspace-shell,
body.finalized > .container > .app-shell.workspace-shell,
body[data-mint-state="minted"] > .container > .app-shell.workspace-shell,
body[data-mode="final"] .preview-layer,
body.final-mode .preview-layer,
body.finalized .preview-layer,
body[data-mint-state="minted"] .preview-layer,
body[data-mode="final"] #artifactPreview.artifact-card,
body.final-mode #artifactPreview.artifact-card,
body.finalized #artifactPreview.artifact-card,
body[data-mint-state="minted"] #artifactPreview.artifact-card,
body[data-mode="final"] #artifactPreview .artifact-content-stack,
body.final-mode #artifactPreview .artifact-content-stack,
body.finalized #artifactPreview .artifact-content-stack,
body[data-mint-state="minted"] #artifactPreview .artifact-content-stack {
  overflow: visible !important;
}

body[data-mode="preview"] #artifactPreview .artifact-content-stack > * {
  pointer-events: auto;
}

body[data-mode="preview"] #artifactLogoBadge.preview-logo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  grid-column: 1;
  grid-row: 1;
  max-width: min(34vw, 8rem);
  align-self: start;
  justify-self: center;
}

body[data-mode="preview"] #heroPreview {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  width: 100%;
  max-width: 100%;
  min-height: var(--artifact-hero-min-height) !important;
  margin-top: 0;
  padding: var(--artifact-hero-padding) !important;
}

body[data-mode="preview"] #vinylVideo.record-preview {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  min-height: var(--artifact-record-min-height) !important;
  align-self: center;
  justify-self: center;
}

body[data-mode="preview"] #vinylVideo .record-disc,
body[data-mode="preview"] .record-disc {
  width: min(var(--artifact-record-size), 100%) !important;
}

body[data-mode="preview"] .interface-rail {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  justify-items: center;
  align-self: end;
  justify-self: center;
  width: 100%;
  min-height: 0;
  margin-top: 0;
}

body[data-mode="preview"] #mp3-player-section,
body[data-mode="preview"] .audio-preview-shell {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(100%, 24rem) !important;
  max-width: 100% !important;
  min-height: unset !important;
  margin: 0 auto !important;
  padding: 0.2rem 0.35rem !important;
  align-self: end !important;
  justify-self: center !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 0.85rem !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(126, 217, 255, 0.12) 42%, rgba(5, 15, 29, 0.24)) !important;
  box-shadow: 0 0.55rem 1.6rem rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(126, 217, 255, 0.12) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

body[data-mode="preview"] #mp3-player-section audio,
body[data-mode="preview"] .audio-preview-shell audio {
  display: block;
  width: 100%;
  height: 32px;
  border-radius: 0.65rem;
  opacity: 0.88;
}

body[data-mode="preview"] #previewReturnControls.mode-control-dock.preview-return {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: var(--preview-action-dock-width);
  max-width: calc(100vw - 1rem);
}


/* Background-owned portrait reachability (2026-06-02):
   The artifact card must not become a cramped postcard. The scrollable
   background/back page owns the longer-than-wide geometry; #artifactPreview
   remains a transparent content overlay with visible overflow. */
:root {
  --artifact-measure-outline: rgba(229, 246, 255, 0.42);
  --artifact-measure-outline-glow: rgba(52, 213, 255, 0.12);
}

body[data-mode="edit"] .preview-layer {
  display: grid;
  justify-items: center;
}

body[data-mode="edit"] #artifactPreview.artifact-card {
  width: min(100%, var(--artifact-stage-max, 520px)) !important;
  height: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin-inline: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-mode="preview"] #artifactPreview.artifact-card {
  width: 100% !important;
  inline-size: 100% !important;
  max-width: none !important;
  min-height: var(--artifact-background-portrait-min-height) !important;
  height: auto !important;
  margin: 0 auto !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Edit-mode View: Phone ownership proof (2026-06-01): the top-bar View button
   narrows one composition viewport owner. The owner, not #artifactPreview, carries
   the phone outline and clips/measures the uploaded background media, foreground
   artifact overlay, MP3/interface rail, and edit Preview control together. */
body[data-viewport-mode="mobile"] {
  --diagnostic-phone-width: min(22.5rem, calc(100vw - 2rem), calc((100svh - 5rem) * 9 / 16));
  --diagnostic-phone-audio-extension: clamp(5.75rem, 18vw, 7.25rem);
  --diagnostic-phone-height: calc((var(--diagnostic-phone-width) * 16 / 9) + var(--diagnostic-phone-audio-extension));
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "composition" !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  width: var(--diagnostic-phone-width) !important;
  max-width: calc(100vw - 2rem) !important;
  min-height: var(--diagnostic-phone-height) !important;
  height: var(--diagnostic-phone-height) !important;
  aspect-ratio: 9 / 16 !important;
  margin-inline: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(110, 242, 162, 0.72) !important;
  border-radius: 1.05rem !important;
  background: #020712 !important;
  box-shadow: inset 0 0 0 1px rgba(110, 242, 162, 0.18), 0 0 1.25rem rgba(110, 242, 162, 0.16) !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] .artifact-video-preview,
body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] .artifact-image-preview {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  pointer-events: none !important;
  background: #020712 !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] .preview-layer {
  grid-area: composition !important;
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] #artifactPreview.artifact-card {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] #artifactPreview .artifact-content-stack {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: clamp(0.65rem, 2.2vh, 1rem) clamp(0.65rem, 3vw, 1rem) calc(4.85rem + env(safe-area-inset-bottom, 0px)) !important;
  overflow: visible !important;
  background: transparent !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] #artifactPreview .artifact-content-stack {
  display: grid !important;
  grid-template-rows: max-content minmax(0, 1fr) max-content !important;
  align-content: stretch !important;
  justify-items: center !important;
  gap: clamp(0.5rem, 1.55vh, 0.85rem) !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] #heroPreview {
  width: 100% !important;
  min-height: clamp(8.25rem, 23vh, 11rem) !important;
  padding: clamp(0.62rem, 1.8vh, 0.86rem) !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] #vinylVideo.record-preview {
  min-height: clamp(8.75rem, 26vh, 12rem) !important;
  align-self: center !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] #vinylVideo .record-disc,
body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] .record-disc {
  width: min(100%, clamp(8.75rem, 44vw, 12rem)) !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] .interface-rail {
  align-self: end !important;
  justify-self: center !important;
  width: 100% !important;
  min-height: 0 !important;
  padding-bottom: clamp(0.15rem, 0.8vh, 0.35rem) !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] #mp3-player-section {
  width: min(100%, 21rem) !important;
  max-width: 100% !important;
  margin: clamp(0.25rem, 0.9vh, 0.45rem) auto 0 !important;
  padding: 0.28rem 0.38rem !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] #mp3-player-section audio {
  display: block !important;
  width: 100% !important;
  height: 32px !important;
}

body[data-mode="edit"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] #previewReturnControls.mode-control-dock.preview-return {
  position: absolute !important;
  left: clamp(0.65rem, 3vw, 1rem) !important;
  right: clamp(0.65rem, 3vw, 1rem) !important;
  bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 3 !important;
  display: grid !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

/* Narrow edit-page cleanup: keep the root toolbar to one scrollable row and reduce first-load helper clutter. */
body[data-mode="edit"] .app-header {
  overflow-x: auto;
  overflow-y: visible;
}

body[data-mode="edit"] .editor-toolbar {
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-padding-inline: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

body[data-mode="edit"] .editor-toolbar::-webkit-scrollbar {
  display: initial;
  height: 0.35rem;
}

body[data-mode="edit"] .editor-toolbar > *,
body[data-mode="edit"] .mode-choice-header > * {
  flex: 0 0 auto;
}

body[data-mode="edit"] .mode-choice-header {
  flex: 0 0 auto;
  min-width: max-content;
  flex-wrap: nowrap;
  overflow: visible;
}

@media (min-width: 980px) {
  body[data-mode="edit"] .editor-toolbar {
    justify-content: center;
  }
}

@media (max-width: 720px) {
  body[data-mode="edit"] .app-header {
    padding-inline: 0.35rem;
  }

  body[data-mode="edit"] .editor-toolbar {
    width: 100%;
    max-width: 100%;
  }

  body[data-mode="edit"] .viewport-mode-label {
    max-width: 4.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 430px) {
  body[data-mode="edit"] .toolbar-chip,
  body[data-mode="edit"] .mode-choice-header label.toolbar-chip,
  body[data-mode="edit"] .mode-choice-header .mode-toggle-button.toolbar-chip,
  body[data-mode="edit"] .viewport-mode-toggle .mode-toggle-button.toolbar-chip {
    min-height: 1.5rem;
    padding-inline: 0.34rem;
    font-size: 0.58rem;
  }

  body[data-mode="edit"] .toolbar-logo-chip .header-logo {
    max-width: 5.7rem;
  }
}

body[data-mode="edit"] > .container .authoring-rail .authoring-card .hint {
  display: none;
}

body[data-mode="edit"] > .container .authoring-rail .required-card > .hint:first-of-type {
  display: block;
  max-width: 24rem;
  margin-bottom: -0.1rem;
}

body[data-mode="edit"] > .container .authoring-rail .upload-status-row {
  margin-top: -0.08rem;
}

body[data-mode="preview"][data-viewport-mode="mobile"] #previewReturnControls {
  display: grid;
  visibility: visible;
  pointer-events: auto !important;
}

body[data-mode="preview"][data-viewport-mode="mobile"] {
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-mode="preview"][data-viewport-mode="mobile"] > .container {
  min-height: calc(var(--diagnostic-phone-height) + 2rem) !important;
  display: grid !important;
  place-items: start center !important;
  padding: 1rem 0 calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
}

body[data-mode="preview"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: var(--diagnostic-phone-width) !important;
  max-width: calc(100vw - 2rem) !important;
  min-height: var(--diagnostic-phone-height) !important;
  height: var(--diagnostic-phone-height) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(110, 242, 162, 0.72) !important;
  border-radius: 1.05rem !important;
  background: #020712 !important;
  box-shadow: inset 0 0 0 1px rgba(110, 242, 162, 0.18), 0 0 1.25rem rgba(110, 242, 162, 0.16) !important;
}

body[data-mode="preview"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] .artifact-video-preview,
body[data-mode="preview"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] .artifact-image-preview {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body[data-mode="preview"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] .preview-layer,
body[data-mode="preview"][data-viewport-mode="mobile"] > .container > .app-shell.workspace-shell[data-edit-composition-viewport="true"] #artifactPreview.artifact-card {
  min-height: 100% !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

body[data-mode="preview"][data-viewport-mode="mobile"] #artifactPreview .artifact-content-stack {
  grid-template-rows: max-content minmax(0, 1fr) max-content !important;
  gap: clamp(0.5rem, 1.55vh, 0.85rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  padding: clamp(0.65rem, 2.2vh, 1rem) clamp(0.65rem, 3vw, 1rem) clamp(0.8rem, 2vh, 1.1rem) !important;
}

body[data-mode="preview"][data-viewport-mode="mobile"] #heroPreview {
  width: 100% !important;
  min-height: clamp(8.25rem, 23vh, 11rem) !important;
  padding: clamp(0.62rem, 1.8vh, 0.86rem) !important;
}

body[data-mode="preview"][data-viewport-mode="mobile"] #vinylVideo.record-preview {
  min-height: clamp(8.75rem, 26vh, 12rem) !important;
  align-self: center !important;
}

body[data-mode="preview"][data-viewport-mode="mobile"] #vinylVideo .record-disc,
body[data-mode="preview"][data-viewport-mode="mobile"] .record-disc {
  width: min(100%, clamp(8.75rem, 44vw, 12rem)) !important;
}

body[data-mode="preview"][data-viewport-mode="mobile"] .interface-rail {
  align-self: end !important;
  padding-bottom: 0 !important;
}

body[data-mode="preview"][data-viewport-mode="mobile"] #mp3-player-section,
body[data-mode="preview"][data-viewport-mode="mobile"] .audio-preview-shell {
  width: min(100%, 21rem) !important;
  max-width: 100% !important;
  margin-top: clamp(0.25rem, 0.9vh, 0.45rem) !important;
  padding: 0.28rem 0.38rem !important;
}

body[data-mode="preview"][data-viewport-mode="mobile"] #mp3-player-section audio,
body[data-mode="preview"][data-viewport-mode="mobile"] .audio-preview-shell audio {
  height: 32px !important;
}

/* Edit Mode visual restoration branch:
   CSS-only SpinStream studio polish. Scoped to Edit Mode authoring chrome so
   preview/final/minted artifact geometry, transport, export, and runtime logic remain untouched. */
body[data-mode="edit"] {
  --studio-bg-deep: #020712;
  --studio-bg-mid: #061322;
  --studio-panel: rgba(6, 17, 31, 0.76);
  --studio-panel-strong: rgba(8, 22, 39, 0.86);
  --studio-panel-line: rgba(132, 218, 255, 0.24);
  --studio-panel-line-soft: rgba(132, 218, 255, 0.13);
  --studio-inner-line: rgba(255, 255, 255, 0.075);
  --studio-shadow: 0 1.2rem 3.8rem rgba(0, 0, 0, 0.46), 0 0 2.8rem rgba(25, 154, 220, 0.085);
  --studio-shadow-soft: 0 0.85rem 2.1rem rgba(0, 0, 0, 0.3);
  --studio-field: rgba(2, 9, 18, 0.74);
  --studio-field-line: rgba(167, 228, 255, 0.2);
  --studio-field-line-hover: rgba(126, 217, 255, 0.34);
  --studio-focus: rgba(52, 213, 255, 0.92);
  --studio-success: var(--ok);
  --studio-error: var(--danger);
  --studio-text: #f3fbff;
  --studio-muted: rgba(196, 221, 238, 0.7);
  --studio-dim: rgba(161, 190, 211, 0.56);
  background:
    radial-gradient(circle at 18% 0%, rgba(43, 179, 238, 0.17), transparent 30rem),
    radial-gradient(circle at 78% 12%, rgba(29, 111, 190, 0.16), transparent 34rem),
    radial-gradient(circle at 50% 105%, rgba(11, 67, 118, 0.22), transparent 30rem),
    linear-gradient(180deg, var(--studio-bg-mid) 0%, var(--studio-bg-deep) 52%, #01040a 100%);
  color: var(--studio-text);
}

body[data-mode="edit"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(126, 217, 255, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(126, 217, 255, 0.018) 1px, transparent 1px);
  background-size: 4.75rem 4.75rem;
  mask-image: radial-gradient(circle at 50% 18%, black, transparent 72%);
  opacity: 0.52;
}

body[data-mode="edit"] .app-header {
  border-bottom-color: rgba(126, 217, 255, 0.2);
  background: linear-gradient(180deg, rgba(4, 12, 23, 0.94), rgba(2, 8, 18, 0.86));
  box-shadow: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
}

body[data-mode="edit"] .toolbar-chip,
body[data-mode="edit"] .mode-choice-header label.toolbar-chip,
body[data-mode="edit"] .mode-choice-header .mode-toggle-button.toolbar-chip,
body[data-mode="edit"] .viewport-mode-toggle .mode-toggle-button.toolbar-chip {
  border-color: rgba(126, 217, 255, 0.23);
  background: linear-gradient(180deg, rgba(13, 34, 57, 0.82), rgba(3, 11, 22, 0.76));
  color: rgba(234, 247, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0.35rem 1rem rgba(0, 0, 0, 0.18);
}

body[data-mode="edit"] .viewport-mode-toggle .mode-toggle-button.is-active,
body[data-mode="edit"] #creatorModeToggleBtn {
  background: linear-gradient(135deg, rgba(24, 164, 222, 0.92), rgba(43, 125, 210, 0.84));
  border-color: rgba(163, 235, 255, 0.35);
  color: #f6fcff;
}

body[data-mode="edit"] .container {
  position: relative;
  z-index: 1;
}

body[data-mode="edit"] .authoring-layer.panel.authoring-rail {
  border-color: var(--studio-panel-line);
  border-radius: 1.24rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 8rem),
    radial-gradient(circle at 18% 0%, rgba(126, 217, 255, 0.12), transparent 15rem),
    var(--studio-panel);
  box-shadow: var(--studio-shadow), inset 0 1px 0 var(--studio-inner-line), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(22px) saturate(138%);
  -webkit-backdrop-filter: blur(22px) saturate(138%);
}

body[data-mode="edit"] .authoring-rail .layer-label {
  color: rgba(126, 217, 255, 0.9);
  font-size: 0.66rem;
  font-weight: 780;
  letter-spacing: 0.22em;
  text-shadow: 0 0 1.1rem rgba(52, 213, 255, 0.38);
}

body[data-mode="edit"] .authoring-rail > h2 {
  color: var(--studio-text);
  font-size: clamp(1.24rem, 2vw, 1.56rem);
  font-weight: 760;
  letter-spacing: -0.035em;
  text-shadow: 0 0.55rem 1.7rem rgba(0, 0, 0, 0.42);
}

body[data-mode="edit"] .authoring-rail > .panel-copy {
  color: var(--studio-muted);
  font-size: 0.84rem;
  letter-spacing: 0.003em;
}

body[data-mode="edit"] .authoring-rail form,
body[data-mode="edit"] .authoring-rail #inputForm {
  gap: 0.78rem;
}

body[data-mode="edit"] .authoring-rail .authoring-card,
body[data-mode="edit"] .authoring-rail #plusChoices.plus-choices {
  border-color: var(--studio-panel-line-soft);
  border-radius: 1.02rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.047), rgba(255, 255, 255, 0.012)),
    radial-gradient(circle at 0% 0%, rgba(52, 213, 255, 0.075), transparent 13rem),
    rgba(3, 12, 24, 0.58);
  box-shadow: var(--studio-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.065), inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

body[data-mode="edit"] .authoring-rail .authoring-card {
  padding: clamp(0.86rem, 1.4vw, 1.05rem);
  gap: 0.74rem;
}

body[data-mode="edit"] .authoring-rail #card5MintFields.required-card {
  border-color: color-mix(in srgb, var(--studio-error) 42%, var(--studio-panel-line));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.044), rgba(255, 255, 255, 0.012)),
    radial-gradient(circle at 0% 0%, rgba(255, 122, 144, 0.075), transparent 12rem),
    rgba(4, 13, 25, 0.68);
}

body[data-mode="edit"] .authoring-rail #card5MintFields.required-card[data-required-complete="true"] {
  border-color: color-mix(in srgb, var(--studio-success) 44%, var(--studio-panel-line));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    radial-gradient(circle at 0% 0%, rgba(110, 242, 162, 0.08), transparent 12rem),
    rgba(4, 15, 25, 0.68);
}

body[data-mode="edit"] .authoring-rail .card-title-inline,
body[data-mode="edit"] .authoring-rail legend,
body[data-mode="edit"] .authoring-rail #plusChoices summary {
  color: rgba(244, 251, 255, 0.96);
  font-weight: 760;
  letter-spacing: 0.015em;
}

body[data-mode="edit"] .authoring-rail .card-title-inline {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

body[data-mode="edit"] .authoring-rail .card-title-inline::after {
  content: "";
  flex: 1 1 auto;
  min-width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(126, 217, 255, 0.36), transparent);
}

body[data-mode="edit"] .authoring-rail fieldset {
  border-color: rgba(126, 217, 255, 0.14);
  background: rgba(2, 8, 18, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body[data-mode="edit"] .authoring-rail label,
body[data-mode="edit"] .authoring-rail .upload-field-label,
body[data-mode="edit"] .authoring-rail .type-overlay-label,
body[data-mode="edit"] #ambientControlLabel {
  color: rgba(222, 240, 251, 0.8);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.018em;
}

body[data-mode="edit"] .authoring-rail input:not([type="checkbox"]):not([type="radio"]),
body[data-mode="edit"] .authoring-rail textarea,
body[data-mode="edit"] .authoring-rail select {
  width: 100%;
  border-color: var(--studio-field-line);
  border-radius: 0.78rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.015)),
    var(--studio-field);
  color: var(--studio-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0.38rem 1rem rgba(0, 0, 0, 0.16);
}

body[data-mode="edit"] .authoring-rail input:not([type="checkbox"]):not([type="radio"]):hover,
body[data-mode="edit"] .authoring-rail textarea:hover,
body[data-mode="edit"] .authoring-rail select:hover {
  border-color: var(--studio-field-line-hover);
}

body[data-mode="edit"] .authoring-rail input:focus-visible,
body[data-mode="edit"] .authoring-rail textarea:focus-visible,
body[data-mode="edit"] .authoring-rail select:focus-visible {
  border-color: rgba(126, 217, 255, 0.58);
  outline: 2px solid rgba(52, 213, 255, 0.68);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(52, 213, 255, 0.18), 0 0 1.35rem rgba(52, 213, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

body[data-mode="edit"] .authoring-rail input::placeholder,
body[data-mode="edit"] .authoring-rail textarea::placeholder {
  color: rgba(172, 202, 222, 0.48);
}

body[data-mode="edit"] .authoring-rail input[type="file"].upload-trigger {
  max-width: 100%;
  min-height: 2.38rem;
  padding: 0.48rem 0.58rem;
  color: rgba(213, 234, 247, 0.74);
}

body[data-mode="edit"] .authoring-rail input[type="file"].upload-trigger::file-selector-button {
  margin-right: 0.72rem;
  border: 1px solid rgba(126, 217, 255, 0.35);
  border-radius: 999px;
  padding: 0.4rem 0.72rem;
  background: linear-gradient(135deg, rgba(21, 143, 204, 0.82), rgba(23, 82, 151, 0.78));
  color: #f4fbff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.015em;
  cursor: pointer;
}

body[data-mode="edit"] .authoring-rail .upload-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
  border: 1px solid rgba(126, 217, 255, 0.14);
  border-radius: 0.72rem;
  padding: 0.42rem 0.48rem;
  background: rgba(1, 7, 15, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body[data-mode="edit"] .authoring-rail .upload-status {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--studio-dim);
  font-size: 0.69rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-mode="edit"] .authoring-rail .upload-clear-btn {
  width: auto;
  max-width: none;
  min-height: 1.72rem;
  padding: 0.28rem 0.54rem;
  border-color: rgba(126, 217, 255, 0.2);
  border-radius: 999px;
  background: rgba(7, 22, 38, 0.78);
  color: rgba(226, 244, 255, 0.84);
  font-size: 0.66rem;
}

body[data-mode="edit"] .authoring-rail input[type="range"] {
  accent-color: var(--accent);
  box-shadow: none;
}

body[data-mode="edit"] #previewReturnControls.mode-control-dock.preview-return {
  border: 1px solid rgba(126, 217, 255, 0.2);
  border-radius: 1rem;
  padding: 0.48rem;
  background: linear-gradient(180deg, rgba(7, 20, 36, 0.78), rgba(2, 8, 18, 0.66));
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.33), inset 0 1px 0 rgba(255, 255, 255, 0.065);
  backdrop-filter: blur(16px) saturate(134%);
  -webkit-backdrop-filter: blur(16px) saturate(134%);
}

body[data-mode="edit"] #toggleModeBtn,
body[data-mode="edit"] #previewExitToEditBtn,
body[data-mode="edit"] #previewGoFinalBtn,
body[data-mode="edit"] #previewHeroBtn {
  border-color: rgba(126, 217, 255, 0.33);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(24, 154, 215, 0.92), rgba(35, 104, 189, 0.86));
  color: #f7fcff;
  font-weight: 780;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  box-shadow: 0 0.7rem 1.55rem rgba(6, 23, 43, 0.36), 0 0 1.25rem rgba(52, 213, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body[data-mode="edit"] #toggleModeBtn:hover,
body[data-mode="edit"] #previewExitToEditBtn:hover,
body[data-mode="edit"] #previewGoFinalBtn:hover,
body[data-mode="edit"] #previewHeroBtn:hover {
  border-color: rgba(169, 236, 255, 0.46);
  background: linear-gradient(135deg, rgba(35, 181, 232, 0.96), rgba(43, 125, 210, 0.9));
  filter: brightness(1.03);
}

body[data-mode="edit"] #toggleModeBtn:focus-visible,
body[data-mode="edit"] #previewExitToEditBtn:focus-visible,
body[data-mode="edit"] #previewGoFinalBtn:focus-visible,
body[data-mode="edit"] #previewHeroBtn:focus-visible {
  outline: 2px solid rgba(52, 213, 255, 0.82);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px rgba(52, 213, 255, 0.22), 0 0 1.8rem rgba(52, 213, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body[data-mode="edit"] #toggleModeBtn:disabled,
body[data-mode="edit"] #previewExitToEditBtn:disabled,
body[data-mode="edit"] #previewGoFinalBtn:disabled,
body[data-mode="edit"] #previewHeroBtn:disabled,
body[data-mode="edit"] .authoring-rail button:disabled {
  border-color: rgba(126, 217, 255, 0.12);
  background: rgba(6, 17, 31, 0.62);
  color: rgba(179, 205, 222, 0.48);
  box-shadow: none;
  opacity: 0.78;
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card {
  display: grid;
  gap: 0.42rem;
  border: 1px solid rgba(126, 217, 255, 0.2);
  border-radius: 0.86rem;
  padding: 0.72rem 0.78rem;
  background:
    linear-gradient(135deg, rgba(52, 213, 255, 0.12), rgba(7, 17, 31, 0.52)),
    rgba(1, 7, 15, 0.48);
  color: rgba(231, 245, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0.7rem 1.8rem rgba(0, 0, 0, 0.16);
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card strong {
  color: rgba(247, 252, 255, 0.94);
  font-size: 0.82rem;
  line-height: 1.22;
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card span {
  color: rgba(216, 236, 250, 0.68);
  font-size: 0.72rem;
  line-height: 1.42;
}

/* Edit Mode music-tech console pass: controlled glass, neon accents, and media-module upload controls. */
body[data-mode="edit"] {
  --studio-bg-deep: #01030a;
  --studio-bg-mid: #040d19;
  --studio-panel: rgba(4, 14, 27, 0.82);
  --studio-panel-strong: rgba(6, 18, 34, 0.92);
  --studio-panel-line: rgba(137, 225, 255, 0.32);
  --studio-panel-line-soft: rgba(137, 225, 255, 0.18);
  --studio-module: rgba(1, 8, 18, 0.72);
  --studio-module-top: rgba(16, 46, 75, 0.5);
  --studio-console-blue: #26cfff;
  --studio-console-electric: #3d7cff;
  --studio-console-violet: #7b61ff;
  background:
    radial-gradient(circle at 12% -8%, rgba(38, 207, 255, 0.24), transparent 28rem),
    radial-gradient(circle at 85% 2%, rgba(61, 124, 255, 0.2), transparent 33rem),
    radial-gradient(circle at 62% 64%, rgba(0, 68, 132, 0.16), transparent 36rem),
    radial-gradient(circle at 45% 115%, rgba(38, 207, 255, 0.13), transparent 26rem),
    linear-gradient(180deg, #071527 0%, var(--studio-bg-mid) 42%, var(--studio-bg-deep) 100%);
}

body[data-mode="edit"]::before {
  background:
    linear-gradient(90deg, rgba(126, 217, 255, 0.034) 1px, transparent 1px),
    linear-gradient(180deg, rgba(126, 217, 255, 0.024) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0 1px, transparent 1.35px);
  background-size: 4.5rem 4.5rem, 4.5rem 4.5rem, 0.82rem 0.82rem;
  mask-image: radial-gradient(ellipse at 50% 13%, black 0%, rgba(0, 0, 0, 0.76) 42%, transparent 82%);
  opacity: 0.62;
}

body[data-mode="edit"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 14rem),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: 0.18;
}

body[data-mode="edit"] .editor-toolbar {
  gap: 0.46rem;
  padding-block: 0.12rem;
}

body[data-mode="edit"] .mode-choice-header {
  border: 1px solid rgba(126, 217, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(14, 35, 58, 0.55), rgba(1, 7, 16, 0.46)),
    rgba(2, 8, 18, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0.55rem 1.55rem rgba(0, 0, 0, 0.2);
}

body[data-mode="edit"] .toolbar-chip,
body[data-mode="edit"] .mode-choice-header label.toolbar-chip,
body[data-mode="edit"] .mode-choice-header .mode-toggle-button.toolbar-chip,
body[data-mode="edit"] .viewport-mode-toggle .mode-toggle-button.toolbar-chip {
  min-height: 1.86rem;
  border-color: rgba(137, 225, 255, 0.27);
  background:
    linear-gradient(180deg, rgba(18, 45, 73, 0.86), rgba(2, 10, 22, 0.84)),
    rgba(2, 8, 18, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(38, 207, 255, 0.08),
    0 0.45rem 1.15rem rgba(0, 0, 0, 0.23);
}

body[data-mode="edit"] .toolbar-chip:hover,
body[data-mode="edit"] .mode-choice-header .mode-toggle-button.toolbar-chip:hover {
  border-color: rgba(137, 225, 255, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0.55rem 1.3rem rgba(0, 0, 0, 0.25),
    0 0 1.1rem rgba(38, 207, 255, 0.14);
}

body[data-mode="edit"] .toolbar-chip:focus-within,
body[data-mode="edit"] .mode-choice-header .mode-toggle-button.toolbar-chip:focus-visible,
body[data-mode="edit"] .viewport-mode-toggle .mode-toggle-button.toolbar-chip:focus-visible {
  outline: 2px solid rgba(38, 207, 255, 0.86);
  outline-offset: 3px;
}

body[data-mode="edit"] .viewport-mode-toggle .mode-toggle-button.is-active,
body[data-mode="edit"] #creatorModeToggleBtn {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.22), transparent 1.8rem),
    linear-gradient(135deg, rgba(38, 207, 255, 0.96), rgba(41, 93, 215, 0.9) 58%, rgba(123, 97, 255, 0.78));
  box-shadow:
    0 0.45rem 1.3rem rgba(0, 0, 0, 0.28),
    0 0 1.25rem rgba(38, 207, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body[data-mode="edit"] .authoring-layer.panel.authoring-rail {
  border-color: var(--studio-panel-line);
  border-radius: 1.05rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 7.6rem),
    radial-gradient(circle at 7% 0%, rgba(38, 207, 255, 0.16), transparent 16rem),
    radial-gradient(circle at 94% 6%, rgba(61, 124, 255, 0.11), transparent 14rem),
    linear-gradient(180deg, rgba(6, 19, 35, 0.92), rgba(2, 8, 18, 0.86));
  box-shadow:
    0 1.6rem 4.8rem rgba(0, 0, 0, 0.56),
    0 0 3.2rem rgba(38, 207, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.026);
}

body[data-mode="edit"] .authoring-layer.panel.authoring-rail::before {
  content: "";
  display: block;
  height: 0.24rem;
  margin: -0.42rem -0.34rem 0.74rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(38, 207, 255, 0.95), rgba(61, 124, 255, 0.44), transparent 78%);
  box-shadow: 0 0 1.2rem rgba(38, 207, 255, 0.32);
}

body[data-mode="edit"] .authoring-rail > h2 {
  margin-bottom: 0.16rem;
  letter-spacing: -0.045em;
}

body[data-mode="edit"] .authoring-rail > .panel-copy {
  margin-bottom: 0.72rem;
  color: rgba(204, 229, 245, 0.76);
}

body[data-mode="edit"] .authoring-rail .authoring-card,
body[data-mode="edit"] .authoring-rail #plusChoices.plus-choices {
  position: relative;
  overflow: hidden;
  border-color: rgba(137, 225, 255, 0.2);
  border-radius: 0.92rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.014)),
    radial-gradient(circle at 0% 0%, rgba(38, 207, 255, 0.11), transparent 11rem),
    linear-gradient(180deg, rgba(7, 21, 39, 0.78), rgba(1, 7, 16, 0.72));
  box-shadow:
    0 0.9rem 2.3rem rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.078),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

body[data-mode="edit"] .authoring-rail .authoring-card::before,
body[data-mode="edit"] .authoring-rail #plusChoices.plus-choices::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(38, 207, 255, 0.82), rgba(61, 124, 255, 0.12), transparent);
  opacity: 0.78;
}

body[data-mode="edit"] .authoring-rail #card5MintFields.required-card {
  border-color: color-mix(in srgb, var(--studio-error) 46%, rgba(137, 225, 255, 0.32));
}

body[data-mode="edit"] .authoring-rail #card5MintFields.required-card::before {
  background: linear-gradient(180deg, rgba(255, 122, 144, 0.9), rgba(38, 207, 255, 0.18), transparent);
}

body[data-mode="edit"] .authoring-rail #card5MintFields.required-card[data-required-complete="true"]::before {
  background: linear-gradient(180deg, rgba(110, 242, 162, 0.88), rgba(38, 207, 255, 0.2), transparent);
}

body[data-mode="edit"] .authoring-rail .card-title-inline,
body[data-mode="edit"] .authoring-rail legend,
body[data-mode="edit"] .authoring-rail #plusChoices summary {
  color: #f7fcff;
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-shadow: 0 0 1rem rgba(38, 207, 255, 0.16);
}

body[data-mode="edit"] .authoring-rail .card-title-inline::after {
  height: 2px;
  background:
    linear-gradient(90deg, rgba(38, 207, 255, 0.62), rgba(61, 124, 255, 0.22), transparent),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent);
  box-shadow: 0 0 0.9rem rgba(38, 207, 255, 0.16);
}

body[data-mode="edit"] .authoring-rail fieldset {
  border-color: rgba(137, 225, 255, 0.18);
  border-radius: 0.82rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(1, 8, 18, 0.48);
}

body[data-mode="edit"] .authoring-rail label,
body[data-mode="edit"] .authoring-rail .upload-field-label,
body[data-mode="edit"] .authoring-rail .type-overlay-label,
body[data-mode="edit"] #ambientControlLabel {
  color: rgba(225, 242, 252, 0.86);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

body[data-mode="edit"] .authoring-rail input:not([type="checkbox"]):not([type="radio"]),
body[data-mode="edit"] .authoring-rail textarea,
body[data-mode="edit"] .authoring-rail select {
  border-color: rgba(137, 225, 255, 0.22);
  border-radius: 0.62rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    linear-gradient(90deg, rgba(38, 207, 255, 0.055), transparent 38%),
    rgba(1, 7, 16, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    inset 0 -1px 0 rgba(38, 207, 255, 0.045),
    0 0.45rem 1.1rem rgba(0, 0, 0, 0.18);
}

body[data-mode="edit"] .authoring-rail input:not([type="checkbox"]):not([type="radio"]):focus-visible,
body[data-mode="edit"] .authoring-rail textarea:focus-visible,
body[data-mode="edit"] .authoring-rail select:focus-visible {
  border-color: rgba(38, 207, 255, 0.68);
  outline: 2px solid rgba(38, 207, 255, 0.8);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px rgba(38, 207, 255, 0.28),
    0 0 1.4rem rgba(38, 207, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.085);
}

body[data-mode="edit"] .authoring-rail .upload-field-label {
  position: relative;
  align-items: center;
  min-height: 1.2rem;
  padding-left: 1.1rem;
  color: rgba(168, 232, 255, 0.92);
}

body[data-mode="edit"] .authoring-rail .upload-field-label::before {
  content: "";
  position: absolute;
  left: 0;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  background: var(--studio-console-blue);
  box-shadow: 0 0 0.75rem rgba(38, 207, 255, 0.74), 0 0 0 3px rgba(38, 207, 255, 0.11);
}

body[data-mode="edit"] .authoring-rail input[type="file"].upload-trigger {
  min-height: 3.2rem;
  border-style: solid;
  border-color: rgba(137, 225, 255, 0.28);
  border-radius: 0.78rem;
  padding: 0.58rem;
  background:
    linear-gradient(135deg, rgba(38, 207, 255, 0.13), transparent 35%),
    radial-gradient(circle at 95% 0%, rgba(61, 124, 255, 0.14), transparent 8rem),
    linear-gradient(180deg, var(--studio-module-top), var(--studio-module)),
    rgba(1, 7, 16, 0.86);
  color: rgba(223, 242, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018),
    0 0.65rem 1.7rem rgba(0, 0, 0, 0.27);
}

body[data-mode="edit"] .authoring-rail input[type="file"].upload-trigger:hover {
  border-color: rgba(137, 225, 255, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.29),
    0 0 1.35rem rgba(38, 207, 255, 0.14);
}

body[data-mode="edit"] .authoring-rail input[type="file"].upload-trigger::file-selector-button {
  border-color: rgba(178, 239, 255, 0.54);
  border-radius: 0.5rem;
  padding: 0.5rem 0.82rem;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.28), transparent 1.8rem),
    linear-gradient(135deg, rgba(38, 207, 255, 0.94), rgba(48, 102, 220, 0.88));
  color: #f9fdff;
  box-shadow: 0 0 0.95rem rgba(38, 207, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
}

body[data-mode="edit"] .authoring-rail input[type="file"].upload-trigger::file-selector-button:hover {
  filter: brightness(1.07);
}

body[data-mode="edit"] .authoring-rail .upload-status-row {
  border-color: rgba(137, 225, 255, 0.17);
  border-radius: 0.62rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent),
    rgba(0, 5, 12, 0.52);
}

body[data-mode="edit"] .authoring-rail .upload-status {
  color: rgba(180, 211, 231, 0.66);
  letter-spacing: 0.018em;
}

body[data-mode="edit"] .authoring-rail .upload-clear-btn {
  border-color: rgba(137, 225, 255, 0.25);
  background: linear-gradient(180deg, rgba(12, 34, 55, 0.88), rgba(2, 9, 19, 0.86));
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card {
  position: relative;
  isolation: isolate;
  min-height: 5.25rem;
  border-color: rgba(137, 225, 255, 0.2);
  border-radius: 0.82rem;
  padding: 0.88rem 0.96rem 0.88rem 3.15rem;
  background:
    linear-gradient(135deg, rgba(137, 225, 255, 0.09), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(10, 27, 45, 0.72), rgba(1, 7, 16, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0.8rem 1.9rem rgba(0, 0, 0, 0.25);
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card::before {
  content: "";
  position: absolute;
  left: 0.92rem;
  top: 0.95rem;
  width: 1.28rem;
  height: 1.28rem;
  border: 1px solid rgba(137, 225, 255, 0.36);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(1, 7, 16, 0.95) 0 26%, rgba(38, 207, 255, 0.72) 27% 32%, transparent 33%),
    conic-gradient(from 20deg, rgba(38, 207, 255, 0.58), rgba(61, 124, 255, 0.12), rgba(38, 207, 255, 0.58));
  box-shadow: 0 0 1.1rem rgba(38, 207, 255, 0.2);
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card::after {
  content: "Quarantined module";
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(137, 225, 255, 0.16);
  border-radius: 999px;
  padding: 0.18rem 0.46rem;
  background: rgba(1, 7, 16, 0.64);
  color: rgba(168, 232, 255, 0.72);
  font-size: 0.58rem;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card strong {
  color: rgba(247, 252, 255, 0.96);
  font-size: 0.86rem;
  letter-spacing: 0.015em;
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card span {
  color: rgba(215, 235, 249, 0.76);
}

body[data-mode="edit"] #previewReturnControls.mode-control-dock.preview-return {
  border-color: rgba(137, 225, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(9, 25, 43, 0.88), rgba(1, 7, 16, 0.78)),
    rgba(1, 7, 16, 0.72);
}

body[data-mode="edit"] #toggleModeBtn,
body[data-mode="edit"] #previewExitToEditBtn,
body[data-mode="edit"] #previewGoFinalBtn,
body[data-mode="edit"] #previewHeroBtn {
  border-color: rgba(178, 239, 255, 0.42);
  border-radius: 0.72rem;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.26), transparent 2rem),
    linear-gradient(135deg, rgba(38, 207, 255, 0.98), rgba(48, 102, 220, 0.92) 58%, rgba(123, 97, 255, 0.82));
  box-shadow:
    0 0.85rem 1.85rem rgba(0, 0, 0, 0.36),
    0 0 1.8rem rgba(38, 207, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(2, 8, 18, 0.28);
}

body[data-mode="edit"] #toggleModeBtn:hover,
body[data-mode="edit"] #previewExitToEditBtn:hover,
body[data-mode="edit"] #previewGoFinalBtn:hover,
body[data-mode="edit"] #previewHeroBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(222, 249, 255, 0.58);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.31), transparent 2rem),
    linear-gradient(135deg, rgba(56, 220, 255, 1), rgba(58, 119, 232, 0.94) 58%, rgba(139, 116, 255, 0.86));
  box-shadow:
    0 1rem 2.1rem rgba(0, 0, 0, 0.38),
    0 0 2.2rem rgba(38, 207, 255, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.27);
}

@media (prefers-reduced-motion: no-preference) {
  body[data-mode="edit"] .toolbar-chip,
  body[data-mode="edit"] .authoring-rail input,
  body[data-mode="edit"] .authoring-rail textarea,
  body[data-mode="edit"] .authoring-rail select,
  body[data-mode="edit"] .authoring-rail button,
  body[data-mode="edit"] #toggleModeBtn,
  body[data-mode="edit"] #previewExitToEditBtn,
  body[data-mode="edit"] #previewGoFinalBtn,
  body[data-mode="edit"] #previewHeroBtn {
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease, filter 160ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-mode="edit"] #toggleModeBtn:hover,
  body[data-mode="edit"] #previewExitToEditBtn:hover,
  body[data-mode="edit"] #previewGoFinalBtn:hover,
  body[data-mode="edit"] #previewHeroBtn:hover {
    transform: none;
  }
}

/* Dark music-tech Edit Mode palette
   Visual-only overrides: shifts authoring chrome away from blue admin styling while
   leaving artifact/media/finalize geometry and behavior untouched. */
:root {
  --bg: #050508;
  --panel: rgba(12, 12, 18, 0.88);
  --glass: rgba(18, 16, 24, 0.58);
  --line: rgba(255, 190, 96, 0.22);
  --text: #f4f0e8;
  --muted: #b7aca0;
  --accent: #ffb84d;
  --accent-hot: #ff4fd8;
  --accent-cool: #34d5ff;
  --ok: #76e39a;
  --danger: #ff6b8a;
  --studio-console-blue: var(--accent-cool);
  --studio-console-amber: var(--accent);
  --studio-console-magenta: var(--accent-hot);
  --studio-module: rgba(11, 10, 15, 0.9);
  --studio-module-top: rgba(23, 18, 25, 0.92);
}

body[data-mode="edit"] {
  background:
    radial-gradient(circle at 18% -12%, rgba(255, 184, 77, 0.22), transparent 30rem),
    radial-gradient(circle at 96% 12%, rgba(255, 79, 216, 0.13), transparent 23rem),
    radial-gradient(circle at 72% 32%, rgba(52, 213, 255, 0.055), transparent 14rem),
    linear-gradient(145deg, #050508 0%, #09070c 44%, #030305 100%);
  color: var(--text);
}

body[data-mode="edit"] .app-header {
  border-bottom-color: rgba(255, 190, 96, 0.2);
  background:
    linear-gradient(180deg, rgba(15, 12, 18, 0.96), rgba(7, 7, 11, 0.94)),
    rgba(5, 5, 8, 0.94);
  box-shadow:
    0 0.85rem 2rem rgba(0, 0, 0, 0.42),
    inset 0 -1px 0 rgba(255, 184, 77, 0.08);
}

body[data-mode="edit"] .editor-toolbar {
  border-color: rgba(255, 190, 96, 0.22);
  background:
    linear-gradient(90deg, rgba(255, 184, 77, 0.075), transparent 22%, rgba(255, 79, 216, 0.055) 78%, rgba(52, 213, 255, 0.045)),
    linear-gradient(180deg, rgba(23, 18, 25, 0.92), rgba(8, 8, 12, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.58),
    0 0.9rem 2.2rem rgba(0, 0, 0, 0.36),
    0 0 1.3rem rgba(255, 184, 77, 0.06);
}

body[data-mode="edit"] .editor-toolbar::before,
body[data-mode="edit"] .editor-toolbar::after {
  border-color: rgba(255, 190, 96, 0.28);
  box-shadow: 0 0 1rem rgba(255, 184, 77, 0.1);
}

body[data-mode="edit"] .mode-choice-header {
  background: rgba(7, 7, 11, 0.58);
}

body[data-mode="edit"] .toolbar-chip,
body[data-mode="edit"] .mode-choice-header label.toolbar-chip,
body[data-mode="edit"] .mode-choice-header .mode-toggle-button.toolbar-chip,
body[data-mode="edit"] .viewport-mode-toggle .mode-toggle-button.toolbar-chip {
  border-color: rgba(255, 190, 96, 0.2);
  background:
    linear-gradient(180deg, rgba(32, 25, 28, 0.88), rgba(8, 8, 12, 0.82)),
    rgba(10, 9, 14, 0.86);
  color: rgba(244, 240, 232, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.08),
    0 0.35rem 1rem rgba(0, 0, 0, 0.26);
}

body[data-mode="edit"] .toolbar-chip:hover,
body[data-mode="edit"] .mode-choice-header .mode-toggle-button.toolbar-chip:hover,
body[data-mode="edit"] .viewport-mode-toggle .mode-toggle-button.toolbar-chip:hover,
body[data-mode="edit"] .toolbar-chip:has(input:checked),
body[data-mode="edit"] .toolbar-chip.is-active,
body[data-mode="edit"] .mode-choice-header .mode-toggle-button.is-active,
body[data-mode="edit"] .viewport-mode-toggle .mode-toggle-button.is-active {
  border-color: rgba(255, 190, 96, 0.48);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 184, 77, 0.26), transparent 3rem),
    linear-gradient(180deg, rgba(54, 35, 24, 0.92), rgba(13, 10, 13, 0.88));
  color: #fff5de;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.16),
    0 0.55rem 1.25rem rgba(0, 0, 0, 0.3),
    0 0 1.1rem rgba(255, 184, 77, 0.16);
}

body[data-mode="edit"] .toolbar-chip:focus-within,
body[data-mode="edit"] .mode-choice-header .mode-toggle-button.toolbar-chip:focus-visible,
body[data-mode="edit"] .viewport-mode-toggle .mode-toggle-button.toolbar-chip:focus-visible {
  outline: 2px solid rgba(255, 184, 77, 0.88);
  outline-offset: 2px;
  border-color: rgba(255, 216, 142, 0.64);
  box-shadow:
    0 0 0 1px rgba(255, 184, 77, 0.28),
    0 0 1.35rem rgba(255, 184, 77, 0.2);
}

body[data-mode="edit"] .authoring-layer.panel.authoring-rail,
body[data-mode="edit"] .panel,
body[data-mode="edit"] .proof-layer,
body[data-mode="edit"] .preview-layer {
  border-color: rgba(255, 190, 96, 0.2);
  background:
    linear-gradient(180deg, rgba(22, 17, 23, 0.9), rgba(7, 7, 10, 0.88)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.012),
    0 1.25rem 4rem rgba(0, 0, 0, 0.48),
    0 0 2.8rem rgba(255, 184, 77, 0.045);
}

body[data-mode="edit"] .authoring-layer.panel.authoring-rail::before {
  background: linear-gradient(90deg, rgba(255, 184, 77, 0.8), rgba(255, 79, 216, 0.44), rgba(52, 213, 255, 0.24));
  box-shadow: 0 0 1.2rem rgba(255, 184, 77, 0.2);
}

body[data-mode="edit"] .eyebrow,
body[data-mode="edit"] .layer-label,
body[data-mode="edit"] .authoring-rail .card-title-inline,
body[data-mode="edit"] .authoring-rail legend,
body[data-mode="edit"] .authoring-rail #plusChoices summary {
  color: var(--accent);
}

body[data-mode="edit"] .authoring-rail > h2,
body[data-mode="edit"] .authoring-rail h3 {
  color: var(--text);
}

body[data-mode="edit"] .header-note,
body[data-mode="edit"] .panel-copy,
body[data-mode="edit"] .hint,
body[data-mode="edit"] .authoring-rail label,
body[data-mode="edit"] .authoring-rail .type-overlay-label {
  color: var(--muted);
}

body[data-mode="edit"] .authoring-rail .authoring-card,
body[data-mode="edit"] .authoring-rail #plusChoices.plus-choices,
body[data-mode="edit"] .authoring-rail fieldset,
body[data-mode="edit"] .proof-layer,
body[data-mode="edit"] .preview-layer {
  border-color: rgba(255, 190, 96, 0.18);
  background:
    linear-gradient(180deg, rgba(31, 24, 28, 0.6), rgba(8, 7, 11, 0.66)),
    rgba(12, 10, 15, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.055),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 0.7rem 1.7rem rgba(0, 0, 0, 0.28);
}

body[data-mode="edit"] .authoring-rail .authoring-card::before,
body[data-mode="edit"] .authoring-rail #plusChoices.plus-choices::before {
  background: linear-gradient(180deg, rgba(255, 184, 77, 0.75), rgba(255, 79, 216, 0.25));
  box-shadow: 0 0 1rem rgba(255, 184, 77, 0.16);
}

body[data-mode="edit"] .authoring-rail .required-card {
  border-color: color-mix(in srgb, var(--danger) 46%, rgba(255, 190, 96, 0.2));
  background:
    linear-gradient(180deg, rgba(255, 107, 138, 0.1), rgba(8, 7, 11, 0.68)),
    rgba(13, 10, 14, 0.72);
}

body[data-mode="edit"] .authoring-rail .required-card[data-required-complete="true"] {
  border-color: color-mix(in srgb, var(--ok) 42%, rgba(255, 190, 96, 0.18));
  background:
    linear-gradient(180deg, rgba(118, 227, 154, 0.085), rgba(8, 7, 11, 0.68)),
    rgba(13, 10, 14, 0.72);
}

body[data-mode="edit"] .authoring-rail .card-title-inline::after {
  background: linear-gradient(90deg, rgba(255, 184, 77, 0.58), rgba(255, 79, 216, 0.22), transparent);
}

body[data-mode="edit"] .media-group-title {
  border-top-color: rgba(255, 190, 96, 0.16);
  color: rgba(244, 240, 232, 0.86);
}

body[data-mode="edit"] .authoring-rail input:not([type="checkbox"]):not([type="radio"]),
body[data-mode="edit"] .authoring-rail textarea,
body[data-mode="edit"] .authoring-rail select,
body[data-mode="edit"] .type-overlay-label select {
  border-color: rgba(255, 190, 96, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    linear-gradient(90deg, rgba(255, 184, 77, 0.05), transparent 38%),
    rgba(6, 6, 10, 0.88);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.055),
    inset 0 -1px 0 rgba(255, 184, 77, 0.032),
    0 0.45rem 1.1rem rgba(0, 0, 0, 0.22);
}

body[data-mode="edit"] .authoring-rail input:not([type="checkbox"]):not([type="radio"]):hover,
body[data-mode="edit"] .authoring-rail textarea:hover,
body[data-mode="edit"] .authoring-rail select:hover,
body[data-mode="edit"] .type-overlay-label select:hover {
  border-color: rgba(255, 190, 96, 0.34);
}

body[data-mode="edit"] .authoring-rail input:focus-visible,
body[data-mode="edit"] .authoring-rail textarea:focus-visible,
body[data-mode="edit"] .authoring-rail select:focus-visible,
body[data-mode="edit"] .type-overlay-label select:focus-visible,
body[data-mode="edit"] button:focus-visible,
body[data-mode="edit"] a:focus-visible {
  border-color: rgba(255, 216, 142, 0.72);
  outline: 2px solid rgba(255, 184, 77, 0.9);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 184, 77, 0.3),
    0 0 1.35rem rgba(255, 184, 77, 0.2),
    0 0 0.55rem rgba(255, 79, 216, 0.08),
    inset 0 1px 0 rgba(255, 232, 194, 0.085);
}

body[data-mode="edit"] .authoring-rail input::placeholder,
body[data-mode="edit"] .authoring-rail textarea::placeholder {
  color: rgba(183, 172, 160, 0.66);
}

body[data-mode="edit"] .authoring-rail .upload-field-label {
  color: rgba(244, 218, 181, 0.92);
}

body[data-mode="edit"] .authoring-rail .upload-field-label::before {
  background: var(--accent);
  box-shadow:
    0 0 0.8rem rgba(255, 184, 77, 0.54),
    0 0 0 3px rgba(255, 184, 77, 0.11);
}

body[data-mode="edit"] .authoring-rail input[type="file"].upload-trigger {
  min-height: 3.2rem;
  border-color: rgba(255, 190, 96, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 184, 77, 0.13), transparent 35%),
    radial-gradient(circle at 96% 0%, rgba(255, 79, 216, 0.1), transparent 8rem),
    linear-gradient(180deg, rgba(24, 19, 24, 0.92), rgba(7, 7, 11, 0.88));
  color: rgba(244, 240, 232, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018),
    0 0.65rem 1.7rem rgba(0, 0, 0, 0.31);
}

body[data-mode="edit"] .authoring-rail input[type="file"].upload-trigger:hover,
body[data-mode="edit"] .authoring-rail input[type="file"].upload-trigger:focus-visible {
  border-color: rgba(255, 190, 96, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.1),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.32),
    0 0 1.35rem rgba(255, 184, 77, 0.17);
}

body[data-mode="edit"] .authoring-rail input[type="file"].upload-trigger::file-selector-button {
  border-color: rgba(255, 216, 142, 0.5);
  border-radius: 0.5rem;
  padding: 0.5rem 0.82rem;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.28), transparent 1.8rem),
    linear-gradient(135deg, #ffbf5f, #b96b23 58%, #4f2818);
  color: #181008;
  box-shadow:
    0 0 0.95rem rgba(255, 184, 77, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
}

body[data-mode="edit"] .authoring-rail .upload-status-row {
  border-color: rgba(255, 190, 96, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent),
    rgba(4, 4, 7, 0.58);
}

body[data-mode="edit"] .authoring-rail .upload-status {
  color: rgba(183, 172, 160, 0.76);
}

body[data-mode="edit"] .authoring-rail .upload-clear-btn {
  border-color: rgba(255, 190, 96, 0.24);
  background: linear-gradient(180deg, rgba(30, 23, 25, 0.9), rgba(7, 7, 11, 0.88));
  color: var(--text);
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card {
  position: relative;
  isolation: isolate;
  border-color: rgba(255, 190, 96, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 184, 77, 0.11), transparent 34%),
    radial-gradient(circle at 96% 0%, rgba(255, 79, 216, 0.085), transparent 8rem),
    repeating-linear-gradient(135deg, rgba(255, 190, 96, 0.045) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(24, 19, 24, 0.82), rgba(5, 5, 8, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.012),
    0 0.8rem 1.9rem rgba(0, 0, 0, 0.32),
    0 0 1.2rem rgba(255, 184, 77, 0.08);
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card::before {
  border-color: rgba(255, 190, 96, 0.42);
  background:
    radial-gradient(circle, rgba(5, 5, 8, 0.96) 0 26%, rgba(255, 184, 77, 0.8) 27% 32%, transparent 33%),
    conic-gradient(from 20deg, rgba(255, 184, 77, 0.68), rgba(255, 79, 216, 0.2), rgba(52, 213, 255, 0.18), rgba(255, 184, 77, 0.68));
  box-shadow: 0 0 1.1rem rgba(255, 184, 77, 0.18);
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card::after {
  border-color: rgba(255, 190, 96, 0.18);
  background: rgba(5, 5, 8, 0.7);
  color: rgba(255, 216, 142, 0.78);
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card strong {
  color: #fff2d0;
}

body[data-mode="edit"] .authoring-rail .upload-coming-soon-card span {
  color: rgba(244, 240, 232, 0.76);
}

body[data-mode="edit"] button.primary,
body[data-mode="edit"] .btn-primary,
body[data-mode="edit"] #toggleModeBtn,
body[data-mode="edit"] #previewExitToEditBtn,
body[data-mode="edit"] #previewGoFinalBtn,
body[data-mode="edit"] #previewHeroBtn {
  border-color: rgba(255, 216, 142, 0.46);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.28), transparent 2rem),
    linear-gradient(135deg, #ffbf5f, #b96b23 58%, #4b2418 100%);
  color: #160f08;
  box-shadow:
    0 0.85rem 1.85rem rgba(0, 0, 0, 0.38),
    0 0 1.6rem rgba(255, 184, 77, 0.16),
    0 0 0.9rem rgba(255, 79, 216, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.27),
    inset 0 -1px 0 rgba(68, 25, 10, 0.34);
}

body[data-mode="edit"] button.primary:hover,
body[data-mode="edit"] .btn-primary:hover,
body[data-mode="edit"] #toggleModeBtn:hover,
body[data-mode="edit"] #previewExitToEditBtn:hover,
body[data-mode="edit"] #previewGoFinalBtn:hover,
body[data-mode="edit"] #previewHeroBtn:hover {
  border-color: rgba(255, 232, 194, 0.64);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.32), transparent 2rem),
    linear-gradient(135deg, #ffd27a, #c9792b 58%, #6d2c30 100%);
  box-shadow:
    0 1rem 2.1rem rgba(0, 0, 0, 0.4),
    0 0 2rem rgba(255, 184, 77, 0.22),
    0 0 1.2rem rgba(255, 79, 216, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body[data-mode="edit"] .preview-layer .artifact-card {
  border: 1px solid rgba(255, 190, 96, 0.2);
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 184, 77, 0.16), transparent 17rem),
    radial-gradient(circle at 92% 4%, rgba(255, 79, 216, 0.1), transparent 15rem),
    linear-gradient(160deg, rgba(11, 10, 15, 0.96), rgba(22, 16, 24, 0.84));
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.06),
    0 1.2rem 3.2rem rgba(0, 0, 0, 0.45),
    0 0 2rem rgba(255, 184, 77, 0.08);
}

body[data-mode="edit"] .artifact-card[data-video-owned="true"],
body[data-mode="edit"] .artifact-card[data-image-owned="true"] {
  background: #050508;
}

body[data-mode="edit"] .hero-preview,
body[data-mode="edit"] .artifact-info-panel,
body[data-mode="edit"] .audio-preview-shell {
  border-color: rgba(255, 190, 96, 0.18);
  background: rgba(10, 9, 13, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 232, 194, 0.05);
}

body[data-mode="edit"] .record-disc {
  border-color: #191319;
  box-shadow:
    0 0 3rem rgba(255, 184, 77, 0.09),
    0 0 1rem rgba(52, 213, 255, 0.035);
}

body[data-mode="edit"] #statusOutput.ok,
body[data-mode="edit"] code {
  color: var(--ok);
}

body[data-mode="edit"] #statusOutput.error {
  color: var(--danger);
}

body[data-mode="edit"] #previewReturnControls.mode-control-dock.preview-return {
  border-color: rgba(255, 190, 96, 0.28);
  background:
    linear-gradient(180deg, rgba(23, 18, 25, 0.9), rgba(7, 7, 11, 0.84)),
    rgba(5, 5, 8, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.08),
    0 0.9rem 2rem rgba(0, 0, 0, 0.36),
    0 0 1.5rem rgba(255, 184, 77, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  body[data-mode="edit"] *,
  body[data-mode="edit"] *::before,
  body[data-mode="edit"] *::after {
    scroll-behavior: auto;
  }
}

/* Compact Card 1 vinyl-surface placeholder: keep the paused feature visible without taking upload-card real estate. */
body[data-mode="edit"] .authoring-rail #vinylUploadComingSoon.upload-coming-soon-card {
  display: block;
  min-height: 0;
  margin-top: 0.34rem;
  border-color: rgba(255, 190, 96, 0.16);
  border-radius: 999px;
  padding: 0.24rem 0.58rem;
  background: rgba(5, 5, 8, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 232, 194, 0.055);
}

body[data-mode="edit"] .authoring-rail #vinylUploadComingSoon.upload-coming-soon-card::before,
body[data-mode="edit"] .authoring-rail #vinylUploadComingSoon.upload-coming-soon-card::after {
  content: none;
  display: none;
}

body[data-mode="edit"] .authoring-rail #vinylUploadComingSoon.upload-coming-soon-card strong {
  display: block;
  color: rgba(255, 242, 208, 0.82);
  font-size: 0.68rem;
  font-weight: 680;
  letter-spacing: 0.012em;
  line-height: 1.12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A2A Tier 2 center-lane law: Edit must use the same public top/middle/bottom lane chain that Preview and Final export preserve. */
body[data-mode="edit"] #artifactPreview .artifact-content-stack[data-tier2-center-lane-authority="edit-preview-final"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(max-content, 25svh) minmax(var(--edit-record-min-height, var(--artifact-record-min-height)), 1fr) auto !important;
  align-content: stretch !important;
  justify-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

body[data-mode="edit"] #artifactLogoBadge[data-lane="top"],
body[data-mode="edit"] #heroPreview[data-lane="top"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}

body[data-mode="edit"] #vinylVideo.record-preview[data-lane="middle"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
}

body[data-mode="edit"] .interface-rail[data-lane="bottom"] {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: center !important;
}