:root {
  color-scheme: dark;
  --bg: #100a07;
  --panel: #21130d;
  --panel-deep: #170e0a;
  --line: #55301f;
  --ink: #fff8e8;
  --muted: #b6a08e;
  --red: #ff3d21;
  --red-deep: #aa190d;
  --gold: #ffb72f;
  --gold-soft: #ffe09a;
  --blue: #1677ff;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; padding-bottom: 168px; overflow-x: hidden; background: var(--bg); color: var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 86% 4%, rgba(255,61,33,.23), transparent 27%), radial-gradient(circle at 7% 62%, rgba(255,183,47,.1), transparent 25%), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: auto, auto, 28px 28px, 28px 28px; }

.topbar { position: relative; z-index: 5; width: min(1180px, calc(100% - 40px)); height: 72px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ff765e; border-radius: 10px 10px 10px 3px; background: linear-gradient(145deg, #ff5a3f, #d31d0e); color: white; font: 900 21px SimHei, sans-serif; box-shadow: 0 8px 24px rgba(255,61,33,.32); transform: rotate(-3deg); }
.brand-copy { display: grid; gap: 2px; }.brand-copy b { font-size: 16px; letter-spacing: .06em; }.brand-copy small { color: #8d7666; font-size: 9px; letter-spacing: .18em; }
.orders-button { padding: 9px 13px; border: 1px solid #62402d; border-radius: 9px; background: rgba(25,14,9,.68); color: #d9bfa8; cursor: pointer; font-size: 12px; font-weight: 700; }
.scene-ticker { position: relative; z-index: 4; overflow: hidden; border-top: 1px solid #672315; border-bottom: 1px solid #672315; background: linear-gradient(90deg, #7d170d, #c62916 50%, #7d170d); box-shadow: 0 8px 25px rgba(103,25,13,.22); }
.scene-ticker > div { min-width: max-content; height: 31px; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 0 24px; color: #ffe1b0; font-size: 11px; font-weight: 800; letter-spacing: .16em; }.scene-ticker i { color: var(--gold); font-style: normal; }

.workspace { position: relative; z-index: 2; width: min(1180px, calc(100% - 40px)); margin: 28px auto; display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; }
.creator-card, .preview-card { position: relative; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(40,22,14,.98), rgba(20,12,8,.99)); box-shadow: 0 26px 90px rgba(0,0,0,.34); }
.creator-card { padding: 32px; overflow: hidden; }.creator-card::after { content: ""; position: absolute; right: -80px; bottom: -100px; width: 240px; height: 240px; border: 1px solid rgba(255,183,47,.12); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255,183,47,.025), 0 0 0 55px rgba(255,183,47,.018); pointer-events: none; }
.workshop-tag { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #743021; border-radius: 6px; background: #2a120c; color: #e99d80; font-size: 10px; font-weight: 800; letter-spacing: .16em; }.workshop-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 9px var(--red); }
.intro-row, .preview-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.intro-row { margin-top: 19px; }.eyebrow { margin: 0 0 9px; color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .21em; }
h1 { margin: 0; font: 900 clamp(41px, 5.3vw, 70px)/.98 SimHei, "Microsoft YaHei", sans-serif; letter-spacing: -.065em; text-shadow: 0 4px 28px rgba(0,0,0,.3); }h1 em { color: var(--gold); font-style: normal; -webkit-text-stroke: 1px rgba(255,255,255,.12); }
.hero-copy { margin: 18px 0 0; color: #c2aa97; font-size: 13px; line-height: 1.75; }
.duration-stamp { flex: 0 0 78px; width: 78px; height: 78px; display: grid; place-content: center; border: 1px dashed rgba(255,183,47,.72); border-radius: 50%; color: var(--gold); text-align: center; transform: rotate(8deg); background: rgba(255,183,47,.05); }.duration-stamp b { font-size: 28px; line-height: .85; }.duration-stamp span { margin-top: 5px; font-size: 10px; }
.promise-row { position: relative; z-index: 1; margin: 25px 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #4d2a1b; border-radius: 12px; background: #160c08; overflow: hidden; }.promise-row span { min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #bda590; font-size: 11px; font-weight: 700; }.promise-row span + span { border-left: 1px solid #4d2a1b; }.promise-row b { color: var(--gold); font: 800 10px monospace; }
.field-block { position: relative; z-index: 1; }.field-block label { display: block; margin-bottom: 9px; color: #ead7c4; font-size: 13px; font-weight: 800; }
.name-input-wrap { position: relative; }.name-input-wrap input { width: 100%; height: 64px; padding: 0 75px 0 18px; border: 1px solid #6e4630; border-radius: 13px; outline: none; background: #110a07; color: white; font-size: 24px; font-weight: 900; transition: .18s ease; }.name-input-wrap input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,183,47,.1); }.name-input-wrap span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #786253; font-size: 11px; }.field-block p { margin: 8px 0 0; color: #866f5f; font-size: 11px; }
.preview-card { min-height: 600px; padding: 31px; overflow: hidden; }.preview-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 28%, rgba(255,61,33,.06), transparent 65%); pointer-events: none; }.stage-lights { position: absolute; left: 0; right: 0; top: 0; height: 10px; display: flex; justify-content: space-around; padding: 0 10%; background: #100a07; }.stage-lights i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px 3px rgba(255,183,47,.5); }.stage-lights i:nth-child(2n) { background: var(--red); box-shadow: 0 0 14px 3px rgba(255,61,33,.5); }
.preview-card h2 { margin: 0; font-size: 26px; }.live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #6a3020; border-radius: 999px; color: #f0a18e; font-size: 10px; font-weight: 800; }.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 9px var(--red); }
.waveform { height: 55px; margin: 28px 0 20px; display: flex; align-items: center; justify-content: center; gap: 6px; }.waveform i { width: 4px; height: 22%; border-radius: 4px; background: var(--red); opacity: .86; }.waveform i:nth-child(2n) { height: 66%; }.waveform i:nth-child(3n) { height: 38%; }.waveform i:nth-child(5n) { height: 90%; background: var(--gold); }
.lyrics-board { position: relative; min-height: 325px; padding: 28px 26px 54px; border: 1px solid #5b3525; border-radius: 6px 18px 18px 18px; background: linear-gradient(150deg, #24140d, #140b08); box-shadow: inset 0 0 50px rgba(0,0,0,.25); overflow: hidden; }.board-corner { position: absolute; top: 0; left: 0; width: 34px; height: 34px; display: grid; place-items: center; background: var(--red); color: white; font: 900 15px SimHei, sans-serif; }.lyrics { white-space: pre-line; color: #f0dfce; font-size: 16px; line-height: 2; letter-spacing: .025em; }.name-highlight { padding: 0 .08em; border-bottom: 1px solid rgba(255,183,47,.65); background: linear-gradient(180deg, transparent 55%, rgba(255,61,33,.28) 55%); color: #ffd36f; font-weight: 900; text-shadow: 0 0 14px rgba(255,90,35,.35); }.lyrics-fade { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 20px 15px; background: linear-gradient(transparent, #140b08 48%); color: #a0806b; text-align: center; font-size: 10px; letter-spacing: .06em; }
.mix-note { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; }.mix-note > span { padding: 6px 8px; border: 1px solid #6d4831; border-radius: 5px; color: var(--gold); font: 800 9px monospace; }.mix-note p { margin: 0; color: #806b5c; font-size: 10px; }.mix-note b { color: #c7aa93; }

.checkout { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; border-top: 1px solid #6a2c1c; background: rgba(19,10,7,.94); backdrop-filter: blur(20px); box-shadow: 0 -16px 50px rgba(0,0,0,.42); padding: 15px max(20px, env(safe-area-inset-right)) calc(11px + env(safe-area-inset-bottom)); }.checkout::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--red), var(--gold), var(--red), transparent); }
.checkout-inner { width: min(1180px, 100%); margin: auto; display: grid; grid-template-columns: 150px minmax(210px, 320px) 1fr; gap: 17px; align-items: center; }.price span, .price strong { display: block; }.price span { color: var(--muted); font-size: 10px; }.price strong { margin-top: 1px; font-size: 31px; }.price small { margin-right: 2px; color: var(--gold); font-size: 15px; }.checkout-promise { display: grid; gap: 2px; padding-left: 16px; border-left: 1px solid #4f2d20; }.checkout-promise b { color: var(--gold-soft); font-size: 12px; }.checkout-promise span { color: #8c7565; font-size: 10px; }.primary-action, .pay-action { height: 54px; border: 0; border-radius: 12px; background: linear-gradient(100deg, #ff3d21, #f26e20); color: white; cursor: pointer; font-size: 15px; font-weight: 900; box-shadow: 0 13px 32px rgba(255,61,33,.27); transition: .18s ease; }.primary-action:hover, .pay-action:hover { transform: translateY(-1px); filter: brightness(1.08); }.primary-action:disabled, .pay-action:disabled { cursor: wait; opacity: .65; transform: none; }.primary-action span, .pay-action span { margin-left: 8px; }.assurance { width: min(1180px, 100%); margin: 7px auto 0; color: #705a4c; text-align: right; font-size: 9px; letter-spacing: .06em; }

.draft-overlay, .order-overlay { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8,4,2,.82); backdrop-filter: blur(12px); }.draft-overlay[hidden], .order-overlay[hidden] { display: none; }.sheet-open { overflow: hidden; }.draft-sheet, .order-sheet { position: relative; width: min(590px, 100%); max-height: min(820px, calc(100vh - 40px)); overflow: auto; border: 1px solid #75432c; border-radius: 23px; background: linear-gradient(155deg, #2a170f, #140b08 72%); box-shadow: 0 34px 110px rgba(0,0,0,.62); }.draft-sheet { padding: 28px; }.sheet-close { position: absolute; z-index: 2; top: 13px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: #c8aa95; cursor: pointer; font-size: 24px; }.draft-topline { display: flex; align-items: center; gap: 12px; padding-right: 35px; }.red-seal { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #ff806a; border-radius: 10px 10px 10px 3px; background: var(--red); font: 900 22px SimHei, sans-serif; }.draft-topline p { flex: 1; margin: 0; display: grid; gap: 2px; }.draft-topline small { color: #9e806b; font-size: 9px; letter-spacing: .16em; }.draft-topline b { font-size: 19px; }.revision-badge { padding: 7px 9px; border: 1px solid #7d5832; border-radius: 999px; background: rgba(255,183,47,.07); color: var(--gold); font-size: 9px; white-space: nowrap; }
.full-lyrics { margin-top: 19px; padding: 22px 20px; white-space: pre-line; border: 1px solid #68422e; border-radius: 13px; background: #120a07; color: #f3dfcb; font-size: 14px; line-height: 1.92; }.revision-area { margin-top: 15px; padding: 14px; border: 1px dashed #65402d; border-radius: 12px; background: rgba(255,255,255,.018); }.revision-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.revision-heading b { font-size: 12px; }.revision-heading span { color: #8d7462; font-size: 9px; }.revision-editor { margin-top: 10px; overflow: hidden; border: 1px solid #68422f; border-radius: 11px; background: #120a07; transition: border-color .18s ease, box-shadow .18s ease; }.revision-editor:focus-within { border-color: #c98c35; box-shadow: 0 0 0 3px rgba(255,183,47,.08); }.revision-editor textarea { width: 100%; min-height: 74px; resize: none; border: 0; outline: 0; background: transparent; padding: 12px 13px 7px; color: #f0d8c1; font: inherit; font-size: 12px; line-height: 1.65; }.revision-editor textarea::placeholder { color: #765f50; }.revision-editor textarea:disabled { opacity: .55; }.revision-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 8px 8px 13px; border-top: 1px solid #40271d; }.revision-editor-footer > span { color: #796456; font-size: 9px; }.revision-editor-footer button { min-height: 39px; padding: 0 15px; border: 1px solid #c68832; border-radius: 9px; background: linear-gradient(100deg, #4a2b13, #7b4619); color: #fff0cc; cursor: pointer; font-size: 10px; font-weight: 900; }.revision-editor-footer button:hover { border-color: var(--gold); filter: brightness(1.08); }.revision-editor-footer button span { margin-left: 5px; }.revision-editor-footer button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.confirm-draft-area { margin-top: 16px; }.confirm-draft-action { width: 100%; height: 50px; border: 1px solid #e4b350; border-radius: 11px; background: linear-gradient(100deg, #4a2b13, #7b4619); color: #fff0cc; cursor: pointer; font-size: 13px; font-weight: 900; box-shadow: 0 11px 28px rgba(0,0,0,.2); }.confirm-draft-action:hover { border-color: var(--gold); filter: brightness(1.08); }.confirm-draft-action span { margin-left: 8px; }.confirm-draft-area[hidden], .pay-after-copy[hidden] { display: none; }.pay-after-copy { margin-top: 16px; padding: 17px; border: 1px solid #8b3c25; border-radius: 14px; background: linear-gradient(145deg, rgba(136,35,18,.22), rgba(255,183,47,.04)); }.pay-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.pay-heading > div { display: grid; gap: 3px; }.pay-heading small { color: #a18470; font-size: 9px; }.pay-heading b { font-size: 14px; }.pay-heading > strong { font-size: 25px; color: #fff3d6; }.pay-heading > strong small { color: var(--gold); font-size: 13px; }.payment-choice { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.pay-option { height: 43px; border: 1px solid #63402e; border-radius: 10px; background: #170d09; cursor: pointer; font-size: 11px; font-weight: 800; }.pay-option.active { border-color: #e3c19f; background: #342016; }.wechat-dot, .alipay-dot { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-right: 6px; border-radius: 6px; color: white; font-size: 10px; }.wechat-dot { background: var(--gold); color: #2a1600; }.alipay-dot { background: var(--blue); }.pay-action { width: 100%; height: 49px; margin-top: 9px; font-size: 13px; }.pay-after-copy > p { margin: 9px 0 0; color: #816b5d; text-align: center; font-size: 9px; }

.order-sheet { padding: 34px; text-align: center; }.status-orb { position: relative; width: 76px; height: 76px; margin: 0 auto 19px; display: grid; place-items: center; border: 1px solid rgba(255,183,47,.58); border-radius: 50%; background: rgba(255,183,47,.08); color: var(--gold); font: 900 27px SimHei, sans-serif; box-shadow: 0 0 50px rgba(255,183,47,.12); }.status-orb span { position: relative; z-index: 1; }.status-generating::before { content: ""; position: absolute; inset: -9px; border: 1px dashed rgba(255,183,47,.48); border-radius: inherit; animation: orbSpin 7s linear infinite; }.status-generating::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(255,61,33,.42); border-radius: inherit; animation: orbEcho 1.8s ease-out infinite; }.status-generating span { animation: pulse 1.25s ease-in-out infinite; }.status-completed { border-color: rgba(255,183,47,.64); background: rgba(255,183,47,.1); color: var(--gold); }.status-failed { border-color: rgba(255,61,33,.6); color: var(--red); }@keyframes pulse { 50% { transform: scale(1.18); opacity: .55; } }@keyframes orbSpin { to { transform: rotate(360deg); } }@keyframes orbEcho { 70%, 100% { transform: scale(1.35); opacity: 0; } }.order-sheet .eyebrow { margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.order-sheet h2 { margin: 0; font-size: 28px; }.order-message { margin: 10px auto 0; max-width: 430px; color: var(--muted); font-size: 12px; line-height: 1.7; }.generation-stage { position: relative; margin: 23px 0 5px; padding: 18px 18px 14px; overflow: hidden; border: 1px solid rgba(129,76,45,.72); border-radius: 15px; background: radial-gradient(circle at 50% 0, rgba(255,61,33,.1), transparent 48%), #120a07; box-shadow: inset 0 1px rgba(255,255,255,.025); }.generation-stage[hidden] { display: none; }.mix-wave { height: 47px; display: flex; align-items: center; justify-content: center; gap: 5px; }.mix-wave i { width: 3px; height: 22%; border-radius: 999px; background: linear-gradient(180deg, var(--gold), var(--red)); box-shadow: 0 0 8px rgba(255,99,33,.26); animation: mixBeat .72s ease-in-out infinite alternate; }.mix-wave i:nth-child(2n) { animation-delay: -.2s; }.mix-wave i:nth-child(3n) { animation-delay: -.4s; }.mix-wave i:nth-child(4n) { animation-delay: -.58s; }.mix-wave i:nth-child(5n) { height: 55%; }.mix-wave i:nth-child(7n) { height: 82%; }.generation-copy { margin-top: 7px; display: grid; gap: 5px; }.generation-copy > span { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #9b7c68; font-size: 9px; font-weight: 800; letter-spacing: .16em; }.generation-copy > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: liveBlink 1.1s ease-in-out infinite; }.generation-copy b { min-height: 20px; color: #f2d8c0; font-size: 12px; letter-spacing: .03em; }.generation-copy b.phase-enter { animation: phaseEnter .32s ease-out both; }.generation-rail { height: 3px; margin-top: 14px; overflow: hidden; border-radius: 3px; background: #3d2419; }.generation-rail i { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--red) 24%, var(--gold) 72%, transparent); animation: generationRoam 1.9s ease-in-out infinite; }.generation-meta { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #745e50; font-size: 9px; }.generation-meta span:first-child { color: #a88b76; font-variant-numeric: tabular-nums; }.progress-track { position: relative; margin: 24px 0 27px; display: grid; grid-template-columns: repeat(4, 1fr); }.progress-track::before { content: ""; position: absolute; z-index: 0; top: 7px; left: 12.5%; right: 12.5%; height: 1px; background: #5c3b2a; }.progress-track span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; color: #776052; font-size: 9px; }.progress-track i { width: 15px; height: 15px; border: 3px solid #1a0f0b; border-radius: 50%; background: #5c3b2a; }.progress-track .done { color: #d9bca4; }.progress-track .done i { background: var(--gold); box-shadow: 0 0 12px rgba(255,183,47,.4); }.status-generating ~ .progress-track span:nth-child(3) i { animation: currentStep 1.2s ease-in-out infinite; }.result-player { padding: 15px; border: 1px solid #5d3b2a; border-radius: 13px; background: #100906; }.result-player[hidden] { display: none; }.result-player audio { width: 100%; height: 42px; }.download-button { display: inline-block; margin-top: 11px; padding: 10px 18px; border-radius: 9px; background: linear-gradient(100deg, var(--gold), #f58b24); color: #2a1600; text-decoration: none; font-size: 11px; font-weight: 900; }.order-lyrics { margin-top: 17px; border-top: 1px solid #543323; border-bottom: 1px solid #543323; text-align: left; }.order-lyrics summary { padding: 13px 2px; color: #cfb49f; cursor: pointer; font-size: 11px; }.order-lyrics p { margin: 0; padding: 0 2px 15px; white-space: pre-line; color: #978071; font-size: 11px; line-height: 1.9; }.retry-action { width: 100%; margin-top: 17px; padding: 12px 18px; border: 1px solid #b84d27; border-radius: 9px; background: linear-gradient(135deg,#9d301a,#d55228); color: #fff4e8; cursor: pointer; font-size: 12px; font-weight: 900; }.retry-action[hidden] { display: none; }.retry-action:disabled { opacity: .6; cursor: wait; }.secondary-action { margin-top: 17px; padding: 10px 18px; border: 1px solid #65422f; border-radius: 9px; background: transparent; color: #c4a890; cursor: pointer; font-size: 11px; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 174px; transform: translate(-50%, 15px); max-width: calc(100% - 30px); padding: 11px 16px; border: 1px solid #724631; border-radius: 10px; background: #301910; color: #fff0dc; font-size: 12px; opacity: 0; pointer-events: none; transition: .2s ease; white-space: nowrap; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* The landing page is one continuous creation surface, with one primary action. */
body { padding-bottom: 112px; }.topbar { width: min(980px, calc(100% - 40px)); }
.workspace { width: min(980px, calc(100% - 40px)); margin: 30px auto; grid-template-columns: .84fr 1.16fr; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, rgba(40,22,14,.98), rgba(20,12,8,.99)); box-shadow: 0 26px 90px rgba(0,0,0,.34); }
.creator-card, .preview-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }.creator-card { padding: 46px 40px; display: flex; flex-direction: column; justify-content: center; }.creator-card::after, .preview-card::before { display: none; }.intro-row { margin-top: 0; }.hero-copy { max-width: 330px; margin-top: 16px; }.field-block { margin-top: 34px; }
.preview-card { min-height: 460px; padding: 36px; border-left: 1px solid #4f2f21; background: rgba(12,7,5,.2); }.waveform { height: 38px; margin: 16px 0 12px; }.lyrics-board { min-height: 280px; }.sample-pill { padding: 6px 9px; border: 1px solid #664331; border-radius: 999px; color: #a98d78; font-size: 9px; font-weight: 800; white-space: nowrap; }.sample-board { padding-top: 35px; background: linear-gradient(150deg, #24140d, #140b08); }#lyrics-preview { height: 100%; min-height: 0; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); white-space: normal; }.sample-line { position: relative; display: flex; align-items: center; min-height: 0; padding: 6px 0 6px 14px; border-bottom: 1px dashed rgba(128,85,58,.24); }.sample-line:last-child { border-bottom: 0; }.sample-line::before { content: ""; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--red); box-shadow: 0 0 7px rgba(255,61,33,.55); }
.checkout { padding: 12px 20px calc(10px + env(safe-area-inset-bottom)); }.checkout-inner { width: min(560px, 100%); display: block; }.price, .checkout-promise { display: none; }.primary-action { width: 100%; }.assurance { width: min(560px, 100%); margin-top: 6px; text-align: center; }

/* Motion keeps the writing-first funnel feeling alive without revealing price early. */
.stage-lights i { animation: stageSpark 2.4s ease-in-out infinite; }.stage-lights i:nth-child(2n) { animation-delay: -.9s; }.stage-lights i:nth-child(3n) { animation-delay: -1.6s; }
.waveform i { transform-origin: center; animation: soundBar .82s ease-in-out infinite alternate; }.waveform i:nth-child(2n) { animation-delay: -.35s; }.waveform i:nth-child(3n) { animation-delay: -.62s; }.waveform i:nth-child(5n) { animation-delay: -.18s; }
.primary-action { position: relative; overflow: hidden; }.primary-action::after { content: ""; position: absolute; inset: -60% auto -60% -35%; width: 22%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: buttonSweep 3.1s ease-in-out infinite; pointer-events: none; }

.writing-overlay { position: fixed; z-index: 45; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 42%, rgba(122,35,20,.22), transparent 40%), rgba(8,4,2,.9); backdrop-filter: blur(14px); }.writing-overlay[hidden] { display: none; }.writing-stage { width: min(430px, 100%); padding: 38px 30px 32px; border: 1px solid #75432c; border-radius: 22px; background: linear-gradient(155deg, #2a170f, #140b08 72%); box-shadow: 0 34px 110px rgba(0,0,0,.7); text-align: center; animation: stageEnter .3s ease-out both; }.writing-seal { position: relative; width: 86px; height: 86px; margin: 0 auto 22px; display: grid; place-items: center; border: 1px solid rgba(255,183,47,.55); border-radius: 50%; background: rgba(255,61,33,.08); color: var(--gold); box-shadow: 0 0 0 10px rgba(255,61,33,.025), 0 0 55px rgba(255,61,33,.2); }.writing-seal::before, .writing-seal::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(255,183,47,.35); border-radius: inherit; animation: soundRing 1.8s ease-out infinite; }.writing-seal::after { animation-delay: -.9s; }.writing-seal span { font: 900 34px SimHei, sans-serif; text-shadow: 0 0 20px rgba(255,183,47,.5); animation: sealBeat .9s ease-in-out infinite alternate; }.writing-seal i { position: absolute; width: 13px; height: 3px; border-radius: 3px; background: var(--red); box-shadow: 0 0 9px var(--red); }.writing-seal i:first-child { left: -22px; }.writing-seal i:last-child { right: -22px; }.writing-stage .eyebrow { margin-bottom: 8px; }.writing-stage h2 { margin: 0; font-size: 24px; }.writing-wave { height: 48px; margin: 19px auto 10px; display: flex; align-items: center; justify-content: center; gap: 5px; }.writing-wave i { width: 3px; height: 28%; border-radius: 3px; background: linear-gradient(var(--gold), var(--red)); animation: writeBar .65s ease-in-out infinite alternate; }.writing-wave i:nth-child(2n) { animation-delay: -.22s; }.writing-wave i:nth-child(3n) { animation-delay: -.44s; }.writing-stage > p:not(.eyebrow) { min-height: 21px; margin: 0; color: #dfc3ad; font-size: 12px; }.message-enter { animation: messageEnter .28s ease-out both; }.writing-progress { height: 3px; margin: 19px auto 12px; overflow: hidden; border-radius: 3px; background: #3d2419; }.writing-progress i { display: block; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--gold)); animation: progressRoam 1.45s ease-in-out infinite; }.writing-stage small { color: #796355; font-size: 9px; }

.draft-overlay:not([hidden]) .draft-sheet, .order-overlay:not([hidden]) .order-sheet { animation: sheetEnter .32s cubic-bezier(.2,.8,.2,1) both; }.draft-sheet.is-revising .red-seal { animation: sealBeat .65s ease-in-out infinite alternate; }.draft-sheet.is-revising .full-lyrics { opacity: .32; filter: blur(2px); transform: scale(.99); }.full-lyrics { position: relative; overflow: hidden; transition: opacity .25s ease, filter .25s ease, transform .25s ease; }.full-lyrics.lyrics-enter { animation: lyricsReveal .62s cubic-bezier(.2,.8,.2,1) both; }.full-lyrics.lyrics-enter::after { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(100deg, transparent 35%, rgba(255,183,47,.1), transparent 65%); animation: lyricSweep .8s .08s ease-out both; pointer-events: none; }.pay-after-copy.pay-reveal { animation: payReveal .42s cubic-bezier(.2,.8,.2,1) both; }.pay-after-copy.pay-reveal .pay-heading > strong { animation: priceGlow .7s .18s ease-out both; }

@keyframes stageSpark { 0%, 100% { opacity: .45; filter: brightness(.8); } 50% { opacity: 1; filter: brightness(1.35); } }
@keyframes soundBar { from { transform: scaleY(.35); opacity: .45; } to { transform: scaleY(1.08); opacity: 1; } }
@keyframes buttonSweep { 0%, 38% { transform: translateX(0) rotate(18deg); opacity: 0; } 45% { opacity: 1; } 62%, 100% { transform: translateX(750%) rotate(18deg); opacity: 0; } }
@keyframes stageEnter { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes soundRing { from { opacity: .7; transform: scale(.94); } to { opacity: 0; transform: scale(1.55); } }
@keyframes sealBeat { to { transform: scale(1.08); filter: brightness(1.15); } }
@keyframes writeBar { from { transform: scaleY(.25); opacity: .45; } to { transform: scaleY(1.35); opacity: 1; } }
@keyframes messageEnter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes progressRoam { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
@keyframes sheetEnter { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lyricsReveal { from { opacity: 0; transform: translateY(10px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lyricSweep { to { transform: translateX(110%); } }
@keyframes payReveal { from { opacity: 0; transform: translateY(12px); border-color: #ffb72f; box-shadow: 0 0 30px rgba(255,183,47,.17); } to { opacity: 1; transform: none; } }
@keyframes priceGlow { from { color: var(--gold); text-shadow: 0 0 20px rgba(255,183,47,.75); } to { color: #fff3d6; text-shadow: none; } }
@keyframes mixBeat { from { transform: scaleY(.35); opacity: .42; } to { transform: scaleY(1.25); opacity: 1; } }
@keyframes liveBlink { 50% { opacity: .35; transform: scale(.78); } }
@keyframes phaseEnter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes generationRoam { from { transform: translateX(-110%); } to { transform: translateX(245%); } }
@keyframes currentStep { 50% { transform: scale(1.28); box-shadow: 0 0 0 5px rgba(255,183,47,.09), 0 0 16px rgba(255,183,47,.55); } }

@media (max-width: 820px) {
  body { width: 100%; height: 100vh; height: 100dvh; min-height: 0; padding: 0; display: grid; grid-template-rows: 52px minmax(0, 1fr) auto; overflow: hidden; overscroll-behavior: none; }
  .topbar { width: calc(100% - 24px); height: 52px; }.brand-mark { width: 34px; height: 34px; font-size: 18px; }.brand-copy b { font-size: 14px; }.brand-copy small { font-size: 8px; }.orders-button { padding: 7px 11px; font-size: 10px; }
  .workspace { width: calc(100% - 18px); height: 100%; min-height: 0; margin: 0 auto; padding: 0; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: 18px; }
  .creator-card, .preview-card { min-height: 0; border-radius: 0; }.creator-card { padding: 13px 15px 12px; }.intro-row { margin-top: 0; }h1 { font-size: clamp(34px, 10.6vw, 43px); line-height: .94; }.hero-copy { margin-top: 7px; font-size: 10px; line-height: 1.5; }.field-block { margin-top: 10px; }
  .field-block label { margin-bottom: 5px; font-size: 11px; }.name-input-wrap input { height: 48px; padding-left: 14px; font-size: 21px; }
  .preview-card { height: 100%; padding: 11px 14px 10px; display: flex; flex-direction: column; border-top: 1px solid #4f2f21; border-left: 0; }.preview-card h2 { font-size: 20px; }.preview-head .eyebrow { margin-bottom: 5px; font-size: 9px; }.sample-pill { padding: 5px 8px; font-size: 8px; }.waveform { flex: 0 0 28px; height: 28px; margin: 5px 0; gap: 5px; }.lyrics-board { flex: 1 1 auto; min-height: 0; padding: 30px 16px 34px; }.board-corner { width: 29px; height: 29px; font-size: 13px; }.lyrics { font-size: 11px; line-height: 1.5; }.sample-line { padding-block: 3px; padding-left: 11px; }.sample-line::before { width: 3px; height: 3px; }.lyrics-fade { padding: 20px 12px 9px; font-size: 8px; }
  .checkout { position: relative; z-index: 10; padding: 8px 10px calc(7px + env(safe-area-inset-bottom)); }.checkout-inner { display: block; }.price, .checkout-promise { display: none; }.primary-action { width: 100%; height: 48px; font-size: 13px; }.assurance { margin-top: 5px; text-align: center; white-space: nowrap; font-size: 8px; }
  .draft-overlay, .order-overlay { align-items: end; padding: 0; }.draft-sheet, .order-sheet { width: 100%; max-height: 94dvh; border-radius: 23px 23px 0 0; }.draft-sheet { padding: 24px 16px calc(20px + env(safe-area-inset-bottom)); }.order-sheet { padding: 29px 20px calc(22px + env(safe-area-inset-bottom)); }.revision-editor-footer button { min-height: 42px; }.toast { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

@media (max-width: 820px) and (max-height: 700px) { .hero-copy { display: none; }h1 { font-size: 34px; }.waveform { flex-basis: 24px; height: 24px; margin-block: 3px; }.creator-card { padding-block: 10px; } }

@media (max-width: 820px) and (max-height: 620px) { body { grid-template-rows: 48px minmax(0, 1fr) auto; }.topbar { height: 48px; }.waveform { display: none; }.creator-card, .preview-card { padding-block: 9px; }.field-block { margin-top: 8px; } }

@media (max-width: 820px) and (orientation: landscape) { .workspace { grid-template-columns: .88fr 1.12fr; grid-template-rows: minmax(0, 1fr); }.creator-card, .preview-card { height: 100%; }.preview-card { border-top: 0; border-left: 1px solid #4f2f21; }.hero-copy { display: none; }h1 { font-size: 32px; }.field-block { margin-top: 12px; }.lyrics { font-size: 11px; line-height: 1.58; } }

@media (max-width: 390px) { .draft-topline { align-items: flex-start; }.revision-badge { position: absolute; top: 70px; right: 16px; }.full-lyrics { margin-top: 25px; }.revision-heading { display: grid; }.revision-editor-footer { align-items: flex-end; }.revision-editor-footer button { padding-inline: 12px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }