/* 波波乐园 · drawn explanation animations (js/demos-plus.js) */
.dp em{font-style:normal;color:#e4572e}
.dp .dp-tip{margin:0;font:700 14px/1.6 var(--f-body);color:#6d5a43;max-width:520px}
.dp-ic{display:inline-grid;place-items:center;width:52px;height:52px}
.dp-ic svg{width:100%;height:100%}
@keyframes dpDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dpIn{from{opacity:0;transform:translateY(-14px) scale(.6)}}
@keyframes dpDrop{0%{opacity:0;transform:translateY(-40px) rotate(-8deg)}60%{opacity:1;transform:translateY(4px) rotate(2deg)}100%{transform:none}}

/* pairs */
.dp-pairs{gap:10px}
.dp-prow{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);align-items:center;width:100%;max-width:560px;position:relative}
.dp-pcard{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:6px 10px;background:var(--l);border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);font:800 15px/1.3 var(--f-body)}
.dp-pcard img{max-height:64px;max-width:96px;border-radius:8px;border:2px solid var(--ink);background:#fff}
.dp-rope{width:100%;height:30px;overflow:visible}
.dp-rope path{fill:none;stroke:var(--ink);stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:dpDraw .5s ease-out both;animation-delay:var(--t)}
.dp-rope path.in{stroke:var(--c);stroke-width:4}
.dp-knot{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--c);border:3px solid var(--ink);animation:popIn .4s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--t) + .4s)}

