/* googledoodle.hemishthanki.com — Google Doodle Games.
 *
 * The shell (green field, mist ink, Oswald, three side-panel skins, full-height
 * rail that becomes a drawer at <=820px) is the apex/About one, ported so this
 * page is unmistakably part of hemishthanki.com. Anything below the "catalogue"
 * banner is new and belongs to this site alone.
 *
 * SKINS: the same three the apex ships — "plain" (default), "panel", "field" —
 * driven entirely by custom properties, and sharing localStorage['ht-ui'] with
 * the apex and About, so the choice follows you across all three. A skin missing
 * here silently falls back to the base skin when someone crosses over, so add
 * skins to all three pages or none.
 */

:root {
  --green:  rgb(84, 121, 95);                  /* the field */
  --mist:   rgb(218, 227, 218);                /* the ink */
  --deep:   rgb(43, 68, 51);                   /* dark green for text ON mist */

  --ink:            var(--mist);
  --ink2:           rgba(218, 227, 218, 0.86); /* dimmed mist for secondary text */
  --panel:          rgba(255, 255, 255, .06);  /* elevated surface floating on the green */
  --panel2:         rgba(218, 227, 218, 0.12); /* hover wash */
  --line:           rgba(218, 227, 218, 0.16); /* hairline */
  --line-strong:    rgba(218, 227, 218, 0.3);
  --accent-tint:        rgba(218, 227, 218, 0.16);
  --accent-tint-strong: rgba(218, 227, 218, 0.26);
  --deep-soft:      rgb(58, 88, 67);

  --font: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --radius: 16px;
  --radius-sm: 12px;
  --side-w: 268px;
  --main-max: 1180px;
  --e1: 0 1px 2px rgba(0, 0, 0, .12);
  --dur: .16s;

  /* ---- side panel skin (base = "field": the sidebar floats on the green) --- */
  --side-bg:        transparent;
  --side-pad:       24px 18px;
  --side-radius:    0;
  --side-shadow:    none;
  --side-edge:      1px solid var(--line);
  --side-ink:       var(--mist);
  --side-ink2:      var(--ink2);
  --side-line:      var(--line);
  --profile-bg:     var(--panel);
  --profile-line:   var(--line);
  --profile-hover:  var(--panel2);
  --item-bg:        transparent;
  --item-hover:     var(--panel2);
  --item-ink:       var(--mist);
  --item-on:        var(--accent-tint);
  --focus-ring:     var(--mist);
  --strip-bg:       var(--green);
}

/* ---- side panel skin: "panel" — mist surface, dark green button pills ----- */
:root[data-ui="panel"] {
  --side-bg:        var(--mist);
  --side-pad:       18px 14px;
  --side-radius:    0;
  --side-shadow:    0 6px 22px rgba(0, 0, 0, .16);
  --side-edge:      none;
  --side-ink:       var(--green);
  --side-ink2:      rgba(60, 87, 68, 0.78);
  --side-line:      rgba(84, 121, 95, 0.22);
  --profile-bg:     rgba(84, 121, 95, 0.09);
  --profile-line:   rgba(84, 121, 95, 0.2);
  --profile-hover:  rgba(84, 121, 95, 0.16);
  --item-bg:        var(--green);
  --item-hover:     rgb(69, 99, 78);
  --item-ink:       var(--mist);
  --item-on:        rgb(69, 99, 78);
  --focus-ring:     var(--green);
  --strip-bg:       var(--mist);
}

