/* VittyVerse — the one stylesheet for every app in the suite.

   Apps link it with  <link rel="stylesheet" href="../vittyverse/vittyverse.css">
   and declare who they are with  <html data-app="splitter|gymmer|shiori|mapper">.
   That attribute picks the app's accent colour and switches on its own section below.

   Rules of the house:
   - Colours, type, radii and shadows come from the tokens in section 2. Never hard-code new ones.
   - Reuse the shared components in section 3 (buttons, cards, lists, sheets, chips, tab bar, ...).
   - Anything only one app needs lives in that app's section, wrapped in :where([data-app="..."]).
     :where() adds no specificity, so app rules cascade exactly as if they were written unscoped.
   - Apps carry no <style> blocks and no static inline styles; only data-driven values
     (a progress width, a heat-map colour, a cover tint) are set from JavaScript.
*/
/* =====================================================================
   1. Fonts (self-hosted, so they also work offline)
   ===================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/inter-latin.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: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/inter-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("fonts/space-grotesk-latin.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: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("fonts/space-grotesk-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* =====================================================================
   2. Tokens
   Neutral palette, status colours and type are shared by every app.
   Each app only picks its accent: <html data-app="splitter|gymmer|shiori|mapper|chesser">.
   Dark mode follows the phone unless the user picked a theme (data-theme on <html>).
   ===================================================================== */
:root {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --fill: rgba(118, 118, 128, 0.12);   /* iOS's soft grey fill: search fields, chips, quiet buttons */
  --text: #1c1c1e;
  --muted: #8a8a8e;
  --line: rgba(60, 60, 67, 0.16);
  --accent: #1c1c1e;
  --on-accent: #1c1c1e;
  --key: #1c1c1e;
  --on-key: #ffffff;
  --display: #111113;
  --on-display: #ffffff;
  --display-muted: rgba(255, 255, 255, 0.6);
  --display-track: rgba(255, 255, 255, 0.14);
  --danger: #d93036;
  --good: #138a4a;
  --good-bg: #e2f5e9;
  --info: #2459d6;
  --info-bg: #e5edfd;
  --warn: #8a5300;
  --warn-bg: #fff2d4;
  --focus: #1c1c1e;
  --scroll: rgba(60, 60, 67, 0.22);
  --shadow: none;   /* content is flat: shadows are only for what floats */
  --shadow-float: 0 2px 6px rgba(17, 17, 19, 0.06), 0 20px 50px -16px rgba(17, 17, 19, 0.28);
  /* Liquid Glass (house rule: anything that floats over content): see "Liquid Glass" in section 3 */
  --glass: color-mix(in srgb, var(--surface) 56%, transparent);
  --glass-thick: color-mix(in srgb, var(--surface) 84%, transparent);
  --glass-blur: blur(14px) saturate(1.9) brightness(1.04);
  --glass-rim: rgba(255, 255, 255, 0.85);
  --glass-line: rgba(17, 17, 19, 0.07);
  --glass-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px var(--glass-line), 0 1px 2px rgba(17, 17, 19, 0.06), 0 12px 32px -12px rgba(17, 17, 19, 0.3);
  /* Apple's own system font (SF Pro on iPhone, iPad and Mac), as the built-in apps use; Segoe UI on Windows */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  --display-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  /* corners: one family */
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --fill: rgba(118, 118, 128, 0.24); --text: #f5f5f7; --muted: #98989f;
    --line: rgba(255, 255, 255, 0.1); --on-accent: #0b0b0c; --key: #f5f5f7; --on-key: #0b0b0c;
    --display: var(--accent); --on-display: #0b0b0c; --display-muted: rgba(11, 11, 12, 0.6); --display-track: rgba(11, 11, 12, 0.15);
    --danger: #ff7b72; --good: #4fd68a; --good-bg: #11291b; --info: #7fa8ff; --info-bg: #142240;
    --warn: #ffcc66; --warn-bg: #2e2410; --focus: var(--accent); --scroll: rgba(255, 255, 255, 0.2); --shadow: none;
    --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 60px -18px rgba(0, 0, 0, 0.8);
    --glass: color-mix(in srgb, var(--surface) 52%, transparent); --glass-thick: color-mix(in srgb, var(--surface) 82%, transparent);
    --glass-blur: blur(14px) saturate(1.6) brightness(0.92); --glass-rim: rgba(255, 255, 255, 0.16); --glass-line: rgba(255, 255, 255, 0.06);
    --glass-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px var(--glass-line), 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px -12px rgba(0, 0, 0, 0.75);
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --fill: rgba(118, 118, 128, 0.24); --text: #f5f5f7; --muted: #98989f;
  --line: rgba(255, 255, 255, 0.1); --on-accent: #0b0b0c; --key: #f5f5f7; --on-key: #0b0b0c;
  --display: var(--accent); --on-display: #0b0b0c; --display-muted: rgba(11, 11, 12, 0.6); --display-track: rgba(11, 11, 12, 0.15);
  --danger: #ff7b72; --good: #4fd68a; --good-bg: #11291b; --info: #7fa8ff; --info-bg: #142240;
  --warn: #ffcc66; --warn-bg: #2e2410; --focus: var(--accent); --scroll: rgba(255, 255, 255, 0.2); --shadow: none;
  --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 60px -18px rgba(0, 0, 0, 0.8);
  --glass: color-mix(in srgb, var(--surface) 52%, transparent); --glass-thick: color-mix(in srgb, var(--surface) 82%, transparent);
  --glass-blur: blur(14px) saturate(1.6) brightness(0.92); --glass-rim: rgba(255, 255, 255, 0.16); --glass-line: rgba(255, 255, 255, 0.06);
  --glass-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px var(--glass-line), 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px -12px rgba(0, 0, 0, 0.75);
}
/* The glass style (Settings > Appearance, set on <html> as data-glass by vittyverse.js), the three kinds on
   liquid-glass.ybouane.com: Frosted is the default above; Regular is clear glass, barely blurred; Dark is smoked glass,
   with light text on it in either theme. */
:root[data-glass="regular"] {
  --glass: color-mix(in srgb, var(--surface) 22%, transparent); --glass-thick: color-mix(in srgb, var(--surface) 60%, transparent);
  --glass-blur: blur(3px) saturate(1.8);
}
:root[data-glass="dark"] {
  --glass: rgba(16, 16, 18, 0.56); --glass-thick: rgba(16, 16, 18, 0.8);
  --glass-blur: blur(14px) saturate(1.5) brightness(0.85); --glass-rim: rgba(255, 255, 255, 0.2); --glass-line: rgba(255, 255, 255, 0.08);
}
:root[data-glass="dark"] :is(.tabbar, .toast, .glass, [data-app="shiori"] .r-bar, [data-app="shiori"] .r-pick, [data-app="mapper"] .map-search,
  [data-app="mapper"] .map-top .chip:not(.on), [data-app="mapper"] .map-btn, [data-app="mapper"] .map-count, [data-app="watcher"] .w-play) {
  --text: #f5f5f7; --muted: rgba(235, 235, 245, 0.62); --key: #f5f5f7; --on-key: #0b0b0c; --fill: rgba(118, 118, 128, 0.3); color: var(--text);
}
/* Settings > Appearance: the theme, then the glass */
.vv-appearance { display: grid; gap: 14px; }

