:root{color-scheme:dark;--bg:#09090b;--panel:#141418;--text:#fafafa;--muted:#aaaab8;--line:#35353f;--grid:#30303a;--accent:#5865f2;--accent-text:#a6adff;--shadow:#303038;--device:#303039;--device-top:#42424e;--device-side:#24242c;--edge:#767680;--parcel:#393944;--parcel-top:#50505e;--parcel-side:#292932;--tape:#656575;--track:#3b3b49;--mono:'JetBrains Mono',Consolas,monospace;--font:Inter,system-ui,sans-serif}
:root[data-theme=light]{color-scheme:light;--bg:#f7f7f9;--panel:#fff;--text:#15151c;--muted:#62626e;--line:#d1d1da;--grid:#dedee6;--accent-text:#424dcb;--shadow:#c8c8d3;--device:#ededf3;--device-top:#fff;--device-side:#c9c9d6;--edge:#292935;--parcel:#e2e2eb;--parcel-top:#f4f4f8;--parcel-side:#c2c2d0;--tape:#b0b0c2;--track:#c8c8d7}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--font)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent-text);outline-offset:5px}button:disabled{cursor:default;opacity:.45}.preview-header{max-width:1160px;margin:auto;min-height:88px;display:flex;align-items:center;justify-content:space-between;padding:20px 32px;gap:16px}.brand{display:flex;align-items:center;gap:11px;font:700 19px var(--mono);color:var(--text);text-decoration:none}.header-actions{display:flex;gap:24px;align-items:center}.version{font:11px var(--mono);letter-spacing:.12em;color:var(--muted)}.theme-button{display:grid;place-items:center;width:44px;height:44px;color:var(--text);background:var(--panel);border:1px solid var(--line)}.theme-button svg{fill:none;stroke:currentColor;stroke-width:1.6}main{max-width:980px;padding:28px 32px 24px;margin:auto}.intro{margin-bottom:32px}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--accent-text);font:11px/1.6 var(--mono);letter-spacing:.08em;margin:0 0 16px}.eyebrow span{width:7px;height:7px;background:var(--accent)}h1{font:700 clamp(28px,4vw,46px)/1.2 var(--mono);letter-spacing:-.065em;margin:0 0 14px}.intro-copy{color:var(--muted);margin:0;font-size:16px}.mobile-break{display:none}.pvz-motion{border:1px solid var(--line);background:var(--panel);box-shadow:7px 7px 0 var(--shadow);--duration:5s}.stage-top{display:flex;align-items:center;justify-content:space-between;padding:17px 24px;border-bottom:1px solid var(--line);font:11px var(--mono);letter-spacing:.05em;color:var(--muted)}.stage-top>span:first-child{display:flex;align-items:center;gap:8px}.stage-top i{width:6px;height:6px;background:var(--accent-text)}.stage-counter{color:var(--accent-text)}.scene-wrap{padding:0 12px}.scene{width:100%;height:auto;display:block;overflow:hidden}.grid-dot{fill:var(--grid)}.object-label{font:500 15px var(--mono);letter-spacing:.17em;fill:var(--muted)}.object-shadow{fill:var(--shadow)}.parcel-top{fill:var(--parcel-top);stroke:var(--edge);stroke-width:2}.parcel-side{fill:var(--parcel-side);stroke:var(--edge);stroke-width:2}.parcel-front{fill:var(--parcel);stroke:var(--edge);stroke-width:2}.tape-top{fill:var(--tape);opacity:.8}.tape{fill:var(--tape)}.box-detail{stroke:var(--muted);stroke-width:2;fill:none}.scanner-shadow{fill:#08080e;opacity:.3}.scanner-body{fill:#5865f2;stroke:#282c69;stroke-width:2}.scanner-top{fill:#7c87ff}.scanner-window{fill:#d4d9ff;stroke:#272d72;stroke-width:2}.scanner-grip{fill:#3541bc}.scanner-highlight{stroke:#bfc6ff;stroke-width:3}.scanner-trigger{fill:#202348}.scanner-cable{stroke:var(--edge);stroke-width:4;fill:none}.beam{fill:#8791ff;opacity:0}.beam-edge{fill:none;stroke:#a8b0ff;stroke-width:2;opacity:0}.scan-line{fill:#5865f2;opacity:0}.scan-ok{opacity:0}.scan-ok path:first-child{fill:var(--accent)}.scan-ok path:last-child{stroke:#fff;stroke-width:3;fill:none}.signal-track{fill:none;stroke:var(--track);stroke-width:2;stroke-dasharray:4 6}.signal-active{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100}.signal-arrow{stroke:var(--track);stroke-width:2;fill:none}.signal-pixel{fill:var(--accent-text);opacity:0}.printer-back{fill:var(--device-side);stroke:var(--edge);stroke-width:2}.printer-top{fill:var(--device-top);stroke:var(--edge);stroke-width:2}.printer-seam{fill:var(--device-side);stroke:var(--edge);stroke-width:1.5}.printer-front{fill:var(--device);stroke:var(--edge);stroke-width:2}.printer-side{fill:var(--device-side)}.display-border{fill:#101016;stroke:var(--edge);stroke-width:1}.display{fill:#1c2042}.display-idle{font:12px var(--mono);fill:#bfc5ff}.display-cell{font:700 18px var(--mono);fill:#e3e6ff;opacity:0}.printer-led{fill:#59607e}.printer-brand{fill:var(--accent-text)}.printer-button{fill:var(--edge)}.printer-slot{fill:#101016;stroke:var(--edge);stroke-width:1}.slot-inner{fill:#050509}.printed-label{transform:translateY(-155px)}.paper{fill:#fff;stroke:#d7d7de;stroke-width:1}.label-kicker{fill:#575760;font:11px var(--mono);letter-spacing:.22em}.label-number{fill:#111117;font:800 44px var(--font);letter-spacing:-2px}.label-divider{stroke:#d5d5df;stroke-width:1}.label-brand{fill:#51515f;font:11px var(--mono)}.slot-lip{fill:#08080c}.printer-foot{fill:var(--edge)}.stage-bottom{border-top:1px solid var(--line);padding:20px 24px}.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;margin:0 0 16px;gap:10px;font:12px var(--mono);color:var(--muted)}.steps li{display:flex;gap:9px;align-items:center}.steps li:last-child{justify-content:flex-end}.steps li:nth-child(2){justify-content:center}.steps li span{font-size:10px;border:1px solid var(--line);padding:3px 5px}.steps li.active{color:var(--accent-text)}.steps li.active span{background:var(--accent);color:white;border-color:var(--accent)}.progress{height:2px;background:var(--line)}.progress span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}.playback{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:30px}.playback p{margin:0;color:var(--muted);font:13px/1.6 var(--mono)}.playback-actions{display:flex;gap:12px;flex-shrink:0}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:11px 18px;border:1px solid var(--line);font:12px var(--mono);color:var(--text);background:var(--panel)}.primary{background:var(--accent);border-color:var(--accent);color:white;box-shadow:3px 3px 0 var(--shadow)}.primary svg{fill:none;stroke:currentColor;stroke-width:1.7}.primary:hover{background:#4653dc}.secondary:not(:disabled):hover,.theme-button:hover{border-color:var(--accent-text)}footer{font:11px var(--mono);color:var(--muted);margin:32px 0 0;text-align:center}
/* V2: a single requestAnimationFrame timeline drives boxes, scanner and liner. */
.signal-track{stroke-width:2;stroke-dasharray:none;stroke-linecap:round}
.signal-active{stroke-width:2;stroke-linecap:round}
.signal-trail{fill:none;stroke:var(--accent-text);stroke-width:5;stroke-linecap:round;stroke-dasharray:12 88;opacity:0}
.signal-origin,.signal-destination{fill:var(--panel);stroke:var(--track);stroke-width:2}
.signal-halo{fill:var(--accent);opacity:0}
.scanner-head-side{fill:#4956dc;stroke:#282c69;stroke-width:2}
.scanner-lens-rim{fill:#121629;stroke:#282c69;stroke-width:2}
.scanner-lens{fill:#b5c0ff}.scanner-lens-glint{fill:#fff}
.scanner-base{fill:#232957;stroke:#282c69;stroke-width:2}
.scanner-indicator{fill:#c3ccff}.scanner-trigger{fill:#a4afff;stroke:#282c69;stroke-width:2}
.grip-ridges{stroke:#172052;stroke-width:3;fill:none}
.scan-line{fill:none;stroke:#6574ff;stroke-width:3}
.liner{fill:#cbd0e4;stroke:#a2aac8;stroke-width:1}
.liner-seams{fill:none;stroke:#919dbf;stroke-width:1;stroke-dasharray:4 5}
.liner-guides{fill:none;stroke:#a9b3d1;stroke-width:2}
.label-shadow{fill:#070714;opacity:.14}.peeling-label{opacity:0}
.peel-fold{fill:#dde1f0;stroke:#bac2d9;stroke-width:1}
@media(max-width:600px){.preview-header{padding:16px 20px;min-height:76px}.brand{font-size:16px}.version{display:none}main{padding:16px 20px 24px}.intro{margin-bottom:24px}.eyebrow{font-size:10px}.intro-copy{font-size:14px}.mobile-break{display:block}.stage-top{padding:14px 16px;font-size:9px}.scene-wrap{padding:0}.scan-assembly{transform:translate(88px,-57px)}.printer-assembly{transform:translate(-385px,180px)}.signal{display:none}.object-label{font-size:15px}.stage-bottom{padding:16px 12px}.steps{font-size:10px;gap:5px}.steps li{flex-direction:column;gap:6px}.steps li span{font-size:9px}.playback{align-items:stretch;flex-direction:column;gap:14px;margin-top:24px}.playback p{font-size:12px;min-height:20px}.playback-actions{justify-content:flex-end}.stage-counter{display:none}footer{font-size:10px}}
@media(max-width:600px){.scan-assembly{transform:translate(52px,0)}.printer-assembly{transform:translate(-372px,300px)}}
@media(prefers-reduced-motion:reduce){.pvz-motion *{animation:none!important}}

.info-field{display:block;overflow-wrap:anywhere;font-size:16px;line-height:1.5}.stage-counter{white-space:normal;text-align:right}
.info-label{display:block;font-size:14px}.info-value{display:block;font-size:16px}