/* ---- side panel skin: "plain" — mist surface, uncoloured rows, deep type -- */
:root[data-ui="plain"] {
  --side-bg:        var(--mist);
  --side-pad:       18px 14px;
  --side-radius:    0;
  --side-shadow:    0 6px 22px rgba(0, 0, 0, .16);
  --side-edge:      none;
  --side-ink:       var(--deep);
  --side-ink2:      rgba(43, 68, 51, 0.74);
  --side-line:      rgba(84, 121, 95, 0.22);
  --profile-bg:     rgba(84, 121, 95, 0.08);
  --profile-line:   rgba(84, 121, 95, 0.2);
  --profile-hover:  rgba(84, 121, 95, 0.15);
  --item-bg:        transparent;
  --item-hover:     rgba(84, 121, 95, 0.12);
  --item-ink:       var(--deep);
  --item-on:        rgba(84, 121, 95, 0.18);
  --focus-ring:     var(--green);
  --strip-bg:       var(--mist);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  min-height: 100vh;
  background: var(--green);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; font-size: 21px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  overflow: hidden; width: 1.2em; text-align: center;
  direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; user-select: none; visibility: hidden;
}
body.fonts-ready .material-symbols-rounded { visibility: visible; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mist); color: var(--green); padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------- shell -------- */
.shell {
  display: flex; align-items: stretch; gap: 0;
  min-height: 100vh; padding: 0;
}
.main {
  flex: 1 1 auto; min-width: 0; max-width: var(--main-max);
  align-self: stretch; min-height: 100vh;
  margin-inline: auto;
  display: flex; flex-direction: column; gap: clamp(1.1rem, 2.6vh, 1.8rem);
  padding: 26px;
}

/* -------------------------------------------------------- sidebar -------- */
.sidebar {
  position: sticky; top: 0; flex: none; width: var(--side-w);
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--side-pad); border-radius: var(--side-radius);
  border-right: var(--side-edge);
  background: var(--side-bg); box-shadow: var(--side-shadow);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar > .side-foot { margin-top: auto; }   /* a pinned group, never just the last one */

.mobile-bar, .nav-toggle, .drawer-close, .nav-scrim { display: none; }
.side-profile {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px; margin-bottom: 6px;
  width: 100%; text-align: left; cursor: pointer; font-family: var(--font);
  border: 1px solid var(--profile-line); border-radius: var(--radius);
  background: var(--profile-bg); box-shadow: var(--e1);
  transition: background var(--dur), border-color var(--dur);
}
.side-profile:hover { background: var(--profile-hover); }
.side-profile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.side-profile .av {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  overflow: hidden; background: rgba(0, 0, 0, .12);
}
.side-profile .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-profile .sp-text { display: flex; flex-direction: column; min-width: 0; }
.sp-name { font-weight: 700; font-size: 16px; letter-spacing: .02em; color: var(--side-ink); }
.sp-sub  { font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
           color: var(--side-ink2); margin-top: 2px;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-eyebrow {
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--side-ink2); padding: 8px 8px 8px; margin: 0;
}
.side-group { display: block; }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-foot { display: flex; flex-direction: column; gap: 3px;
            margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--side-line); }

.side-item {
  display: flex; align-items: center; gap: 13px; padding: 11px 14px; width: 100%;
  border-radius: var(--radius-sm); border: none; background: var(--item-bg); text-align: left;
  text-decoration: none; cursor: pointer;
  color: var(--item-ink); font-family: var(--font); font-weight: 500; font-size: 15.5px;
  letter-spacing: .01em;
  transition: background var(--dur), color var(--dur);
}
.side-item .material-symbols-rounded { font-size: 21px; flex: none; }
.side-item .side-label { flex: 1; min-width: 0; }
.side-item .go {
  flex: none; font-size: 18px; opacity: 0; transform: translateX(-4px);
  transition: opacity var(--dur), transform var(--dur);
}
.side-item:hover { background: var(--item-hover); color: var(--item-ink); }
.side-item:hover .go { opacity: .8; transform: none; }
.side-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.side-item.is-on { background: var(--item-on); color: var(--item-ink); }
.side-item.is-on .material-symbols-rounded { font-variation-settings: 'FILL' 1; }

/* --------------------------------------------------------- page head ----- */
.page-head { padding: clamp(1.25rem, 4vh, 2.5rem) 2px 0; }
.page-head h1 {
  font-weight: 700; font-size: clamp(30px, 5vw, 46px); color: var(--mist);
  letter-spacing: .03em; line-height: 1.08;
}
.page-head p {
  margin-top: 12px; max-width: 54rem;
  font-weight: 500; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; color: var(--ink2);
}

