:root { --ink:#0e1726; --muted:#697386; --paper:#f4f6f1; --line:#d9dfd8; --acid:#c5f36a; --blue:#3559e8; --red:#ed6b58; --card:#ffffff; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:"Space Grotesk","Avenir Next",sans-serif; }
body { background-image:radial-gradient(circle at 10% 0%, rgba(197,243,106,.28), transparent 28rem), linear-gradient(120deg, rgba(14,23,38,.025) 1px, transparent 1px), linear-gradient(30deg, rgba(14,23,38,.025) 1px, transparent 1px); background-size:auto, 34px 34px, 34px 34px; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1240px, calc(100% - 48px)); margin:0 auto; }
.login-view { min-height:100vh; display:grid; align-content:center; max-width:520px; padding:56px 0; animation:rise .7s ease both; }
.login-mark { display:flex; gap:5px; height:44px; align-items:end; margin-bottom:32px; }
.login-mark span { display:block; width:10px; background:var(--ink); transform:skew(-18deg); }
.login-mark span:nth-child(1){height:20px}.login-mark span:nth-child(2){height:32px;background:var(--blue)}.login-mark span:nth-child(3){height:44px;background:var(--acid)}
.eyebrow,.section-kicker,.panel-label,.tool-kind,.login-note { font:600 11px/1.4 "IBM Plex Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow { color:var(--blue); margin:0 0 14px; }
h1,h2,h3,h4,p { margin-top:0; }
h1,h2 { font-size:clamp(58px, 9vw, 112px); line-height:.88; letter-spacing:-.075em; margin-bottom:28px; }
h1 em,h2 em { color:var(--blue); font-style:normal; }
.lede { color:var(--muted); font-size:17px; line-height:1.55; max-width:530px; }
.login-form { margin-top:36px; display:grid; gap:18px; max-width:380px; }
.login-form label { display:grid; gap:8px; color:var(--muted); font-size:13px; }
.login-form input { border:1px solid var(--line); background:rgba(255,255,255,.68); padding:14px 15px; color:var(--ink); outline:none; border-radius:2px; }
.login-form input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(53,89,232,.12); }
.primary-button,.ghost-button { border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:18px; }
.primary-button { background:var(--ink); color:white; padding:15px 18px; transition:transform .2s, background .2s; }
.primary-button:hover { transform:translateY(-2px); background:var(--blue); }.primary-button svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.primary-button:disabled { opacity:.55; cursor:wait; }.form-error { color:var(--red); font-size:13px; min-height:20px; }.login-note { color:#899294; margin-top:38px; }
.dashboard-view { padding:26px 0 36px; animation:rise .55s ease both; }.topbar { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:18px; }
.brand { display:flex; align-items:center; gap:11px; font:600 12px "IBM Plex Mono",monospace; letter-spacing:.08em; }.brand-symbol { display:flex; gap:3px; align-items:end; height:20px; }.brand-symbol i { display:block; width:5px; background:var(--ink); transform:skew(-18deg); }.brand-symbol i:nth-child(1){height:9px}.brand-symbol i:nth-child(2){height:14px;background:var(--blue)}.brand-symbol i:nth-child(3){height:20px;background:var(--acid)}
.topbar-actions { display:flex; align-items:center; gap:22px; }.live-chip,.status { display:inline-flex; align-items:center; gap:7px; font:500 10px "IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }.live-chip b,.status b { width:7px; height:7px; border-radius:50%; background:var(--acid); }.ghost-button { background:none; color:var(--muted); font-size:13px; padding:8px 0; }.ghost-button:hover { color:var(--ink); }
.hero-grid { display:grid; grid-template-columns:1.5fr .8fr; gap:8%; align-items:end; padding:74px 0 82px; }.hero-copy h2 { font-size:clamp(58px, 8.5vw, 112px); margin-bottom:24px; }.status-panel { border-left:1px solid var(--ink); padding:20px 0 20px 27px; display:flex; gap:25px; align-items:center; }.signal-ring { width:112px; height:112px; border:1px solid var(--ink); border-radius:50%; display:grid; place-content:center; text-align:center; position:relative; }.signal-ring:after { content:""; position:absolute; inset:8px; border:1px dashed var(--blue); border-radius:50%; }.signal-ring span { font-size:34px; font-weight:600; letter-spacing:-.08em; z-index:1; }.signal-ring small { font:600 9px "IBM Plex Mono",monospace; z-index:1; }.panel-label { color:var(--blue); margin-bottom:7px; }.panel-value { font-size:14px; line-height:1.4; max-width:180px; margin-bottom:17px; }.meter { height:5px; width:180px; background:var(--line); }.meter span { display:block; height:100%; background:var(--blue); transition:width .5s ease; }
.toolbar { display:flex; justify-content:space-between; align-items:end; border-top:1px solid var(--ink); padding:23px 0 18px; }.section-kicker { margin-bottom:7px; color:var(--blue); }.toolbar h3 { font-size:22px; letter-spacing:-.04em; margin:0; }.filters { display:flex; gap:6px; }.filter { cursor:pointer; border:1px solid var(--line); background:transparent; padding:8px 12px; color:var(--muted); font-size:12px; }.filter:hover,.filter.active { border-color:var(--ink); background:var(--ink); color:white; }
.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.tool-card { background:var(--card); border:1px solid var(--line); min-height:292px; display:flex; flex-direction:column; opacity:0; animation:card-in .6s ease var(--delay) forwards; transition:transform .22s, box-shadow .22s, border-color .22s; }.tool-card:hover { transform:translateY(-5px); border-color:var(--blue); box-shadow:8px 8px 0 rgba(14,23,38,.1); }.card-top { display:flex; justify-content:space-between; padding:15px 16px; border-bottom:1px solid var(--line); }.index { font:500 11px "IBM Plex Mono",monospace; color:#9aa1a5; }.status.online { color:#54801e; }.status.installed { color:var(--muted); }.status.offline { color:var(--red); }.status.offline b { background:var(--red); }.card-body { padding:24px 20px 16px; flex:1; }.card-icon { width:25px; height:25px; fill:none; stroke:var(--blue); stroke-width:1.2; margin-bottom:24px; }.tool-kind { color:var(--blue); margin-bottom:7px; }.tool-card h4 { font-size:23px; letter-spacing:-.055em; margin-bottom:11px; }.tool-description { color:var(--muted); font-size:13px; line-height:1.45; margin:0; max-width:290px; }.card-bottom { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:14px 16px; font-size:12px; }.card-bottom a:first-child { color:var(--ink); font-weight:600; }.card-bottom a:hover { color:var(--blue); }.repo-link { color:var(--muted); }.empty-state { padding:50px; color:var(--muted); border:1px dashed var(--line); grid-column:1/-1; }
.footer { display:flex; justify-content:space-between; padding-top:22px; color:#8b9598; font:500 10px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
@keyframes rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} } @keyframes card-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@media (max-width:800px) { .shell{width:min(100% - 30px, 620px)} .hero-grid{grid-template-columns:1fr;gap:36px;padding:52px 0}.status-panel{border-left:0;border-top:1px solid var(--ink);padding:24px 0 0}.tool-grid{grid-template-columns:1fr 1fr}.toolbar{align-items:start;gap:20px;flex-direction:column}.filters{flex-wrap:wrap}.topbar-actions .live-chip{display:none} }
@media (max-width:520px) { h1,h2{font-size:62px}.tool-grid{grid-template-columns:1fr}.footer{gap:10px;flex-wrap:wrap}.footer span:last-child{width:100%}.login-view{padding:35px 0}.login-form{max-width:none} }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }

.downloader-view { min-height:100vh; padding:26px 0 36px; animation:rise .55s ease both; }
.downloader-topbar { margin-bottom:66px; }
.downloader-hero { display:grid; grid-template-columns:minmax(0, 1fr) 240px; gap:8%; align-items:end; padding-bottom:64px; border-bottom:1px solid var(--ink); }
.downloader-hero h2 { font-size:clamp(56px, 8vw, 104px); margin-bottom:24px; }
.download-signal { min-height:190px; border-left:1px solid var(--ink); position:relative; overflow:hidden; padding:22px 0 0 28px; color:var(--blue); }
.signal-line { display:block; width:170px; height:1px; margin-top:55px; background:var(--blue); transform:rotate(-27deg); transform-origin:left center; }
.signal-dot { display:block; width:11px; height:11px; margin:6px 0 0 131px; background:var(--acid); border:2px solid var(--ink); border-radius:50%; }
.signal-caption { display:block; margin-top:34px; font:600 11px/1.4 "IBM Plex Mono",monospace; letter-spacing:.13em; }
.download-layout { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(220px, .6fr); gap:8%; padding:56px 0 76px; }
.download-panel { background:#fff; border:1px solid var(--line); padding:27px 28px 30px; box-shadow:12px 12px 0 rgba(14,23,38,.08); }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); padding-bottom:18px; }
.panel-heading h3 { margin:0; font-size:28px; letter-spacing:-.05em; }
.panel-index { color:#9aa1a5; font:500 11px "IBM Plex Mono",monospace; white-space:nowrap; }
.download-form { display:grid; gap:14px; padding-top:25px; }
.field-label { display:flex; justify-content:space-between; gap:15px; color:var(--ink); font-size:13px; font-weight:600; }
.field-label span { color:var(--muted); font-size:11px; font-weight:400; }
.download-form textarea { width:100%; resize:vertical; min-height:180px; border:1px solid var(--line); background:#fbfcf8; padding:16px; color:var(--ink); font:14px/1.55 "IBM Plex Mono",monospace; outline:none; }
.download-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(53,89,232,.12); }
.download-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.audio-range-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.select-field input { appearance:none; border:1px solid var(--line); border-radius:0; background:#fbfcf8; padding:13px 14px; color:var(--ink); outline:none; }
.select-field input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(53,89,232,.12); }
.select-field input:disabled { opacity:.5; cursor:not-allowed; }
.range-note { color:var(--muted); font-size:11px; margin:0; }
.select-field { display:grid; gap:8px; color:var(--muted); font-size:12px; }
.select-field select { appearance:none; border:1px solid var(--line); border-radius:0; background:#fbfcf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23697386' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center; padding:13px 38px 13px 14px; color:var(--ink); outline:none; }
.select-field select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(53,89,232,.12); }
.download-button { border:0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; background:var(--ink); color:#fff; padding:16px 18px; margin-top:7px; font-weight:600; transition:transform .2s, background .2s; }
.download-button:hover { background:var(--blue); transform:translateY(-2px); }
.download-button:disabled { opacity:.55; cursor:wait; transform:none; }
.download-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; }
.download-aside { align-self:start; border-top:1px solid var(--ink); padding-top:19px; }
.source-list { list-style:none; padding:0; margin:20px 0 26px; display:grid; gap:0; }
.source-list li { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); color:var(--ink); font-size:13px; }
.source-list li:before { content:""; width:7px; height:7px; background:var(--acid); border:1px solid var(--ink); border-radius:50%; flex:none; }
.aside-rule { height:1px; background:var(--blue); margin:27px 0 18px; }
.aside-note { color:var(--muted); font-size:13px; line-height:1.55; max-width:240px; }
.jobs-section { border-top:1px solid var(--ink); padding-top:22px; }
.download-jobs { display:grid; gap:10px; margin-top:14px; }
.download-jobs .empty-state { display:flex; align-items:center; gap:14px; padding:28px; }
.empty-state svg { width:24px; height:24px; fill:none; stroke:var(--blue); stroke-width:1.4; flex:none; }
.job-card { background:#fff; border:1px solid var(--line); padding:20px; }
.job-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.job-heading h4 { margin:7px 0 0; font-size:18px; letter-spacing:-.03em; }
.job-type { color:var(--blue); font:600 10px "IBM Plex Mono",monospace; letter-spacing:.12em; }
.job-status { border:1px solid var(--line); padding:6px 8px; color:var(--muted); font-size:11px; white-space:nowrap; }
.job-status.downloading,.job-status.processing { border-color:var(--blue); color:var(--blue); }.job-status.done { border-color:#a9d275; color:#54801e; }.job-status.failed { border-color:var(--red); color:var(--red); }
.job-progress { height:6px; background:var(--line); margin-top:21px; overflow:hidden; }.job-progress span { display:block; height:100%; background:var(--blue); transition:width .4s ease; }
.job-meta { display:flex; justify-content:space-between; margin-top:8px; color:var(--muted); font-size:11px; }
.result-files { display:grid; gap:7px; margin-top:18px; padding-top:15px; border-top:1px solid var(--line); }.result-file { color:var(--blue); font-size:13px; overflow-wrap:anywhere; }.result-file:hover { text-decoration:underline; }
.job-error { color:var(--red); font-size:12px; line-height:1.45; margin:15px 0 0; }
@media (max-width:800px) { .downloader-topbar{margin-bottom:48px}.downloader-hero{grid-template-columns:1fr;padding-bottom:45px}.download-signal{display:none}.download-layout{grid-template-columns:1fr;gap:40px;padding:40px 0 60px}.download-panel{padding:22px 18px 24px;box-shadow:7px 7px 0 rgba(14,23,38,.08)} }
@media (max-width:520px) { .downloader-view{padding-top:18px}.downloader-hero h2{font-size:57px}.download-controls,.audio-range-controls{grid-template-columns:1fr}.field-label{display:grid;gap:4px}.job-heading{display:grid}.job-status{justify-self:start} }