:root{color-scheme:light;--ink:#193d32;--muted:#647c70;--green:#10785c;--cream:#fffdf5;--coral:#dc745f}*{box-sizing:border-box}body{margin:0;background:transparent;color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.animation{max-width:1120px;margin:auto;padding:24px;background:#fffdf8;border:1px solid #dce5d8;border-radius:24px}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.eyebrow{color:var(--green);font-size:10px;letter-spacing:2px;font-weight:700;margin:0 0 6px}h2{font-size:clamp(20px,3vw,30px);line-height:1.2;letter-spacing:-.7px;margin:0}h3{font-size:14px;margin:0;line-height:1.3}.duration{font:600 12px ui-monospace,monospace;background:#e9f1df;padding:7px 10px;border-radius:8px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative}.lane{min-width:0;border:1px solid #eadbcb;border-radius:18px;overflow:hidden;background:#fbede2}.fast{background:#e6f3e4;border-color:#c8dfc6}.lane-heading{display:flex;align-items:center;gap:10px;padding:14px 18px}.step-badge{font:600 10px ui-monospace,monospace;background:#ffffffb0;width:25px;height:25px;border-radius:50%;display:grid;place-items:center}.versus{position:absolute;z-index:10;top:42%;left:50%;transform:translate(-50%,-50%);border:4px solid #fffdf8;background:var(--ink);color:#fffdf8;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;font:bold 10px system-ui;letter-spacing:1px}.scene{position:relative;height:290px;overflow:hidden}.screen{position:absolute;left:15%;top:27px;width:72%;height:160px;background:#fffefa;border:2px solid #476451;border-radius:10px;box-shadow:5px 7px 0 #193d3212;overflow:hidden}.window-bar{height:23px;background:#e4eadf;border-bottom:1px solid #c9d6c3;display:flex;align-items:center;gap:3px;padding:0 7px;font:600 9px system-ui}.window-bar>i{width:4px;height:4px;border-radius:100%;background:#97ad91}.window-bar>span{margin-left:5px}.window-bar>em{margin-left:auto;font-style:normal;font-size:8px;color:#577b64}.excel{background:#21794f;color:white}.excel i{background:#9bd6a7}.wall-clock{position:absolute;right:17px;top:0;width:27px;height:27px;border:2px solid #9aac92;border-radius:50%;background:#ffffff80}.wall-clock:after{content:"";position:absolute;left:11px;top:11px;width:4px;height:4px;background:#708d70;border-radius:50%}.wall-clock>span{position:absolute;left:12px;top:3px;height:11px;border-left:1.5px solid #708d70;transform-origin:50% 100%;transform:rotate(calc(var(--progress,0)*1440deg))}.imagej-tools{font-size:10px;letter-spacing:3px;background:#f7f7f0;height:20px;padding-left:8px}.paper-sensor{position:absolute;left:23%;top:51px;width:55%;height:62px;display:flex;justify-content:space-evenly;align-items:center;background:#f1e2bb;border:6px solid #fcf9e9;transform:rotate(-5deg)}.paper-sensor b,.image-thumb b{display:block;background:#b97a52;border-radius:50%;width:22px;height:22px}.paper-sensor b:nth-child(2),.image-thumb b:nth-child(2){background:#9f5a47}.paper-sensor b:nth-child(3),.image-thumb b:nth-child(3){background:#d7ad65}.imagej-roi{position:absolute;left:26%;top:67px;width:34px;height:30px;border:2px dashed #5282e6;opacity:0}.readout{position:absolute;bottom:7px;left:9px;right:9px;background:#f0f1eb;border-radius:4px;padding:4px;font:9px ui-monospace,monospace;opacity:0}.spreadsheet{left:11%;top:41px;width:79%;transform:translateY(16px) rotate(3deg);opacity:0}.sheet-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;font:10px ui-monospace,monospace;margin:10px 10px 0;gap:0}.sheet-grid>div{min-height:25px;border-right:1px solid #dce5d8;border-bottom:1px solid #dce5d8;padding:4px;white-space:nowrap}.sheet-grid .sheet-head{background:#edf3e9;font-size:8px;font-family:system-ui}.cell-selection{position:absolute;left:42%;top:57px;width:17%;height:26px;border:2px solid #1e8754;box-shadow:0 0 0 1px #fff;opacity:0}.error-mark{position:absolute;right:13px;top:29px;border-radius:100%;background:#dc745f;color:white;width:24px;height:24px;display:grid;place-items:center;font-weight:bold;opacity:0}.desk{position:absolute;left:7%;right:7%;height:10px;top:204px;background:#b8a07d;border-bottom:3px solid #9e8464;border-radius:5px}.desk:before,.desk:after{content:"";position:absolute;top:10px;width:9px;height:78px;background:#b8a07d;transform:rotate(4deg)}.desk:before{left:8%}.desk:after{right:8%;transform:rotate(-4deg)}.keyboard{position:absolute;left:42%;top:190px;width:30%;height:11px;background:repeating-linear-gradient(90deg,#e5e9da 0 8px,#b7c3ae 8px 9px);border:2px solid #78916d;border-radius:4px;transform:skew(-18deg)}.mascot{position:absolute;width:138px;height:158px;left:8%;bottom:0;z-index:4;filter:drop-shadow(0 4px 0 #193d3210)}.mascot-sprite{width:100%;height:100%;background-image:url("mascot.png");background-repeat:no-repeat;background-size:300% 100%;background-position:0% center}.mascot-fast{left:3%}.mascot-fallback{font-size:74px;display:flex;align-items:center;justify-content:center}.cursor{position:absolute;font:bold 31px system-ui;color:#234636;text-shadow:1px 1px white,-1px -1px white;z-index:8;left:56%;top:139px;opacity:0}.caption{margin:0;min-height:64px;padding:13px 18px 16px;font-size:13px;font-weight:550;line-height:1.5;background:#ffffff70}.anger-puff{position:absolute;bottom:118px;left:14%;color:#d55442;font-size:34px;opacity:0}.redo-mark{position:absolute;left:65%;top:88px;color:#c45a43;font-size:65px;font-weight:bold;opacity:0;z-index:6}.roi-images{display:flex;gap:8px;padding:11px 9px 6px}.image-thumb{position:relative;flex:1;background:#f1e2bb;border:4px solid #f9f7eb;box-shadow:0 1px 3px #26412820;height:55px;display:flex;flex-wrap:wrap;gap:3px;align-items:center;justify-content:center}.image-thumb b{width:12px;height:12px;position:relative}.image-thumb b.measured:after{content:"";position:absolute;inset:-4px;border:1.5px solid #177b5d;border-radius:50%}.image-thumb b.measured:before{content:"✓";position:absolute;right:-7px;top:-9px;color:#177b5d;font-size:9px;font-weight:bold}.auto-rows{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;margin:0 10px;font:8px ui-monospace,monospace;opacity:0}.auto-rows>span{padding:2px 3px;border-bottom:1px solid #e4ebdf}.export-pill{position:absolute;right:10px;bottom:8px;font:600 9px system-ui;background:#117455;color:white;border-radius:5px;padding:4px 10px;opacity:0}.done-badge{position:absolute;right:15px;top:30px;background:#fffefa;border:3px solid #55a979;color:#248459;width:41px;height:41px;border-radius:50%;display:grid;place-items:center;font-size:26px;opacity:0;box-shadow:2px 3px 0 #183c3220}.upload-stack{position:absolute;left:33%;top:57px;width:70px;height:65px;z-index:6;opacity:0}.upload-stack>span{position:absolute;width:47px;height:56px;border:2px solid #467555;border-radius:5px;background:linear-gradient(150deg,#fff 42%,#b9cea1 43% 68%,#6b9564 69%);left:0;top:0;transform:rotate(-15deg)}.upload-stack>span:nth-child(2){left:10px;top:4px;transform:rotate(4deg)}.upload-stack>span:nth-child(3){left:20px;top:8px;transform:rotate(15deg)}.upload-stack>b{position:absolute;right:-16px;bottom:-12px;width:32px;height:32px;background:#217e58;color:white;border:3px solid white;border-radius:50%;font-size:23px;line-height:22px;text-align:center}.click-ring{position:absolute;left:42%;top:83px;width:24px;height:24px;border:3px solid #d7a744;border-radius:50%;opacity:0;z-index:7}.door{position:absolute;right:12px;top:39px;width:65px;height:153px;background:#fbedb6;border:5px solid #b5cd9c;border-bottom:0;border-radius:20px 20px 0 0;overflow:hidden;opacity:0}.sun{position:absolute;right:6px;top:19px;width:27px;height:27px;background:#f0bf60;border-radius:50%}.hill{position:absolute;left:-26px;top:92px;width:120px;height:100px;background:#83aa79;border-radius:50%}.door-frame{position:absolute;left:0;top:0;bottom:0;width:11px;background:#cde0ba;border-right:2px solid #b5cd9c}.wave{position:absolute;right:31px;top:58px;font-size:31px;color:#d8b04c;opacity:0}.controls{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}button{font:600 12px system-ui;color:var(--ink);border:1px solid #ccdac7;background:#fffefa;padding:9px 14px;border-radius:9px;cursor:pointer;min-height:38px}.play{background:var(--green);color:white;border-color:var(--green);min-width:92px}button:hover{filter:brightness(.96)}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #dfab4f;outline-offset:3px}input[type=range]{min-width:110px;flex:1;accent-color:var(--green);height:20px}output{font:10px ui-monospace,monospace;color:var(--muted)}.disclaimer{font-size:10px;line-height:1.6;color:var(--muted);margin:12px 0 0}details{font-size:11px;color:var(--muted);margin-top:9px}summary{cursor:pointer;color:var(--ink)}details p{white-space:pre-line;max-width:85ch}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.manual[data-stage="1"] .imagej-roi,.manual[data-stage="1"] .readout{opacity:1}.manual[data-stage="1"] .cursor-manual{opacity:1;left:35%;top:74px}.manual[data-stage="2"] .spreadsheet,.manual[data-stage="3"] .spreadsheet,.manual[data-stage="4"] .spreadsheet,.manual[data-stage="5"] .spreadsheet,.manual[data-stage="6"] .spreadsheet,.manual[data-stage="7"] .spreadsheet{opacity:1;transform:translateY(0) rotate(0)}.manual[data-stage="2"] .cell-selection,.manual[data-stage="3"] .cell-selection,.manual[data-stage="4"] .cell-selection,.manual[data-stage="5"] .cell-selection,.manual[data-stage="6"] .cell-selection{opacity:1}.manual[data-stage="3"] #manualG{color:#c44438;font-weight:700;background:#fce3dc}.manual[data-stage="3"] .error-mark{opacity:1}.manual[data-stage="4"] #manualG{color:#14875e;background:#e8f6e8}.manual[data-stage="5"] .cell-selection{left:14%;width:28%}.manual[data-stage="6"] .cell-selection{left:75%;top:83px}.manual[data-stage="6"] .sheet-grid>div:nth-child(n+9){background:#f7e4dc;color:#c55545}.manual[data-stage="7"] .mascot-sprite{background-position:50% center}.manual[data-stage="7"] .anger-puff,.manual[data-stage="7"] .redo-mark{opacity:1}.fast[data-stage="0"] .roi-images{opacity:.25}.fast[data-stage="0"] .upload-stack{opacity:1}.fast[data-stage="1"] .cursor-fast,.fast[data-stage="1"] .click-ring{opacity:1}.fast[data-stage="1"] .auto-rows,.fast[data-stage="2"] .auto-rows,.fast[data-stage="3"] .auto-rows,.fast[data-stage="4"] .auto-rows{opacity:1}.fast[data-stage="2"] .export-pill,.fast[data-stage="3"] .export-pill,.fast[data-stage="4"] .export-pill{opacity:1}.fast[data-stage="2"] .cursor-fast{opacity:1;left:77%;top:155px}.fast[data-stage="3"] .done-badge,.fast[data-stage="4"] .done-badge{opacity:1}.fast[data-stage="4"] .roi-screen{transform:translateX(-8%);opacity:.6}.fast[data-stage="4"] .door,.fast[data-stage="4"] .wave{opacity:1}.fast[data-stage="3"] .mascot-sprite,.fast[data-stage="4"] .mascot-sprite{background-position:100% center}.animation[data-playing=true]:not([data-reduced=true]) .manual[data-stage="7"] .mascot{animation:wobble .18s ease-in-out infinite alternate}.animation[data-playing=true]:not([data-reduced=true]) .manual[data-stage="7"] .anger-puff{animation:puff .3s infinite alternate}.animation[data-playing=true]:not([data-reduced=true]) .fast[data-stage="1"] .click-ring{animation:click .22s infinite}.animation[data-playing=true]:not([data-reduced=true]) .manual[data-stage="2"] .keyboard,.animation[data-playing=true]:not([data-reduced=true]) .manual[data-stage="5"] .keyboard{animation:type .12s infinite alternate}@keyframes wobble{to{transform:rotate(3deg) translateX(3px)}}@keyframes puff{to{transform:scale(1.18) rotate(15deg)}}@keyframes click{from{transform:scale(.7);opacity:1}to{transform:scale(1.4);opacity:0}}@keyframes type{to{transform:skew(-18deg) translateY(2px)}}@media(max-width:650px){.animation{padding:17px;border-radius:18px}.comparison{grid-template-columns:1fr;gap:16px}.versus{top:50%;left:50%}.scene{height:260px;max-width:460px;margin:auto}.screen{height:145px;top:20px}.spreadsheet{top:30px}.desk{top:183px}.keyboard{top:171px}.mascot{width:120px;height:140px}.caption{min-height:53px}.wall-clock{top:0}.sheet-grid{font-size:9px;margin:6px 8px 0}.sheet-grid>div{min-height:22px}.cell-selection{top:51px;height:23px}.manual[data-stage="6"] .cell-selection{top:73px}.door{height:139px;top:31px}.heading{margin-bottom:16px}.window-bar>em{font-size:7px}.lane-heading{padding:11px 15px}.controls{gap:7px}button{padding:8px 11px}.fast[data-stage="2"] .cursor-fast{top:137px}.image-thumb{height:46px}.roi-images{padding-top:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.wall-clock>span{transform:none}.mascot-fast{transform:none!important}.cursor,.click-ring,.anger-puff,.wave{display:none}.fast[data-stage="4"] .mascot-fast{left:auto;right:7%}}