:root{
  /* Apple HIG: semantic colors. Dark = base/elevated backgrounds, label hierarchy, >=4.5:1 text contrast */
  color-scheme:light dark;
  --bg:#f2f2f7; --bg2:#ffffff; --ink:#000; --dim:#636366; --faint:#636366;
  --glass:rgba(255,255,255,.72); --glass2:rgba(120,120,128,.12); --edge:rgba(60,60,67,.2); --field:rgba(120,120,128,.12);
  --steel:#a9b0b6; --accent:#0071e3; --accent-hover:#0077ed; --accent-ink:#fff; --link:#0066cc; --warn:#d70015; --ok:#1e7a35;
  --shadow:0 8px 30px rgba(0,0,0,.08);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,system-ui,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1c1c1e; --bg2:#1c1c1e; --ink:#fff; --dim:rgba(235,235,245,.6); --faint:rgba(235,235,245,.6);
    --glass:rgba(44,44,46,.72); --glass2:rgba(120,120,128,.24); --edge:rgba(84,84,88,.65); --field:rgba(120,120,128,.24);
    --steel:#dde2e7; --accent:#0071e3; --accent-hover:#0a84ff; --link:#409cff; --warn:#ff6961; --ok:#30d158;
    --shadow:0 8px 30px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{display:flex;flex-direction:column;margin:0;color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;min-height:100vh;min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--bg2) 0,var(--bg) 360px) var(--bg);background-attachment:fixed}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:5;text-align:left;padding:14px 28px;background:var(--glass);border-bottom:1px solid var(--edge);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
