/* The illustration distinguishes persistent storage from temporary working copies. */
.paper-diagram{--ink:#d7d5e3;--accent:#c8bbf4;display:block;inline-size:100%;max-inline-size:48rem;margin-inline:auto;background:#070811;isolation:isolate}
.paper-diagram__svg{display:block;inline-size:100%;block-size:auto;overflow:hidden}
.paper-diagram :is(path,rect){vector-effect:non-scaling-stroke}
.paper-diagram__tray{fill:#0b0c16;stroke:#444151;stroke-width:1;transition:stroke .7s ease}
.paper-diagram__tray-detail{fill:none;stroke:#7a7489;stroke-width:1;opacity:.45}
.paper-diagram__transfer{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.22;transition:opacity .65s ease,stroke .65s ease}
.paper-diagram__tile{--scale:1;--face:#131420;--edge:#8a849a;transform-box:view-box;transform-origin:0 0;transform:translate(var(--x),var(--y)) scale(var(--scale));transition:transform .9s cubic-bezier(.22,.68,.25,1),opacity .65s ease}
.paper-diagram__block-face{fill:var(--face);stroke:var(--edge);stroke-width:1;transition:fill .65s ease,stroke .65s ease}
.paper-diagram__block-detail{fill:none;stroke:var(--edge);stroke-width:.8;opacity:.45}
.paper-diagram__block-id{font:11px 'Manrope',sans-serif;fill:var(--edge)}
.paper-diagram__tile--1{--x:62px;--y:114px}.paper-diagram__tile--2{--x:166px;--y:114px}
.paper-diagram__tile--3{--x:62px;--y:179px}.paper-diagram__tile--4{--x:166px;--y:179px}
.paper-diagram__tile--5{--x:62px;--y:244px}.paper-diagram__tile--6{--x:166px;--y:244px}
.paper-diagram__tile--7{--x:62px;--y:309px}.paper-diagram__tile--8{--x:166px;--y:309px}
/* Compression changes the stored arrangement once. Loading never removes a stored block. */
.paper-diagram:not([data-step="0"]) .paper-diagram__stored{--scale:.85}
.paper-diagram:not([data-step="0"]) :is(.paper-diagram__tile--1,.paper-diagram__tile--2){--y:120px}
.paper-diagram:not([data-step="0"]) :is(.paper-diagram__tile--3,.paper-diagram__tile--4){--y:174px}
.paper-diagram:not([data-step="0"]) :is(.paper-diagram__tile--5,.paper-diagram__tile--6){--y:228px}
.paper-diagram:not([data-step="0"]) :is(.paper-diagram__tile--7,.paper-diagram__tile--8){--y:282px}
.paper-diagram__working{opacity:0;--face:#252134;--edge:var(--accent);--scale:.9}
.paper-diagram__copy--7{--x:62px;--y:282px}.paper-diagram__copy--8{--x:166px;--y:282px}.paper-diagram__copy--6{--x:394px;--y:171px}
.paper-diagram:is([data-step="2"],[data-step="3"]) .paper-diagram__copy--7{--x:394px;--y:171px}
.paper-diagram:is([data-step="2"],[data-step="3"]) .paper-diagram__copy--8{--x:487px;--y:234px;opacity:1}
.paper-diagram[data-step="2"] .paper-diagram__copy--7{opacity:1}
.paper-diagram:is([data-step="2"],[data-step="3"]) .paper-diagram__transfer{stroke:var(--accent);opacity:.74}
.paper-diagram:is([data-step="2"],[data-step="3"]) .paper-diagram__tray--active{stroke:#71677f}
.paper-diagram__reused-slot{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:3 5;opacity:0;transition:opacity .5s ease}
.paper-diagram[data-step="3"] .paper-diagram__reused-slot{opacity:.55}
/* Discard in RAM, show a free interval, then load a different working copy into the same slot. */
.paper-diagram[data-step="3"] .paper-diagram__copy--7{opacity:0;animation:paper-copy-discard 8s ease-in-out infinite}
.paper-diagram[data-step="3"] .paper-diagram__copy--6{opacity:1;animation:paper-copy-replace 8s ease-in-out infinite}
@keyframes paper-copy-discard{0%,24%{opacity:1}36%,100%{opacity:0}}
@keyframes paper-copy-replace{0%,53%{opacity:0;transform:translate(365px,171px) scale(.9)}74%,100%{opacity:1;transform:translate(394px,171px) scale(.9)}}
:is(html.motion-off,.motion-off) .paper-diagram *,.paper-diagram.motion-off *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.paper-diagram *{animation:none!important;transition:none!important}}