:root {
  color-scheme: dark;
  --paper: #dfca99;
  --ink: #2c1d14;
  --wood: #351d16;
  --wood-light: #61351f;
  --brass: #b77620;
  --brass-light: #e2b35a;
  --brass-pale: #f4da92;
  --teal: #17494c;
  --teal-light: #2e7777;
  --cream: #f7eac8;
  --muted: #c6b184;
  --danger: #f09a7d;
  font-family: "Avenir Next", Avenir, system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--paper); }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink); background: linear-gradient(rgba(18,73,75,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(18,73,75,.055) 1px,transparent 1px),radial-gradient(circle at 15% 0,rgba(255,250,225,.72),transparent 34%),var(--paper); background-size: 40px 40px,40px 40px,auto,auto; }
body::after { position: fixed; inset: 0; z-index: -1; background: radial-gradient(rgba(55,35,14,.18) .6px,transparent .7px); background-size: 5px 5px; content: ""; opacity: .15; }
.shell { width: min(100% - 28px, 1060px); margin: auto; padding: 22px 0 28px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--teal); text-decoration: none; }
.brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #68400f; border-radius: 50%; background: radial-gradient(circle at 35% 30%,var(--brass-pale),var(--brass) 55%,#63380e); color: #fff1c4; box-shadow: inset 0 0 0 3px rgba(255,245,210,.2),0 3px 8px rgba(75,42,9,.25); }
.brand strong,.brand small { display: block; }
.brand strong { font-family: Georgia,serif; font-size: 13px; letter-spacing: .18em; }
.brand small { margin-top: 1px; color: #76644a; font-size: 7px; font-weight: 900; letter-spacing: .2em; }
.vault-status { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(23,73,76,.32); border-radius: 99px; color: var(--teal); font-size: 8px; font-weight: 950; letter-spacing: .11em; }
.vault-status i { width: 7px; height: 7px; border-radius: 50%; background: #66a568; box-shadow: 0 0 8px #66a568; }

/* One apparatus: the artwork is the shell and all controls live on it. */
.converter { position: relative; min-height: 1240px; overflow: hidden; border: 2px solid #2a1710; border-radius: 24px 24px 38px 38px; background: linear-gradient(145deg,#684028,#321d16 65%,#211510); box-shadow: inset 0 0 0 3px #8b5730,inset 0 0 0 5px #1d110d,0 30px 70px rgba(54,31,10,.32); }
.converter::before { position: absolute; inset: 11px; z-index: 1; border: 1px solid rgba(231,188,100,.3); border-radius: 15px 15px 29px 29px; content: ""; pointer-events: none; }
.machine-art { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.07) contrast(1.02) brightness(.7); opacity: .58; transform: translateX(-50%); }
.machine-bolt { position: absolute; z-index: 10; width: 12px; height: 12px; border: 1px solid #5b330e; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#ffe6a3 0 10%,#c7892d 30%,#6a3d0e 75%); box-shadow: 0 1px 2px #120a06; }
.bolt-one{top:15px;left:16px}.bolt-two{top:15px;right:16px}.bolt-three{right:16px;bottom:16px}.bolt-four{bottom:16px;left:16px}
#converter-form { position: static; }

/* Upload at the upper end / file trays. */
.upload-end { position: absolute; top: 32px; left: 50%; z-index: 3; width: min(78%,760px); transform: translateX(-50%); }
.dropzone { display: flex; min-height: 118px; align-items: center; justify-content: center; gap: 14px; padding: 20px 25px; border: 2px solid #2a170d; border-radius: 12px 12px 28px 28px; background: linear-gradient(180deg,rgba(29,17,12,.92),rgba(9,8,7,.94)); color: var(--cream); cursor: pointer; box-shadow: inset 0 0 0 3px #9f6828,inset 0 0 30px #000,0 5px 0 #1d100a,0 8px 18px rgba(0,0,0,.3); transition: transform .18s,box-shadow .18s; }
.dropzone:hover,.dropzone.is-dragging { transform: translateY(-2px); box-shadow: inset 0 0 0 3px #d09a43,inset 0 0 35px rgba(24,103,104,.38),0 7px 0 #1d100a,0 10px 22px rgba(0,0,0,.34); }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.end-number { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border: 1px solid #72420e; border-radius: 50%; background: var(--brass-light); color: #4a290d; font-size: 8px; font-weight: 950; }
.upload-icon { display: grid; width: 46px; height: 46px; flex: none; place-items: center; border: 2px solid #72420e; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#f5dd98,#b6751e 58%,#5d350c); color: #fff0bd; font-size: 25px; box-shadow: 0 0 14px rgba(225,178,88,.25); }
.upload-copy { text-align: left; }
.upload-copy strong,.upload-copy small { display: block; }
.upload-copy strong { font-family: Georgia,serif; font-size: 18px; letter-spacing: .08em; }
.upload-copy small { margin-top: 4px; color: #bba982; font-size: 9px; }
.file-list { display: grid; max-height: 138px; gap: 5px; margin-top: 11px; overflow: auto; }
.file-row { display: grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:8px 11px; border:1px solid #724719; border-radius:5px; background:rgba(25,16,12,.94); color:var(--cream); }
.file-details{min-width:0}.file-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.file-details small{display:block;margin-top:2px;color:#a99470;font-size:9px}.file-status{color:#b5a583;font-size:9px;font-weight:850}.file-status.is-ready{color:#84c3a1}.file-status.is-processing,.file-status.is-uploading,.file-status.is-queued{color:var(--brass-light)}.file-status.is-failed,.file-status.is-deleted{color:var(--danger)}.file-action{min-width:58px;text-align:right}.file-download{color:var(--brass-light);font-size:10px;font-weight:900;text-decoration:none}

/* All settings in the machine's central mahogany body. */
.control-core { position: absolute; top: 315px; left: 50%; z-index: 3; width: min(78%,760px); padding: 21px 21px 23px; border: 2px solid #1b100b; border-radius: 19px; background: repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,rgba(0,0,0,.025) 2px 4px),linear-gradient(145deg,rgba(106,58,34,.97),rgba(48,26,19,.985) 62%,rgba(29,18,14,.99)); color: var(--cream); box-shadow: inset 0 0 0 3px #95603a,inset 0 0 0 5px #1d110d,0 12px 35px rgba(0,0,0,.55); transform: translateX(-50%); }
.control-core::before,.control-core::after { position:absolute;top:50%;width:38px;height:85px;border:8px solid #784613;background:linear-gradient(#d89c3b,#805019);content:"";transform:translateY(-50%);box-shadow:inset 0 2px #efca75; }
.control-core::before{right:100%;border-right:0;border-radius:21px 0 0 21px}.control-core::after{left:100%;border-left:0;border-radius:0 21px 21px 0}
.core-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; padding: 9px 12px; border: 1px solid #5b350f; border-radius: 5px; background: linear-gradient(#e0b45c,#9c621a); color: #482a10; box-shadow: inset 0 1px #ffe4a2,0 3px 0 #1d100a; }
.core-light { width: 9px; height: 9px; border-radius: 50%; background: #6ca86a; box-shadow: 0 0 9px #6ca86a; }
.core-heading h1 { flex: 1; margin: 0; font-family: Georgia,serif; font-size: 17px; letter-spacing: .12em; }
.limit { font-size: 9px; font-weight: 950; }
.control-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.control-bank { position: relative; min-width: 0; padding: 14px; border: 1px solid #1b100b; border-radius: 7px; background: linear-gradient(135deg,#845426,#4d301c 58%,#332118); box-shadow: inset 0 0 0 2px #a76d2f,inset 0 0 0 4px #352014,0 4px 0 #1b0f0a; }
.size-bank,.tune-bank { grid-column: 1/-1; }
.control-label { display:flex;justify-content:space-between;gap:9px;margin-bottom:9px;color:#f0ddb1;font-size:10px;font-weight:900; }
.control-label em { color:#c1a677;font-size:7px;font-style:normal;letter-spacing:.1em;text-transform:uppercase; }
.choice-group { display:flex;flex-wrap:wrap;gap:7px; }
.choice { min-height:34px;padding:7px 11px;border:1px solid #2b180c;border-radius:4px;background:linear-gradient(#f2dfae,#b78949);color:#4b2b14;font:inherit;font-size:10px;font-weight:950;cursor:pointer;box-shadow:inset 0 1px #fff1c8,0 3px 0 #36200f;transition:filter .15s,transform .15s; }
.choice:hover{filter:brightness(1.08);transform:translateY(-1px)}.choice.is-selected{border-color:#0c292b;background:linear-gradient(#347876,#153f42);color:#fff1c7;box-shadow:inset 0 1px rgba(255,255,255,.18),0 3px 0 #081d1f,0 0 10px rgba(28,164,196,.23)}.choice:focus-visible{outline:3px solid rgba(240,199,102,.35);outline-offset:2px}
.size-choices { padding-right: 34px; }
.size-choices .choice { flex:1 0 49px;padding-right:6px;padding-left:6px; }
.unit { position:absolute;right:18px;bottom:24px;color:#c7ae7b;font-size:8px;font-weight:950;writing-mode:vertical-rl; }
.tune-bank { display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:12px;align-items:end; }
.tune-bank label { min-width:0; }
input[type=number]{width:100%;height:38px;padding:0 10px;border:1px solid #170d09;border-radius:4px;background:#17100d;color:var(--cream);font:inherit;outline:none;box-shadow:inset 0 0 0 2px #754921,inset 0 3px 8px #080605}input[type=number]::placeholder{color:#948265}input[type=number]:focus{box-shadow:inset 0 0 0 2px var(--brass-light)}input[type=range]{width:100%;height:38px;accent-color:var(--teal-light)}output{color:#7fd2d5;font-weight:950}
.notice { margin: 14px 2px 12px; color:#cbb688; font-size:9px; line-height:1.4; }
.primary { display:flex;width:100%;min-height:48px;align-items:center;justify-content:center;gap:10px;border:1px solid #092527;border-radius:6px;background:linear-gradient(#347a78,#11383b);color:#fff2c8;font:inherit;font-size:12px;font-weight:950;letter-spacing:.13em;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.18),0 4px 0 #071d1f,0 7px 14px rgba(0,0,0,.3); }.primary:hover{filter:brightness(1.1)}.primary:disabled{opacity:.65;cursor:wait}.primary span{color:var(--brass-light);font-size:18px}.primary i{font-style:normal}

.machine-status { position:absolute;z-index:5;top:860px;left:50%;width:min(62%,610px);transform:translateX(-50%); }
.progress,.error { display:flex;align-items:center;gap:12px;padding:11px 14px;border:2px solid #25140c;border-radius:6px;background:linear-gradient(90deg,#183d3f,#10292b);color:var(--cream);box-shadow:inset 0 0 0 2px #98662c,0 4px 0 #1b0f0a; }.progress p{margin:3px 0 0;color:#b8b994;font-size:9px}.spinner{width:22px;height:22px;flex:none;border:3px solid #4a351d;border-top-color:var(--brass-light);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{background:#421f19;color:var(--danger);font-size:10px;line-height:1.4}

/* Download at the lower chute / velvet pedestal. */
.download-end { position:absolute;z-index:4;bottom:30px;left:50%;display:flex;width:min(66%,650px);min-height:145px;align-items:center;justify-content:center;padding:30px 20px 18px;border:2px solid #29170d;border-radius:8px 8px 42px 42px;background:radial-gradient(ellipse at center,#6d241f 0 38%,#3a1714 45%,#160f0d 70%);box-shadow:inset 0 0 0 4px #a46c2a,inset 0 0 26px #080504,0 7px 0 #1c100a;transform:translateX(-50%); }
.download-end>.end-number{position:absolute;top:12px;left:15px}.download-idle{display:flex;flex-direction:column;align-items:center;color:#d7bf8a}.download-idle>span{display:grid;width:38px;height:38px;place-items:center;border:2px solid #6e410f;border-radius:50%;background:linear-gradient(#e0b65e,#9c631a);color:#4b2c10;font-size:24px;box-shadow:inset 0 1px #ffe4a2,0 0 14px rgba(226,179,90,.25)}.download-idle strong{margin-top:7px;font-family:Georgia,serif;font-size:14px;letter-spacing:.1em}.download-idle small{margin-top:3px;color:#9f8d6a;font-size:8px}.result{display:flex;width:100%;align-items:center;gap:12px;color:var(--cream)}.result-copy{min-width:0;flex:1}.result-copy strong{font-family:Georgia,serif;letter-spacing:.09em}.result-copy p{margin:4px 0 0;color:#baa880;font-size:9px}.download{padding:10px 13px;border:1px solid #5d380f;border-radius:5px;background:linear-gradient(#e0b65e,#9d651d);color:#45270f;box-shadow:inset 0 1px #ffe3a2,0 3px 0 #25150b;font-size:10px;font-weight:950;text-decoration:none}.batch-results{position:absolute;right:12px;bottom:8px;left:12px;display:flex;justify-content:space-between;color:#d3bd8c;font-size:8px}.batch-results span{color:#a89772}
footer{display:flex;justify-content:center;gap:9px;margin-top:18px;color:rgba(47,32,18,.65);font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}footer i{font-style:normal}

.machine-running .core-light{background:var(--brass-light);box-shadow:0 0 12px var(--brass-light);animation:pulse .6s ease-in-out infinite alternate}.machine-running .machine-art{filter:saturate(1.2) contrast(1.05) brightness(.76);animation:hum .18s ease-in-out infinite alternate}.machine-complete .download-end{box-shadow:inset 0 0 0 4px #c18b35,inset 0 0 34px rgba(97,173,121,.2),0 7px 0 #1c100a,0 0 25px rgba(76,166,115,.22)}@keyframes pulse{to{opacity:.35}}@keyframes hum{from{transform:translateX(-50%) rotate(-.025deg)}to{transform:translateX(-50%) rotate(.025deg)}}

/* Desktop composition: preserve the artwork ratio and fit the full workflow. */
@media(min-width:1000px){
  .shell{width:min(100% - 28px,1280px);padding:14px 0 16px}
  .topbar{margin-bottom:10px}
  .converter{height:clamp(760px,calc((100vw - 28px)*.6664),853px);min-height:0}
  .upload-end{top:2.2%;width:min(60%,720px)}
  .dropzone{min-height:78px;gap:11px;padding:11px 18px}
  .upload-icon{width:40px;height:40px;font-size:22px}
  .upload-copy strong{font-size:16px}
  .file-list{max-height:100px;margin-top:7px}
  .control-core{top:28%;width:min(60%,760px);padding:12px 14px 14px;border-radius:16px}
  .core-heading{gap:9px;margin-bottom:8px;padding:7px 10px}
  .core-heading h1{font-size:15px}
  .control-grid{gap:7px}
  .control-bank{padding:9px 10px}
  .control-label{margin-bottom:6px;font-size:9px}
  .choice-group{gap:5px}
  .choice{min-height:29px;padding:5px 9px;font-size:9px}
  .unit{right:14px;bottom:17px}
  .tune-bank{gap:9px}
  input[type=number]{height:33px}
  input[type=range]{height:33px}
  .notice{margin:8px 2px 7px;font-size:8px;line-height:1.3}
  .primary{min-height:38px;font-size:11px}
  .primary span{font-size:15px}
  .machine-status{top:77%;width:min(52%,610px)}
  .download-end{bottom:2.2%;width:min(50%,620px);min-height:88px;padding:24px 17px 12px;border-radius:8px 8px 34px 34px}
  .download-idle>span{width:29px;height:29px;font-size:18px}
  .download-idle strong{margin-top:4px;font-size:12px}
  .download-idle small{margin-top:2px;font-size:7px}
  footer{margin-top:9px}
}

@media(min-width:761px) and (max-width:999px){
  .shell{width:min(100% - 20px,920px);padding-top:14px}
  .topbar{margin-bottom:14px}
  .converter{min-height:1050px}
  .upload-end{top:28px;width:82%}
  .dropzone{min-height:96px}
  .control-core{top:235px;width:82%;padding:17px}
  .machine-status{top:790px;width:72%}
  .download-end{bottom:25px;width:70%;min-height:125px}
}

@media(max-width:760px){.shell{width:min(100% - 16px,1060px);padding-top:13px}.converter{min-height:1570px;border-radius:17px 17px 28px 28px}.machine-art{width:150%;opacity:.5}.upload-end{top:25px;width:88%}.dropzone{min-height:108px;padding:16px;gap:10px}.upload-copy strong{font-size:14px}.upload-copy small{max-width:240px;font-size:8px}.control-core{top:270px;width:88%;min-height:960px;padding:17px 14px 19px}.core-heading h1{font-size:13px}.limit{font-size:7px}.control-grid{grid-template-columns:1fr}.size-bank,.tune-bank{grid-column:auto}.tune-bank{grid-template-columns:1fr}.operation-bank,.format-bank{min-height:0}.machine-status{top:1250px;width:80%}.download-end{bottom:28px;width:82%;min-height:150px}.control-core::before,.control-core::after{width:20px}.file-list{max-height:115px}.vault-status{font-size:6px}.brand strong{font-size:11px}.brand small{font-size:6px}}
@media(max-width:430px){.topbar{align-items:flex-start}.vault-status{max-width:105px;text-align:right;line-height:1.25}.converter{min-height:1630px}.machine-art{width:190%}.upload-end{width:91%}.dropzone{padding-right:10px;padding-left:10px}.end-number{display:none}.upload-icon{width:40px;height:40px}.control-core{width:91%;top:255px}.core-heading{gap:7px;padding-right:8px;padding-left:8px}.core-heading h1{font-size:11px;letter-spacing:.08em}.choice{font-size:9px}.size-choices .choice{flex-basis:42px}.machine-status{top:1290px}.download-end{width:86%}.file-row{grid-template-columns:minmax(0,1fr) auto}.file-action{grid-column:1/-1;text-align:left}.result{flex-direction:column;text-align:center}.download{width:100%;text-align:center}footer{flex-wrap:wrap;line-height:1.4}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}}