/* ---- module accents: one colour per app, usable anywhere (the home page shows them all) ---- */
/* the opening splash: each app's icon, full screen (the mark on the icon's own colour), with its name and line */
.vv-splash { position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 6vh; background: var(--splash, #111); color: #111113; text-align: center; transition: opacity .42s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.vv-splash img { width: 112px; height: 112px; object-fit: contain; animation: vv-splash-in .6s cubic-bezier(.2,.9,.25,1.15) both; }
.vv-splash b { margin-top: 26px; font: 700 34px/1.1 var(--display-font); letter-spacing: -.02em; animation: vv-splash-in .6s .08s cubic-bezier(.2,.9,.25,1) both; }
.vv-splash b span { opacity: .55; }
.vv-splash small { margin-top: 8px; font: 600 17px/1.3 var(--font); animation: vv-splash-in .6s .16s cubic-bezier(.2,.9,.25,1) both; }
/* every splash signs off at its foot, above the home indicator: "Made with ♥ by VITTYVERSE" (drawn here, so each app gets it) */
.vv-splash::before, .vv-splash::after { position: absolute; left: 0; right: 0; text-align: center; animation: vv-splash-in .6s .24s cubic-bezier(.2,.9,.25,1) both; }
/* placed from the top of the visible screen (100svh), not from the splash's bottom: in an iPhone home-screen app the
   splash runs on under the home indicator, past what's visible */
.vv-splash::before { content: "Made with \2665\FE0E  by"; top: calc(100svh - env(safe-area-inset-bottom) - 82px); font: 500 15px/1.2 var(--font); opacity: .72; }
.vv-splash::after { content: ""; top: calc(100svh - env(safe-area-inset-bottom) - 56px); height: 26px; background: center / contain no-repeat; }
/* "Made with ¶5 by VittyVerse" (VV.madeWith()): the signature at the end of every app's Settings, above the credits */
.vv-made { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 32px 0 14px; text-align: center; color: var(--text); }
.vv-made > span { font-size: 13px; font-weight: 500; color: var(--muted); }
.vv-made > svg { height: 28px; width: auto; }
.vv-made .vv-coffee { margin-top: 8px; }
/* the logo itself, written by tools/make_logo.py */
/* logo:begin */
.vv-splash::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.0 8.3 452.7 113.5' fill='%23111113' role='img' aria-label='VittyVerse'%3E%3Cpath d='M28.125 98.72500000000001Q25.700000000000003 98.72500000000001 23.975 97.82500000000002Q22.25 96.92500000000001 21.3 95.025L3.325 59.12500000000001Q1.5 55.475 2.2375 53.125Q2.975 50.775000000000006 6.75 48.95Q10.575000000000001 47.075 12.837500000000002 47.6625Q15.100000000000001 48.25 16.900000000000002 52.35L28.125 78.42500000000001L39.275000000000006 52.675000000000004Q41.150000000000006 48.425000000000004 43.3875 47.7Q45.625 46.975 49.625 48.975Q53.675000000000004 50.95 54.1375 53.462500000000006Q54.6 55.975 52.900000000000006 59.325L34.975 95.0Q34.050000000000004 96.875 32.35 97.80000000000001Q30.650000000000002 98.72500000000001 28.125 98.72500000000001Z'/%3E%3Cpath d='M66.575 98.35000000000001Q62.95 98.35000000000001 61.362500000000004 97.26250000000002Q59.775000000000006 96.17500000000001 59.45 94.4375Q59.12500000000001 92.7 59.12500000000001 90.775V55.875Q59.12500000000001 53.95 59.48750000000001 52.25Q59.85000000000001 50.550000000000004 61.43750000000001 49.47500000000001Q63.025000000000006 48.400000000000006 66.67500000000001 48.400000000000006Q70.325 48.400000000000006 71.86250000000001 49.487500000000004Q73.4 50.575 73.7625 52.3125Q74.125 54.050000000000004 74.125 56.075V90.875Q74.125 92.80000000000001 73.7625 94.53750000000001Q73.4 96.275 71.85000000000001 97.3125Q70.30000000000001 98.35000000000001 66.575 98.35000000000001Z'/%3E%3Cpath d='M106.125 98.35000000000001Q101.025 98.35000000000001 97.3375 97.25Q93.65 96.15 91.2625 93.85000000000001Q88.875 91.55000000000001 87.7375 87.98750000000001Q86.6 84.42500000000001 86.6 79.55000000000001V38.95Q86.6 36.925000000000004 86.9625 35.300000000000004Q87.325 33.675000000000004 88.9 32.66250000000001Q90.475 31.650000000000006 94.1 31.650000000000006Q97.675 31.650000000000006 99.26249999999999 32.72500000000001Q100.85 33.800000000000004 101.225 35.525000000000006Q101.6 37.25 101.6 39.175000000000004V78.92500000000001Q101.6 80.525 101.85 81.55000000000001Q102.1 82.575 102.6125 83.1Q103.125 83.625 104.0 83.8375Q104.875 84.05000000000001 106.175 84.05000000000001Q108.425 84.05000000000001 110.125 84.41250000000001Q111.82499999999999 84.775 112.76249999999999 86.2Q113.69999999999999 87.625 113.69999999999999 90.9Q113.69999999999999 94.55000000000001 112.57499999999999 96.125Q111.44999999999999 97.7 109.71249999999999 98.025Q107.975 98.35000000000001 106.125 98.35000000000001ZM83.475 49.1 94.475 49.150000000000006 108.3 48.725Q110.225 48.725 111.925 49.087500000000006Q113.625 49.45 114.7125 51.025000000000006Q115.8 52.6 115.8 56.300000000000004Q115.8 59.725 114.725 61.3125Q113.65 62.900000000000006 111.9625 63.337500000000006Q110.275 63.775000000000006 108.275 63.775000000000006L95.225 63.50000000000001L83.125 63.550000000000004Q80.175 63.400000000000006 79.05 61.737500000000004Q77.925 60.075 77.925 56.225Q77.925 52.625 79.3 50.8625Q80.675 49.1 83.475 49.1Z'/%3E%3Cpath d='M146.22500000000002 98.35000000000001Q141.125 98.35000000000001 137.4375 97.25Q133.75 96.15 131.3625 93.85000000000001Q128.975 91.55000000000001 127.8375 87.98750000000001Q126.7 84.42500000000001 126.7 79.55000000000001V38.95Q126.7 36.925000000000004 127.0625 35.300000000000004Q127.42500000000001 33.675000000000004 129.0 32.66250000000001Q130.57500000000002 31.650000000000006 134.20000000000002 31.650000000000006Q137.775 31.650000000000006 139.3625 32.72500000000001Q140.95000000000002 33.800000000000004 141.32500000000002 35.525000000000006Q141.70000000000002 37.25 141.70000000000002 39.175000000000004V78.92500000000001Q141.70000000000002 80.525 141.95000000000002 81.55000000000001Q142.20000000000002 82.575 142.71250000000003 83.1Q143.22500000000002 83.625 144.10000000000002 83.8375Q144.97500000000002 84.05000000000001 146.275 84.05000000000001Q148.525 84.05000000000001 150.22500000000002 84.41250000000001Q151.925 84.775 152.8625 86.2Q153.8 87.625 153.8 90.9Q153.8 94.55000000000001 152.675 96.125Q151.55 97.7 149.8125 98.025Q148.07500000000002 98.35000000000001 146.22500000000002 98.35000000000001ZM123.575 49.1 134.57500000000002 49.150000000000006 148.4 48.725Q150.32500000000002 48.725 152.02500000000003 49.087500000000006Q153.72500000000002 49.45 154.8125 51.025000000000006Q155.9 52.6 155.9 56.300000000000004Q155.9 59.725 154.825 61.3125Q153.75 62.900000000000006 152.0625 63.337500000000006Q150.375 63.775000000000006 148.375 63.775000000000006L135.32500000000002 63.50000000000001L123.22500000000001 63.550000000000004Q120.275 63.400000000000006 119.15 61.737500000000004Q118.025 60.075 118.025 56.225Q118.025 52.625 119.4 50.8625Q120.775 49.1 123.575 49.1Z'/%3E%3Cpath d='M173.65 118.47500000000001Q169.6 116.67500000000001 168.9375 114.47500000000001Q168.275 112.275 170.025 108.65L195.07500000000002 52.550000000000004Q196.82500000000002 48.625 198.83750000000003 47.85Q200.85000000000002 47.075 204.97500000000002 48.75Q208.95000000000002 50.575 209.63750000000002 52.675000000000004Q210.32500000000002 54.775000000000006 208.72500000000002 58.300000000000004L183.5 114.825Q181.82500000000002 118.75 179.8 119.5125Q177.775 120.275 173.65 118.47500000000001ZM182.35000000000002 95.2 158.875 59.45Q156.70000000000002 56.1 157.125 53.8875Q157.55 51.675000000000004 161.1 49.45Q164.975 47.050000000000004 167.125 47.587500000000006Q169.275 48.125 171.525 51.550000000000004L188.8 78.05000000000001Z'/%3E%3Cpath d='M238.425 98.72500000000001Q236.0 98.72500000000001 234.275 97.82500000000002Q232.55 96.92500000000001 231.60000000000002 95.025L213.625 59.12500000000001Q211.8 55.475 212.53750000000002 53.125Q213.275 50.775000000000006 217.05 48.95Q220.875 47.075 223.1375 47.6625Q225.4 48.25 227.20000000000002 52.35L238.425 78.42500000000001L249.57500000000002 52.675000000000004Q251.45000000000002 48.425000000000004 253.6875 47.7Q255.925 46.975 259.925 48.975Q263.975 50.95 264.4375 53.462500000000006Q264.90000000000003 55.975 263.20000000000005 59.325L245.275 95.0Q244.35000000000002 96.875 242.65000000000003 97.80000000000001Q240.95000000000002 98.72500000000001 238.425 98.72500000000001Z' fill-opacity='0.5'/%3E%3Cpath d='M291.59999999999997 99.22500000000001Q284.59999999999997 99.22500000000001 279.5625 96.9375Q274.525 94.65 271.3125 90.86250000000001Q268.09999999999997 87.075 266.525 82.5Q264.95 77.92500000000001 264.95 73.325Q264.95 65.775 268.35 59.97500000000001Q271.75 54.175000000000004 277.775 50.862500000000004Q283.8 47.550000000000004 291.575 47.550000000000004Q297.375 47.550000000000004 301.625 49.400000000000006Q305.875 51.25 308.6375 54.175Q311.4 57.1 312.7625 60.5Q314.125 63.900000000000006 314.125 66.97500000000001Q314.125 72.47500000000001 311.4625 75.16250000000001Q308.8 77.85000000000001 304.7 77.85000000000001H280.84999999999997Q281.09999999999997 80.375 282.75 82.1875Q284.4 84.0 286.9125 85.0Q289.425 86.0 292.175 86.0Q294.55 86.0 296.3625 85.73750000000001Q298.175 85.47500000000001 299.5 85.03750000000001Q300.825 84.60000000000001 301.8875 84.16250000000001Q302.95 83.72500000000001 303.8125 83.4Q304.675 83.075 305.475 83.0Q306.95 82.95 308.23749999999995 83.86250000000001Q309.525 84.775 310.5 86.7Q311.15 87.85000000000001 311.42499999999995 88.85000000000001Q311.7 89.85000000000001 311.7 90.775Q311.7 93.25 309.2625 95.1375Q306.825 97.025 302.35 98.125Q297.875 99.22500000000001 291.59999999999997 99.22500000000001ZM280.84999999999997 69.60000000000001H296.7Q298.25 69.60000000000001 299.0125 69.03750000000001Q299.775 68.47500000000001 299.775 66.95Q299.775 65.15 298.7 63.78750000000001Q297.625 62.425000000000004 295.775 61.66250000000001Q293.925 60.900000000000006 291.45 60.900000000000006Q288.4 60.900000000000006 285.98749999999995 62.112500000000004Q283.575 63.325 282.23749999999995 65.30000000000001Q280.9 67.275 280.84999999999997 69.60000000000001Z' fill-opacity='0.5'/%3E%3Cpath d='M326.95000000000005 98.35000000000001Q323.32500000000005 98.35000000000001 321.75 97.26250000000002Q320.175 96.17500000000001 319.85 94.38750000000002Q319.52500000000003 92.60000000000001 319.52500000000003 90.67500000000001V55.800000000000004Q319.52500000000003 53.775000000000006 319.88750000000005 52.075Q320.25000000000006 50.375 321.82500000000005 49.35Q323.40000000000003 48.325 327.05 48.325Q330.6 48.325 332.15000000000003 49.275000000000006Q333.70000000000005 50.225 334.07500000000005 51.475Q334.45000000000005 52.725 334.45000000000005 53.625L333.25000000000006 54.225Q333.50000000000006 53.800000000000004 334.35 52.775000000000006Q335.20000000000005 51.75 336.71250000000003 50.587500000000006Q338.225 49.425000000000004 340.35 48.60000000000001Q342.475 47.775000000000006 345.27500000000003 47.775000000000006Q346.35 47.775000000000006 347.70000000000005 47.962500000000006Q349.05 48.150000000000006 350.5 48.575Q351.95000000000005 49.0 353.1625 49.75Q354.37500000000006 50.5 355.11250000000007 51.625Q355.85 52.75 355.85 54.325Q355.85 58.400000000000006 353.96250000000003 61.25Q352.07500000000005 64.1 349.225 64.1Q347.52500000000003 64.1 346.7875 63.825Q346.05 63.550000000000004 345.63750000000005 63.237500000000004Q345.225 62.925000000000004 344.58750000000003 62.650000000000006Q343.95000000000005 62.37500000000001 342.425 62.37500000000001Q340.925 62.37500000000001 339.5375 62.800000000000004Q338.15000000000003 63.225 337.02500000000003 64.075Q335.90000000000003 64.92500000000001 335.25 66.16250000000001Q334.6 67.4 334.6 68.95V90.875Q334.6 92.80000000000001 334.23750000000007 94.53750000000001Q333.87500000000006 96.275 332.2875 97.3125Q330.70000000000005 98.35000000000001 326.95000000000005 98.35000000000001Z' fill-opacity='0.5'/%3E%3Cpath d='M376.575 99.10000000000001Q373.9 99.10000000000001 370.725 98.5Q367.55 97.9 364.57500000000005 96.75Q361.6 95.60000000000001 359.57500000000005 94.03750000000001Q357.55 92.47500000000001 357.275 90.47500000000001Q357.1 89.47500000000001 357.3625 88.36250000000001Q357.625 87.25 358.2875 85.975Q358.95 84.7 360.025 83.30000000000001Q360.825 82.25 361.7875 81.92500000000001Q362.75 81.60000000000001 364.125 82.025Q365.7 82.275 367.325 83.05000000000001Q368.95 83.825 370.625 84.6875Q372.3 85.55000000000001 374.0875 86.1875Q375.875 86.825 377.8 86.825Q380.6 86.825 382.1625 85.98750000000001Q383.725 85.15 383.725 83.625Q383.725 82.55000000000001 383.0625 81.8125Q382.4 81.075 381.23749999999995 80.5625Q380.075 80.05000000000001 378.5625 79.63750000000002Q377.05 79.22500000000001 375.3125 78.78750000000001Q373.575 78.35000000000001 371.75 77.775Q369.325 77.075 366.98749999999995 76.0Q364.65 74.92500000000001 362.7875 73.17500000000001Q360.925 71.42500000000001 359.8 68.875Q358.675 66.325 358.675 62.575Q358.675 57.725 360.9625 54.400000000000006Q363.25 51.075 367.65 49.325Q372.05 47.575 378.375 47.575Q380.225 47.575 382.0 47.8125Q383.775 48.050000000000004 385.525 48.525000000000006Q387.275 49.0 388.975 49.725Q390.675 50.45 392.35 51.375Q395.425 52.85 395.525 55.212500000000006Q395.625 57.575 393.775 60.150000000000006Q392.65 61.825 391.4625 62.575Q390.275 63.325 389.025 63.050000000000004Q387.425 62.650000000000006 385.5625 61.737500000000004Q383.7 60.825 381.6625 60.025000000000006Q379.625 59.225 377.55 59.225Q375.925 59.225 374.7125 59.650000000000006Q373.5 60.075 372.8875 60.85000000000001Q372.275 61.62500000000001 372.275 62.650000000000006Q372.275 63.900000000000006 373.04999999999995 64.67500000000001Q373.825 65.45 375.11249999999995 65.95Q376.4 66.45 378.11249999999995 66.825Q379.825 67.2 381.775 67.575Q384.475 68.075 387.3125 68.95Q390.15 69.825 392.5125 71.4125Q394.875 73.0 396.325 75.725Q397.775 78.45 397.775 82.825Q397.775 90.7 392.275 94.9Q386.775 99.10000000000001 376.575 99.10000000000001Z' fill-opacity='0.5'/%3E%3Cpath d='M428.2 99.22500000000001Q421.2 99.22500000000001 416.1625 96.9375Q411.125 94.65 407.9125 90.86250000000001Q404.7 87.075 403.125 82.5Q401.55 77.92500000000001 401.55 73.325Q401.55 65.775 404.95000000000005 59.97500000000001Q408.35 54.175000000000004 414.375 50.862500000000004Q420.40000000000003 47.550000000000004 428.175 47.550000000000004Q433.975 47.550000000000004 438.225 49.400000000000006Q442.475 51.25 445.2375 54.175Q448.0 57.1 449.3625 60.5Q450.725 63.900000000000006 450.725 66.97500000000001Q450.725 72.47500000000001 448.0625 75.16250000000001Q445.40000000000003 77.85000000000001 441.3 77.85000000000001H417.45Q417.7 80.375 419.35 82.1875Q421.0 84.0 423.51250000000005 85.0Q426.02500000000003 86.0 428.77500000000003 86.0Q431.15000000000003 86.0 432.96250000000003 85.73750000000001Q434.77500000000003 85.47500000000001 436.1 85.03750000000001Q437.425 84.60000000000001 438.4875 84.16250000000001Q439.55 83.72500000000001 440.4125 83.4Q441.27500000000003 83.075 442.07500000000005 83.0Q443.55 82.95 444.8375 83.86250000000001Q446.125 84.775 447.1 86.7Q447.75 87.85000000000001 448.025 88.85000000000001Q448.3 89.85000000000001 448.3 90.775Q448.3 93.25 445.8625 95.1375Q443.425 97.025 438.95000000000005 98.125Q434.475 99.22500000000001 428.2 99.22500000000001ZM417.45 69.60000000000001H433.3Q434.85 69.60000000000001 435.6125 69.03750000000001Q436.375 68.47500000000001 436.375 66.95Q436.375 65.15 435.3 63.78750000000001Q434.225 62.425000000000004 432.375 61.66250000000001Q430.52500000000003 60.900000000000006 428.05 60.900000000000006Q425.0 60.900000000000006 422.5875 62.112500000000004Q420.175 63.325 418.8375 65.30000000000001Q417.5 67.275 417.45 69.60000000000001Z' fill-opacity='0.5'/%3E%3Cpath transform='translate(50.85 10.25) scale(1.2500)' d='M12 21s-9-5.6-9-12.2A5 5 0 0 1 12 5.6 5 5 0 0 1 21 8.8C21 15.4 12 21 12 21z'/%3E%3Cg transform='translate(166.50 49.44) scale(1.4000)'%3E%3Cellipse cx='50' cy='20' rx='46' ry='12' fill='none' stroke='%23111113' stroke-width='3.6' stroke-opacity='0.5' transform='rotate(-14 50 20)'/%3E%3C/g%3E%3C/svg%3E"); }
/* logo:end */
.vv-splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.vv-no-splash .vv-splash { display: none; }
html.vv-splashing { overflow: hidden; }   /* the splash isn't fixed (see vittyverse.js), so nothing scrolls under it */
@keyframes vv-splash-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .vv-splash, .vv-splash * { animation: none !important; transition: opacity .2s ease !important; } .vv-splash.out { transform: none; } }
[data-app="shiori"] { --splash: #ff86b4; }
[data-app="splitter"] { --splash: #d4ff3a; }
[data-app="gymmer"] { --splash: #ff8a1f; }
[data-app="mapper"] { --splash: #ffc222; }
[data-app="chesser"] { --splash: #c8935a; }
[data-app="watcher"] { --splash: #4cc2ff; }
:root { --splitter: #c9f53b; --gymmer: #ff8a1f; --shiori: #ff86b4; --mapper: #ffc222; --chesser: #c8935a; --watcher: #4cc2ff; --on-module: #111113; /* ink on a module colour, both themes */ }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --splitter: #d4ff3a; --gymmer: #ff9b3d; --shiori: #ff9cc4; --mapper: #ffca3a; --chesser: #d9a46a; --watcher: #62ccff; }
}
:root[data-theme="dark"] { --splitter: #d4ff3a; --gymmer: #ff9b3d; --shiori: #ff9cc4; --mapper: #ffca3a; --chesser: #d9a46a; --watcher: #62ccff; }

/* ---- each app's accent (and the few colours only one app needs) ---- */
:root[data-app="splitter"] {
  --accent: var(--splitter);
  --owe: var(--info); --owe-bg: var(--info-bg); --owed: var(--good); --owed-bg: var(--good-bg);
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a35a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E");
  --bang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e09a2b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v9M12 19v.01'/%3E%3C/svg%3E");
}
:root[data-app="gymmer"] {
  --accent: var(--gymmer);
  /* body map: muscle at rest -> fully fatigued (one hue, light to strong) */
  --body: #e5e5ea; --muscle-0: #d1d1d6; --heat: #e0301e;
}
:root[data-app="shiori"] { --accent: var(--shiori); /* sakura */ }
:root[data-app="chesser"] { --accent: var(--chesser); /* walnut, like a wooden board */ }
:root[data-app="watcher"] { --accent: var(--watcher); /* sky, like a screen lighting up a dark room */ }
:root[data-app="mapper"] {
  --accent: var(--mapper); /* Mapstr yellow */
  /* tag colours: the data-viz reference palette's eight categorical hues, light steps; --pin-none for no tag */
  --tag-blue: #2a78d6; --tag-orange: #eb6834; --tag-aqua: #1baf7a; --tag-yellow: #eda100;
  --tag-magenta: #e87ba4; --tag-green: #008300; --tag-violet: #6250d6; --tag-red: #e34948; --pin-none: #b8b7b0;
}
@media (prefers-color-scheme: dark) {
  :root[data-app="mapper"]:not([data-theme="light"]) {
    --tag-blue: #3987e5; --tag-orange: #d95926; --tag-aqua: #199e70; --tag-yellow: #c98500;
    --tag-magenta: #d55181; --tag-green: #008300; --tag-violet: #9085e9; --tag-red: #e66767; --pin-none: #6f6f76;
  }
}
:root[data-app="mapper"][data-theme="dark"] {
  --tag-blue: #3987e5; --tag-orange: #d95926; --tag-aqua: #199e70; --tag-yellow: #c98500;
  --tag-magenta: #d55181; --tag-green: #008300; --tag-violet: #9085e9; --tag-red: #e66767; --pin-none: #6f6f76;
}
/* the home page has no app colour of its own: ink, so the module colours stand out */
:root[data-app="home"] { --accent: var(--key); --on-accent: var(--on-key); }
@media (prefers-color-scheme: dark) {
  :root[data-app="gymmer"]:not([data-theme="light"]) { --body: #1c1c1f; --muscle-0: #2c2c31; --heat: #ff4a36; }
}
:root[data-app="gymmer"][data-theme="dark"] { --body: #1c1c1f; --muscle-0: #2c2c31; --heat: #ff4a36; }

/* =====================================================================
   3. Shared components
   ===================================================================== */
* { box-sizing: border-box; }
.sheet { position: relative; width: 100%; max-width: 560px; background: var(--surface); color: var(--text); border-radius: 28px 28px 0 0; padding: 10px 20px calc(env(safe-area-inset-bottom) + 20px); animation: up .22s cubic-bezier(.2, .8, .2, 1); max-height: 90vh; overflow: auto; overscroll-behavior: contain; }
main { max-width: 560px; margin: 0 auto; padding: 0 16px; }
[hidden] { display: none !important; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num { font-family: var(--display-font); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.subhead { font: 500 13px var(--font); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin: 24px 16px 7px; }
p.hint { color: var(--muted); font-size: 14px; margin: 10px 4px 0; }
/* pages with a header row (the root page, Splitter's bill) get the same air above it as the large titles */
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 28px 0 14px; }
/* a screen's title: large and bold, as in Apple's own apps, with its actions to the right */
/* Every screen's title, in every app: one style. It sits 26px below the status bar, so it doesn't crowd the top edge.
   Use .large-title on the title element (a .page-head row's h2 is one too, beside its actions). */
.large-title, .page-head h2 { font: 700 34px/1.15 var(--display-font); letter-spacing: -0.01em; margin: 0; padding: 26px 0 14px; }
.page-head { align-items: center; }
.page-head .actions { display: flex; gap: 4px; padding-top: 4px; }
/* back to a list (Splitter's bill to its bills): a plain chevron and the list's name, as on iOS */
.back-btn { display: inline-flex; align-items: center; gap: 2px; margin-left: -6px; padding: 6px 6px 6px 0; font-size: 17px; font-weight: 500; color: var(--text); text-decoration: none; }   /* a button or a link, it looks the same */
.back-btn svg.i { width: 22px; height: 22px; stroke-width: 2.4; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 21px/1 var(--display-font); letter-spacing: -0.02em; cursor: pointer; }
.brand .mark { width: 34px; height: 34px; border-radius: 11px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 22px; font-weight: 700; }
.brand .dot-ino { color: var(--muted); font-weight: 500; }
.head-actions { display: flex; gap: 8px; }
.home-hero { padding: 0; }
/* House rule: a tagline is two lines, like the logo: the first strong, the second grey.
   <h1 class="tagline">Everything I use.<span>Vitty style.</span></h1>. Its size comes from where it sits. */
.tagline > span { display: block; opacity: .5; }
/* the square "vv" mark (VV.mark()) on a tile, filled in by vittyverse.js wherever data-vv="mark" asks for it */
.vv-mark svg, .brand-logo svg { display: block; width: 100%; height: 100%; }
.home-list { margin-top: 28px; }
.role { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.role.admin { background: var(--accent); color: var(--on-accent); }
.bill-row + .bill-row { margin-top: 8px; }
.bill-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--fill); flex: none; }
.sheet .bill-row { background: var(--fill); }
.sheet .bill-row .bill-ico { background: var(--surface); }
.bill-txt { flex: 1; min-width: 0; }
.bill-txt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-txt small { color: var(--muted); font-size: 13px; }
.chev { color: var(--muted); display: grid; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--fill); color: var(--text); font-weight: 600; font-size: 16px; transition: transform .28s var(--spring), opacity .15s ease, background-color .2s ease; }
.btn:active { transform: scale(0.96); transition-duration: .07s; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.dark { background: var(--fill); color: var(--text); }   /* a secondary action: quiet, so the one main action carries the colour */
.btn.danger { background: var(--danger); color: #fff; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.small { min-height: 34px; padding: 6px 14px; border-radius: 999px; font-size: 14px; }
.btn.pill { border-radius: 999px; }
.btn.block { width: 100%; }
.btn.add { width: 100%; margin-top: 12px; min-height: 52px; border-radius: 999px; font-size: 17px; }
.btn.add + .btn.add { margin-top: 8px; }
.icon-btn { width: 36px; height: 36px; border-radius: 999px; display: inline-grid; place-items: center; color: var(--text); flex: none; }
.icon-btn { transition: transform .28s var(--spring), background-color .2s ease; }
.icon-btn:active { background: var(--surface-2); transform: scale(0.9); transition-duration: .07s; }
.card { background: var(--surface); border-radius: var(--r-lg); padding: 16px; margin: 12px 0; box-shadow: var(--shadow); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.list { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; padding: 0 16px; }
.li { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 0; min-height: 52px; }
.li + .li { border-top: 0.5px solid var(--line); }
.li .t { font-weight: 500; font-size: 16px; }
.li .s { color: var(--muted); font-size: 14px; }
.li .r { margin-left: auto; color: var(--muted); font-size: 13px; text-align: right; flex: none; }
.li.dim .t { color: var(--muted); }
.li .grow { flex: 1; min-width: 0; }
.badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--fill); color: var(--muted); white-space: nowrap; vertical-align: 2px; }
.badge.always, .badge.more { background: var(--good-bg); color: var(--good); }
.badge.less, .badge.missing { background: var(--warn-bg); color: var(--warn); }
.badge.never { background: var(--danger); color: #fff; }
.search, .field input[type=text], .field input[type=url], .field input[type=password], .field select, .field textarea { font: inherit; font-size: 17px; color: var(--text); background: var(--fill); border: 1.5px solid transparent; border-radius: var(--r-sm); padding: 9px 12px; min-width: 0; width: 100%; -webkit-appearance: none; appearance: none; }
.search { background: var(--fill); box-shadow: none; padding: 9px 12px 9px 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; background-size: 17px; }
.sheet .search { background-color: var(--fill); box-shadow: none; }
.search[type=text] { padding-left: 12px; background-image: none; }   /* a name field, not a search */
.search:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--focus); }
.search::placeholder, .field input::placeholder { color: var(--muted); opacity: .7; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9ba3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; margin-top: 0; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { flex: none; display: inline-flex; align-items: center; padding: 4px 12px; min-height: 32px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--fill); border: 1.5px solid transparent; color: var(--text); }
.sheet .chip { background: var(--fill); }
.chip.on { color: var(--on-key); background: var(--key); font-weight: 600; }
.seg { display: flex; background: var(--fill); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { flex: 1; min-height: 34px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text); padding: 0 6px; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.card .seg, .sheet .seg { background: var(--fill); }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper b { min-width: 34px; text-align: center; font: 600 18px var(--display-font); }
.stepper button { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); font-size: 20px; line-height: 1; }
.toggle { width: 50px; height: 30px; border-radius: 99px; background: var(--surface-2); position: relative; flex: none; transition: background .15s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(20px); background: var(--on-accent); }
/* The dimming stops at the status bar: iPhone Safari colours the status bar from a fixed element touching the top of the
   screen, and a full-height dark backdrop turned it into a black bar whenever a sheet opened. The backdrop still covers
   the whole screen, so a tap anywhere outside the sheet closes it. */
.scrim { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(to bottom, transparent env(safe-area-inset-top, 0px), rgba(0, 0, 0, 0.45) env(safe-area-inset-top, 0px)); animation: fade .18s ease; }
.sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--line); margin: 0 auto 16px; }
.sheet h2 { font: 700 22px/1.2 var(--display-font); letter-spacing: -0.01em; margin: 0 0 6px; padding: 0; }
.sheet .sub { color: var(--muted); margin: 0 0 16px; }
@media (min-width: 640px) {
  .scrim { align-items: center; }
  .sheet { border-radius: 28px; padding-bottom: 20px; }
  .sheet::before { display: none; }
}
.sheet .list { box-shadow: none; background: var(--fill); }
.sheet .menu { display: grid; gap: 8px; margin-top: 14px; }
.sheet .menu .btn { justify-content: flex-start; min-height: 50px; }
.checkrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--fill); width: 100%; text-align: left; font-weight: 500; }
.checkrow + .checkrow { margin-top: 8px; }
.checkrow .box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--muted); display: grid; place-items: center; flex: none; }
.checkrow.on .box { background: var(--key); border-color: var(--key); color: var(--on-key); }
.checkrow .box svg { width: 16px; height: 16px; stroke-width: 3; visibility: hidden; }
.checkrow.on .box svg { visibility: visible; }
.toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 14px); transform: translate(-50%, -8px); background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 0; box-shadow: var(--glass-shadow); color: var(--text); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 60; width: max-content; max-width: calc(100% - 32px); text-align: center; display: flex; align-items: center; gap: 10px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); animation: drop .2s ease; }
.toast.has-undo { pointer-events: auto; padding-right: 6px; }
.toast button { background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
.empty { color: var(--muted); font-size: 15px; margin: 0; padding: 32px 16px; text-align: center; }

/* ---------- base ---------- */
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; }

