@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2) format("woff2")}
:root{--paper:#f5f1ea;--ink:#1c1a21;--soft:#6c6675;--line:#e4dccf;--card:#ffffffa6;--c1:#ff6a3d;--c2:#ffb547;--c3:#7b5cff;--c4:#22b8d6;--good:#1f7a4d;--bad:#a3301f;--glow:linear-gradient(95deg,var(--c1),var(--c2) 40%,var(--c3) 75%,var(--c4));--serif:"Instrument Serif",Georgia,"Times New Roman",serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column}main{flex:1}button,input{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:not-allowed}:focus-visible{outline:3px solid var(--ink);outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Drifting glow behind everything, with a paper grain on top. */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambient i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(80px);opacity:.3;animation:drift 30s ease-in-out infinite alternate}
.ambient i:nth-child(1){background:var(--c1);left:-16vmax;top:-18vmax}
.ambient i:nth-child(2){background:var(--c3);right:-18vmax;top:-10vmax;animation-delay:-8s;animation-duration:34s}
.ambient i:nth-child(3){background:var(--c4);right:-10vmax;bottom:-24vmax;animation-delay:-15s}
.ambient i:nth-child(4){background:var(--c2);left:-14vmax;bottom:-20vmax;animation-delay:-4s;animation-duration:38s;width:36vmax;height:36vmax}
.ambient::after{content:"";position:absolute;inset:0;opacity:.2;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{to{transform:translate(6vmax,5vmax) scale(1.1)}}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px clamp(16px,4vw,48px)}
.logo{display:flex;align-items:center;gap:12px;font:italic 30px/1 var(--serif);letter-spacing:-.01em}
.logo-mark{position:relative;width:34px;height:26px}
.logo-mark i{position:absolute;top:0;width:22px;height:22px;border-radius:7px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.logo-mark i:first-child{left:0;top:3px;background:var(--c3);transform:rotate(-8deg)}
.logo-mark i:last-child{right:0;background:var(--c1);box-shadow:0 0 0 2px var(--paper)}
.logo-mark i:last-child::after{content:"";position:absolute;left:8px;top:6px;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.logo:hover .logo-mark i:first-child{transform:translateX(-3px) rotate(-16deg)}.logo:hover .logo-mark i:last-child{transform:translateX(3px) rotate(6deg)}
.local{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--soft)}.local svg{width:19px;height:19px;color:var(--good)}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;border:1.5px solid var(--ink);background:transparent;border-radius:999px;padding:10px 18px;font-size:15px;font-weight:600;transition:background .15s,color .15s,border-color .15s}
.pill:hover{background:var(--ink);color:var(--paper)}.pill.ghost{background:var(--card);border-color:#1c1a2229;backdrop-filter:blur(6px)}.pill.ghost:hover{background:var(--ink);border-color:var(--ink)}
.text-link{border:0;background:none;padding:0;font-size:14px;font-weight:600;color:var(--soft);text-decoration:underline;text-underline-offset:3px}.text-link:hover{color:var(--ink)}

/* Landing */
.landing{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100svh - 160px);max-width:900px;margin:0 auto;padding:2vh 16px 56px;text-align:center}
h1{font:400 clamp(50px,9vw,112px)/.92 var(--serif);letter-spacing:-.025em;margin:0}
h1 em{display:inline-block;padding:0 .06em .08em;background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(17px,2vw,20px);color:var(--soft);margin:22px auto 0;max-width:31em;line-height:1.5}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:min(100%,640px);height:290px;margin:44px auto 0;padding:0 0 10px;border:2px dashed #1c1a2233;border-radius:40px;background:#ffffff80;backdrop-filter:blur(10px);color:var(--soft);font-size:15px;overflow:hidden;transition:transform .25s cubic-bezier(.3,1.6,.5,1),border-color .2s,background .2s}
.drop:hover,body.dragover .drop{transform:rotate(-1deg) scale(1.015);border-color:var(--ink);background:#ffffffb8}
.drop strong{font:italic 400 40px/1.1 var(--serif);color:var(--ink);margin-top:4px}
/* A film strip of input formats that rolls past, faster while hovering. */
.reel{position:relative;display:block;width:100%;height:84px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.strip{position:absolute;left:0;top:0;display:flex;gap:0;height:84px;padding:14px 0;background:var(--ink);animation:roll 18s linear infinite}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,transparent 0 8px,var(--paper) 8px 16px);opacity:.85}
.strip::before{top:4px}.strip::after{bottom:4px}
.strip i{display:grid;place-items:center;width:92px;height:56px;margin:0 5px;border-radius:6px;font:700 14px/1 var(--mono);letter-spacing:.06em;font-style:normal;color:#fff}
.strip i:nth-child(4n+1){background:var(--c1)}.strip i:nth-child(4n+2){background:var(--c3)}.strip i:nth-child(4n+3){background:var(--c4)}.strip i:nth-child(4n+4){background:var(--c2);color:var(--ink)}
.drop:hover .strip,body.dragover .strip{animation-duration:5s}
@keyframes roll{to{transform:translateX(-50%)}}
.arrow{display:grid;place-items:center;width:38px;height:38px;margin-top:6px;border-radius:50%;background:var(--ink);color:var(--paper);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}.arrow svg{width:20px;height:20px}
.drop:hover .arrow,body.dragover .arrow{transform:translateY(4px)}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(100%,880px);margin:40px 0 0;padding:0;list-style:none;text-align:left}
.perks li{padding:18px 20px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px #1c1a2214;backdrop-filter:blur(6px);font-size:14px;line-height:1.5;color:var(--soft)}
.perks b{display:block;margin-bottom:4px;font:italic 400 24px/1.1 var(--serif);color:var(--ink)}
.fine{font-size:13px;color:var(--soft);margin:18px 0 0;line-height:1.5}

/* Studio */
.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,400px);gap:clamp(24px,3.5vw,56px);align-items:start;max-width:1280px;margin:0 auto;padding:12px clamp(16px,4vw,48px) 64px}
.queue{animation:rise .6s cubic-bezier(.2,.8,.2,1) backwards}.panel{animation:rise .6s .06s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
.queue-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.queue-head h2{margin:0;font:italic 400 clamp(40px,4.6vw,60px)/1 var(--serif);letter-spacing:-.02em}
.queue-actions{display:flex;align-items:center;gap:16px}
.files{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.file{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 14px 12px 12px;border-radius:24px;background:#fffffff0;box-shadow:0 1px 0 #0000000a,0 18px 36px -26px #3c2a1473}
.file.enter{animation:rise .45s cubic-bezier(.2,.8,.2,1) backwards}
.thumb{position:relative;display:grid;place-items:center;width:112px;aspect-ratio:16/10;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--ink)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.blank{background:repeating-linear-gradient(135deg,#2a2731 0 10px,#24212b 10px 20px)}.thumb.blank span{font:700 13px/1 var(--mono);letter-spacing:.08em;color:#ffffffb3}
.thumb.playable .play{position:absolute;inset:0;display:grid;place-items:center;background:#1c1a2240;transition:background .2s}
.thumb.playable .play::after{content:"";width:0;height:0;margin-left:4px;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;filter:drop-shadow(0 2px 4px #0006);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.thumb.playable:hover .play{background:#1c1a2266}.thumb.playable:hover .play::after{transform:scale(1.2)}
.file-main{min-width:0;display:flex;flex-direction:column;gap:4px}
.file-name{overflow:hidden;font-size:16px;font-weight:650;white-space:nowrap;text-overflow:ellipsis}
.file-meta{overflow:hidden;font-size:13px;color:var(--soft);white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.status{display:flex;flex-direction:column;gap:6px;margin-top:4px;font-size:13px;line-height:1.4;min-width:0}
.status .muted{color:var(--soft)}.status .bad{color:var(--bad);font-weight:600}
.status .good{overflow:hidden;color:var(--good);white-space:nowrap;text-overflow:ellipsis}.status .good b{font-weight:700}
.status .how.instant::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--c2);box-shadow:0 0 0 3px #ffb54740;vertical-align:1px}
.stale .status .how{color:#8a6414}
.stage{color:var(--ink);font-weight:600}.stage b{font-variant-numeric:tabular-nums;color:var(--soft);font-weight:600}
.bar{position:relative;height:8px;border-radius:99px;background:#1c1a2214;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--glow);background-size:300px 100%;transition:width .3s ease}
.bar.indeterminate i{width:35%;animation:sweep 1.2s ease-in-out infinite}
@keyframes sweep{from{left:-35%}to{left:100%}}
.log summary{width:max-content;cursor:pointer;color:var(--soft);font-weight:600}
.log pre{max-height:180px;margin:8px 0 0;padding:10px 12px;overflow:auto;border-radius:10px;background:#f3eee6;font:11px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.file-actions{display:flex;align-items:center;gap:8px}
.download{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 13px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:650;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.download svg{width:18px;height:18px}.download:hover{transform:translateY(-2px);box-shadow:0 12px 22px -12px var(--c1)}
.download.secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px #1c1a2233}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--soft);transition:background .15s,color .15s}
.icon-btn svg{width:19px;height:19px}.icon-btn:hover{background:#1c1a2210;color:var(--ink)}
.icon-btn.trim.on{background:var(--ink);color:var(--paper)}
.remove{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--soft);font-size:22px;line-height:1;transition:background .15s,color .15s,transform .2s}
.remove:hover{background:#1c1a2210;color:var(--ink);transform:rotate(90deg)}
.is-converting{box-shadow:0 0 0 2px var(--ink),0 18px 36px -26px #3c2a1473}

/* Settings panel */
.panel{position:sticky;top:20px;padding:26px;border-radius:30px;background:#fffffff2;box-shadow:0 1px 0 #0000000a,0 30px 60px -30px #3c2a1473}
.panel-title{margin:0 0 16px;font:italic 400 34px/1 var(--serif)}
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.formats.small{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}
.format{position:relative;display:block}
.format input,.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.format-face{display:flex;flex-direction:column;gap:3px;height:100%;padding:12px 12px 11px;border-radius:16px;background:#f4efe7;box-shadow:inset 0 0 0 1px #1c1a2210;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.format-face b{font:700 17px/1 var(--mono);letter-spacing:.02em}.format-face small{font-size:12px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.formats.small .format-face{align-items:center;padding:10px 6px;border-radius:12px}.formats.small .format-face b{font-size:14px}
.format:hover .format-face{box-shadow:inset 0 0 0 1.5px var(--ink)}
.format input:checked+.format-face{background:var(--ink);color:var(--paper);transform:translateY(-2px);box-shadow:0 12px 20px -12px var(--c3)}
.format input:checked+.format-face small{color:#ffffffb3}
.format input:focus-visible+.format-face,.seg input:focus-visible+span{outline:3px solid var(--c3);outline-offset:2px}
.more-formats{margin-top:12px}
.disclosure summary{width:max-content;max-width:100%;list-style:none;cursor:pointer;font-size:14px;font-weight:650;color:var(--soft)}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure summary::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:2px solid;border-bottom:2px solid;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.disclosure[open] summary::after{transform:translateY(0) rotate(-135deg)}
.disclosure summary:hover{color:var(--ink)}
.more-options{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.more-options .option:first-of-type{margin-top:14px}
.summary-note{color:var(--ink)}
.group-label{margin:14px 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.about{min-height:3em;margin:14px 0 4px;font-size:14px;line-height:1.5;color:var(--soft)}
.option{margin-top:18px}
.option-label{display:block;margin-bottom:8px;font-size:14px;font-weight:650}
.option-note{display:block;margin-top:8px;font-size:13px;line-height:1.45;color:var(--soft)}
.seg{display:flex;padding:4px;border-radius:999px;background:#f4efe7;box-shadow:inset 0 0 0 1px #1c1a2210}
.seg label{position:relative;flex:1;min-width:0}
.seg span{display:block;padding:9px 6px;border-radius:999px;font-size:14px;font-weight:600;text-align:center;color:var(--soft);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.seg label:hover span{color:var(--ink)}.seg input:checked+span{background:var(--ink);color:var(--paper)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;cursor:pointer}
.switch b{display:block;font-size:14px;font-weight:650}.switch small{display:block;margin-top:2px;font-size:13px;color:var(--soft)}
.switch input{flex-shrink:0;position:relative;width:46px;height:28px;margin:0;border-radius:99px;background:#d9d2c7;appearance:none;-webkit-appearance:none;cursor:pointer;transition:background .2s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0003;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.switch input:checked{background:var(--ink)}.switch input:checked::after{transform:translateX(18px)}
.go{display:flex;gap:10px;margin-top:26px}
.cta{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);padding:14px 22px;font-size:16px;font-weight:650;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,opacity .2s}
.cta:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px var(--c1)}.cta:not(:disabled):active{transform:translateY(1px)}
.cta:disabled{opacity:.4}
.cta-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--glow)}.cta-icon svg{width:16px;height:16px;fill:#fff;stroke:none}
.cancel{flex:1;min-height:58px;font-size:16px}
.download-all{width:100%;margin-top:10px;min-height:50px}
.engine-note{text-align:center}

#error{max-width:620px;margin:20px auto;padding:14px 18px;border-radius:16px;background:#fff1ee;color:var(--bad);box-shadow:inset 0 0 0 1px #f3c2b8;font-size:15px;line-height:1.5}
#toast{position:fixed;left:50%;bottom:28px;z-index:50;max-width:calc(100vw - 32px);padding:13px 22px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:600;box-shadow:0 14px 30px -10px #0007;transform:translateX(-50%);animation:toast-in .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,16px) scale(.9)}}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding:20px clamp(16px,4vw,48px) 26px;font-size:13px;color:var(--soft)}
.foot a{text-decoration:underline;text-underline-offset:3px}.foot a:hover{color:var(--ink)}
.preview{width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:16px;border:0;border-radius:26px;background:var(--paper);color:var(--ink);box-shadow:0 40px 80px -30px #000a}
.preview::backdrop{background:#1c1a2280;backdrop-filter:blur(4px)}
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 12px 6px}.preview-head b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.preview-body{display:grid;place-items:center;border-radius:16px;overflow:hidden;background:var(--ink)}
.preview-body video,.preview-body img{display:block;max-width:100%;max-height:calc(100vh - 140px)}
.preview-body audio{width:100%;margin:28px}
.close{flex-shrink:0;width:40px;height:40px;padding:0;border:1.5px solid #1c1a2229;border-radius:50%;background:#ffffff8c;font-size:24px;line-height:1;transition:transform .2s}.close:hover{transform:rotate(90deg)}
/* Trim: two range inputs share one track; only their thumbs take the pointer. */
.trimmer .preview-body{min-height:120px}
.trimmer .preview-body video,.trimmer .preview-body img{max-height:calc(100vh - 260px)}
.trim-range{position:relative;height:40px;margin:14px 4px 0}
.trim-track{position:absolute;left:0;right:0;top:16px;height:8px;border-radius:99px;background:#1c1a2218}
.trim-track i{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--glow)}
.trim-range input{position:absolute;left:0;top:0;width:100%;height:40px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.trim-range input::-webkit-slider-runnable-track{height:40px;background:none}
.trim-range input::-moz-range-track{height:40px;background:none}
.trim-range input::-webkit-slider-thumb{width:22px;height:34px;margin-top:3px;border-radius:9px;background:#fff;box-shadow:0 0 0 2px var(--ink),0 4px 10px #0003;pointer-events:auto;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.trim-range input::-moz-range-thumb{width:22px;height:34px;border:0;border-radius:9px;background:#fff;box-shadow:0 0 0 2px var(--ink),0 4px 10px #0003;pointer-events:auto;cursor:ew-resize}
.trim-range input:focus-visible{outline:none}
.trim-range input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--c3),0 4px 10px #0003}
.trim-range input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--c3),0 4px 10px #0003}
.trim-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:10px 4px 2px}
.trim-times{font-size:15px;font-variant-numeric:tabular-nums;color:var(--soft)}.trim-times b{color:var(--ink)}
.trim-actions{display:flex;align-items:center;gap:18px}
.drop-overlay{position:fixed;inset:0;z-index:30;display:none;place-items:center;background:#f5f1eabf;backdrop-filter:blur(8px);pointer-events:none}
.drop-overlay span{font:italic 400 clamp(48px,8vw,96px)/1 var(--serif);background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent;padding:.1em}
body.dragover.has-files .drop-overlay{display:grid}

@media(max-width:900px){.studio{grid-template-columns:1fr}.panel{position:static}.perks{grid-template-columns:1fr}}
@media(max-width:560px){
  .top{padding:16px}.logo{font-size:26px}.local{font-size:13px}
  .drop{height:260px;border-radius:32px}.drop strong{font-size:34px}
  .file{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:10px}
  .thumb{width:84px}
  .file-actions{grid-column:1/-1;justify-content:space-between}.file-actions .download{flex:1;justify-content:center}
  .trim-foot{justify-content:center}
  .file:not(.is-done) .file-name{padding-right:80px}
  .file-actions:not(:has(.download)){position:absolute;right:8px;top:8px}.file{position:relative}
  .panel{padding:20px;border-radius:26px}
  .seg span{padding:9px 2px;font-size:13px}
  .queue-head h2{font-size:40px}
}
@media(hover:none){.paste-hint{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}