.pj{--pj-paper:var(--paper-white,#fbf6e8);--pj-ink:var(--ink,#1b1915);--pj-tape:var(--tape,#f3e7a9b3);--pj-blue:var(--spot-blue,#2360b5);--pj-yellow:var(--spot-yellow,#f5c518);--pj-rule:#5c96d259;--pj-margin:#e0574c80;color:var(--pj-ink);position:relative}.pj-viewport{position:relative}.pj-stage,.pj-dots{display:none}.pj-steps{gap:clamp(36px,6vw,72px);max-width:1080px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(16px,4vw,48px);list-style:none;display:grid}.pj-step{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(20px,4vw,48px);display:grid}.pj-step:nth-child(2n) .pj-stickers{order:2}.pj-stickers{justify-content:center;align-items:flex-end;min-height:140px;display:flex}.pj-sticker{filter:drop-shadow(4px 5px #1b19152e);width:52%;max-width:220px;height:auto;transform:rotate(-7deg)}.pj-sticker+.pj-sticker{margin-left:-10%;transform:rotate(8deg)translateY(16px)}.pj-note{border:2px solid var(--pj-ink);background-color:var(--pj-paper);background-image:linear-gradient(to right, transparent 30px, var(--pj-margin) 30px 32px, transparent 32px), repeating-linear-gradient(to bottom, transparent 0 25px, var(--pj-rule) 25px 26px);box-shadow:4px 4px 0 var(--pj-ink);rotate:var(--pj-tilt,-1.5deg);padding:28px clamp(18px,2.4vw,26px) 20px clamp(44px,5vw,52px);position:relative}.pj-note:before{background:var(--pj-tape);content:"";width:104px;height:26px;position:absolute;top:-13px;left:50%;transform:translate(-50%)rotate(-3deg);box-shadow:0 1px 2px #1b191526}.pj-step:nth-child(5n+1){--pj-tilt:-1.6deg}.pj-step:nth-child(5n+2){--pj-tilt:1.3deg}.pj-step:nth-child(5n+3){--pj-tilt:-.8deg}.pj-step:nth-child(5n+4){--pj-tilt:1.8deg}.pj-step:nth-child(5n+5){--pj-tilt:-1.2deg}.pj-number{border:2px solid var(--pj-ink);background:var(--pj-yellow);box-shadow:3px 3px 0 var(--pj-ink);font-family:var(--font-sign,var(--font-sans)), sans-serif;padding:2px 8px 0;font-size:1.15rem;font-weight:900;line-height:1.3;position:absolute;top:-22px;right:14px;rotate:4deg}.pj-title{font-family:var(--font-sign,var(--font-sans)), sans-serif;margin:0 0 8px;font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:900;line-height:1.15}.pj-body{font-family:var(--font-sans), sans-serif;margin:0 0 12px;font-size:1rem;line-height:1.5}.pj-see{border-top:2px dashed var(--pj-ink);font-family:var(--font-sans), sans-serif;margin:0;padding-top:10px;font-size:.95rem;line-height:1.45}.pj-see-label{color:var(--pj-blue);font-family:var(--font-hand,cursive), cursive;margin-right:4px;font-size:1.45em;line-height:1;display:inline-block;rotate:-3deg}@media screen and (max-width:767px){.pj-step{grid-template-columns:minmax(0,1fr)}.pj-step:nth-child(2n) .pj-stickers{order:0}.pj-stickers{min-height:0}.pj-sticker{width:38%}}@media print{.pj-step{break-inside:avoid}}@media screen and (scripting:enabled) and (prefers-reduced-motion:no-preference){.pj[data-mode=live]{height:480vh}.pj[data-mode=live] .pj-viewport{background-color:#fbf7ec;background-image:repeating-linear-gradient(#0000 0 39px,#5c96d24d 39px 41px);height:100svh;position:sticky;top:0;overflow:hidden}.pj[data-mode=live] .pj-stage{opacity:0;transition:opacity .5s steps(4,end);display:block;position:absolute;inset:0}.pj[data-mode=live][data-ready] .pj-stage{opacity:1}.pj[data-mode=live] .pj-stage canvas{display:block}.pj[data-mode=live] .pj-steps{align-items:end;gap:0;width:min(390px,34vw);max-width:none;margin:0;padding:0;position:absolute;bottom:clamp(24px,9vh,96px);left:clamp(16px,4vw,64px)}.pj[data-mode=live] .pj-step{opacity:0;pointer-events:none;grid-area:1/1;transition:opacity .25s steps(3,end),transform .25s steps(3,end);display:block;transform:translate(-14px,30px)rotate(-7deg)scale(.94)}.pj[data-mode=live] .pj-step[data-active]{opacity:1;pointer-events:auto;transform:none}.pj[data-mode=live] .pj-stickers{display:none}.pj[data-mode=live] .pj-title{font-size:clamp(1.15rem,1.7vw,1.45rem)}.pj[data-mode=live] .pj-body{font-size:.95rem}.pj[data-mode=live] .pj-dots{gap:8px;display:flex;position:absolute;bottom:clamp(20px,5vh,48px);right:clamp(16px,3vw,40px)}.pj-dots span{border:2px solid var(--pj-ink);background:var(--pj-paper);width:30px;height:30px;font-family:var(--font-sign,var(--font-sans)), sans-serif;place-items:center;font-size:.8rem;font-weight:900;transition:background-color .2s steps(2,end),transform .2s steps(2,end);display:grid;rotate:-4deg}.pj-dots span:nth-child(2n){rotate:5deg}.pj-dots span[data-active]{background:var(--pj-yellow);box-shadow:3px 3px 0 var(--pj-ink);transform:scale(1.18)}@media (max-width:767px){.pj[data-mode=live]{height:400vh}.pj[data-mode=live] .pj-steps{right:12px;bottom:max(14px, env(safe-area-inset-bottom));align-items:start;width:auto;left:12px}.pj[data-mode=live] .pj-note{background-image:linear-gradient(to right, transparent 26px, var(--pj-margin) 26px 28px, transparent 28px), repeating-linear-gradient(to bottom, transparent 0 25px, var(--pj-rule) 25px 26px);padding:22px 14px 14px 40px}.pj[data-mode=live] .pj-body{margin-bottom:8px;font-size:.9rem;line-height:1.4}.pj[data-mode=live] .pj-see{padding-top:8px;font-size:.85rem}.pj[data-mode=live] .pj-dots{gap:6px;inset:12px auto auto 12px}.pj-dots span{width:26px;height:26px}}}.pj-lab-intro,.pj-lab-outro{text-align:center;place-content:center;gap:12px;min-height:90vh;padding:24px 16px;display:grid}.pj-lab-intro h1{font-family:var(--font-sign,var(--font-sans)), sans-serif;margin:0;font-size:clamp(2rem,6vw,4rem);font-weight:900}.pj-lab-intro p,.pj-lab-outro p{font-family:var(--font-hand,cursive), cursive;margin:0;font-size:1.6rem}