:root{--terminal-font:ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;color-scheme:light;font-family:var(--terminal-font);background:white;color:black}
*{box-sizing:border-box}
body{margin:0;background:#fff}
[hidden]{display:none!important}
button{font:14px var(--terminal-font);min-height:34px;padding:3px 17px;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:2px solid #333;outline-offset:3px}
#loading{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
#spinner{width:28px;height:28px;position:relative}
.spoke{position:absolute;inset:0;transform:rotate(var(--angle))}
.spoke i{position:absolute;left:12px;top:0;width:3px;height:8px;border-radius:2px;background:#777;animation:spin 1s linear infinite;animation-delay:var(--delay)}
#spinner.glitch{animation:stutter 1.1s steps(1) both}
#spinner.glitch .spoke i{animation-duration:.23s}
#spinner.collapse .spoke{animation:fall .9s cubic-bezier(.55,.01,.86,.45) both;animation-delay:var(--fall-delay)}
#spinner.collapse .spoke i{animation:none;opacity:.55}
#console{padding:16px 12px max(80px,env(safe-area-inset-bottom));font:12px/1.45 var(--terminal-font);max-width:760px}
pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 16px}
#console-log{color:#555;max-height:126px;overflow:hidden}
#export{border-top:1px solid #bbb;margin-top:17px;padding-top:4px}
#export p{margin:12px 0}
#export>p:first-child{display:flex;justify-content:space-between;gap:16px}
progress{width:100%;height:18px;display:block}
#export-log{height:137px;overflow:hidden;margin:14px 0 8px;color:#222}
#transfer-status{color:#555;min-height:18px}
#photo-preview{display:flex;align-items:center;gap:10px;height:56px;margin-top:12px;overflow:hidden}
#photo-image{width:64px;height:48px;object-fit:cover;filter:saturate(.35) contrast(1.1);border:1px solid #aaa}
#photo-caption{margin:0;font-size:11px;color:#666}
#stay-warning{position:fixed;z-index:4;bottom:0;left:0;right:0;margin:0;padding:11px 12px max(11px,env(safe-area-inset-bottom));background:#fff;color:#a00000;border-top:1px solid #ddd;font:12px/1.5 var(--terminal-font);animation:warning-pulse 1.8s ease-in-out infinite}
#falling-letters{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
#ending{position:fixed;inset:0;z-index:6;display:grid;place-items:center;padding:28px;pointer-events:none}
#ending h1{max-width:620px;margin:0;color:#008f32;font:700 clamp(28px,7vw,44px)/1.3 var(--terminal-font);text-align:center;animation:ending-fade 1.8s ease-out both;outline:none}
@keyframes warning-pulse{0%,100%{color:#a00000}50%{color:#c58a8a}}
@keyframes ending-fade{from{opacity:0}to{opacity:1}}
#fragments,#windows{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#fragments{z-index:1}
#windows{z-index:2}
.fragment{position:absolute;color:#666;font:12px/1.4 var(--terminal-font);white-space:nowrap;opacity:0;animation:disperse var(--duration) ease-out both}
@keyframes disperse{0%{opacity:0;transform:translate(0,0)}18%,62%{opacity:.5}100%{opacity:0;transform:translate(var(--drift),14px)}}
.console-window{position:absolute;width:min(330px,calc(100vw - 28px));border:1px solid #777;background:#fff;box-shadow:2px 2px 0 #ccc;color:#111;font:12px/1.45 var(--terminal-font)}
.window-title{background:#e6e6e6;border-bottom:1px solid #999;padding:5px 8px;font:12px var(--terminal-font);color:#222;display:flex;justify-content:space-between;gap:12px}
.console-window pre{padding:10px;min-height:83px;margin:0}
#warning{position:fixed;z-index:3;top:39%;left:50%;transform:translate(-50%,-50%);width:min(320px,calc(100vw - 32px));border:1px solid #777;background:#f3f3f3;box-shadow:2px 2px 0 #bbb;font:14px/1.5 var(--terminal-font)}
.warning-content{padding:16px;text-align:right}
.warning-content p{text-align:left;margin:0 0 20px}
.warning-content button{min-width:75px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes spin{0%{opacity:1}100%{opacity:.12}}
@keyframes stutter{0%,22%,48%,80%,100%{transform:translate(0,0)}10%{transform:translate(2px,-1px)}30%{transform:translate(-3px,1px) skewX(8deg)}55%{transform:translate(3px,0) scaleX(.85)}68%{transform:translate(-2px,2px) skewX(-12deg)}90%{transform:translate(1px,3px)}}
@keyframes fall{0%{transform:rotate(var(--angle));opacity:1}20%{transform:translate(var(--dx),10px) rotate(var(--angle));opacity:.8}100%{transform:translate(var(--dx),min(45vh,320px)) rotate(var(--rotation));opacity:0}}
@media(prefers-reduced-motion:reduce){.spoke i{animation:none;opacity:.45}#spinner.glitch{animation:none;opacity:.55}#spinner.collapse .spoke{animation:none;opacity:0}.fragment,#stay-warning,#ending h1{animation:none}}