@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{--ink:#171714;--paper:#f2efe8;--acid:#dfff38;--orange:#ff6946;--muted:#77776e;--line:rgba(23,23,20,.18)}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,sans-serif}body{margin:0;min-height:100vh}.grain{position:fixed;inset:0;pointer-events:none;opacity:.15;z-index:10;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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line)}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-.04em;font-size:21px}.brand i{font-family:'Playfair Display',serif;font-weight:500}.mark{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--acid);font-family:'DM Mono';font-size:18px}.health{font:11px 'DM Mono';letter-spacing:.05em;text-transform:uppercase;display:flex;gap:9px;align-items:center}.health span{width:8px;height:8px;border-radius:50%;background:#e6a51a;box-shadow:0 0 0 4px rgba(230,165,26,.15)}.health.ready span{background:#69a52e}.health.warn span{background:var(--orange)}
main{padding:7vh 5vw 9vh}.hero{display:grid;grid-template-columns:1.5fr 1fr;column-gap:8vw;align-items:end;margin-bottom:8vh}.eyebrow{font:11px 'DM Mono';letter-spacing:.18em;grid-column:1/-1}.hero h1{font-size:clamp(54px,7.6vw,116px);line-height:.85;letter-spacing:-.065em;margin:30px 0 0;font-weight:500}.hero h1 em{font-family:'Playfair Display';font-weight:500}.intro{font-size:clamp(16px,1.4vw,21px);line-height:1.6;max-width:520px;margin:0 0 5px}
.workspace{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);border-top:1px solid var(--ink)}.composer,.library{padding-top:28px}.composer{padding-right:5vw;border-right:1px solid var(--line)}.library{padding-left:5vw}.section-head{display:flex;align-items:center;gap:14px;margin-bottom:34px}.section-head>span{font:11px 'DM Mono';background:var(--acid);padding:6px 8px;border-radius:20px}.section-head h2{font-size:20px;margin:0;letter-spacing:-.04em}.section-head button{margin-left:auto;border:0;background:transparent;font-size:25px;cursor:pointer;transition:transform .2s}.section-head button:hover{transform:rotate(90deg)}
label{display:block;font:11px 'DM Mono';text-transform:uppercase;letter-spacing:.07em;margin:0 0 25px}label small{color:var(--muted);text-transform:none;letter-spacing:0;margin-left:8px}input,textarea,select{width:100%;display:block;margin-top:9px;border:1px solid var(--line);border-radius:2px;background:rgba(255,255,255,.32);padding:14px 15px;color:var(--ink);font:14px/1.55 'DM Mono';outline:none;transition:.2s}textarea{resize:vertical}input:focus,textarea:focus,select:focus{border-color:var(--ink);background:white;box-shadow:4px 4px 0 var(--acid)}.controls{display:grid;grid-template-columns:1fr 1fr;gap:20px}.controls label{margin-bottom:16px}details{margin:0 0 25px}summary{cursor:pointer;font:11px 'DM Mono';text-transform:uppercase;letter-spacing:.07em;padding:8px 0}.generate{border:0;width:100%;height:64px;background:var(--ink);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 22px;cursor:pointer;font:500 15px Manrope;transition:.2s}.generate b{font-size:24px;color:var(--acid)}.generate:hover{background:#31312c;transform:translateY(-2px)}.generate:disabled{opacity:.55;cursor:wait}.form-message{min-height:20px;font:12px 'DM Mono';color:var(--muted)}
.now-playing{background:var(--ink);color:white;padding:22px;display:flex;align-items:center;gap:20px;margin-bottom:18px;min-height:118px}.now-playing.empty{color:#aaa}.disc{width:72px;height:72px;flex:none;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#292924 0,#292924 3px,#111 4px,#111 6px);transition:transform 3s linear}.playing .disc{animation:spin 5s linear infinite}.disc div{width:23px;height:23px;border-radius:50%;background:var(--orange);border:6px solid #111}@keyframes spin{to{transform:rotate(360deg)}}.now-playing small{font:9px 'DM Mono';letter-spacing:.16em;color:var(--acid)}.now-playing strong{display:block;margin:7px 0 4px;font-size:17px}.now-playing p{font:11px 'DM Mono';margin:0;color:#aaa}.now-playing audio{width:100%;height:34px;margin-top:9px}.now-playing>div:last-child{min-width:0;flex:1}
.jobs{display:flex;flex-direction:column}.job{padding:18px 4px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center}.job-index{font:11px 'DM Mono';color:var(--muted)}.job h3{font-size:14px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.job p{font:10px 'DM Mono';margin:0;color:var(--muted);text-transform:uppercase}.job-actions{display:flex;gap:7px}.job button,.job a{border:1px solid var(--line);background:transparent;color:inherit;width:35px;height:35px;display:grid;place-items:center;text-decoration:none;cursor:pointer;border-radius:50%}.job button:hover,.job a:hover{background:var(--acid)}.status{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}.status.complete{background:#6b9b32}.status.running{background:#d0a510;animation:pulse 1s infinite}.status.queued{background:#999}.status.failed,.status.interrupted{background:var(--orange)}@keyframes pulse{50%{opacity:.25}}.error{white-space:pre-wrap;max-height:130px;overflow:auto;color:#b53d27!important;text-transform:none!important;margin-top:7px!important}.loading,.empty-list{font:12px 'DM Mono';padding:40px 0;color:var(--muted)}
footer{border-top:1px solid var(--line);height:70px;margin:0 5vw;display:flex;align-items:center;justify-content:space-between;font:9px 'DM Mono';letter-spacing:.15em;color:var(--muted)}
@media(max-width:850px){.hero{display:block}.intro{margin-top:35px}.workspace{grid-template-columns:1fr}.composer{padding-right:0;border-right:0}.library{padding:55px 0 0}.hero h1{font-size:16vw}header{padding:0 4vw}main{padding-left:4vw;padding-right:4vw}.health{max-width:45%;text-align:right}footer{margin:0 4vw}}