/* ========================================================== CATALOGUE ==== */
/* Everything from here down is this site's own, not ported from the apex. */

/* ------------------------------------------------------ category chips --- */
/* The categories used to be a "Collection" group in the rail, which made this
   the one page whose side menu differed from the home page's. They live here
   now, above the search box they work with.
   Mist pills in deep type, like the search box and the sort select: deep on
   mist is 8.1:1, where mist type straight on the green tops out at 3.74:1 —
   too little for 14px labels. The current chip INVERTS (deep fill, mist type,
   filled icon; mist on deep is 8.1:1 too), so the state is carried by more
   than a tint, and aria-current carries it for a screen reader.
   position: relative makes .cats the chips' offsetParent — app.js measures
   chip.offsetLeft against the row's own scroll position. */
.cats {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 2px;
}
.cat-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 14px 8px 11px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--mist); color: var(--deep);
  font-family: var(--font); font-weight: 500; font-size: 14.5px; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur), color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.cat-chip .material-symbols-rounded { font-size: 18px; flex: none; }
/* The count: tabular figures so they don't jitter as the current chip moves.
   .8 on the mist is 5.3:1 — the same figure .doodle-year had to reach. */
.cat-count {
  font-size: 12.5px; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  color: rgba(43, 68, 51, 0.8);
}
/* The home page's .pill-btn hover: a one-pixel lift and a soft shadow. Only
   where there IS hover — on a touch screen a tapped chip would stay lifted,
   its shadow clipped by the sideways-scrolling row. */
@media (hover: hover) {
  .cat-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
}
.cat-chip:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }
.cat-chip.is-on { background: var(--deep); border-color: var(--deep); color: var(--mist); }
.cat-chip.is-on .material-symbols-rounded { font-variation-settings: 'FILL' 1; }
.cat-chip.is-on .cat-count { color: inherit; opacity: .82; }   /* 6.0:1 on --deep */
/* Forced colours repaint both fills the same, which would leave only the
   filled icon to say which chip is current. */
@media (forced-colors: active) {
  .cat-chip.is-on { border: 2px solid Highlight; }
}

.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 2px 2px 0;
}
.search {
  position: relative; flex: 1 1 260px; min-width: 0; max-width: 420px;
  display: flex; align-items: center;
}
.search .material-symbols-rounded {
  position: absolute; left: 12px; font-size: 20px; color: rgba(43, 68, 51, .7);
  pointer-events: none;
}
#q {
  width: 100%; padding: 12px 40px 12px 42px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--mist); color: var(--deep);
  font-family: var(--font); font-weight: 500; font-size: 15.5px; letter-spacing: .02em;
}
#q::placeholder { color: rgba(43, 68, 51, .66); }
#q:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }
.search-clear {
  position: absolute; right: 6px; display: none; place-items: center;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: transparent; color: rgba(43, 68, 51, .8); cursor: pointer;
}
.search-clear:hover { background: rgba(84, 121, 95, .14); }
.search-clear:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
body.has-query .search-clear { display: grid; }

/* 4.6:1 on the green — the count is small type, so it takes the full mist. */
.count {
  font-weight: 500; font-size: 14px; letter-spacing: .05em; color: var(--mist);
  white-space: nowrap;
}

.sortbar { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sortbar label {
  font-weight: 500; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink2);
}
#sort {
  padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--mist); color: var(--deep);
  font-family: var(--font); font-weight: 500; font-size: 14.5px; letter-spacing: .02em;
  cursor: pointer;
}
#sort:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }

/* ------------------------------------------------------ card grid -------- */
.doodle-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.doodle-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
  background: var(--mist); color: var(--deep);
  border: 1px solid var(--line); box-shadow: var(--e1);
  transition: transform var(--dur), box-shadow var(--dur);
}
.doodle-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .26); }
.doodle-card:focus-visible { outline: 2px solid var(--mist); outline-offset: 3px; }
.doodle-card[hidden] { display: none; }
/* A white plate plus contain letterboxes wide artwork instead of cropping it:
   doodle art is drawn for the white Google homepage and its ratios run
   1.7:1 to 3:1, so `cover` would crop the logo — and often the game — out. */
