:root{--ink: #1a2332;--ink-soft: #3d4a5c;--paper: #f7f3ec;--panel: rgba(255, 252, 247, .86);--line: rgba(26, 35, 50, .12);--accent: #0d7a6f;--accent-deep: #08574f;--accent-glow: rgba(13, 122, 111, .18);--warn: #a65d2e;--font-display: "Instrument Serif", Georgia, serif;--font-body: "DM Sans", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased}.atmosphere{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(ellipse 80% 55% at 12% -10%,rgba(13,122,111,.22),transparent 55%),radial-gradient(ellipse 70% 50% at 95% 15%,rgba(166,93,46,.14),transparent 50%),radial-gradient(ellipse 60% 40% at 50% 100%,rgba(26,35,50,.06),transparent 55%),linear-gradient(165deg,#f7f3ec,#ebe4d8 48%,#e4ece9)}.atmosphere:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply;pointer-events:none}.app{width:min(640px,calc(100% - 2rem));margin:0 auto;padding:clamp(2.5rem,8vh,4.5rem) 0 3rem;animation:rise .7s ease-out both}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.brand{margin-bottom:1.75rem}.brand-mark{margin:0;font-family:var(--font-display);font-size:clamp(3.25rem,10vw,4.75rem);font-weight:400;letter-spacing:-.02em;line-height:.95;color:var(--ink)}.brand-sub{margin:.65rem 0 0;max-width:28rem;color:var(--ink-soft);font-size:1.02rem;font-weight:400}.panel{display:flex;flex-direction:column;gap:.85rem;padding:1.35rem 1.35rem 1.2rem;background:var(--panel);border:1px solid var(--line);border-radius:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 40px #1a23320f;animation:rise .8s ease-out .08s both}.label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}textarea,select,input[type=range]{width:100%;font:inherit}textarea,select{margin-top:.4rem;padding:.8rem .9rem;color:var(--ink);background:#ffffffb3;border:1px solid var(--line);border-radius:12px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}textarea{resize:vertical;min-height:7.5rem;line-height:1.55}textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.controls{display:grid;grid-template-columns:1.4fr 1fr;gap:.9rem}@media(max-width:560px){.controls{grid-template-columns:1fr}}.field{min-width:0}#speed{margin-top:.7rem;accent-color:var(--accent)}#speed-value{font-weight:500;text-transform:none;letter-spacing:0;color:var(--accent-deep)}.actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.25rem}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;font:inherit;font-weight:600;padding:.75rem 1.2rem;border-radius:999px;background:var(--accent);color:#fff;transition:transform .15s ease,background .15s ease,opacity .15s ease}button:hover:not(:disabled){background:var(--accent-deep);transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.45;cursor:not-allowed}button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}button.ghost:hover:not(:disabled){background:#1a23320a}.status{min-height:1.35rem;font-size:.9rem;color:var(--ink-soft)}.status.error{color:var(--warn)}.progress{height:4px;border-radius:999px;background:#1a233214;overflow:hidden}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#2aa897);border-radius:inherit;transition:width .2s ease}audio{width:100%;margin-top:.15rem}