/* Tren-Tren playful layer (Oct 2026). Loaded after design.css. Everything that changes the look sits under html.fun,
   so the Calm look in Make it yours (no .fun class) falls back to the clean Apple-style design.
   Components that exist in both looks (album, stickers, overlays) are styled without the .fun scope. */
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/baloo-2-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/baloo-2-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/baloo-2-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/baloo-2-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/baloo-2-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/baloo-2-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.tone-pink { --tcb: #d63384; --tc: #d63384; --tb: #fde4f0; }

/* ======================= playful skin (html.fun) ======================= */
.fun { --play: "Baloo 2", ui-rounded, "SF Pro Rounded", var(--display); --cream: #fff6e8; --panel: var(--cream); --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22none%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.55%22%3E %3Cg transform=%22translate(20 24) rotate(-12)%22 stroke=%22%23f2a074%22%3E%3Crect x=%220%22 y=%220%22 width=%2234%22 height=%2230%22 rx=%2210%22/%3E%3Crect x=%225%22 y=%225%22 width=%2224%22 height=%2210%22 rx=%224%22/%3E%3Cpath d=%22M8 30l-4 7M26 30l4 7%22/%3E%3C/g%3E %3Cg transform=%22translate(150 30) rotate(18)%22 stroke=%22%238fbbe6%22%3E%3Cpath d=%22M0 0h52M0 12h52M6-3v18M18-3v18M30-3v18M42-3v18%22/%3E%3C/g%3E %3Cpath transform=%22translate(226 96)%22 stroke=%22%23efc24a%22 d=%22M0-12 3.5-3.6 12.5-3 5.6 2.8 7.6 11.6 0 7 -7.6 11.6 -5.6 2.8 -12.5-3 -3.5-3.6Z%22/%3E %3Cg transform=%22translate(78 120) rotate(-8)%22 stroke=%22%23b49ae0%22%3E%3Cpath d=%22M0 0h44v8a5 5 0 0 0 0 10v8H0v-8a5 5 0 0 0 0-10Z%22/%3E%3Cpath d=%22M30 0v26%22 stroke-dasharray=%223 3%22/%3E%3C/g%3E %3Cpath transform=%22translate(186 172)%22 stroke=%22%23f2a074%22 d=%22M0 14C-14 4-14-6-8-8c3-1 6 1 8 4 2-3 5-5 8-4 6 2 6 12-8 22Z%22/%3E %3Cg transform=%22translate(26 196)%22 stroke=%22%238fbbe6%22%3E%3Cpath d=%22M0 14a8 8 0 0 1 4-14 11 11 0 0 1 20 2 7 7 0 0 1 2 12Z%22/%3E%3C/g%3E %3Cg transform=%22translate(120 214) rotate(10)%22 stroke=%22%2386cfa6%22%3E%3Cpath d=%22M0 0l7 16 7-15ZM16 2l6 15 8-14ZM32 3l5 15 9-13Z%22/%3E%3Cpath d=%22M-4 0c20 5 36 5 54 2%22/%3E%3C/g%3E %3Ccircle cx=%22236%22 cy=%22226%22 r=%224%22 stroke=%22%2386cfa6%22/%3E%3Ccircle cx=%22100%22 cy=%2258%22 r=%223%22 stroke=%22%23efc24a%22/%3E%3Ccircle cx=%2258%22 cy=%22160%22 r=%222.6%22 stroke=%22%23f2a074%22/%3E%3Ccircle cx=%22214%22 cy=%2230%22 r=%222.6%22 stroke=%22%23b49ae0%22/%3E %3Cpath transform=%22translate(150 120)%22 stroke=%22%2386cfa6%22 d=%22M0 6c6-8 14-8 20 0M4 2v-4M16 2v-4%22/%3E %3C/g%3E%3C/svg%3E"); --bounce: cubic-bezier(.34, 1.56, .64, 1); --card-r: 26px; --edge: rgba(90, 50, 20, .16); --tile: #fff; }
@media (prefers-color-scheme: dark) { :root.fun:not([data-theme="light"]) { --cream: #151b3b; --panel: var(--cream); --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22none%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.22%22%3E %3Cg transform=%22translate(20 24) rotate(-12)%22 stroke=%22%23ffb38a%22%3E%3Crect x=%220%22 y=%220%22 width=%2234%22 height=%2230%22 rx=%2210%22/%3E%3Crect x=%225%22 y=%225%22 width=%2224%22 height=%2210%22 rx=%224%22/%3E%3Cpath d=%22M8 30l-4 7M26 30l4 7%22/%3E%3C/g%3E %3Cg transform=%22translate(150 30) rotate(18)%22 stroke=%22%238fc4ff%22%3E%3Cpath d=%22M0 0h52M0 12h52M6-3v18M18-3v18M30-3v18M42-3v18%22/%3E%3C/g%3E %3Cpath transform=%22translate(226 96)%22 stroke=%22%23ffe08a%22 d=%22M0-12 3.5-3.6 12.5-3 5.6 2.8 7.6 11.6 0 7 -7.6 11.6 -5.6 2.8 -12.5-3 -3.5-3.6Z%22/%3E %3Cg transform=%22translate(78 120) rotate(-8)%22 stroke=%22%23c7b3ff%22%3E%3Cpath d=%22M0 0h44v8a5 5 0 0 0 0 10v8H0v-8a5 5 0 0 0 0-10Z%22/%3E%3Cpath d=%22M30 0v26%22 stroke-dasharray=%223 3%22/%3E%3C/g%3E %3Cpath transform=%22translate(186 172)%22 stroke=%22%23ffb38a%22 d=%22M0 14C-14 4-14-6-8-8c3-1 6 1 8 4 2-3 5-5 8-4 6 2 6 12-8 22Z%22/%3E %3Cg transform=%22translate(26 196)%22 stroke=%22%238fc4ff%22%3E%3Cpath d=%22M0 14a8 8 0 0 1 4-14 11 11 0 0 1 20 2 7 7 0 0 1 2 12Z%22/%3E%3C/g%3E %3Cg transform=%22translate(120 214) rotate(10)%22 stroke=%22%238fe0b4%22%3E%3Cpath d=%22M0 0l7 16 7-15ZM16 2l6 15 8-14ZM32 3l5 15 9-13Z%22/%3E%3Cpath d=%22M-4 0c20 5 36 5 54 2%22/%3E%3C/g%3E %3Ccircle cx=%22236%22 cy=%22226%22 r=%224%22 stroke=%22%238fe0b4%22/%3E%3Ccircle cx=%22100%22 cy=%2258%22 r=%223%22 stroke=%22%23ffe08a%22/%3E%3Ccircle cx=%2258%22 cy=%22160%22 r=%222.6%22 stroke=%22%23ffb38a%22/%3E%3Ccircle cx=%22214%22 cy=%2230%22 r=%222.6%22 stroke=%22%23c7b3ff%22/%3E %3Cpath transform=%22translate(150 120)%22 stroke=%22%238fe0b4%22 d=%22M0 6c6-8 14-8 20 0M4 2v-4M16 2v-4%22/%3E %3C/g%3E%3C/svg%3E"); --edge: rgba(0, 0, 0, .45); --tile: rgba(255, 255, 255, .07); --paper: #10152e; --stone: #1d2450; --glass: rgba(21, 27, 59, .92); } }
:root.fun[data-theme="dark"] { --cream: #151b3b; --panel: var(--cream); --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22none%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.22%22%3E %3Cg transform=%22translate(20 24) rotate(-12)%22 stroke=%22%23ffb38a%22%3E%3Crect x=%220%22 y=%220%22 width=%2234%22 height=%2230%22 rx=%2210%22/%3E%3Crect x=%225%22 y=%225%22 width=%2224%22 height=%2210%22 rx=%224%22/%3E%3Cpath d=%22M8 30l-4 7M26 30l4 7%22/%3E%3C/g%3E %3Cg transform=%22translate(150 30) rotate(18)%22 stroke=%22%238fc4ff%22%3E%3Cpath d=%22M0 0h52M0 12h52M6-3v18M18-3v18M30-3v18M42-3v18%22/%3E%3C/g%3E %3Cpath transform=%22translate(226 96)%22 stroke=%22%23ffe08a%22 d=%22M0-12 3.5-3.6 12.5-3 5.6 2.8 7.6 11.6 0 7 -7.6 11.6 -5.6 2.8 -12.5-3 -3.5-3.6Z%22/%3E %3Cg transform=%22translate(78 120) rotate(-8)%22 stroke=%22%23c7b3ff%22%3E%3Cpath d=%22M0 0h44v8a5 5 0 0 0 0 10v8H0v-8a5 5 0 0 0 0-10Z%22/%3E%3Cpath d=%22M30 0v26%22 stroke-dasharray=%223 3%22/%3E%3C/g%3E %3Cpath transform=%22translate(186 172)%22 stroke=%22%23ffb38a%22 d=%22M0 14C-14 4-14-6-8-8c3-1 6 1 8 4 2-3 5-5 8-4 6 2 6 12-8 22Z%22/%3E %3Cg transform=%22translate(26 196)%22 stroke=%22%238fc4ff%22%3E%3Cpath d=%22M0 14a8 8 0 0 1 4-14 11 11 0 0 1 20 2 7 7 0 0 1 2 12Z%22/%3E%3C/g%3E %3Cg transform=%22translate(120 214) rotate(10)%22 stroke=%22%238fe0b4%22%3E%3Cpath d=%22M0 0l7 16 7-15ZM16 2l6 15 8-14ZM32 3l5 15 9-13Z%22/%3E%3Cpath d=%22M-4 0c20 5 36 5 54 2%22/%3E%3C/g%3E %3Ccircle cx=%22236%22 cy=%22226%22 r=%224%22 stroke=%22%238fe0b4%22/%3E%3Ccircle cx=%22100%22 cy=%2258%22 r=%223%22 stroke=%22%23ffe08a%22/%3E%3Ccircle cx=%2258%22 cy=%22160%22 r=%222.6%22 stroke=%22%23ffb38a%22/%3E%3Ccircle cx=%22214%22 cy=%2230%22 r=%222.6%22 stroke=%22%23c7b3ff%22/%3E %3Cpath transform=%22translate(150 120)%22 stroke=%22%238fe0b4%22 d=%22M0 6c6-8 14-8 20 0M4 2v-4M16 2v-4%22/%3E %3C/g%3E%3C/svg%3E"); --edge: rgba(0, 0, 0, .45); --tile: rgba(255, 255, 255, .07); --paper: #10152e; --stone: #1d2450; --glass: rgba(21, 27, 59, .92); }

/* type: Baloo 2 for titles and big numbers, the system font for reading */
.fun .sheet__title, .fun .hcard__t, .fun .sec, .fun .sheet__body h2, .fun .sheet__body h3, .fun .prof__name, .fun .w-bar b, .fun .pc-h, .fun .ph-h, .fun .hello, .fun .jl, .fun .alb-head b, .fun .prof-stats b, .fun .big-mins, .fun .year-chip { font-family: var(--play); }
/* readability: the playful font is for titles only; buttons, chips, labels and body text use the clear system font */
.fun { --ink-soft: #3f3a33; }
@media (prefers-color-scheme: dark) { :root.fun:not([data-theme="light"]) { --ink-soft: #d9d4ca; } }
:root.fun[data-theme="dark"] { --ink-soft: #d9d4ca; }
.fun .soft, .fun small { color: var(--ink-soft); }
.fun .sheet__title { font-weight: 800; letter-spacing: -.01em; line-height: 1.05; }
.fun .hcard__t, .fun .sec, .fun .pc-h, .fun .ph-h, .fun .sheet__body h3 { font-weight: 800; letter-spacing: 0; }
.fun .big-mins { font-weight: 700; }
.fun .btn, .fun .act, .fun .chip { font-weight: 650; }

/* the panel: warm cream with sticker-book doodles, solid at every height so colors stay crisp */
.fun .sheet { background: linear-gradient(to bottom, color-mix(in srgb, var(--cream) 0%, transparent) 0, color-mix(in srgb, var(--cream) 0%, transparent) 58px, var(--cream) 132px), var(--doodle) 0 0 / 260px 260px repeat, var(--cream) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 -2px 0 rgba(255, 255, 255, .6) inset, 0 -10px 40px rgba(60, 30, 10, .16) !important; }
@media (max-width: 899px) { .fun .sheet:not([data-snap="full"]) { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7) inset, 0 12px 40px rgba(60, 30, 10, .22) !important; } }
.fun .sheet[data-snap="hidden"] { background: transparent !important; box-shadow: none !important; }
.fun .sheet__handle i { background: color-mix(in srgb, var(--orange) 45%, transparent); width: 44px; height: 6px; }
.fun .sheet.scrolled .sheet__head { background: var(--cream); }

/* chunky, pressable buttons: a solid bottom edge that squishes down when tapped */
.fun .btn, .fun .act, .fun .psearch, .fun .psearch-mic, .fun .w-done, .fun .prof__edit, .fun .w-editlink, .fun .peek__act, .fun .back, .fun .chip, .fun .jump a, .fun .jump button, .fun .hmore-btn { transition: transform .12s ease, box-shadow .12s ease, background .2s; }
.fun .btn { border-radius: 16px; background: var(--orange); color: var(--on-orange, #fff); box-shadow: 0 4px 0 color-mix(in srgb, var(--orange), #000 32%); border: 0; }
.fun .btn--quiet { background: var(--tile); color: var(--ink); box-shadow: 0 4px 0 var(--edge), inset 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent); }
.fun .btn:active, .fun .act:active, .fun .psearch:active, .fun .psearch-mic:active, .fun .w-done:active, .fun .prof__edit:active, .fun .w-editlink:active, .fun .peek__act:active, .fun .chip:active, .fun .hmore-btn:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.fun .btn:disabled { filter: grayscale(.6); opacity: .6; }
.fun .act { border-radius: 18px; background: var(--tile); color: var(--orange); box-shadow: 0 4px 0 var(--edge), inset 0 0 0 2px color-mix(in srgb, var(--ink) 6%, transparent); }
.fun .act--go { background: var(--orange); color: var(--on-orange, #fff); box-shadow: 0 4px 0 color-mix(in srgb, var(--orange), #000 32%); }
.fun .psearch { background: var(--tile); border-radius: 18px; box-shadow: 0 4px 0 var(--edge), inset 0 0 0 2px color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft); font-weight: 600; font-size: 1.05rem; }
.fun .psearch svg { color: var(--orange); }
.fun .psearch-mic { background: var(--orange); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--orange), #000 32%); }
.fun .chip, .fun .jump a, .fun .jump button { background: var(--tile); border-radius: 999px; box-shadow: 0 3px 0 var(--edge), inset 0 0 0 2px color-mix(in srgb, var(--ink) 6%, transparent); }
.fun .chip[aria-pressed="true"], .fun .chip.is-on, .fun .ctabs .chip.is-on, .fun .jump button.is-on { background: var(--ink); color: var(--paper); box-shadow: 0 3px 0 #000; }
.fun .back { background: var(--tile); box-shadow: 0 3px 0 var(--edge); }
.fun .prof__edit, .fun .w-editlink { background: var(--tile); box-shadow: 0 4px 0 var(--edge); }
.fun .w-done { box-shadow: 0 4px 0 color-mix(in srgb, var(--orange), #000 32%); }
.fun .hmore-btn { border-radius: 16px; background: var(--tile); box-shadow: 0 4px 0 var(--edge); font-weight: 650; }

/* widgets: each one its own soft color, chunky corners and a little bottom edge */
.fun .hcard, .fun .w { border-radius: var(--card-r); background: var(--wt, #fff); box-shadow: 0 4px 0 color-mix(in srgb, var(--wt, #fff), #6a3a14 16%); }
.fun .hcard--today { --wt: #ffffff; }
.fun .w[data-w="habit"] { --wt: #fff0cf; } .fun .w[data-w="fun"] { --wt: #ffe2ee; } .fun .w[data-w="alerts"] { --wt: #ffecd6; } .fun .w[data-w="commute"] { --wt: #ffe3d6; }
.fun .w[data-w="saved"] { --wt: #fff4c2; } .fun .w[data-w="near"] { --wt: #dfeeff; } .fun .w[data-w="play"] { --wt: #ece2ff; } .fun .w[data-w="quiz"] { --wt: #fff1bd; }
.fun .w[data-w="try"] { --wt: #d9f6ea; } .fun .w[data-w="recent"] { --wt: #e9e6f8; } .fun .w[data-w="today"] { --wt: #e1f1ff; } .fun .w[data-w="tools"] { --wt: #e6f5df; } .fun .hcard--heard { --wt: #e8f7f4; }
.fun .hcard .tile, .fun .hcard .wx, .fun .hcard .fact, .fun .hcard .stat, .fun .hcard .st, .fun .hcard .pl-big, .fun .hcard .pl-sotd { background: var(--tile); border-radius: 18px; box-shadow: 0 3px 0 rgba(90, 50, 20, .1); }
.fun .ph-group, .fun .sgroup, .fun .pc-group, .fun .kv, .fun .paybox, .fun .prof-stats { background: var(--tile); border-radius: 22px; box-shadow: 0 4px 0 var(--edge), inset 0 0 0 2px color-mix(in srgb, var(--ink) 5%, transparent); }
@media (prefers-color-scheme: dark) { :root.fun:not([data-theme="light"]) .hcard, :root.fun:not([data-theme="light"]) .w { background: color-mix(in srgb, var(--wt, #fff) 16%, #1b2250); box-shadow: 0 4px 0 #0a0d22; } }
:root.fun[data-theme="dark"] .hcard, :root.fun[data-theme="dark"] .w { background: color-mix(in srgb, var(--wt, #fff) 16%, #1b2250); box-shadow: 0 4px 0 #0a0d22; }
.fun .wstack { gap: 16px; }
.fun .hcard__t { font-size: 1.3rem; }
.fun .tile__ic, .fun .srow__ic, .fun .ph-ic, .fun .sec__ic { box-shadow: 0 3px 0 color-mix(in srgb, var(--tc, #888), #000 30%); }
.fun .sticky, .fun .jump, .fun .ctabs { background: var(--cream); }

/* map chrome */
.fun .map-cap, .fun .year-chip, .fun .top .ticker { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 4px 0 var(--edge), 0 8px 24px rgba(60, 30, 10, .16); }
.fun .year-chip { font-weight: 800; }
.fun .map-cap .icon { color: var(--ink); }

/* the tab bar: solid, chunky, with a rail along the top for the little rider */
.fun .tabs { background: var(--tile) !important; background-color: #fff !important; box-shadow: 0 5px 0 var(--edge), 0 10px 30px rgba(60, 30, 10, .18) !important; border-top: 0; overflow: visible; }
@media (prefers-color-scheme: dark) { :root.fun:not([data-theme="light"]) .tabs { background-color: #232b5c !important; box-shadow: 0 5px 0 #0a0d22, 0 10px 30px rgba(0, 0, 0, .4) !important; } }
:root.fun[data-theme="dark"] .tabs { background-color: #232b5c !important; box-shadow: 0 5px 0 #0a0d22, 0 10px 30px rgba(0, 0, 0, .4) !important; }
.fun .tabs button span { font-weight: 650; }
.fun .tabs button[aria-current] { color: var(--orange); }
.fun .tabs button[aria-current] svg { opacity: 0; }
.fun .tabs__lens { background: color-mix(in srgb, var(--orange) 14%, transparent) !important; box-shadow: none !important; }
.tabs__rail { display: none; }
.fun .tabs__rail { display: block; position: absolute; left: 22px; right: 22px; top: 1px; height: 6px; pointer-events: none; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 18%, transparent) 0 6px, transparent 6px 12px); border-radius: 3px; opacity: .55; }
.tabs__buddy { display: none; }
.fun .tabs__buddy { display: block; position: absolute; z-index: 3; left: 0; top: -21px; width: 44px; height: 55px; margin-left: -22px; pointer-events: none; transition: transform .55s var(--bounce); will-change: transform; }
.fun .tabs__buddy svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .12)); }
.fun .tabs__buddy.is-riding svg { animation: ride .55s ease-in-out; }
.fun .tabs__buddy.is-riding.go-left svg { animation-name: rideL; }
@keyframes ride { 0% { transform: rotate(0); } 25% { transform: rotate(-12deg) translateY(-3px); } 60% { transform: rotate(8deg); } 100% { transform: none; } }
@keyframes rideL { 0% { transform: rotate(0); } 25% { transform: rotate(12deg) translateY(-3px); } 60% { transform: rotate(-8deg); } 100% { transform: none; } }

/* ======================= the peeking mascot ======================= */
.peek { display: none; }
@media (max-width: 899px) {
  .fun .peek { display: block; position: absolute; z-index: 4; right: 26px; top: -60px; width: 64px; height: 60px; clip-path: inset(-400px -400px 0 -400px); pointer-events: none; }
  .fun .sheet[data-snap="full"] .peek, .fun .sheet[data-snap="hidden"] .peek, .touring .peek { display: none; }
}
.peek__m { position: absolute; left: 0; bottom: -26px; width: 64px; height: 78px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; animation: bob 2.8s ease-in-out 3; transform-origin: 50% 100%; }
.peek__m svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .1)); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.peek .m-lids { transform-origin: 32px 17px; transform: scaleY(0); transition: transform .07s; } .peek.blink .m-lids { transform: scaleY(1); }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
.peek__z { position: absolute; right: -6px; top: 4px; font: 800 16px var(--play, sans-serif); font-style: normal; color: #6b7bd6; opacity: 0; }
.peek.is-sleep .peek__z { animation: zz 2.4s ease-in-out 5; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -16px) scale(1.2); } }
.peek__m.r-cheer { animation: cheer .9s var(--bounce, ease) 2; }
.peek__m.r-hop { animation: hop .7s var(--bounce, ease); }
.peek__m.r-spin { animation: spin .8s ease; }
.peek__m.r-wiggle { animation: wiggle .7s ease; }
.peek__m.r-worried { animation: shiver .5s ease 3; }
.peek__m.r-wow, .peek__m.r-yawn { animation: wow .9s ease; }
@keyframes cheer { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-26px) rotate(-6deg); } 70% { transform: translateY(-8px) rotate(4deg); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-18px); } }
@keyframes spin { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-20px) rotate(180deg); } 100% { transform: translateY(0) rotate(360deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes shiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes wow { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12, .92) translateY(-6px); } }
.peek__say { position: absolute; right: 70px; bottom: 6px; width: max-content; max-width: min(250px, calc(100vw - 130px)); padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: #fff; color: #121212; box-shadow: 0 4px 0 rgba(90, 50, 20, .16), 0 10px 24px rgba(60, 30, 10, .18); pointer-events: auto; animation: sayIn .35s var(--bounce, ease) both; font-size: .92rem; line-height: 1.35; }
.peek__say.is-out { animation: sayOut .2s ease both; }
.peek__say p { margin: 0; }
@keyframes sayIn { from { opacity: 0; transform: translateY(8px) scale(.85); transform-origin: bottom right; } }
@keyframes sayOut { to { opacity: 0; transform: translateY(6px) scale(.9); } }
.peek__acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.peek__acts:empty { display: none; }
.peek__act { border: 0; padding: 6px 12px; border-radius: 999px; background: var(--orange); color: #fff; font: 700 .8rem var(--play, sans-serif); box-shadow: 0 3px 0 color-mix(in srgb, var(--orange), #000 32%); cursor: pointer; }
.fun .bot-fab { display: none; }
@media (min-width: 900px) { .fun .bot-fab { display: grid; } }

/* ======================= stickers ======================= */
.stk { display: inline-grid; place-items: center; width: 64px; height: 64px; flex: none; filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 3px 3px rgba(0, 0, 0, .18)); }
.stk svg { width: 100%; height: 100%; }
.stk--sm { width: 38px; height: 38px; } .stk--lg { width: 110px; height: 110px; } .stk--xl { width: 170px; height: 170px; }
.stk.is-locked, .alb.is-locked .stk { filter: brightness(0) opacity(.16); }
.alb-head { display: flex; align-items: baseline; gap: 8px; margin: 4px 4px 14px; }
.alb-head b { font: 800 1.8rem/1 var(--play, var(--display)); }
.barya { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #8a5a0b; }
.coin { width: 18px; height: 18px; }
.alb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.alb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border: 0; border-radius: 20px; background: var(--fill); color: var(--ink); font: inherit; cursor: pointer; }
.fun .alb { background: var(--tile); box-shadow: 0 4px 0 var(--edge); }
.alb b { font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.15; }
.alb.is-locked b { color: var(--ink-soft); }
.alb__n { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: .72rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--orange); color: #fff; }
.trade { margin-top: 24px; }
.gift-code { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.gift-code b { font: 800 1.5rem var(--play, var(--display)); letter-spacing: .06em; }
.stk-sheet, .stk-pop, .mile, .calmfin, .story-pop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(20, 12, 4, .38); opacity: 0; transition: opacity .25s; }
.stk-sheet.is-on, .stk-pop.is-on, .mile.is-on, .calmfin.is-on, .story-pop.is-on { opacity: 1; }
.stk-sheet__card, .stk-pop__card, .story-pop__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(340px, 100%); padding: 24px 20px 20px; border-radius: 30px; background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 6px 0 rgba(0, 0, 0, .12), 0 30px 80px rgba(0, 0, 0, .3); transform: scale(.8); transition: transform .45s var(--bounce, ease); }
.fun .stk-sheet__card, .fun .stk-pop__card, .fun .story-pop__card { background: var(--cream); }
.is-on > .stk-sheet__card, .is-on > .stk-pop__card, .is-on > .story-pop__card { transform: none; }
.stk-sheet__card b, .stk-pop__card b { font: 800 1.4rem var(--play, var(--display)); }
.stk-sheet__card small, .stk-pop__card small { color: var(--ink-soft); }
.stk-sheet__card .btn { width: 100%; }
.stk-pop { background: rgba(20, 12, 4, .2); }
.stk-pop__card .stk { animation: slap .55s var(--bounce, ease) both; }
@keyframes slap { from { transform: scale(1.8) rotate(-18deg); opacity: 0; } 60% { transform: scale(.94) rotate(4deg); opacity: 1; } to { transform: rotate(-3deg); } }
.confetti { position: fixed; inset: 0; z-index: 95; width: 100vw; height: 100vh; pointer-events: none; }

/* milestones: jeepney lettering, rays and the jingle */
.mile { background: rgba(20, 12, 4, .5); }
.mile__card { position: relative; overflow: hidden; width: min(380px, 100%); padding: 28px 22px 22px; border-radius: 34px; text-align: center; color: #fff; background: linear-gradient(170deg, #ffd23f, #ff8a3d 55%, #e2312b); box-shadow: 0 8px 0 #9a2412, 0 30px 80px rgba(0, 0, 0, .4); transform: scale(.7) rotate(-4deg); transition: transform .55s var(--bounce, ease); }
.mile.is-on .mile__card { transform: none; }
.mile__rays { position: absolute; inset: -60%; background: repeating-conic-gradient(rgba(255, 255, 255, .16) 0 10deg, transparent 10deg 20deg); animation: rays 14s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.mile__m { position: relative; display: block; width: 130px; height: 158px; margin: 0 auto -6px; animation: cheer 1s var(--bounce, ease) 2; }
.mile__m svg { width: 100%; height: 100%; overflow: visible; }
.mile__stk { position: absolute; right: 18px; top: 70px; transform: rotate(10deg); }
.jl { position: relative; margin: 6px 0 4px; font: 800 2.2rem/1.05 var(--play, var(--display)); color: #ffd23f; -webkit-text-stroke: 7px #121212; paint-order: stroke fill; text-shadow: 4px 5px 0 rgba(0, 0, 0, .25); letter-spacing: .01em; }
.mile__card p { position: relative; margin: 0 0 16px; font-weight: 600; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.mile__btns { position: relative; display: flex; gap: 10px; }
.mile__btns .btn { flex: 1; }
.mile__btns .btn:first-child { background: #121212; color: #fff; box-shadow: 0 4px 0 #000; }
.mile__btns .btn--quiet { background: #fff; color: #121212; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.mile--calm .mile__card { background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }
.mile--calm .mile__rays { display: none; }
.mile--calm .jl { color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; font-family: var(--display); }
.mile--calm .mile__card p { color: var(--ink-soft); text-shadow: none; }

/* a calm finish after a rough trip */
.calmfin { align-items: end; background: transparent; pointer-events: none; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px); }
.calmfin__card { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(340px, 100%); padding: 18px 18px 16px; border-radius: 28px; background: #eef4ff; color: #1b2550; text-align: center; box-shadow: 0 4px 0 rgba(27, 37, 80, .15), 0 20px 50px rgba(27, 37, 80, .25); transform: translateY(30px) scale(.96); opacity: 0; transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .6s; }
.calmfin.is-on .calmfin__card { transform: none; opacity: 1; }
.calmfin__m { width: 64px; height: 78px; } .calmfin__m svg { width: 100%; height: 100%; }
.calmfin__card small { color: #4a5584; }

/* station stories */
.story-pop__m { width: 80px; height: 96px; margin-top: -60px; } .story-pop__m svg { width: 100%; height: 100%; overflow: visible; }
.story-pop__card h3 { margin: 0; font: 800 1.4rem var(--play, var(--display)); }
.story-pop__card p { margin: 0; text-align: left; line-height: 1.5; }
.story-pop__card small { font-weight: 700; color: var(--orange); text-transform: none; }
.story-pop__card .btn { width: 100%; margin-top: 6px; }

/* ======================= Home: today's fun ======================= */
.fun-list { display: flex; flex-direction: column; gap: 8px; }
.fun-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 18px; background: var(--tile, var(--fill)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 rgba(90, 50, 20, .1); }
.fun-row--still { cursor: default; }
.fun-row b { display: block; font-weight: 700; }
.fun-row small { display: block; color: var(--ink-soft); font-size: var(--t-foot, .78rem); margin-top: 1px; }
.fun-slot:empty { display: none; }
.fun-chest { flex: none; width: 44px; height: 38px; } .fun-chest svg { width: 100%; height: 100%; }
.fun-chest.is-ready { animation: wiggle 1.2s ease-in-out 4; }
.fun-dots { display: flex; gap: 3px; flex: none; }
.fun-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.fun-dots i.on { background: var(--orange); }
.fun-car { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #121212; color: #ffd23f; font: 800 1.2rem var(--play, var(--display)); }
.fun-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.w-snooze { position: absolute; z-index: 2; top: 14px; right: 14px; border: 0; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-soft); font: 600 .72rem var(--text); cursor: pointer; }
.w[data-size="s"] .w-snooze { display: none; }

/* ======================= other pages ======================= */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.pack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 12px; border: 3px solid var(--pc); border-radius: 26px; background: #fff; color: #121212; cursor: pointer; box-shadow: 0 4px 0 color-mix(in srgb, var(--pc), #000 30%); }
.pack svg { width: 76px; height: 82px; }
.pack b { font: 800 1.05rem/1.1 var(--play, var(--display)); color: var(--pc); -webkit-text-stroke: .3px rgba(0, 0, 0, .2); }
.pack:active { transform: translateY(4px); box-shadow: none; }
.postcard { position: relative; margin: 6px 0 16px; padding: 24px 20px 22px; border-radius: 22px; background: #fffaf0; color: #121212; border: 3px dashed #e2312b; box-shadow: 0 6px 0 rgba(90, 50, 20, .12); }
.postcard h2 { margin: 6px 0 10px; font: 800 1.8rem/1.05 var(--play, var(--display)); max-width: 70%; }
.postcard p { line-height: 1.5; }
.postcard small { color: #8a5a2b; font-weight: 700; }
.postcard__stamp { position: absolute; right: 16px; top: 16px; width: 70px; height: 70px; padding: 6px; background: #fff; border: 3px dotted #c9a46a; transform: rotate(6deg); }
.postcard__sig { font: 700 1.1rem var(--play, var(--display)); }
.postcard__m { position: absolute; right: 12px; bottom: 6px; width: 74px; height: 86px; } .postcard__m svg { width: 100%; height: 100%; }
.myst { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.myst__clues { width: 100%; margin: 0; padding: 0 0 0 22px; text-align: left; display: grid; gap: 8px; }
.myst__clues li { padding: 10px 12px; border-radius: 14px; background: var(--fill); font-weight: 600; }
.myst__clues li.is-locked { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.myst__ok { font: 800 1.3rem var(--play, var(--display)); color: #1c8a52; }
.myst form { width: 100%; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px; }
.badge-city { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.badge-city svg { width: 64px; height: 64px; }
.badge-city:not(.is-on) svg { filter: grayscale(1) opacity(.28); }
.badge-city b { font-size: .76rem; font-weight: 700; line-height: 1.15; }
.shop-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: .5px solid var(--sep); }
.shop-row:first-child { border-top: 0; }
.shop-row b { display: block; } .shop-row small { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); }
.btn--sm { min-height: 36px; padding: 6px 14px; font-size: .86rem; }
.dio { display: block; width: 100%; height: auto; margin: 4px 0 8px; border-radius: 22px; box-shadow: 0 5px 0 var(--edge, rgba(0, 0, 0, .1)); }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background .2s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .25s var(--bounce, ease); }
.switch input:checked + span { background: #34c759; } .switch input:checked + span::after { transform: translateX(20px); }
.spot { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 12px 14px; border-radius: 20px; background: var(--fill); }
.fun .spot { background: var(--tile); box-shadow: 0 4px 0 var(--edge); }
.spot b { display: block; } .spot small { display: block; color: var(--ink-soft); font-size: var(--t-foot, .78rem); }
.spot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.spot-grid figure { margin: 0; } .spot-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.spot-grid figcaption { font-size: .8rem; font-weight: 600; margin-top: 4px; }
.fiesta-d { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 50px; border-radius: 12px; background: #e2312b; color: #fff; line-height: 1; }
.fiesta-d b { font: 800 1.2rem var(--play, var(--display)); } .fiesta-d small { font-size: .62rem; text-transform: uppercase; color: #fff !important; margin: 2px 0 0; }
.buddy-card { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 10px 14px; border-radius: 22px; background: color-mix(in srgb, var(--bc) 14%, var(--paper)); box-shadow: 0 4px 0 color-mix(in srgb, var(--bc) 40%, transparent); }
.buddy-card__m { flex: none; width: 56px; height: 68px; animation: bob 2.6s ease-in-out 3; } .buddy-card__m svg { width: 100%; height: 100%; overflow: visible; }
.buddy-card small { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--bc) 70%, var(--ink)); }
.buddy-card b { display: block; font: 800 1.2rem/1.1 var(--play, var(--display)); }
.buddy-card span span, .buddy-card .grow > span { display: block; color: var(--ink-soft); font-size: .88rem; }
.hunt-tag { display: inline-block; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; background: #ffc20e; color: #5a2d0c; font-weight: 700; font-size: .84rem; }
.prof__title { display: inline-block; margin-top: 2px; padding: 3px 12px; border-radius: 999px; background: var(--orange); color: #fff; font: 700 .8rem var(--play, var(--display)); }
.srow.is-locked { opacity: .55; }
.chat-stks { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; }
.chat-stk-btn { flex: none; width: 52px; height: 56px; padding: 2px; border: 0; border-radius: 14px; background: var(--fill); cursor: pointer; }
.chat-stk-btn svg { width: 100%; height: 100%; }
.chat-stk { display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 10px 8px; border-radius: 20px; border: 3px solid var(--pc); background: #fff; color: var(--pc); animation: slap .5s var(--bounce, ease) both; }
.chat-stk svg { width: 64px; height: 70px; }
.chat-stk b { font: 800 1rem/1 var(--play, var(--display)); }

/* ber months: parol lights creep in from September, brighter every month to December */
.fun.ber .sheet::before { content: ""; position: absolute; z-index: 1; left: 30px; right: 30px; top: 8px; height: 10px; pointer-events: none; border-radius: 5px; background: radial-gradient(circle at 6px 5px, #ffd23f 0 3px, transparent 4px) 0 0 / 24px 10px, radial-gradient(circle at 18px 5px, #e2312b 0 3px, transparent 4px) 0 0 / 24px 10px; opacity: .35; }
.fun.ber[data-ber="2"] .sheet::before { opacity: .5; } .fun.ber[data-ber="3"] .sheet::before { opacity: .7; } .fun.ber[data-ber="4"] .sheet::before { opacity: 1; animation: twinkle 1.6s steps(2) 8; }
@keyframes twinkle { 50% { filter: hue-rotate(60deg) brightness(1.2); } }
.fun .sheet[data-snap="hidden"]::before { display: none; }

/* bouncy everyday motion */
.fun .w { animation: popIn .5s var(--bounce) both; }
.fun .wstack > :nth-child(2) { animation-delay: .04s; } .fun .wstack > :nth-child(3) { animation-delay: .08s; } .fun .wstack > :nth-child(4) { animation-delay: .12s; }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.fun .w[data-editing] { animation: wJiggle .32s ease-in-out infinite alternate; }

/* the Calm switch, Reduce Motion and Reduce Transparency */
@media (prefers-reduced-motion: reduce) {
  .peek__m, .peek .m-lids, .peek.is-sleep .peek__z, .fun .w, .fun-chest.is-ready, .buddy-card__m, .mile__rays, .mile__m, .stk-pop__card .stk, .chat-stk, .fun.ber .sheet::before, .fun .tabs__buddy svg { animation: none !important; }
  .fun .tabs__buddy { transition: none; }
}
:root.calm .peek__m, :root.calm .peek .m-lids, :root.calm .fun .w { animation: none !important; }
/* dark cards keep their own light-on-dark chips */
.fun .night .chip, .fun .pl-flex .chip, .fun .tog-tier .chip { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.fun .w-snooze { background: rgba(255, 255, 255, .85); color: #5a3a1a; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.fun .night { border-radius: 22px; box-shadow: 0 4px 0 #0a0d22; }
/* toy-like map labels: bubbly, chunky, with a little bottom edge */
.fun .lbl--line { font-family: var(--play); }
.fun .lbl--x { font-size: 12.5px; font-weight: 700; box-shadow: 0 2px 0 rgba(90, 50, 20, .18); }
.fun .lbl--line { font-weight: 800; font-size: 13px; padding: 3px 11px 2px; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 4px 10px rgba(0, 0, 0, .2); }
.fun .lbl--buddy svg { animation: bob 1.2s ease-in-out 4; }

/* Tren-Tren peeks in from the screen edge while the panel is tucked away */
.edge-buddy { display: none; }
@media (max-width: 899px) {
  .fun body.sheet-hidden .edge-buddy, html.fun body.sheet-hidden .edge-buddy { display: block; }
  .edge-buddy { position: fixed; z-index: 9; right: 0; bottom: calc(var(--sheet-h, 90px) + 18px); width: 66px; height: 80px; padding: 0; border: 0; background: none; cursor: pointer; transform: translateX(42%) rotate(-12deg); transition: transform .45s var(--bounce, ease); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .12)); }
  .edge-buddy svg { width: 100%; height: 100%; overflow: visible; }
  .edge-buddy.is-out { transform: translateX(-8px) rotate(0); }
  .edge-buddy__say { position: absolute; right: 70px; top: 18px; padding: 6px 12px; border-radius: 14px 14px 4px 14px; background: var(--orange); color: #fff; font: 700 .85rem var(--play, sans-serif); white-space: nowrap; opacity: 0; transform: scale(.7); transition: opacity .2s, transform .3s var(--bounce, ease); pointer-events: none; }
  .edge-buddy.is-out .edge-buddy__say { opacity: 1; transform: none; }
  /* the Calm look keeps its round chat button on screen when the panel is hidden */
  html:not(.fun) body.sheet-hidden .bot-fab { opacity: 1; pointer-events: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .edge-buddy { transition: none; } }