.doodle-shot {
  display: block; width: 100%; aspect-ratio: 16 / 9; background: #fff;
  object-fit: contain; border-bottom: 1px solid var(--line);
}
.doodle-meta { display: flex; align-items: baseline; gap: 8px; padding: 13px 15px 4px; }
.doodle-name { flex: 1; min-width: 0; font-weight: 700; font-size: 16.5px; letter-spacing: .02em; }
/* 5.3:1 on the mist card. It started life at .66 (3.5:1) and failed AA — on this
   surface --deep reaches 8.1:1, so there is no excuse to miss it. */
.doodle-year {
  flex: none; font-weight: 500; font-size: 12px; letter-spacing: .1em;
  color: rgba(43, 68, 51, 0.8); font-variant-numeric: tabular-nums;
}
.doodle-card .go {
  flex: none; font-size: 17px; color: rgba(43, 68, 51, 0.66);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--dur), transform var(--dur);
}
.doodle-card:hover .go { opacity: 1; transform: none; }
.doodle-blurb {
  padding: 0 15px 10px; font-weight: 500; font-size: 13.5px; line-height: 1.45;
  color: rgba(43, 68, 51, 0.84);
}
.doodle-tag {
  margin: auto 15px 14px 15px; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(84, 121, 95, .14); color: var(--deep-soft);
  font-weight: 500; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
}

.empty {
  display: none; padding: clamp(2rem, 8vh, 4rem) 1rem; text-align: center;
}
body.no-results .empty { display: block; }
body.no-results .doodle-grid { display: none; }
.empty h2 { font-weight: 700; font-size: 22px; letter-spacing: .03em; color: var(--mist); }
.empty p { margin-top: 8px; font-weight: 500; font-size: 15px; color: var(--ink2); }

/* 13px on the green needs the whole 3.74:1 ceiling, so this is full mist, not --ink2. */
.doodle-note {
  padding: 4px 2px clamp(1rem, 3vh, 2rem);
  font-weight: 500; font-size: 13px; letter-spacing: .02em; color: var(--mist);
  line-height: 1.6; max-width: 60rem;
}
.doodle-note a { color: var(--mist); }

/* ------------------------------------------------------- settings -------- */
.settings {
  border: none; padding: 0; background: none; color: var(--ink);
  max-width: min(440px, calc(100vw - 32px)); width: 100%; margin: auto;
}
.settings::backdrop { background: rgba(20, 32, 24, 0.55); }
.set-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px; border-radius: 20px;
  background: var(--green); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
  font-family: var(--font);
}
.set-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.set-head h2 { flex: 1; font-weight: 700; font-size: 21px; letter-spacing: .03em; color: var(--mist); }
.set-x {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel);
  color: var(--mist); cursor: pointer; transition: background var(--dur);
}
.set-x:hover { background: var(--panel2); }
.set-x:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }
.set-eyebrow {
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink2); padding: 6px 2px;
}
.set-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.set-opt {
  position: relative; display: flex; flex-direction: column; gap: 9px; padding: 11px;
  border: 1px solid var(--line); border-radius: 15px; background: var(--panel);
  cursor: pointer; transition: background var(--dur), border-color var(--dur);
}
.set-opt:hover { background: var(--panel2); }
.set-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.set-opt.is-sel { border-color: var(--mist); background: var(--accent-tint); }
.set-opt:has(input:focus-visible) { outline: 2px solid var(--mist); outline-offset: 2px; }
.set-name {
  display: flex; align-items: center; gap: 7px;
  font-weight: 500; font-size: 14px; letter-spacing: .02em; color: var(--ink);
}
.set-opt.is-sel .set-name { font-weight: 700; }
.set-name .tick { font-size: 18px; opacity: 0; flex: none; transition: opacity var(--dur); }
.set-opt.is-sel .tick { opacity: 1; }

