@import url("../tokens/fonts.css");

/* ==========================================================================
   Slaps — Pop's ink and hard shadows, cut out as vinyl stickers.
   Colours, radii, spacing and shadows come from tokens.css. Motion lives here.
   Rules: transform/opacity only; entrance animations fill BACKWARDS (never
   both/forwards: a filling animation owns transform and makes hover lifts
   snap); box-shadow animates only on hover/active of one element.
   ========================================================================== */

:root {
  /* easings */
  --sl-snap: cubic-bezier(.2, .9, .3, 1);       /* lifts, settles, fades */
  --sl-spring: cubic-bezier(.34, 1.56, .64, 1); /* release, knobs, tilts: ~10% overshoot */
  --sl-push: cubic-bezier(.3, .7, .4, 1);       /* press down: fast, no overshoot */
  --sl-peel: cubic-bezier(.55, .05, .85, .35);  /* peel away: slow start, accelerates off */
  /* durations */
  --sl-t-press: 80ms;
  --sl-t-hover: 180ms;
  --sl-t-curl: 220ms;
  --sl-t-slap: 360ms;
  --sl-t-peel: 340ms;
  --sl-t-stamp: 400ms;
  --sl-ground: var(--board); /* what a curled corner reveals; containers reset it for their children */
  color-scheme: light;
}
[data-theme="dark"] { color-scheme: dark; }



/* board texture: static SVG tiles, no fixed attachment.
   light = cool aluminium laptop lid, fine brushed streaks + speckle; dark = matte black lid, fine speckle */
