/* SYCU Social Review: Hubs Studio tokens (copied from grow-hubs-app/site/studio.css §1–§2; that file is read-only and
   was not edited). Every color-mix() in the source is precomputed to hex/rgba here, because WebKit crashes on some
   color-mix() values in dark mode. One accent (Grow green); unread is always Volunteers teal, never red.
   Radii: panel 18 / card 14 / tile 10 / control 9. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/pjs-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/pjs-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; }

html.lk-studio {
  --r-panel: 18px; --r-card: 14px; --r-tile: 10px; --r-ctl: 9px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sel-bg: #23272B; --sel-ink: #FFFFFF;
  --games: #7F8CFF; --games-ink: #4650C8; --games-soft: #EEF0FF;
  --sycu: #3ABDD5; --sycu-ink: #0B6B7D; --sycu-soft: #E3F6F9;
  --teach-deep: #C83535;
  --stripe: linear-gradient(90deg, #F0893C 0 16.667%, #E84E4E 0 33.333%, #E4D353 0 50%, #BED65A 0 66.667%, #82D1DD 0 83.333%, #F27A9E 0 100%);
}
html.lk-studio[data-mode="light"], html.lk-studio:not([data-mode]) {
  color-scheme: light;
  --canvas: #F4F5F7; --sf: #FFFFFF; --bg: #F6F7F9; --raise: #FFFFFF;
  --line: #E4E7EB; --line-2: #D3D8DE;
  --ink: #1F2328; --ink-2: #454C55; --ink-3: #5F6873; --ph: #5F6873; --trk: #767E88;
  --hair: rgba(31,35,40,.08); --hair-2: rgba(31,35,40,.13);
  --e1: 0 0 0 1px rgba(31,35,40,.075), 0 1px 2px rgba(31,35,40,.05), 0 2px 6px -2px rgba(31,35,40,.05);
  --e2: 0 0 0 1px rgba(31,35,40,.09), 0 2px 4px rgba(31,35,40,.05), 0 14px 30px -12px rgba(31,35,40,.18);
  --e3: 0 0 0 1px rgba(31,35,40,.08), 0 8px 20px -6px rgba(31,35,40,.14), 0 28px 60px -18px rgba(31,35,40,.26);
  --shd: rgba(31,35,40,.10);
  --disc: #F0893C; --teach: #E84E4E; --env: #E4D353; --evt: #BED65A; --vol: #82D1DD; --fam: #F27A9E; --lead: #434A50;
  --disc-ink: #A94F0C; --teach-ink: #B41818; --env-ink: #635910; --evt-ink: #515E17; --vol-ink: #1D616C; --fam-ink: #AE1140; --lead-ink: #434A50;
  --disc-soft: #FDEEE3; --teach-soft: #FCE7E7; --env-soft: #FBF7DA; --evt-soft: #F2F8DF; --vol-soft: #E5F6F8; --fam-soft: #FDE9F0; --lead-soft: #ECEEF0;
  --acc: #BFE478; --acc-hover: #B2DB61; --acc-on: #1F2328; --acc-edge: #6D941E; --acc-glow: rgba(109,148,30,.30);
  --acc-ink: #4B6D0B; --acc-ring: #5E8117; --acc-ring-soft: rgba(94,129,23,.22); --acc-soft: #F5F8E9;
  --unread: #1D616C; --unread-soft: #E5F6F8; --unread-ink: #1D616C;
  --alert: #C83535;
  --hdr-bg: rgba(255,255,255,.94); --seg-hover: rgba(255,255,255,.6); --btn-dark-hover: #404448;
  --scrim: rgba(31,35,40,.38); --viewer-bg: #E9EBEE; --thread: #F4F5F7;
}
html.lk-studio[data-mode="dark"] {
  color-scheme: dark;
  --canvas: #1C1F22; --sf: #2F3439; --bg: #373C42; --raise: #33383E;
  --line: #3A4046; --line-2: #434A50;
  --ink: #F4F5F7; --ink-2: #D4D8DC; --ink-3: #BAC0C5; --ph: #BAC0C5; --trk: #7E858A;
  --hair: rgba(255,255,255,.08); --hair-2: rgba(255,255,255,.14);
  --e1: 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.5), 0 6px 16px -8px rgba(0,0,0,.6);
  --e2: 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.45), 0 18px 36px -14px rgba(0,0,0,.8);
  --e3: 0 0 0 1px rgba(255,255,255,.10), 0 12px 28px -8px rgba(0,0,0,.6), 0 32px 64px -24px rgba(0,0,0,.7);
  --shd: rgba(0,0,0,.30);
  --disc: #F0893C; --teach: #E84E4E; --env: #E4D353; --evt: #BED65A; --vol: #82D1DD; --fam: #F27A9E; --lead: #BAC0C5;
  --disc-ink: #F4AA73; --teach-ink: #F19191; --env-ink: #E4D353; --evt-ink: #BED65A; --vol-ink: #82D1DD; --fam-ink: #F6A2BB; --lead-ink: #D4D8DC;
  --games-ink: #A5AEFF; --sycu-ink: #3ABDD5;
  --disc-soft: #4E4239; --teach-soft: #4D383C; --env-soft: #4C4D3D; --evt-soft: #464E3E; --vol-soft: #3C4D53; --fam-soft: #4E3F49; --lead-soft: #3E444A;
  --games-soft: #3C4259; --sycu-soft: #314A52;
  --acc: #BFE478; --acc-hover: #B2DB61; --acc-on: #1F2328; --acc-edge: transparent; --acc-glow: rgba(191,228,120,.18);
  --acc-ink: #BFE478; --acc-ring: #FFFFFF; --acc-ring-soft: rgba(255,255,255,.22); --acc-soft: #434D42;
  --unread: #82D1DD; --unread-soft: #3C4D53; --unread-ink: #82D1DD;
  --alert: #C83535;
  --sel-bg: #F4F5F7; --sel-ink: #1F2328;
  --hdr-bg: rgba(47,52,57,.95); --seg-hover: rgba(47,52,57,.6); --btn-dark-hover: #D6D7D9;
  --scrim: rgba(0,0,0,.55); --viewer-bg: #23272B; --thread: #2B3035;
}
/* mode cross-fade (JS adds .mode-xfade for ~260ms; skipped for reduced motion) */
html.mode-xfade, html.mode-xfade *, html.mode-xfade *::before, html.mode-xfade *::after {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, fill .22s ease, stroke .22s ease, box-shadow .22s ease !important; }
.hdr-mode { position: relative; overflow: hidden; }
.hdr-mode .mi { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; transition: transform .38s var(--ease), opacity .2s ease; }
html:not([data-mode="dark"]) .hdr-mode .mi-sun { opacity: 0; transform: rotate(-80deg) scale(.4); }
html[data-mode="dark"] .hdr-mode .mi-moon { opacity: 0; transform: rotate(80deg) scale(.4); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}