:root{color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#050506}
body{margin:0;min-height:100dvh;font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;color:#f4f4f5;-webkit-font-smoothing:antialiased}
main{width:min(100% - 48px,420px);min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;padding:max(26px,env(safe-area-inset-top)) 0 max(22px,env(safe-area-inset-bottom))}
.brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:#8b8b93}.brand i{width:8px;height:8px;border-radius:50%;background:#c3adff}
.stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:9vh}.stage.top{justify-content:flex-start;padding:52px 0 0}
h1{margin:0;font-size:36px;line-height:1.08;font-weight:650;letter-spacing:-.035em}
.sub{margin:10px 0 0;font-size:16px;color:#8b8b93}
form{margin:0}
#code{display:block;width:100%;margin:46px 0 0;padding:0;border:0;border-radius:0;outline:0;background:none;color:#fff;caret-color:#c3adff;font:500 48px/1 ui-rounded,-apple-system,system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.3em}
#code::placeholder{color:#ffffff26}
.track{height:2px;margin-top:16px;border-radius:1px;background:#ffffff1c;overflow:hidden}
.track b{display:block;width:0;height:100%;background:#c3adff;transition:width .22s cubic-bezier(.2,.8,.2,1)}
.err{min-height:22px;margin:14px 0 0;font-size:14px;color:#ff9b93}
.go{margin-top:8px;padding:0;border:0;background:none;color:#8b8b93;font:inherit;font-size:15px}
.rows{margin-top:30px}
.file{display:flex;align-items:center;gap:14px;margin-top:10px;padding:15px 16px 15px 20px;border-radius:22px;background:#0e0e10;color:inherit;text-decoration:none;transition:background .15s,transform .15s}
.file:active{transform:scale(.985);background:#151518}
.name{flex:1;min-width:0}.name b{display:block;overflow:hidden;font-size:16px;font-weight:550;text-overflow:ellipsis;white-space:nowrap}.name span{font-size:13px;color:#8b8b93}
.dot{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#c3adff;color:#170f2a}.dot.ghost{background:#ffffff14;color:#c3adff}.dot svg{width:18px;height:18px}
.up{cursor:pointer}.up input{display:none}.up.off{opacity:.45;pointer-events:none}
.xfer{margin-top:12px;padding:18px 20px 16px;border-radius:22px;background:#0e0e10}
.xtop{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.xtop b{min-width:0;overflow:hidden;font-size:15px;font-weight:550;text-overflow:ellipsis;white-space:nowrap}
.xtop span{flex:none;font-size:30px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#c3adff}
.xtrack{position:relative;height:4px;margin-top:14px;border-radius:2px;background:#ffffff14;overflow:hidden}
.xtrack i{position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:2px;background:#c3adff;transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
.xfer[data-state=wait] .xtrack i{width:38%;transform:none;transition:none;animation:slide 1.3s cubic-bezier(.4,0,.2,1) infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(265%)}}
#xinfo{margin:12px 0 0;font-size:13px;color:#8b8b93}
.xfer[data-state=done] #xinfo{color:#c3adff}
.xfer[data-state=fail] .xtop span,.xfer[data-state=fail] #xinfo{color:#ff9b93}.xfer[data-state=fail] .xtrack i{background:#ff9b93;transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.xfer[data-state=wait] .xtrack i{animation:none;width:100%;opacity:.5}}
.who{margin:14px 0 0;font-size:13px;color:#8b8b93}.who b{color:#f4f4f5;font-weight:550}.who button{margin-left:10px;padding:0;border:0;background:none;color:#c3adff;font:inherit;font-size:13px}
.who[hidden],.who-form[hidden]{display:none}.who-form{display:flex;gap:8px;margin-top:12px}.who-form input{flex:1;min-width:0;height:40px;padding:0 16px;border:0;border-radius:20px;background:#ffffff12;color:#fff;font:inherit;font-size:15px;outline:0;caret-color:#c3adff}.who-form button{height:40px;padding:0 18px;border:0;border-radius:20px;background:#c3adff;color:#170f2a;font:inherit;font-size:14px;font-weight:600}
.foot{padding-top:24px;font-size:12px;color:#ffffff40}
.shake{animation:shake .35s}@keyframes shake{20%{transform:translateX(-8px)}50%{transform:translateX(6px)}80%{transform:translateX(-3px)}}
button.file{width:100%;border:0;font:inherit;text-align:left;cursor:pointer}
:focus-visible{outline:2px solid #c3adff;outline-offset:3px}
[hidden]{display:none!important}