@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--m3-primary: #00A4BD;--m3-on-primary: #ffffff;--m3-primary-container: rgba(0, 164, 189, .1);--m3-on-primary-container: #d0f4f9;--m3-background: #001a1e;--m3-on-background: #ffffff;--m3-surface: #002b31;--m3-on-surface: #ffffff;--m3-surface-variant: rgba(0, 164, 189, .05);--m3-on-surface-variant: rgba(255, 255, 255, .7);--m3-outline: #007c8d;--glass-bg: rgba(0, 26, 30, .7);--glass-border: rgba(255, 255, 255, .1);--white-pattern: rgba(255, 255, 255, .03)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--m3-background);color:var(--m3-on-background);min-height:100vh;overflow-x:hidden}.dot-grid{background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 0);background-size:24px 24px;min-height:100vh;width:100%}.aurora-blur{filter:blur(120px);position:absolute;z-index:-1;pointer-events:none;border-radius:50%}.app-container{max-width:1200px;margin:0 auto;padding:8rem 2rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}@media(max-width:1024px){.app-container{grid-template-columns:1fr;gap:2rem;padding-top:6rem}}.navbar{position:fixed;top:1rem;left:50%;transform:translate(-50%);width:95%;max-width:1200px;z-index:100;background:#0000004d;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--glass-border);border-radius:32px;padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.m3-card{background:var(--m3-surface-variant);border:1px solid var(--glass-border);border-radius:32px;padding:2rem;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}h1{font-size:2.5rem;font-weight:900;line-height:1.2;margin-bottom:1.5rem;letter-spacing:-.02em;white-space:nowrap}@media(max-width:640px){h1{font-size:1.75rem;white-space:normal}}.gradient-text{background:linear-gradient(135deg,#22d3ee,#00acc1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-size:1.125rem;color:var(--m3-on-surface-variant);line-height:1.6;margin-bottom:2rem}.upload-zone{border:2px dashed var(--glass-border);border-radius:24px;padding:3rem 2rem;text-align:center;cursor:pointer;background:#ffffff03;transition:all .3s cubic-bezier(.4,0,.2,1)}.upload-zone:hover{border-color:var(--m3-primary);background:#135bec0d;transform:translateY(-2px)}.file-item{background:#ffffff08;padding:1rem;border-radius:16px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--glass-border);margin-top:.75rem}.format-toggle{display:flex;background:#ffffff08;padding:6px;border-radius:16px;border:1px solid var(--glass-border)}.format-btn{flex:1;padding:.75rem;border:none;background:transparent;color:var(--m3-on-surface-variant);font-weight:700;border-radius:12px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem}.format-btn.active{background:var(--m3-primary);color:#fff;box-shadow:0 4px 12px #135bec4d}.convert-btn{width:100%;padding:1.25rem;background:var(--m3-primary);color:#fff;border:none;border-radius:16px;font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .3s;box-shadow:0 8px 16px -4px #135bec66}.convert-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 20px -4px #135bec80}.convert-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.step-item{display:flex;gap:1.5rem;margin-bottom:2rem;background:var(--white-pattern);padding:1.5rem;border-radius:24px;border:1px solid rgba(255,255,255,.05);transition:all .3s ease}.step-item:hover{background:#ffffff0a;transform:translate(5px)}.step-number{width:40px;height:40px;background:var(--m3-primary-container);color:var(--m3-primary);border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}.step-content h3{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;color:#fff}.step-content p{color:var(--m3-on-surface-variant);font-size:.9375rem;line-height:1.5}.loading-spinner{width:18px;height:18px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
