@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500&display=swap');
:root { --ink:#f2ece6; --muted:#a89f97; --faint:#6f6862; --void:#0a0908; --raised:#131110; --line:#211d1a; --dawn:#7a1f1a; --bright:#b3291f; --deep:#451412; --moon:#a25640; --soft:#c57756; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--void); font-family:Inter, Helvetica, Arial, sans-serif; font-weight:300; line-height:1.6; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); z-index:5; }
.shell { max-width:1240px; margin:auto; padding:0 42px; }
.topbar { height:92px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font:500 10px Inter, sans-serif; letter-spacing:.22em; }
.brand { display:flex; gap:13px; align-items:center; }.brand-mark { color:var(--void); background:var(--bright); width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font:26px 'Cormorant Garamond', serif; line-height:1; transform:rotate(-16deg); }.local-pill { color:var(--faint); display:flex; gap:9px; align-items:center; text-transform:uppercase; letter-spacing:.12em; }.pulse { width:7px; height:7px; background:var(--bright); border-radius:50%; box-shadow:0 0 0 3px var(--deep); }
.hero { min-height:350px; padding:76px 0 60px; display:flex; justify-content:space-between; align-items:center; }.hero-copy { max-width:710px; }.eyebrow,.section-label { color:var(--faint); font:500 10px Inter, sans-serif; letter-spacing:.25em; text-transform:uppercase; }.hero h1 { font:300 clamp(57px,7.5vw,96px)/.83 'Cormorant Garamond', Georgia, serif; letter-spacing:-.025em; margin:23px 0 25px; }.hero h1 em { color:var(--soft); font-style:normal; }.intro { color:var(--muted); font-size:15px; line-height:1.7; max-width:430px; }
.hero-orbit { width:210px; height:210px; border:1px solid var(--line); border-radius:50%; position:relative; margin-right:8%; color:var(--faint); font:500 9px/1.5 Inter,sans-serif; letter-spacing:.2em; text-align:center; display:grid; place-items:center; }.hero-orbit:before,.hero-orbit:after,.hero-orbit span { content:""; position:absolute; border:1px solid var(--dawn); border-radius:50%; transform:rotate(-25deg); }.hero-orbit:before { inset:23px -15px; }.hero-orbit:after { inset:-15px 23px; border-color:var(--line); }.hero-orbit span { width:6px; height:6px; background:var(--bright); border:0; top:23px; left:38px; }.hero-orbit span:nth-child(2) { top:auto; left:auto; bottom:29px; right:19px; background:var(--soft); }.hero-orbit span:nth-child(3) { top:50%; left:50%; background:var(--ink); box-shadow:0 0 0 6px var(--dawn); }.hero-orbit i { font-style:normal; }
.workspace { display:grid; grid-template-columns:1.07fr .93fr; gap:18px; }.controls-card,.queue-card { background:var(--raised); border:1px solid var(--line); }.controls-card { padding:18px; }.dropzone { min-height:220px; border:1px dashed #4a3c36; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; transition:.25s; }.dropzone.over { background:var(--deep); border-color:var(--soft); }.drop-icon { color:var(--soft); font:48px 'Cormorant Garamond',serif; line-height:.7; }.dropzone strong { display:block; font:400 25px 'Cormorant Garamond',serif; }.dropzone span,.dropzone small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }.dropzone button,.text-button { border:0; background:none; color:var(--ink); text-decoration:underline; cursor:pointer; padding:0; font:inherit; }.settings { padding:28px 10px 4px; }.setting-row { padding:20px 0; border-bottom:1px solid var(--line); }.setting-row label { display:flex; justify-content:space-between; font-size:12px; }.setting-row label span { color:var(--soft); font:500 10px Inter,sans-serif; text-transform:uppercase; letter-spacing:.12em; }.segmented,.quality-buttons { display:flex; gap:5px; margin-top:12px; }.segmented button,.quality-buttons button { border:1px solid var(--line); background:transparent; color:var(--muted); padding:9px 18px; cursor:pointer; font:500 10px Inter,sans-serif; letter-spacing:.1em; }.segmented button.active,.quality-buttons button.active { background:var(--dawn); color:var(--ink); border-color:var(--dawn); } input[type=range] { accent-color:var(--bright); width:100%; margin-top:16px; }.range-labels { display:flex; justify-content:space-between; color:var(--faint); font:10px Inter,sans-serif; margin-top:4px; }.primary,.secondary { width:100%; border:0; background:var(--dawn); color:var(--ink); padding:16px; margin-top:23px; font:500 10px Inter,sans-serif; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }.primary:hover,.secondary:hover { background:var(--bright); }.primary:disabled { cursor:not-allowed; opacity:.4; }.primary span,.secondary span { float:right; font:18px 'Cormorant Garamond',serif; line-height:10px; }.hint { color:var(--faint); font-size:11px; margin:12px 0 0; }
.queue-card { padding:28px 26px; display:flex; flex-direction:column; min-height:555px; }.queue-heading { display:flex; justify-content:space-between; align-items:start; }.queue-heading h2 { font:300 34px/1 'Cormorant Garamond',serif; margin:12px 0 25px; }.empty { flex:1; display:grid; place-content:center; text-align:center; color:var(--muted); }.empty span { color:var(--soft); font:62px 'Cormorant Garamond',serif; }.empty p { font-size:12px; line-height:1.7; }.queue { display:flex; flex-direction:column; gap:9px; }.track { border:1px solid var(--line); padding:13px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }.track-name { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:270px; }.track-meta { color:var(--faint); font:10px Inter,sans-serif; margin-top:5px; }.track-status { color:var(--faint); font:10px Inter,sans-serif; text-align:right; }.track-status.done { color:var(--soft); }.track-status.error { color:var(--bright); }.track-progress { height:2px; background:#251d19; margin-top:9px; grid-column:1/-1; }.track-progress i { display:block; height:100%; width:0; background:var(--bright); transition:width .2s; }.remove { border:0; background:none; color:var(--faint); cursor:pointer; padding:2px 0 0 6px; }.batch-actions { margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:15px; }.batch-actions span { color:var(--faint); font:10px Inter,sans-serif; }.secondary { width:auto; min-width:185px; margin:0; background:var(--ink); color:var(--void); }
footer { display:flex; justify-content:space-between; color:var(--faint); font:10px Inter,sans-serif; padding:28px 0 35px; letter-spacing:.15em; text-transform:uppercase; }
input[type=checkbox] { accent-color:var(--bright); }
@media (max-width:800px) { .shell { padding:0 18px; }.topbar { height:72px; }.local-pill { display:none; }.hero { padding:50px 0 38px; }.hero-orbit { display:none; }.workspace { grid-template-columns:1fr; }.queue-card { min-height:420px; } footer { gap:12px; flex-direction:column; } }