:root { color-scheme: dark; --bg:#0a0c12; --surface:#10131d; --surface-2:#141824; --line:#252c3d; --line-bright:#39425a; --text:#f1f3f8; --muted:#8b93a7; --blue:#5b7cff; --violet:#9b6dff; --cyan:#4cc9f0; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { min-width:320px; margin:0; color:var(--text); background:radial-gradient(circle at 70% 25%,rgba(91,124,255,.15),transparent 31%),radial-gradient(circle at 18% 77%,rgba(155,109,255,.09),transparent 30%),var(--bg); font-family:Inter,Arial,sans-serif; }
body::before { position:fixed; z-index:0; inset:0; content:""; opacity:.34; pointer-events:none; background-image:linear-gradient(rgba(135,152,196,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(135,152,196,.055) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,black,transparent 88%); }
body::after { display:none; }
.app-shell { position:relative; z-index:1; }
.app-shell { width:min(100%,1200px); min-height:100vh; margin:auto; padding:23px 36px 22px; display:flex; flex-direction:column; }
.topbar,footer { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); font-size:15px; font-weight:800; letter-spacing:-.045em; text-decoration:none; }.brand b { padding-left:10px; border-left:1px solid var(--line-bright); color:var(--muted); font:500 10px "JetBrains Mono",monospace; letter-spacing:.1em; }.brand-mark { width:18px; height:18px; display:grid; grid-template: repeat(2,1fr) / repeat(2,1fr); gap:2px; }
.brand-mark span { background:linear-gradient(135deg,var(--blue),var(--violet)); border-radius:2px; animation:mark 3s ease-in-out infinite; }
.brand-mark span:nth-child(2) { animation-delay:.2s; background:var(--blue); }
.brand-mark span:nth-child(3) { animation-delay:.4s; background:#4f46e5; }
.brand-mark span:nth-child(4) { animation-delay:.6s; background:var(--violet); }
@keyframes mark {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(.75); opacity:.5; }
}.privacy-note,footer { margin:0; color:var(--muted); font:500 10px "JetBrains Mono",monospace; letter-spacing:.055em; }.privacy-note i,.eyebrow i { width:7px; height:7px; display:inline-block; border-radius:50%; background:#78e3a4; box-shadow:0 0 10px #78e3a4; margin-right:7px; }
.converter { width:min(100%,730px); margin:auto; padding:74px 0 58px; }.heading { margin-bottom:35px; }.eyebrow { margin:0 0 18px; color:#aab3ca; font:500 10px "JetBrains Mono",monospace; letter-spacing:.08em; }.eyebrow span { color:#596179; margin:0 6px; } h1 { margin:0; max-width:680px; font-size:clamp(44px,6.7vw,73px); font-weight:800; line-height:.99; letter-spacing:-.065em; } h1 em { font-style:normal; background:linear-gradient(105deg,#6988ff,#a47aff 32%,#d797ff 50%,#6988ff 68%,#a47aff); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradient-flow 5s linear infinite; }.intro { width:min(100%,460px); margin:21px 0 0; color:var(--muted); font-size:14px; line-height:1.72; } @keyframes gradient-flow { to { background-position:220% 0; } } @media (prefers-reduced-motion:reduce) { h1 em { animation:none; } }
.drop-zone { min-height:255px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line-bright); border-radius:22px; background:linear-gradient(135deg,rgba(20,24,36,.9),rgba(14,17,27,.9)); cursor:pointer; transition:border-color .2s,transform .2s,box-shadow .2s; }.drop-zone::before { position:absolute; inset:7px; content:""; pointer-events:none; border:1px dashed rgba(115,133,180,.2); border-radius:16px; }.drop-zone:hover,.drop-zone.is-dragging { border-color:var(--blue); box-shadow:0 0 0 4px rgba(91,124,255,.11),inset 0 0 70px rgba(91,124,255,.08); }.drop-zone.is-dragging { transform:translateY(-2px); }.drop-decoration { position:absolute; width:210px; height:210px; border-radius:50%; border:1px solid rgba(91,124,255,.13); pointer-events:none; }.decoration-top { top:-130px; right:-68px; }.decoration-bottom { bottom:-155px; left:-65px; }.upload-mark { height:45px; width:45px; position:relative; margin-bottom:17px; border:1px solid rgba(137,158,255,.7); border-radius:12px; background:linear-gradient(135deg,rgba(91,124,255,.22),rgba(155,109,255,.1)); }.upload-mark span { position:absolute; display:block; background:#c7d3ff; }.upload-mark span:first-child { width:2px; height:20px; top:10px; left:21px; }.upload-mark span:nth-child(2),.upload-mark span:nth-child(3) { width:10px; height:2px; top:12px; }.upload-mark span:nth-child(2) { left:14px; transform:rotate(45deg); }.upload-mark span:nth-child(3) { left:21px; transform:rotate(-45deg); }.drop-title { z-index:1; margin:0; font-size:16px; font-weight:700; letter-spacing:-.025em; }.drop-copy,.file-types { z-index:1; margin:7px 0 0; color:var(--muted); font-size:12px; }.drop-copy span { color:#aebdff; text-decoration:underline; text-underline-offset:3px; }.file-types { margin-top:21px; font:500 9px "JetBrains Mono",monospace; letter-spacing:.06em; color:#727c96; }
.file-card { display:flex; align-items:center; gap:13px; margin-top:13px; padding:13px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }.file-icon { padding:9px 6px; color:#dbe3ff; border-radius:7px; background:rgba(91,124,255,.2); font:500 9px "JetBrains Mono",monospace; }.file-details { min-width:0; flex:1; }.file-details p { overflow:hidden; margin:0; text-overflow:ellipsis; white-space:nowrap; }.file-details p:first-child { font-size:13px; font-weight:600; }.file-details p:last-child { margin-top:4px; color:var(--muted); font:10px "JetBrains Mono",monospace; }.remove-button { border:0; background:none; color:var(--muted); cursor:pointer; font:10px "JetBrains Mono",monospace; }.remove-button:hover { color:var(--text); }
.controls { display:grid; grid-template-columns:1fr 1.18fr; gap:12px; margin-top:13px; }.format-field { height:62px; position:relative; display:flex; flex-direction:column; gap:3px; padding:9px 15px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }.format-field > span { color:var(--muted); font:500 9px "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.format-select { display:flex; align-items:center; width:100%; padding:0; border:0; background:transparent; color:var(--text); cursor:pointer; font:600 14px Inter,sans-serif; text-align:left; }.format-menu { position:absolute; z-index:10; bottom:calc(100% + 8px); left:0; width:100%; max-height:295px; overflow-y:auto; padding:8px; border:1px solid var(--line-bright); border-radius:16px; background:#131724; box-shadow:0 -18px 38px rgba(0,0,0,.36); }.format-menu p { margin:7px 8px 4px; color:#aebdff; font:600 10px "JetBrains Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }.format-menu p:not(:first-child) { margin-top:12px; }.format-menu button { display:block; width:100%; padding:8px 10px; border:0; border-radius:9px; background:transparent; color:var(--text); cursor:pointer; font:600 13px Inter,sans-serif; text-align:left; transition:background .16s,color .16s; }.format-menu button:hover,.format-menu button[aria-selected="true"] { background:rgba(91,124,255,.18); color:#d6deff; }.format-menu button[aria-selected="true"]::after { float:right; content:"✓"; color:#91a6ff; }.convert-button { display:flex; align-items:center; justify-content:space-between; padding:0 20px; border:0; border-radius:15px; background:#303951; color:#8791a9; font:700 14px Inter,sans-serif; cursor:not-allowed; transition:transform .26s ease,background .26s ease,box-shadow .26s ease; }.convert-button:not(:disabled) { background:linear-gradient(105deg,var(--blue),#7a75ff 62%,var(--violet)); color:white; cursor:pointer; box-shadow:0 8px 25px rgba(91,124,255,.22); }.convert-button:not(:disabled):hover { transform:translateY(-2px); }.convert-button.is-download { background:linear-gradient(105deg,#626fff,#9b6dff); animation:download-ready .42s ease both; }.button-arrow { font-size:21px; font-weight:400; }.progress-panel { margin-top:15px; padding:13px 15px; border:1px solid var(--line); border-radius:15px; background:rgba(16,19,29,.8); }.progress-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color:var(--muted); font:500 10px "JetBrains Mono",monospace; }.progress-panel.is-working .progress-head { color:#aebdff; }.progress-track { height:5px; overflow:hidden; border-radius:100px; background:#252c3d; }.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--violet)); transition:width .3s ease; }@keyframes download-ready { from { opacity:.45; transform:scale(.97); } to { opacity:1; transform:scale(1); } } footer { padding-top:12px; border-top:1px solid rgba(51,61,85,.65); font-size:9px; }
@media (max-width:620px) { .app-shell { padding:21px 19px; }.privacy-note { display:none; }.converter { padding:52px 0; }.controls { grid-template-columns:1fr; }.convert-button { height:58px; } footer { gap:12px; font-size:8px; }.brand b { display:none; } }