.prev {
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  height: 76px; padding: 8px; border-radius: 11px;
}
.prev-row { display: flex; align-items: center; height: 16px; padding: 0 7px; border-radius: 7px; }
.prev-row i { display: block; height: 4px; border-radius: 2px; width: 62%; background: var(--mist); }
.prev-field { background: var(--green); border: 1px solid var(--line-strong); }
.prev-field .prev-row { background: rgba(218, 227, 218, 0.07); }
.prev-field .prev-row:first-child { background: var(--accent-tint); }
.prev-panel { background: var(--mist); border: 1px solid var(--line-strong); }
.prev-panel .prev-row { background: var(--green); }
.prev-plain { background: var(--mist); border: 1px solid var(--line-strong); }
.prev-plain .prev-row { background: transparent; }
.prev-plain .prev-row:first-child { background: rgba(84, 121, 95, 0.18); }
.prev-plain .prev-row i { background: var(--deep); }

/* ========================================================== MOBILE ======= */
@media (max-width: 820px) {
  .shell { flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 calc(24px + env(safe-area-inset-bottom)); min-height: 0; }
  .main { max-width: none; min-height: 0; margin-inline: 0;
          padding: 6px max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }

  .mobile-bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 10px;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    background: var(--strip-bg); border-bottom: 1px solid var(--side-line);
  }
  .mb-title {
    font-weight: 700; font-size: 16px; letter-spacing: .02em; color: var(--side-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .nav-toggle, .drawer-close {
    display: grid; place-items: center; width: 40px; height: 40px; flex: none;
    border: none; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--item-bg); color: var(--item-ink);
    transition: background var(--dur);
  }
  .nav-toggle:hover, .drawer-close:hover { background: var(--item-hover); }
  .nav-toggle:focus-visible, .drawer-close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .drawer-close { align-self: flex-end; margin-bottom: 4px; }

  /* --strip-bg, NOT --side-bg: in the "field" skin --side-bg is transparent and
     the page would show straight through the drawer. */
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(86vw, 300px);
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom));
    background: var(--strip-bg); border-right: 1px solid var(--side-line);
    box-shadow: 0 8px 34px rgba(0, 0, 0, .34);
    transform: translateX(-102%); visibility: hidden;
    transition: transform .24s cubic-bezier(.2, 0, 0, 1), visibility .24s linear;
  }
  /* visibility is what keeps a closed drawer out of the tab order — don't drop
     it for a transform-only animation. */
  body.nav-open .sidebar { transform: none; visibility: visible; }
  body.nav-open { overflow: hidden; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden; transition: opacity .24s, visibility .24s linear;
  }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }

  /* No hover on touch, so the outward arrows would never appear. */
  .side-item .go, .doodle-card .go { display: none; }

  .doodle-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .page-head { padding-top: clamp(1rem, 3vh, 1.75rem); }
  .sortbar { margin-left: 0; }

  /* One row that scrolls sideways rather than nine chips wrapping to three
     lines between the intro and the search box. The row bleeds to the screen
     edges (the negative margins undo .main's side padding, safe areas
     included) so chips slide out under the edge instead of being cut off short
     of it — the cut-off chip is the cue that the row scrolls. The padding puts
     the first chip back in line with the heading and leaves room for the focus
     ring and the hover lift, which the scroll box would otherwise clip. */
  .cats {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(-1 * max(14px, env(safe-area-inset-left)))
                   calc(-1 * max(14px, env(safe-area-inset-right)));
    padding: 4px calc(max(14px, env(safe-area-inset-right)) + 2px)
             6px calc(max(14px, env(safe-area-inset-left)) + 2px);
    scroll-padding-inline: calc(max(14px, env(safe-area-inset-left)) + 2px);
  }
  .cats::-webkit-scrollbar { display: none; }
}

@media (min-width: 821px) and (max-width: 1040px) {
  :root { --side-w: 224px; }
  .main { padding: 22px 18px; }
}
@media (min-width: 1500px) {
  :root { --side-w: 288px; --main-max: 1360px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition: none !important; }
}