:root { --black:#000000; --clay:#d96a3a; --clay-light:#e88a58; --clay-dark:#a84627; --cream:#f3e5c8; --paper-light:#fff1d4; --paper-shadow:#d7c6a6; --ink:#171717; --white:#ffffff; --rx-brown:#8b4931; --rx-cream:#f8efe5; --quest-paper:#e8eaf0; --quest-violet:#6c5bb6; --barebells-paper:#e5c394; --barebells-band:#c57737; --one-paper:#161b22; --one-blue:#66b1d3; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--black); }
#stage { position:relative; width:100%; height:100%; aspect-ratio:8 / 3; overflow:hidden; background:var(--black); }
#scene-art { display:block; width:100%; height:100%; font-family:sans-serif; }
.clay-stop-light { stop-color:var(--clay-light); } .clay-stop { stop-color:var(--clay); } .clay-stop-dark { stop-color:var(--clay-dark); }
.ground-shadow { fill:var(--white); opacity:.09; }
.head,.hand,.foot { fill:url(#clay-volume); filter:url(#clay-tactile); } .body { fill:url(#belly-volume); filter:url(#clay-tactile); }
.arm,.leg { fill:none; stroke:var(--clay); stroke-width:15; stroke-linecap:round; }
.leg { stroke-width:19; } .tuft { fill:none; stroke:var(--clay-light); stroke-width:9; stroke-linecap:round; }
.belly-glint,.head-glint { fill:none; stroke:var(--clay-light); stroke-width:3; stroke-linecap:round; opacity:.4; }
.clay-press { fill:none; stroke:var(--clay-dark); stroke-width:2; stroke-linecap:round; opacity:.22; } .press-light { fill:none; stroke:var(--clay-light); stroke-width:1.5; stroke-linecap:round; opacity:.34; }
.eye-cream { fill:var(--cream); } .pupil,.mouth { fill:var(--black); }
.guy-mouth { fill:var(--ink); stroke:var(--clay-dark); stroke-width:2; }
.smile { fill:none; stroke:var(--clay-dark); stroke-width:2.5; stroke-linecap:round; }
.air-line,.air-tip { fill:none; stroke:var(--cream); stroke-width:2; stroke-linecap:round; }
.air-line { stroke-dasharray:10 13; } .air-tip { stroke-width:1.6; }
.brick-top { fill:var(--clay-light); } .brick-side { fill:var(--clay-dark); } .brick-face { fill:var(--clay); }
.brick-line { fill:none; stroke:var(--clay-dark); stroke-width:2; opacity:.6; } .brick-edge { fill:none; stroke:var(--clay-light); stroke-width:2; stroke-linecap:round; }
.snack-seal { fill:none; stroke:var(--cream); stroke-width:1.5; opacity:.4; }
.quest-paper { fill:var(--quest-paper); } .quest-violet { fill:var(--quest-violet); } .quest-label { fill:var(--quest-violet); font-size:31px; font-weight:800; letter-spacing:-1.2px; }
.barebells-paper { fill:var(--barebells-paper); } .barebells-band { fill:var(--barebells-band); } .barebells-label { fill:var(--ink); font-size:26px; font-weight:900; letter-spacing:-1.2px; }
.one-paper { fill:var(--one-paper); } .one-band { fill:var(--one-blue); } .one-label { fill:var(--white); font-size:35px; font-weight:900; letter-spacing:-1px; }
.rxbar-paper { fill:var(--rx-brown); } .rxbar-label { fill:var(--rx-cream); font-size:29px; font-weight:900; letter-spacing:-1.5px; }
.paper { fill:var(--cream); } .paper-shade,.paper-seal { fill:var(--paper-shadow); } .paper-highlight { fill:none; stroke:var(--paper-light); stroke-width:2; } .paper-crease { fill:none; stroke:var(--paper-shadow); stroke-width:1; } .seal-crease { fill:none; stroke:var(--cream); stroke-width:1.5; }
.package-ink { fill:var(--ink); } .capsule { fill:var(--clay); } .capsule-label { fill:var(--ink); font-size:11px; font-weight:800; letter-spacing:1px; }

#airflow, #brick-shadow { opacity:0; }

/* Raster clay poses retain physical lighting and thumbprint texture. */
.clay-pose { opacity:0; }
#pose-idle { opacity:1; }

/* Four familiar wrapper colorways folded into one light, crumpled paper ball. */
#wrapper-ball, #wrapper-ball-shadow, #spit-puff { opacity:0; }
.wrapper-foil { fill:#cad0d7; stroke:#969fa9; stroke-width:.8; }
.wrapper-foil-fold { fill:#e6e9ed; }
.wrapper-crease { fill:none; stroke:#747d89; stroke-width:.8; stroke-linejoin:round; opacity:.75; }
.wrapper-highlight { fill:none; stroke:#fff; stroke-width:1; stroke-linecap:round; opacity:.7; }
.wrapper-mark { font-weight:900; font-size:9px; letter-spacing:-.4px; }
.wrapper-quest { fill:var(--quest-violet); font-size:8px; }
.wrapper-barebells { fill:var(--ink); }
.wrapper-one { fill:var(--white); }
.wrapper-rxbar { fill:var(--rx-cream); }
.spit-line { fill:none; stroke:var(--cream); stroke-width:2; stroke-linecap:round; }