:root {
  color-scheme: light;
  font-family: "DM Sans", "Noto Sans Myanmar", system-ui, sans-serif;
  color: #192942;
  background: #fbf8ef;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --navy: #17263f;
  --navy-soft: #263653;
  --muted: #737d82;
  --line: #e7e8dd;
  --cream: #fbf8ef;
  --cream-deep: #f4f0e5;
  --mint: #d5efdc;
  --mint-soft: #eaf6eb;
  --orange: #f5a20b;
  --orange-deep: #d98500;
  --white: #fffefa;
  --shadow: 0 18px 46px rgba(29, 48, 61, 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; min-width: 320px; background: var(--cream); }
button, input, select, textarea { font: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(239, 156, 10, .55); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-shell { max-width: 1240px; padding: 0 38px; margin: 0 auto; overflow: hidden; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(36, 55, 64, .10); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; min-width: 215px; }
.brand-mark { width: 42px; height: 42px; flex: none; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-wordmark { display: flex; flex-direction: column; gap: 3px; }
.brand-wordmark strong { font: 800 15px/1.25 Manrope, "DM Sans", sans-serif; letter-spacing: -.45px; }
.brand-wordmark strong span { color: #69747a; font-weight: 600; }
.brand-wordmark small { font-size: 9px; color: #7e8687; }
.top-nav { display: flex; align-items: center; gap: 29px; margin-left: auto; margin-right: 20px; }
.top-nav a { color: #455469; font-size: 12px; font-weight: 600; text-decoration: none; transition: color .18s; }
.top-nav a:hover { color: var(--orange-deep); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.api-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.78); border: 1px solid #e4e7dc; border-radius: 99px; padding: 8px 11px; color: #596674; font-size: 10px; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; background: #c6a76d; }
.status-dot.active { background: #4b9a68; box-shadow: 0 0 0 3px rgba(75,154,104,.12); }
.status-dot.pending { background: #efa31e; animation: pulse 1.1s ease-in-out infinite alternate; }
.status-dot.error { background: #be5351; }
.settings-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 7px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 rgba(17,31,50,.14); transition: transform .18s, background .18s; }
.settings-button:hover { background: #263956; transform: translateY(-1px); }
.settings-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

main { padding-bottom: 24px; }
.hero { min-height: 508px; padding: 72px 5.2% 63px; display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: 24px; position: relative; }
.hero::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: #e2f2dc; filter: blur(1px); right: 8%; top: 19%; opacity: .75; z-index: 0; }
.hero-copy, .hero-art { position: relative; z-index: 1; }
.hero-copy { max-width: 580px; }
.hero-kicker, .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #9f6e14; font-size: 10px; letter-spacing: 1.05px; font-weight: 800; }
.kicker-spark { color: var(--orange-deep); font-size: 15px; }
.hero h1 { margin: 18px 0 14px; font-family: "Noto Sans Myanmar", "DM Sans", sans-serif; font-size: clamp(34px, 4vw, 52px); font-weight: 800; line-height: 1.45; letter-spacing: -.035em; color: var(--navy); }
.hero h1 em, .quality-heading h2 em, .how-copy h2 em { font-style: normal; color: #ef9c12; }
.hero-lede { max-width: 520px; margin: 0; color: #68747a; font: 400 14px/2 "Noto Sans Myanmar", "DM Sans", sans-serif; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 17px; margin-top: 25px; }
.primary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 43px; padding: 0 18px; border: 0; border-radius: 7px; background: var(--orange); color: #192943; text-decoration: none; font: 800 12px "Noto Sans Myanmar", "DM Sans", sans-serif; box-shadow: 0 5px 0 #dc8b07; cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s; }
.primary-cta:hover { background: #ffb62a; box-shadow: 0 3px 0 #dc8b07; transform: translateY(2px); }
.hero-proof { display: inline-flex; align-items: center; gap: 7px; color: #566a5b; font-size: 10px; font-weight: 700; }
.proof-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #64a96f; box-shadow: 0 0 0 3px #dcefdc; }
.hero-points { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 27px; color: #73807a; font-size: 9px; }
.hero-points span { display: flex; align-items: center; gap: 5px; }
.hero-points i { font-style: normal; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #e3efdc; color: #44815b; font-size: 10px; font-weight: 800; }
.hero-art { height: 326px; display: grid; place-items: center; }
.art-halo { position: absolute; width: 310px; height: 310px; border: 1px solid rgba(75,125,88,.14); border-radius: 50%; }
.art-halo::before, .art-halo::after { content: ""; position: absolute; border: 1px solid rgba(75,125,88,.13); border-radius: 50%; inset: 23px; }
.art-halo::after { inset: 47px; }
.art-card { position: absolute; width: min(330px, 84%); height: 205px; border-radius: 12px; box-shadow: 0 24px 55px rgba(30,49,59,.16); }
.art-card-back { transform: rotate(7deg) translate(20px, 5px); background: #cbe8d1; border: 1px solid rgba(23,38,63,.1); }
.art-card-front { transform: rotate(-3deg) translate(-4px,-4px); background: var(--white); border: 1px solid #e8e5d8; padding: 22px 23px; }
.art-overline { color: #8c938b; font-size: 8px; font-weight: 800; letter-spacing: 1.3px; }
.art-word { margin-top: 10px; color: var(--navy); font: 700 33px "Noto Sans Myanmar", sans-serif; }
.art-word span { color: var(--orange); }
.art-bars { height: 34px; display: flex; align-items: center; gap: 4px; margin-top: 5px; color: #f1a113; }
.art-bars i { width: 3px; height: 11px; border-radius: 9px; background: currentColor; }
.art-bars i:nth-child(3n) { height: 20px; }
.art-bars i:nth-child(4n) { height: 29px; }
.art-bars i:nth-child(7n) { height: 16px; }
.art-caption { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #e9ece3; }
.art-avatar { display: grid; place-items: center; width: 31px; height: 31px; overflow: hidden; border-radius: 10px; background: #dff0dd; color: #376249; font: 700 12px Manrope,sans-serif; }
.art-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.art-caption b, .art-caption small { display: block; }
.art-caption b { font-size: 10px; }
.art-caption small { margin-top: 3px; color: #89908c; font-size: 8px; }
.art-play { display: grid; place-items: center; width: 29px; height: 29px; margin-left: auto; border-radius: 50%; background: var(--orange); color: var(--navy); font-size: 9px; }
.art-sticker { position: absolute; z-index: 2; display: inline-flex; align-items: center; padding: 8px 11px; border-radius: 6px; background: var(--navy); color: white; font: 600 9px "Noto Sans Myanmar",sans-serif; box-shadow: 0 8px 19px rgba(18,35,55,.16); }
.sticker-one { top: 31px; right: 4%; transform: rotate(4deg); }
.sticker-two { bottom: 28px; left: 1%; background: var(--orange); color: var(--navy); transform: rotate(-5deg); }

.studio-section { padding: 62px 0 58px; }
.section-heading, .output-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin: 0 0 22px; }
.section-heading h2, .output-heading h2 { margin: 8px 0 0; font: 800 clamp(24px,3vw,32px)/1.5 "Noto Sans Myanmar", "DM Sans", sans-serif; letter-spacing: -.035em; color: var(--navy); }
.section-number { color: #8d9691; font: 700 9px Manrope,"DM Sans",sans-serif; letter-spacing: 1.3px; white-space: nowrap; padding-bottom: 7px; }
.workspace-card { display: grid; grid-template-columns: minmax(0,1.14fr) minmax(330px,.86fr); gap: 1px; border: 1px solid #e6e8dc; border-radius: 13px; overflow: hidden; background: #e6e8dc; box-shadow: var(--shadow); }
.editor-panel, .delivery-panel { padding: 24px 25px; background: var(--white); }
.delivery-panel { background: #f5f8ee; }
.panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.step-label { display: block; color: #be8519; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.panel-title-row h3, .voice-section-head h3 { margin: 6px 0 0; color: var(--navy); font: 800 18px/1.6 "Noto Sans Myanmar", "DM Sans", sans-serif; }
.no-autosave { display: inline-flex; align-items: center; gap: 6px; padding-top: 8px; color: #7c8981; white-space: nowrap; font-size: 9px; }
.no-autosave i { width: 6px; height: 6px; border-radius: 50%; background: #82ac76; }
.editor-shell { margin-top: 19px; border: 1px solid #e5e8de; border-radius: 8px; background: #fffefa; transition: box-shadow .2s,border-color .2s; }
.editor-shell:focus-within { border-color: #e8b956; box-shadow: 0 0 0 3px rgba(245,162,11,.11); }
textarea { display: block; width: 100%; min-height: 218px; resize: vertical; border: 0; outline: 0; background: transparent; padding: 17px 17px 11px; color: #243550; font: 400 14px/2 "Noto Sans Myanmar", "DM Sans", sans-serif; }
textarea::placeholder { color: #a5aaa3; opacity: 1; }
.editor-meta { min-height: 30px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 14px 8px; color: #929992; font-size: 9px; }
.editor-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 46px; }
.editor-toolbar>div { display: flex; gap: 15px; }
.plain-button { padding: 6px 0; border: 0; background: none; color: #6c787b; font: 600 10px "Noto Sans Myanmar","DM Sans",sans-serif; cursor: pointer; }
.plain-button:hover { color: #c18109; }
.clear-button { color: #9b7773; }
.script-stats { display: grid; grid-template-columns: repeat(3,1fr); padding: 13px 0 12px; border-top: 1px solid #edf0e8; border-bottom: 1px solid #edf0e8; }
.script-stats>div { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-right: 1px solid #e8ece3; }
.script-stats>div:first-child { padding-left: 0; }
.script-stats>div:last-child { border: 0; }
.script-stats strong { color: var(--navy); font: 800 16px Manrope,"Noto Sans Myanmar",sans-serif; letter-spacing: -.4px; }
.script-stats span { color: #87918b; font-size: 9px; }
.prep-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; }
.switch-label { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.switch-label strong,.switch-label small { display: block; }
.switch-label strong { color: #43544c; font-size: 10px; font-weight: 700; }
.switch-label small { margin-top: 4px; color: #8c9790; font: 400 9px/1.7 "Noto Sans Myanmar",sans-serif; }
.switch { position: relative; display: inline-flex; width: 32px; height: 18px; flex: none; }
.switch input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch-track { position: absolute; inset: 0; border-radius: 99px; background: #dce4d9; transition: background .18s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.16); transition: transform .18s; }
.switch input:checked+.switch-track { background: #74a77c; }
.switch input:checked+.switch-track::after { transform: translateX(14px); }
.switch input:focus-visible+.switch-track { outline: 3px solid rgba(245,162,11,.38); outline-offset: 2px; }
.optional-tag { padding: 5px 7px; border: 1px solid #e1e9d8; border-radius: 5px; color: #798d7d; font-size: 8px; white-space: nowrap; }
.round-mic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e0efd9; color: #4e765b; font-size: 18px; }
.field-label { display: block; margin: 16px 0 6px; color: #61706c; font-size: 9px; font-weight: 800; letter-spacing: .35px; }
.select-wrap { position: relative; width: 100%; }
.select-wrap select { appearance: none; width: 100%; min-height: 39px; padding: 0 34px 0 11px; border: 1px solid #e1e6da; border-radius: 6px; background: #fffefa; color: #34465b; font: 600 10px "Noto Sans Myanmar","DM Sans",sans-serif; cursor: pointer; }
.select-wrap>span { position: absolute; top: 50%; right: 12px; transform: translateY(-53%); color: #8f9a91; pointer-events: none; }
.model-note, .profile-description { margin: 5px 0 0; color: #809087; font: 400 9px/1.6 "Noto Sans Myanmar",sans-serif; }
.control-block { margin-top: 15px; }
.field-row { display: flex; justify-content: space-between; align-items: center; }
.field-row .field-label { margin: 0 0 7px; }
.value-chip { padding: 3px 8px; border: 1px solid #efdfb7; border-radius: 99px; background: #fff8e6; color: #85601b; font: 800 9px Manrope,sans-serif; }
.speed-options { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }
.speed-button { min-height: 46px; padding: 4px 2px; border: 1px solid #e2e7db; border-radius: 8px; background: #fffefa; color: #65766c; font: 800 11px Manrope,"DM Sans",sans-serif; white-space: nowrap; cursor: pointer; transition: color .15s,background .15s,border-color .15s,transform .15s; }
.speed-button:hover { border-color: #dbb75f; color: #9c701b; }
.speed-button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.settings-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; margin-top: 12px; }
.small-select select { min-height: 34px; }
.settings-heading h4 { margin: 4px 0 0; color: var(--navy); font: 800 14px/1.65 "Noto Sans Myanmar",sans-serif; }
.settings-heading p { margin: 3px 0 0; color: #7e8980; font: 400 9px/1.7 "Noto Sans Myanmar",sans-serif; }
.setting-option-group { position: relative; min-width: 0; padding: 12px 12px 11px; border: 1px solid #e5e8dd; border-radius: 10px; background: rgba(255,255,252,.86); box-shadow: 0 2px 8px rgba(29,48,61,.025); }
.setting-option-group .field-label { display: block; margin: 0; font-size: 11px; color: var(--navy); }
.setting-row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.speed-setting { border-color: #e6dec7; background: linear-gradient(125deg,#fffdf5,#fffefa 72%); }
.speed-range { display: block; width: 100%; height: 28px; margin: 10px 0 0; accent-color: #648d6c; cursor: pointer; touch-action: pan-y; }
.speed-range:disabled { opacity: .55; cursor: not-allowed; }
.range-endpoints { display: flex; justify-content: space-between; margin-top: -1px; color: #758078; font: 600 9px Manrope,"DM Sans",sans-serif; }
.setting-help { display: block; margin-top: 7px; color: #8a9289; font: 400 9px/1.65 "Noto Sans Myanmar",sans-serif; }
.setting-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.choice-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 9px; }
.choice-buttons button { min-width: 0; min-height: 44px; padding: 5px 4px; border: 1px solid #e2e8df; border-radius: 9px; background: #fffefa; color: #61706d; font: 700 10px/1.45 "Noto Sans Myanmar",sans-serif; text-align: center; cursor: pointer; transition: transform .15s,border-color .15s,background .15s,box-shadow .15s; }
.choice-buttons button:hover:not(:disabled) { transform: translateY(-1px); }
.choice-buttons button[aria-pressed="true"] { border-color: var(--choice-border); background: var(--choice-bg); color: var(--choice-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5),0 3px 8px rgba(35,48,47,.07); }
.choice-buttons button:disabled { opacity: .56; cursor: not-allowed; }
.choice-buttons[data-setting="pitch"] button:nth-child(1) { --choice-bg: #e5edff; --choice-border: #a9bde9; --choice-ink: #465d93; }
.choice-buttons[data-setting="pitch"] button:nth-child(2) { --choice-bg: #dff2e6; --choice-border: #a8d4b4; --choice-ink: #3d7954; }
.choice-buttons[data-setting="pitch"] button:nth-child(3) { --choice-bg: #fff0ce; --choice-border: #e6c47a; --choice-ink: #8b6214; }
.choice-buttons[data-setting="expression"] button:nth-child(1) { --choice-bg: #eee7fa; --choice-border: #c7b6e0; --choice-ink: #665284; }
.choice-buttons[data-setting="expression"] button:nth-child(2) { --choice-bg: #e3f2e3; --choice-border: #b1d5ad; --choice-ink: #52754c; }
.choice-buttons[data-setting="expression"] button:nth-child(3) { --choice-bg: #ffe5d8; --choice-border: #efb5a0; --choice-ink: #a0573c; }
.choice-buttons[data-setting="pause"] button:nth-child(1) { --choice-bg: #e2f1f4; --choice-border: #afd4dc; --choice-ink: #426b76; }
.choice-buttons[data-setting="pause"] button:nth-child(2) { --choice-bg: #e3f2e3; --choice-border: #b1d5ad; --choice-ink: #52754c; }
.choice-buttons[data-setting="pause"] button:nth-child(3) { --choice-bg: #f0e9fb; --choice-border: #c8bae5; --choice-ink: #66538a; }
.choice-buttons[data-setting="clarity"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.choice-buttons[data-setting="clarity"] button:nth-child(1) { --choice-bg: #e4edfa; --choice-border: #b4c6df; --choice-ink: #4b6483; }
.choice-buttons[data-setting="clarity"] button:nth-child(2) { --choice-bg: #fff0cc; --choice-border: #e8c67c; --choice-ink: #886216; }
.profile-hint { display: flex; align-items: flex-start; gap: 7px; margin-top: 13px; padding: 9px 10px; border-radius: 6px; background: #edf5e9; color: #6b7f72; font: 400 9px/1.6 "Noto Sans Myanmar",sans-serif; }
.profile-hint>span:first-child { color: #c4820d; font-size: 13px; }
.delivery-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 13px; margin-top: 13px; border-top: 1px solid #e6ebdf; }
.remember-label { display: inline-flex; align-items: center; gap: 6px; color: #78847d; font-size: 9px; cursor: pointer; }
.remember-label input { accent-color: #658e6a; width: 13px; height: 13px; }
.reset-button { padding: 4px 0 4px 8px; border: 0; background: transparent; color: #9b7a63; font: 600 9px "Noto Sans Myanmar",sans-serif; cursor: pointer; }

.mode-switch { display: grid; gap: 7px; margin-top: 15px; }
.mode-option { display: grid; grid-template-columns: 66px minmax(0,1fr); align-items: center; gap: 9px; width: 100%; min-height: 62px; padding: 10px 11px; border: 1px solid #e1e6da; border-radius: 10px; background: #fffefa; text-align: left; cursor: pointer; transition: border-color .16s,background .16s,box-shadow .16s; }
.mode-option:hover:not(:disabled) { border-color: #d5b45f; }
.mode-option[aria-pressed="true"] { border-color: #6b8c68; background: #edf6e9; box-shadow: inset 3px 0 0 var(--orange); }
.mode-option:disabled { opacity: .6; cursor: wait; }
.mode-number { display: grid; place-items: center; width: 60px; height: 38px; border-radius: 9px; background: var(--navy); color: var(--orange); font: 800 12px Manrope,"DM Sans",sans-serif; letter-spacing: -.15px; }
.mode-option[aria-pressed="true"] .mode-number { background: var(--orange); color: var(--navy); }
.mode-option strong,.mode-option small { display: block; }
.mode-option strong { color: var(--navy); font: 700 11px/1.7 "Noto Sans Myanmar",sans-serif; }
.mode-option small { margin-top: 2px; color: #78847d; font: 500 9px/1.6 "Noto Sans Myanmar",sans-serif; }
.mode-panel { margin-top: 15px; padding-top: 13px; border-top: 1px solid #e4e9df; }
.mode-panel-heading h4 { margin: 5px 0 0; color: var(--navy); font: 800 13px/1.7 "Noto Sans Myanmar",sans-serif; }
.mode-panel-heading p { margin: 3px 0 0; color: #7e8980; font: 400 8px/1.7 "Noto Sans Myanmar",sans-serif; }
.style-grid { display: grid; grid-template-columns: 1fr; gap: 5px; max-height: 258px; margin-top: 10px; padding: 1px 4px 1px 1px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #a8c8a2 transparent; scrollbar-width: thin; }
.style-item { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid #dce7d7; border-radius: 6px; background: rgba(255,254,250,.85); }
.style-item.is-selected { border-color: #6b8c68; background: #fffefa; box-shadow: inset 3px 0 0 var(--orange); }
.style-choice { min-width: 0; flex: 1; display: block; padding: 0 2px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.style-choice strong,.style-choice span { display: block; }
.style-choice strong { color: var(--navy); font: 700 9px/1.7 "Noto Sans Myanmar",sans-serif; }
.style-choice span { margin-top: 1px; color: #7c8880; font: 400 8px/1.55 "Noto Sans Myanmar",sans-serif; }
.style-choice[aria-pressed="true"] strong { color: #946518; }
.style-preview { min-height: 27px; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; border: 1px solid #edcf8d; border-radius: 5px; background: #fff9e7; color: #946518; font: 700 8px "Noto Sans Myanmar",sans-serif; cursor: pointer; }
.style-preview:hover:not(:disabled) { background: var(--orange); color: var(--navy); }
.style-preview:disabled { opacity: .55; cursor: wait; }
.style-preview.is-playing { border-color: #a3c6a0; background: #e1f0df; color: #47754f; }
.voice-mode-voices { margin: 12px 0 0; padding: 13px 12px 11px; }
.voice-mode-voices .voice-section-head { margin-bottom: 10px; }
.voice-mode-voices .voice-section-head h4 { margin: 0; color: var(--navy); font: 800 11px/1.6 "Noto Sans Myanmar",sans-serif; }
.voice-mode-voices .voice-section-head p { font-size: 8px; }
.voice-mode-voices .voice-grid { max-height: 220px; }
.voice-mode-voices .voice-total { min-width: 55px; }
.voice-settings-block { margin-top: 13px; padding: 15px 13px 13px; border: 1px solid #dce7d7; border-radius: 10px; background: rgba(255,254,250,.86); box-shadow: 0 5px 15px rgba(29,48,61,.04); }
.voice-settings-block .profile-hint { font-size: 8px; }
.delivery-footer { margin-top: 12px; }

.voice-section { margin-top: 32px; padding: 22px 22px 18px; border: 1px solid #e4e8dc; border-radius: 11px; background: #eaf4e6; }
.preview-player { margin-top: 22px; }
.voice-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.voice-section-head h3 { font-size: 17px; }
.voice-section-head p { margin: 5px 0 0; color: #6d7a73; font: 400 10px/1.7 "Noto Sans Myanmar",sans-serif; }
.voice-total { min-width: 69px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7px 9px; border-radius: 7px; background: #fffdf4; color: #a56f12; }
.voice-total b { font: 800 20px Manrope,sans-serif; }
.voice-total small { font-size: 8px; }
.voice-grid { max-height: 380px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 1px 4px 1px 1px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #a8c8a2 transparent; scrollbar-width: thin; }
.voice-item { min-width: 0; display: flex; align-items: center; gap: 4px; padding: 7px 8px; border: 1px solid #dce7d7; border-radius: 7px; background: rgba(255,254,250,.85); transition: border-color .15s,background .15s,box-shadow .15s; }
.voice-item.is-selected { border-color: #56705c; background: #fffef9; box-shadow: inset 3px 0 0 var(--orange); }
.voice-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1; min-width: 0; padding: 0 2px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.voice-choice:focus-visible { border-radius: 4px; }
.voice-burmese-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--navy); font: 700 10px "Noto Sans Myanmar",sans-serif; }
.voice-subline { display: flex; align-items: center; gap: 5px; color: #7a8880; font-size: 8px; }
.voice-id { color: #71806f; font: 700 8px Manrope,"DM Sans",sans-serif; }
.voice-tone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-preview { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 28px; padding: 0 7px; flex: none; border: 1px solid #edcf8d; border-radius: 5px; background: #fff9e7; color: #946518; font: 700 8px "Noto Sans Myanmar",sans-serif; cursor: pointer; transition: background .18s,color .18s; }
.voice-preview:hover:not(:disabled) { background: var(--orange); color: var(--navy); }
.voice-preview:disabled { opacity: .55; cursor: wait; }
.voice-preview.is-playing { background: #e1f0df; border-color: #a3c6a0; color: #47754f; }
.voice-footnote { margin: 11px 2px 0; color: #718179; font: 400 9px/1.6 "Noto Sans Myanmar",sans-serif; }
.preview-player { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 13px; padding: 10px 12px; border: 1px solid #d5e4d0; border-radius: 7px; background: #fffefa; }
.preview-player>div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.preview-player strong { color: var(--navy); font: 700 10px "Noto Sans Myanmar",sans-serif; }
.preview-player span { color: #7d8980; font: 400 8px "Noto Sans Myanmar",sans-serif; }
.preview-player audio { width: min(330px, 56%); height: 34px; }

.how-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: center; margin: 62px calc(-1 * max(0px, (1240px - 100vw)/2)) 0; padding: 49px max(6.5%, calc((100vw - 1110px)/2)); background: var(--navy); color: #fff; }
.how-copy h2 { margin: 9px 0 10px; font: 800 clamp(22px,2.5vw,30px)/1.65 "Noto Sans Myanmar",sans-serif; }
.how-copy p { max-width: 370px; margin: 0; color: #c2cbd1; font: 400 10px/1.9 "Noto Sans Myanmar",sans-serif; }
.light-eyebrow { color: #f2b244; }
.how-steps { display: grid; gap: 0; }
.how-steps>div { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.how-steps>div:last-child { border-bottom: 0; }
.how-steps>div>span { grid-row: span 2; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; color: #f2b244; font: 700 9px Manrope,sans-serif; }
.how-steps b { color: #fff; font: 700 11px "Noto Sans Myanmar",sans-serif; }
.how-steps small { color: #b4c1c7; font: 400 9px "Noto Sans Myanmar",sans-serif; }

.quality-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: center; padding: 65px 0 58px; }
.quality-heading h2 { margin: 10px 0 10px; color: var(--navy); font: 800 clamp(23px,2.7vw,31px)/1.6 "Noto Sans Myanmar",sans-serif; }
.quality-heading p { max-width: 370px; color: #728078; font: 400 10px/1.9 "Noto Sans Myanmar",sans-serif; }
.quality-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.quality-cards article { min-height: 170px; padding: 16px 14px; border: 1px solid #dbe8d7; border-radius: 8px; background: var(--mint-soft); }
.quality-cards article:nth-child(2) { background: #f7f1df; border-color: #ebe0bf; }
.quality-cards article:nth-child(3) { background: #fffefa; border-color: #e9e7d9; }
.quality-cards article span { display: block; color: #839387; font: 700 8px Manrope,"DM Sans",sans-serif; letter-spacing: .3px; }
.quality-cards article b { display: block; margin-top: 14px; color: var(--navy); font: 800 13px/1.8 "Noto Sans Myanmar",sans-serif; }
.quality-cards article p { margin: 8px 0 0; color: #738078; font: 400 9px/1.7 "Noto Sans Myanmar",sans-serif; }

.output-section { padding: 47px 0 53px; border-top: 1px solid #e5e6da; }
.output-heading { margin-bottom: 20px; }
.output-heading h2 { font-size: clamp(22px,2.7vw,30px); }
.output-heading p { margin: 6px 0 0; color: #7d8982; font: 400 10px/1.7 "Noto Sans Myanmar",sans-serif; }
.output-card { padding: 22px 23px 19px; border: 1px solid #24354e; border-radius: 10px; background: var(--navy); color: #fff; box-shadow: 0 14px 32px rgba(23,38,63,.13); }
.output-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.13); color: #cbd3d8; font-size: 9px; }
.output-topline>div { display: inline-flex; align-items: center; gap: 7px; }
.output-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d3c18a; }
.output-live-dot.ready { background: #7fc28b; }
.output-live-dot.busy { background: var(--orange); animation: pulse 1.1s ease-in-out infinite alternate; }
.output-live-dot.error { background: #f08479; }
.output-tag { color: #ecb543; font: 700 8px Manrope,sans-serif; letter-spacing: 1px; }
.audio-row { display: flex; align-items: center; gap: 16px; padding: 20px 0 16px; }
.audio-play { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: var(--orange); color: var(--navy); font: 800 14px Manrope,sans-serif; cursor: pointer; box-shadow: 0 0 0 6px rgba(246,168,26,.11); }
.audio-play:disabled { background: #677487; box-shadow: none; color: #d6dade; cursor: not-allowed; }
.audio-body { flex: 1; min-width: 0; }
.player-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.player-meta strong { color: #fff; font: 700 10px "Noto Sans Myanmar",sans-serif; }
.player-meta>span { color: #c0cad2; font-size: 9px; }
.timeline-row { display: flex; align-items: center; gap: 10px; margin-top: 13px; color: #c1cbd2; font: 500 9px Manrope,sans-serif; }
.progress-track { position: relative; height: 5px; flex: 1; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; }
.progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--orange); transition: width .12s linear; }
.player-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; color: #b5c1ca; font-size: 8px; }
.output-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.generate-button { min-height: 38px; }
.generate-button:disabled { opacity: .55; cursor: wait; transform: none; }
.secondary-cta, .download-button { display: inline-flex; align-items: center; justify-content: center; min-height: 35px; padding: 0 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 6px; background: transparent; color: #ecf0ef; text-decoration: none; font: 600 9px "Noto Sans Myanmar",sans-serif; cursor: pointer; transition: background .16s,border-color .16s; }
.secondary-cta:hover:not(:disabled), .download-button:hover { border-color: #eeb33e; background: rgba(255,255,255,.07); }
.secondary-cta:disabled { opacity: .4; cursor: not-allowed; }
.download-button { border-color: var(--orange); color: #ffd271; }
.privacy-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 13px; color: #76837c; font: 400 9px/1.8 "Noto Sans Myanmar",sans-serif; }
.privacy-note>span { display: grid; place-items: center; width: 14px; height: 14px; flex: none; border: 1px solid #acbaad; border-radius: 50%; color: #728579; font: 700 9px Manrope,sans-serif; }
.privacy-note p { margin: 0; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 0 7px; border-top: 1px solid #e3e5da; color: #829087; font: 400 9px "Noto Sans Myanmar",sans-serif; }
.footer-brand { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font: 800 10px Manrope,sans-serif; text-decoration: none; }
.footer-logo { display: block; width: 25px; height: 25px; object-fit: contain; }
.site-footer>a:last-child { color: #86621e; text-decoration: none; }

.settings-dialog { width: min(520px, calc(100% - 28px)); max-height: min(90vh, 760px); padding: 23px; border: 1px solid #e5e7dd; border-radius: 13px; background: var(--white); color: var(--navy); box-shadow: 0 28px 90px rgba(17,31,49,.3); }
.settings-dialog::backdrop { background: rgba(21,35,53,.48); backdrop-filter: blur(3px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dialog-head h2 { margin: 7px 0 0; font: 800 20px/1.5 "Noto Sans Myanmar",sans-serif; }
.dialog-x { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e5e8de; border-radius: 50%; background: #fffefa; color: #64727a; font-size: 20px; cursor: pointer; }
.dialog-api-state { display: flex; align-items: center; gap: 8px; margin: 18px 0 13px; padding: 10px 12px; border: 1px solid #e5eadd; border-radius: 7px; background: #f4f8ef; color: #647565; font-size: 10px; }
.key-label { display: block; margin: 12px 0 6px; color: #4c5b67; font-size: 10px; font-weight: 800; }
.key-input-row { display: flex; gap: 6px; }
.key-input-row input { width: 100%; min-width: 0; height: 41px; padding: 0 11px; border: 1px solid #dce2d8; border-radius: 6px; background: #fffefa; color: var(--navy); font: 500 12px Manrope,monospace; }
.key-input-row input[readonly] { color: #79847d; background: #f5f6ef; }
.key-reveal { min-width: 57px; border: 1px solid #e0e4da; border-radius: 6px; background: #fff; color: #66756b; font: 600 9px "Noto Sans Myanmar",sans-serif; cursor: pointer; }
.key-hint { margin: 7px 0 0; color: #78857e; font: 400 9px/1.7 "Noto Sans Myanmar",sans-serif; }
.key-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.key-actions .primary-cta, .key-actions .secondary-cta { min-height: 35px; font-size: 9px; }
.key-actions .secondary-cta { border-color: #dce3d8; color: #52646b; }
.key-actions .secondary-cta:hover:not(:disabled) { background: #f2f7ee; border-color: #a9c6a7; }
.remove-key-button { margin-left: auto; padding: 4px; border: 0; background: transparent; color: #a45c55; font: 600 9px "Noto Sans Myanmar",sans-serif; cursor: pointer; }
.security-warning { display: flex; align-items: flex-start; gap: 9px; margin-top: 17px; padding: 11px; border: 1px solid #f0dfb9; border-radius: 7px; background: #fff8e8; color: #6e5d3b; }
.security-warning>span { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: #f6dfa9; color: #7d5910; font: 800 11px Manrope,sans-serif; }
.security-warning strong { display: block; font-size: 9px; }
.security-warning p { margin: 4px 0 0; color: #796d58; font: 400 9px/1.7 "Noto Sans Myanmar",sans-serif; }
.dialog-cost-note { margin: 11px 1px 0; color: #8a9188; font: 400 8px/1.7 "Noto Sans Myanmar",sans-serif; }
.toast { position: fixed; z-index: 10; right: 19px; bottom: 18px; display: flex; align-items: center; gap: 10px; width: min(400px,calc(100vw - 26px)); padding: 12px; border: 1px solid #e7dfc9; border-radius: 8px; background: #fffdf5; color: #40524b; box-shadow: 0 12px 35px rgba(27,41,54,.16); font: 500 10px/1.8 "Noto Sans Myanmar",sans-serif; }
.toast-symbol { display: grid; place-items: center; width: 19px; height: 19px; flex: none; border-radius: 50%; background: #f8e5b8; color: #88640f; font: 800 10px Manrope,sans-serif; }
.toast button { margin-left: auto; border: 0; background: transparent; color: #87908a; font-size: 19px; cursor: pointer; }
.error-dialog { position: relative; isolation: isolate; overflow: hidden; width: min(440px,calc(100% - 30px)); margin: auto; padding: 29px 28px 25px; border: 1px solid rgba(255,255,255,.48); border-radius: 24px; background: linear-gradient(145deg,rgba(255,236,239,.55),rgba(252,207,214,.34)); color: var(--navy); box-shadow: 0 28px 90px rgba(93,21,36,.24),inset 0 1px 0 rgba(255,255,255,.52); backdrop-filter: blur(28px) saturate(1.55); -webkit-backdrop-filter: blur(28px) saturate(1.55); text-align: center; }
.error-dialog::before { content: ""; position: absolute; z-index: -1; inset: -18% 35% 34% -15%; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; background: radial-gradient(ellipse at 35% 28%,rgba(255,255,255,.48),rgba(255,231,235,.08) 72%); filter: blur(8px); pointer-events: none; }
.error-dialog::backdrop { background: rgba(45,20,29,.26); backdrop-filter: blur(3px); }
.error-glass-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 12px; border: 1px solid rgba(204,68,83,.28); border-radius: 16px; background: rgba(255,224,226,.76); color: #b4233a; font: 900 23px Manrope,sans-serif; box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 8px 22px rgba(180,35,58,.12); }
.error-eyebrow { color: #657185; font: 800 9px Manrope,"DM Sans",sans-serif; letter-spacing: 1.25px; }
.error-dialog h2 { margin: 7px 0 8px; color: var(--navy); font: 800 17px/1.7 "Noto Sans Myanmar",sans-serif; }
.error-dialog p { margin: 0; padding: 12px 13px; border: 1px solid rgba(190,56,75,.17); border-radius: 12px; background: rgba(255,237,238,.72); color: #a51d33; font: 600 12px/1.9 "Noto Sans Myanmar",sans-serif; text-align: left; }
.error-dialog p.error-dialog-hint { margin: 11px 2px 0; padding: 0; border: 0; background: transparent; color: #536175; font: 500 10px/1.85 "Noto Sans Myanmar",sans-serif; text-align: left; }
.error-dialog-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 15px; margin-top: 11px; }
.error-dialog-links a { color: #7f2436; font: 700 9px/1.6 "Noto Sans Myanmar",sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.error-ok-button { display: inline-flex; justify-content: center; align-items: center; min-width: 126px; min-height: 45px; margin-top: 18px; padding: 0 22px; border: 1px solid #b4283e; border-radius: 11px; background: linear-gradient(135deg,#c73349,#a91e36); color: #fff; font: 800 12px Manrope,"Noto Sans Myanmar",sans-serif; box-shadow: 0 7px 18px rgba(169,30,54,.23),inset 0 1px 0 rgba(255,255,255,.25); cursor: pointer; }
.error-ok-button:hover { background: linear-gradient(135deg,#d14458,#b1263e); }

@keyframes pulse { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: scale(1.1); } }
@media (max-width: 980px) {
  .site-shell { padding: 0 25px; }
  .hero { padding-left: 3%; padding-right: 3%; min-height: 462px; }
  .hero-art { transform: scale(.91); }
  .workspace-card { grid-template-columns: minmax(0,1fr) minmax(300px,.87fr); }
  .editor-panel, .delivery-panel { padding: 20px 19px; }
  .voice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quality-section { grid-template-columns: .7fr 1.3fr; gap: 20px; }
  .how-section { margin-left: -25px; margin-right: -25px; padding-left: 7%; padding-right: 7%; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 68px; }
  .site-shell { padding: 0 17px; }
  .topbar { height: 65px; gap: 8px; }
  .brand { min-width: 0; gap: 8px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-wordmark strong { font-size: 12px; }
  .brand-wordmark small { font-size: 7px; }
  .top-nav { display: none; }
  .top-actions { gap: 6px; margin-left: auto; }
  .api-pill { padding: 7px 8px; font-size: 8px; gap: 5px; }
  .api-pill .status-dot { width: 6px; height: 6px; }
  .settings-button { width: 36px; height: 36px; padding: 0; border-radius: 7px; }
  .settings-button span { display: none; }
  .settings-button svg { width: 17px; height: 17px; }
  .hero { min-height: 0; padding: 43px 7px 34px; grid-template-columns: 1fr; gap: 5px; }
  .hero::before { width: 195px; height: 195px; top: auto; bottom: 12px; right: 7%; }
  .hero-copy { max-width: none; }
  .hero-kicker { font-size: 8px; }
  .hero h1 { margin-top: 12px; margin-bottom: 9px; font-size: clamp(31px,8.6vw,44px); line-height: 1.55; }
  .hero-lede { max-width: 480px; font-size: 11px; line-height: 1.9; }
  .hero-actions { margin-top: 17px; gap: 12px; }
  .primary-cta { min-height: 38px; padding: 0 14px; font-size: 10px; }
  .hero-proof { font-size: 8px; }
  .hero-points { gap: 8px 11px; margin-top: 16px; font-size: 8px; }
  .hero-points i { width: 13px; height: 13px; }
  .hero-art { height: 248px; margin-top: 0; transform: scale(.82); transform-origin: center top; }
  .art-halo { width: 268px; height: 268px; }
  .art-card { width: min(320px,86%); height: 188px; }
  .art-sticker { font-size: 8px; }
  .sticker-one { right: 1%; top: 24px; }
  .sticker-two { left: 0; bottom: 17px; }
  .studio-section { padding: 38px 0 38px; }
  .section-heading { margin-bottom: 15px; }
  .section-heading h2, .output-heading h2 { margin-top: 6px; font-size: 22px; line-height: 1.65; }
  .section-number { padding-bottom: 4px; font-size: 7px; }
  .workspace-card { grid-template-columns: 1fr; border-radius: 9px; }
  .editor-panel, .delivery-panel { padding: 17px 15px; }
  .panel-title-row h3, .voice-section-head h3 { font-size: 15px; }
  .step-label { font-size: 8px; }
  .no-autosave { font-size: 8px; }
  .editor-shell { margin-top: 14px; }
  textarea { min-height: 184px; padding: 13px 12px 8px; font-size: 12px; }
  .editor-meta { font-size: 8px; }
  .script-stats { padding: 10px 0; }
  .script-stats>div { padding-left: 8px; }
  .script-stats strong { font-size: 13px; }
  .script-stats span { font-size: 7px; }
  .prep-row { padding-top: 12px; }
  .switch-label strong { font-size: 9px; }
  .switch-label small { font-size: 8px; }
  .delivery-panel { border-top: 1px solid #e1e9db; }
  .field-label { margin-top: 13px; }
  .select-wrap select { min-height: 37px; font-size: 9px; }
  .settings-grid { gap: 9px; }
  .setting-option-group { padding: 11px 10px 10px; }
  .choice-buttons { gap: 6px; }
  .choice-buttons button { min-height: 45px; font-size: 10px; }
  .voice-section { margin-top: 19px; padding: 17px 12px 14px; }
  .voice-section-head { align-items: flex-start; margin-bottom: 11px; }
  .voice-section-head p { font-size: 9px; }
  .voice-total { min-width: 56px; padding: 6px; }
  .voice-total b { font-size: 17px; }
  .voice-grid { grid-template-columns: 1fr; max-height: 420px; gap: 6px; }
  .voice-item { padding: 6px 8px; }
  .voice-burmese-name { font-size: 10px; }
  .voice-preview { min-height: 30px; padding: 0 8px; font-size: 8px; }
  .preview-player { align-items: stretch; flex-direction: column; gap: 8px; }
  .preview-player audio { width: 100%; }
  .how-section { grid-template-columns: 1fr; gap: 15px; margin: 0 -17px; padding: 31px 23px; }
  .how-copy h2 { font-size: 21px; line-height: 1.7; }
  .how-copy p { font-size: 9px; }
  .how-steps>div { padding: 10px 0; }
  .quality-section { grid-template-columns: 1fr; gap: 13px; padding: 40px 0 35px; }
  .quality-heading h2 { font-size: 21px; line-height: 1.7; }
  .quality-heading p { font-size: 9px; }
  .quality-cards { gap: 6px; }
  .quality-cards article { min-height: 145px; padding: 11px 9px; }
  .quality-cards article b { font-size: 10px; }
  .quality-cards article p { font-size: 8px; }
  .output-section { padding: 33px 0 37px; }
  .output-heading p { font-size: 9px; }
  .output-card { padding: 15px 13px 14px; }
  .output-topline { font-size: 8px; }
  .output-tag { font-size: 7px; letter-spacing: .6px; }
  .audio-row { gap: 12px; padding: 16px 0 13px; }
  .audio-play { width: 39px; height: 39px; }
  .player-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
  .player-meta strong { font-size: 9px; }
  .player-meta>span { font-size: 8px; }
  .timeline-row { gap: 7px; font-size: 8px; }
  .player-foot { font-size: 7px; }
  .output-actions { gap: 7px; }
  .output-actions .primary-cta { min-height: 35px; }
  .secondary-cta, .download-button { min-height: 32px; padding: 0 8px; font-size: 8px; }
  .privacy-note { font-size: 8px; }
  .site-footer { flex-wrap: wrap; padding-top: 14px; font-size: 8px; }
  .settings-dialog { padding: 17px; }
  .error-dialog { padding: 23px 18px 20px; border-radius: 20px; }
  .dialog-head h2 { font-size: 17px; }
  .key-actions { gap: 6px; }
  .key-actions .primary-cta, .key-actions .secondary-cta { padding: 0 8px; font-size: 8px; }
  .security-warning p { font-size: 8px; }
}
@media (max-width: 390px) {
  .site-shell { padding: 0 13px; }
  .brand-wordmark strong { font-size: 11px; }
  .brand-wordmark small { letter-spacing: -.15px; }
  .api-pill { max-width: 115px; overflow: hidden; text-overflow: ellipsis; }
  .hero { padding-top: 34px; }
  .hero-art { height: 225px; transform: scale(.74); }
  .section-heading h2 { font-size: 20px; }
  .quality-cards article { padding: 9px 7px; }
  .quality-cards article b { font-size: 9px; }
  .quality-cards article p { font-size: 7px; }
  .api-pill { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }


/* AppA after-dark redesign: warm gold light over an ink-black creator studio. */
:root {
  color-scheme: dark;
  color: #f4efe1;
  background: #0b0e0d;
  --navy: #f5f0e3;
  --navy-soft: #dbd3c1;
  --muted: #b0b4af;
  --line: rgba(244, 194, 78, .18);
  --cream: #0b0e0d;
  --cream-deep: #121615;
  --mint: #1b231c;
  --mint-soft: #18201a;
  --orange: #ffd166;
  --orange-deep: #ffbe4a;
  --white: #151a18;
  --shadow: 0 24px 65px rgba(0, 0, 0, .4), 0 0 36px rgba(221, 162, 56, .055);
}
html { background: #0b0e0d; }
body {
  color: #f4efe1;
  background:
    radial-gradient(ellipse at 10% 6%, rgba(74, 61, 29, .2), transparent 34rem),
    radial-gradient(ellipse at 96% 48%, rgba(44, 67, 47, .15), transparent 34rem),
    linear-gradient(165deg, #0b0e0d, #101412 52%, #0b0e0d);
}
.site-shell { overflow: clip; }
.topbar { border-bottom-color: rgba(242, 201, 111, .18); }
.brand-wordmark strong, .brand-wordmark strong span { color: #fff6df; }
.brand-wordmark small, .top-nav a { color: #b7b8ae; }
.top-nav a:hover { color: #ffd166; }
.api-pill, .dialog-api-state { border-color: rgba(255, 209, 102, .24); background: rgba(30, 32, 27, .72); color: #f1e7cb; box-shadow: inset 0 1px rgba(255,255,255,.05); }
.status-dot.active { background: #77e3a0; box-shadow: 0 0 0 3px rgba(119,227,160,.13),0 0 14px rgba(119,227,160,.42); }
.status-dot.pending { background: #ffd166; box-shadow: 0 0 13px rgba(255,209,102,.46); }
.status-dot.error, .output-live-dot.error { background: #ff6874; box-shadow: 0 0 12px rgba(255,104,116,.5); }
.settings-button { border: 1px solid rgba(255,220,137,.5); background: linear-gradient(145deg,#ffda80,#dca744); color: #17140d; box-shadow: 0 5px 24px rgba(225,166,59,.18),inset 0 1px rgba(255,255,255,.7); }
.settings-button:hover { background: linear-gradient(145deg,#ffe4a1,#e1b558); }
.hero { isolation: isolate; }
.hero::before { background: radial-gradient(circle,rgba(232,182,74,.22),rgba(62,82,52,.12) 45%,transparent 75%); filter: blur(12px); opacity: 1; }
.hero-kicker, .section-eyebrow, .light-eyebrow { color: #ffd36d; }
.kicker-spark { color: #ffe29a; filter: drop-shadow(0 0 7px rgba(255,209,102,.58)); animation: appa-icon-drift 3s ease-in-out infinite; }
.hero h1 { color: #fff9eb; text-shadow: 0 4px 34px rgba(244,192,88,.1); }
.hero h1 em, .quality-heading h2 em, .how-copy h2 em { color: #ffd166; text-shadow: 0 0 24px rgba(255,199,83,.15); }
.hero-lede, .quality-heading p { color: #c5c5ba; }
.hero-proof, .hero-points { color: #d2d0c5; }
.proof-dot, .hero-points i { background: #233a2b; color: #b5f0bd; }
.proof-dot { box-shadow: 0 0 0 3px rgba(102,197,126,.12),0 0 14px rgba(102,197,126,.35); }
.primary-cta { background: linear-gradient(140deg,#ffe39b,#f4ba4e 56%,#dda33e); color: #21190c; box-shadow: 0 5px 0 #a97829,0 10px 26px rgba(237,174,65,.14),inset 0 1px rgba(255,255,255,.74); }
.primary-cta:hover { background: linear-gradient(140deg,#ffedbd,#ffd273); box-shadow: 0 3px 0 #a97829,0 8px 24px rgba(237,174,65,.2); }
.hero-art { filter: drop-shadow(0 18px 32px rgba(0,0,0,.18)); }
.art-halo, .art-halo::before, .art-halo::after { border-color: rgba(255,211,113,.22); }
.art-card { box-shadow: 0 25px 65px rgba(0,0,0,.42); }
.art-card-back { background: linear-gradient(140deg,#39432d,#252d24); border-color: rgba(255,215,129,.22); }
.art-card-front { border-color: rgba(255,215,129,.25); background: linear-gradient(140deg,rgba(34,38,31,.96),rgba(20,24,22,.96)); box-shadow: inset 0 1px rgba(255,255,255,.08),0 24px 70px rgba(0,0,0,.48); }
.art-overline, .art-caption small { color: #b4b39f; }
.art-word, .art-caption b { color: #fff3d5; }
.art-bars { color: #ffd166; filter: drop-shadow(0 0 5px rgba(255,202,94,.45)); }
.art-caption { border-top-color: rgba(255,220,142,.16); }
.art-avatar { background: #292e22; }
.art-sticker { border: 1px solid rgba(255,229,159,.22); background: rgba(24,28,24,.84); color: #ffe3a1; backdrop-filter: blur(14px); }
.sticker-two { background: linear-gradient(140deg,#ffe39b,#eab64d); color: #20190d; }
.studio-section { position: relative; }
.section-heading h2, .output-heading h2 { color: #fff5dc; }
.section-heading h2 { white-space: nowrap; font-size: clamp(15px, 2.45vw, 28px); letter-spacing: -.02em; }
.section-number { color: #aaa99e; }
.workspace-card { gap: 1px; border-color: rgba(248,204,104,.32); background: rgba(245,194,83,.19); box-shadow: var(--shadow),inset 0 1px rgba(255,255,255,.04); }
.editor-panel, .delivery-panel { background: linear-gradient(145deg,rgba(28,33,29,.93),rgba(19,23,21,.97)); backdrop-filter: blur(20px) saturate(1.12); -webkit-backdrop-filter: blur(20px) saturate(1.12); }
.delivery-panel { background: linear-gradient(150deg,rgba(36,37,28,.94),rgba(20,24,22,.97)); }
.panel-title-row h3, .voice-section-head h3 { color: #fff5df; }
.step-label { color: #f8ce74; }
.no-autosave, .editor-meta { color: #c3c3b9; }
.no-autosave i { background: #a5dfa4; box-shadow: 0 0 10px rgba(141,222,145,.45); }
.editor-shell { border-color: rgba(255,221,145,.25); background: linear-gradient(145deg,rgba(11,15,14,.9),rgba(20,24,21,.83)); box-shadow: inset 0 2px 18px rgba(0,0,0,.18); }
.editor-shell:focus-within { border-color: #edbf61; box-shadow: 0 0 0 3px rgba(245,185,72,.14),0 0 30px rgba(247,191,87,.08); }
textarea { color: #f6f0e3; caret-color: #ffd166; }
textarea::placeholder { color: #989c91; }
.plain-button { color: #d4cbb4; }
.plain-button:hover { color: #ffd166; }
.clear-button { color: #f09991; }
.script-stats { border-color: rgba(244,225,185,.14); }
.script-stats>div { border-right-color: rgba(244,225,185,.12); }
.script-stats strong { color: #ffe8ad; }
.script-stats span, .switch-label small { color: #b8b8ae; }
.switch-label strong { color: #f0e7d4; }
.switch-track { background: #3a4035; }
.switch-track::after { background: #f4efe1; }
.switch input:checked+.switch-track { background: #75bb81; box-shadow: 0 0 12px rgba(117,187,129,.28); }
.optional-tag { border-color: rgba(255,209,102,.25); background: rgba(255,209,102,.07); color: #f3d697; }
.round-mic { border: 1px solid rgba(255,213,122,.4); background: rgba(255,209,102,.1); color: #ffdc8a; box-shadow: 0 0 18px rgba(255,209,102,.08); animation: appa-icon-drift 4s ease-in-out infinite; }
.field-label { color: #e5d9be; }
.select-wrap select, .key-input-row input, .key-reveal { border-color: rgba(255,218,139,.24); background: rgba(12,16,15,.82); color: #f5eddb; color-scheme: dark; }
.select-wrap>span { color: #f1cb73; }
.model-note, .profile-description, .range-endpoints, .setting-help, .settings-heading p { color: #b8b9af; }
.value-chip { border-color: rgba(255,205,100,.4); background: rgba(255,201,94,.1); color: #ffdc8b; }
.settings-heading h4, .setting-option-group .field-label { color: #fff0cd; }
.setting-option-group, .voice-settings-block { border-color: rgba(255,210,115,.22); background: linear-gradient(140deg,rgba(40,40,30,.82),rgba(23,27,24,.87)); box-shadow: inset 0 1px rgba(255,255,255,.055),0 10px 30px rgba(0,0,0,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.speed-setting { border-color: rgba(255,206,103,.38); background: linear-gradient(125deg,rgba(88,66,28,.4),rgba(30,31,25,.78) 75%); }
.speed-range { accent-color: #ffd166; filter: drop-shadow(0 0 4px rgba(255,209,102,.16)); }
.speed-range::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: linear-gradient(90deg,#9b7638,#ffdc84); }
.speed-range::-webkit-slider-thumb { margin-top: -5px; appearance: none; width: 15px; height: 15px; border: 2px solid #fff2c8; border-radius: 50%; background: #e7b651; box-shadow: 0 0 0 3px rgba(255,209,102,.16),0 0 14px rgba(255,209,102,.35); }
.speed-range::-moz-range-track { height: 5px; border-radius: 99px; background: linear-gradient(90deg,#9b7638,#ffdc84); }
.speed-range::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #fff2c8; border-radius: 50%; background: #e7b651; box-shadow: 0 0 0 3px rgba(255,209,102,.16); }
.choice-buttons button { border-color: rgba(250,222,157,.2); background: rgba(15,19,17,.7); color: #d5d3c9; }
.choice-buttons button[aria-pressed="true"] { box-shadow: inset 0 1px rgba(255,255,255,.3),0 0 14px color-mix(in srgb,var(--choice-border) 28%,transparent); }
.choice-buttons[data-setting="pitch"] button:nth-child(1) { --choice-bg: #202c42; --choice-border: #7295da; --choice-ink: #d7e5ff; }
.choice-buttons[data-setting="pitch"] button:nth-child(2) { --choice-bg: #1d3829; --choice-border: #66c185; --choice-ink: #c8f7d4; }
.choice-buttons[data-setting="pitch"] button:nth-child(3) { --choice-bg: #463518; --choice-border: #e8bb57; --choice-ink: #ffe6a5; }
.choice-buttons[data-setting="expression"] button:nth-child(1) { --choice-bg: #332643; --choice-border: #a986d7; --choice-ink: #ebdcff; }
.choice-buttons[data-setting="expression"] button:nth-child(2) { --choice-bg: #1e3727; --choice-border: #75bb70; --choice-ink: #d4f3c7; }
.choice-buttons[data-setting="expression"] button:nth-child(3) { --choice-bg: #472b20; --choice-border: #e89362; --choice-ink: #ffdfc3; }
.choice-buttons[data-setting="pause"] button:nth-child(1) { --choice-bg: #203741; --choice-border: #69b4ce; --choice-ink: #d6f4ff; }
.choice-buttons[data-setting="pause"] button:nth-child(2) { --choice-bg: #1e3727; --choice-border: #75bb70; --choice-ink: #d4f3c7; }
.choice-buttons[data-setting="pause"] button:nth-child(3) { --choice-bg: #302744; --choice-border: #a991de; --choice-ink: #e7dcff; }
.choice-buttons[data-setting="clarity"] button:nth-child(1) { --choice-bg: #233342; --choice-border: #71a4d5; --choice-ink: #dbeeff; }
.choice-buttons[data-setting="clarity"] button:nth-child(2) { --choice-bg: #453619; --choice-border: #e8bd60; --choice-ink: #ffebba; }
.profile-hint { border: 1px solid rgba(255,211,113,.17); background: rgba(255,209,102,.07); color: #d4c9aa; }
.profile-hint>span:first-child { color: #ffd166; }
.delivery-footer { border-top-color: rgba(248,218,156,.16); }
.remember-label { color: #cbc6b8; }
.remember-label input { accent-color: #ffd166; }
.reset-button { color: #eacb8d; }
.mode-option, .style-item, .voice-item { border-color: rgba(255,214,133,.2); background: rgba(13,17,15,.69); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.mode-option:hover:not(:disabled), .style-item:hover, .voice-item:hover { border-color: rgba(255,209,102,.6); background: rgba(54,47,29,.58); }
.mode-option[aria-pressed="true"], .style-item.is-selected, .voice-item.is-selected { border-color: #dfb451; background: linear-gradient(145deg,rgba(99,73,32,.37),rgba(31,33,26,.72)); box-shadow: inset 3px 0 0 #ffd166,0 0 22px rgba(226,174,74,.08); }
.mode-number { background: #272a21; color: #ffda85; }
.mode-option[aria-pressed="true"] .mode-number { background: linear-gradient(145deg,#ffe29c,#dda947); color: #1f190f; }
.mode-option strong, .style-choice strong, .voice-burmese-name { color: #f8f0de; }
.mode-option small, .style-choice span, .mode-panel-heading p, .voice-section-head p { color: #b9baaf; }
.mode-panel { border-top-color: rgba(255,221,151,.19); }
.mode-panel-heading h4, .voice-mode-voices .voice-section-head h4 { color: #fff0ce; }
.style-grid, .voice-grid { scrollbar-color: #b18c48 rgba(255,255,255,.035); }
.style-preview, .voice-preview { border-color: rgba(255,213,128,.38); background: rgba(255,209,102,.1); color: #ffdb91; }
.style-preview:hover:not(:disabled), .voice-preview:hover:not(:disabled) { border-color: #ffe29d; background: linear-gradient(140deg,#ffe29b,#eab64d); color: #21190d; }
.style-preview.is-playing, .voice-preview.is-playing { border-color: #72bc86; background: rgba(76,157,99,.2); color: #c8f5d3; }
.voice-section { border-color: rgba(255,211,113,.25); background: linear-gradient(145deg,rgba(36,44,34,.82),rgba(22,27,23,.9)); box-shadow: inset 0 1px rgba(255,255,255,.055),0 16px 40px rgba(0,0,0,.17); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.voice-total { border: 1px solid rgba(255,213,128,.24); background: rgba(255,209,102,.1); color: #ffe09b; }
.voice-subline, .voice-id, .voice-footnote, .preview-player span { color: #c1c0b5; }
.preview-player { border-color: rgba(255,209,102,.27); background: linear-gradient(140deg,rgba(46,46,34,.86),rgba(22,27,24,.91)); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.preview-player strong { color: #fff0cd; }
.preview-player audio { color-scheme: dark; }
.how-section { border-top: 1px solid rgba(255,209,102,.14); border-bottom: 1px solid rgba(255,209,102,.14); background: radial-gradient(ellipse at 8% 15%,rgba(128,92,35,.21),transparent 38%),linear-gradient(125deg,#1d211b,#171d1b 60%,#202017); box-shadow: 0 0 50px rgba(228,177,76,.045); }
.how-copy p { color: #d4d1c6; }
.how-steps>div { border-bottom-color: rgba(255,255,255,.12); }
.how-steps>div>span { border-color: rgba(255,214,130,.38); background: rgba(255,209,102,.07); color: #ffdc8d; box-shadow: 0 0 16px rgba(255,209,102,.06); }
.how-steps b { color: #fff1d4; }
.how-steps small { color: #c3c5bd; }
.quality-heading h2 { color: #fff2d7; }
.quality-cards article, .quality-cards article:nth-child(2), .quality-cards article:nth-child(3) { border-color: rgba(255,211,113,.2); background: linear-gradient(145deg,rgba(38,45,35,.81),rgba(21,26,23,.91)); box-shadow: inset 0 1px rgba(255,255,255,.045),0 14px 36px rgba(0,0,0,.12); }
.quality-cards article:nth-child(2) { background: linear-gradient(145deg,rgba(65,50,28,.62),rgba(25,28,23,.9)); }
.quality-cards article span { color: #f0cc7c; }
.quality-cards article b { color: #f9f1de; }
.quality-cards article p { color: #c2c1b6; }
.output-section { border-top-color: rgba(255,214,128,.18); }
.output-heading p { color: #c1c0b4; }
.output-card { border-color: rgba(255,211,113,.27); background: linear-gradient(145deg,rgba(41,43,32,.9),rgba(21,26,23,.97)); box-shadow: var(--shadow),inset 0 1px rgba(255,255,255,.05); }
.output-topline { border-bottom-color: rgba(255,219,147,.16); color: #e2d5b3; }
.output-tag { border-color: rgba(255,209,102,.2); background: rgba(255,209,102,.07); color: #ffdc91; }
.audio-play { background: linear-gradient(145deg,#ffe497,#eab34c); color: #21190d; box-shadow: 0 0 0 6px rgba(255,209,102,.09),0 0 30px rgba(255,209,102,.2),inset 0 1px rgba(255,255,255,.67); }
.player-meta strong { color: #fff0cb; }
.player-meta>span, .timeline-row, .player-foot { color: #c8c4b8; }
.progress-track { background: rgba(255,242,205,.17); }
.progress-fill { background: linear-gradient(90deg,#dda33e,#ffe18e); box-shadow: 0 0 12px rgba(255,209,102,.4); }
.secondary-cta, .download-button { border-color: rgba(255,218,140,.29); background: rgba(24,29,26,.75); color: #f2e4c1; }
.secondary-cta:hover:not(:disabled) { border-color: #e9c16c; background: rgba(255,209,102,.09); color: #ffe6a8; }
.download-button { border-color: rgba(255,209,102,.46); color: #ffdc8c; }
.download-button:hover { background: rgba(255,209,102,.13); }
.clear-output, .remove-key-button { color: #ffa29a; }
.privacy-note { border-color: rgba(255,210,112,.2); background: rgba(255,209,102,.055); color: #d3cebf; }
.privacy-note>span { border-color: rgba(255,217,141,.4); color: #ffda83; }
.site-footer { border-top-color: rgba(255,212,119,.18); color: #b9b9af; }
.footer-brand { color: #fff1cf; }
.site-footer>a:last-child { color: #ffdb8a; }
.settings-dialog { border-color: rgba(255,214,130,.38); background: linear-gradient(145deg,rgba(35,39,32,.98),rgba(19,24,22,.98)); color: #f4efe1; box-shadow: 0 32px 100px rgba(0,0,0,.67),0 0 36px rgba(255,205,102,.1),inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(25px) saturate(1.2); -webkit-backdrop-filter: blur(25px) saturate(1.2); }
.settings-dialog::backdrop { background: rgba(3,5,4,.72); backdrop-filter: blur(7px); }
.dialog-head { border-bottom-color: rgba(255,215,132,.19); }
.dialog-head h2 { color: #fff1d2; }
.dialog-x { border-color: rgba(255,215,132,.2); background: rgba(255,255,255,.045); color: #f5dfac; }
.key-label { color: #f1e6cc; }
.key-input-row input[readonly] { border-color: rgba(255,214,130,.16); background: rgba(255,255,255,.035); color: #c4c1b5; }
.key-reveal:hover { border-color: rgba(255,215,128,.55); color: #ffdf94; }
.key-hint, .dialog-cost-note { color: #bebdb2; }
.key-actions .secondary-cta { border-color: rgba(255,215,128,.24); color: #f1e5c9; }
.key-actions .secondary-cta:hover:not(:disabled) { border-color: #e6bf70; background: rgba(255,209,102,.1); }
.security-warning { border-color: rgba(255,207,104,.28); background: rgba(255,209,102,.075); color: #ffe3a3; }
.security-warning>span { background: rgba(255,209,102,.16); color: #ffdb83; }
.security-warning p { color: #d1c9b7; }
.toast { border-color: rgba(255,209,102,.43); background: linear-gradient(145deg,rgba(79,62,31,.82),rgba(31,31,25,.9)); color: #fff0cd; box-shadow: 0 18px 55px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.1); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.toast-symbol { background: rgba(255,209,102,.2); color: #ffe08c; }
.toast button { color: #e5d5b2; }
.error-dialog { border-color: rgba(255,222,147,.53); background: linear-gradient(145deg,rgba(124,93,39,.46),rgba(39,37,27,.67) 54%,rgba(24,29,26,.71)); color: #fff4d6; box-shadow: 0 32px 100px rgba(0,0,0,.55),0 0 56px rgba(255,197,75,.12),inset 0 1px rgba(255,255,255,.25); backdrop-filter: blur(30px) saturate(1.65); -webkit-backdrop-filter: blur(30px) saturate(1.65); }
.error-dialog::before { border-color: rgba(255,239,192,.27); background: radial-gradient(ellipse at 35% 28%,rgba(255,234,176,.3),rgba(251,190,75,.06) 72%); }
.error-dialog::backdrop { background: rgba(4,6,5,.64); backdrop-filter: blur(5px); }
.error-glass-icon { border-color: rgba(255,209,102,.42); background: linear-gradient(145deg,rgba(255,220,130,.25),rgba(183,123,41,.15)); color: #ffe29c; box-shadow: inset 0 1px rgba(255,255,255,.3),0 8px 28px rgba(236,179,64,.16),0 0 26px rgba(255,209,102,.12); animation: appa-icon-drift 3.2s ease-in-out infinite; }
.error-eyebrow { color: #f7db9d; }
.error-dialog h2 { color: #fff5dd; }
.error-dialog p { border-color: rgba(255,117,131,.29); background: rgba(84,25,31,.38); color: #ffabb1; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.error-dialog p.error-dialog-hint { border: 0; background: transparent; color: #e8dfca; box-shadow: none; }
.error-dialog-links a { color: #ffdb89; }
.error-ok-button { border-color: rgba(255,233,172,.67); background: linear-gradient(135deg,#ffe39b,#daa342); color: #21190d; box-shadow: 0 7px 26px rgba(223,167,63,.24),inset 0 1px rgba(255,255,255,.75); }
.error-ok-button:hover { background: linear-gradient(135deg,#fff0bc,#ecc15e); }
button, .style-item, .voice-item, .quality-cards article, .art-card { transition: border-color .22s,background-color .22s,box-shadow .22s,transform .22s,color .22s; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(255,211,106,.83); outline-offset: 3px; }
.section-eyebrow::before, .step-label::before, .field-label::before { display: inline-block; margin-right: .52em; color: #ffd166; filter: drop-shadow(0 0 5px rgba(255,209,102,.35)); animation: appa-icon-drift 3.8s ease-in-out infinite; }
.section-eyebrow::before { content: "✦"; }
.editor-panel .step-label::before { content: "✎"; }
.delivery-panel .step-label::before { content: "◉"; }
.output-heading .step-label::before { content: "♫"; }
.field-label::before { content: "✧"; font-size: 1.1em; }
.cta-icon { display: inline-block; margin-right: .28em; animation: appa-icon-drift 2.8s ease-in-out infinite; }
.style-preview::before, .voice-preview::before { content: "♫"; display: inline-block; animation: appa-icon-drift 2.8s ease-in-out infinite; }
.style-choice[aria-pressed="true"] strong { color: #ffe2a3; }
.editor-toolbar .plain-button, .mode-option, .style-preview, .voice-preview { transition: transform .22s,border-color .22s,background-color .22s,box-shadow .22s,color .22s; }
.editor-toolbar .plain-button:hover, .mode-option:hover:not(:disabled), .style-preview:hover:not(:disabled), .voice-preview:hover:not(:disabled) { transform: translateY(-2px); }
.art-play, .audio-play { animation: appa-soft-glow 3.8s ease-in-out infinite; }
.art-bars i { transform-origin: center; animation: appa-wave 1.35s ease-in-out infinite alternate; }
.art-bars i:nth-child(3n) { animation-delay: -.4s; }
.art-bars i:nth-child(4n) { animation-delay: -.8s; }
@keyframes appa-icon-drift { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes appa-soft-glow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.13); } }
@keyframes appa-wave { from { transform: scaleY(.65); opacity: .7; } to { transform: scaleY(1.12); opacity: 1; } }
@media (max-width: 720px) {
  .section-heading h2 { font-size: clamp(13px,4.45vw,19px); letter-spacing: -.04em; }
  .workspace-card { border-color: rgba(248,204,104,.33); }
  .editor-panel, .delivery-panel { background: linear-gradient(145deg,rgba(27,32,29,.97),rgba(17,21,19,.99)); }
  .delivery-panel { border-top-color: rgba(255,215,128,.22); }
  .how-section { margin-left: -17px; margin-right: -17px; }
}
@media (max-width: 390px) {
  .site-shell { padding-left: 11px; padding-right: 11px; }
  .section-heading h2 { font-size: clamp(12px,4.15vw,15px); }
}
@media (prefers-reduced-motion: reduce) {
  .kicker-spark, .round-mic, .error-glass-icon, .section-eyebrow::before, .step-label::before, .field-label::before,
  .cta-icon, .style-preview::before, .voice-preview::before, .art-play, .audio-play, .art-bars i { animation: none !important; }
}


/* Luminous liquid-glass pass: translucent surfaces refract slow amber and mint light. */
body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(255, 190, 86, .17), transparent 29rem),
    radial-gradient(ellipse at 84% 58%, rgba(77, 222, 194, .12), transparent 31rem),
    radial-gradient(ellipse at 50% 100%, rgba(129, 101, 225, .095), transparent 35rem),
    linear-gradient(145deg, #090d0d 0%, #101514 48%, #0b1011 100%);
}
body::before, body::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: min(68vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: .52;
  will-change: transform;
}
body::before {
  top: -24rem;
  left: -22rem;
  background: radial-gradient(circle, rgba(249, 177, 69, .36), rgba(231, 166, 72, .12) 38%, transparent 73%);
  animation: appa-glass-float 24s ease-in-out infinite alternate;
}
body::after {
  right: -27rem;
  top: 37%;
  background: radial-gradient(circle, rgba(76, 221, 197, .28), rgba(95, 143, 191, .1) 42%, transparent 72%);
  animation: appa-glass-float 30s ease-in-out -8s infinite alternate-reverse;
}
.site-shell { position: relative; z-index: 1; overflow: clip; }
.topbar { background: rgba(9, 13, 12, .48); backdrop-filter: blur(25px) saturate(1.55); -webkit-backdrop-filter: blur(25px) saturate(1.55); }
.art-card-front {
  background: linear-gradient(137deg, rgba(255, 249, 232, .14), rgba(252, 214, 143, .075) 36%, rgba(30, 44, 40, .67) 100%);
  backdrop-filter: blur(26px) saturate(1.65);
  -webkit-backdrop-filter: blur(26px) saturate(1.65);
  box-shadow: inset 0 1px rgba(255,255,255,.28), inset 0 0 28px rgba(226,204,157,.055), 0 24px 70px rgba(0,0,0,.48), 0 0 38px rgba(250,198,97,.085);
}
.art-word {
  display: block;
  margin-top: 13px;
  overflow: visible;
  white-space: nowrap;
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: -.045em;
  line-height: 1.5;
}
.art-word .welcome-appa {
  display: inline-block;
  background: linear-gradient(110deg, #fff0a8, #ffc65c 55%, #ffebaf);
  background-clip: text;
  -webkit-background-clip: text;
  color: #ffd166;
  -webkit-text-fill-color: transparent;
  font-family: Manrope, sans-serif;
  font-size: 1.14em;
  font-weight: 850;
  letter-spacing: -.065em;
  filter: drop-shadow(0 0 12px rgba(255,201,91,.33));
}
.art-word .welcome-copy {
  display: inline-block;
  margin-left: .2em;
  color: #8ff7df;
  -webkit-text-fill-color: #8ff7df;
  font-family: "Noto Sans Myanmar", sans-serif;
  font-weight: 750;
  letter-spacing: -.035em;
  text-shadow: 0 0 16px rgba(88,245,211,.35);
}
.workspace-card {
  border-color: rgba(255, 223, 156, .42);
  background: linear-gradient(118deg, rgba(255,220,137,.37), rgba(94,231,196,.23) 48%, rgba(255,201,112,.31));
  box-shadow: 0 26px 90px rgba(0,0,0,.38), 0 0 55px rgba(91,227,199,.055), inset 0 1px rgba(255,255,255,.38);
  backdrop-filter: blur(30px) saturate(1.55);
  -webkit-backdrop-filter: blur(30px) saturate(1.55);
}
.editor-panel, .delivery-panel {
  background: linear-gradient(135deg, rgba(239,247,225,.115), rgba(255,217,135,.045) 37%, rgba(24,33,31,.62));
  backdrop-filter: blur(30px) saturate(1.52);
  -webkit-backdrop-filter: blur(30px) saturate(1.52);
  box-shadow: inset 0 1px rgba(255,255,255,.17), inset 0 0 35px rgba(198,234,199,.025);
}
.delivery-panel { background: linear-gradient(145deg, rgba(246,224,175,.12), rgba(89,226,190,.055) 40%, rgba(24,34,31,.65)); }
.editor-shell, .setting-option-group, .voice-settings-block, .voice-section, .preview-player, .quality-cards article, .output-card, .mode-option, .style-item, .voice-item, .settings-dialog {
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}
.setting-option-group, .voice-settings-block {
  background: linear-gradient(130deg, rgba(255,244,216,.105), rgba(86,217,192,.04) 46%, rgba(15,22,20,.53));
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 12px 38px rgba(0,0,0,.13);
}
.voice-section { background: linear-gradient(135deg, rgba(220,247,219,.12), rgba(112,233,200,.055) 48%, rgba(17,24,21,.58)); }
.mode-option, .style-item, .voice-item { background: linear-gradient(135deg, rgba(255,255,255,.085), rgba(248,204,111,.035) 45%, rgba(12,18,16,.4)); }
.preview-player, .output-card { background: linear-gradient(135deg, rgba(255,238,192,.13), rgba(78,219,192,.06) 45%, rgba(18,25,23,.59)); }
.quality-cards article { background: linear-gradient(135deg, rgba(243,255,231,.12), rgba(255,220,138,.05) 45%, rgba(17,24,22,.54)); }
.how-section {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(205,225,186,.21);
  border-radius: 28px;
  background: linear-gradient(128deg, rgba(230,245,216,.105), rgba(81,221,190,.06) 49%, rgba(248,202,110,.095));
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 24px 70px rgba(0,0,0,.23), 0 0 50px rgba(103,227,196,.05);
}
.output-card { box-shadow: 0 26px 85px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.23), inset 0 0 34px rgba(255,221,144,.035); }
.settings-dialog, .error-dialog { backdrop-filter: blur(32px) saturate(1.7); -webkit-backdrop-filter: blur(32px) saturate(1.7); }
.settings-dialog { background: linear-gradient(135deg, rgba(253,247,223,.18), rgba(74,213,188,.09) 50%, rgba(15,21,19,.77)); }
.error-dialog { background: linear-gradient(132deg, rgba(255,229,169,.2), rgba(104,223,191,.075) 46%, rgba(31,33,27,.72)); box-shadow: 0 35px 110px rgba(0,0,0,.56), 0 0 64px rgba(255,199,87,.15), inset 0 1px rgba(255,255,255,.32); }
.heading-emoji {
  display: inline-block;
  margin-right: .3em;
  transform-origin: 52% 76%;
  filter: drop-shadow(0 0 9px rgba(255,214,121,.28));
  animation: appa-title-float 3.1s ease-in-out infinite;
}
#studioTitle .heading-emoji { margin-right: .24em; }
.panel-title-row h3 .heading-emoji, .mode-panel-heading .heading-emoji, .settings-heading .heading-emoji, .voice-section-head .heading-emoji { font-size: .95em; }
.heading-emoji:nth-child(2n) { animation-delay: -.85s; }
@keyframes appa-title-float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(5deg); } }
@keyframes appa-glass-float { from { transform: translate3d(0,-2%,0) scale(.97); } to { transform: translate3d(5%,7%,0) scale(1.08); } }
@media (max-width: 720px) {
  .art-word { margin-top: 8px; font-size: clamp(14px, 4.15vw, 17px); }
  .workspace-card { background: linear-gradient(145deg, rgba(255,223,153,.28), rgba(86,223,190,.17)); }
  .editor-panel, .delivery-panel { background: linear-gradient(138deg, rgba(239,247,225,.11), rgba(75,210,179,.055) 46%, rgba(16,22,20,.72)); }
  .how-section { border-radius: 22px; }
}
@media (max-width: 390px) {
  .art-card-front { padding-left: 17px; padding-right: 17px; }
  .art-word { font-size: clamp(13px, 4.15vw, 15px); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .heading-emoji { animation: none !important; }
}