:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f6f4ef; color: #252728; }
* { box-sizing: border-box; }
body { margin: 0; }
.app { max-width: 760px; margin: 0 auto; padding: 48px 20px 32px; }
header { margin-bottom: 28px; }
.eyebrow { color: #754ab4; font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 9px 0; font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.1; }
h2 { margin: 0 0 18px; font-size: 1.15rem; }
p { line-height: 1.6; }
header p, .hint, footer { color: #626468; }
.card { margin: 18px 0; padding: 24px; border: 1px solid #e2ded6; border-radius: 20px; background: #fff; box-shadow: 0 10px 32px #342b1c09; }
.upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 128px; padding: 20px; border: 2px dashed #b8a5d1; border-radius: 14px; background: #faf7fe; color: #63418d; text-align: center; cursor: pointer; font-weight: 700; }
.upload:hover { background: #f3ebfb; }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload:focus-within { outline: 3px solid #a078d4; outline-offset: 2px; }
.upload small { color: #76727b; font-weight: 400; }
#preview { display: block; width: 100%; max-height: 360px; object-fit: contain; margin-top: 18px; border-radius: 12px; background: #eee; }
#preview[hidden], [hidden] { display: none !important; }
.field { display: block; margin-bottom: 18px; font-weight: 600; }
.field output { float: right; color: #754ab4; }
input[type="range"] { display: block; width: 100%; margin: 12px 0 0; accent-color: #754ab4; }
button { width: 100%; padding: 14px 20px; border: 0; border-radius: 12px; background: #754ab4; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
button:hover:not(:disabled) { background: #623a9e; }
button:disabled { background: #aaa5b0; cursor: wait; }
.secondary { background: #efe8f8; color: #503579; }
.secondary:hover:not(:disabled) { background: #e2d4f4; }
.hint { margin: 14px 0 0; font-size: .85rem; }
.progress { margin-top: 20px; }
progress { width: 100%; height: 14px; accent-color: #754ab4; }
#status { margin: 8px 0 0; color: #5b5660; font-size: .9rem; }
.error { padding: 12px; border-radius: 10px; background: #fff0ee; color: #a02d25; overflow-wrap: anywhere; }
#caption { color: #5b5660; }
textarea { display: block; width: 100%; margin: 8px 0 14px; padding: 12px; border: 1px solid #cdc4d8; border-radius: 10px; font: inherit; resize: vertical; }
audio { display: block; width: 100%; margin-top: 22px; }
.download { display: inline-block; margin-top: 10px; color: #623a9e; font-weight: 700; }
footer { margin-top: 26px; text-align: center; font-size: .8rem; }