:root, [data-theme="light"] { --sl-board-tex: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22%3E%3Crect x=%22-2%22 y=%2241.0%22 width=%2280%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22-28%22 y=%2283.0%22 width=%2239%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%2297%22 y=%22105.0%22 width=%2242%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22109%22 y=%2246.5%22 width=%2237%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%2289%22 y=%22116.0%22 width=%2257%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22-18%22 y=%224.5%22 width=%2285%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22-23%22 y=%2253.5%22 width=%2260%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22101%22 y=%2211.5%22 width=%2284%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22104%22 y=%227.5%22 width=%2245%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22109%22 y=%2228.5%22 width=%2237%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22109%22 y=%2273.5%22 width=%2280%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%2216%22 y=%226.0%22 width=%2235%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22-6%22 y=%2271.0%22 width=%2267%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22-4%22 y=%2253.5%22 width=%2299%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22106%22 y=%2215.0%22 width=%2269%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%226%22 y=%2271.5%22 width=%2243%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22106%22 y=%2274.0%22 width=%2254%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22-16%22 y=%2247.5%22 width=%22100%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Crect x=%22-24%22 y=%2291.0%22 width=%22102%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%22118%22 y=%227.5%22 width=%2256%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%2296%22 y=%2263.5%22 width=%2284%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%2240%22 y=%2299.0%22 width=%2289%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%2276%22 y=%2274.5%22 width=%2276%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%2223%22 y=%2238.0%22 width=%2253%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%2222%22 y=%2289.0%22 width=%2240%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%2236%22 y=%2273.5%22 width=%2297%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%2247%22 y=%2263.0%22 width=%2287%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%22115%22 y=%2236.5%22 width=%2239%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%2291%22 y=%2215.0%22 width=%2283%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%2247%22 y=%2221.0%22 width=%2249%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%2285%22 y=%22119.0%22 width=%2283%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Crect x=%22-21%22 y=%225.0%22 width=%22101%22 height=%22.5%22 fill=%22%233d4654%22 fill-opacity=%220.06%22/%3E%3Ccircle cx=%2268.8%22 cy=%22105.1%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2237.6%22 cy=%2283.4%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2271.3%22 cy=%2269.6%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2254.7%22 cy=%22100.8%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%22113.4%22 cy=%2256.9%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2279.7%22 cy=%227.3%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2284.2%22 cy=%2277.7%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%22119.2%22 cy=%2298.6%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2234.2%22 cy=%2246.3%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2280.2%22 cy=%222.7%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2255.4%22 cy=%2220.2%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2214.1%22 cy=%227.1%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2292.2%22 cy=%2215.5%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2229.7%22 cy=%2246.9%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%22104.6%22 cy=%229.7%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2253.9%22 cy=%2265.9%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%22106.0%22 cy=%2298.3%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%22103.7%22 cy=%2233.4%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2249.8%22 cy=%2243.1%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%22106.1%22 cy=%22114.9%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2218.1%22 cy=%2221.1%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2227.8%22 cy=%2228.0%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2258.2%22 cy=%2270.7%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2231.5%22 cy=%220.5%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2250.3%22 cy=%2244.3%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2268.0%22 cy=%22114.4%22 r=%220.55%22 fill=%22%234a5361%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2282.9%22 cy=%2261.9%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2274.1%22 cy=%2281.1%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%226.5%22 cy=%22107.9%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2293.6%22 cy=%22104.9%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2295.7%22 cy=%2247.1%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2247.9%22 cy=%2212.4%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2276.1%22 cy=%227.5%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%228.1%22 cy=%2225.1%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2219.5%22 cy=%2240.8%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%226.3%22 cy=%220.0%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2218.2%22 cy=%2212.2%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2243.6%22 cy=%223.1%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%22104.9%22 cy=%2273.7%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2217.8%22 cy=%2230.3%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2241.7%22 cy=%2243.7%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2214.7%22 cy=%22101.9%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%22119.2%22 cy=%2255.9%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2258.1%22 cy=%2210.3%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2212.3%22 cy=%2241.1%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2231.8%22 cy=%2299.5%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%2219.4%22 cy=%222.8%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%22114.1%22 cy=%2263.4%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.8%22/%3E%3C/svg%3E"); }
[data-theme="dark"] { --sl-board-tex: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22%3E%3Crect x=%22103%22 y=%2257.5%22 width=%2289%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.025%22/%3E%3Crect x=%2290%22 y=%2257.5%22 width=%22105%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.025%22/%3E%3Crect x=%227%22 y=%2224.0%22 width=%2295%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.025%22/%3E%3Crect x=%22117%22 y=%2260.5%22 width=%2253%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.025%22/%3E%3Crect x=%2274%22 y=%2212.0%22 width=%2268%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.025%22/%3E%3Crect x=%22-17%22 y=%2218.0%22 width=%2298%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.025%22/%3E%3Crect x=%22-30%22 y=%22103.5%22 width=%22106%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.025%22/%3E%3Crect x=%2275%22 y=%2250.5%22 width=%22108%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.025%22/%3E%3Crect x=%220%22 y=%2283.0%22 width=%22109%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.025%22/%3E%3Crect x=%2295%22 y=%221.5%22 width=%2238%22 height=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%220.025%22/%3E%3Ccircle cx=%227.1%22 cy=%2222.8%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2229.0%22 cy=%223.6%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2255.7%22 cy=%2252.9%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%22101.1%22 cy=%2262.3%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2276.8%22 cy=%2260.0%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2279.5%22 cy=%2254.9%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2233.4%22 cy=%22119.7%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%22119.5%22 cy=%22100.8%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2284.9%22 cy=%2237.8%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2227.6%22 cy=%2234.7%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%228.4%22 cy=%2292.0%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2248.0%22 cy=%22101.6%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2246.4%22 cy=%22115.0%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%22101.7%22 cy=%220.1%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2225.2%22 cy=%22109.2%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2256.4%22 cy=%22117.6%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2247.7%22 cy=%228.8%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2275.5%22 cy=%2293.4%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2232.4%22 cy=%2210.5%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2239.9%22 cy=%22115.7%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2291.0%22 cy=%2214.2%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2229.6%22 cy=%2212.1%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%227.2%22 cy=%2295.6%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2221.3%22 cy=%2267.1%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2253.7%22 cy=%2222.9%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2287.8%22 cy=%2215.7%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2277.2%22 cy=%2214.0%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2250.5%22 cy=%2225.5%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2232.4%22 cy=%22116.5%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2296.4%22 cy=%2236.5%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%22106.2%22 cy=%2225.3%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2247.3%22 cy=%22102.5%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2277.0%22 cy=%2212.0%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%22118.7%22 cy=%2225.6%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2231.0%22 cy=%2292.7%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2239.5%22 cy=%2235.6%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%228.8%22 cy=%2210.8%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2269.9%22 cy=%2229.2%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2272.2%22 cy=%2244.6%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2254.4%22 cy=%22115.1%22 r=%220.65%22 fill=%22%23ffffff%22 fill-opacity=%220.17%22/%3E%3Ccircle cx=%2258.0%22 cy=%2268.9%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22104.0%22 cy=%2221.9%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2218.5%22 cy=%22109.0%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2298.1%22 cy=%2229.9%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2222.8%22 cy=%2288.7%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22112.8%22 cy=%2223.6%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22114.0%22 cy=%22105.9%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2272.4%22 cy=%2250.6%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2212.5%22 cy=%224.6%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22115.5%22 cy=%2228.6%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2284.5%22 cy=%2230.8%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2298.8%22 cy=%2271.6%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2235.2%22 cy=%2221.1%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2286.4%22 cy=%228.3%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2227.4%22 cy=%2267.1%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22102.3%22 cy=%2273.7%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2233.6%22 cy=%22110.1%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2224.5%22 cy=%222.0%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2232.3%22 cy=%2253.5%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%227.3%22 cy=%2221.2%22 r=%220.6%22 fill=%22%23000000%22 fill-opacity=%220.5%22/%3E%3C/svg%3E"); }

body {
  margin: 0;
  background-color: var(--board);
  background-image: var(--sl-board-tex);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- layout + type helpers ---------- */
.sl-stage { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding: var(--space-8); }
.sl-stage--top { align-items: flex-start; }
.sl-col { display: flex; flex-direction: column; gap: var(--space-3); }
.sl-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.sl-spacer { flex: 1; }
.sl-cap { width: 100%; margin: 0; font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.sl-d { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 56px; letter-spacing: .005em; color: var(--text); }
.sl-t { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 36px; letter-spacing: .01em; color: var(--text); }
.sl-h { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 26px; letter-spacing: .015em; color: var(--text); }
.sl-p { margin: 0; font-size: 16px; line-height: 24px; }
.sl-sm { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-soft); }
.sl-num { font-family: var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.sl-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sl-icon { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* tones: a fill and the label colour that passes on it */
.sl-tone-paper { --tone: var(--paper); --on-tone: var(--text); }
.sl-tone-tomato { --tone: var(--tomato); --on-tone: #141218; }
.sl-tone-sunflower { --tone: var(--sunflower); --on-tone: #141218; }
.sl-tone-grass { --tone: var(--grass); --on-tone: #141218; }
.sl-tone-sky { --tone: var(--sky); --on-tone: #141218; }
.sl-tone-bubblegum { --tone: var(--bubblegum); --on-tone: #141218; }
.sl-tone-grape { --tone: var(--grape); --on-tone: var(--die); }
.sl-tone-ink { --tone: var(--ink); --on-tone: var(--sunflower); }

/* label pill: Pop's black pill with yellow uppercase text */
.sl-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--ink); color: var(--sunflower); font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sl-pill .sl-icon { width: 14px; height: 14px; stroke-width: 3; }

/* ==========================================================================
   The sticker: ink outline, white die-cut, edge hairline, hard drop with the
   same spread so the shadow copies the die-cut silhouette.
   ========================================================================== */
.sl-stk {
  --sl-line: 3px; --sl-cut: 5px; --sl-dx0: 3px; --sl-dy0: 4px;
  --sl-dx: var(--sl-dx0); --sl-dy: var(--sl-dy0);
  position: relative;
  box-sizing: border-box;
  border: var(--sl-line) solid var(--ink);
  box-shadow:
    0 0 0 var(--sl-cut) var(--die),
    0 0 0 calc(var(--sl-cut) + 1px) var(--edge),
    var(--sl-dx) var(--sl-dy) 0 calc(var(--sl-cut) + 1px) var(--drop);
  transform: rotate(var(--sl-tilt, 0deg));
}
.sl-stk--sm { --sl-line: 2.5px; --sl-cut: 3px; --sl-dx0: 2px; --sl-dy0: 3px; }
.sl-stk--lg { --sl-cut: 6px; --sl-dx0: 5px; --sl-dy0: 6px; }
.sl-stk:focus-visible, .sl-stk:has(> input:focus-visible) { outline: 3px solid var(--focus); outline-offset: calc(var(--sl-cut) + 4px); }

/* lift on hover, press flat on click */
.sl-lift {
  cursor: pointer;
  transition: transform var(--sl-t-hover) var(--sl-spring), box-shadow var(--sl-t-hover) var(--sl-snap);
}
/* hover-lift without jitter: an invisible skirt 5px past the bottom/right keeps
   the cursor on the sticker while it moves up-left */
.sl-lift::after {
  content: "";
  position: absolute;
  inset: calc(var(--sl-line) * -1) calc(var(--sl-line) * -1 - 5px) calc(var(--sl-line) * -1 - 5px) calc(var(--sl-line) * -1);
  z-index: -1;
  border-radius: inherit;
}
@media (hover: hover) {
  .sl-lift:hover { --sl-dx: calc(var(--sl-dx0) + 3px); --sl-dy: calc(var(--sl-dy0) + 3px); transform: translate(-2px, -2px) rotate(var(--sl-tilt-hover, var(--sl-tilt, 0deg))); }
}
.sl-lift:active, .sl-lift.is-pressed {
  --sl-dx: 0px; --sl-dy: 1px;
  transform: translate(3px, 3px) rotate(var(--sl-tilt-hover, var(--sl-tilt, 0deg))) scale(.985, .97);
  transition-duration: var(--sl-t-press);
  transition-timing-function: var(--sl-push);
}

/* corner curl: the bottom-right corner folds over to show the backing.
   One pseudo-element: the lower half is the ground the sticker sits on
   (covering the lifted corner and its shadow), the upper half is the flap. */
.sl-curl::before {
  --sl-reach: calc(var(--sl-line) + var(--sl-cut) + 1px + var(--sl-dy0) + 3px);
  content: "";
  position: absolute;
  z-index: 3;
  right: calc(var(--sl-reach) * -1);
  bottom: calc(var(--sl-reach) * -1);
  width: calc(var(--sl-curl, 22px) + var(--sl-reach));
  height: calc(var(--sl-curl, 22px) + var(--sl-reach));
  background: linear-gradient(to top left, var(--sl-ground) 50%, var(--backing) 50%, var(--backing) var(--sl-flap, 100%), transparent var(--sl-flap, 100%));
  border-top-left-radius: var(--sl-flap-r, 10px);
  filter: drop-shadow(-2px -2px 0 var(--ink));
  transform: scale(0);
  transform-origin: 100% 100%;
  transition: transform var(--sl-t-curl) var(--sl-spring);
  pointer-events: none;
}
@media (hover: hover) {
  .sl-curl:hover::before { transform: scale(1); }
}
.sl-curl.is-curled::before { transform: scale(1); }

/* ---------- motion ---------- */
@keyframes sl-slap {
  0% { opacity: 0; transform: scale(1.15) rotate(calc(var(--sl-tilt, 0deg) - 6deg)); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  55% { opacity: 1; transform: scale(1) rotate(var(--sl-tilt, 0deg)); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  70% { transform: scale(1.04, .94) rotate(var(--sl-tilt, 0deg)); }
  86% { transform: scale(.99, 1.015) rotate(var(--sl-tilt, 0deg)); }
}
@keyframes sl-stamp {
  0% { opacity: 0; transform: scale(1.8) rotate(calc(var(--sl-tilt, 0deg) - 18deg)); animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  48% { opacity: 1; transform: scale(.9) rotate(var(--sl-tilt, 0deg)); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  68% { transform: scale(1.07, .93) rotate(var(--sl-tilt, 0deg)); }
  86% { transform: scale(.985, 1.02) rotate(var(--sl-tilt, 0deg)); }
}
@keyframes sl-ring { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes sl-peel {
  0% { opacity: 1; transform: rotate(var(--sl-tilt, 0deg)); }
  35% { opacity: 1; transform: translate(2px, -6px) rotate(calc(var(--sl-tilt, 0deg) - 4deg)); }
  100% { opacity: 0; transform: translate(56px, -64px) rotate(calc(var(--sl-tilt, 0deg) + 20deg)) scale(.9); }
}
@keyframes sl-bump { 0% { transform: scale(1.3) rotate(-5deg); } 60% { transform: scale(.95, 1.04); } }
@keyframes sl-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes sl-rise { from { transform: scaleY(0); } }
@keyframes sl-fade { from { opacity: 0; } }
@keyframes sl-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

.sl-slap { animation: sl-slap var(--sl-t-slap) linear backwards; animation-delay: var(--sl-delay, 0ms); }
.sl-stamp { animation: sl-stamp var(--sl-t-stamp) linear backwards; animation-delay: var(--sl-delay, 0ms); }
.sl-bump { animation: sl-bump 300ms var(--sl-spring) backwards; display: inline-block; }
/* exits may hold their last frame: the element is removed on animationend */
.is-peeling { animation: sl-peel var(--sl-t-peel) var(--sl-peel) forwards; transform-origin: 0 0; pointer-events: none; }
.is-peeling.sl-curl::before { transform: scale(2.6); transition: transform var(--sl-t-peel) var(--sl-push); }
.sl-wiggle { display: inline-block; animation: sl-wiggle 2.6s ease-in-out infinite; }

/* ==========================================================================
   Button / IconButton
   ========================================================================== */
.sl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 44px; padding: 0 20px; margin: 0;
  border-radius: var(--radius-pill);
  background: var(--paper); color: var(--text);
  font-family: var(--font-body); font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.sl-btn .sl-icon { width: 18px; height: 18px; stroke-width: 2.75; }
.sl-btn--primary { background: var(--sunflower); color: #141218; }
.sl-btn--danger { background: var(--tomato); color: #141218; }
.sl-btn--ghost {
  background: transparent; color: var(--text);
  border-style: dashed; border-color: var(--text-soft);
  box-shadow: none;
}
@media (hover: hover) { .sl-btn--ghost:hover { background: var(--paper); border-style: solid; border-color: var(--ink); } }
.sl-btn--ghost:active { --sl-dx: 0px; --sl-dy: 0px; box-shadow: none; transform: translate(1px, 1px) scale(.98); }
.sl-btn--sm { height: 34px; padding: 0 14px; font-size: 14px; }
.sl-btn--sm .sl-icon { width: 16px; height: 16px; }
.sl-btn--lg { height: 54px; padding: 0 26px; font-size: 17px; line-height: 22px; }
.sl-btn--block { display: flex; width: 100%; }
.sl-btn:disabled, .sl-btn[aria-disabled="true"] {
  cursor: not-allowed; transform: none; box-shadow: none;
  background: transparent; color: var(--text-soft); border-style: dashed; border-color: var(--text-soft);
}
.sl-btn:disabled::after { display: none; }

.sl-ibtn { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-md); }
.sl-ibtn .sl-icon { width: 20px; height: 20px; }
.sl-ibtn.sl-btn--sm { width: 34px; height: 34px; border-radius: var(--radius-sm); }
.sl-ibtn.sl-btn--lg { width: 54px; height: 54px; }
.sl-ibtn--round { border-radius: 50%; }
.sl-ibtn.sl-btn--sm.sl-ibtn--round { border-radius: 50%; }
@media (hover: hover) { .sl-ibtn.sl-lift:hover { --sl-tilt-hover: -6deg; } }
.sl-ibtn-wrap { position: relative; display: inline-flex; }
.sl-ibtn-wrap > .sl-badge { position: absolute; top: -9px; right: -9px; z-index: 4; pointer-events: none; }

/* ==========================================================================
   Toggle / Checkbox / Radio
   ========================================================================== */
.sl-toggle, .sl-check { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-weight: 700; color: var(--text); -webkit-tap-highlight-color: transparent; }
.sl-toggle.is-disabled, .sl-check.is-disabled { cursor: not-allowed; color: var(--text-soft); }
.sl-toggle__track {
  width: 54px; height: 30px; flex: none; border-radius: var(--radius-pill);
  background: var(--paper);
  transition: background-color var(--sl-t-hover) var(--sl-snap);
}
.sl-toggle__knob {
  position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; box-sizing: border-box;
  border-radius: 50%; border: 2.5px solid var(--ink); background: var(--sunflower);
  transition: transform 300ms var(--sl-spring);
}
.sl-toggle input:checked + .sl-toggle__track { background: var(--grass); }
.sl-toggle input:checked + .sl-toggle__track .sl-toggle__knob { transform: translateX(24px) rotate(180deg); background: var(--die); }
.sl-toggle:active .sl-toggle__knob { transform: scale(1.25, .85); }
.sl-toggle:active input:checked + .sl-toggle__track .sl-toggle__knob { transform: translateX(24px) scale(1.25, .85); }
.sl-toggle input:focus-visible + .sl-toggle__track { outline: 3px solid var(--focus); outline-offset: 7px; }
.sl-toggle input:disabled + .sl-toggle__track { box-shadow: none; border-style: dashed; border-color: var(--text-soft); background: transparent; }
.sl-toggle input:disabled + .sl-toggle__track .sl-toggle__knob { border-color: var(--text-soft); background: transparent; }

.sl-check__box {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: var(--paper); color: #141218;
  transition: transform 260ms var(--sl-spring), background-color 120ms linear;
}
.sl-check--radio .sl-check__box { border-radius: 50%; }
.sl-check__box .sl-icon { width: 18px; height: 18px; stroke-width: 3.5; transform: scale(0) rotate(-30deg); transition: transform 260ms var(--sl-spring); }
.sl-check__dot { width: 10px; height: 10px; border-radius: 50%; background: #141218; transform: scale(0); transition: transform 260ms var(--sl-spring); }
.sl-check input:checked + .sl-check__box { background: var(--sunflower); transform: rotate(-6deg); }
.sl-check--radio input:checked + .sl-check__box { transform: rotate(0deg); }
.sl-check input:checked + .sl-check__box .sl-icon { transform: scale(1) rotate(0deg); }
.sl-check input:checked + .sl-check__box .sl-check__dot { transform: scale(1); }
.sl-check:active .sl-check__box { transform: scale(.88); }
.sl-check input:focus-visible + .sl-check__box { outline: 3px solid var(--focus); outline-offset: 6px; }
.sl-check input:disabled + .sl-check__box { box-shadow: none; border-style: dashed; border-color: var(--text-soft); background: transparent; }
.sl-check__text { display: flex; flex-direction: column; }
.sl-check__hint { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-soft); }
.sl-choices { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; border: 0; }
.sl-choices legend { padding: 0; margin-bottom: var(--space-3); font-weight: 800; font-size: 15px; }

/* ==========================================================================
   TextField
   ========================================================================== */
.sl-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.sl-field__label { font-size: 15px; line-height: 20px; font-weight: 800; color: var(--text); }
.sl-field__box { position: relative; display: flex; align-items: center; }
.sl-field__box > .sl-icon { position: absolute; left: 14px; color: var(--text-soft); pointer-events: none; }
.sl-field__input {
  box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px; margin: 0;
  border: 3px solid var(--ink); border-radius: var(--radius-md);
  background: var(--paper); color: var(--text);
  font: 500 16px/24px var(--font-body);
  box-shadow: var(--drop-flat);
  transition: transform var(--sl-t-hover) var(--sl-snap), box-shadow var(--sl-t-hover) var(--sl-snap);
  -webkit-appearance: none; appearance: none;
}
[data-theme="dark"] .sl-field__input { border-color: var(--text-soft); }
textarea.sl-field__input { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; }
.sl-field__box > .sl-icon + .sl-field__input { padding-left: 44px; }
.sl-field__input::placeholder { color: var(--text-soft); opacity: 1; }
.sl-field__input:focus { outline: 3px solid var(--focus); outline-offset: 3px; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--drop); }
.sl-field__help { font-size: 14px; line-height: 20px; color: var(--text-soft); margin: 0; }
.sl-field .sl-field__error { align-self: flex-start; margin-top: 4px; margin-left: 4px; --sl-tilt: -1.5deg; height: auto; min-height: 24px; padding: 2px 10px; text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 18px; font-weight: 800; }
.sl-field.is-error .sl-field__input { border-color: var(--tomato); border-width: 3px; box-shadow: 3px 3px 0 0 var(--tomato); }
.sl-field.is-error .sl-field__box { animation: sl-shake 300ms var(--sl-snap); }
.sl-field.is-disabled .sl-field__input { border-style: dashed; box-shadow: none; background: transparent; color: var(--text-soft); }

/* ==========================================================================
   Tabs / SegmentedControl
   ========================================================================== */
.sl-tabs { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 6px 2px; }
.sl-tab {
  position: relative; height: 40px; padding: 0 16px; margin: 0;
  border: 3px solid transparent; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-soft);
  font: 800 15px/20px var(--font-body); cursor: pointer;
  transition: color 120ms linear, transform var(--sl-t-hover) var(--sl-spring);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .sl-tab:hover { color: var(--text); transform: translateY(-2px); } }
.sl-tab[aria-selected="true"] {
  --sl-tilt: -2deg; --sl-line: 3px; --sl-cut: 3px; --sl-dx: 2px; --sl-dy: 3px;
  background: var(--ink); color: var(--sunflower); border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--die), 0 0 0 4px var(--edge), 2px 3px 0 4px var(--drop);
  transform: rotate(-2deg);
}
.sl-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 7px; }
.sl-tab .sl-count { margin-left: 6px; font-size: 12px; opacity: .85; }
.sl-tabpanel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-md); }

.sl-seg {
  --sl-line: 3px; --sl-cut: 3px; --sl-dx0: 2px; --sl-dy0: 3px;
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: var(--radius-pill); background: var(--paper);
}
.sl-seg__opt {
  position: relative; height: 36px; padding: 0 16px; margin: 0;
  border: 2.5px solid transparent; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-soft);
  font: 800 14px/20px var(--font-body); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 120ms linear, transform 260ms var(--sl-spring);
  -webkit-tap-highlight-color: transparent;
}
.sl-seg__opt .sl-icon { width: 16px; height: 16px; }
@media (hover: hover) { .sl-seg__opt:hover { color: var(--text); } }
.sl-seg__opt[aria-checked="true"] { --sl-tilt: -2.5deg; background: var(--sunflower); color: #141218; border-color: var(--ink); box-shadow: 2px 2px 0 0 var(--ink); transform: rotate(-2.5deg); }
.sl-seg__opt:active { transform: scale(.94); }
.sl-seg__opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ==========================================================================
   Card
   ========================================================================== */
.sl-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--tone, var(--paper)); color: var(--on-tone, var(--text));
  min-width: 0; text-decoration: none;
  --sl-curl: 30px;
}
.sl-card * { --sl-ground: var(--tone, var(--paper)); }
.sl-card[class*="sl-tone-"]:not(.sl-tone-paper) .sl-h, .sl-card[class*="sl-tone-"]:not(.sl-tone-paper) .sl-t, .sl-card[class*="sl-tone-"]:not(.sl-tone-paper) .sl-sm { color: var(--on-tone); }
.sl-card__head { display: flex; align-items: center; gap: var(--space-3); }
.sl-card__foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.sl-card > .sl-pill { align-self: flex-start; }

/* ==========================================================================
   Badge / Tag
   ========================================================================== */
.sl-badge {
  --sl-line: 2px; --sl-cut: 2.5px; --sl-dx0: 1.5px; --sl-dy0: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 24px; min-width: 24px; padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--tone, var(--sunflower)); color: var(--on-tone, #141218);
  font-size: 12px; line-height: 16px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.sl-badge--count { padding: 0 6px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sl-badge .sl-icon { width: 13px; height: 13px; stroke-width: 3; }

.sl-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sl-tag {
  --sl-tilt: -2deg;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; margin: 0;
  border-radius: var(--radius-pill);
  background: var(--tone, var(--paper)); color: var(--on-tone, var(--text));
  font: 800 14px/20px var(--font-body); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.sl-tags > :nth-child(3n+2) { --sl-tilt: 1.5deg; }
.sl-tags > :nth-child(3n+3) { --sl-tilt: -1deg; }
.sl-tag { --sl-tilt-hover: 0deg; }
.sl-tag .sl-icon { width: 15px; height: 15px; stroke-width: 3; }
.sl-tag[aria-pressed="true"] { background: var(--sunflower); color: #141218; }
.sl-tag__x {
  display: grid; place-items: center; width: 22px; height: 22px; margin: 0 -8px 0 2px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.sl-tag__x .sl-icon { width: 14px; height: 14px; }
.sl-tag__x:hover { background: var(--ink); color: var(--sunflower); }
.sl-tag__x:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
span.sl-tag { cursor: default; transition: transform var(--sl-t-hover) var(--sl-spring); }
@media (hover: hover) { span.sl-tag:hover { transform: rotate(0deg); } }

/* ==========================================================================
   Avatar
   ========================================================================== */
.sl-avatar {
  --sl-tilt: 0deg;
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tone, var(--bubblegum)); color: var(--on-tone, #141218);
  font-family: var(--font-display); font-size: 18px; line-height: 1; letter-spacing: .02em;
  overflow: visible;
}
.sl-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.sl-avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.sl-avatar--lg { width: 64px; height: 64px; font-size: 26px; }
.sl-avatar--xl { width: 96px; height: 96px; font-size: 38px; }
.sl-avatar__status {
  position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; box-sizing: border-box;
  border-radius: 50%; border: 2.5px solid var(--ink); background: var(--grass);
  box-shadow: 0 0 0 2.5px var(--die);
}
.sl-avatar--xl .sl-avatar__status, .sl-avatar--lg .sl-avatar__status { width: 22px; height: 22px; right: -2px; bottom: -2px; border-width: 3px; box-shadow: 0 0 0 3px var(--die); }
.sl-avatar__status.is-away { background: var(--sunflower); }
.sl-avatar__status.is-off { background: var(--paper); }
.sl-avatars { display: inline-flex; padding-left: 10px; }
.sl-avatars > .sl-avatar { margin-left: -10px; }
.sl-avatars > :nth-child(2n) { --sl-tilt: 4deg; }
.sl-avatars > :nth-child(3n) { --sl-tilt: -5deg; }
@media (hover: hover) { .sl-avatars > .sl-avatar:hover { z-index: 2; --sl-tilt-hover: -8deg; } }
.sl-avatar__more { background: var(--ink); color: var(--sunflower); font-family: var(--font-body); font-weight: 900; font-size: 13px; }

/* ==========================================================================
   Tooltip
   ========================================================================== */
.sl-tipwrap { position: relative; display: inline-flex; }
.sl-tip {
  position: absolute; left: 50%; bottom: calc(100% + 16px); z-index: 30;
  width: max-content; max-width: 220px; padding: 6px 12px;
  border-radius: var(--radius-md); background: var(--ink); color: #fffdf8;
  font-size: 13px; line-height: 18px; font-weight: 800; text-align: center;
  box-shadow: 0 0 0 3px var(--die), 0 0 0 4px var(--edge), 2px 3px 0 4px var(--drop);
  opacity: 0; transform: translateX(-50%) scale(.5) rotate(-10deg); transform-origin: 50% 120%;
  pointer-events: none;
  transition: opacity 120ms linear, transform var(--sl-t-curl) var(--sl-spring);
}
.sl-tip--bottom { bottom: auto; top: calc(100% + 16px); transform-origin: 50% -20%; }
.sl-tipwrap.is-open .sl-tip { opacity: 1; transform: translateX(-50%) scale(1) rotate(-2deg); }
.sl-tip kbd { font: inherit; color: var(--sunflower); }

/* ==========================================================================
   Toast
   ========================================================================== */
.sl-toasts {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 60;
  display: flex; flex-direction: column-reverse; gap: var(--space-4); align-items: flex-end;
  width: min(360px, calc(100vw - 48px)); pointer-events: none;
}
.sl-toasts > * { pointer-events: auto; }
.sl-toast {
  --sl-curl: 24px;
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start;
  width: 100%; padding: 12px 12px 12px 14px;
  border-radius: var(--radius-md); background: var(--paper); color: var(--text);
}
.sl-toast:nth-child(2n) { --sl-tilt: .8deg; }
.sl-toast:nth-child(2n+1) { --sl-tilt: -.8deg; }
.sl-toast__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--tone, var(--sky)); color: var(--on-tone, #141218); }
.sl-toast__ico .sl-icon { width: 18px; height: 18px; stroke-width: 3; }
.sl-toast__title { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 22px; letter-spacing: .015em; }
.sl-toast__body { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--text-soft); }
.sl-toast__act { margin-top: var(--space-3); }
.sl-toast__x { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-soft); cursor: pointer; }
.sl-toast__x .sl-icon { width: 16px; height: 16px; }
.sl-toast__x:hover { background: var(--ink); color: var(--sunflower); }
.sl-toast__x:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sl-toast__text { min-width: 0; padding-top: 2px; }

/* ==========================================================================
   Modal
   ========================================================================== */
.sl-scrim {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: var(--space-6);
  background: rgba(20, 18, 24, .62);
  animation: sl-fade 180ms linear backwards;
}
.sl-scrim.is-closing { opacity: 0; transition: opacity 200ms linear 120ms; }
.sl-modal {
  --sl-curl: 34px;
  width: min(520px, 100%); max-height: calc(100vh - 64px); overflow: visible;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8); border-radius: var(--radius-lg);
  background: var(--paper); color: var(--text);
}
.sl-modal * { --sl-ground: var(--paper); }
.sl-modal__head { display: flex; align-items: flex-start; gap: var(--space-4); }
.sl-modal__head .sl-col { flex: 1; gap: var(--space-2); }
.sl-modal__body { overflow: auto; }
.sl-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.sl-modal .sl-ibtn { --sl-tilt-hover: 90deg; }
@media (max-width: 560px) {
  .sl-modal { padding: var(--space-6); }
  .sl-modal__foot > .sl-btn { flex: 1; }
}

/* ==========================================================================
   Progress
   ========================================================================== */
.sl-progress { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.sl-progress__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-weight: 800; font-size: 15px; }
.sl-progress__val { font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: .02em; }
.sl-progress__track { height: 22px; border-radius: var(--radius-pill); background: var(--paper); overflow: hidden; }
.sl-progress--sm .sl-progress__track { height: 14px; }
.sl-progress__fill {
  position: absolute; inset: 0; border-right: 3px solid var(--ink);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--tone, var(--sky));
  transform: translateX(calc(var(--v, 0) * 1% - 100%));
  transition: transform 400ms var(--sl-spring);
}
.sl-progress__steps { display: flex; gap: var(--space-3); flex-wrap: wrap; padding: 4px 0; }
.sl-progress__step {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--paper); color: #141218;
  transition: transform 260ms var(--sl-spring);
}
.sl-progress__step .sl-icon { width: 16px; height: 16px; stroke-width: 3.5; }
.sl-progress__step.is-done { background: var(--tone, var(--grass)); }
.sl-progress__step:nth-child(2n).is-done { --sl-tilt: 6deg; }
.sl-progress__step:nth-child(2n+1).is-done { --sl-tilt: -6deg; }
.sl-progress__step:not(.is-done) { box-shadow: none; border-style: dashed; border-color: var(--text-soft); }
.sl-progress__step:not(.is-done) .sl-icon { display: none; }

/* ==========================================================================
   Sticker — the signature
   ========================================================================== */
.sl-sticker {
  --sl-tilt: -4deg; --sl-flap-r: 12px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 104px; height: 104px; padding: 8px; flex: none;
  border-radius: var(--radius-lg);
  background: var(--tone, var(--sunflower)); color: var(--on-tone, #141218);
  font-family: var(--font-display); font-size: 17px; line-height: 18px; letter-spacing: .03em; text-align: center; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.sl-sticker .sl-icon { width: 40%; height: 40%; stroke-width: 2.75; }
.sl-sticker--circle { border-radius: 50%; --sl-flap: 72%; --sl-flap-r: 50%; }
.sl-sticker--pill { width: auto; height: 56px; padding: 0 22px; flex-direction: row; gap: 8px; border-radius: var(--radius-pill); font-size: 20px; line-height: 22px; --sl-curl: 22px; --sl-flap-r: 8px; }
.sl-sticker--pill .sl-icon { width: 24px; height: 24px; }
.sl-sticker--s { width: 72px; height: 72px; font-size: 13px; line-height: 14px; }
.sl-sticker--l { width: 140px; height: 140px; font-size: 22px; line-height: 22px; }
.sl-sticker__label { display: block; max-width: 100%; overflow-wrap: anywhere; }
.sl-sticker--s .sl-sticker__label { display: none; }
@media (hover: hover) { .sl-sticker.sl-lift:hover { --sl-tilt-hover: calc(var(--sl-tilt, 0deg) * .4); } }

.sl-lid {
  position: relative; box-sizing: border-box; min-height: 220px; padding: var(--space-8);
  border-radius: var(--radius-lg); background: #1d1d21;
  display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); align-items: center; align-content: center; justify-content: center;
  --sl-ground: #1d1d21; --drop: #45414e; --edge: #ffffff1a;
}
.sl-lid * { --sl-ground: #1d1d21; }
[data-theme="dark"] .sl-lid { background: #0e0e10; --sl-ground: #0e0e10; box-shadow: inset 0 0 0 2px #2c2c31; }
[data-theme="dark"] .sl-lid * { --sl-ground: #0e0e10; }

/* ==========================================================================
   Widgets
   ========================================================================== */
.sl-widget { width: 340px; max-width: 100%; }

/* StatCard */
.sl-stat__num { font-family: var(--font-display); font-size: 44px; line-height: 44px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.sl-stat__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sl-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: var(--space-2); }
.sl-bar {
  flex: 1; min-width: 0; box-sizing: border-box;
  height: var(--h, 50%); border: 2.5px solid var(--ink); border-radius: 6px 6px 3px 3px;
  background: var(--tone, var(--sky)); transform-origin: 50% 100%;
  animation: sl-rise 360ms var(--sl-spring) backwards; animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform var(--sl-t-hover) var(--sl-spring);
}
.sl-bar.is-today { background: var(--sunflower); }
@media (hover: hover) { .sl-bar:hover { transform: translateY(-3px); } }

/* StickerBook */
.sl-book__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.sl-book__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--space-4); padding: var(--space-2) 0; }
.sl-book__slot {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0;
  border-radius: var(--radius-md); border: 2.5px dashed var(--text-soft);
  color: var(--text-soft); font-family: var(--font-display); font-size: 22px;
}
.sl-book__slot.is-got { border-color: transparent; }
.sl-book__slot .sl-sticker { width: 72%; height: 72%; padding: 4px; }
.sl-book__ring { position: absolute; inset: 4px; border-radius: 50%; border: 3px solid var(--ink); opacity: 0; pointer-events: none; animation: sl-ring 420ms var(--sl-snap) backwards; animation-delay: 160ms; }
.sl-book__count { font-family: var(--font-display); font-size: 21px; letter-spacing: .02em; }

/* ActivityFeed */
.sl-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sl-feed__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-top: 2px dashed var(--edge); }
[data-theme="dark"] .sl-feed__item { border-top-color: #ffffff24; }
.sl-feed__item:first-child { border-top: 0; }
.sl-feed__text { margin: 0; font-size: 15px; line-height: 22px; min-width: 0; }
.sl-feed__text b { font-weight: 900; }
.sl-feed__meta { display: flex; align-items: center; gap: var(--space-3); margin-top: 6px; flex-wrap: wrap; font-size: 13px; line-height: 18px; color: var(--text-soft); font-weight: 700; }

/* ==========================================================================
   Reduced motion: no movement, every state still changes
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .sl-lift:hover, .sl-lift:active, .sl-lift.is-pressed, .sl-tab:hover, .sl-bar:hover, .sl-field__input:focus { transform: rotate(var(--sl-tilt, 0deg)) !important; }
  .sl-check:active .sl-check__box, .sl-seg__opt:active { transform: none !important; }
}

/* sticker-book slots hold a tooltip-wrapped sticker */
.sl-book__slot .sl-tipwrap { width: 72%; height: 72%; }
.sl-book__slot .sl-tipwrap > .sl-sticker { width: 100%; height: 100%; }
.sl-btn--ghost { transition: transform var(--sl-t-press) var(--sl-push), background-color 120ms linear; }