/* The `hidden` attribute only carries the user-agent's display:none, which any
   class that sets `display` outranks. #dlView is .btn-w{display:inline-flex},
   so it rendered while hidden was still true — a dead button with href="#".
   One global rule so the attribute always means what it says. */
[hidden]{display:none !important;}

body { background:#17171A; margin:0; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
h1, h2, h3, h4, p, a, button, input, select, textarea, li, output, label { font-family:inherit; letter-spacing:inherit; }
a { color:#C9C9CC; text-decoration:none; } a:hover { color:#FFFFFF; }
/* button-shaped links must keep their own colour: the blanket a:hover above is
   more specific than .btn-w and was painting the white button's label white. */
a.btn-w,a.btn-w:link,a.btn-w:visited,a.btn-w:hover,a.btn-w:focus,a.btn-w:active{color:#1D1D21;}
a.btn-o,a.btn-o:link,a.btn-o:visited,a.btn-o:hover,a.btn-o:focus,a.btn-o:active{color:#F4F4F2;}
button { font-family:inherit; }
.hv2:hover{transform:translateY(-2px) !important;}
.hv3:active{transform:translateY(0px) !important;}
.hv5:hover{transform:translateY(-2px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 20px 44px rgba(0,0,0,.6) !important;}
.hv7:hover{border-color:rgba(255,255,255,.45) !important; background:rgba(255,255,255,.05) !important;}
.hv12:hover{color:#F4F4F2 !important;}
.hv17:hover{transform:translateY(-1px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 9px 22px rgba(0,0,0,.5) !important;}
a[data-m="hide"] { white-space:nowrap; }
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes kscan{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}

/* ---- tokens as classes (the main page inlines everything; the tool is interactive so classes keep the script sane) ---- */
.eyebrow{color:rgba(255,255,255,.52); font-size:12px; font-weight:700; letter-spacing:.22em;}
.h2{margin:0; color:#fff; font-size:52px; font-weight:600; letter-spacing:-1.8px; margin-top:16px; line-height:1.06;}
.lede{color:rgba(255,255,255,.6); font-size:15.5px; line-height:1.6; max-width:420px; padding-bottom:6px;}
.band{padding:104px 56px;}
.btn-w{height:50px; border-radius:6px; border:none; background:linear-gradient(180deg,#FFFFFF,#E4E4E2); color:#1D1D21; display:inline-flex; align-items:center; gap:10px; padding:0 24px; font-size:15px; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 30px rgba(0,0,0,.5); cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform 180ms ease, box-shadow 180ms ease, opacity 180ms;}
.btn-o{height:50px; border-radius:6px; border:1px solid rgba(255,255,255,.24); background:transparent; color:#F4F4F2; display:inline-flex; align-items:center; gap:10px; padding:0 22px; font-size:15px; cursor:pointer; text-decoration:none; white-space:nowrap; transition:border-color 180ms ease, background 180ms ease;}
.btn-g{height:50px; border:none; background:transparent; color:rgba(255,255,255,.62); display:inline-flex; align-items:center; padding:0 12px; font-size:14px; cursor:pointer; transition:color 160ms;}
.btn-g:hover{color:#fff;}
.btn-w:disabled,.btn-o:disabled{opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none;}
.btn-w svg,.btn-o svg{width:14px; height:14px; flex:none;}

/* hero drop zone */
.drop{position:relative; border:1px dashed rgba(255,255,255,.28); border-radius:8px; background:rgba(255,255,255,.04); padding:34px 28px; cursor:pointer; transition:border-color 160ms ease, background 160ms ease; max-width:640px; margin-top:38px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.drop:hover,.drop.on,.drop:focus-visible{border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.07); outline:none;}
.drop .big{color:#fff; font-size:19px; font-weight:600; letter-spacing:-.3px;}
.drop .sub{color:rgba(255,255,255,.62); font-size:14px; margin-top:8px; line-height:1.55;}
.drop .row{display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap;}
.fmts{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px;}
.fmts span{color:rgba(255,255,255,.62); font-size:10.5px; font-weight:700; letter-spacing:.1em; border:1px solid rgba(255,255,255,.16); border-radius:5px; padding:4px 7px;}
.lock{display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.72); font-size:12.5px;}
.lock svg{width:12px; height:12px; color:rgba(255,255,255,.85);}

/* tool band */
.tool{display:none; scroll-margin-top:84px;}
.tool.on{display:block;}
.panel{background:#1C1C20; border:1px solid rgba(255,255,255,.09); border-radius:8px; padding:22px 24px; display:grid; grid-template-columns:1.5fr 1fr 1fr auto; gap:20px 32px; align-items:end;}
.fl{color:rgba(255,255,255,.52); font-size:11.5px; font-weight:700; letter-spacing:.18em; margin-bottom:10px; display:block;}
.hint{color:rgba(255,255,255,.5); font-size:12.5px; line-height:1.5; margin-top:8px;}
.seg{display:inline-flex; border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:3px; gap:2px; background:rgba(255,255,255,.03);}
.seg button{height:34px; border:none; border-radius:4px; background:transparent; color:rgba(255,255,255,.62); font-size:13.5px; font-weight:600; padding:0 14px; cursor:pointer; transition:background 140ms, color 140ms;}
.seg button.on{background:linear-gradient(180deg,#FFFFFF,#E4E4E2); color:#1D1D21;}
.seg button:disabled{opacity:.5; cursor:not-allowed;}
.range{display:flex; align-items:center; gap:12px; height:40px;}
.range input[type=range]{flex:1; accent-color:#F4F4F2; height:28px; margin:0;}
.range output{color:#fff; font-size:14px; font-weight:600; min-width:30px; text-align:right; font-variant-numeric:tabular-nums;}
select.sel{appearance:none; -webkit-appearance:none; width:100%; box-sizing:border-box; height:40px; border-radius:6px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center; color:#F4F4F2; font-size:14px; padding:0 34px 0 12px; cursor:pointer; outline:none;}
select.sel:focus{border-color:rgba(255,255,255,.48);}
select.sel option{background:#1C1C20; color:#fff;}
.chk{display:flex; align-items:center; gap:10px; color:#F4F4F2; font-size:14px; cursor:pointer; height:40px; white-space:nowrap;}
.chk input{width:16px; height:16px; accent-color:#F4F4F2; margin:0;}
.actions{display:flex; align-items:center; gap:12px; margin-top:22px; flex-wrap:wrap;}
.status{color:rgba(255,255,255,.55); font-size:13.5px; font-variant-numeric:tabular-nums;}
.prog{height:3px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-top:18px; display:none;}
.prog.on{display:block;}
.prog i{display:block; height:100%; width:0; background:#fff; transition:width .3s;}
.rgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(236px,100%),1fr)); gap:14px; margin-top:24px;}
.rcard{background:#1C1C20; border:1px solid rgba(255,255,255,.09); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; position:relative; transition:border-color 160ms;}
.rcard:hover{border-color:rgba(255,255,255,.22);}
.rcard .th{aspect-ratio:3/2; background:#111114; position:relative; cursor:zoom-in; display:grid; place-items:center; overflow:hidden;}
.rcard .th canvas{width:100%; height:100%; object-fit:contain; display:block; transition:transform 300ms ease;}
.rcard .th:hover canvas{transform:scale(1.02);}
.rcard .th .wait{color:rgba(255,255,255,.52); font-size:11px; font-weight:700; letter-spacing:.16em;}
.spin{width:22px; height:22px; border:2px solid rgba(255,255,255,.18); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; display:inline-block; box-sizing:border-box;}
.rcard .badge{position:absolute; top:10px; left:10px; color:#fff; font-size:10px; font-weight:700; letter-spacing:.14em; background:rgba(16,14,10,.78); border:1px solid rgba(255,255,255,.14); border-radius:5px; padding:4px 7px;}
.rcard .bd{padding:14px 16px 16px;}
.rcard .fn{color:#fff; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rcard .fs{color:rgba(255,255,255,.5); font-size:12.5px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.45;}
.rcard .row{display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap;}
.chip{color:rgba(255,255,255,.62); font-size:10.5px; font-weight:700; letter-spacing:.12em; border:1px solid rgba(255,255,255,.14); border-radius:5px; padding:5px 8px; white-space:nowrap;}
.chip.ok{color:#fff; border-color:rgba(255,255,255,.38); background:rgba(255,255,255,.07);}
.chip.blue{color:#fff; border-color:rgba(255,255,255,.3);}
.chip.warn{color:rgba(255,255,255,.8); border-style:dashed;}
.chip.err{color:#F08A7E; border-color:rgba(240,138,126,.4);}
.rcard .mini{margin-left:auto; display:flex; gap:4px;}
.ib{width:32px; height:32px; border-radius:5px; border:1px solid rgba(255,255,255,.14); background:transparent; color:rgba(255,255,255,.7); display:grid; place-items:center; cursor:pointer; transition:border-color 140ms, background 140ms, color 140ms;}
.ib:hover:not(:disabled){border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); color:#fff;}
.ib:disabled{opacity:.35; cursor:not-allowed;}
.ib svg{width:14px; height:14px;}
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,16px); background:#F4F4F2; color:#1D1D21; border-radius:6px; padding:12px 18px; font-size:13.5px; font-weight:500; box-shadow:0 20px 44px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:120; max-width:calc(100vw - 40px);}
.toast.on{opacity:1; transform:translate(-50%,0);}
.toast .toast-act{margin-left:14px; height:28px; border-radius:5px; border:1px solid rgba(29,29,33,.25); background:transparent; color:#1D1D21; font-size:13px; font-weight:650; padding:0 10px; cursor:pointer;}
.toast .toast-act:hover{background:rgba(29,29,33,.08);}
.rcard .th .scan{position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0)); animation:kscan 1.3s linear infinite; pointer-events:none;}
#dropOverlay{position:fixed; inset:0; z-index:150; background:rgba(23,23,26,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:none; align-items:center; justify-content:center; pointer-events:none;}
#dropOverlay.on{display:flex;}
#dropOverlay .dz{border:1px dashed rgba(255,255,255,.5); border-radius:8px; padding:56px 72px; text-align:center;}
#dropOverlay .t{color:#fff; font-size:40px; font-weight:600; letter-spacing:-1.4px;}
#dropOverlay .s{color:rgba(255,255,255,.62); font-size:14.5px; margin-top:10px;}
.vb.on#vwCompare{background:#fff; color:#1D1D21; border-color:transparent;}

/* hairline tables (same style as the three on the main page) */
.tbl{display:grid; gap:1px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.09); border-radius:8px; overflow:hidden;}
.tbl > div{background:#1D1D21; padding:16px 18px; color:rgba(255,255,255,.62); font-size:13.5px; line-height:1.5;}
.tbl > div.h{color:rgba(255,255,255,.52); font-size:11.5px; font-weight:700; letter-spacing:.16em; padding:14px 18px;}
.tbl > div.k{background:#100E0A; color:#fff;}
.tbl > div.k.h{display:flex; align-items:center; gap:8px; color:#fff; font-size:13.5px; letter-spacing:0; font-weight:600;}
.tbl > div.l{color:#EDEDEB;}
.tbl code{font-family:inherit; color:#fff; font-weight:600; font-size:13px; border:1px solid rgba(255,255,255,.14); border-radius:4px; padding:2px 6px; margin-right:4px; white-space:nowrap;}

/* faq */
.faqa{border-top:1px solid rgba(255,255,255,.1); padding-top:20px;}
.faqa .q{color:#fff; font-size:16px; font-weight:600; line-height:1.4;}
.faqa .a{color:rgba(255,255,255,.6); font-size:14.5px; line-height:1.6; margin-top:9px;}

/* viewer */
.vw{position:fixed; inset:0; background:#111114; z-index:110; display:none; flex-direction:column; color:#EDEDEB;}
.vw.on{display:flex;}
.vw-top{display:flex; align-items:center; gap:10px; padding:0 16px; height:60px; border-bottom:1px solid rgba(255,255,255,.08); flex:none; flex-wrap:wrap; background:#17171A;}
.vw-top .name{color:#fff; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34vw;}
.vw-top .dim{color:rgba(255,255,255,.52); font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums;}
.vw-top .sp{flex:1;}
.vb{height:34px; border-radius:5px; border:1px solid rgba(255,255,255,.16); background:transparent; color:#EDEDEB; padding:0 12px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:background 140ms, border-color 140ms;}
.vb:hover:not(:disabled){background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35);}
.vb:disabled{opacity:.4; cursor:not-allowed;}
.vb.on{background:linear-gradient(180deg,#FFFFFF,#E4E4E2); color:#1D1D21; border-color:transparent;}
.vb.pri{background:linear-gradient(180deg,#FFFFFF,#E4E4E2); color:#1D1D21; border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(0,0,0,.4);}
.vb.pri:hover{background:#fff;}
.vb svg{width:14px; height:14px;}
.vseg{display:inline-flex; border:1px solid rgba(255,255,255,.16); border-radius:5px; overflow:hidden;}
.vseg .vb{border:none; border-radius:0; height:32px;}
.vseg .vb + .vb{border-left:1px solid rgba(255,255,255,.12);}
.vw-body{flex:1; display:flex; min-height:0; position:relative;}
.stage{flex:1; position:relative; overflow:hidden; touch-action:none; cursor:grab; background:#111114;}
.stage.drag{cursor:grabbing;}
.stage canvas{position:absolute; left:0; top:0; transform-origin:0 0;}
.stage .msg{position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.55); font-size:14px; text-align:center; padding:20px;}
.stage .navb{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(23,23,26,.7); border:1px solid rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(8px); transition:background 140ms;}
.stage .navb:hover{background:rgba(23,23,26,.95);}
.stage .navb.l{left:16px;} .stage .navb.r{right:16px;}
.stage .zoomlbl{position:absolute; left:16px; bottom:14px; color:rgba(255,255,255,.55); font-size:11px; font-weight:700; letter-spacing:.14em; background:rgba(17,17,20,.75); padding:5px 8px; border-radius:5px;}
.side{width:304px; flex:none; border-left:1px solid rgba(255,255,255,.08); overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:22px; background:#17171A;}
.side .sh{margin:0; color:rgba(255,255,255,.52); font-size:11.5px; font-weight:700; letter-spacing:.18em;}
.hist{width:100%; height:96px; border-radius:6px; background:#111114; border:1px solid rgba(255,255,255,.08); display:block; margin-top:10px;}
.kv{display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:13px; margin-top:12px;}
.kv .k{color:rgba(255,255,255,.52); white-space:nowrap;}
.kv .v{color:#fff; font-weight:500; word-break:break-word;}
.adj{display:flex; flex-direction:column; gap:12px; margin-top:12px;}
.adj .a{display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center;}
.adj label{color:rgba(255,255,255,.72); font-size:13px;}
.adj output{color:#fff; font-size:12.5px; font-weight:600; min-width:44px; text-align:right; font-variant-numeric:tabular-nums;}
.adj input[type=range]{grid-column:1/-1; width:100%; accent-color:#F4F4F2; height:26px; margin:0;}
.adj.disabled{opacity:.35; pointer-events:none;}
.side .note{color:rgba(255,255,255,.52); font-size:12px; line-height:1.55;}
.side .stack{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.side .stack .vb{justify-content:center; height:38px;}
.vw-strip{flex:none; display:flex; gap:6px; padding:8px 12px; overflow-x:auto; border-top:1px solid rgba(255,255,255,.08); background:#17171A; scrollbar-width:thin;}
.vw-strip button{flex:none; width:64px; height:44px; border-radius:4px; border:2px solid transparent; padding:0; background:#1D1D21; cursor:pointer; overflow:hidden; opacity:.55; transition:opacity 140ms;}
.vw-strip button.on{border-color:#F4F4F2; opacity:1;}
.vw-strip button:hover{opacity:1;}
.vw-strip canvas{width:100%; height:100%; object-fit:cover; display:block;}
.sidebtn{display:none;}
.vw-top .brk{display:none;}
a:focus-visible,button:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid rgba(255,255,255,.7); outline-offset:2px;}

@media (min-width:768px) and (max-width:1200px){
  .panel{grid-template-columns:1fr 1fr;}
  [data-m="heroimg"]{width:58vw !important;}
}
@media (max-width:900px){
  .side{position:absolute; right:0; top:0; bottom:0; width:min(320px,88vw); transform:translateX(100%); transition:transform .2s; z-index:5; box-shadow:-10px 0 30px rgba(0,0,0,.5);}
  .side.open{transform:none;}
  .sidebtn{display:inline-flex;}
  .vw-top .name{max-width:48vw;}
}
@media (max-width:767px){
  [data-m="root"]{width:100% !important;}
  [data-band]:not([data-m="hero"]):not([data-m="tall"]), footer{padding-left:22px !important; padding-right:22px !important;}
  .topnav{padding:0 22px !important; gap:14px !important;}
  .band{padding-top:72px; padding-bottom:72px;}
  h1{font-size:40px !important; letter-spacing:-1.6px !important;}
  h1 br, h2 br{display:none;}
  .h2, h2{font-size:29px !important; letter-spacing:-1px !important;}
  [data-m="hide"]{display:none !important;}
  [data-m="hero"]{height:auto !important;}
  [data-m="heroimg"]{position:relative !important; width:100% !important; height:300px;}
  [data-m="heroimg"] img{height:100% !important; transform:none !important;}
  [data-m="heropad"]{padding:32px 22px 56px !important; height:auto !important; max-width:100% !important;}
  [data-m="row"]{flex-direction:column !important; align-items:stretch !important; gap:28px !important;}
  [data-m="g1"]{grid-template-columns:1fr !important;}
  [data-m="g2"]{grid-template-columns:repeat(2,1fr) !important;}
  [data-m="num"]{font-size:44px !important; letter-spacing:-1.8px !important;}
  [data-m="scroll"]{overflow-x:auto;}
  [data-m="t4"]{min-width:680px;}
  [data-m="tall"]{height:560px !important;}
  [data-m="tallpad"]{padding:0 22px !important;}
  [data-m="wrap"]{flex-wrap:wrap !important;}
  .drop{padding:26px 20px; margin-top:30px;}
  .drop .row .btn-w{width:100%; justify-content:center;}
  .panel{grid-template-columns:1fr; gap:18px; padding:18px;}
  .rgrid{grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));}
  .actions .btn-w,.actions .btn-o{flex:1 1 auto; justify-content:center;}
  .vw-top{padding:8px 10px; gap:6px; height:auto; min-height:0;}
  .vb span.lbl{display:none;}
  .vw-top .name{order:2; flex:1; max-width:none;}
  .vw-top .dim,.vw-top .sp{display:none;}
  .vw-top #vwClose{order:1;} .vw-top #vwCompare{order:3;} .vw-top #vwDownload{order:4;}
  .vw-top .brk{display:block; order:5; flex-basis:100%; height:0;}
  .vw-top #vwSrc{order:6; flex:1;} .vw-top #vwSrc .vb{flex:1; justify-content:center; padding:0 8px;}
  .vw-top .vseg:not(#vwSrc){order:7;} .vw-top #sideToggle{order:8;}
  .topnav{padding:0 22px !important; gap:14px !important;}
  .stage .navb{width:38px; height:38px;}
}
@media (prefers-reduced-motion:reduce){ .rcard .th canvas, .btn-w, .toast, .side{transition:none !important;} }

/* The nav's optional links only hid at <=767px, but the desktop nav needs
   about 800px, so between 768 and ~840 the Get Early Access button was
   pushed past the edge of the bar and clipped. */
@media (max-width:860px){ .topnav [data-m="hide"]{display:none !important;} }

/* Grid and flex items default to min-width:auto, so a track can refuse to
   shrink below its content and the item spills. These are the standard
   floors, plus a cap so a fixed-width card can never exceed its column. */
[data-m="col"]{max-width:100%;}
[data-m="g1"]>*,[data-m="g2"]>*{min-width:0;}
footer div,footer nav{min-width:0;}
footer a{overflow-wrap:anywhere;}

@media (max-width:900px){ [data-m="col"]{width:100% !important;} }
/* the tool's own name, beside the mark · same pattern the newer tools use */
.navtag{display:inline-flex; align-items:center; gap:12px; text-decoration:none; margin-left:2px;}
.navtag-bar{width:1px; height:17px; background:rgba(255,255,255,.2); flex:none;}
.navtag-t{color:rgba(255,255,255,.62); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; transition:color 160ms;}
.navtag:hover .navtag-t{color:#fff;}
.navtag:focus-visible{outline:none;}
.navtag:focus-visible .navtag-t{color:#fff; text-decoration:underline; text-underline-offset:4px;}
.navtag .dtx-m{display:none;}
@media (max-width:560px){ .navtag .dtx-d{display:none;} .navtag .dtx-m{display:inline;} .navtag{gap:9px;} }
@media (max-width:400px){ .navtag{display:none;} }

/* ---------- 2026-10-28 · the tool in the product's language: square, hairlines, plain words ----------
   The marketing bands above and below keep their look; everything a person touches
   while converting is here, and it reads like the transfer page now. */
.drop,.panel,.rcard,.seg,.seg button,select.sel,.ib,.chip,.rcard .badge,.toast,.toast .toast-act,.btn-w,.btn-o,.vb,.vseg,.prog,.hist,.vw-strip button,.stage .zoomlbl,.fmts span,#dropOverlay .dz,.tbl,.tbl code{border-radius:0 !important;}
.btn-w{background:#fff; box-shadow:none; height:46px; font-size:14.5px;}
.btn-w:hover{background:#ECECEA;}
.hv5:hover,.hv17:hover{transform:none !important; box-shadow:none !important;}
.btn-o{height:46px; font-size:14.5px; border-color:rgba(255,255,255,.22);}
.drop{border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.035);}
.drop:hover,.drop.on,.drop:focus-visible{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06);}
.fmts span{font-weight:500; letter-spacing:.04em; font-size:11px; color:rgba(255,255,255,.55); border-color:rgba(255,255,255,.12);}
.panel{background:rgba(255,255,255,.035); border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); padding:22px 24px 24px;}
.fl{color:#F4F4F2; font-size:12.5px; font-weight:600; letter-spacing:0; margin-bottom:8px;}
.hint{color:rgba(255,255,255,.5); font-size:12.5px;}
.seg{border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); padding:0; gap:0; background:transparent;}
.seg button{height:38px; font-weight:500; color:rgba(255,255,255,.66);}
.seg button + button{box-shadow:inset 1px 0 0 rgba(255,255,255,.14);}
.seg button.on{background:#fff; color:#1D1D21;}
select.sel{border-color:rgba(255,255,255,.18); background-color:rgba(255,255,255,.04);}
.actions{margin-top:20px;}
.btn-g{height:46px;}
.status{color:rgba(255,255,255,.62);}
.prog{margin-top:14px; height:2px;}
.rgrid{gap:12px;}
.rcard{background:rgba(255,255,255,.035); border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.rcard:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);}
.rcard .th{background:#141417;}
.rcard .th:hover canvas{transform:none;}
.rcard .badge{top:0; left:0; background:rgba(23,23,26,.82); border:0; font-weight:500; font-size:11px; letter-spacing:0; padding:5px 8px; color:#F0D493;}
.rcard .bd{padding:12px 14px 14px;}
.rcard .fn{font-size:13.5px; font-weight:500;}
.rcard .fs{font-size:12px;}
.rcard .row{margin-top:10px;}
.chip{border:0; padding:0; font-weight:500; letter-spacing:0; font-size:12px; text-transform:none; color:rgba(255,255,255,.55);}
.chip.ok{color:#fff; background:transparent;}
.chip.blue{color:rgba(255,255,255,.8);}
.chip.warn{color:rgba(255,255,255,.7); border:0;}
.chip.err{color:#F0A0A0;}
.ib{border-color:rgba(255,255,255,.14); width:30px; height:30px;}
.toast{background:#F4F4F2; box-shadow:0 20px 44px rgba(0,0,0,.5);}
#dropOverlay .dz{border:1px solid rgba(255,255,255,.5);}
.vb.on,.vb.pri{background:#fff; box-shadow:none;}
.stage .navb{border-radius:0;}
.hero-line{color:rgba(255,255,255,.55); font-size:13.5px; margin-top:34px;}
.hero-line b{color:#fff; font-weight:500;}
.saveto{height:46px; border:0; background:transparent; color:rgba(255,255,255,.72); display:inline-flex; align-items:center; gap:8px; padding:0 12px; font-size:14px; cursor:pointer;}
.saveto:hover{color:#fff;}
.saveto svg{width:14px; height:14px;}
.rcard .saved{color:#8FD8AC;}

/* ---------- 2026-10-29 · the workspace · pick, set and convert, download ----------
   The three screens every batch converter people know has: one drop zone and one
   button; then the files with the options and the single big action beside them;
   then the same column turned into the way out. Nothing to set before there are
   files, never two places to look. data-stage on #ws: empty · ready · busy · done. */
.ws{padding:36px 56px 56px; border-bottom:1px solid rgba(255,255,255,.06);}
.ws-head{max-width:860px;}
.ws-k{display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.5); font-size:12.5px;}
.ws-k a{color:rgba(255,255,255,.5); text-decoration:none;} .ws-k a:hover{color:#fff;}
.ws-k b{color:#fff; font-weight:500;}
.ws-h1{margin:12px 0 0; color:#fff; font-size:36px; font-weight:600; letter-spacing:-1.2px; line-height:1.08;}
.ws-sub{margin:10px 0 0; color:rgba(255,255,255,.62); font-size:15px; line-height:1.55; max-width:70ch;}
/* 1 · pick */
.ws .drop{max-width:none; margin:28px auto 0; padding:52px 32px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; border:1px dashed rgba(255,255,255,.26); background:rgba(255,255,255,.03); max-width:1480px; box-sizing:border-box;}
.ws .drop:hover,.ws .drop.on{border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.05);}
.ws .dropico{width:52px; height:52px; display:grid; place-items:center; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); margin-bottom:18px;}
.ws .dropico svg{width:22px; height:22px;}
.ws .drop .big{font-size:24px; letter-spacing:-.5px;}
.ws .drop .sub{max-width:52ch;}
.ws .drop .row{margin-top:22px; justify-content:center;}
.ws .drop .row .btn-w{height:48px; padding:0 28px; font-size:15px;}
.ws .drop .row .btn-g{height:48px;}
.ws .fmts{justify-content:center; margin-top:22px;}
.ws[data-stage="empty"] .ws-body{display:none;}
.ws:not([data-stage="empty"]) .drop{display:none;}
/* 2 · the files and the options */
.ws-body{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; margin-top:28px; align-items:start; max-width:1480px;}
.ws-main{min-width:0;}
.ws-bar{display:flex; align-items:center; gap:4px; min-height:42px; flex-wrap:wrap;}
.ws-count{color:#fff; font-size:14px; font-weight:500; margin-right:10px;}
.ws .status{color:rgba(255,255,255,.55); font-size:13px;}
.ws-bar .btn-g{height:38px; padding:0 10px; font-size:13.5px;}
.ws .rgrid{margin-top:14px;}
.ws-foot{color:rgba(255,255,255,.42); font-size:12.5px; margin-top:18px; line-height:1.6;}
.ws-side{position:sticky; top:80px;}
.ws-set summary{list-style:none; cursor:default; color:#fff; font-size:13px; font-weight:600; margin:0 0 10px; display:flex; justify-content:space-between; align-items:center;}
.ws-set summary::-webkit-details-marker{display:none;}
.ws-side .panel{display:grid; grid-template-columns:1fr; gap:14px; padding:16px 18px 18px;}
.ws-side .hint{font-size:12px;}
.ws-side input.sel{height:40px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:#F4F4F2; padding:0 12px; width:100%; box-sizing:border-box; font:500 13.5px ui-monospace,SFMono-Regular,Menlo,monospace; outline:none;}
.ws-side input.sel:focus{border-color:rgba(255,255,255,.5);}
.ws-side .chk{height:auto;}
.ws-go,.ws-done{margin-top:14px;}
.ws .btn-w.big,.ws .btn-o.big{width:100%; justify-content:center; height:52px; font-size:15px; box-sizing:border-box;}
.ws .btn-o.big{margin-top:8px; height:46px; font-size:14px;}
.ws .prog{margin-top:12px;}
.ws-note{color:rgba(255,255,255,.5); font-size:12.5px; line-height:1.55; margin-top:10px;}
.ws-pre{height:auto; padding:8px 0 0; font-size:12.5px; color:rgba(255,255,255,.62); text-align:left; white-space:normal;}
.ws-pre:hover{color:#fff;}
.ws-done-h{color:#fff; font-size:18px; font-weight:600; letter-spacing:-.3px;}
.ws-done-p{color:rgba(255,255,255,.62); font-size:13.5px; margin:4px 0 14px; line-height:1.5;}
.ws[data-stage="busy"] .ws-set{opacity:.5; pointer-events:none;}
.ws-off{margin-top:14px; color:rgba(255,255,255,.4); font-size:12px;}
.selbar{display:flex; align-items:center; gap:4px; margin-top:10px; padding:0 4px 0 14px; height:40px; background:rgba(223,255,63,.07); box-shadow:inset 0 0 0 1px rgba(223,255,63,.3); color:#F4E3B6; font-size:13px;}
.selbar[hidden]{display:none;}
.selbar span{flex:1;}
.selbar .btn-g{height:40px; font-size:13px;}
.rcard.sel{box-shadow:inset 0 0 0 2px #DFFF3F;}
.rcard .fn{cursor:default;}
.rcard .ib.retry{width:auto; padding:0 10px; font-size:12px; font-weight:500;}
.saveto{display:none;}
@media (max-width:1100px){ .ws-body{grid-template-columns:minmax(0,1fr) 280px;} }
@media (max-width:860px){
  .ws{padding:26px 22px 44px;}
  .ws-h1{font-size:30px; letter-spacing:-1px;}
  .ws-sub{font-size:14.5px;}
  .ws .drop{padding:36px 20px 30px; margin-top:22px;}
  .ws .drop .big{font-size:21px;}
  .ws .drop .row{flex-direction:column; align-items:stretch; width:100%;}
  .ws .drop .row .btn-w,.ws .drop .row .btn-g{width:100%; justify-content:center;}
  .ws-body{grid-template-columns:1fr; gap:16px; margin-top:20px;}
  .ws-side{position:static; order:-1;}
  .ws-go,.ws-done{margin-top:10px;}
  .ws-set{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); background:rgba(255,255,255,.035);}
  .ws-set summary{cursor:pointer; margin:0; padding:13px 16px;}
  .ws-set summary::after{content:attr(data-sum); color:rgba(255,255,255,.5); font-weight:400; font-size:12.5px; text-align:right; margin-left:12px;}
  .ws-set[open] summary::after{content:'Done';}
  .ws-side .panel{box-shadow:none; background:transparent; padding:0 16px 18px;}
  .ws-foot{display:none;}
  .ws-bar .ws-count{width:100%;}
  .rgrid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); gap:8px;}
  #folderBtn{display:none;}
}
@media (pointer:coarse) and (max-width:860px){ #folderBtn{display:none;} }

/* ---------- cues · where you are, what is happening, what changed ---------- */
.ws-steps{display:flex; gap:0; margin:16px 0 0; padding:0; list-style:none; color:rgba(255,255,255,.42); font-size:12.5px;}
.ws-steps li{display:flex; align-items:center; gap:8px; padding-right:22px; margin-right:14px; position:relative;}
.ws-steps li::after{content:''; position:absolute; right:0; top:50%; width:8px; height:1px; background:rgba(255,255,255,.22);}
.ws-steps li:last-child{padding-right:0; margin-right:0;} .ws-steps li:last-child::after{display:none;}
.ws-steps b{width:20px; height:20px; display:grid; place-items:center; font-size:11px; font-weight:600; color:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);}
.ws-steps li.on{color:#fff;} .ws-steps li.on b{background:#fff; color:#1D1D21; box-shadow:none;}
.ws-steps li.past{color:rgba(255,255,255,.6);} .ws-steps li.past b{background:transparent; color:#DFFF3F; box-shadow:inset 0 0 0 1px rgba(223,255,63,.5);}
.ws-stephead{color:rgba(255,255,255,.5); font-size:11.5px; font-weight:600; letter-spacing:.04em; margin-bottom:10px;}
.ws-done-h{display:flex; align-items:center; gap:8px;}
.ws-done-h svg{width:18px; height:18px; color:#8FD8AC;}
.ws .btn-w.big:disabled{opacity:1; background:rgba(255,255,255,.1); color:rgba(255,255,255,.55); cursor:default;}
/* switching · the column's two faces crossfade, a returning button nudges once */
.ws-go,.ws-done{animation:wsin .28s ease both;}
@keyframes wsin{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.ws-go.nudge .btn-w.big{animation:nudge .9s ease 1;}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(223,255,63,0)} 30%{box-shadow:0 0 0 4px rgba(223,255,63,.45)}}
.ws-main{animation:wsin .3s ease both;}
.rcard{animation:cardin .35s ease both;}
@keyframes cardin{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.rcard .th .wait{font-weight:500; letter-spacing:0; font-size:12px; text-transform:none;}
.ws-err{margin-top:10px; padding:12px 14px; background:rgba(240,160,160,.08); box-shadow:inset 0 0 0 1px rgba(240,160,160,.35); color:#F6C8C8; font-size:13px; line-height:1.5;}
.ws-err button{display:block; margin-top:8px; background:transparent; border:0; color:#fff; font:inherit; font-weight:600; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px;}
@media (prefers-reduced-motion:reduce){ .ws-go,.ws-done,.ws-main,.rcard{animation:none;} .ws-go.nudge .btn-w.big{animation:none;} }
@media (max-width:860px){ .ws-steps{font-size:12px;} .ws-steps li{padding-right:16px; margin-right:10px;} .ws-steps li span{display:none;} }
.rcard .th > .spin + .wait{position:absolute; bottom:12px; left:0; right:0; text-align:center; margin:0 !important;}
.rcard .th{grid-template-rows:1fr;}
@media (min-width:861px){ .ws-set summary{display:none;} }

/* ---------- the professional grammar · one scale, hairlines, label-left rows, no celebration ---------- */
.ws{padding:30px 56px 52px;}
.ws-h1{font-size:28px; letter-spacing:-.8px; margin-top:10px;}
.ws-sub{font-size:14px; color:rgba(255,255,255,.55); margin-top:6px;}
.ws-steps{margin-top:12px; font-size:12.5px; color:rgba(255,255,255,.38);}
.ws-steps li{padding-right:18px; margin-right:12px;}
.ws-steps li::after{width:6px; background:rgba(255,255,255,.18);}
.ws-steps b{width:auto; height:auto; box-shadow:none; background:transparent !important; color:inherit !important; font-weight:500; font-size:12.5px; font-variant-numeric:tabular-nums;}
.ws-steps b::after{content:'.';}
.ws-steps li.on{color:#fff;} .ws-steps li.past{color:rgba(255,255,255,.55);}
/* drop · a flat panel */
.ws .drop{border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.025); padding:44px 32px 36px; margin-top:22px;}
.ws .drop:hover,.ws .drop.on,.ws .drop:focus-visible{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.04);}
.ws .dropico{display:none;}
.ws .drop .big{font-size:18px; letter-spacing:-.2px; font-weight:600;}
.ws .drop .sub{font-size:13.5px; color:rgba(255,255,255,.55); margin-top:6px;}
.ws .drop .row{margin-top:18px; gap:8px;}
.ws .drop .row .btn-w{height:40px; padding:0 18px; font-size:13.5px;}
.ws .drop .row .btn-o{height:40px; padding:0 16px; font-size:13.5px; border-color:rgba(255,255,255,.18);}
.ws .drop .row .btn-g{height:40px; font-size:13px; color:rgba(255,255,255,.5);}
.ws .fmts{margin-top:18px; gap:5px;}
.ws .fmts span{font-size:10.5px; padding:3px 6px; color:rgba(255,255,255,.4); border-color:rgba(255,255,255,.1);}
/* the bar */
.ws-bar{min-height:36px;}
.ws-count{font-size:13px; font-variant-numeric:tabular-nums;}
.ws .status{font-size:12.5px; font-variant-numeric:tabular-nums;}
.ws-bar .btn-g{height:32px; font-size:13px; color:rgba(255,255,255,.6);}
.ws-foot{font-size:12px; color:rgba(255,255,255,.36);}
/* cards */
.rcard .badge{color:rgba(255,255,255,.7); background:rgba(23,23,26,.7); font-size:10.5px; padding:4px 7px;}
.rcard .fn{font-size:13px;}
.rcard .fs{font-size:11.5px;}
.chip{font-size:11.5px;}
.chip.ok{color:rgba(255,255,255,.85);}
.ib{width:28px; height:28px; border-color:rgba(255,255,255,.12);}
.ib svg{width:13px; height:13px;}
/* the inspector */
.ws-stephead{font-size:11px; color:rgba(255,255,255,.4); font-weight:500; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px;}
.ws-side .panel{padding:0 16px; gap:0; background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
.ws-side .ir{display:grid; grid-template-columns:76px 1fr; gap:4px 12px; align-items:center; padding:12px 0; border-top:1px solid rgba(255,255,255,.07);}
.ws-side .ir:first-child{border-top:0;}
.ws-side .ir > .fl{margin:0; font-size:12.5px; font-weight:500; color:rgba(255,255,255,.6);}
.ws-side .ir .hint{font-size:11.5px; color:rgba(255,255,255,.38); margin-top:5px; line-height:1.45;}
.ws-side .seg{display:inline-flex; width:100%;}
.ws-side .seg button{flex:1; height:32px; font-size:12.5px; padding:0 8px;}
.ws-side select.sel{height:34px; font-size:13px; padding:0 30px 0 10px;}
.ws-side input.sel{height:34px; font-size:12.5px; padding:0 10px;}
.ws-side .range{height:34px; gap:10px;}
.ws-side .range output{font-size:13px; min-width:24px;}
.ws-side .chk{font-size:13px; height:auto;}
.ws-side .chk input{width:14px; height:14px;}
.ws-go,.ws-done{margin-top:12px; animation:none;}
.ws .btn-w.big{height:44px; font-size:14px;}
.ws .btn-o.big{height:40px; font-size:13.5px; margin-top:6px; border-color:rgba(255,255,255,.18);}
.ws-note{font-size:12px; color:rgba(255,255,255,.42); margin-top:8px;}
.ws-pre{font-size:12px; color:rgba(255,255,255,.5); padding-top:6px;}
.ws-done-h{font-size:14px; font-weight:600; letter-spacing:0;}
.ws-done-h svg{display:none;}
.ws-done-p{font-size:12.5px; color:rgba(255,255,255,.55); margin:2px 0 10px; font-variant-numeric:tabular-nums;}
.ws-go.nudge .btn-w.big{animation:none;}
.ws-go.nudge{animation:wsin .25s ease both;}
.ws .prog{height:1px; margin-top:10px;}
.ws .prog i{background:rgba(255,255,255,.85);}
.selbar{height:36px; font-size:12.5px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); color:#fff;}
.selbar .btn-g{height:36px; font-size:12.5px;}
.rcard.sel{box-shadow:inset 0 0 0 1.5px #fff;}
.ws-off{font-size:11.5px; color:rgba(255,255,255,.35);}
.ws-err{font-size:12.5px;}
@media (max-width:860px){
  .ws .drop{padding:30px 18px 26px;}
  .ws-side .ir{grid-template-columns:1fr;}
  .ws .btn-w.big{height:48px;}
}
.ws-steps b{display:inline; box-shadow:none !important;}
.ws-steps li{align-items:baseline; gap:5px;}

/* ---------- progress on the button itself ---------- */
.ws .btn-w.big{position:relative; overflow:hidden;}
.ws[data-stage="busy"] .btn-w.big::before{content:''; position:absolute; left:0; top:0; bottom:0; width:var(--p,0%); background:rgba(29,29,33,.14); transition:width .25s;}
.ws .btn-w.big span{position:relative;}

/* ---------- the phone · a docked action, options as a sheet, the files above ---------- */
@media (max-width:860px){
  .ws{padding-bottom:28px;}
  .ws-steps{display:none;}
  .ws-sub{display:none;}
  .ws-h1{font-size:24px; letter-spacing:-.6px;}
  .ws .drop{padding:28px 18px 24px; text-align:left; align-items:stretch;}
  .ws .drop .big{font-size:17px;}
  .ws .drop .row{flex-direction:row; flex-wrap:wrap;}
  .ws .drop .row .btn-w{width:100%; height:48px; font-size:15px;}
  .ws .drop .row .btn-o,.ws .drop .row .btn-g{width:auto; flex:1; height:42px;}
  .ws .fmts{display:none;}
  .ws-body{display:flex; flex-direction:column;}
  .ws-side{order:-1; position:static;}
  .ws-stephead{display:none;}
  .ws-set{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); background:rgba(255,255,255,.03);}
  .ws-set summary{display:flex; padding:14px 16px; font-size:14px; font-weight:500; cursor:pointer;}
  .ws-set summary::after{content:attr(data-sum); font-size:13px;}
  .ws-set[open] summary::after{content:'Done';}
  .ws-side .panel{box-shadow:none; background:transparent; padding:0 16px 6px;}
  .ws-side .ir{grid-template-columns:88px 1fr; align-items:center; padding:12px 0;}
  .ws-side .ir .hint{display:none;}
  .ws-side .seg button{height:36px;}
  .ws-side select.sel,.ws-side input.sel{height:40px; font-size:14px;}
  /* the dock */
  .ws-go,.ws-done{position:fixed; left:0; right:0; bottom:0; z-index:30; margin:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(23,23,26,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.1); animation:none;}
  .ws-go .btn-w.big{height:50px; font-size:15px;}
  .ws-note{margin-top:6px; font-size:12px; text-align:center;}
  .ws-pre{display:none;}
  .ws-err{margin-top:8px;}
  .ws-done{display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center;}
  .ws-done-h{display:none;}
  .ws-done-p{grid-column:1/-1; margin:0 0 2px; text-align:left;}
  .ws-done .btn-w.big{grid-column:1/-1; height:50px; font-size:15px;}
  .ws-done .btn-o.big{display:none;}
  .ws-done #sendKepla{display:inline-flex; grid-column:1; margin:0; height:40px; font-size:13.5px;}
  .ws-done #startOver{display:inline-flex; grid-column:2; padding:0 6px; height:40px; font-size:13px; white-space:nowrap;}
  .ws-done #retryFailed{grid-column:1/-1;}
  .ws-done .ws-note{display:none;}
  body.ws-docked{padding-bottom:112px;}
  .ws-bar{gap:0;}
  .ws-bar .btn-g{height:36px; padding:0 8px;}
  .ws-count{font-size:13px;}
  .ws .rgrid{grid-template-columns:1fr 1fr; gap:10px;}
  .rcard .bd{padding:10px 12px 12px;}
  .rcard .fn{font-size:12.5px;}
  .rcard .fs{display:none;}
  .ib{width:36px; height:36px;}
  .ws-off{display:none;}
}
@media (max-width:860px){ .ws-set{display:block; width:100%;} .ws-set summary{width:100%; box-sizing:border-box;} .ws-h1{font-size:22px;} }