/* ---------- scrollbars: thin and rounded, in the suite's colours, on every page and every scrolling box ----------
   scrollbar-color is inherited, so setting it on html covers everything; scrollbar-width isn't, hence :where(*)
   (no specificity, so a box that hides its scrollbar, like .chips, still wins). Safari, which has neither, gets the
   same look through its ::-webkit-scrollbar pseudo-elements (other browsers ignore those once scrollbar-color is set). */
html { scrollbar-color: var(--scroll) transparent; }
:where(*) { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
/* wider layout for tablet-first apps (Shior.ino); phones still get the 16px gutter */
main.wide { max-width: 1120px; padding: 0 clamp(16px, 4vw, 32px); }

/* ---------- page title (a view's name, with an action on the right) ---------- */
.btn.back { padding-left: 0; }

/* ---------- stat tile: small label over a big number ---------- */
.stat { background: var(--surface); border-radius: var(--r-md); padding: 12px 14px 13px; box-shadow: var(--shadow); min-width: 0; }
.stat .k { font: 500 12px var(--font); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v { font: 700 26px/1.15 var(--display-font); letter-spacing: -0.01em; margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v small { font: 500 13px var(--font); color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.stat .d { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .stat, .sheet .stat { background: var(--fill); box-shadow: none; }

/* ---------- two choices side by side in a sheet (Cancel / Delete), and a row of stat tiles ---------- */
.confirm-row { display: flex; gap: 8px; }
.confirm-row .btn { flex: 1 1 0; min-height: 50px; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }

/* ---------- a list drawn flat on a card or sheet ---------- */
.list.inset { box-shadow: none; background: var(--fill); }

/* ---------- floating tab bar (the suite's bottom navigation) ----------
   Suite layout rules:
   - An app with more than one section uses this tab bar, and Settings is always its last tab.
   - The header holds only: brand, the app's one primary action, and the theme toggle. Each app stands alone
     (its own home-screen icon), so there's no button back to a suite home. */
.tabbar {
  position: fixed; z-index: 30; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14px); transform: translateX(-50%);
  display: flex; gap: 2px; padding: 5px; border-radius: 999px; width: max-content; max-width: calc(100% - 24px);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 0; box-shadow: var(--glass-shadow);
}
/* every tab the same width, its icon above its label, and every label always showing (as in Apple Music and
   Mapstr); on a narrow phone the tabs all narrow together */
.tabbar > a, .tabbar > button {
  position: relative; z-index: 1; flex: 0 1 76px; width: 76px; min-width: 0; height: 54px; padding: 0 4px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .25s ease, transform .28s var(--spring);
}
.tabbar > :active { transform: scale(0.94); transition-duration: .07s; }
.tabbar svg.i { width: 22px; height: 22px; flex: none; }
.tabbar > * > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tabbar > .on { background: var(--key); color: var(--on-key); }
.tabbar > .on svg.i { stroke-width: 2.4; }
/* vittyverse.js adds one pill (.tab-thumb) that glides to the current tab instead of each tab lighting up on its own */
.tabbar.has-thumb > .on { background: transparent; color: var(--text); }
/* the current tab sits under a lens of clearer glass */
.tabbar > .tab-thumb { position: absolute; z-index: 0; left: 0; top: 5px; height: 54px; width: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px var(--glass-line); pointer-events: none; will-change: transform, width; transition: opacity .2s; }

/* ---------- Liquid Glass (house rule) ----------
   Anything that floats over content is glass: the tab bar, toasts, map controls, the reader's bars. It's the --glass
   tokens: a see-through fill, a blur that brightens what's behind, a bright rim along the top edge and a soft shadow.
   Content (cards, lists, sheets, the lookup card) stays solid so text stays easy to read; bars over reading text use
   --glass-thick. Never on things that come in their hundreds (map pins, list rows): every blur costs on each frame.
   With Reduce Transparency on, or in a browser that can't blur, glass turns solid. .glass applies the recipe.
   Settings > Appearance picks Regular, Frosted or Dark glass (data-glass, above). Real refracting glass (LiquidGlass,
   shared/vendor) goes only where there's a picture under the controls, like Watcher's player: over a page it has to
   photograph the page whenever it changes, which on a phone means seconds of blank bars. */
.glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 0; box-shadow: var(--glass-shadow); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-theme] { --glass: var(--surface) !important; --glass-thick: var(--surface) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme] { --glass: var(--surface) !important; --glass-thick: var(--surface) !important; --glass-blur: none !important; }
}

/* ---------- utilities (stand-ins for one-off inline styles, so they win like inline styles did) ---------- */
.u-grow { flex: 1 !important; min-width: 0 !important; }
.u-minw0 { min-width: 0 !important; }
.u-flush { margin: 0 !important; }
.u-mt8 { margin-top: 8px !important; }
.u-mt10 { margin-top: 10px !important; }
.u-mt12 { margin-top: 12px !important; }
.u-danger { color: var(--danger) !important; }
.u-muted { color: var(--muted) !important; }

/* =====================================================================
   4. Motion
   ===================================================================== */
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes flash { 50% { box-shadow: 0 0 0 3px var(--warn); } }
@keyframes flip { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes drop { from { transform: translate(-50%, -8px); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes away { to { opacity: 0; } }
@keyframes down { to { transform: translateY(calc(var(--swipe, 0px) + 40px)); opacity: 0; } }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
/* Feedback that something changed (VV.enter, VV.flash, VV.pulse in vittyverse.js), on the thing that changed: a new row
   rises in, a row whose contents changed glows briefly in the app's accent, a number that changed gives a small bump. */
.vv-enter { animation: vv-enter .28s cubic-bezier(.2, .8, .2, 1) both; }
.vv-flash { animation: vv-flash .9s ease-out; }
.vv-pulse { animation: vv-pulse .34s cubic-bezier(.2, .8, .2, 1); transform-origin: left center; }
@keyframes vv-enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes vv-flash { from { background-color: color-mix(in srgb, var(--accent) 34%, var(--surface)); } }
@keyframes vv-pulse { 40% { transform: scale(1.05); } }
/* progress (house rule 17): a thin rounded track with a fill in the app's colour, under what it's the progress of (a
   book read so far, an episode or film half-watched) or for a download or import. Never thinner, never inside a picture;
   a fill that has started shows at least a sliver. Shior.ino's, Mapper's and Gymmer's older class names share it; Splitter's
   paid-so-far bar sits on the bill's coloured card and takes that card's colours instead. */
.vv-progress, :where([data-app="shiori"]) .book-tile .bar, :where([data-app="shiori"]) .progress, :where([data-app="mapper"]) .import-progress .bar, :where([data-app="gymmer"]) .split-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
:is(.vv-progress, :where([data-app="shiori"]) .book-tile .bar, :where([data-app="shiori"]) .progress, :where([data-app="mapper"]) .import-progress .bar, :where([data-app="gymmer"]) .split-bar) > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.vv-progress > i:not([style*="width: 0"]) { min-width: 6px; }
/* where something stands (VV.state): a pill (done, off, needs you, under way), then the detail in the usual grey */
.vv-state { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 7px; margin-right: 6px; border-radius: 999px; font: 600 12px/1.5 var(--font); letter-spacing: .01em; vertical-align: 1px; white-space: nowrap; }
.vv-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.vv-state.ok { background: var(--good-bg); color: var(--good); }
.vv-state.off { background: var(--fill); color: var(--muted); }
.vv-state.warn { background: var(--warn-bg); color: var(--warn); }
.vv-state.busy { background: var(--fill); color: var(--text); }
.vv-state.busy::before { animation: vv-state-busy 1s ease-in-out infinite; }
@keyframes vv-state-busy { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .vv-state.busy::before { animation: none; } }
.vv-state-detail { color: var(--muted); }
/* hold for options (VV.hold): no picture menu or text selection on the item, and a little give while it's held */
.vv-holdable, .vv-holdable * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.vv-holdable { transition: transform .2s var(--spring, ease); }
.vv-holdable.vv-holding { transform: scale(.97); transition-duration: .45s; }
/* pull to refresh (VV.pullToRefresh): a round arrow that comes down with your finger and turns while it refreshes */
.vv-ptr-host { position: relative; }
.vv-ptr { position: absolute; left: 50%; top: 0; z-index: 40; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-float); color: var(--muted); opacity: 0; transform: translateY(-52px); transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; pointer-events: none; }
.vv-ptr.drag { transition: none; }
.vv-ptr svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vv-ptr.armed, .vv-ptr.spin { color: var(--accent); }
.vv-ptr.spin svg { animation: spin .8s linear infinite; }
:root { --spring: cubic-bezier(.3, 1.4, .5, 1); --glide: cubic-bezier(.2, .8, .2, 1); }
/* the tab bar can be dragged along (vittyverse.js): it takes the finger's sideways moves, and the lens lifts while held */
.tabbar { touch-action: none; }
.tabbar > .tab-thumb { transition: opacity .2s, scale .25s var(--spring), background-color .2s; }
.tabbar.dragging > .tab-thumb { scale: 1.12; background: color-mix(in srgb, var(--text) 14%, transparent); }

/* No zooming anywhere in the suite (house rule): no pinch, no double-tap. vittyverse.js stops iPhone Safari's pinch. */
html { touch-action: pan-x pan-y; }

/* press feedback: things you tap give a little under your finger and settle back */
.chip, .seg button, .bill-row, a.li, button.li, .li[role="button"] { transition: transform .28s var(--spring), background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.chip:active, .seg button:active { transform: scale(0.95); transition-duration: .07s; }
.bill-row:active, a.li:active, button.li:active, .li[role="button"]:active { transform: scale(0.985); transition-duration: .07s; }

/* sheets and dialogs leave the way they came in (VV.dismiss adds .leaving); while one is open the page behind stays
   still (Splitter keeps its own .sheet-open for its separate backdrop) */
html:has(.scrim:not(.leaving) > .sheet) { overflow: hidden; }
.leaving { pointer-events: none; }
.scrim.leaving, .leaving > .scrim { animation: away .19s ease forwards; }
.leaving .sheet { animation: down .19s cubic-bezier(.4, 0, 1, 1) forwards; }

/* changing section (VV.swap): the old view fades, the new one rises in; the tab bar and header stay put */
.tabbar { view-transition-name: vv-tabbar; }
main > header:first-child { view-transition-name: vv-header; }
::view-transition-group(vv-tabbar), ::view-transition-group(vv-header), ::view-transition-new(vv-tabbar), ::view-transition-new(vv-header) { animation: none; }
::view-transition-old(vv-tabbar), ::view-transition-old(vv-header) { display: none; }
::view-transition-old(root) { animation: away .14s ease both; }
::view-transition-new(root) { animation: rise .3s var(--glide) both; }

/* =====================================================================
   5. Splitter.ino
   ===================================================================== */
:where([data-app="splitter"]) .tk, :where([data-app="splitter"]) .bang { display: inline-block; width: 15px; height: 15px; flex: none; background: var(--tick) no-repeat center / 15px; vertical-align: -2px; }
:where([data-app="splitter"]) .bang { background-image: var(--bang); }
:where([data-app="splitter"]) .btn .tk { margin-right: -2px; }
html:where([data-app="splitter"]) { -webkit-text-size-adjust: 100%; }
:where([data-app="splitter"]) body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 32px); }
:where([data-app="splitter"]) input, :where([data-app="splitter"]) select { font: inherit; font-size: 16px; color: var(--text); background: var(--surface-2); border: 1.5px solid transparent; border-radius: 12px; padding: 10px 12px; min-width: 0; width: 100%; -webkit-appearance: none; appearance: none; }
:where([data-app="splitter"]) select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9ba3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px; }
:where([data-app="splitter"]) input:focus, :where([data-app="splitter"]) select:focus { outline: none; border-color: var(--focus); }
:where([data-app="splitter"]) input::placeholder { color: var(--muted); opacity: .7; }
:where([data-app="splitter"]) input:disabled, :where([data-app="splitter"]) select:disabled { background: transparent; color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1; padding-left: 0; padding-right: 0; background-image: none; }
:where([data-app="splitter"]) .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
:where([data-app="splitter"]) #home { display: none; }
:where([data-app="splitter"]) body.home main > header { display: none; }   /* the Bills screen has nothing to go back to */
:where([data-app="splitter"]) body.home { padding-bottom: calc(env(safe-area-inset-bottom) + 14px); }
:where([data-app="splitter"]) body.home main { display: flex; flex-direction: column; min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 14px); }
:where([data-app="splitter"]) body.home #home { display: flex; flex-direction: column; flex: 1; }
:where([data-app="splitter"]) body.home main > section:not(#home), :where([data-app="splitter"]) body.home #sharedBar, :where([data-app="splitter"]) body.home #billSwitch, :where([data-app="splitter"]) body.home #shareLink, :where([data-app="splitter"]) body.home #newBill, :where([data-app="splitter"]) body.home #joinBill { display: none !important; }
@media (max-width: 479px) {
  :where([data-app="splitter"]) body:not(.home) .brand-name { display: none; }
}
:where([data-app="splitter"]) main { position: relative; }
:where([data-app="splitter"]) body.home .title-row { position: absolute; top: 18px; right: 16px; }
:where([data-app="splitter"]) #homeNew { margin-top: 28px; }   /* the two main buttons sit a little below the title */
:where([data-app="splitter"]) #homeJoin { margin-top: 8px; }
/* the foot of the Bills screen: the VittyVerse signature, Add to Home Screen, then the reCAPTCHA notice */
:where([data-app="splitter"]) #homeMade { margin-top: auto; }   /* the signature, Add to Home Screen and the notice sit together at the foot */
:where([data-app="splitter"]) #homeMade .vv-made { margin: 28px 0 4px; }
:where([data-app="splitter"]) #homeInstall { align-self: center; }
:where([data-app="splitter"]) #homeMade ~ .legal { margin-top: 0; padding-top: 14px; }
:where([data-app="splitter"]) .grecaptcha-badge { visibility: hidden !important; }
:where([data-app="splitter"]) .legal { margin: auto 4px 0; padding-top: 28px; font-size: 10px; line-height: 1.5; color: var(--muted); text-align: center; text-wrap: balance; }
:where([data-app="splitter"]) .legal a { color: inherit; }
:where([data-app="splitter"]) .code-big { font: 700 44px/1 var(--display-font); letter-spacing: 0.08em; text-align: center; padding: 18px 0; background: var(--surface-2); border-radius: 18px; font-variant-numeric: tabular-nums; }
:where([data-app="splitter"]) .code-label { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 8px; }
:where([data-app="splitter"]) button.role.code { cursor: pointer; letter-spacing: .08em; }
:where([data-app="splitter"]) .title-row .icon-btn { margin-top: -2px; }
:where([data-app="splitter"]) .whoami { margin: -10px 0 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
:where([data-app="splitter"]) body.home .whoami { display: none; }
:where([data-app="splitter"]) .bill-switch { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 0 12px; font: 700 26px/1.15 var(--display-font); letter-spacing: -0.02em; text-align: left; }
:where([data-app="splitter"]) .bill-switch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where([data-app="splitter"]) .bill-switch .i { width: 22px; height: 22px; color: var(--muted); }
:where([data-app="splitter"]) .bill-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
:where([data-app="splitter"]) .bill-row.on { box-shadow: inset 0 0 0 2px var(--text); }
:where([data-app="splitter"]) .bill-row.on .bill-ico { background: var(--accent); color: var(--on-accent); }
:where([data-app="splitter"]) #mBody { margin-bottom: 16px; }
:where([data-app="splitter"]) .bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; background: var(--surface); border-radius: 18px; padding: 10px 12px 10px 14px; margin-bottom: 12px; box-shadow: var(--shadow); font-size: 14px; }
:where([data-app="splitter"]) .bar.needme { outline: 2px solid var(--accent); }
:where([data-app="splitter"]) .live { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
:where([data-app="splitter"]) .live.on { background: var(--owed); box-shadow: 0 0 0 4px color-mix(in srgb, var(--owed) 20%, transparent); }
:where([data-app="splitter"]) .bar .me { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); }
:where([data-app="splitter"]) .bar .me select { width: auto; padding-top: 7px; padding-bottom: 7px; font-weight: 600; }
:where([data-app="splitter"]) .display { background: var(--display); color: var(--on-display); border-radius: 28px; padding: 20px 22px 22px; margin-bottom: 12px; }
:where([data-app="splitter"]) .d-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 26px; }
:where([data-app="splitter"]) .d-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--display-muted); }
:where([data-app="splitter"]) .d-tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--display-track); }
:where([data-app="splitter"]) .d-total { font: 700 56px/1.05 var(--display-font); letter-spacing: -0.04em; margin: 10px 0 6px; font-variant-numeric: tabular-nums; word-break: break-all; }
:where([data-app="splitter"]) .d-total .cur { font-size: 0.55em; vertical-align: 0.55em; margin-right: 2px; letter-spacing: 0; }
:where([data-app="splitter"]) .d-total .dec { color: var(--display-muted); }
:where([data-app="splitter"]) .d-sub { font-size: 14px; color: var(--display-muted); font-variant-numeric: tabular-nums; }
:where([data-app="splitter"]) .d-bar { height: 8px; border-radius: 999px; background: var(--display-track); margin: 16px 0 8px; overflow: hidden; }
:where([data-app="splitter"]) .d-bar i { display: block; height: 100%; border-radius: inherit; background: var(--on-display); transition: width .3s ease; }
:where([data-app="splitter"]) .d-paid { display: flex; justify-content: space-between; font-size: 13px; color: var(--display-muted); font-variant-numeric: tabular-nums; }
:where([data-app="splitter"]) .card-head { padding: 0 4px; }
:where([data-app="splitter"]) .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
:where([data-app="splitter"]) h2 { font: 600 18px/1.2 var(--display-font); letter-spacing: -0.01em; margin: 0; }
:where([data-app="splitter"]) .count { color: var(--muted); font-size: 14px; }
:where([data-app="splitter"]) .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
:where([data-app="splitter"]) .tile.wide { grid-column: 1 / -1; }
:where([data-app="splitter"]) .tile.wide input { font: 600 18px/1.3 var(--font); }
:where([data-app="splitter"]) .tile { background: var(--surface-2); border-radius: 16px; padding: 10px 12px 8px; display: block; }
:where([data-app="splitter"]) .tile span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
:where([data-app="splitter"]) .tile input { background: transparent; border: 0; padding: 2px 0 0; font: 600 20px/1.3 var(--display-font); border-radius: 0; }
:where([data-app="splitter"]) .tile input:focus { border: 0; box-shadow: inset 0 -2px 0 var(--focus); }
:where([data-app="splitter"]) .av { --c: #999; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #111; display: inline-grid; place-items: center; font: 700 13px/1 var(--display-font); flex: none; }
:where([data-app="splitter"]) .av.sm { width: 20px; height: 20px; font-size: 10px; }
:where([data-app="splitter"]) .prow { display: flex; align-items: center; gap: 10px; }
:where([data-app="splitter"]) .prow + .prow { margin-top: 8px; }
:where([data-app="splitter"]) .prow input { flex: 1; font-weight: 600; }
:where([data-app="splitter"]) .item { background: var(--surface-2); border-radius: 18px; padding: 8px; }
:where([data-app="splitter"]) .item + .item { margin-top: 8px; }
:where([data-app="splitter"]) .item-row { display: grid; grid-template-columns: 1fr 38px 90px 24px; gap: 5px; align-items: center; }
:where([data-app="splitter"]) .item .name { padding-left: 10px; padding-right: 6px; }
:where([data-app="splitter"]) .item .money input { padding-left: 20px; padding-right: 9px; }
:where([data-app="splitter"]) .item .money .cur { left: 9px; }
:where([data-app="splitter"]) .item .icon-btn { width: 24px; }
:where([data-app="splitter"]) .item input { background: var(--surface); }
:where([data-app="splitter"]) .item input:disabled { background: transparent; }
:where([data-app="splitter"]) .item .name { font-weight: 600; }
:where([data-app="splitter"]) .item .qty { text-align: center; padding-left: 4px; padding-right: 4px; }
:where([data-app="splitter"]) .money { position: relative; display: block; }
:where([data-app="splitter"]) .money .cur { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font: 600 15px var(--display-font); pointer-events: none; }
:where([data-app="splitter"]) .money input { padding-left: 24px; text-align: right; font: 600 17px var(--display-font); font-variant-numeric: tabular-nums; }
:where([data-app="splitter"]) .money input:disabled { padding-left: 24px; }
:where([data-app="splitter"]) .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
:where([data-app="splitter"]) .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--surface); border: 1.5px solid transparent; color: var(--muted); }
:where([data-app="splitter"]) .chip .av { opacity: .45; }
:where([data-app="splitter"]) .chip.on .av { opacity: 1; }
:where([data-app="splitter"]) .chip.all { padding: 4px 11px; color: var(--muted); font-weight: 600; }
:where([data-app="splitter"]) .chip:disabled { cursor: default; }
:where([data-app="splitter"]) .item.unassigned { box-shadow: inset 3px 0 0 var(--warn); }
:where([data-app="splitter"]) .item.locked .chip:not(.on) { display: none; }
:where([data-app="splitter"]) .item.locked .chip.on { border-color: transparent; }
:where([data-app="splitter"]) .item.locked .qty:placeholder-shown { visibility: hidden; }
:where([data-app="splitter"]) .payrow { display: grid; grid-template-columns: 1fr 1fr 104px 32px; gap: 6px; align-items: center; }
:where([data-app="splitter"]) .payrow + .payrow { margin-top: 8px; }
:where([data-app="splitter"]) .warn { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-bg); color: var(--warn); border-radius: 16px; padding: 12px 14px; font-size: 14px; margin: 0 0 8px; }
:where([data-app="splitter"]) .warn > svg { margin-top: 1px; }
:where([data-app="splitter"]) .warn .row { display: flex; gap: 8px; margin-top: 10px; }
:where([data-app="splitter"]) .warn select { width: auto; flex: 1; background-color: var(--surface); }
:where([data-app="splitter"]) .person { border-top: 1px solid var(--line); }
:where([data-app="splitter"]) .person:first-of-type { border-top: 0; }
:where([data-app="splitter"]) .person summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 0; }
:where([data-app="splitter"]) .person summary::-webkit-details-marker { display: none; }
:where([data-app="splitter"]) .pinfo { flex: 1; min-width: 0; }
:where([data-app="splitter"]) .pname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where([data-app="splitter"]) .pnet { font-size: 13px; font-weight: 500; }
:where([data-app="splitter"]) .pshare { font: 700 19px var(--display-font); font-variant-numeric: tabular-nums; }
:where([data-app="splitter"]) .chev { color: var(--muted); transition: transform .2s ease; }
:where([data-app="splitter"]) .person[open] .chev { transform: rotate(180deg); }
:where([data-app="splitter"]) .owe { color: var(--owe); }
:where([data-app="splitter"]) .owed { color: var(--owed); }
:where([data-app="splitter"]) .settled { color: var(--muted); }
:where([data-app="splitter"]) .lines { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
:where([data-app="splitter"]) .person .lines { padding: 0 0 14px 42px; color: var(--muted); }
:where([data-app="splitter"]) .lines .sep { grid-column: 1 / -1; border-top: 1.5px dashed var(--line); margin: 4px 0; }
:where([data-app="splitter"]) .lines .muted { color: var(--muted); }
:where([data-app="splitter"]) .lines .strong { font-weight: 700; color: var(--text); }
:where([data-app="splitter"]) .lines .big { font: 700 19px var(--display-font); color: var(--text); }
:where([data-app="splitter"]) .subhead { font: 600 13px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
:where([data-app="splitter"]) .transfer { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-2); border-radius: 14px; font-weight: 500; }
:where([data-app="splitter"]) .transfer + .transfer { margin-top: 6px; }
:where([data-app="splitter"]) .transfer .arrow { color: var(--muted); }
:where([data-app="splitter"]) .transfer b { margin-left: auto; font: 700 17px var(--display-font); font-variant-numeric: tabular-nums; }
:where([data-app="splitter"]) .actions { display: flex; gap: 8px; margin-top: 16px; }
:where([data-app="splitter"]) .actions .btn { flex: 1; white-space: nowrap; }
:where([data-app="splitter"]) .receipt-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
:where([data-app="splitter"]) .receipt-head select { width: auto; max-width: 60%; font-weight: 600; }
:where([data-app="splitter"]) .banner { border-radius: 20px; padding: 16px 18px; margin-bottom: 16px; }
:where([data-app="splitter"]) .banner .lead { font-size: 14px; font-weight: 600; }
:where([data-app="splitter"]) .banner .amt { font: 700 40px/1.1 var(--display-font); letter-spacing: -0.03em; margin: 2px 0 10px; font-variant-numeric: tabular-nums; }
:where([data-app="splitter"]) .banner .to { display: flex; align-items: center; gap: 8px; font-size: 15px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
:where([data-app="splitter"]) .banner .to b { margin-left: auto; font-family: var(--display-font); font-variant-numeric: tabular-nums; }
:where([data-app="splitter"]) .banner.owe { background: var(--owe-bg); color: var(--owe); }
:where([data-app="splitter"]) .btn.pay { width: 100%; margin: 8px 0 4px; background: var(--owe); color: #fff; text-decoration: none; }
:where([data-app="splitter"]) .banner.owed .btn.pay { background: var(--owed); }
:where([data-app="splitter"]) .btn.pay.revolut { background: var(--key); color: var(--on-key); }
:where([data-app="splitter"]) .pay-note { font-size: 12px; opacity: .8; margin: 0 2px 6px; }
:where([data-app="splitter"]) .btn-row { display: flex; gap: 8px; margin-top: 12px; }
:where([data-app="splitter"]) .btn-row .btn.add { margin-top: 0; flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
:where([data-app="splitter"]) .btn-row .btn.add svg { vertical-align: -3px; margin-right: 6px; }
:where([data-app="splitter"]) .check { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 8px; width: 100%; padding: 10px 2px 10px 12px; text-align: left; }
:where([data-app="splitter"]) .check + .check { border-top: 1px solid var(--line); }
:where([data-app="splitter"]) .check.ok { box-shadow: inset 3px 0 0 var(--owed); }
:where([data-app="splitter"]) .check.bad { box-shadow: inset 3px 0 0 var(--warn); }
:where([data-app="splitter"]) .check .cl { padding-left: 22px; }
:where([data-app="splitter"]) .check.ok .cl { background: var(--tick) no-repeat 0 50% / 15px; }
:where([data-app="splitter"]) .check.bad .cl { background: var(--bang) no-repeat 0 50% / 15px; }
:where([data-app="splitter"]) .check .cl { font-weight: 600; font-size: 15px; }
:where([data-app="splitter"]) .check .cv { text-align: right; font: 600 15px var(--display-font); font-variant-numeric: tabular-nums; }
:where([data-app="splitter"]) .check .cv small { display: block; font: 600 12px var(--font); color: var(--warn); }
:where([data-app="splitter"]) .check .cact .btn { min-height: 32px; padding: 5px 9px; font-size: 12px; white-space: nowrap; }
:where([data-app="splitter"]) .check { gap: 4px 6px; }
:where([data-app="splitter"]) .check .cl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; padding-left: 21px; }
:where([data-app="splitter"]) .check .cv small { font-size: 11px; }
:where([data-app="splitter"]) .check .cv { white-space: nowrap; }
:where([data-app="splitter"]) .check { grid-template-columns: minmax(0, 1fr) 96px 66px; }
:where([data-app="splitter"]) .check .cl { grid-column: 1; grid-row: 1; }
:where([data-app="splitter"]) .check .cact { grid-column: 2; grid-row: 1; }
:where([data-app="splitter"]) .check .cact .btn { width: 100%; padding-left: 4px; padding-right: 4px; }
:where([data-app="splitter"]) .check .cv { grid-column: 3; grid-row: 1; }
:where([data-app="splitter"]) .check.noact .cv { grid-column: 2 / 4; }
:where([data-app="splitter"]) #checks.flash { animation: flash .9s ease 2; }
:where([data-app="splitter"]) #modeSeg { margin: 0 0 12px; }
:where([data-app="splitter"]) #previewReceipt { margin-top: 8px; }
:where([data-app="splitter"]) .btn.small.on { color: var(--owed); }
:where([data-app="splitter"]) .banner.owed { background: var(--owed-bg); color: var(--owed); }
:where([data-app="splitter"]) .banner.settled { background: var(--surface-2); color: var(--text); }
:where([data-app="splitter"]) body.is-locked .edit { display: none !important; }
:where([data-app="splitter"]) body.guest .admin-card, :where([data-app="splitter"]) body.guest #shareLink, :where([data-app="splitter"]) body.guest #display, :where([data-app="splitter"]) body.guest #results { display: none !important; }
:where([data-app="splitter"]) body.guest.unpicked .edit { display: none !important; }
:where([data-app="splitter"]) .item.locked { background: none; border-radius: 0; padding: 10px 2px; border-bottom: 1px solid var(--line); }
:where([data-app="splitter"]) .item.locked, :where([data-app="splitter"]) .item + .item.locked { margin-top: 0; }
:where([data-app="splitter"]) .item.locked + .item:not(.locked) { margin-top: 10px; }
:where([data-app="splitter"]) .item.locked .item-row { grid-template-columns: minmax(0, 1fr) 52px 84px 24px; }
:where([data-app="splitter"]) .item.locked .qty { display: none; }
:where([data-app="splitter"]) .item.locked .money .cur { left: 0; }
:where([data-app="splitter"]) .item.locked .money input { padding-left: 12px; padding-right: 0; }
:where([data-app="splitter"]) .item .who { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
:where([data-app="splitter"]) .item .who .stack { display: flex; padding-left: 7px; }
:where([data-app="splitter"]) .item .who .av { margin-left: -7px; box-shadow: 0 0 0 2px var(--surface); }
:where([data-app="splitter"]) .item .who { gap: 3px; }
:where([data-app="splitter"]) .item.locked .item-foot:not([hidden]) { margin-top: 4px; }
:where([data-app="splitter"]) .item.locked input { padding-top: 2px; padding-bottom: 2px; }
:where([data-app="splitter"]) .item.locked .name { text-overflow: ellipsis; }
:where([data-app="splitter"]) .item.locked .chips { margin-top: 2px; }
:where([data-app="splitter"]) .item-foot { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
:where([data-app="splitter"]) .item-foot .chips { flex: 1; margin-top: 0; }
:where([data-app="splitter"]) .item-foot .confirm { flex: none; }
:where([data-app="splitter"]) .item-foot { flex-wrap: wrap; }
:where([data-app="splitter"]) .btn.split { flex: none; min-height: 34px; padding: 6px 12px; border-radius: 999px; font-size: 13px; background: var(--surface); color: var(--muted); }
:where([data-app="splitter"]) .item-foot .split + .chips:empty { display: none; }
:where([data-app="splitter"]) .item.solo .chips { display: none; }
:where([data-app="splitter"]) .item.solo .item-foot, :where([data-app="splitter"]) .item.splitting .item-foot { justify-content: space-between; }
:where([data-app="splitter"]) .item.splitting .item-foot .chips { order: 10; flex: 1 1 100%; }
:where([data-app="splitter"]) .item.locked .item-foot { margin-top: 2px; }
:where([data-app="splitter"]) .btn.edit { min-height: 34px; padding: 6px 14px; border-radius: 11px; font-size: 14px; }
:where([data-app="splitter"]) .item.locked .item-foot { justify-content: space-between; }
:where([data-app="splitter"]) .item.locked.ok { box-shadow: inset 3px 0 0 var(--owed); padding-left: 12px; }
:where([data-app="splitter"]) .item .name-text { display: none; }
:where([data-app="splitter"]) .item.locked .name { display: none; }
:where([data-app="splitter"]) .item.locked .name-text { display: block; font-weight: 600; line-height: 1.25; min-width: 0; }
:where([data-app="splitter"]) .item.locked .name-text .nt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
:where([data-app="splitter"]) .item.locked .name-text small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
:where([data-app="splitter"]) .item.locked.ok .name-text { padding-left: 22px; background: var(--tick) no-repeat 0 .2em / 15px; }
:where([data-app="splitter"]) .item.locked.unassigned { padding-left: 12px; }
:where([data-app="splitter"]) .prow.ok { box-shadow: inset 3px 0 0 var(--owed); padding: 6px 0 6px 12px; }
:where([data-app="splitter"]) .prow.ok + .prow.ok { margin-top: 0; border-top: 1px solid var(--line); }
:where([data-app="splitter"]) .prow.ok input:disabled { padding-left: 22px; background: var(--tick) no-repeat 0 50% / 15px; }
:where([data-app="splitter"]) .btn.confirm { min-height: 36px; padding: 6px 14px; border-radius: 11px; font-size: 14px; background: var(--key); color: var(--on-key); }
:where([data-app="splitter"]) .item:not(.locked) .btn.confirm { width: 90px; min-height: 34px; padding: 4px; border-radius: 11px; margin: 0 29px 0 auto; }
:where([data-app="splitter"]) .item.draft { box-shadow: inset 0 0 0 1.5px var(--warn); }
:where([data-app="splitter"]) .item.flash { animation: flash .9s ease 2; }
:where([data-app="splitter"]) #addItem { margin-top: 20px; }
:where([data-app="splitter"]) .item.locked .chip { background: none; padding: 2px 6px 2px 0; font-size: 13px; }
:where([data-app="splitter"]) .seg { display: flex; gap: 4px; padding: 4px; margin-top: 4px; background: var(--surface); border-radius: 13px; }
:where([data-app="splitter"]) .seg button { flex: 1; min-height: 38px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--muted); }
:where([data-app="splitter"]) .seg button.on { background: var(--key); color: var(--on-key); }
:where([data-app="splitter"]) .seg button:disabled { cursor: default; }
:where([data-app="splitter"]) .claim { width: 34px; height: 34px; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--text) 25%, transparent); background: var(--surface); color: var(--on-accent); font: 700 16px/1 var(--display-font); display: grid; place-items: center; padding: 0; }
:where([data-app="splitter"]) .claim.on { background: var(--accent); border-color: var(--accent); }
:where([data-app="splitter"]) .claim:disabled { opacity: .3; cursor: default; }
:where([data-app="splitter"]) body.scan .item-row { grid-template-columns: 34px 1fr 38px 90px 24px; }
:where([data-app="splitter"]) body.scan .item.locked .item-row { grid-template-columns: 34px minmax(0, 1fr) 52px 84px 24px; }
:where([data-app="splitter"]) .units-left { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
:where([data-app="splitter"]) .item.unassigned .units-left { color: var(--warn); }
:where([data-app="splitter"]) .item.locked .chips.pick .chip { display: inline-flex; background: var(--surface); padding: 4px 11px 4px 4px; font-size: 14px; border: 1.5px solid transparent; }
:where([data-app="splitter"]) .item.locked .chips.pick .chip.on { border-color: var(--text); }
:where([data-app="splitter"]) body.scan .item-foot .chips { order: -2; flex: 1 1 calc(100% - 80px); }
:where([data-app="splitter"]) body.scan .item-foot .units-left { order: -1; flex: 0 0 72px; text-align: right; }
:where([data-app="splitter"]) body.scan .item-foot .units-left:empty, :where([data-app="splitter"]) body.scan .item-foot .chips:empty { display: none; }
:where([data-app="splitter"]) body.scan .item-foot .chips:empty + .units-left { flex-basis: 100%; }
:where([data-app="splitter"]) body.scan .item-foot .edit { margin-left: auto; }
:where([data-app="splitter"]) .btn.nosvc { min-height: 30px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: none; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
:where([data-app="splitter"]) .btn.nosvc.on { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); }
:where([data-app="splitter"]) .ns-tag { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
:where([data-app="splitter"]) #scanBtn { margin-top: 20px; }
:where([data-app="splitter"]) .split-note { margin: -4px 4px 10px; font-size: 13px; color: var(--muted); }
:where([data-app="splitter"]) .item:not(.locked) .item-foot { align-items: center; }
:where([data-app="splitter"]) #scanBtn + #addItem { margin-top: 8px; }
:where([data-app="splitter"]) .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
/* while a sheet is open the page behind stays still: no scrolling it through the sheet or the dimmed area */
html:where([data-app="splitter"]).sheet-open, html:where([data-app="splitter"]).sheet-open body { overflow: hidden; }
:where([data-app="splitter"]) .modal .scrim { touch-action: none; }
:where([data-app="splitter"]) .scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent env(safe-area-inset-top, 0px), rgba(0, 0, 0, 0.45) env(safe-area-inset-top, 0px)); animation: fade .18s ease; }   /* not under the status bar: see .scrim */
:where([data-app="splitter"]) .sheet h3 { font: 700 22px/1.2 var(--display-font); letter-spacing: -0.02em; margin: 0 0 8px; }
:where([data-app="splitter"]) .sheet p { margin: 0 0 16px; color: var(--muted); white-space: pre-line; }
:where([data-app="splitter"]) .sheet input { margin-bottom: 16px; font-size: 17px; padding: 14px; }
:where([data-app="splitter"]) .linkbox { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; font: 500 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; margin-bottom: 16px; user-select: all; -webkit-user-select: all; }
:where([data-app="splitter"]) .sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
:where([data-app="splitter"]) .sheet-actions .btn { flex: 1 1 0; min-height: 50px; }
@media (min-width: 640px) {
  :where([data-app="splitter"]) .modal { align-items: center; }
}
@media (max-width: 380px) {
  :where([data-app="splitter"]) .item-row { grid-template-columns: 1fr 36px 84px 24px; }
  :where([data-app="splitter"]) .item:not(.locked) .btn.confirm { width: 84px; }
  :where([data-app="splitter"]) body.scan .item-row { grid-template-columns: 32px 1fr 36px 84px 24px; }
  :where([data-app="splitter"]) .payrow { grid-template-columns: 1fr 1fr 92px 28px; }
  :where([data-app="splitter"]) .d-total { font-size: 48px; }
}
:where([data-app="splitter"]) .scrim { display: block; z-index: auto; align-items: normal; justify-content: normal; }
:where([data-app="splitter"]) .toast { display: block; gap: normal; align-items: normal; }
:where([data-app="splitter"]) .toast.show { animation: none; }
:where([data-app="splitter"]) .seg button { padding: revert; }
:where([data-app="splitter"]) .seg button.on { box-shadow: none; }
:where([data-app="splitter"]) .card .seg, :where([data-app="splitter"]) .sheet .seg { background: var(--surface); }
:where([data-app="splitter"]) .chips { padding: 0; overflow: visible; }
:where([data-app="splitter"]) .chip { flex: initial; min-height: 0; }
:where([data-app="splitter"]) .chev { display: revert; }
:where([data-app="splitter"]) .btn-row .btn.add + .btn.add { margin-top: 0; }

/* =====================================================================
   6. Gymmer.ino
   ===================================================================== */
html:where([data-app="gymmer"]) { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
:where([data-app="gymmer"]) body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 96px); }
:where([data-app="gymmer"]) h3 { font: 600 13px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 4px 6px; }
:where([data-app="gymmer"]) .legal { margin: 28px 4px 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
:where([data-app="gymmer"]) .brand .mark svg { width: 22px; height: 22px; stroke-width: 2.4; }
:where([data-app="gymmer"]) header .icon-btn { margin: -2px 0 0; height: 36px; }
:where([data-app="gymmer"]) header .head-actions { height: 34px; }
:where([data-app="gymmer"]) .home-hero p.hint { margin: 12px 4px 0; }
:where([data-app="gymmer"]) .split { background: var(--surface); border-radius: 18px; padding: 12px 14px 14px; margin-top: 16px; box-shadow: var(--shadow); }
:where([data-app="gymmer"]) .split-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
:where([data-app="gymmer"]) .split-label { font: 600 12px var(--font); letter-spacing: .06em; text-transform: uppercase; }
:where([data-app="gymmer"]) .split-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
:where([data-app="gymmer"]) .split-arrow { color: var(--muted); display: grid; }
:where([data-app="gymmer"]) .split-arrow svg { width: 14px; height: 14px; }
:where([data-app="gymmer"]) .split-ready { margin-left: auto; font-size: 13px; color: var(--muted); }
:where([data-app="gymmer"]) .split-ready b { font-size: 20px; color: var(--text); margin-right: 2px; }
:where([data-app="gymmer"]) .split-bar { margin-top: 10px; }   /* the shared progress bar (.vv-progress) */
:where([data-app="gymmer"]) .bill-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); cursor: pointer; text-align: left; }
:where([data-app="gymmer"]) .row { display: flex; gap: 10px; align-items: center; }
:where([data-app="gymmer"]) .row > .grow { flex: 1; min-width: 0; }
:where([data-app="gymmer"]) .stack { display: grid; gap: 10px; }
:where([data-app="gymmer"]) .wk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
:where([data-app="gymmer"]) .wk-head h2 { padding-bottom: 2px; }
:where([data-app="gymmer"]) .wk-head .sub { color: var(--muted); font-size: 14px; }
:where([data-app="gymmer"]) .ex-head { display: flex; gap: 10px; align-items: flex-start; }
:where([data-app="gymmer"]) .ex-name { font: 600 18px/1.25 var(--display-font); letter-spacing: -0.01em; }
:where([data-app="gymmer"]) .ex-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
:where([data-app="gymmer"]) .thumb { width: 52px; height: 52px; border-radius: 13px; overflow: hidden; flex: none; background: var(--surface-2); padding: 0; }
:where([data-app="gymmer"]) .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
:where([data-app="gymmer"]) .ex-last .target { color: var(--text); margin-top: 3px; }
:where([data-app="gymmer"]) .rir { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
:where([data-app="gymmer"]) .rir-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; }
:where([data-app="gymmer"]) .rir-q span { color: var(--muted); font-size: 13px; }
:where([data-app="gymmer"]) .photo { position: relative; margin: 0 auto 14px; max-width: 340px; border-radius: 18px; overflow: hidden; background: var(--surface-2); aspect-ratio: 1; }
:where([data-app="gymmer"]) .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:where([data-app="gymmer"]) .photo img.end { animation: flip 2.4s steps(1) infinite; }
:where([data-app="gymmer"]) .photo figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); padding: 3px 8px; border-radius: 7px; }
:where([data-app="gymmer"]) ol.steps, :where([data-app="gymmer"]) ul.cues { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15px; }
:where([data-app="gymmer"]) ul.cues li::marker { color: var(--accent); }
:where([data-app="gymmer"]) .credit { font-size: 12px; color: var(--muted); margin: 16px 2px 0; }
:where([data-app="gymmer"]) .credit a, :where([data-app="gymmer"]) .ex-sub a { color: inherit; }
:where([data-app="gymmer"]) .ex-last { font-size: 13px; color: var(--muted); background: var(--surface-2); border-radius: 10px; padding: 6px 10px; margin: 10px 0 4px; }
:where([data-app="gymmer"]) .sets { margin-top: 8px; }
:where([data-app="gymmer"]) .set-row { display: grid; grid-template-columns: 34px 1fr 1fr 44px 32px; gap: 8px; align-items: center; padding: 4px 0; }
:where([data-app="gymmer"]) .set-row.head { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding-bottom: 0; }
:where([data-app="gymmer"]) .set-row.head span:nth-child(2), :where([data-app="gymmer"]) .set-row.head span:nth-child(3) { text-align: center; }
:where([data-app="gymmer"]) .set-n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--muted); }
:where([data-app="gymmer"]) .set-row input { width: 100%; min-width: 0; height: 44px; border-radius: 12px; border: 1.5px solid transparent; background: var(--surface-2); color: var(--text); text-align: center; font: 600 18px/1 var(--display-font); font-variant-numeric: tabular-nums; }
:where([data-app="gymmer"]) .set-row input:focus { outline: none; border-color: var(--focus); }
:where([data-app="gymmer"]) .set-row input::placeholder { color: var(--muted); opacity: .6; }
:where([data-app="gymmer"]) .check { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
:where([data-app="gymmer"]) .check svg { width: 22px; height: 22px; stroke-width: 2.6; }
:where([data-app="gymmer"]) .set-row.done .check { background: var(--accent); color: var(--on-accent); }
:where([data-app="gymmer"]) .set-row.done .set-n { background: var(--accent); color: var(--on-accent); }
:where([data-app="gymmer"]) .set-row.done input { background: transparent; }
:where([data-app="gymmer"]) .del { width: 32px; height: 44px; display: grid; place-items: center; color: var(--muted); opacity: .7; }
:where([data-app="gymmer"]) .ex-foot { display: flex; gap: 8px; margin-top: 8px; }
:where([data-app="gymmer"]) .wk-actions { display: grid; gap: 10px; margin-top: 16px; }
:where([data-app="gymmer"]) .bodymap { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
:where([data-app="gymmer"]) .bodymap figure { margin: 0; text-align: center; }
:where([data-app="gymmer"]) .bodymap figcaption { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
:where([data-app="gymmer"]) .bodymap svg { width: 100%; height: auto; max-height: 380px; }
:where([data-app="gymmer"]) .bodymap .base { fill: var(--body); }
:where([data-app="gymmer"]) .bodymap [data-m] { stroke: var(--surface); stroke-width: 1.5; cursor: pointer; transition: fill .3s; }
:where([data-app="gymmer"]) .bodymap [data-m].sel { stroke: var(--text); stroke-width: 2; }
:where([data-app="gymmer"]) .bodymap .seam { stroke: var(--surface); stroke-width: 1.5; fill: none; pointer-events: none; }
:where([data-app="gymmer"]) .legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 8px; }
:where([data-app="gymmer"]) .legend .ramp { flex: 1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--muscle-0), var(--heat)); }
:where([data-app="gymmer"]) .readout { min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; color: var(--muted); }
:where([data-app="gymmer"]) .readout b { color: var(--text); }
:where([data-app="gymmer"]) .mbar { display: grid; grid-template-columns: 96px 1fr 92px; gap: 10px; align-items: center; padding: 7px 0; font-size: 14px; width: 100%; text-align: left; }
:where([data-app="gymmer"]) .mbar .track { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
:where([data-app="gymmer"]) .mbar .track i { display: block; height: 100%; border-radius: 99px; }
:where([data-app="gymmer"]) .mbar .v { text-align: right; color: var(--muted); font-size: 13px; }
:where([data-app="gymmer"]) .row.filter-foot { margin: 12px 2px 10px; justify-content: space-between; }
:where([data-app="gymmer"]) p.hint.lead { margin: -6px 2px 14px; }
:where([data-app="gymmer"]) .ex-sub.intro { margin: 0 0 10px; }
:where([data-app="gymmer"]) .seg.units { width: 140px; }
:where([data-app="gymmer"]) .checkrow .s { color: var(--muted); font-size: 13px; }
:where([data-app="gymmer"]) .mbar .track i.key-fill { background: var(--key); }

/* =====================================================================
   7. Shior.ino (the book pages themselves are styled by the reader, not here)
   ===================================================================== */
:where([data-app="shiori"]) button { padding: 0; }
html:where([data-app="shiori"]) { -webkit-text-size-adjust: 100%; }
:where([data-app="shiori"]) body { padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 100px); overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
:where([data-app="shiori"]) body.reading { overflow: hidden; }
:where([data-app="shiori"]) body.reading .tabbar, :where([data-app="shiori"]) body.reading main { display: none; }
:where([data-app="shiori"]) .home-hero { padding-top: 0; }
:where([data-app="shiori"]) .search { margin-bottom: 4px; }
:where([data-app="shiori"]) .rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(440px, 86%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; scroll-padding: 0 16px; }
:where([data-app="shiori"]) .rail::-webkit-scrollbar { display: none; }
:where([data-app="shiori"]) .rail.single { grid-auto-columns: min(560px, 100%); }
:where([data-app="shiori"]) .now-card { --tint: var(--key); position: relative; overflow: hidden; scroll-snap-align: start; width: 100%; text-align: left; display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; padding: 16px; border-radius: 24px; color: #ffffff; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tint) 72%, #ffffff 28%) 0%, transparent 60%), linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--tint) 50%, #000000 50%)); transition: transform .08s ease; }
:where([data-app="shiori"]) .now-card:active { transform: scale(0.98); }
:where([data-app="shiori"]) .now-card .cover { box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 12px 24px -10px rgba(0, 0, 0, .6); }
:where([data-app="shiori"]) .now-card .label { font: 600 12px var(--font); letter-spacing: .06em; text-transform: uppercase; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-app="shiori"]) .now-card h3 { margin: 4px 0 2px; font: 700 19px/1.2 var(--display-font); letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where([data-app="shiori"]) .now-card .by { font-size: 13px; opacity: .75; margin: 0 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-app="shiori"]) .now-card .track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; }
:where([data-app="shiori"]) .now-card .track i { display: block; height: 100%; border-radius: inherit; background: #ffffff; }
:where([data-app="shiori"]) .now-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; }
:where([data-app="shiori"]) .now-card .foot .num { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-app="shiori"]) .now-card .btn { background: #ffffff; color: #111113; flex: none; }
:where([data-app="shiori"]) .lib-bar { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; }
:where([data-app="shiori"]) .lib-bar .chips { flex: 1; min-width: 0; padding-bottom: 4px; }
:where([data-app="shiori"]) .lib-bar .btn { flex: none; margin-top: 6px; }
:where([data-app="shiori"]) .covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 26px clamp(14px, 2.4vw, 24px); align-items: start; }
@media (max-width: 480px) {
  :where([data-app="shiori"]) .covers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
}
:where([data-app="shiori"]) .book-tile { display: block; width: 100%; text-align: left; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
:where([data-app="shiori"]) .book-tile .cover-box { position: relative; margin-top: 10px; isolation: isolate; transition: transform .08s ease; } /* every tile keeps the series-stack headroom, so covers line up */
:where([data-app="shiori"]) .book-tile:active .cover-box { transform: scale(0.97); }
:where([data-app="shiori"]) .cover { position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); container-type: inline-size; }
:where([data-app="shiori"]) .cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; box-shadow: inset 0 0 0 1px var(--line); }
:where([data-app="shiori"]) .cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
:where([data-app="shiori"]) .cover img.arrived { animation: fade .35s ease; }
:where([data-app="shiori"]) .shelf-loading { display: flex; align-items: center; gap: 10px; font-size: 15px; }
:where([data-app="shiori"]) .shelf-loading .spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--text); animation: spin .8s linear infinite; }
:where([data-app="shiori"]) .book-tile .meta { padding: 9px 2px 0; min-width: 0; }
:where([data-app="shiori"]) .book-tile .t { font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line: every tile is the same size */
:where([data-app="shiori"]) .book-tile .s { margin-top: 2px; height: 18px; font-size: 13px; line-height: 18px; color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
:where([data-app="shiori"]) .book-tile .s .done { color: var(--good); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
:where([data-app="shiori"]) .book-tile .s .done svg.i { width: 14px; height: 14px; stroke-width: 2.6; }
:where([data-app="shiori"]) .book-tile .s .new { color: var(--text); font-weight: 600; }
:where([data-app="shiori"]) .book-tile .bar { margin-top: 7px; }   /* the shared progress bar (.vv-progress) */
:where([data-app="shiori"]) .book-tile .bar.blank { visibility: hidden; } /* keeps the space on books without progress */
/* a novel's difficulty, 0-100 (difficulty.js): a pink pill at the top right (finished books say so under the cover) */
:where([data-app="shiori"]) .cover .diff { position: absolute; top: 6px; right: 6px; z-index: 2; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: var(--shiori); color: var(--on-module); font: 700 13px/1 var(--display-font); font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
:where([data-app="shiori"]) .row-actions { display: flex; gap: 6px; flex: none; }
/* Shior.ino: the "Show all / Show fewer" row at the end of a shortened list */
:where([data-app="shiori"]) .list .li.more { justify-content: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 14px; min-height: 46px; }
:where([data-app="shiori"]) .list .li.more svg.i { width: 16px; height: 16px; stroke-width: 2.4; }
:where([data-app="shiori"]) .list .li.more svg.i.down { transform: rotate(90deg); }
:where([data-app="shiori"]) .list .li.more svg.i.up { transform: rotate(-90deg); }
/* Shior.ino: Calibre books that aren't on this device yet, and their download progress */
:where([data-app="shiori"]) .cover .cloud-badge { position: absolute; bottom: 6px; right: 6px; z-index: 2; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
:where([data-app="shiori"]) .cover .cloud-badge svg.i { width: 15px; height: 15px; stroke-width: 2.4; }
:where([data-app="shiori"]) .book-tile.remote .cover img, :where([data-app="shiori"]) .book-tile.remote .cover .gen-cover { filter: saturate(.75) brightness(.92); }
:where([data-app="shiori"]) .book-tile .s .cloud { display: inline-flex; align-items: center; gap: 3px; }
:where([data-app="shiori"]) .book-tile .s .cloud svg.i { width: 13px; height: 13px; stroke-width: 2.4; }
:where([data-app="shiori"]) .book-tile .dl { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .5); overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; }
:where([data-app="shiori"]) .book-tile .dl i { display: block; height: 100%; width: calc(var(--dl, 0) * 100%); background: var(--accent); border-radius: inherit; transition: width .2s; }
:where([data-app="shiori"]) .book-tile.downloading .dl { opacity: 1; }
:where([data-app="shiori"]) .book-tile.downloading .cloud-badge { display: none; }
:where([data-app="shiori"]) .cover .count { position: absolute; right: 6px; bottom: 6px; z-index: 2; padding: 3px 8px; border-radius: 999px; background: var(--key); color: var(--on-key); font: 700 12px/1.3 var(--display-font); }
:where([data-app="shiori"]) .book-tile.series .cover-box::before, :where([data-app="shiori"]) .book-tile.series .cover-box::after { content: ""; position: absolute; left: 7%; right: 7%; top: -5px; height: 30px; border-radius: 9px 9px 0 0; background: var(--muted); opacity: .35; z-index: -1; }
:where([data-app="shiori"]) .book-tile.series .cover-box::after { left: 14%; right: 14%; top: -10px; opacity: .18; }
:where([data-app="shiori"]) .gen-cover { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 13% 12%; color: #ffffff; overflow: hidden; }
:where([data-app="shiori"]) .gen-cover::before { content: ""; width: 22%; height: 3px; border-radius: 2px; background: currentColor; opacity: .75; margin-bottom: 12%; flex: none; }
:where([data-app="shiori"]) .gen-cover .t { font: 700 clamp(11px, 11cqw, 19px)/1.25 var(--display-font); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
:where([data-app="shiori"]) .gen-cover .a { margin-top: auto; font: 500 clamp(9px, 7.5cqw, 12px)/1.3 var(--font); opacity: .8; }
:where([data-app="shiori"]) .sheet-book { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; margin-bottom: 16px; }
:where([data-app="shiori"]) .sheet-book h2 { margin-bottom: 2px; }
:where([data-app="shiori"]) .sheet-book .sub { margin: 0 0 10px; }
:where([data-app="shiori"]) .sheet-book .series { font: 600 12px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
:where([data-app="shiori"]) .meter { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
:where([data-app="shiori"]) .meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
:where([data-app="shiori"]) .sheet .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 4px; }
:where([data-app="shiori"]) .sheet .stat .v { font-size: 22px; }
:where([data-app="shiori"]) .form-grid { display: grid; gap: 12px; margin-bottom: 16px; }
:where([data-app="shiori"]) .form-grid .two { display: grid; grid-template-columns: 1fr 100px; gap: 10px; }
:where([data-app="shiori"]) .stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (max-width: 640px) {
  :where([data-app="shiori"]) .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where([data-app="shiori"]) .stats-grid .stat:last-child { grid-column: 1 / -1; }
}
:where([data-app="shiori"]) .chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
:where([data-app="shiori"]) .chart-head .title { font: 600 18px/1.25 var(--display-font); letter-spacing: -0.01em; }
/* Stats: your level, this week against your usual, and the kanji you look up most */
:where([data-app="shiori"]) .level-card > .title { font: 600 18px/1.25 var(--display-font); letter-spacing: -0.01em; }
:where([data-app="shiori"]) .level-head { display: flex; align-items: center; gap: 16px; margin: 10px 0 12px; }
:where([data-app="shiori"]) .level-num { font: 700 64px/1 var(--display-font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
:where([data-app="shiori"]) .level-band { font: 600 18px/1.2 var(--display-font); }
:where([data-app="shiori"]) .level-delta { font-size: 14px; color: var(--muted); margin-top: 3px; }
:where([data-app="shiori"]) .level-meter { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
:where([data-app="shiori"]) .level-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
:where([data-app="shiori"]) .level-parts { display: grid; gap: 4px; margin: 12px 0 4px; font-size: 14px; color: var(--muted); }
:where([data-app="shiori"]) .level-parts b { color: var(--text); font-weight: 600; }
:where([data-app="shiori"]) .level-card .chart { margin-top: 12px; }
:where([data-app="shiori"]) .trend { font: 600 14px var(--display-font); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
:where([data-app="shiori"]) .trend.good { color: var(--text); }
:where([data-app="shiori"]) .kanji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; margin-top: 10px; }
:where([data-app="shiori"]) .kanji { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); transition: transform .28s var(--spring), background-color .2s ease, color .2s ease; }
:where([data-app="shiori"]) .kanji:active { transform: scale(.95); transition-duration: .07s; }
:where([data-app="shiori"]) .kanji b { font: 500 30px/1.1 "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
:where([data-app="shiori"]) .kanji small { font: 600 12px var(--display-font); color: var(--muted); }
:where([data-app="shiori"]) .kanji.on { background: var(--key); color: var(--on-key); }
:where([data-app="shiori"]) .kanji.on small { color: inherit; opacity: .75; }
:where([data-app="shiori"]) .chart-head .seg { min-width: 240px; }
:where([data-app="shiori"]) .chart { position: relative; }
:where([data-app="shiori"]) .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
:where([data-app="shiori"]) .chart .axis text { fill: var(--muted); font: 500 11px var(--display-font); font-variant-numeric: tabular-nums; }
:where([data-app="shiori"]) .chart .grid line { stroke: var(--line); }
:where([data-app="shiori"]) .chart .bar { fill: var(--key); }
:where([data-app="shiori"]) .chart .bar.today { fill: var(--accent); }
:where([data-app="shiori"]) .chart .line { stroke: var(--key); stroke-width: 2; fill: none; }
:where([data-app="shiori"]) .chart .dot { fill: var(--surface); stroke: var(--key); stroke-width: 2; }
:where([data-app="shiori"]) .chart .tip { position: absolute; pointer-events: none; background: var(--key); color: var(--on-key); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; white-space: nowrap; transform: translate(-50%, -100%); margin-top: -8px; opacity: 0; transition: opacity .12s; }
:where([data-app="shiori"]) .chart .tip.show { opacity: 1; }
:where([data-app="shiori"]) .li .mini { width: 30px; flex: none; }
:where([data-app="shiori"]) .li .mini .cover { border-radius: 5px; box-shadow: none; }
:where([data-app="shiori"]) .li .word { font-weight: 600; }
:where([data-app="shiori"]) .li .word small { color: var(--muted); font-weight: 500; margin-left: 6px; }
:where([data-app="shiori"]) .li .btn.small { flex: none; }
:where([data-app="shiori"]) .progress { margin: 2px 2px 12px; }   /* the shared progress bar (.vv-progress) */
:where([data-app="shiori"]) .progress i { width: 0; transition: width .2s; }
:where([data-app="shiori"]) .drop-hint { position: fixed; inset: 12px; z-index: 80; border: 2px dashed var(--text); border-radius: 28px; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 80%, transparent); pointer-events: none; font: 700 22px var(--display-font); }
:where([data-app="shiori"]) #view-reader { position: fixed; inset: 0; z-index: 20; overflow: hidden; background: var(--r-bg); color: var(--text); }
:where([data-app="shiori"]) #view-reader[data-theme="white"] { --r-bg: #ffffff; --text: #1a1a1c; --surface: #ffffff; --surface-2: #f2f2f4; --muted: #6b6b74; --line: rgba(0, 0, 0, .08); --key: #1a1a1c; --on-key: #ffffff; color-scheme: light; }
:where([data-app="shiori"]) #view-reader[data-theme="paper"] { --r-bg: #f7f3ea; --text: #2a2621; --surface: #fdfbf6; --surface-2: #efe9dc; --muted: #7a7266; --line: rgba(42, 38, 33, .1); --key: #2a2621; --on-key: #fdfbf6; color-scheme: light; }
:where([data-app="shiori"]) #view-reader[data-theme="sepia"] { --r-bg: #ecdfc6; --text: #3b2f22; --surface: #f6ecda; --surface-2: #e3d4b8; --muted: #7a6a55; --line: rgba(59, 47, 34, .12); --key: #3b2f22; --on-key: #f6ecda; color-scheme: light; }
:where([data-app="shiori"]) #view-reader[data-theme="night"] { --r-bg: #161618; --text: #d6d6da; --surface: #232326; --surface-2: #2e2e32; --muted: #9a9aa3; --line: rgba(255, 255, 255, .09); --key: #d6d6da; --on-key: #161618; color-scheme: dark; }
:where([data-app="shiori"]) #view-reader foliate-view { position: absolute; inset: calc(env(safe-area-inset-top) + 4px) 0 calc(env(safe-area-inset-bottom) + 20px) 0; display: block; }
/* Manga pages use the whole screen, edge to edge. The page number lives in the bottom bar instead. */
:where([data-app="shiori"]) #view-reader.manga foliate-view { inset: 0; }
/* page turns: a quick cross-fade of the page alone (reader.js turn); the rest of the screen stays as it is */
html.r-turning[data-app="shiori"] #view-reader foliate-view { view-transition-name: r-page; }
html.r-turning::view-transition-old(root), html.r-turning::view-transition-new(root) { animation: none; }
html.r-turning::view-transition-group(root), html.r-turning::view-transition-group(r-page) { animation: none; }
html.r-turning::view-transition-old(r-page) { animation: r-fade-out .15s ease-out both; }
html.r-turning::view-transition-new(r-page) { animation: r-fade-in .15s ease-out both; }
@keyframes r-fade-out { to { opacity: 0; } }
@keyframes r-fade-in { from { opacity: 0; } }
:where([data-app="shiori"]) #view-reader.manga .r-footer { display: none; }
/* Reader bars: solid floating cards over the page (no fade into the page), with full-size 44px buttons.
   Sized first for the iPad mini (744 x 1133 portrait); they stay centred and capped on wider screens. */
:where([data-app="shiori"]) .r-bar { position: absolute; left: 12px; right: 12px; z-index: 5; margin: 0 auto; max-width: 760px;
  background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 0; border-radius: 24px; box-shadow: var(--glass-shadow);
  transition: transform .32s var(--glide), opacity .22s ease; }
:where([data-app="shiori"]) .r-top { top: calc(env(safe-area-inset-top) + 10px); display: flex; align-items: center; gap: 6px; padding: 8px; min-height: 62px; }
:where([data-app="shiori"]) .r-top .title { flex: 1; min-width: 0; text-align: center; padding: 0 6px; }
:where([data-app="shiori"]) .r-top .title span { display: block; font: 600 16px/1.25 var(--display-font); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-app="shiori"]) .r-top .title small { display: block; font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-app="shiori"]) .r-top .icon-btn { width: 46px; height: 46px; border-radius: 16px; color: var(--text); }
:where([data-app="shiori"]) .r-top .icon-btn:active { background: var(--surface-2); }
:where([data-app="shiori"]) .r-top .icon-btn svg.i { width: 24px; height: 24px; }
:where([data-app="shiori"]) .r-top .icon-btn.furi { font: 700 19px var(--font); }
:where([data-app="shiori"]) .r-top .icon-btn.furi.on { background: var(--key); color: var(--on-key); }
:where([data-app="shiori"]) .r-bottom { bottom: calc(env(safe-area-inset-bottom) + 10px); padding: 12px 20px 12px; }
:where([data-app="shiori"]) .r-bottom .row { display: flex; align-items: center; gap: 16px; font: 600 14px var(--display-font); font-variant-numeric: tabular-nums; color: var(--muted); }
:where([data-app="shiori"]) .r-bottom .info { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); margin-top: 4px; }
:where([data-app="shiori"]) .r-bottom .info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-app="shiori"]) .r-bottom .info:empty, :where([data-app="shiori"]) .r-bottom .info:not(:has(span:not(:empty))) { display: none; }
:where([data-app="shiori"]) .r-bottom input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 36px; background: transparent; margin: 0; }
:where([data-app="shiori"]) .r-bottom input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--line); }
:where([data-app="shiori"]) .r-bottom input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--key); margin-top: -10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
:where([data-app="shiori"]) .r-bottom input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--line); }
:where([data-app="shiori"]) .r-bottom input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--key); }
:where([data-app="shiori"]) #view-reader:not(.chrome) .r-top { transform: translateY(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
:where([data-app="shiori"]) #view-reader:not(.chrome) .r-bottom { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
:where([data-app="shiori"]) .r-footer { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 3px); z-index: 2; height: 16px; text-align: center; font: 500 11px var(--display-font); color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
:where([data-app="shiori"]) .r-loading { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; background: var(--r-bg); color: var(--muted); font-size: 14px; font-weight: 500; }
:where([data-app="shiori"]) .spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--text); animation: spin .8s linear infinite; margin: 0 auto 14px; }
:where([data-app="shiori"]) .r-panel { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top) + 84px); right: max(12px, calc((100% - 760px) / 2)); width: min(360px, calc(100% - 24px)); max-height: calc(100% - env(safe-area-inset-top) - 150px); overflow: auto; background: var(--surface); border-radius: 24px; padding: 6px 16px 16px; box-shadow: var(--shadow-float); animation: up .22s cubic-bezier(.2, .8, .2, 1); }
:where([data-app="shiori"]) .r-panel .subhead:first-child { margin-top: 12px; }
:where([data-app="shiori"]) .swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
:where([data-app="shiori"]) .swatch { height: 56px; border-radius: 14px; font-size: 12px; font-weight: 600; display: grid; place-items: center; align-content: center; gap: 2px; border: 1.5px solid var(--line); }
:where([data-app="shiori"]) .swatch b { font: 600 18px/1 "Hiragino Mincho ProN", "Yu Mincho", serif; display: block; }
:where([data-app="shiori"]) .swatch.on { border-color: var(--text); }
:where([data-app="shiori"]) .r-panel .stepper { justify-content: space-between; background: var(--surface-2); border-radius: 13px; padding: 3px; }
:where([data-app="shiori"]) .r-panel .stepper button { background: var(--surface); }
:where([data-app="shiori"]) .r-panel .field input { margin-bottom: 8px; }
:where([data-app="shiori"]) .toc-list { list-style: none; margin: 0; padding: 0; }
:where([data-app="shiori"]) .toc-list button { display: block; width: 100%; text-align: left; padding: 10px 10px; border-radius: 12px; font-size: 15px; line-height: 1.35; }
:where([data-app="shiori"]) .toc-list button.current { font-weight: 700; background: var(--surface-2); }
:where([data-app="shiori"]) .toc-list ul { list-style: none; padding-left: 14px; margin: 0; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup { position: absolute; z-index: 8; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); max-height: 46%; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); color: var(--text); border-radius: 24px; box-shadow: var(--shadow-float); animation: up .22s cubic-bezier(.2, .8, .2, 1); }
:where([data-app="shiori"], [data-app="watcher"]) .lookup.bottom { bottom: calc(env(safe-area-inset-bottom) + 24px); }
:where([data-app="shiori"], [data-app="watcher"]) .lookup.top { top: calc(env(safe-area-inset-top) + 16px); }
/* placed next to the word (placeCard): grows out from it */
:where([data-app="shiori"], [data-app="watcher"]) .lookup.anchored { transform: none; animation: card-in .2s var(--glide); }
:where([data-app="shiori"], [data-app="watcher"]) .lookup.anchored.under { transform-origin: 50% 0; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup.anchored.over { transform-origin: 50% 100%; }
@keyframes card-in { from { opacity: 0; transform: scale(.96); } }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-scroll { overflow: auto; padding: 16px 18px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-head { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .hw { font: 700 30px/1.15 var(--font); }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .hw ruby rt { font: 600 12.5px var(--font); color: var(--muted); letter-spacing: .06em; padding-bottom: 2px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-head .badge { margin-bottom: 6px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .deinf { font-size: 13px; color: var(--muted); margin: 0 0 6px; font-weight: 500; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .deinf .emph { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: 11px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup ol { margin: 12px 0 6px; padding-left: 22px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup li { margin: 0 0 8px; line-height: 1.45; font-size: 15px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup li::marker { color: var(--muted); font: 600 13px var(--display-font); }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .pos { display: block; margin-bottom: 1px; font: 600 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .misc { font-size: 12px; color: var(--muted); margin-left: 5px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .forms { font-size: 13px; color: var(--muted); margin: 6px 0 4px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .more-entry { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 10px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .more-entry .hw { font-size: 21px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .none { color: var(--muted); font-size: 14px; margin: 12px 0; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-actions { display: flex; gap: 8px; padding: 10px 14px 14px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-actions .btn { flex: 1; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .spinner { padding: 22px; display: grid; place-items: center; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .spinner::after { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--text); animation: spin .8s linear infinite; }
:where([data-app="shiori"]) a { color: inherit; text-decoration: none; }
:where([data-app="shiori"]) p.hint a { text-decoration: underline; text-decoration-color: var(--line); }
:where([data-app="shiori"]) .font-mincho { font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif; }
:where([data-app="shiori"]) .font-gothic { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif; }
:where([data-app="shiori"]) .r-panel .btn.block { margin-top: 4px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-head .badge + .badge { margin-left: 4px; }
/* Shior.ino: "Not right?" on a lookup card, and dragging across the right word */
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-actions .not-right { flex: 0 0 auto; color: var(--muted); }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .picked-note { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
:where([data-app="shiori"]) .r-pick { position: absolute; z-index: 9; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); animation: pick-in .25s ease-out both; }
@keyframes pick-in { from { opacity: 0; transform: translate(-50%, 8px); } }
/* Shior.ino: manga lookups (hold on a bubble, or hold and drag a box) */
:where([data-app="shiori"]) .ocr-mark { position: absolute; z-index: 7; pointer-events: none; border: 2.5px solid var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
:where([data-app="shiori"]) .ocr-mark.ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; animation: ocr-ring .45s ease-out both; }
:where([data-app="shiori"]) .ocr-mark.busy { animation: ocr-pulse 1.1s ease-in-out infinite; }
@keyframes ocr-ring { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ocr-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 8%, transparent); } }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .ocr-status { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 0; color: var(--muted); font-weight: 500; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .ocr-status .spinner { padding: 0; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .ocr-line { margin: 0 0 4px; font: 500 22px/2.1 var(--font); letter-spacing: .02em; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .ocr-line rt { font: 600 11px var(--font); color: var(--muted); letter-spacing: .04em; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .ocr-line .w { font: inherit; color: inherit; background: none; border: 0; padding: 0 1px; margin: 0; border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .ocr-line .w.on { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 2px 0 var(--accent); }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .ocr-note { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 6px 0 10px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .ocr-hint { color: var(--muted); font-size: 14px; margin: 8px 0; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .ocr-entries { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .ocr-buttons { display: flex; gap: 8px; margin: 12px 0 8px; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .ocr-buttons .btn { flex: 1; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .progress { margin: 4px 0 8px; }
/* the translation inside a lookup card (the lookup card is Shior.ino's, and Watcher.ino's for its subtitles) */
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-translation { margin: 6px 0 10px; padding: 10px 12px; background: var(--surface-2); border-radius: 14px; font-size: 15px; line-height: 1.45; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-translation p { margin: 0; }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-translation .src { display: block; margin-top: 4px; font: 600 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-translation .muted { color: var(--muted); }
:where([data-app="shiori"], [data-app="watcher"]) .lookup .lk-translation.error p { color: var(--danger); font-size: 14px; }
:where([data-app="shiori"]) .page-head .subhead { margin-top: 18px; }

:where([data-app="shiori"]) .sheet .progress { margin: 12px 0 0; }

/* =====================================================================
   8. Mapper.ino (the map itself is Google's; this styles everything around it)
   ===================================================================== */
html:where([data-app="mapper"]) { -webkit-text-size-adjust: 100%; }
:where([data-app="mapper"]) body { padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 96px); }
/* the map's search field, floating over the top of the map */
:where([data-app="mapper"]) .map-search { display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); height: 46px; margin: 0 12px 8px; padding: 0 16px; border-radius: 999px; font-size: 17px; color: var(--muted); text-align: left; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 0; box-shadow: var(--glass-shadow); }
:where([data-app="mapper"]) .map-search svg.i { width: 18px; height: 18px; }
:where([data-app="mapper"]) .row { display: flex; gap: 10px; align-items: center; }
:where([data-app="mapper"]) .row > .grow { flex: 1; min-width: 0; }
/* the map fills the screen under the header, and the tab bar floats over its foot */
:where([data-app="mapper"]) body.on-map { height: 100dvh; display: flex; flex-direction: column; padding-bottom: 0; overflow: hidden; }
:where([data-app="mapper"]) body.on-map main { flex: none; width: 100%; }
:where([data-app="mapper"]) .map-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* the one exception to the suite's no-zoom rule: pinching the map zooms the map (never the page) */
:where([data-app="mapper"]) #map { position: absolute; inset: 0; background: var(--surface-2); touch-action: none; }
:where([data-app="mapper"]) .map-note { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px 32px 120px; text-align: center; color: var(--muted); font-size: 15px; background: var(--bg); }
:where([data-app="mapper"]) .map-note b { display: block; color: var(--text); font: 700 20px/1.2 var(--display-font); margin-bottom: 6px; }
:where([data-app="mapper"]) .map-top { position: absolute; z-index: 2; top: 10px; left: 0; right: 0; pointer-events: none; }
:where([data-app="mapper"]) .map-top > * { pointer-events: auto; }
:where([data-app="mapper"]) .map-top .chips { padding: 0 12px 10px; }
:where([data-app="mapper"]) .map-top .chip:not(.on) { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 0; box-shadow: var(--glass-shadow); }
:where([data-app="mapper"]) .map-top .chip.on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .12), 0 6px 16px -6px rgba(0, 0, 0, .3); }
:where([data-app="mapper"]) .map-btns { position: absolute; z-index: 2; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 92px); display: grid; gap: 8px; }
:where([data-app="mapper"]) .map-btn { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--text); transition: transform .28s var(--spring); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 0; box-shadow: var(--glass-shadow); }
:where([data-app="mapper"]) .map-btn:active { transform: scale(0.9); transition-duration: .07s; }
:where([data-app="mapper"]) .map-btn svg.i { width: 20px; height: 20px; }
:where([data-app="mapper"]) .map-count { position: absolute; z-index: 2; left: 12px; bottom: calc(env(safe-area-inset-bottom) + 100px); padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 0; box-shadow: var(--glass-shadow); }
/* the tag filter: chips with a count, and "all / any" once two or more are picked */
:where([data-app="mapper"]) .chip .n { margin-left: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
:where([data-app="mapper"]) .chip.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
:where([data-app="mapper"]) .chip.on .n { color: inherit; opacity: .6; }
:where([data-app="mapper"]) .chip.clear { color: var(--text); font-weight: 600; }
:where([data-app="mapper"]) .chip .sw { margin-right: 7px; }
:where([data-app="mapper"]) .chip.filter-btn { color: var(--text); font-weight: 600; gap: 6px; }
:where([data-app="mapper"]) .chip.filter-btn svg.i { width: 16px; height: 16px; }
:where([data-app="mapper"]) .chip.colours-btn { color: var(--text); font-weight: 600; }
:where([data-app="mapper"]) .chip.colours-btn .sw { margin-right: 0; }
:where([data-app="mapper"]) .chip.colours-btn .sw + .sw { margin-left: -3px; }
:where([data-app="mapper"]) .chip.colours-btn .sw:last-of-type { margin-right: 7px; }
:where([data-app="mapper"]) .chip.picked { color: var(--text); font-weight: 600; border-color: var(--text); }
:where([data-app="mapper"]) .chip.picked svg.i { width: 14px; height: 14px; margin-left: 6px; color: var(--muted); }
/* a tag's colour: a small swatch beside its name */
:where([data-app="mapper"]) .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--text) 12%, transparent); }
:where([data-app="mapper"]) h2 .sw { width: 16px; height: 16px; vertical-align: 2px; }
:where([data-app="mapper"]) .li .sw { width: 14px; height: 14px; }
:where([data-app="mapper"]) .swatches { display: flex; flex-wrap: wrap; gap: 10px; }
:where([data-app="mapper"]) .swatch { width: 36px; height: 36px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px color-mix(in srgb, #000 10%, transparent); transition: transform .28s var(--spring); }
:where([data-app="mapper"]) .swatch.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
:where([data-app="mapper"]) .swatch:active { transform: scale(0.9); transition-duration: .07s; }
:where([data-app="mapper"]) .place-tags .chip { color: var(--text); font-weight: 600; }
:where([data-app="mapper"]) .place-tags .tag-group:first-child { margin-top: 2px; }
:where([data-app="mapper"]) .tag-group { font: 600 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 10px 2px 0; }
:where([data-app="mapper"]) .group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:where([data-app="mapper"]) .group-head .subhead .count { color: var(--muted); font-weight: 500; letter-spacing: 0; margin-left: 4px; opacity: .8; }
:where([data-app="mapper"]) .group-actions { display: flex; align-items: center; gap: 2px; margin-top: 10px; }
:where([data-app="mapper"]) .li.more { justify-content: center; color: var(--muted); font-weight: 600; font-size: 14px; min-height: 48px; }
:where([data-app="mapper"]) .chip.more { color: var(--text); font-weight: 600; border: 1.5px dashed var(--line); background: transparent; }
:where([data-app="mapper"]) .sheet-search { margin: 4px 0 2px; }
:where([data-app="mapper"]) .ask-group { background: var(--surface-2); box-shadow: none; margin: 14px 0 0; padding: 14px; }
:where([data-app="mapper"]) .ask-group .chips { padding-top: 10px; }
:where([data-app="mapper"]) .ask-group .sheet .chip, :where([data-app="mapper"]) .ask-group .chip { background: var(--surface); }
:where([data-app="mapper"]) .tags-view .search { margin-bottom: 2px; }
:where([data-app="mapper"]) .tags-summary { margin: 10px 4px 0; color: var(--muted); font-size: 14px; }
:where([data-app="mapper"]) .tags-view .list .li .r { margin-left: auto; }
:where([data-app="mapper"]) .tags-view .list .li .chev { color: var(--muted); display: grid; }
:where([data-app="mapper"]) .sheet .field { margin-top: 4px; }
/* pins: a yellow drop with an ink dot; the one you're looking at stands a little bigger */
/* no shadow: with hundreds of pins on a phone, every shadow is repainted on each frame of a zoom */
:where([data-app="mapper"]) .pin { width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pin, var(--mapper)); border: 2.5px solid #111113; display: grid; place-items: center; cursor: pointer; }
:where([data-app="mapper"]) .pin::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #111113; }
/* still to try: a hollow pin in the same colour */
:where([data-app="mapper"]) .pin.try { background: #fff; border-color: var(--pin, var(--mapper)); border-width: 3px; }
:where([data-app="mapper"]) .pin.try::after { background: var(--pin, var(--mapper)); }
:where([data-app="mapper"]) .pin.sel { transform: rotate(-45deg) scale(1.3); transition: transform .2s var(--spring); }
/* zoomed out, pins close together become one numbered bubble; tap it to zoom in */
:where([data-app="mapper"]) .cluster { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: #111113; color: #fff; border: 3px solid var(--mapper); font: 700 13px/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
:where([data-app="mapper"]) .cluster.mid { min-width: 40px; height: 40px; font-size: 14px; }
:where([data-app="mapper"]) .cluster.big { min-width: 48px; height: 48px; font-size: 15px; }
:where([data-app="mapper"]) .you { width: 18px; height: 18px; border-radius: 50%; background: var(--info); border: 3px solid #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--info) 25%, transparent); }
/* a place: its tags to tick, a new tag, and Google Maps for directions */
:where([data-app="mapper"]) .sheet .sub { margin-bottom: 12px; }
:where([data-app="mapper"]) .sheet .chips.wrap { padding-top: 2px; }
:where([data-app="mapper"]) .new-tag { display: flex; gap: 8px; margin-top: 12px; }
:where([data-app="mapper"]) .new-tag .search { flex: 1; }
:where([data-app="mapper"]) .sheet-actions { display: grid; gap: 8px; margin-top: 18px; }
:where([data-app="mapper"]) .try-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin: 2px 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
:where([data-app="mapper"]) .try-row b { display: block; font-size: 15px; }
:where([data-app="mapper"]) .try-row small { display: block; color: var(--muted); font-size: 13px; }
:where([data-app="mapper"]) .try-badge { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; vertical-align: 1px; }
:where([data-app="mapper"]) .try-seg { margin: 2px 0 6px; }
:where([data-app="mapper"]) a.btn { text-decoration: none; }
:where([data-app="mapper"]) .li .t, :where([data-app="mapper"]) .li .s, :where([data-app="mapper"]) .li .tags { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where([data-app="mapper"]) .li .tags { color: var(--muted); font-size: 13px; }
:where([data-app="mapper"]) .li .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }
:where([data-app="mapper"]) .li .ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex: none; }
:where([data-app="mapper"]) .li .ico.saved { background: var(--accent); color: var(--on-accent); }
:where([data-app="mapper"]) .results { margin-top: 12px; }
:where([data-app="mapper"]) .places-search { margin-bottom: 2px; }
:where([data-app="mapper"]) .places .list { margin-top: 12px; }
:where([data-app="mapper"]) .settings .card .row + .row { margin-top: 10px; }
/* this month's Google calls, and the Mapstr import's progress */
:where([data-app="mapper"]) .usage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
:where([data-app="mapper"]) .usage .v { font-size: 20px; }
:where([data-app="mapper"]) .import-progress { background: var(--surface-2); box-shadow: none; margin: 14px 0 0; }
:where([data-app="mapper"]) .import-progress .bar { margin: 10px 0 0; }   /* the shared progress bar (.vv-progress) */
:where([data-app="mapper"]) .import-progress .bar i { transition: width .3s ease; }

/* =====================================================================
   9. Chesser.ino (the board is drawn by js/board.js; the pieces are the cburnett set)
   ===================================================================== */
:where([data-app="chesser"]) body { padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 100px); }
:root[data-app="chesser"] { --sq-light: #eed6ae; --sq-dark: #b8875b; --arrow-hint: rgba(30, 110, 210, .82); --arrow-best: rgba(24, 130, 52, .85); --arrow-bad: rgba(214, 48, 49, .85); }
/* the board: wood squares, coordinates in the corner squares, a soft frame */
:where([data-app="chesser"]) .board-wrap { width: 100%; max-width: min(560px, calc(100dvh - env(safe-area-inset-top) - 300px)); margin: 0 auto; }
:where([data-app="chesser"]) .cb { position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 22px rgba(60, 35, 10, .18); }
:where([data-app="chesser"]) .cb-squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
:where([data-app="chesser"]) .cb-sq { position: relative; }
:where([data-app="chesser"]) .cb-sq.l { background: var(--sq-light); color: var(--sq-dark); }
:where([data-app="chesser"]) .cb-sq.d { background: var(--sq-dark); color: var(--sq-light); }
:where([data-app="chesser"]) .cb-rank, :where([data-app="chesser"]) .cb-file { position: absolute; font: 700 clamp(8px, 2.1vw, 11px)/1 var(--font); pointer-events: none; }
:where([data-app="chesser"]) .cb-rank { top: 3px; left: 3px; }
:where([data-app="chesser"]) .cb-file { bottom: 2px; right: 4px; }
:where([data-app="chesser"]) .no-coords .cb-rank, :where([data-app="chesser"]) .no-coords .cb-file { display: none; }
:where([data-app="chesser"]) .cb-marks, :where([data-app="chesser"]) .cb-pieces { position: absolute; inset: 0; pointer-events: none; }
:where([data-app="chesser"]) .cb-mark, :where([data-app="chesser"]) .cb-piece { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; }
:where([data-app="chesser"]) .cb-piece { z-index: 1; transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; will-change: transform; -webkit-user-drag: none; }
:where([data-app="chesser"]) .cb-piece.dragging { z-index: 5; transition: none; scale: 1.18; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
:where([data-app="chesser"]) .cb-piece.gone { opacity: 0; }
:where([data-app="chesser"]) .cb-piece.arriving { animation: cb-in .22s ease both; }
@keyframes cb-in { from { opacity: 0; scale: .7; } }
:where([data-app="chesser"]) .cb-mark.last { background: rgba(255, 214, 64, .42); }
:where([data-app="chesser"]) .cb-mark.sel { background: rgba(255, 214, 64, .62); }
:where([data-app="chesser"]) .cb-mark.dot { background: radial-gradient(circle, rgba(40, 25, 10, .3) 0 17%, transparent 18%); }
:where([data-app="chesser"]) .cb-mark.cap { background: radial-gradient(circle, transparent 0 66%, rgba(40, 25, 10, .3) 67% 80%, transparent 81%); }
:where([data-app="chesser"]) .cb-mark.check { background: radial-gradient(circle, rgba(255, 30, 30, .9) 0, rgba(230, 0, 0, .55) 30%, transparent 72%); }
:where([data-app="chesser"]) .cb-mark.hint { box-shadow: inset 0 0 0 4px var(--arrow-hint); background: rgba(30, 110, 210, .18); }
:where([data-app="chesser"]) .cb-mark.bad { background: rgba(214, 48, 49, .38); }
:where([data-app="chesser"]) .cb-mark.good { background: rgba(24, 130, 52, .32); }
:where([data-app="chesser"]) .cb-arrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
:where([data-app="chesser"]) .cb-arrows line { animation: fade .2s ease; }
:where([data-app="chesser"]) .cb-promo { position: absolute; z-index: 10; width: 12.5%; display: flex; flex-direction: column; background: var(--surface); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.3); overflow: hidden; }
:where([data-app="chesser"]) .cb-promo[style*="bottom: 0"] { flex-direction: column-reverse; }
:where([data-app="chesser"]) .cb-promo button { aspect-ratio: 1; padding: 6%; }
:where([data-app="chesser"]) .cb-promo button:active { background: var(--fill); }
:where([data-app="chesser"]) .cb-promo img { width: 100%; height: 100%; display: block; }
/* a game: the two players around the board, the coach under it, the actions at the bottom */
:where([data-app="chesser"]) .game { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
:where([data-app="chesser"]) .player { width: 100%; max-width: min(560px, calc(100dvh - env(safe-area-inset-top) - 300px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 0 2px; font-size: 15px; }
:where([data-app="chesser"]) .player .who b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px; border-radius: 50%; background: transparent; vertical-align: middle; }
:where([data-app="chesser"]) .player.to-move .who b::after { background: var(--accent); }
:where([data-app="chesser"]) .player.thinking .who b::after { background: var(--accent); animation: cb-think .9s ease-in-out infinite; }
@keyframes cb-think { 50% { opacity: .25; } }
:where([data-app="chesser"]) .caps { display: flex; align-items: center; min-width: 0; }
:where([data-app="chesser"]) .caps .cap { width: 20px; height: 20px; margin-right: -7px; }
:where([data-app="chesser"]) .caps .lead { margin-left: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
:where([data-app="chesser"]) .coach-bubble { display: flex; gap: 10px; align-items: flex-start; width: 100%; max-width: 560px; margin: 6px auto 0; padding: 12px 10px 12px 12px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); animation: up .22s cubic-bezier(.2, .8, .2, 1); }
:where([data-app="chesser"]) .coach-face { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
:where([data-app="chesser"]) .coach-face svg.i { width: 17px; height: 17px; }
:where([data-app="chesser"]) .coach-bubble.warn .coach-face { background: var(--danger); color: #fff; }
:where([data-app="chesser"]) .coach-bubble.good .coach-face { background: var(--good); color: #fff; }
:where([data-app="chesser"]) .coach-bubble .say { margin: 5px 0 0; font-size: 15px; line-height: 1.42; }
:where([data-app="chesser"]) .bubble-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
:where([data-app="chesser"]) .game-actions { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
:where([data-app="chesser"]) .game-actions .act { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; padding: 8px 6px; border-radius: 16px; font-size: 12px; font-weight: 600; color: var(--muted); transition: transform .28s var(--spring), background-color .2s ease; }
:where([data-app="chesser"]) .game-actions .act svg.i { width: 22px; height: 22px; color: var(--text); }
:where([data-app="chesser"]) .game-actions .act:active { background: var(--fill); transform: scale(.94); transition-duration: .07s; }
/* a new game, and your rating */
:where([data-app="chesser"]) .rating-card .stat-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
:where([data-app="chesser"]) .rating-card .k { font: 500 13px var(--font); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
:where([data-app="chesser"]) .num.big { font: 700 40px/1.05 var(--display-font); letter-spacing: -0.02em; }
:where([data-app="chesser"]) .delta { font-size: 14px; font-weight: 600; }
:where([data-app="chesser"]) .delta.up, :where([data-app="chesser"]) .stat small.up { color: var(--good); }
:where([data-app="chesser"]) .delta.down, :where([data-app="chesser"]) .stat small.down { color: var(--danger); }
:where([data-app="chesser"]) .spark { height: 64px; margin-top: 10px; }
:where([data-app="chesser"]) .spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
:where([data-app="chesser"]) .level-info { font-size: 14px; margin-top: 2px; }
:where([data-app="chesser"]) .level-info .badge { margin-left: 6px; vertical-align: 1px; }
:where([data-app="chesser"]) .setup .li .seg { min-width: 210px; }
:where([data-app="chesser"]) .end-head h2 { font-size: 26px; }
:where([data-app="chesser"]) .end-head.win h2 { color: var(--good); }
/* stats */
:where([data-app="chesser"]) .stats-row { margin: 10px 0; }
:where([data-app="chesser"]) .stats-row.three { grid-template-columns: repeat(3, 1fr); }
:where([data-app="chesser"]) .themes .theme-row + .theme-row { margin-top: 12px; }
:where([data-app="chesser"]) .theme-name { font-size: 15px; font-weight: 500; margin-bottom: 5px; }
:where([data-app="chesser"]) .theme-bar { height: 6px; border-radius: 999px; background: var(--fill); overflow: hidden; }
:where([data-app="chesser"]) .theme-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
:where([data-app="chesser"]) .themes .hint { margin-top: 14px; }
:where([data-app="chesser"]) .result-dot, :where([data-app="chesser"]) .mark-dot { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; font: 700 13px var(--display-font); background: var(--fill); color: var(--muted); }
:where([data-app="chesser"]) .result-dot.win { background: var(--good-bg); color: var(--good); }
:where([data-app="chesser"]) .result-dot.loss { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
:where([data-app="chesser"]) a { color: inherit; text-decoration: none; }
:where([data-app="chesser"]) p.hint a { text-decoration: underline; text-decoration-color: var(--line); }
/* a review: the board and its moves, the key moments, the coach */
:where([data-app="chesser"]) .review .lead { margin: -6px 2px 10px; }
:where([data-app="chesser"]) .review-grid { display: grid; gap: 12px; }
:where([data-app="chesser"]) .review-nav { display: flex; justify-content: center; gap: 18px; margin-top: 8px; }
:where([data-app="chesser"]) .review-say { margin-top: 12px; }
:where([data-app="chesser"]) .mark-dot.blunder { background: var(--danger); color: #fff; }
:where([data-app="chesser"]) .mark-dot.mistake { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
:where([data-app="chesser"]) .move-list { position: relative; display: flex; flex-wrap: wrap; gap: 2px 0; padding: 10px 12px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); max-height: 220px; overflow-y: auto; }
:where([data-app="chesser"]) .mv { padding: 4px 7px; border-radius: 8px; font: 500 15px var(--display-font); font-variant-numeric: tabular-nums; }
:where([data-app="chesser"]) .mv .n { color: var(--muted); margin-right: 4px; font-weight: 400; }
:where([data-app="chesser"]) .mv sup { font-size: 10px; margin-left: 1px; }
:where([data-app="chesser"]) .mv.on { background: var(--key); color: var(--on-key); }
:where([data-app="chesser"]) .mv.on .n { color: inherit; opacity: .6; }
:where([data-app="chesser"]) .mv.blunder:not(.on) { color: var(--danger); }
:where([data-app="chesser"]) .mv.mistake:not(.on), :where([data-app="chesser"]) .mv.inaccuracy:not(.on) { color: color-mix(in srgb, var(--danger) 70%, var(--text)); }
:where([data-app="chesser"]) .mv.best sup { color: var(--good); }
/* Learn: puzzles from your games, and lessons */
:where([data-app="chesser"]) .puzzle-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
:where([data-app="chesser"]) .puzzle-head .k { font: 500 13px var(--font); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
:where([data-app="chesser"]) .lesson-n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--display-font); background: var(--fill); color: var(--muted); }
:where([data-app="chesser"]) .lesson-n.done { background: var(--accent); color: var(--on-accent); }
:where([data-app="chesser"]) .lesson-n svg.i { width: 15px; height: 15px; stroke-width: 3; }
:where([data-app="chesser"]) .lesson-row.next .lesson-n { box-shadow: inset 0 0 0 2px var(--accent); color: var(--text); }
:where([data-app="chesser"]) .task-card { margin-top: 0; }
:where([data-app="chesser"]) .task-card .task { font-size: 17px; font-weight: 600; line-height: 1.35; }
:where([data-app="chesser"]) .lesson-intro { font-size: 16px; line-height: 1.5; }
:where([data-app="chesser"]) .exercise { display: flex; flex-direction: column; gap: 6px; }
:where([data-app="chesser"]) .done-card h3 { margin: 0 0 6px; font: 700 20px var(--display-font); }
@media (min-width: 900px) {
  :where([data-app="chesser"]) main { max-width: 1040px; }
  :where([data-app="chesser"]) .review-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}

/* =====================================================================
   10. The page at the site root (a plain list of the apps; not an app itself)
   ===================================================================== */
:where([data-app="home"]) body { padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 40px); }
:where([data-app="home"]) a { color: inherit; text-decoration: none; }
:where([data-app="home"]) .modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
:where([data-app="home"]) .module { position: relative; display: flex; flex-direction: column; min-height: 228px; padding: 20px 20px 18px; border-radius: 28px; background: var(--m); color: var(--on-module); overflow: hidden; transition: transform .12s ease; }
:where([data-app="home"]) .module.splitter { --m: var(--splitter); }
:where([data-app="home"]) .module.gymmer { --m: var(--gymmer); }
:where([data-app="home"]) .module.shiori { --m: var(--shiori); }
:where([data-app="home"]) .module.mapper { --m: var(--mapper); }
:where([data-app="home"]) .module.chesser { --m: var(--chesser); }
:where([data-app="home"]) .module.watcher { --m: var(--watcher); }
:where([data-app="home"]) .module:active { transform: scale(0.98); }
@media (hover: hover) { :where([data-app="home"]) a.module:hover { transform: translateY(-3px); } }
:where([data-app="home"]) .module .glyph { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--on-module); color: var(--m); font: 700 28px/1 var(--display-font); }
:where([data-app="home"]) .module .glyph svg.i { width: 28px; height: 28px; stroke-width: 2.4; }
:where([data-app="home"]) .module .go { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--on-module) 10%, transparent); }
:where([data-app="home"]) .module .name { margin-top: auto; padding-top: 28px; font: 700 28px/1.05 var(--display-font); letter-spacing: -0.03em; }
:where([data-app="home"]) .module .name .dot-ino { opacity: .5; font-weight: 500; }
:where([data-app="home"]) .module .tag { margin: 6px 0 0; font-size: 15px; font-weight: 600; line-height: 1.3; }   /* two lines on every card, so the cards line up */
:where([data-app="home"]) .brand .vv-mark { width: 44px; height: 44px; border-radius: 13px; overflow: hidden; }
:where([data-app="home"]) .brand-logo { height: 26px; }
:where([data-app="home"]) .brand-logo svg { width: auto; }
:where([data-app="home"]) h1.tagline { font: 700 34px/1.12 var(--display-font); letter-spacing: -0.02em; margin: 0; padding: 26px 0 6px; }
:where([data-app="home"]) .module .live { align-self: flex-start; max-width: 100%; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--on-module) 10%, transparent); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   11. Watcher.ino (the player draws its own subtitles, so they can be styled and tapped)
   ===================================================================== */
:where([data-app="watcher"]) body { padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 100px); }
:where([data-app="watcher"]) .w-note p { margin: 0; color: var(--muted); font-size: 15px; }
:where([data-app="watcher"]) .w-note p + p { margin-top: 8px; }
/* rows that scroll sideways (Continue watching, Recently added), reaching the screen's edges */
:where([data-app="watcher"]) .w-row { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
:where([data-app="watcher"]) .w-row::-webkit-scrollbar { display: none; }
:where([data-app="watcher"]) .w-row > * { scroll-snap-align: start; flex: none; }
:where([data-app="watcher"]) .w-wide { width: 260px; display: flex; flex-direction: column; text-align: left; gap: 2px; }
:where([data-app="watcher"]) .w-tile { display: flex; flex-direction: column; text-align: left; gap: 2px; min-width: 0; }
:where([data-app="watcher"]) .w-row .w-tile { width: 118px; }
:where([data-app="watcher"]) .w-wide .t, :where([data-app="watcher"]) .w-tile .t { margin-top: 6px; font-weight: 600; font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-app="watcher"]) .w-wide .s, :where([data-app="watcher"]) .w-tile .s { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-app="watcher"]) .w-still, :where([data-app="watcher"]) .w-poster, :where([data-app="watcher"]) .w-thumb { position: relative; display: block; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
:where([data-app="watcher"]) .w-still { aspect-ratio: 16 / 9; }
:where([data-app="watcher"]) .w-poster { aspect-ratio: 2 / 3; }
:where([data-app="watcher"]) :is(.w-still, .w-poster, .w-thumb) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* no picture yet (no TMDB key, or nothing found): the title on the app's colour */
:where([data-app="watcher"]) :is(.w-still, .w-poster, .w-thumb).blank { display: grid; place-items: center; background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--surface-2))); color: var(--on-module); }
:where([data-app="watcher"]) .w-poster.blank b { padding: 10px; font: 700 15px/1.2 var(--display-font); text-align: center; overflow-wrap: anywhere; }
:where([data-app="watcher"]) .w-thumb.blank b { font: 700 20px var(--display-font); }
:where([data-app="watcher"]) .w-play { position: absolute; left: 10px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-thick); color: var(--text); -webkit-backdrop-filter: var(--glass-blur, blur(14px)); backdrop-filter: var(--glass-blur, blur(14px)); }
:where([data-app="watcher"]) .w-play svg.i { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }
/* how far you are (the shared .vv-progress), under the picture or the episode's name */
:where([data-app="watcher"]) .w-wide .vv-progress, :where([data-app="watcher"]) .w-tile .vv-progress { margin-top: 7px; }
:where([data-app="watcher"]) .w-ep .vv-progress { margin-top: 6px; max-width: 240px; }
:where([data-app="watcher"]) .w-side > .vv-progress { margin-top: 12px; }
:where([data-app="watcher"]) .w-count { position: absolute; top: 6px; right: 6px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 700 12px var(--font); }
:where([data-app="watcher"]) .w-count.done svg.i { width: 14px; height: 14px; stroke-width: 3; }
:where([data-app="watcher"]) .w-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 12px; }
/* a show's or film's page */
:where([data-app="watcher"]) .w-detail .page-head { align-items: center; padding-top: 14px; }
:where([data-app="watcher"]) .w-hero { margin-top: 8px; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
:where([data-app="watcher"]) .w-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
:where([data-app="watcher"]) .w-title { padding-top: 16px; padding-bottom: 4px; }
:where([data-app="watcher"]) .w-meta { margin: 0; color: var(--muted); font-size: 15px; }
:where([data-app="watcher"]) .w-overview { margin: 10px 0 0; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:where([data-app="watcher"]) .w-overview.open { display: block; }
:where([data-app="watcher"]) .w-eps { margin-top: 10px; padding: 0 6px 0 12px; }
:where([data-app="watcher"]) .w-ep { gap: 4px; padding: 10px 0; }
:where([data-app="watcher"]) .w-ep-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
:where([data-app="watcher"]) .w-ep .grow { display: flex; flex-direction: column; min-width: 0; }
:where([data-app="watcher"]) .w-ep .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-app="watcher"]) .w-ep.done .t { color: var(--muted); }
:where([data-app="watcher"]) .w-thumb { width: 112px; aspect-ratio: 16 / 9; flex: none; border-radius: var(--r-sm); }
/* sheets: a show's settings, Settings' languages and keys */
:where([data-app="watcher"]) .w-mini { width: 44px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; flex: none; }
/* the player: the whole screen, black, its controls fading in over the picture */
:where([data-app="watcher"]) body.playing { padding: 0; }
:where([data-app="watcher"]) body.playing .tabbar { display: none; }
:where([data-app="watcher"]) .w-player { position: fixed; inset: 0; z-index: 45; background: #000; color: #fff; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:where([data-app="watcher"]) .w-stage { position: absolute; inset: 0; }
:where([data-app="watcher"]) .w-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
:where([data-app="watcher"]) .w-subs { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 6%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 max(16px, env(safe-area-inset-left)); pointer-events: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1); text-align: center; }
:where([data-app="watcher"]) .w-player.ui .w-subs { transform: translateY(calc(-76px - var(--pic-y, 0px))); }   /* above the bar, which sits on the picture */
/* a phone on its side: the middle buttons sit a little higher and smaller, clear of the raised subtitles */
@media (max-height: 480px) { :where([data-app="watcher"]) .w-mid { transform: translateY(-34px); gap: 36px; } :where([data-app="watcher"]) .w-big { width: 62px; height: 62px; } :where([data-app="watcher"]) .w-big svg.i { width: 28px; height: 28px; } }
:where([data-app="watcher"]) .w-subs .l1, :where([data-app="watcher"]) .w-subs .l2 { display: flex; flex-direction: column; align-items: center; gap: 2px; }
:where([data-app="watcher"]) .w-subs .line { pointer-events: auto; display: inline-block; max-width: 92vw; padding: 1px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); font: 600 clamp(17px, 2.6vw, 30px)/1.3 var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); white-space: pre-wrap; }
:where([data-app="watcher"]) .w-subs .l2 .line { font-size: clamp(14px, 2vw, 24px); font-weight: 500; color: rgba(255, 255, 255, .82); }
:where([data-app="watcher"]) .w-ui { position: absolute; inset: var(--pic-y, 0px) var(--pic-x, 0px); display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity .22s ease; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent 22%, transparent 70%, rgba(0, 0, 0, .7)); }
:where([data-app="watcher"]) .w-ui.show { opacity: 1; }
:where([data-app="watcher"]) .w-ui.show button, :where([data-app="watcher"]) .w-ui.show input { pointer-events: auto; }
/* the top bar, as in Plex: the title and its details on the left, AirPlay, Picture in Picture and Close on the right */
:where([data-app="watcher"]) .w-top { display: flex; align-items: flex-start; gap: 12px; padding: calc(env(safe-area-inset-top) + 14px) max(16px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
:where([data-app="watcher"]) .w-top-btns { display: flex; align-items: center; gap: 2px; flex: none; margin-top: -6px; padding: 0 4px; border-radius: 20px; background: rgba(22, 22, 24, .42); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
:where([data-app="watcher"]) .w-ctl { color: #fff; width: 44px; height: 44px; }
:where([data-app="watcher"]) .w-ctl svg.i { width: 24px; height: 24px; }
:where([data-app="watcher"]) .w-head { flex: 1; min-width: 0; text-align: left; }
:where([data-app="watcher"]) .w-ttl { font: 700 21px/1.2 var(--display-font); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-app="watcher"]) .w-sub { margin-top: 3px; font-size: 14px; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-app="watcher"]) .w-badge { display: inline-block; margin-left: 8px; padding: 0 5px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 4px; font: 700 11px/16px var(--font); letter-spacing: .04em; color: #fff; vertical-align: 1px; }
:where([data-app="watcher"]) .w-badge + .w-badge { margin-left: 5px; }
:where([data-app="watcher"]) .w-mid { display: flex; align-items: center; justify-content: center; gap: 44px; }
:where([data-app="watcher"]) .w-big { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(22, 22, 24, .42); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
:where([data-app="watcher"]) .w-big svg.i { width: 34px; height: 34px; fill: currentColor; }
:where([data-app="watcher"]) .w-skip { width: 54px; height: 54px; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .55)); }
:where([data-app="watcher"]) .w-skip svg.i { width: 30px; height: 30px; }
:where([data-app="watcher"]) .w-big:active, :where([data-app="watcher"]) .w-skip:active { transform: scale(.9); }
:where([data-app="watcher"]) .w-bottom { padding: 0 max(12px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 12px) max(12px, env(safe-area-inset-left)); }
/* the bottom bar, as in the LiquidGlass demo's video player: where you are, then Audio and Subtitles */
:where([data-app="watcher"]) .w-bar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 16px; border-radius: 20px; background: rgba(22, 22, 24, .42); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
:where([data-app="watcher"]) .w-time { font: 600 13px var(--font); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; opacity: .9; }
/* the player's tools, bottom right above the progress bar: Audio, Subtitles, AirPlay */
:where([data-app="watcher"]) .w-tool { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 14px; color: #fff; font: 600 13px var(--font); flex: none; }
:where([data-app="watcher"]) .w-tool svg.i { width: 19px; height: 19px; }
:where([data-app="watcher"]) .w-tool:active { background: rgba(255, 255, 255, .14); }
@media (max-width: 600px) { :where([data-app="watcher"]) .w-tool span { display: none; } :where([data-app="watcher"]) .w-tool { padding: 0 8px; } }
:where([data-app="watcher"]) .w-tool[hidden] { display: none; }
:where([data-app="watcher"]) .w-bar input[type=range] { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; --fill: 0%; }
:where([data-app="watcher"]) .w-bar input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: linear-gradient(to right, var(--accent) var(--fill), rgba(255, 255, 255, .3) var(--fill)); }
:where([data-app="watcher"]) .w-bar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6.5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
:where([data-app="watcher"]) .w-bar input[type=range]::-moz-range-track { height: 5px; border-radius: 99px; background: linear-gradient(to right, var(--accent) var(--fill), rgba(255, 255, 255, .3) var(--fill)); }
:where([data-app="watcher"]) .w-next { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 116px); z-index: 2; background: #fff; color: #111113; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
:where([data-app="watcher"]) .w-spin { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .8s linear infinite; pointer-events: none; }
:where([data-app="watcher"]) .w-ui.show ~ .w-spin, :where([data-app="watcher"]) .w-spin[hidden] { display: none; }
:where([data-app="watcher"]) .w-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(86vw, 380px); padding: 18px; border-radius: var(--r-lg); background: rgba(28, 28, 30, .92); text-align: center; z-index: 3; }
:where([data-app="watcher"]) .w-msg p { margin: 0 0 12px; }
:where([data-app="watcher"]) .w-upnext { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 116px); z-index: 3; width: min(80vw, 300px); padding: 14px; border-radius: var(--r-lg); background: rgba(28, 28, 30, .92); }
:where([data-app="watcher"]) .w-upnext .s { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
:where([data-app="watcher"]) .w-upnext .t { font-weight: 700; margin: 2px 0 10px; }
:where([data-app="watcher"]) .w-upnext-row { display: flex; gap: 8px; justify-content: flex-end; }
:where([data-app="watcher"]) .sheet .li.on .t { font-weight: 700; }
:where([data-app="watcher"]) .li .grow > :is(.t, .s) { display: block; }
:where([data-app="watcher"]) .w-tick { color: var(--accent); display: grid; }
:where([data-app="watcher"]) .w-tick svg.i { width: 20px; height: 20px; stroke-width: 3; }
/* double-tap a side: how far it's skipping, growing with every tap */
:where([data-app="watcher"]) .w-seek { position: absolute; top: 50%; z-index: 2; width: 112px; height: 112px; margin-top: -56px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(255, 255, 255, .16); color: #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: none; animation: vv-enter .2s ease both; }
:where([data-app="watcher"]) .w-seek.left { left: 10%; }
:where([data-app="watcher"]) .w-seek.right { right: 10%; }
:where([data-app="watcher"]) .w-seek[hidden] { display: none; }
:where([data-app="watcher"]) .w-seek svg.i { width: 30px; height: 30px; }
:where([data-app="watcher"]) .w-seek b { font: 700 16px var(--font); font-variant-numeric: tabular-nums; }
/* Japanese subtitles: every word can be tapped for the dictionary (Shior.ino's card), a held line is translated */
:where([data-app="watcher"]) .w-subs .w { border-radius: 4px; cursor: pointer; transition: background-color .15s; }
:where([data-app="watcher"]) .w-subs .w.on { background: color-mix(in srgb, var(--accent) 45%, transparent); }
/* liquid glass behind the controls (watcher/js/glass.js): empty shapes over the picture, under the subtitles and
   controls; while it runs (.lg) the buttons drop their own frosted look */
:where([data-app="watcher"]) .w-glass { position: absolute; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .22s ease, transform .2s var(--spring); }
:where([data-app="watcher"]) .w-glass.on { opacity: 1; }
:where([data-app="watcher"]) .w-glass.down { transform: scale(.9); }
/* white icons and text keep a soft dark halo, as the demo's labels do, so they read over a bright picture */
:where([data-app="watcher"]) .w-player :is(.w-mid button, .w-top-btns button, .w-bar) { filter: drop-shadow(0 0 5px rgba(0, 0, 0, .45)); }
:where([data-app="watcher"]) .w-player > .w-subs, :where([data-app="watcher"]) .w-player > .w-ui, :where([data-app="watcher"]) .w-player > .w-spin { z-index: 2; }
:where([data-app="watcher"]) .w-player.lg .w-bar, :where([data-app="watcher"]) .w-player.lg .w-top-btns, :where([data-app="watcher"]) .w-player.lg .w-big { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where([data-app="watcher"]) .w-player.looking .w-ui { opacity: 0; pointer-events: none; }
:where([data-app="watcher"]) .w-player.looking .w-subs { transform: none; }
:where([data-app="watcher"]) .w-player.looking .w-spin { display: none; }
:where([data-app="watcher"]) .w-player .lookup { z-index: 8; }
:where([data-app="watcher"]) .w-player .lookup .ocr-line { font-size: 20px; }
/* nothing behind the player scrolls or bounces */
html:has(body.playing) { overflow: hidden; overscroll-behavior: none; }
/* sheets and cards use the suite's components (h2, .sub, .field, .seg, .list, .menu): only spacing here */
:where([data-app="watcher"]) .sheet .field, :where([data-app="watcher"]) .card .field + .field { margin-top: 14px; }
:where([data-app="watcher"]) .sheet .field:first-of-type { margin-top: 10px; }
:where([data-app="watcher"]) .sheet .field + .list, :where([data-app="watcher"]) .sheet .menu + .subhead { margin-top: 14px; }
:where([data-app="watcher"]) .sheet .list + .field { margin-top: 18px; }
:where([data-app="watcher"]) .sheet form { margin-bottom: 10px; }
:where([data-app="watcher"]) .field textarea { resize: vertical; font-size: 15px; line-height: 1.4; }
:where([data-app="watcher"]) .sheet .li .s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where([data-app="watcher"]) .w-mini { width: 44px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; flex: none; }
/* the subtitles' look (Subtitles, Look; kept per device) */
:where([data-app="watcher"]) .w-player[data-size="s"] .w-subs .line { font-size: clamp(14px, 2.1vw, 24px); }
:where([data-app="watcher"]) .w-player[data-size="l"] .w-subs .line { font-size: clamp(20px, 3.2vw, 38px); }
:where([data-app="watcher"]) .w-player[data-size="xl"] .w-subs .line { font-size: clamp(24px, 4vw, 48px); }
:where([data-app="watcher"]) .w-player[data-size="s"] .w-subs .l2 .line { font-size: clamp(12px, 1.7vw, 20px); }
:where([data-app="watcher"]) .w-player[data-size="l"] .w-subs .l2 .line { font-size: clamp(17px, 2.5vw, 30px); }
:where([data-app="watcher"]) .w-player[data-size="xl"] .w-subs .l2 .line { font-size: clamp(20px, 3.1vw, 38px); }
:where([data-app="watcher"]) .w-player[data-bg="shadow"] .w-subs .line { background: none; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 4px rgba(0, 0, 0, .9); }
/* timing while watching: a small bar at the top, over the picture */
:where([data-app="watcher"]) .w-sync { position: absolute; top: calc(env(safe-area-inset-top) + 60px); left: 50%; transform: translateX(-50%); z-index: 6; width: min(92vw, 420px); padding: 10px; border-radius: var(--r-lg); background: rgba(28, 28, 30, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; display: grid; gap: 8px; animation: vv-enter .2s ease both; }
:where([data-app="watcher"]) .w-sync .seg { background: rgba(255, 255, 255, .12); }
:where([data-app="watcher"]) .w-sync .seg button { color: #fff; }
:where([data-app="watcher"]) .w-sync .seg button.on { background: rgba(255, 255, 255, .28); color: #fff; }
:where([data-app="watcher"]) .w-sync-row { display: flex; align-items: center; gap: 6px; }
:where([data-app="watcher"]) .w-sync-row > button { flex: 1; min-height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 15px var(--font); }
:where([data-app="watcher"]) .w-sync-row > button:active { transform: scale(.95); }
:where([data-app="watcher"]) .w-sync .w-offset { flex: 1.2; text-align: center; font: 700 17px var(--font); font-variant-numeric: tabular-nums; }
:where([data-app="watcher"]) .w-sync-hint { flex: 1; font-size: 12.5px; opacity: .7; }
:where([data-app="watcher"]) .w-sync-row > .w-sync-done { flex: 0 0 auto; padding: 0 16px; background: var(--accent); color: var(--on-accent); }
/* the iPad (and any wide screen): the whole width, with bigger posters; Settings stays a readable column */
:where([data-app="watcher"]) .w-narrow { max-width: 640px; margin: 0 auto; }
:where([data-app="watcher"]) .w-accent { color: var(--accent); font-weight: 600; }
@media (min-width: 700px) {
  :where([data-app="watcher"]) .w-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; }
  :where([data-app="watcher"]) .w-row .w-tile { width: 150px; }
  :where([data-app="watcher"]) .w-wide { width: 340px; }
  :where([data-app="watcher"]) .w-row { margin: 0 calc(-1 * clamp(16px, 4vw, 32px)); padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); scroll-padding: 0 clamp(16px, 4vw, 32px); }
}
/* a show on a wide screen: the show on the left (staying put), its episodes on the right */
@media (min-width: 900px) {
  :where([data-app="watcher"]) .w-detail:has(.w-main) { display: grid; grid-template-columns: minmax(320px, 0.9fr) 1.1fr; column-gap: 36px; align-items: start; }
  :where([data-app="watcher"]) .w-detail > .page-head { grid-column: 1 / -1; }
  :where([data-app="watcher"]) .w-detail:has(.w-main) .w-side { position: sticky; top: calc(env(safe-area-inset-top) + 12px); }
  :where([data-app="watcher"]) .w-detail:not(:has(.w-main)) { max-width: 640px; margin: 0 auto; }
  :where([data-app="watcher"]) .w-main { padding-top: 6px; }
  :where([data-app="watcher"]) .w-main > .chips { padding-top: 0; }
  :where([data-app="watcher"]) .w-main > .subhead:first-child { margin-top: 0; }
  :where([data-app="watcher"]) .w-thumb { width: 150px; }
}
:where([data-app="watcher"]) .sheet .sub a, :where([data-app="watcher"]) p.hint a { color: var(--accent); font-weight: 600; text-decoration: none; }