h1{display:flex;align-items:center;margin:0;font-family:"Zalando Sans Expanded",var(--font);font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.logo{display:none;height:1.3em;width:auto}
@media (max-width:520px){.logo{display:block}.wordmark{display:none}}
.st{color:var(--steel)}
.rr{color:color-mix(in srgb,var(--warn) 88%,#fff)}
.rb{color:color-mix(in srgb,var(--accent) 88%,#fff)}
#sub{margin:0 8px 24px;font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.2;text-align:center}
main{flex:1 0 auto;width:100%;max-width:640px;margin:0 auto;padding:64px 20px 56px}
.card{background:var(--glass);border:1px solid var(--edge);border-radius:20px;box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
form.card{position:relative;padding:8px;margin:0 0 12px}
#src{display:block;width:100%;background:var(--field);color:var(--ink);border:1px solid transparent;border-radius:14px;padding:13px 56px 13px 52px;
  font:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
#src.err{border-color:var(--warn)}
#src.err:focus{border-color:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 25%,transparent)}
#src::placeholder{color:var(--faint)}
#src:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
#src:disabled{opacity:.55}
button{font:inherit;font-weight:500;background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:10px 20px;cursor:pointer;
  transition:background .15s,transform .05s}
#clr{position:absolute;left:14px;top:50%;width:30px;height:30px;padding:0;margin-top:-15px;border-radius:50%;background:transparent;color:var(--faint);
  display:flex;align-items:center;justify-content:center}
#clr svg{width:20px;height:20px}
#clr .i-paste,#clr.has .i-x{display:block}
#clr .i-x,#clr.has .i-paste{display:none}
#clr:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
#go{position:absolute;right:16px;top:50%;width:32px;height:32px;padding:0;margin-top:-16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
#go:active:not(:disabled){transform:scale(.92)}
button:hover:not(:disabled){background:var(--accent-hover)}
button:active:not(:disabled){transform:scale(.97)}
button:disabled{opacity:.4;cursor:not-allowed}
#note{color:var(--warn);min-height:1.5em;margin:4px 8px 20px;line-height:1.4}
#transfers{display:flex;flex-direction:column;max-height:min(560px,75vh);padding-top:4px;overflow-y:auto;overscroll-behavior:contain}
.transfer{position:relative;height:90px;margin-bottom:calc(var(--pitch,64px) - 90px);padding:14px 20px 0;overflow:hidden;color:#fff;border-radius:18px;border-top:1px solid rgba(255,255,255,.22);
  background:linear-gradient(145deg,hsl(var(--hue) 55% 40%),hsl(var(--hue) 60% 27%));box-shadow:0 -3px 12px rgba(0,0,0,.35);transition:filter .15s;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.transfer:hover{filter:brightness(1.14)}}
#transfers:has(.expanded) .transfer:not(.expanded){filter:brightness(.74) saturate(.74)}
@media (hover:hover){#transfers:has(.expanded) .transfer:not(.expanded):hover{filter:brightness(.88) saturate(.85)}}
.transfer.expanded{order:999;z-index:1;height:auto;margin-bottom:0;padding-bottom:20px;overflow:visible}
.strip{display:flex;align-items:center;gap:12px;height:20px;font-size:13px;font-weight:600}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 0}
.meta{display:flex;gap:22px}
.fact{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.fact svg{flex:none;opacity:.8}
.num{font-size:12px;letter-spacing:.08em;opacity:.7;font-variant-numeric:tabular-nums}
.tname{margin-top:6px;font-size:17px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transfer.expanded .tname{white-space:normal;overflow:visible;overflow-wrap:anywhere}
.val{flex:none;text-align:right;font-variant-numeric:tabular-nums}
.val:empty{display:none}
.state{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.9}
.closer,.cta{position:relative;z-index:1}
.transfer:not(.expanded) .closer,.transfer:not(.expanded) .cta{display:none}
.transfer .closer,.transfer .closer:hover:not(:disabled){flex:none;width:12px;height:12px;padding:0;border-radius:50%;background:#ff5f57;color:transparent;display:flex;align-items:center;justify-content:center}
.transfer .closer:hover:not(:disabled){color:rgba(0,0,0,.6)}
.transfer .closer:focus-visible,.transfer .cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.transfer .cta,.transfer .cta:hover:not(:disabled){padding:6px 16px;font-size:13px;font-weight:600;border-radius:999px;background:rgba(255,255,255,.2);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.transfer .cta:hover:not(:disabled){background:rgba(255,255,255,.32)}
.transfer .cta[hidden]{display:none}
.transfer .bar{margin:14px 0 0;background:rgba(255,255,255,.28)}
.transfer .fill{background:#fff}
.transfer .hit,.transfer .hit:hover:not(:disabled),.transfer .hit:active:not(:disabled){position:absolute;inset:0;width:100%;padding:0;border-radius:inherit;background:transparent;cursor:pointer;transform:none}
.transfer .hit:focus-visible{outline:3px solid #fff;outline-offset:-5px}
#detail{margin-top:14px;padding:18px 22px;border-top:3px solid hsl(var(--hue) 55% 40%)}
.bar{height:6px;background:var(--glass2);border-radius:999px;margin:8px 0 0;overflow:hidden}
.fill{height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .4s ease}
.msg{margin:8px 0;color:var(--warn)}
.msg.ok{color:var(--ok)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}
.overlay[hidden]{display:none}
.win{width:100%;max-width:560px;height:min(420px,70vh);display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--edge);border-radius:12px;box-shadow:0 22px 70px rgba(0,0,0,.45);overflow:hidden}
.titlebar{position:relative;display:flex;align-items:center;justify-content:center;padding:12px 16px;background:var(--glass2);border-bottom:1px solid var(--edge);font-size:13px;font-weight:600}
#wtitle{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#wclose{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:12px;height:12px;padding:0;border-radius:50%;background:#ff5f57;color:transparent;display:flex;align-items:center;justify-content:center;border:0}
#wclose:hover{background:#ff5f57;color:rgba(0,0,0,.6)}
#wzip,#widm{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;width:26px;height:26px;align-items:center;justify-content:center;border-radius:50%;color:var(--link)}
#widm{right:44px}
#wzip:hover,#widm:hover{background:var(--glass2)}
#wzip[hidden],#widm[hidden]{display:none}
#wzip .tick,#files .tick{display:none}
#wzip[data-state=started] .ico,#files li[data-state=started] .ico{display:none}
#wzip[data-state=started] .tick,#files li[data-state=started] .tick{display:inline;color:var(--ok)}
#wnote{padding:8px 16px;font-size:12px;line-height:1.4;font-style:italic;color:var(--dim);border-bottom:1px solid var(--edge)}
#wnote[hidden]{display:none}
#files{flex:1 1 auto;min-height:0;list-style:none;padding:6px;margin:0;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.5) transparent}
@supports selector(::-webkit-scrollbar){
  #files{scrollbar-width:auto;scrollbar-color:auto}
  #files::-webkit-scrollbar{width:13px}
  #files::-webkit-scrollbar-track{background:transparent}
  #files::-webkit-scrollbar-thumb{background:rgba(128,128,128,.5);background-clip:content-box;border:3px solid transparent;border-radius:999px}
  #files::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,.8);background-clip:content-box}
}
#files li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-size:14px}
#files li:hover{background:var(--glass2)}
#files svg{flex:none;color:var(--link)}
#files a{color:var(--link);text-decoration:none;font-weight:500;font-size:13px}
#files a.dl{display:inline-flex;flex:none;line-height:0;border-radius:50%}
#files a.dl:hover{opacity:.7}
.fname{word-break:break-all;flex:1 1 auto}
.fsize{color:var(--dim);font-size:12px;white-space:nowrap}
@media (max-width:520px){header{padding-top:max(14px,env(safe-area-inset-top))}main{padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right))}.overlay{padding:30px}#widm{display:none!important}}
#go svg{overflow:visible}
#go .mag{transform-box:fill-box;transform-origin:70% 50%}
#go .fil{opacity:0}
#go:hover:not(:disabled) .mag{animation:tug 1s cubic-bezier(.3,0,.3,1) infinite}
#go:hover:not(:disabled) .fil{animation:pull 1s cubic-bezier(.5,0,.9,.6) infinite;animation-delay:var(--t)}
@keyframes tug{0%,100%{transform:translateX(0) rotate(0) scale(1)}30%{transform:translateX(3px) rotate(6deg) scale(1.08)}45%{transform:translateX(1.6px) rotate(-3deg) scale(1.04)}60%{transform:translateX(2.6px) rotate(4deg) scale(1.07)}}
@keyframes pull{0%{transform:translateX(calc(var(--d)*-1));opacity:0}15%{opacity:.85}85%{opacity:.85}100%{transform:translateX(3px);opacity:0}}
@media (prefers-reduced-motion:reduce){.fill,button,#src,.transfer{transition:none;animation:none}#go .mag,#go .fil{animation:none!important}}
footer{flex:none;text-align:center;color:var(--dim);font-size:12px;padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--edge)}
#empty{margin-top:6px;padding:40px 22px;text-align:center;color:var(--dim);background:transparent;border:2px dashed color-mix(in srgb,var(--dim) 55%,transparent);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#empty{touch-action:pan-y;user-select:none;-webkit-user-select:none}
#empty .et{font-size:17px;font-weight:600}
#play{display:block;width:100%;height:140px;margin:-24px 0 10px}
#transfers:not(:empty) ~ #empty{display:none}

#install{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:14px}
#install[hidden]{display:none}
.sheet{width:100%;max-width:420px;align-self:flex-end;margin-bottom:max(12px,env(safe-area-inset-bottom));background:var(--bg2);border:1px solid var(--edge);border-radius:20px;box-shadow:0 22px 70px rgba(0,0,0,.45);padding:18px 20px 22px}
.shead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shead h2{margin:0;font-size:18px;font-weight:600}
#iclose{width:28px;height:28px;padding:0;border-radius:50%;background:var(--glass2);color:var(--ink);display:flex;align-items:center;justify-content:center}
#gsteps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px;counter-reset:s}
#gsteps li{display:flex;align-items:center;gap:12px;line-height:1.35}
#gsteps svg{flex:none;color:var(--accent)}