:root{--color-primary:#e8820c;--color-primary-light:#f5a623;--color-primary-pale:#fdebd0;--color-accent:#5c2d0c;--color-bg:#fff8f0;--color-surface:#fff0e5;--color-text:#3d1f0a;--color-text-muted:#8b6d5c;--color-success:#7cb342;--color-error:#d32f2f;--color-white:#fff;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-3xl:2.5rem;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--radius-sm:.5rem;--radius-md:1rem;--radius-lg:1.5rem;--radius-full:9999px;--transition-fast:.15s ease;--transition-base:.25s ease;--shadow-soft:0 4px 20px #e8820c1a}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}h1,h2,h3,h4,h5,h6{margin:0;line-height:1.2}p{margin:0;line-height:1.6}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:var(--font-family);background:0 0;border:none}button:disabled{cursor:not-allowed;opacity:.6}.screen{max-width:480px;min-height:100dvh;padding:var(--space-xl) var(--space-md);flex-direction:column;justify-content:center;align-items:center;margin:0 auto;display:flex;position:relative}.screen__content{justify-content:center;align-items:center;gap:var(--space-xl);text-align:center;flex-direction:column;flex:1;width:100%;display:flex}.screen__tagline{gap:var(--space-sm);flex-direction:column;display:flex}.screen__title{font-size:var(--font-size-xl);color:var(--color-accent);font-weight:700}.screen__subtitle{font-size:var(--font-size-base);color:var(--color-text-muted)}.header{text-align:center;width:100%;padding-bottom:var(--space-lg);align-self:flex-start}.header__logo{font-size:var(--font-size-lg);color:var(--color-primary);letter-spacing:-.02em;font-weight:800}.footer{text-align:center;width:100%;padding-top:var(--space-lg);align-self:flex-end}.footer__links{justify-content:center;align-items:center;gap:var(--space-sm);display:flex}.footer__link{font-size:var(--font-size-xs);color:var(--color-text-muted);transition:color var(--transition-fast)}.footer__link:hover{color:var(--color-text);text-decoration:none}.footer__separator{color:var(--color-text-muted);font-size:var(--font-size-xs)}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-full);font-size:var(--font-size-base);transition:background-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);white-space:nowrap;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}.btn:active:not(:disabled){transform:scale(.97)}.btn--primary{background-color:var(--color-accent);color:var(--color-white);width:100%}.btn--primary:hover:not(:disabled){background-color:#7a3d10}.btn--secondary{color:var(--color-accent);border:2px solid var(--color-accent);background-color:#0000}.btn--secondary:hover:not(:disabled){background-color:var(--color-primary-pale)}.btn--ghost{color:var(--color-text-muted);padding:var(--space-sm) var(--space-md);background-color:#0000}.btn--ghost:hover:not(:disabled){color:var(--color-text)}.btn--share{background-color:var(--color-success);color:var(--color-white);width:100%;margin-top:var(--space-sm)}.btn--share:hover:not(:disabled){background-color:#689f38}.btn--sm{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)}.btn--lg{padding:var(--space-lg) var(--space-2xl);font-size:var(--font-size-lg)}@keyframes pulse-ring{0%{box-shadow:0 0 #e8820c99,0 0 #e8820c4d}70%{box-shadow:0 0 0 16px #e8820c00,0 0 0 32px #e8820c00}to{box-shadow:0 0 #e8820c00,0 0 #e8820c00}}@keyframes drop-fall{0%{opacity:0;transform:translateY(-60px)scale(.8)}40%{opacity:1}70%{transform:translateY(0)scale(1)}80%{transform:translateY(-8px)scale(1.05)}90%{transform:translateY(4px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes dot-blink{0%,to{opacity:1}50%{opacity:.2}}@keyframes skeleton-shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}.record-button{background-color:var(--color-primary);width:120px;height:120px;color:var(--color-white);cursor:pointer;transition:transform var(--transition-fast), background-color var(--transition-fast);box-shadow:0 0 0 8px #e8820c33, 0 0 0 16px #e8820c1a, var(--shadow-soft);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.record-button:hover:not(:disabled){background-color:var(--color-primary-light);transform:scale(1.05)}.record-button:active:not(:disabled){transform:scale(.97)}.record-button--recording{background-color:var(--color-error);animation:1.5s ease-out infinite pulse-ring;box-shadow:0 0 0 8px #d32f2f33,0 0 0 16px #d32f2f1a}.record-button--recording:hover:not(:disabled){background-color:#c62828}.recording-indicator{align-items:center;gap:var(--space-sm);font-size:var(--font-size-lg);color:var(--color-error);font-weight:600;display:flex}.recording-indicator__dot{background-color:var(--color-error);border-radius:50%;width:10px;height:10px;animation:1s ease-in-out infinite dot-blink;display:inline-block}.recording-indicator__time{font-variant-numeric:tabular-nums;letter-spacing:.05em}.play-button-wrapper{align-items:center;gap:var(--space-lg);flex-direction:column;width:100%;display:flex}.play-button{background-color:var(--color-primary);width:120px;height:120px;color:var(--color-white);cursor:pointer;transition:transform var(--transition-fast), background-color var(--transition-fast);box-shadow:0 0 0 8px #e8820c33, 0 0 0 16px #e8820c1a, var(--shadow-soft);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.play-button:hover:not(:disabled){background-color:var(--color-primary-light);transform:scale(1.05)}.play-button:active:not(:disabled){transform:scale(.97)}.warning-box{border:1px solid var(--color-primary-pale);border-left:4px solid var(--color-primary);border-radius:var(--radius-sm);padding:var(--space-md);text-align:left;max-width:340px;font-size:var(--font-size-sm);color:var(--color-accent);background-color:#fff3e0;line-height:1.5}.progress-bar{background-color:var(--color-primary-pale);border-radius:var(--radius-full);width:100%;height:6px;overflow:hidden}.progress-bar__fill{background-color:var(--color-primary);border-radius:var(--radius-full);height:100%;transition:width var(--transition-base)}.progress-bar--playback{pointer-events:none;-webkit-user-select:none;user-select:none}.playback-progress{gap:var(--space-sm);-webkit-user-select:none;user-select:none;flex-direction:column;width:100%;display:flex}.playback-progress__times{font-size:var(--font-size-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums;justify-content:space-between;display:flex}.upload-progress{gap:var(--space-sm);flex-direction:column;width:100%;display:flex}.upload-progress__label{font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:center}.card{background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-lg);width:100%;box-shadow:var(--shadow-soft)}.audio-preview,.audio-preview__player{width:100%}.copy-link{gap:var(--space-sm);flex-direction:column;width:100%;display:flex}.copy-link-field{background-color:var(--color-white);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);border:1px solid #5c2d0c26;overflow:hidden}.copy-link-field__url{font-size:var(--font-size-sm);color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;display:block;overflow:hidden}.copy-link__btn{width:100%}.copy-link__btn--copied{border-color:var(--color-success);color:var(--color-success)}.drop-animation{justify-content:center;align-items:center;height:80px;display:flex}.drop-animation__drop{background-color:var(--color-primary);border-radius:50%/60% 60% 40% 40%;width:40px;height:52px;animation:.8s cubic-bezier(.22,1,.36,1) forwards drop-fall;position:relative}.drop-animation__drop:before{content:"";border-left:10px solid #0000;border-right:10px solid #0000;border-bottom:20px solid var(--color-primary);width:0;height:0;position:absolute;top:-18px;left:50%;transform:translate(-50%)}.status-screen{align-items:center;gap:var(--space-lg);text-align:center;padding:var(--space-xl);flex-direction:column;display:flex}.status-screen__icon{font-size:4rem;line-height:1}.status-screen__title{font-size:var(--font-size-xl);color:var(--color-accent);font-weight:700}.status-screen__description{font-size:var(--font-size-base);color:var(--color-text-muted);max-width:300px;line-height:1.6}.status-screen__link{margin-top:var(--space-md)}.preview__actions{gap:var(--space-md);flex-direction:column;width:100%;display:flex}.error-message{border-radius:var(--radius-sm);padding:var(--space-md);text-align:center;font-size:var(--font-size-sm);color:var(--color-error);gap:var(--space-sm);background-color:#ffebee;border:1px solid #ef9a9a;flex-direction:column;width:100%;display:flex}.toast{bottom:var(--space-xl);background-color:var(--color-accent);color:var(--color-white);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);font-size:var(--font-size-sm);pointer-events:none;transition:transform var(--transition-base), opacity var(--transition-base);opacity:0;z-index:999;white-space:nowrap;font-weight:600;position:fixed;left:50%;transform:translate(-50%)translateY(100px)}.toast--visible{opacity:1;transform:translate(-50%)translateY(0)}.skeleton{align-items:center;gap:var(--space-xl);width:100%;padding:var(--space-xl);flex-direction:column;display:flex}.skeleton__block{border-radius:var(--radius-sm);background:linear-gradient(90deg, var(--color-surface) 25%, var(--color-primary-pale) 50%, var(--color-surface) 75%);background-size:800px 100%;animation:1.4s linear infinite skeleton-shimmer}.skeleton__block--title{width:200px;height:2rem}.skeleton__block--button{border-radius:50%;width:120px;height:120px}@media (max-width:480px){.screen{padding:var(--space-lg) var(--space-md)}.screen__title{font-size:var(--font-size-lg)}.record-button,.play-button{width:104px;height:104px}}