/* length */
.dp-ruler{position:relative;display:grid;justify-items:start;gap:6px;padding:4px 0 0 0;width:var(--w)}
.dp-obj{height:40px;border:3px solid var(--ink);border-radius:20px 12px 12px 20px;background:linear-gradient(180deg,#ffe08a,#ffc24a);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;font:900 16px var(--f-body);position:relative}
.dp-obj::after{content:"";position:absolute;left:10px;top:6px;width:40%;height:6px;border-radius:3px;background:#fff;opacity:.6}
.dp-start{position:absolute;left:-2px;top:-6px;bottom:-4px;border-left:3px dashed #2fbf71}
.dp-pieces{display:flex}
.dp-piece{position:relative;display:grid;justify-items:center;animation:dpDrop .5s cubic-bezier(.3,1.3,.5,1) both;animation-delay:var(--t)}
.dp-piece svg{width:100%;height:34px;display:block;overflow:visible}
.dp-piece b{font:800 13px var(--f-num);color:#e4572e;line-height:1}
.dp-brace{height:16px;display:block}
.dp-bars{position:relative;display:grid;gap:10px;width:100%;max-width:520px;padding-left:2px}
.dp-bar{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:8px}
.dp-blab{font:800 15px var(--f-body);text-align:right}
.dp-btrack{position:relative;height:30px;display:flex;align-items:center}
.dp-bfill{display:block;height:26px;width:var(--w);border:3px solid var(--ink);border-radius:8px;background:repeating-linear-gradient(90deg,var(--c) 0 calc(var(--u) - 2px),rgba(43,29,20,.55) calc(var(--u) - 2px) var(--u));transform-origin:left;animation:dpGrow .7s cubic-bezier(.3,1.1,.5,1) both;animation-delay:var(--t);box-shadow:0 3px 0 var(--ink)}
.dp-blen{margin-left:8px;font:800 18px var(--f-num);animation:popIn .4s both;animation-delay:calc(var(--t) + .6s)}
.dp-badge{margin-left:8px;padding:2px 10px;border:3px solid var(--ink);border-radius:999px;background:#ffd34a;font:900 13px var(--f-body);color:var(--ink)!important;animation:popIn .5s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--t) + 1s)}
.dp-bar:not(.win) .dp-bfill{filter:saturate(.75)}
.dp-line{position:absolute;left:83px;top:-6px;bottom:-6px;border-left:3px dashed #2fbf71}
@keyframes dpGrow{from{transform:scaleX(0)}}

/* scale */
.dp-bal{width:min(360px,100%);height:auto;overflow:visible}
.dp-beamg,.dp-needle{transform-box:view-box;transform-origin:180px 73px;animation:dpTilt 1.4s cubic-bezier(.3,1.25,.5,1) .5s both}
.dp-pang{animation:dpPan 1.4s cubic-bezier(.3,1.25,.5,1) .5s both}
.dp-wtag{animation:popIn .5s cubic-bezier(.3,1.7,.5,1) both;animation-delay:var(--t);transform-box:fill-box;transform-origin:center}
@keyframes dpTilt{0%{transform:rotate(0)}100%{transform:rotate(var(--tilt))}}
@keyframes dpPan{0%{transform:translate(0,0)}100%{transform:translate(var(--x),var(--y))}}

/* cycle */
.dp-wheel{width:min(300px,100%);height:auto;overflow:visible}
.dp-token{transform-box:view-box}
.dp-cans{animation:popIn .4s both;animation-delay:var(--end,2s)}
.dp-weektip{margin:0;font:700 13px var(--f-body);color:#6d5a43}

/* nline */
.dp-nl{width:min(420px,100%);height:auto;overflow:visible}
.dp-arc{stroke-dashoffset:1;animation:dpDraw .45s ease-out both;animation-delay:var(--t)}
.dp-nb{animation:popIn .4s cubic-bezier(.3,1.7,.5,1) both;animation-delay:var(--t);transform-box:fill-box;transform-origin:center}
.dp-fwrap{transform-box:view-box}

/* cmp */
.dp-crow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:nowrap;max-width:100%}
.dp-cnum{display:grid;justify-items:center;gap:6px;padding:8px 10px 6px;border:3px solid transparent;border-radius:16px}
.dp-cnum>b{font:800 40px var(--f-num);line-height:1}
.dp-cnum small{font:700 12px var(--f-body);color:#6d5a43}
.dp-cnum.want{border-color:#2fbf71;background:#effcf3;box-shadow:0 0 0 4px rgba(47,191,113,.18)}
.dp-cnum .mt-blocks{zoom:.62}
.dp-croc{width:118px;height:98px;overflow:visible}
.dp-croc.R{transform:scaleX(-1)}
.dp-croc .dp-jawU{transform-box:view-box;transform-origin:100px 50px;animation:dpChomp .5s ease-in-out 1.2s 2 alternate}
.dp-croc .dp-jawL{transform-box:view-box;transform-origin:100px 50px;animation:dpChompL .5s ease-in-out 1.2s 2 alternate}
.dp-eq{font:800 54px var(--f-num)}
@keyframes dpChomp{to{transform:rotate(-12deg)}}
@keyframes dpChompL{to{transform:rotate(12deg)}}

/* bond */
.dp-bsvg{width:min(300px,100%);height:auto}
.dp-bn{animation:popIn .45s cubic-bezier(.3,1.7,.5,1) both;animation-delay:var(--t);transform-box:fill-box;transform-origin:center}
.dp-bn.on{animation:popIn .45s cubic-bezier(.3,1.7,.5,1) both,dpPulse 1s ease-in-out 1.2s 2;animation-delay:var(--t),1.2s}
@keyframes dpPulse{50%{transform:scale(1.12)}}

/* shade */
.dp-srow{display:flex;align-items:center;justify-content:center;gap:22px}
.dp-parts{width:170px;height:170px;overflow:visible}
.dp-part{fill:#fffdf6;stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.dp-part.on{animation:dpFill .45s ease-out both;animation-delay:var(--t)}
@keyframes dpFill{from{fill:#fffdf6}to{fill:#ff9b5a}}
.dp-frac{display:grid;justify-items:center;gap:4px;font:800 44px/1 var(--f-num)}
.dp-frac .num{color:#e4572e}.dp-frac i{display:block;width:56px;height:5px;border-radius:3px;background:var(--ink)}

/* geom */
.dp-gsvg{width:min(240px,100%);height:auto;overflow:visible}
.dp-side{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:dpDraw .4s ease-out both;animation-delay:var(--t)}
.dp-sn,.dp-corner{animation:popIn .35s cubic-bezier(.3,1.7,.5,1) both;animation-delay:var(--t);transform-box:fill-box;transform-origin:center}
.dp-trace{stroke-dashoffset:1;animation:dpDraw 1.2s ease-in-out .3s both}

/* sortset */
.dp-boxes{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;width:100%}
.dp-box{border:3px solid var(--ink);border-radius:14px;background:var(--l);box-shadow:0 4px 0 var(--ink);overflow:hidden;min-width:0}
.dp-bhead{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;background:var(--c);color:#fff;font:900 14px var(--f-body);-webkit-text-stroke:.6px var(--ink);border-bottom:3px solid var(--ink)}
.dp-bhead b{min-width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink);-webkit-text-stroke:0;border:2px solid var(--ink);font:800 15px var(--f-num)}
.dp-bitems{display:flex;flex-wrap:wrap;gap:6px;padding:8px;justify-content:center}
.dp-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#fff;border:2px solid var(--ink);border-radius:10px;font:800 13px var(--f-body);animation:dpDrop .5s cubic-bezier(.3,1.3,.5,1) both;animation-delay:var(--t)}
.dp-chip img{max-height:34px;max-width:46px}
.dp-chip .dp-ic{width:28px;height:28px}
.dp-solid{width:34px;height:34px;display:block}

/* word */
.dp-known{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.dp-kn,.dp-ask{display:grid;justify-items:center;padding:4px 12px;border:3px solid var(--ink);border-radius:12px;background:#dcebff;box-shadow:0 3px 0 var(--ink)}
.dp-ask{background:#fff0cc;font:800 14px var(--f-body);max-width:220px}
.dp-kn small,.dp-ask small{font:700 11px var(--f-body);color:#6d5a43}
.dp-kn b{font:800 26px var(--f-num)}
.dp-eqn{display:flex;align-items:center;gap:10px;font:800 40px var(--f-num)}
.dp-eqn i{font-style:normal}
.dp-fly{display:inline-block;animation:dpFly .55s cubic-bezier(.3,1.3,.5,1) both;animation-delay:var(--t)}
.dp-res{min-width:64px;padding:0 10px;border:4px solid #2fbf71;border-radius:12px;background:#effcf3;color:#1d8a4f}
@keyframes dpFly{from{opacity:0;transform:translate(var(--from),-46px) scale(.6)}}

/* pick */
.dp-opts{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.dp-opt{position:relative;display:grid;justify-items:center;gap:4px;min-width:64px;padding:8px 14px;border:3px solid var(--ink);border-radius:14px;background:#fff;box-shadow:0 4px 0 var(--ink);font:800 28px var(--f-body)}
.dp-opt:not(.ok){opacity:.55}
.dp-opt img{max-height:70px}
.dp-circ{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);overflow:visible;pointer-events:none}
.dp-circ path{fill:none;stroke:#e4412f;stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:dpDraw .6s ease-out .9s both}

@media (max-width:760px){.dp-cnum .mt-blocks{zoom:.4}.dp-croc{width:78px;height:66px}.dp-cnum>b{font-size:32px}.dp-cnum{padding:6px 4px}.dp-prow{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr)}.dp-pcard{font-size:13px}.dp-boxes{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dp *{animation-duration:.01s!important;animation-delay:0s!important}}
#sheet .demo{flex-shrink:0}