/* Notebook figures: a large object, a causal annotation, and a live result. */
.product-visual.product-motion{border:1px solid #cfc7b5;box-shadow:4px 5px 0 #e6e0d0;border-radius:2px;background-color:var(--sheet);padding:20px 23px;justify-content:flex-start}
.product-demo{width:100%;min-width:0;color:var(--ink);font-family:var(--body,"Gowun Dodum",sans-serif)}
.product-motion__kicker{font:10px var(--mono);letter-spacing:.08em;color:var(--violet);border-bottom:1px solid var(--line);padding-bottom:12px}
.product-motion__title{font-size:22px;line-height:1.45;font-weight:400;letter-spacing:-.04em;margin:15px 0 0}
.product-motion__figure{margin:5px -9px 8px}
.product-motion__svg{display:block;width:100%;height:auto;overflow:hidden}
.product-motion__svg .ink{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.product-motion__svg .faint{stroke-width:1.2;opacity:.55}
.product-motion__svg .blue{fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.product-motion__svg .red{fill:none;stroke:var(--red);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.product-motion__svg .dim{fill:none;stroke:#8a8478;stroke-width:1;stroke-dasharray:4 4}
.product-motion__svg .annotation{font:18px var(--hand,"Nanum Pen Script",cursive);fill:var(--ink)}
.product-motion__svg .red-text{fill:var(--red)}
.product-motion__svg .blue-text{fill:var(--blue)}
.product-motion__svg .mono-svg{font:13px var(--mono);fill:var(--muted)}
.product-motion__svg .shirt{fill:#f8f8ec}
.product-motion__svg .cloth-seam{fill:none;stroke:#8a8478;stroke-width:1.3}
.product-motion__svg .moisture{fill:#6ea2d6}
.product-motion__svg .water-hatch{fill:none;stroke:#326cb5;stroke-width:2}
.product-motion__svg .air-particles{fill:#548bc4;stroke:none}
.product-motion__svg .crate-fill{fill:#e8d7b7}
.product-motion__svg .fulcrum{fill:#e3e0d3}
.product-motion__svg .medium-wash{fill:#b8d4e8;opacity:.3}
.product-motion__svg .snell-symbol{font:18px var(--mono);fill:var(--blue)}
.product-motion__readout{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;font-size:11px;color:var(--muted);min-height:45px}
.product-motion__readout b{font-weight:400;color:var(--blue);font-size:14px;margin-right:7px}
.product-motion--lab .force-value{font:27px var(--mono);color:var(--red)}
.product-motion--lab .balance-equation{font-size:12px;margin-left:auto}
.product-motion--theory .formula{font-size:13px;white-space:nowrap;letter-spacing:-.05em}
.product-motion--theory .theta{margin-left:auto;white-space:nowrap;font:17px var(--mono);color:var(--blue)}
.product-motion__controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.product-motion__controls button{border:1px solid #cbc4b3;background:var(--sheet);color:var(--muted);padding:8px 11px;min-height:36px;border-radius:3px;font:11px var(--body,"Gowun Dodum",sans-serif);cursor:pointer}
.product-motion__controls button:hover{border-color:var(--blue);color:var(--blue)}
.product-motion__controls button[aria-pressed="true"]{border-color:var(--blue);background:#edf3fa;color:var(--blue)}
.product-motion__controls .play{margin-left:auto;border:0;padding-inline:0;font-size:10px;color:var(--muted)}
.product-motion__controls label{display:flex;align-items:center;gap:10px;flex:1 0 100%;font-size:11px;color:var(--muted);margin:0 0 5px}
.product-motion__controls input{accent-color:var(--blue);flex:1;min-width:50px;height:25px}
.product-motion__controls output{font:13px var(--mono);width:48px;text-align:right}
.product-motion__caption{margin:10px 0 0;font-size:10px;line-height:1.6;color:var(--muted)}
.product-demo button:focus-visible,.product-demo input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:600px){
 .product-visual.product-motion{padding:15px 16px 13px}
 .product-motion__kicker{font-size:9px;padding-bottom:9px}
 .product-motion__title{font-size:18px;margin-top:11px}
 .product-motion__figure{margin:5px -11px 8px}
 .product-motion__readout{font-size:10px;gap:6px;min-height:39px;padding-top:10px}
 .product-motion__readout b{font-size:12px}
 .product-motion--lab .force-value{font-size:24px}
 .product-motion--lab .balance-equation{font-size:10px}
 .product-motion--theory .formula{font-size:11px;letter-spacing:-.07em}
 .product-motion--theory .theta{font-size:14px}
 .product-motion__controls{gap:6px;margin-top:7px}
 .product-motion__controls button{font-size:10px;padding:7px 9px;min-height:34px}
 .product-motion__caption{font-size:9px}
}
@media(max-width:600px){
 .product-motion__svg .annotation{font-size:20px}
 .product-motion__svg .mono-svg{font-size:18px}
}