@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(/assets/fonts/vazirmatn-arabic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(/assets/fonts/vazirmatn-latin-wght-normal.woff2) format("woff2-variations");
  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: "Estedad";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(/assets/fonts/estedad-arabic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+FD3E-FD3F;   
}
@font-face {
  font-family: "Estedad";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(/assets/fonts/estedad-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-display: optional;
  font-weight: 400 700;
  src: url(/assets/fonts/noto-naskh-arabic-arabic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+FD3E-FD3F;   
}
@font-face {
  font-family: "Noto Kufi Arabic";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(/assets/fonts/noto-kufi-arabic-arabic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+FD3E-FD3F;   
}

:root {
  
  --card-w-poster-sm: 116px;
  --card-w-poster-md: 136px;
  --card-w-poster-lg: 164px;
  --card-w-cover-sm: 220px;
  --card-w-cover-md: 264px;
  --card-w-cover-lg: 300px;
  --card-min-poster: 104px;
  --card-min-cover: 240px;
  --card-min-wide: 280px;
  --rank-w: 56px;

  --mark-size: 28px;
  --brand-img-max: 180px;
  --avatar: 32px;
  --avatar-lg: 44px;
  --person-photo: 144px;
  --thero-poster: 132px;
  --hero-text: 560px;
  --filters-w: 272px;
  --drawer-w: 340px;
  --pop-w: 280px;
  --mega-w: 520px;
  --plan-min: 236px;
  --auth-w: 420px;
  --sheet-max: 88vh;
  --progress-h: 4px;
  --dot: 4px;
  --hero-dot: 8px;
  --target-min: 24px;   
  --hero-dot-active: 24px;
  --switch-w: 44px;
  --switch-h: 26px;
  --ph-ico: 32px;
  --state-art: 72px;
  --underline: 2px;
  --hero-h-mobile: 72svh;
  --hero-framed-mobile: 62svh;
  --hero-h-desktop: 78vh;
  --hero-min: 460px;
  --hero-max: 820px;
  --thero-min: 440px;
  --thero-max: 700px;
}

@media (min-width: 768px) {
  :root {
    --card-w-poster-sm: 148px;
    --card-w-poster-md: 176px;
    --card-w-poster-lg: 208px;
    --card-w-cover-sm: 272px;
    --card-w-cover-md: 320px;
    --card-w-cover-lg: 380px;
    --card-min-poster: 156px;
    --card-min-cover: 280px;
    --rank-w: 72px;
    --mark-size: 32px;
    --person-photo: 184px;
    --thero-poster: 220px;
  }
}

@media (min-width: 1440px) {
  :root {
    --card-w-poster-md: 188px;
    --card-w-poster-lg: 224px;
    --card-min-poster: 172px;
  }
}

@media (pointer: coarse) {
  :root:root {
    --btn-h-sm: var(--btn-h-sm-touch);
    --btn-h-md: var(--btn-h-md-touch);
    --btn-h-lg: var(--btn-h-lg-touch);
    --control-h: var(--control-h-touch);
  }
}

html[data-page="watch"] {
  --player-ink: var(--media-ink);
  --player-ink-rgb: var(--media-ink-rgb);
  --player-chrome: rgb(var(--scrim-rgb) / .82);
  --player-chrome-hi: rgb(var(--scrim-rgb) / .94);
  --player-veil: rgb(var(--scrim-rgb) / .72);
  --d-2: var(--dur-2);
  --d-3: var(--dur-3);
  --d-4: var(--dur-3);
  --e-out: var(--ease-out);
  --e-spring: var(--ease-emph);
  --t-base: var(--dur-2) var(--ease-out);
  --t-slow: var(--dur-3) var(--ease-out);
  --glass-blur: 20px;
  --glass-sat: 1.5;
  --sh-3: var(--elev-3);
  --sh-4: var(--elev-4);
  --brand-gradient: var(--accent);
  --brand-300: var(--accent-text);
  --brand-400: var(--accent);
  --font-en: var(--font-latin);
  --surface-glass-hi: rgb(var(--scrim-rgb) / .9);
  --line: rgb(var(--media-ink-rgb) / .12);
  --line-strong: rgb(var(--media-ink-rgb) / .24);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: var(--lh-snug);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-padding-top: calc(var(--header-h-mobile) + var(--sp-4));
  hanging-punctuation: none;
}
@media (min-width: 1024px) { html { scroll-padding-top: calc(var(--header-h-desktop) + var(--sp-4)); } }

@media (max-width: 1023.98px) {
  html[data-bnav="1"] { scroll-padding-bottom: calc(var(--bnav-h) + var(--sp-4) + env(safe-area-inset-bottom)); }
}
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow-x: clip;
  
  isolation: isolate;
}
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--fw-head); line-height: var(--lh-head); text-wrap: balance; overflow-wrap: anywhere; }
p { overflow-wrap: break-word; text-wrap: pretty; }
fieldset { border: 0; padding: 0; min-width: 0; }
dialog { border: 0; padding: 0; background: none; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--accent-subtle-hover); color: var(--text-1); }

:focus { outline: none; }
:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-gap);
  border-radius: var(--r-xs);
}

.main { flex: 1 0 auto; display: block; }
.main:focus { outline: none; }
.container {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--gutter-desktop));
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .container { padding-inline: var(--gutter-desktop); } }

.ltr { unicode-bidi: isolate; direction: ltr; font-family: var(--font-latin); }

.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.ico {
  inline-size: var(--ico-md);
  block-size: var(--ico-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ico-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--xs { inline-size: calc(var(--ico-sm) * .8); block-size: calc(var(--ico-sm) * .8); }
.ico--sm { inline-size: var(--ico-sm); block-size: var(--ico-sm); }
.ico--lg { inline-size: var(--ico-lg); block-size: var(--ico-lg); }
.ico--fill { fill: currentColor; }

.sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: var(--z-skip);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  font-weight: var(--fw-semibold);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

html:not(.js) [data-js] { display: none !important; }

.banner {
  padding: var(--sp-3) var(--gutter-mobile);
  background: var(--warning-subtle);
  color: var(--text-1);
  font-size: var(--fs-sm);
  text-align: center;
  border-block-end: var(--hairline) solid var(--border-subtle);
}

.dot {
  inline-size: var(--dot);
  block-size: var(--dot);
  border-radius: var(--r-pill);
  background: currentColor;
  opacity: .45;
  flex: none;
}

.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

.hdr {
  --hdr-h: var(--header-h-mobile);
  --hdr-ink: var(--text-1);
  --hdr-ink-2: var(--text-2);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  block-size: var(--hdr-h);
  color: var(--hdr-ink);
  background: var(--header-bg);
  -webkit-backdrop-filter: var(--header-blur);
  backdrop-filter: var(--header-blur);
  box-shadow: var(--header-shadow);
  border-block-end: var(--hairline) solid var(--header-border);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr { background: var(--header-fallback); }
}
@media (prefers-reduced-transparency: reduce) {
  .hdr { background: var(--header-fallback); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (min-width: 1024px) { .hdr { --hdr-h: var(--header-h-desktop); } }

html[data-top="media"] .hdr {
  position: absolute;
  inset-inline: 0;
  --hdr-ink: var(--hero-ink);
  --hdr-ink-2: var(--hero-ink-2);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-top="media"] .hdr::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--hdr-h)) 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(var(--scrim-rgb) / .62), rgb(var(--scrim-rgb) / 0));
  transition: opacity var(--dur-2) var(--ease-out);
}
html.js[data-top="media"] .hdr { position: fixed; }
html.js[data-top="media"] .hdr[data-scrolled="1"] {
  --hdr-ink: var(--text-1);
  --hdr-ink-2: var(--text-2);
  background: var(--header-bg);
  border-color: var(--header-border);
  box-shadow: var(--header-shadow);
  -webkit-backdrop-filter: var(--header-blur);
  backdrop-filter: var(--header-blur);
}
html.js[data-top="media"] .hdr[data-scrolled="1"]::before { opacity: 0; }

.hdr__in {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  block-size: 100%;
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--gutter-desktop));
  margin-inline: auto;
  padding-inline: calc(var(--gutter-mobile) - var(--sp-2));
}
@media (min-width: 768px) { .hdr__in { padding-inline: var(--gutter-desktop); gap: var(--sp-2); } }

.hdr .hdr__burger { margin-inline-end: var(--sp-1); }
@media (min-width: 1024px) { .hdr .hdr__burger { display: none; } }

.hdr__nav { display: none; margin-inline-start: var(--sp-6); }
@media (min-width: 1024px) { .hdr__nav { display: block; } }
.hdr__list { display: flex; align-items: center; gap: var(--sp-1); }
.hdr__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  block-size: var(--btn-h-sm);
  padding-inline: var(--sp-3);
  border-radius: var(--btn-radius);
  color: var(--hdr-ink-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.hdr__link:hover { color: var(--hdr-ink); background: var(--btn-ghost-hover); }
.hdr__link[aria-current="page"] { color: var(--hdr-ink); font-weight: var(--fw-semibold); }
.hdr__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--sp-3);
  inset-block-end: calc(var(--sp-1) * -1);
  block-size: var(--underline);
  border-radius: var(--r-pill);
  background: var(--accent);
}
.hdr__actions { display: flex; align-items: center; gap: var(--sp-1); margin-inline-start: auto; }
@media (min-width: 768px) { .hdr__actions { gap: var(--sp-2); } }
.hdr .hdr__sub, .hdr .hdr__theme { display: none; }
@media (min-width: 768px) { .hdr .hdr__sub { display: inline-flex; } .hdr .hdr__theme { display: inline-grid; } }
html[data-theme="dark"] .ico--dark, html[data-theme="light"] .ico--light { display: none; }
.hdr .btn--secondary { --btn-secondary-fg: var(--hdr-ink); }
html[data-top="media"] .hdr:not([data-scrolled="1"]) .btn--secondary {
  background: var(--btn-media-bg);
  color: var(--btn-media-fg);
  border-color: transparent;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--touch-min);
  color: inherit;
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  font-size: var(--fs-lg);
  line-height: 1;
  white-space: nowrap;
}
@media (min-width: 768px) { .brand { font-size: var(--fs-xl); } }
.brand__mark {
  display: grid;
  place-items: center;
  inline-size: var(--mark-size);
  block-size: var(--mark-size);
  flex: none;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--btn-primary-shadow);
}
.brand__mark[data-shape="circle"] { border-radius: var(--r-pill); }
.brand__initial { font-size: calc(var(--mark-size) * .52); font-weight: var(--fw-head); line-height: 1; transform: translateY(6%); }
.brand__glyph { inline-size: 52%; block-size: 52%; fill: currentColor; stroke-width: 0; transform: translateX(-6%); }
.brand__name { display: inline-flex; gap: .25em; }
.brand__accent { color: var(--accent-text); }
html[data-top="media"] .hdr:not([data-scrolled="1"]) .brand__accent { color: inherit; }
.brand__img { block-size: calc(var(--mark-size) + var(--sp-1)); inline-size: auto; max-inline-size: var(--brand-img-max); object-fit: contain; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  flex: none;
  border-radius: var(--btn-radius);
  color: inherit;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.icon-btn:hover { background: var(--btn-ghost-hover); }
.icon-btn:active { transform: scale(var(--press)); }
@media (min-width: 1024px) { .icon-btn { inline-size: var(--btn-h-md); block-size: var(--btn-h-md); } }

.avatar {
  display: inline-grid;
  place-items: center;
  inline-size: var(--avatar);
  block-size: var(--avatar);
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent-subtle-hover);
  color: var(--accent-text-on-subtle);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  line-height: 1;
}
.avatar--lg { inline-size: var(--avatar-lg); block-size: var(--avatar-lg); font-size: var(--fs-lg); }
.umenu, .notif, .hdr__has-menu { position: relative; }
.umenu__btn { inline-size: var(--touch-min); block-size: var(--touch-min); background: transparent; }
.umenu__btn::before {
  content: "";
  position: absolute;
  inset: calc((var(--touch-min) - var(--avatar)) / 2);
  border-radius: var(--r-pill);
  background: var(--accent-subtle-hover);
  z-index: -1;
}
.umenu__btn { position: relative; isolation: isolate; color: var(--accent-text-on-subtle); }
.umenu__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.umenu__name { font-weight: var(--fw-semibold); }
.umenu__meta { font-size: var(--fs-xs); color: var(--text-3); margin-block-start: var(--sp-0-5); }
.notif__count {
  position: absolute;
  inset-block-start: var(--sp-1);
  inset-inline-end: var(--sp-1);
  min-inline-size: calc(var(--sp-4) + var(--sp-0-5));
  block-size: calc(var(--sp-4) + var(--sp-0-5));
  padding-inline: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--danger);
  color: var(--on-danger);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  display: grid;
  place-items: center;
}
.notif__list { max-block-size: 60vh; overflow: auto; }

.mega {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-2));
  inset-inline-start: 0;
  inline-size: var(--mega-w);
  padding: var(--sp-4);
  border-radius: var(--pop-radius);
  background: var(--pop-bg);
  -webkit-backdrop-filter: var(--pop-blur);
  backdrop-filter: var(--pop-blur);
  border: var(--pop-border);
  box-shadow: var(--pop-shadow), var(--glass-highlight);
  color: var(--text-1);
  z-index: var(--z-dropdown);
}
.mega__kinds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mega__kind {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-3);
  font-weight: var(--fw-semibold);
  transition: background-color var(--dur-1) var(--ease-out);
}
.mega__kind:hover { background: var(--accent-subtle); color: var(--accent-text-on-subtle); }
.mega__label { margin-block: var(--sp-4) var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); font-weight: var(--fw-semibold); }
.mega__genres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-0-5) var(--sp-2); }
.mega__genres a {
  display: block;
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-md);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.mega__genres a:hover { background: var(--btn-ghost-hover); color: var(--text-1); }

.drawer { position: fixed; inset: 0; z-index: var(--z-modal); display: none; }
.drawer:target, .drawer[data-open] { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: var(--overlay-bg); }
.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: min(var(--drawer-w), 86vw);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-6) + env(safe-area-inset-bottom));
  background: var(--surface-2);
  box-shadow: var(--elev-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding-inline-start: var(--sp-2); }
.drawer__list { display: grid; gap: var(--sp-0-5); }
.drawer__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: calc(var(--touch-min) + var(--sp-1));
  padding-inline: var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.drawer__link:hover { background: var(--btn-ghost-hover); color: var(--text-1); }
.drawer__link[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-text-on-subtle); font-weight: var(--fw-semibold); }
.drawer__foot { display: grid; gap: var(--sp-2); margin-block-start: auto; }
@media (min-width: 1024px) { .drawer { display: none !important; } }

.ftr {
  margin-block-start: var(--section-gap-mobile);
  padding-block: var(--sp-10) var(--sp-6);
  background: var(--footer-bg);
  border-block-start: var(--footer-border);
  color: var(--text-2);
}
@media (min-width: 768px) { .ftr { margin-block-start: var(--section-gap-desktop); padding-block: var(--sp-12) var(--sp-8); } }
html[data-bnav="1"] .ftr { padding-block-end: calc(var(--bnav-h) + var(--sp-6) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { html[data-bnav="1"] .ftr { padding-block-end: var(--sp-8); } }
.ftr__in, .ftr__bottom {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--gutter-desktop));
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .ftr__in, .ftr__bottom { padding-inline: var(--gutter-desktop); } }
.ftr__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
@media (min-width: 768px) { .ftr__in { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-12); } }
.ftr__logo { color: var(--text-1); }
.ftr__tagline { margin-block-start: var(--sp-3); color: var(--text-2); font-size: var(--fs-md); max-inline-size: var(--measure); }
.ftr__note { margin-block-start: var(--sp-2); color: var(--text-3); font-size: var(--fs-sm); max-inline-size: var(--measure); }
.ftr__social { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-5); }
.social {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--touch-min);
  padding-inline: var(--sp-4);
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  border: var(--chip-border);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.social:hover { background: var(--accent-subtle); color: var(--accent-text-on-subtle); }
.social--lg { font-size: var(--fs-md); }
.ftr__h { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-1); margin-block-end: var(--sp-3); }
.ftr__col ul { display: grid; gap: var(--sp-0-5); }
@media (min-width: 768px) { .ftr__col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); } }
.ftr__col a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--touch-min);
  min-inline-size: var(--touch-min);
  color: var(--text-2);
  font-size: var(--fs-md);
  transition: color var(--dur-1) var(--ease-out);
}
@media (min-width: 1024px) { .ftr__col a { min-block-size: calc(var(--sp-8) + var(--sp-1)); } }
.ftr__col a:hover { color: var(--accent-text); }
.ftr__bottom { margin-block-start: var(--sp-8); }
.ftr__copy {
  padding-block-start: var(--sp-5);
  border-block-start: var(--hairline) solid var(--border-subtle);
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.bnav {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  padding-block-end: env(safe-area-inset-bottom);
  background: var(--bnav-bg);
  -webkit-backdrop-filter: var(--bnav-blur);
  backdrop-filter: var(--bnav-blur);
  border-block-start: var(--bnav-border);
}
@media (min-width: 1024px) { .bnav { display: none; } }
.bnav__list { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; block-size: var(--bnav-h); }
.bnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  block-size: 100%;
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  transition: color var(--dur-1) var(--ease-out);
}
.bnav__item .ico { inline-size: var(--ico-lg); block-size: var(--ico-lg); }
.bnav__item[aria-current="page"] { color: var(--accent-text); font-weight: var(--fw-semibold); }

@media (pointer: coarse) { .hdr__link { block-size: var(--touch-min); } }

.btn {
  --btn-bg: var(--btn-secondary-bg);
  --btn-fg: var(--btn-secondary-fg);
  --btn-bg-hover: var(--btn-secondary-hover);
  --btn-bg-active: var(--btn-secondary-hover);
  --btn-border: var(--btn-secondary-border);
  --btn-shadow: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  block-size: var(--btn-h-md);
  min-inline-size: var(--btn-h-md);
  padding-inline: var(--sp-5);
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { background: var(--btn-bg-active); transform: scale(var(--press)); }
.btn:focus-visible { border-radius: var(--btn-radius); }
.btn .ico { margin-block: calc(var(--sp-0-5) * -1); }

@media (max-width: 767px), (pointer: coarse) { .btn { min-block-size: var(--touch-min); } }

.btn--primary {
  --btn-bg: var(--btn-primary-bg);
  --btn-fg: var(--btn-primary-fg);
  --btn-bg-hover: var(--btn-primary-hover);
  --btn-bg-active: var(--btn-primary-active);
  --btn-border: var(--hairline) solid transparent;
  --btn-shadow: var(--btn-primary-shadow);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-1);
  --btn-bg-hover: var(--btn-ghost-hover);
  --btn-bg-active: var(--btn-ghost-hover);
  --btn-border: var(--hairline) solid transparent;
}
.btn--danger {
  --btn-bg: var(--danger);
  --btn-fg: var(--on-danger);
  --btn-bg-hover: var(--danger);
  --btn-border: var(--hairline) solid transparent;
}
.btn--sm { block-size: var(--btn-h-sm); min-inline-size: var(--btn-h-sm); padding-inline: var(--sp-3); font-size: var(--fs-sm); gap: var(--sp-1); }
.btn--lg { block-size: var(--btn-h-lg); min-inline-size: var(--btn-h-lg); padding-inline: var(--sp-6); font-size: var(--fs-base); }
.btn--icon { padding-inline: 0; inline-size: var(--btn-h-md); }
.btn--icon.btn--lg { inline-size: var(--btn-h-lg); }
.btn--icon.btn--sm { inline-size: var(--btn-h-sm); }
.btn--block { inline-size: 100%; }
.btn[aria-pressed="true"] .ico { fill: currentColor; }
.btn:disabled, .btn[aria-disabled="true"] {
  --btn-bg: var(--surface-3);
  --btn-fg: var(--text-disabled);
  --btn-bg-hover: var(--surface-3);
  --btn-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] > .ico:first-child { animation: spin var(--dur-3) linear infinite; animation-duration: calc(var(--dur-3) * 3); }
@keyframes spin { to { transform: rotate(360deg); } }

.on-media .btn:not(.btn--primary) {
  --btn-bg: var(--btn-media-bg);
  --btn-fg: var(--btn-media-fg);
  --btn-bg-hover: var(--btn-media-hover);
  --btn-bg-active: var(--btn-media-hover);
  --btn-border: var(--hairline) solid transparent;
  -webkit-backdrop-filter: var(--btn-media-blur);
  backdrop-filter: var(--btn-media-blur);
}

.linkbtn { color: var(--accent-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); }
.linkbtn:hover { background: var(--btn-ghost-hover); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  block-size: calc(var(--sp-6) - var(--sp-0-5));
  padding-inline: var(--sp-2);
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  color: var(--chip-fg);
  border: var(--chip-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
}
.tag--media { background: var(--btn-media-bg); color: var(--hero-ink); border-color: transparent; }
.tag--link { position: relative; transition: background-color var(--dur-1) var(--ease-out); }

.tag--link::after { content: ""; position: absolute; inset-inline: 0; inset-block: calc((var(--target-min) - 100%) / -2); }
@media (pointer: coarse) { .tag--link::after { inset-block: calc((var(--touch-min) - 100%) / -2); } }
.tag--link:hover { background: var(--btn-media-hover); }
.age {
  display: inline-flex;
  align-items: center;
  block-size: calc(var(--sp-5) + var(--sp-0-5));
  padding-inline: var(--sp-1);
  border: var(--hairline) solid currentColor;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.count-badge {
  display: inline-grid;
  place-items: center;
  min-inline-size: calc(var(--sp-5) + var(--sp-0-5));
  block-size: calc(var(--sp-5) + var(--sp-0-5));
  padding-inline: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--accent-subtle-hover);
  color: var(--accent-text-on-subtle);
  font-size: var(--fs-2xs);
  font-style: normal;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.rating { display: inline-flex; align-items: center; gap: var(--sp-1); }
.rating .ico { color: var(--rating); fill: currentColor; stroke-width: 0; }

.gchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.gchip {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--touch-min);
  padding-inline: var(--sp-5);
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  border: var(--chip-border);
  color: var(--text-1);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.gchip:hover { background: var(--chip-active-bg); color: var(--chip-active-fg); }
.gchip:active { transform: scale(var(--press)); }
.gchip--sm { min-block-size: var(--btn-h-sm); padding-inline: var(--sp-3); font-size: var(--fs-sm); }
@media (max-width: 767px), (pointer: coarse) { .gchip--sm { min-block-size: var(--touch-min); } }

.chip-opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-opt { position: relative; display: inline-flex; }
.chip-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-opt span {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--btn-h-sm);
  padding-inline: var(--sp-3);
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  border: var(--chip-border);
  color: var(--chip-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
@media (max-width: 767px), (pointer: coarse) { .chip-opt span { min-block-size: var(--touch-min); } }
.chip-opt:hover span { color: var(--text-1); }
.chip-opt input:checked + span { background: var(--chip-active-bg); color: var(--chip-active-fg); font-weight: var(--fw-semibold); }
.chip-opt input:focus-visible + span { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-gap); }

.achip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-block-size: var(--btn-h-sm);
  padding-inline: var(--sp-3) var(--sp-2);
  border-radius: var(--chip-radius);
  background: var(--chip-active-bg);
  color: var(--chip-active-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.achip:hover { background: var(--accent-subtle); }

.field { position: relative; display: flex; align-items: center; }
.field__input {
  inline-size: 100%;
  block-size: var(--control-h);
  padding-inline: var(--sp-4);
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--text-1);
  font-size: var(--fs-base);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  appearance: none;
}
textarea.field__input, .field__input--area { block-size: auto; min-block-size: calc(var(--control-h) * 2.5); padding-block: var(--sp-3); line-height: var(--lh-body); resize: vertical; }
.field__input::placeholder { color: var(--input-placeholder); opacity: 1; }
.field__input:hover { border: var(--input-border-hover); }
.field__input:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 0; border-color: transparent; }
.field__ico { position: absolute; inset-inline-start: var(--sp-3); color: var(--text-3); pointer-events: none; }
.field--search .field__input { padding-inline-start: calc(var(--sp-3) + var(--ico-md) + var(--sp-2)); }
.field--search input::-webkit-search-cancel-button { appearance: none; }
.field__chev { position: absolute; inset-inline-end: var(--sp-3); color: var(--text-3); pointer-events: none; }
.field--select .field__input { padding-inline-end: calc(var(--sp-3) + var(--ico-md) + var(--sp-2)); cursor: pointer; }
.field__label { display: block; margin-block-end: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.field__hint { margin-block-start: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); }
.field__error { margin-block-start: var(--sp-2); font-size: var(--fs-xs); color: var(--danger-text); }

.switch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-3); min-block-size: var(--touch-min); cursor: pointer; font-size: var(--fs-md); }
.switch input { position: absolute; opacity: 0; inline-size: var(--switch-w); block-size: var(--switch-h); margin: 0; cursor: pointer; }
.switch__track {
  position: relative;
  inline-size: var(--switch-w);
  block-size: var(--switch-h);
  flex: none;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  transition: background-color var(--dur-2) var(--ease-out);
}
.switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: var(--sp-0-5);
  inset-inline-start: var(--sp-0-5);
  inline-size: calc(var(--switch-h) - var(--sp-1));
  block-size: calc(var(--switch-h) - var(--sp-1));
  border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: var(--elev-1);
  transition: transform var(--dur-2) var(--ease-emph);
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(calc(var(--switch-h) - var(--switch-w))); }
.switch input:focus-visible + .switch__track { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-gap); }

.pop {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-2));
  inset-inline-end: 0;
  inline-size: var(--pop-w);
  max-inline-size: calc(100vw - 2 * var(--gutter-mobile));
  padding: var(--sp-2);
  border-radius: var(--pop-radius);
  background: var(--pop-bg);
  -webkit-backdrop-filter: var(--pop-blur);
  backdrop-filter: var(--pop-blur);
  border: var(--pop-border);
  box-shadow: var(--pop-shadow), var(--glass-highlight);
  color: var(--text-1);
  z-index: var(--z-dropdown);
}
.pop__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); font-weight: var(--fw-semibold); }
.pop__list { display: grid; gap: var(--sp-0-5); }
.pop__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  inline-size: 100%;
  min-block-size: var(--touch-min);
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-md);
  text-align: start;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.pop__item:hover { background: var(--btn-ghost-hover); color: var(--text-1); }
.pop__foot { margin-block-start: var(--sp-2); padding-block-start: var(--sp-2); border-block-start: var(--hairline) solid var(--border-subtle); }

.sheet-scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--overlay-bg); }
.sheet {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-modal);
  max-block-size: var(--sheet-max);
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5) var(--gutter-mobile) calc(var(--sp-6) + env(safe-area-inset-bottom));
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  background: var(--surface-2);
  box-shadow: var(--elev-4);
}

.toasts {
  position: fixed;
  inset-inline: var(--gutter-mobile);
  inset-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  pointer-events: none;
}
html[data-bnav="1"] .toasts { inset-block-end: calc(var(--bnav-h) + var(--sp-4) + env(safe-area-inset-bottom)); }
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-inline-size: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--pop-radius);
  background: var(--text-1);
  color: var(--bg);
  box-shadow: var(--elev-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  pointer-events: auto;
}
.toast[data-kind="error"] { background: var(--danger); color: var(--on-danger); }
.toast[data-kind="success"] { background: var(--success); color: var(--on-success); }

@media (pointer: coarse) {
  .achip { min-block-size: var(--touch-min); }
}

.modal { max-inline-size: calc(100vw - 2 * var(--gutter-mobile)); inline-size: calc(var(--auth-w) + var(--sp-12)); margin: auto; color: var(--text-1); }
.modal::backdrop { background: var(--overlay-bg); }

.modal[open]:not(:modal) {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  block-size: fit-content;
  max-block-size: calc(100dvh - 2 * var(--sp-4));
  overflow: auto;
}
.modal-scrim { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: var(--overlay-bg); }
.modal__box {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--pop-radius);
  background: var(--surface-2);
  border: var(--pop-border);
  box-shadow: var(--pop-shadow), var(--glass-highlight);
}
.modal__icon { display: grid; place-items: center; inline-size: var(--btn-h-lg); block-size: var(--btn-h-lg); border-radius: var(--r-pill); background: var(--accent-subtle); color: var(--accent-text-on-subtle); }
.modal__title { font-size: var(--fs-xl); }
.modal__body { color: var(--text-2); line-height: var(--lh-body); }
.modal__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-start; }
.modal[open] .modal__box { animation: modal-in var(--dur-2) var(--ease-emph); }
@keyframes modal-in { from { opacity: 0; transform: translateY(var(--rise)) scale(.98); } }
.modal--search { inline-size: calc(var(--mega-w) + var(--sp-10)); margin-block-start: calc(var(--header-h-desktop) + var(--sp-4)); }
.modal--search .modal__title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

.qsearch { display: grid; gap: var(--sp-3); }
.qsearch .field__input { block-size: var(--btn-h-lg); }
.qsearch__list { display: grid; gap: var(--sp-0-5); }
.qsearch__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-md); transition: background-color var(--dur-1) var(--ease-out); }
.qsearch__item:hover, .qsearch__item:focus-visible { background: var(--btn-ghost-hover); }
.qsearch__poster { display: grid; place-items: center; inline-size: var(--sp-10); aspect-ratio: var(--poster-ratio); flex: none; border-radius: var(--r-xs); overflow: hidden; background: var(--surface-3); color: var(--text-3); }
.qsearch__poster img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.qsearch__text { display: grid; gap: var(--sp-0-5); min-inline-size: 0; }
.qsearch__text b { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qsearch__text small { color: var(--text-3); font-size: var(--fs-xs); }
.qsearch__empty { padding: var(--sp-4); color: var(--text-3); font-size: var(--fs-sm); text-align: center; }

.notif__item { display: flex; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm); color: var(--text-2); }
.notif__item[data-unread="true"] { background: var(--accent-subtle); color: var(--text-1); }
.notif__item[data-priority="high"] .ico { color: var(--warning-text); }
.notif__item strong { display: block; font-size: var(--fs-md); color: var(--text-1); }
.notif__item p { font-size: var(--fs-sm); margin-block: var(--sp-1); }
.notif__item time { font-size: var(--fs-xs); color: var(--text-3); }
.notif__empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }

.ico--spin { animation: spin calc(var(--dur-3) * 3) linear infinite; }

.reviews { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-6); }
.review { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--card-radius); background: var(--card-bg); border: var(--card-border); }
.review__main { display: grid; gap: var(--sp-2); min-inline-size: 0; flex: 1; }
.review__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.review__name { font-weight: var(--fw-semibold); }
.review__flag, .review__time { color: var(--text-3); font-size: var(--fs-xs); }
.review__text { color: var(--text-2); line-height: var(--lh-body); overflow-wrap: anywhere; }
.review__text--hidden { color: var(--text-3); font-style: italic; }
.reviewbox { display: grid; gap: var(--sp-3); max-inline-size: calc(var(--measure) * 1.2); }
.reviewbox__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.reviewbox__note { flex: 1; min-inline-size: 0; color: var(--text-3); font-size: var(--fs-sm); }
.reviewbox__count { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.reviewbox--guest { grid-template-columns: auto 1fr auto; align-items: center; padding: var(--sp-4) var(--sp-5); border-radius: var(--card-radius); background: var(--card-bg); border: var(--card-border); max-inline-size: none; }
.reviewbox--guest p { color: var(--text-2); }
.reviewbox__icon { color: var(--accent-text); }
@media (max-width: 599px) { .reviewbox--guest { grid-template-columns: auto 1fr; } .reviewbox--guest .btn { grid-column: 1 / -1; } }

@media (max-width: 1023px) {
  .filters--sheet .filters__form {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-modal);
    max-block-size: var(--sheet-max);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-6) var(--gutter-mobile) calc(var(--sp-6) + env(safe-area-inset-bottom));
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    background: var(--surface-2);
    box-shadow: var(--elev-4);
    animation: sheet-in var(--dur-3) var(--ease-emph);
  }
  .filters--sheet .filters__actions { position: sticky; inset-block-end: calc(var(--sp-6) * -1); padding-block: var(--sp-3); margin-block-end: calc(var(--sp-6) * -1); background: var(--surface-2); }
  .filters--sheet .filters__actions .btn { flex: 1; }
}
@keyframes sheet-in { from { transform: translateY(24%); opacity: 0; } }

.hero { position: relative; }
.hero__frame { position: relative; }
.hero__viewport { display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-in-out), visibility 0s linear var(--dur-3);
}
.hero__slide[data-active] { opacity: 1; visibility: visible; transition: opacity var(--dur-3) var(--ease-in-out), visibility 0s; }

.hero__media { position: relative; overflow: hidden; background: var(--surface-3); }
.hero__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 30%; }
.hero__media .ph { display: none; }
.hero__media.is-empty { background: radial-gradient(90% 90% at 30% 20%, var(--accent-subtle-hover), var(--surface-2)); }

.hero__scrim { position: absolute; inset: 0; pointer-events: none; }
.hero__content { position: relative; z-index: 1; }
.hero__text { display: grid; gap: var(--sp-3); max-inline-size: var(--hero-text); color: var(--hero-ink); }
.hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--hero-ink-2); font-size: var(--fs-sm); }
.hero__title { font-size: var(--fs-3xl); color: var(--hero-ink); }
@media (min-width: 768px) { .hero__title { font-size: var(--fs-5xl); } }
.hero__title a { color: inherit; }

@media (pointer: coarse) { .hero__title a { display: inline-block; min-block-size: var(--touch-min); } }
.hero__en { color: var(--hero-ink-2); font-size: var(--fs-sm); margin-block-start: calc(var(--sp-2) * -1); }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--hero-ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.hero__plot {
  color: var(--hero-ink-2);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) { .hero__plot { font-size: var(--fs-base); -webkit-line-clamp: 3; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-3); }

.hero__controls { position: absolute; z-index: 2; display: none; align-items: center; gap: var(--sp-3); }
html.js .hero__controls { display: flex; }
.hero__dots { display: flex; align-items: center; gap: calc(var(--target-min) - var(--hero-dot)); padding-inline: calc((var(--target-min) - var(--hero-dot)) / 2); }
.hero__dot {
  position: relative;
  inline-size: var(--hero-dot);
  block-size: var(--hero-dot);
  border-radius: var(--r-pill);
  background: rgb(var(--media-ink-rgb) / .45);
  transition: inline-size var(--dur-3) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.hero__dot::after { content: ""; position: absolute; inset: calc((var(--touch-min) - var(--hero-dot)) / -2) calc((var(--target-min) - var(--hero-dot)) / -2); }
.hero__dot[aria-selected="true"] { inline-size: var(--hero-dot-active); background: var(--hero-ink); }

@media (pointer: coarse) {
  
  .hero__dots { gap: calc(var(--touch-min) - var(--hero-dot)); padding-inline: calc((var(--touch-min) - var(--hero-dot)) / 2); }
  .hero__dot::after { inset: calc((var(--touch-min) - var(--hero-dot)) / -2); }
}
.hero__arrow {
  display: none;
  place-items: center;
  inline-size: var(--btn-h-md);
  block-size: var(--btn-h-md);
  border-radius: var(--r-pill);
  background: var(--btn-media-bg);
  -webkit-backdrop-filter: var(--btn-media-blur);
  backdrop-filter: var(--btn-media-blur);
  color: var(--hero-ink);
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.hero__arrow:hover { background: var(--btn-media-hover); }
.hero__arrow:active { transform: scale(var(--press)); }
@media (hover: hover) and (min-width: 768px) { .hero__arrow { display: grid; } }

.hero--cinematic .hero__slide { min-block-size: clamp(var(--hero-min), var(--hero-h-mobile), var(--hero-max)); }
@media (min-width: 768px) { .hero--cinematic .hero__slide { min-block-size: clamp(var(--hero-min), var(--hero-h-desktop), var(--hero-max)); } }
.hero--cinematic .hero__media { position: absolute; inset: 0; }
.hero--cinematic .hero__scrim {
  background:
    linear-gradient(to top, var(--hero-fade) 0%, rgb(var(--bg-rgb) / 0) 32%),
    linear-gradient(to top, rgb(var(--scrim-rgb) / .78) 0%, rgb(var(--scrim-rgb) / .2) 55%, rgb(var(--scrim-rgb) / .35) 100%);
}
@media (min-width: 768px) {
  .hero--cinematic .hero__scrim {
    background:
      linear-gradient(to top, var(--hero-fade) 0%, rgb(var(--bg-rgb) / 0) 26%),
      linear-gradient(to left, rgb(var(--scrim-rgb) / .86) 0%, rgb(var(--scrim-rgb) / .5) 38%, rgb(var(--scrim-rgb) / 0) 72%),
      linear-gradient(to bottom, rgb(var(--scrim-rgb) / .45) 0%, rgb(var(--scrim-rgb) / 0) 30%);
  }
}
.hero--cinematic .hero__content {
  align-self: end;
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--gutter-desktop));
  margin-inline: auto;
  padding: calc(var(--header-h-mobile) + var(--sp-8)) var(--gutter-mobile) var(--sp-16);
}
@media (min-width: 768px) {
  .hero--cinematic .hero__content { padding: calc(var(--header-h-desktop) + var(--sp-12)) var(--gutter-desktop) calc(var(--sp-20) + var(--sp-2)); }
}
.hero--cinematic .hero__controls { inset-block-end: var(--sp-6); inset-inline-end: var(--gutter-mobile); }
@media (min-width: 768px) {
  .hero--cinematic .hero__controls { inset-block-end: var(--sp-10); inset-inline-end: max(var(--gutter-desktop), calc((100% - var(--container)) / 2)); }
}
.hero--cinematic .hero__slide[data-active] .hero__media img { animation: hero-drift calc(var(--dur-3) * 30) var(--ease-out) both; }
@keyframes hero-drift { from { transform: scale(1.045); } to { transform: scale(1); } }
html[data-motion="reduced"] .hero__media img, html[data-motion="off"] .hero__media img { animation: none !important; }

.hero--framed {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--gutter-desktop));
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter-mobile) 0;
}
@media (min-width: 768px) { .hero--framed { padding: var(--sp-6) var(--gutter-desktop) 0; } }
.hero--framed .hero__frame {
  border-radius: var(--hero-radius);
  overflow: hidden;
  box-shadow: var(--elev-2);
  isolation: isolate;
  background: var(--surface-3);
}
.hero--framed .hero__slide { min-block-size: var(--hero-framed-mobile); max-block-size: var(--hero-max); }
@media (min-width: 768px) { .hero--framed .hero__slide { min-block-size: 0; aspect-ratio: 21 / 9; } }
@media (min-width: 768px) and (max-width: 1100px) { .hero--framed .hero__slide { aspect-ratio: 16 / 9; } }
.hero--framed .hero__media { position: absolute; inset: 0; }
.hero--framed .hero__scrim {
  background: linear-gradient(to top, rgb(var(--scrim-rgb) / .9) 0%, rgb(var(--scrim-rgb) / .45) 45%, rgb(var(--scrim-rgb) / .05) 80%);
}
@media (min-width: 768px) {
  .hero--framed .hero__scrim {
    background:
      linear-gradient(to left, rgb(var(--scrim-rgb) / .85) 0%, rgb(var(--scrim-rgb) / .45) 42%, rgb(var(--scrim-rgb) / 0) 75%),
      linear-gradient(to top, rgb(var(--scrim-rgb) / .5) 0%, rgb(var(--scrim-rgb) / 0) 40%);
  }
}
.hero--framed .hero__content { align-self: end; padding: var(--sp-12) var(--sp-5) var(--sp-16); }
@media (min-width: 768px) { .hero--framed .hero__content { padding: var(--sp-12) var(--sp-12) var(--sp-12); } }
.hero--framed .hero__controls { inset-block-end: var(--sp-5); inset-inline-end: var(--sp-5); }
@media (min-width: 768px) { .hero--framed .hero__controls { inset-block-end: var(--sp-8); inset-inline-end: var(--sp-10); } }

.hero--split {
  --hero-ink: var(--text-1);
  --hero-ink-2: var(--text-2);
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--gutter-desktop));
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter-mobile) 0;
}
@media (min-width: 768px) { .hero--split { padding: var(--sp-8) var(--gutter-desktop) 0; } }
.hero--split .hero__slide { grid-template-rows: auto auto; gap: var(--sp-5); }
.hero--split .hero__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--hero-radius);
  box-shadow: var(--elev-2);
  isolation: isolate;
}
.hero--split .hero__scrim { display: none; }
.hero--split .tag--media { background: var(--chip-bg); color: var(--chip-fg); border: var(--chip-border); }
.hero--split .hero__content { padding-block-end: var(--sp-12); }
@media (min-width: 900px) {
  .hero--split .hero__slide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; align-items: center; gap: var(--sp-12); }
  .hero--split .hero__media { grid-column: 2; grid-row: 1; }
  .hero--split .hero__content { grid-column: 1; grid-row: 1; padding-block: var(--sp-8) var(--sp-16); }
}
.hero--split .hero__controls { inset-block-end: var(--sp-2); inset-inline-start: var(--gutter-mobile); }
@media (min-width: 900px) { .hero--split .hero__controls { inset-inline-start: 0; inset-block-end: var(--sp-6); } }
.hero--split .hero__dot { background: var(--border-strong); }
.hero--split .hero__dot[aria-selected="true"] { background: var(--accent); }
.hero--split .hero__arrow { background: var(--btn-secondary-bg); color: var(--text-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero--split .hero__arrow:hover { background: var(--btn-secondary-hover); }

.hero--cinematic .btn:not(.btn--primary), .hero--framed .btn:not(.btn--primary) {
  --btn-bg: var(--btn-media-bg);
  --btn-fg: var(--btn-media-fg);
  --btn-bg-hover: var(--btn-media-hover);
  --btn-bg-active: var(--btn-media-hover);
  --btn-border: var(--hairline) solid transparent;
  -webkit-backdrop-filter: var(--btn-media-blur);
  backdrop-filter: var(--btn-media-blur);
}

.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--section-gap-mobile); padding-block-start: var(--sp-8); }
.rows > *, .rail, .row .container { min-inline-size: 0; }
@media (min-width: 768px) { .rows { gap: var(--section-gap-desktop); padding-block-start: var(--sp-10); } }
html[data-hero="split"] .rows { padding-block-start: 0; }

.row__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-block-end: var(--sp-4); }
@media (min-width: 768px) { .row__head { margin-block-end: var(--sp-5); } }
.row__titles { min-inline-size: 0; }
.row__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xl); color: var(--text-1); }
@media (min-width: 768px) { .row__title { font-size: var(--fs-2xl); } }
.row__ico { color: var(--accent-text); inline-size: var(--ico-lg); block-size: var(--ico-lg); }
.row__sub { margin-block-start: var(--sp-1); font-size: var(--fs-sm); color: var(--text-3); }
.row__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  min-block-size: var(--touch-min);
  padding-inline: var(--sp-2);
  margin-inline-end: calc(var(--sp-2) * -1);
  border-radius: var(--r-sm);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: background-color var(--dur-1) var(--ease-out);
}
.row__more:hover { background: var(--btn-ghost-hover); }
.row__note { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--card-radius); border: var(--hairline) dashed var(--border-strong); color: var(--text-3); font-size: var(--fs-sm); }

.rail { position: relative; }
.rail__track {
  --card-w: var(--card-w-poster-md);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  gap: var(--card-gap);
  margin-inline: calc(var(--gutter-mobile) * -1);
  padding-inline: var(--gutter-mobile);
  padding-block: var(--sp-2) var(--sp-3);
  margin-block: calc(var(--sp-2) * -1) calc(var(--sp-3) * -1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter-mobile);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .rail__track { margin-inline: calc(var(--gutter-desktop) * -1); padding-inline: var(--gutter-desktop); scroll-padding-inline: var(--gutter-desktop); }
}
.rail__item { scroll-snap-align: start; min-inline-size: 0; }
.row[data-size="sm"] .rail__track { --card-w: var(--card-w-poster-sm); }
.row[data-size="lg"] .rail__track { --card-w: var(--card-w-poster-lg); }
.rail[data-card="cover"] .rail__track, .rail[data-card="continue"] .rail__track { --card-w: var(--card-w-cover-md); }
.row[data-size="sm"] .rail[data-card="cover"] .rail__track { --card-w: var(--card-w-cover-sm); }
.row[data-size="lg"] .rail[data-card="cover"] .rail__track { --card-w: var(--card-w-cover-lg); }
.rail[data-card="rank"] .rail__track { --card-w: calc(var(--card-w-poster-md) + var(--rank-w) * .55); }
.rail[data-card="wide"] .rail__track { --card-w: var(--card-min-wide); }

.rail__btn {
  position: absolute;
  inset-block-start: calc(var(--card-w, var(--card-w-poster-md)) * .75);
  z-index: 2;
  display: none;
  place-items: center;
  inline-size: var(--btn-h-md);
  block-size: var(--btn-h-md);
  border-radius: var(--r-pill);
  background: var(--pop-bg);
  -webkit-backdrop-filter: var(--pop-blur);
  backdrop-filter: var(--pop-blur);
  border: var(--pop-border);
  box-shadow: var(--elev-2);
  color: var(--text-1);
  transform: translateY(-50%);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.rail__btn--prev { inset-inline-start: calc(var(--sp-3) * -1); }
.rail__btn--next { inset-inline-end: calc(var(--sp-3) * -1); }
.rail__btn:active { transform: translateY(-50%) scale(var(--press)); }
.rail__btn[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (min-width: 768px) { .rail__btn:not([hidden]) { display: grid; } }
.rail[data-card="cover"] .rail__btn, .rail[data-card="continue"] .rail__btn { inset-block-start: calc(var(--card-w-cover-md) * .28); }

.grid {
  --card-min: var(--card-min-poster);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--sp-6) var(--card-gap);
}
.grid--cover, .grid--continue { --card-min: var(--card-min-cover); }
.grid--wide { --card-min: var(--card-min-wide); row-gap: var(--card-gap); }
.grid--rank { --card-min: calc(var(--card-min-poster) + var(--rank-w) * .5); }
@media (max-width: 479px) { .grid:not(.grid--cover):not(.grid--continue):not(.grid--wide) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid__item { min-inline-size: 0; }

.spot {
  position: relative;
  display: grid;
  min-block-size: calc(var(--hero-min) * .9);
  border-radius: var(--hero-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--elev-2);
  color: var(--hero-ink);
}
.spot__media { position: absolute; inset: 0; background: var(--surface-3); }
.spot__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.spot__media .ph { display: none; }
.spot__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--scrim-rgb) / .92) 0%, rgb(var(--scrim-rgb) / .5) 50%, rgb(var(--scrim-rgb) / .1) 100%); }
@media (min-width: 768px) { .spot__scrim { background: linear-gradient(to left, rgb(var(--scrim-rgb) / .9) 0%, rgb(var(--scrim-rgb) / .55) 45%, rgb(var(--scrim-rgb) / 0) 80%); } }
.spot__body { position: relative; align-self: end; display: grid; gap: var(--sp-3); max-inline-size: var(--hero-text); padding: var(--sp-8) var(--sp-5); }
@media (min-width: 768px) { .spot__body { align-self: center; padding: var(--sp-12); } }
.spot__title { font-size: var(--fs-2xl); color: var(--hero-ink); }
@media (min-width: 768px) { .spot__title { font-size: var(--fs-4xl); } }
.spot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--hero-ink-2); font-size: var(--fs-sm); }
.spot__plot { color: var(--hero-ink-2); line-height: var(--lh-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.spot__actions { display: flex; gap: var(--sp-3); margin-block-start: var(--sp-2); }

.promo {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--card-radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(var(--accent-rgb) / .16), rgb(var(--accent-rgb) / 0) 60%),
    var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
}
@media (min-width: 768px) { .promo { grid-template-columns: auto 1fr auto; padding: var(--sp-10) var(--sp-12); gap: var(--sp-8); } }
.promo__icon {
  display: grid;
  place-items: center;
  inline-size: calc(var(--sp-12) + var(--sp-2));
  block-size: calc(var(--sp-12) + var(--sp-2));
  border-radius: var(--r-lg);
  background: var(--accent-subtle-hover);
  color: var(--accent-text-on-subtle);
}
.promo__icon .ico { inline-size: var(--ico-lg); block-size: var(--ico-lg); }
.promo__title { font-size: var(--fs-xl); }
@media (min-width: 768px) { .promo__title { font-size: var(--fs-2xl); } }
.promo__sub { margin-block-start: var(--sp-2); color: var(--text-2); }

.note {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
}
.note__icon { color: var(--accent-text); }
.note__title { font-size: var(--fs-xl); margin-block-end: var(--sp-2); }
.note__body p { color: var(--text-2); line-height: var(--lh-body); max-inline-size: var(--measure); }
.note__body p + p { margin-block-start: var(--sp-3); }

.card { min-inline-size: 0; }
.card__link {
  position: relative;
  display: block;
  color: inherit;
  border-radius: var(--poster-radius);
  -webkit-tap-highlight-color: transparent;
}
.card__link:focus-visible { outline-offset: var(--sp-1); }
.card__media {
  position: relative;
  aspect-ratio: var(--poster-ratio);
  border-radius: var(--poster-radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--poster-bg);
  box-shadow: var(--poster-ring), var(--poster-shadow);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.card__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: 1;
}
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: var(--poster-ring);
  pointer-events: none;
}
@media (hover: hover) {
  .card__link:hover .card__media { transform: translateY(var(--lift)); box-shadow: var(--poster-ring), var(--poster-shadow-hover); }
  .card__link:hover .card__media::after { box-shadow: var(--poster-ring-hover); }
  .card__link:hover .card__title { color: var(--accent-text); }
}
.card__link:active .card__media { transform: scale(var(--press)); }

.ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  text-align: center;
  color: var(--text-3);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(var(--accent-rgb) / .1), rgb(var(--accent-rgb) / 0) 70%),
    linear-gradient(160deg, var(--surface-3), var(--surface-2));
}
.ph__ico { inline-size: var(--ph-ico); block-size: var(--ph-ico); opacity: .7; stroke-width: calc(var(--ico-stroke) * .75); }
.ph__label {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-head);
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.is-broken img { display: none; }

.card__body { padding-block-start: var(--sp-2); }
@media (min-width: 768px) { .card__body { padding-block-start: var(--sp-3); } }
.card__title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur-1) var(--ease-out);
}
@media (min-width: 768px) { .card__title { font-size: var(--fs-md); } }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin-block-start: var(--sp-1);
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.card__role { margin-block-start: var(--sp-1); color: var(--text-3); font-size: var(--fs-xs); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.card__plot { margin-block-start: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.card--cover .card__media, .card--continue .card__media { aspect-ratio: var(--cover-ratio); }
.card__progress {
  position: absolute;
  inset-inline: var(--sp-2);
  inset-block-end: var(--sp-2);
  z-index: 3;
  block-size: var(--progress-h);
  border-radius: var(--r-pill);
  background: rgb(var(--media-ink-rgb) / .35);
  overflow: hidden;
}
.card__progress i { display: block; block-size: 100%; border-radius: inherit; background: var(--accent); }

.card--rank .card__link { display: grid; grid-template-columns: var(--rank-w) minmax(0, 1fr); align-items: end; }
.card--rank .card__rank {
  grid-row: 1 / span 2;
  align-self: end;
  margin-inline-end: calc(var(--rank-w) * -.25);
  padding-block-end: var(--sp-10);
  font-family: var(--font-head);
  font-size: var(--fs-6xl);
  font-weight: var(--fw-head);
  line-height: .8;
  color: var(--surface-1);
  -webkit-text-stroke: calc(var(--hairline) * 2) var(--border-strong);
  paint-order: stroke fill;
  text-align: center;
  z-index: 0;
}
.card--rank .card__media, .card--rank .card__body { grid-column: 2; }
.card--rank .card__media { z-index: 1; }

.card--wide .card__link {
  display: grid;
  grid-template-columns: calc(var(--card-min-poster) * .8) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-3);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.card--wide .card__body { padding-block-start: var(--sp-1); }
.card--wide .card__title { font-size: var(--fs-base); }
@media (hover: hover) {
  .card--wide .card__link:hover { box-shadow: var(--card-shadow-hover); border: var(--card-border-hover); transform: translateY(var(--lift)); }
  .card--wide .card__link:hover .card__media { transform: none; }
}

.state {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  max-inline-size: calc(var(--measure) * .7);
  margin-inline: auto;
  padding-block: var(--sp-16);
  text-align: center;
}
.state--page { padding-block: var(--sp-20) var(--sp-16); }
.state--inline { padding-block: var(--sp-10); }
.state__art {
  display: grid;
  place-items: center;
  inline-size: var(--state-art);
  block-size: var(--state-art);
  margin-block-end: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--accent-subtle);
  color: var(--accent-text-on-subtle);
}
.state__art .ico { inline-size: calc(var(--ico-lg) * 1.3); block-size: calc(var(--ico-lg) * 1.3); stroke-width: calc(var(--ico-stroke) * .85); }
.state__title { font-size: var(--fs-xl); }
@media (min-width: 768px) { .state--page .state__title { font-size: var(--fs-2xl); } }
.state__text { color: var(--text-2); line-height: var(--lh-body); }
.state .btn { margin-block-start: var(--sp-3); }

.skel { border-radius: var(--r-md); background: var(--surface-3); }
.skel--h1 { block-size: var(--fs-4xl); inline-size: 40%; margin-block: var(--sp-10) var(--sp-6); }
.skel--block { block-size: calc(var(--sp-24) * 2); }
.skel--line { block-size: var(--fs-md); margin-block: var(--sp-3); }
.skel--field { block-size: var(--control-h); margin-block-end: var(--sp-4); border-radius: var(--input-radius); }
.skel--btn { block-size: var(--btn-h-lg); border-radius: var(--btn-radius); }
html[data-motion="full"] .skel { background: linear-gradient(100deg, var(--surface-3) 40%, var(--surface-2) 50%, var(--surface-3) 60%) 0 0 / 300% 100%; animation: shimmer calc(var(--dur-3) * 5) linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }

.thero {
  position: relative;
  display: grid;
  align-items: end;
  min-block-size: clamp(var(--thero-min), 64svh, var(--thero-max));
  padding-block-start: var(--header-h-mobile);
  background: rgb(var(--scrim-rgb));
  color: var(--hero-ink);
  isolation: isolate;
  overflow: hidden;
}
@media (min-width: 1024px) { .thero { padding-block-start: var(--header-h-desktop); } }
.thero__backdrop { position: absolute; inset: 0; z-index: -2; }
.thero__backdrop img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 22%; }
.thero__backdrop .ph { display: none; }
.thero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(var(--scrim-rgb)) 0%, rgb(var(--scrim-rgb) / .9) 30%, rgb(var(--scrim-rgb) / .5) 62%, rgb(var(--scrim-rgb) / .55) 100%);
}
@media (min-width: 768px) {
  .thero__scrim {
    background:
      linear-gradient(to top, rgb(var(--scrim-rgb)) 0%, rgb(var(--scrim-rgb) / .6) 32%, rgb(var(--scrim-rgb) / 0) 70%),
      linear-gradient(to left, rgb(var(--scrim-rgb) / .92) 0%, rgb(var(--scrim-rgb) / .6) 45%, rgb(var(--scrim-rgb) / .15) 100%),
      linear-gradient(to bottom, rgb(var(--scrim-rgb) / .5) 0%, rgb(var(--scrim-rgb) / 0) 25%);
  }
}
.thero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  padding-block: var(--sp-10) var(--sp-8);
}
@media (min-width: 768px) {
  .thero__in { grid-template-columns: var(--thero-poster) minmax(0, 1fr); align-items: end; gap: var(--sp-10); padding-block: var(--sp-16) var(--sp-12); }
}
.thero__poster {
  position: relative;
  inline-size: var(--thero-poster);
  aspect-ratio: var(--poster-ratio);
  border-radius: var(--poster-radius);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--elev-3), inset 0 0 0 var(--hairline) rgb(var(--media-ink-rgb) / .12);
}
.thero__poster img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.thero__info { display: grid; gap: var(--sp-3); max-inline-size: calc(var(--measure) * 1.15); }
.thero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); color: var(--hero-ink-2); font-size: var(--fs-sm); }
.thero__kicker .tag { background: var(--btn-media-bg); color: var(--hero-ink); border-color: transparent; }
.thero__genre { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--target-min); min-inline-size: var(--target-min); color: var(--hero-ink-2); transition: color var(--dur-1) var(--ease-out); }
@media (max-width: 767px), (pointer: coarse) { .thero__genre { min-block-size: var(--touch-min); min-inline-size: var(--touch-min); justify-content: center; } }
.thero__genre:hover { color: var(--hero-ink); }
.thero__genre + .thero__genre::before { content: "·"; margin-inline-end: var(--sp-3); opacity: .6; }
.thero__title { font-size: var(--fs-3xl); color: var(--hero-ink); }
@media (min-width: 768px) { .thero__title { font-size: var(--fs-5xl); } }
.thero__en { color: var(--hero-ink-2); font-size: var(--fs-sm); margin-block-start: calc(var(--sp-2) * -1); }
.thero__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); color: var(--hero-ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.thero__facts b { color: var(--hero-ink); font-weight: var(--fw-bold); }
.thero__facts small { color: var(--hero-ink-2); font-size: var(--fs-xs); margin-inline-start: var(--sp-1); }
.thero__plot { color: var(--hero-ink-2); line-height: var(--lh-body); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.thero__people { color: var(--hero-ink-2); font-size: var(--fs-sm); }
.thero__people a { color: var(--hero-ink); white-space: nowrap; transition: opacity var(--dur-1) var(--ease-out); }
.thero__people a:hover { opacity: .8; }
.thero__label { color: var(--hero-ink-2); margin-inline-end: var(--sp-2); }
.thero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-3); }
.thero .btn:not(.btn--primary) {
  --btn-bg: var(--btn-media-bg);
  --btn-fg: var(--btn-media-fg);
  --btn-bg-hover: var(--btn-media-hover);
  --btn-bg-active: var(--btn-media-hover);
  --btn-border: var(--hairline) solid transparent;
}
.thero__why { display: flex; align-items: center; gap: var(--sp-2); color: var(--hero-ink-2); font-size: var(--fs-sm); inline-size: 100%; }
.thero--episode .tag--link { background: var(--btn-media-bg); color: var(--hero-ink); }

.tbody { padding-block-start: var(--sp-6); }
.tabs {
  display: flex;
  gap: var(--sp-1);
  margin-block-end: var(--sp-6);
  border-block-end: var(--hairline) solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  min-block-size: calc(var(--touch-min) + var(--sp-1));
  padding-inline: var(--sp-4);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  transition: color var(--dur-1) var(--ease-out);
}
.tab:hover { color: var(--text-1); }
.tab[aria-selected="true"] { color: var(--text-1); font-weight: var(--fw-semibold); }
html.js .tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--sp-3);
  inset-block-end: calc(var(--hairline) * -1);
  block-size: var(--underline);
  border-radius: var(--r-pill);
  background: var(--accent);
}
.tpanels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
html.js .tpanels { display: block; }
html.js .tpanel:not([data-active]) { display: none; }
.tpanel__title { font-size: var(--fs-xl); margin-block-end: var(--sp-4); }
html.js .tpanel__title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

.seasons { display: flex; gap: var(--sp-2); margin-block-end: var(--sp-4); overflow-x: auto; scrollbar-width: none; padding-block: var(--sp-1); }
.seasons::-webkit-scrollbar { display: none; }
.season {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  min-block-size: var(--btn-h-md);
  padding-inline: var(--sp-4);
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  border: var(--chip-border);
  color: var(--chip-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
@media (max-width: 767px) { .season { min-block-size: var(--touch-min); } }
.season em { font-style: normal; color: var(--text-3); font-size: var(--fs-xs); }
.season:hover { color: var(--text-1); }
.season[aria-current="true"] { background: var(--chip-active-bg); color: var(--chip-active-fg); font-weight: var(--fw-semibold); }
.season[aria-current="true"] em { color: inherit; font-weight: var(--fw-regular); }

.eps { display: grid; border-block-start: var(--hairline) solid var(--border-subtle); }
.ep {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--sp-10) + var(--sp-2)) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-block-end: var(--hairline) solid var(--border-subtle);
  transition: background-color var(--dur-1) var(--ease-out);
}
.ep:hover { background: var(--btn-ghost-hover); }
.ep.is-current { background: var(--accent-subtle); }
.ep__num { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.ep.is-current .ep__num { color: var(--accent-text-on-subtle); }
.ep__link { display: grid; gap: var(--sp-0-5); min-block-size: var(--touch-min); align-content: center; min-inline-size: 0; }
.ep__name { color: var(--text-1); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep__meta { color: var(--text-3); font-size: var(--fs-xs); }
.ep__play { color: var(--accent-text); }
.ep__play:hover { background: var(--accent-subtle-hover); }
.ep__soon { color: var(--text-3); font-size: var(--fs-xs); padding-inline: var(--sp-3); }
.ep__progress { position: absolute; inset-inline: var(--sp-3); inset-block-end: 0; block-size: calc(var(--progress-h) * .5); background: var(--border-subtle); }
.ep__progress i { display: block; block-size: 100%; background: var(--accent); }

.tdetails__plot { color: var(--text-2); line-height: var(--lh-body); max-inline-size: var(--measure); margin-block-end: var(--sp-6); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min-cover) * .7), 1fr)); gap: var(--sp-4) var(--sp-6); }
.fact { display: grid; gap: var(--sp-1); padding-block-end: var(--sp-3); border-block-end: var(--hairline) solid var(--border-subtle); }
.fact dt { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.fact dd { margin: 0; color: var(--text-1); font-size: var(--fs-md); }
.fact dd a { color: var(--accent-text); }
.tdetails__h { font-size: var(--fs-lg); margin-block: var(--sp-10) var(--sp-4); }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min-cover) * .8), 1fr)); gap: var(--sp-2) var(--sp-4); }
.person { display: flex; align-items: center; gap: var(--sp-3); min-block-size: calc(var(--touch-min) + var(--sp-2)); padding: var(--sp-1); border-radius: var(--r-md); transition: background-color var(--dur-1) var(--ease-out); }
.person:hover { background: var(--btn-ghost-hover); }
.avatar--person { inline-size: var(--avatar-lg); block-size: var(--avatar-lg); font-size: var(--fs-sm); }
.avatar--sm { inline-size: var(--avatar); block-size: var(--avatar); font-size: var(--fs-xs); }
.person__text { display: grid; gap: var(--sp-0-5); min-inline-size: 0; }
.person__name { color: var(--text-1); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person__role { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people--chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.person--chip { background: var(--chip-bg); border: var(--chip-border); border-radius: var(--chip-radius); padding-inline: var(--sp-1) var(--sp-4); min-block-size: var(--touch-min); }
.row--related { margin-block-start: var(--section-gap-mobile); }
@media (min-width: 768px) { .row--related { margin-block-start: var(--section-gap-desktop); } }

.tpanel__app { min-block-size: calc(var(--sp-24) + var(--sp-8)); }

.person-page { padding-block-start: var(--sp-10); }
.phead { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
@media (min-width: 768px) { .phead { grid-template-columns: var(--person-photo) minmax(0, 1fr); gap: var(--sp-10); } }
.phead__photo {
  position: relative;
  inline-size: var(--person-photo);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--elev-2);
}
.phead__photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.phead__photo--mono {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgb(var(--accent-rgb) / .35), rgb(var(--accent-rgb) / 0) 65%),
    var(--accent-subtle-hover);
  color: var(--accent-text-on-subtle);
}
.phead__photo--mono span { font-family: var(--font-head); font-size: var(--fs-5xl); font-weight: var(--fw-head); line-height: 1; }
.phead__info { display: grid; gap: var(--sp-3); }
.phead__role { color: var(--accent-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.phead__name { font-size: var(--fs-3xl); }
@media (min-width: 768px) { .phead__name { font-size: var(--fs-5xl); } }
.phead__facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); color: var(--text-2); font-size: var(--fs-sm); }
.phead__facts li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.phead__genres { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.stats { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.stat {
  display: grid;
  gap: var(--sp-0-5);
  min-inline-size: calc(var(--sp-24) + var(--sp-4));
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
}
.stat b { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.2; }
.stat span { color: var(--text-3); font-size: var(--fs-xs); }
.pbio { margin-block-start: var(--sp-10); }
.pbio p { color: var(--text-2); line-height: var(--lh-body); max-inline-size: var(--measure); }
.pworks, .ppartners { margin-block-start: var(--section-gap-mobile); }
@media (min-width: 768px) { .pworks, .ppartners { margin-block-start: var(--section-gap-desktop); } }

.browse { padding-block-start: var(--sp-8); }
.browse__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-block-end: var(--sp-5); }
.browse__title { font-size: var(--fs-3xl); }
@media (min-width: 768px) { .browse__title { font-size: var(--fs-4xl); } }
.browse__count { color: var(--text-3); font-size: var(--fs-sm); }
.browse__bar { display: flex; gap: var(--sp-2); margin-block-end: var(--sp-4); }
.browse__bar .field { flex: 1; }
.browse__bar .field__input { block-size: var(--btn-h-lg); font-size: var(--fs-base); }
.browse__bar .btn { block-size: var(--btn-h-lg); }
.browse__active { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-5); }
.browse__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
@media (min-width: 1024px) { .browse__layout { grid-template-columns: var(--filters-w) minmax(0, 1fr); align-items: start; gap: var(--sp-10); } }
.filters { min-inline-size: 0; }
.filters__toggle { list-style: none; inline-size: fit-content; }
.filters__toggle::-webkit-details-marker { display: none; }
.filters__form { display: grid; gap: var(--sp-6); margin-block-start: var(--sp-4); }
@media (min-width: 1024px) {
  html.js .filters__toggle { display: none; }
  .filters { position: sticky; inset-block-start: calc(var(--header-h-desktop) + var(--sp-6)); max-block-size: calc(100vh - var(--header-h-desktop) - var(--sp-12)); overflow-y: auto; scrollbar-width: thin; padding-inline-end: var(--sp-2); }
  html.js .filters__form { margin-block-start: 0; }
}
.filters__group { display: grid; gap: var(--sp-3); }
.filters__legend { margin-block-end: var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-1); }
.filters__genres { display: grid; gap: var(--sp-2); }
.chip-more { display: grid; gap: var(--sp-2); }
.chip-more__toggle {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-block-size: var(--btn-h-sm); padding-inline: var(--sp-3);
  border-radius: var(--chip-radius); border: var(--hairline) dashed var(--border-strong);
  color: var(--accent-text); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  cursor: pointer; list-style: none; justify-self: start;
}
.chip-more__toggle::-webkit-details-marker { display: none; }
.chip-more__toggle:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-gap); }
.chip-more__chev { transition: transform var(--dur-2) var(--ease-out); }
.chip-more[open] .chip-more__chev { transform: rotate(180deg); }
@media (max-width: 767px), (pointer: coarse) { .chip-more__toggle { min-block-size: var(--touch-min); } }
.filters__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
html.js .filters__actions .btn--primary { display: none; }
.browse__results { min-inline-size: 0; }
.pager { display: flex; justify-content: center; margin-block-start: var(--sp-10); }
.pager--end { color: var(--text-3); font-size: var(--fs-sm); }

.plans-page { padding-block-start: var(--sp-10); }
.pagehead { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; margin-block-end: var(--sp-10); }
.pagehead__kicker { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--accent-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pagehead__title { font-size: var(--fs-3xl); }
@media (min-width: 768px) { .pagehead__title { font-size: var(--fs-5xl); } }
.phead-sub { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-2); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--plan-min), 1fr)); gap: var(--sp-5); align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
}
.plan--featured {
  border: calc(var(--hairline) * 2) solid var(--accent);
  box-shadow: var(--card-shadow-hover);
}
@media (min-width: 1024px) { .plan--featured { transform: translateY(calc(var(--sp-2) * -1)); } }
.plan__ribbon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.plan__name { font-size: var(--fs-xl); }
.plan__term { color: var(--text-3); font-size: var(--fs-sm); margin-block-start: calc(var(--sp-2) * -1); }
.plan__price { display: flex; align-items: baseline; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.plan__price b { font-family: var(--font-head); font-size: var(--fs-4xl); font-weight: var(--fw-head); line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan__price span { color: var(--text-2); font-size: var(--fs-sm); }
.plan__daily { color: var(--text-3); font-size: var(--fs-sm); }
.plan__list { display: grid; gap: var(--sp-2); padding-block: var(--sp-4); margin-block: var(--sp-1) auto; border-block-start: var(--hairline) solid var(--border-subtle); }
.plan__list li { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); }
.plan__list .ico { color: var(--success-text); margin-block-start: var(--sp-0-5); }
.plan__best .ico { color: var(--accent-text); }
.plan__cta { margin-block-start: var(--sp-2); }
.plans__closed, .plans__note { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-block-start: var(--sp-6); color: var(--text-3); font-size: var(--fs-sm); text-align: center; }
.pay-status { margin-block-end: var(--sp-6); padding: var(--sp-4); border-radius: var(--card-radius); background: var(--accent-subtle); color: var(--text-1); display: flex; align-items: center; gap: var(--sp-3); }

.doc { max-inline-size: calc(var(--measure) + 2 * var(--gutter-desktop)); padding-block-start: var(--sp-12); }
.doc__title { font-size: var(--fs-3xl); margin-block-end: var(--sp-6); }
@media (min-width: 768px) { .doc__title { font-size: var(--fs-4xl); } }
.doc__body p { color: var(--text-2); font-size: var(--fs-base); line-height: var(--lh-body); }
@media (min-width: 768px) { .doc__body p { font-size: var(--fs-lg); } }
.doc__body p + p { margin-block-start: var(--sp-5); }
.doc__social { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-8); }

.app-shell { padding-block-start: var(--sp-8); }

.btn--brand { --btn-bg: var(--btn-primary-bg); --btn-fg: var(--btn-primary-fg); --btn-bg-hover: var(--btn-primary-hover); --btn-bg-active: var(--btn-primary-active); --btn-border: var(--hairline) solid transparent; --btn-shadow: var(--btn-primary-shadow); }
.input { inline-size: 100%; min-block-size: var(--control-h); padding: var(--sp-2) var(--sp-4); border: var(--input-border); border-radius: var(--input-radius); background: var(--input-bg); color: var(--text-1); font-size: var(--fs-base); transition: border-color var(--dur-1) var(--ease-out); }
textarea.input { line-height: var(--lh-body); resize: vertical; padding-block: var(--sp-3); }
.input::placeholder { color: var(--input-placeholder); opacity: 1; }
.input:hover { border: var(--input-border-hover); }
.input:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 0; border-color: transparent; }
.empty { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-12) var(--sp-4); text-align: center; color: var(--text-2); }
.empty > .ico { inline-size: calc(var(--ico-lg) * 1.4); block-size: calc(var(--ico-lg) * 1.4); color: var(--accent-text); padding: var(--sp-3); box-sizing: content-box; border-radius: var(--r-pill); background: var(--accent-subtle); }
.empty h1, .empty h2, .empty h3 { font-size: var(--fs-xl); color: var(--text-1); }
.empty--page { padding-block: var(--sp-20); }

.auth {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 100svh;
  padding: var(--sp-10) var(--gutter-mobile);
  isolation: isolate;
}
.auth__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 60% at 85% 0%, rgb(var(--accent-rgb) / .2), rgb(var(--accent-rgb) / 0) 70%),
    radial-gradient(60% 55% at 10% 100%, rgb(var(--accent-rgb) / .1), rgb(var(--accent-rgb) / 0) 70%),
    var(--bg);
}
.auth__card {
  display: grid;
  gap: var(--sp-5);
  inline-size: 100%;
  max-inline-size: var(--auth-w);
  padding: var(--sp-8) var(--sp-6);
  border-radius: calc(var(--card-radius) + var(--sp-1));
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--elev-3), var(--glass-highlight);
}
@media (min-width: 480px) { .auth__card { padding: var(--sp-10) var(--sp-8); } }
.auth__brand { justify-self: start; }
.auth__head h1 { font-size: var(--fs-2xl); }
.auth__head p { margin-block-start: var(--sp-2); color: var(--text-2); line-height: var(--lh-body); }
.auth__view { display: grid; gap: var(--sp-4); }
.authform { display: grid; gap: var(--sp-4); }
.authfield-wrap { display: grid; gap: var(--sp-3); }
.authfield { position: relative; display: flex; align-items: center; }
.authfield input {
  inline-size: 100%;
  block-size: var(--btn-h-lg);
  padding-inline: var(--sp-4);
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--text-1);
  font-size: var(--fs-lg);
  text-align: center;
  letter-spacing: 0;
  transition: border-color var(--dur-1) var(--ease-out);
}
.authfield input::placeholder { color: var(--input-placeholder); opacity: 1; font-size: var(--fs-base); }
.authfield input:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 0; border-color: transparent; }
.authfield[data-invalid="true"] input { border-color: var(--danger); }
.autheye { position: absolute; inset-inline-end: var(--sp-1); display: grid; place-items: center; inline-size: var(--touch-min); block-size: var(--touch-min); border-radius: var(--r-sm); color: var(--text-3); }
.autheye:hover { color: var(--text-1); }
.authcta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  inline-size: 100%;
  block-size: var(--btn-h-lg);
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: var(--btn-primary-shadow);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.authcta:hover { background: var(--btn-primary-hover); }
.authcta:active { transform: scale(var(--press)); }
.authcta:disabled { background: var(--surface-3); color: var(--text-disabled); box-shadow: none; }
.authcta__spinner { display: none; inline-size: var(--ico-sm); block-size: var(--ico-sm); border-radius: var(--r-pill); border: calc(var(--hairline) * 2) solid currentColor; border-inline-end-color: transparent; animation: spin calc(var(--dur-3) * 2.5) linear infinite; }
.authcta[data-busy="true"] .authcta__spinner { display: inline-block; }
.authotp { display: grid; gap: var(--sp-2); }
.authotp input {
  inline-size: 100%;
  aspect-ratio: 5 / 6;
  min-block-size: var(--touch-min);
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--text-1);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  text-align: center;
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.authotp input:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 0; border-color: transparent; }
.authotp input[data-filled="true"] { border-color: var(--accent-border); }
.authotp[data-invalid="true"] input { border-color: var(--danger); }
.authotp__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); color: var(--text-3); font-size: var(--fs-sm); }
.authresend { min-block-size: var(--touch-min); padding-inline: var(--sp-2); border-radius: var(--r-sm); color: var(--accent-text); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.authresend:disabled { color: var(--text-3); font-weight: var(--fw-regular); }
.authlinks { display: flex; justify-content: center; }
.authlink { min-block-size: var(--touch-min); padding-inline: var(--sp-3); border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); }
.authlink:hover { color: var(--text-1); background: var(--btn-ghost-hover); }
.authhint { color: var(--text-3); font-size: var(--fs-sm); text-align: center; }
.authmessage { display: none; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.authmessage.is-on { display: block; }
.authmessage.is-error { background: var(--danger-subtle); color: var(--danger-text); }
.authmessage.is-ok { background: var(--success-subtle); color: var(--success-text); }
.authdone { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }

.account { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding-block-start: var(--sp-8); align-items: start; }
@media (min-width: 1024px) { .account { grid-template-columns: var(--filters-w) minmax(0, 1fr); gap: var(--sp-10); padding-block-start: var(--sp-10); } }
.account__rail { display: grid; gap: var(--sp-4); min-inline-size: 0; }
@media (min-width: 1024px) { .account__rail { position: sticky; inset-block-start: calc(var(--header-h-desktop) + var(--sp-6)); } }
.account__card { padding: var(--sp-4); border-radius: var(--card-radius); background: var(--card-bg); border: var(--card-border); box-shadow: var(--card-shadow); }
.account__me { display: flex; align-items: center; gap: var(--sp-3); }
.account__avatar { display: grid; place-items: center; inline-size: var(--avatar-lg); block-size: var(--avatar-lg); flex: none; border-radius: var(--r-pill); background: var(--accent-subtle-hover); color: var(--accent-text-on-subtle); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.account__ident { display: grid; gap: var(--sp-0-5); min-inline-size: 0; }
.account__ident strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account__ident span { color: var(--text-3); font-size: var(--fs-xs); }
.account__nav { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
.account__nav::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .account__nav { display: grid; overflow: visible; } }
.account__navitem {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  min-block-size: var(--touch-min);
  padding-inline: var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.account__navitem:hover { background: var(--btn-ghost-hover); color: var(--text-1); }
.account__navitem[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-text-on-subtle); font-weight: var(--fw-semibold); }
.account__badge { margin-inline-start: auto; font-style: normal; font-size: var(--fs-xs); color: var(--text-3); }
.account__badge:empty { display: none; }
.account__panel { display: grid; gap: var(--sp-6); min-inline-size: 0; }
.account__block { display: grid; gap: var(--sp-6); }
.panel__head h1 { font-size: var(--fs-2xl); }
.panel__head p { margin-block-start: var(--sp-2); color: var(--text-2); }
.panel__section { display: grid; gap: var(--sp-4); padding-block-start: var(--sp-6); border-block-start: var(--hairline) solid var(--border-subtle); }
.panel__subtitle { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); }
.panel__subtitle .ico { color: var(--accent-text); }
.account__muted { color: var(--text-3); font-size: var(--fs-sm); }
.account__err { color: var(--danger-text); font-size: var(--fs-sm); }
.account__pending { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--warning-subtle); color: var(--text-1); font-size: var(--fs-sm); }

.sub-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border-radius: var(--card-radius);
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(var(--accent-rgb) / .14), rgb(var(--accent-rgb) / 0) 60%),
    var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
}
.sub-hero__body { display: grid; gap: var(--sp-2); flex: 1; min-inline-size: 0; }
.sub-hero__plan { color: var(--accent-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.sub-hero h2 { font-size: var(--fs-2xl); }
.sub-hero p { color: var(--text-2); }
.sub-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.ring {
  --ring-size: calc(var(--sp-24) + var(--sp-4));
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--ring-size);
  block-size: var(--ring-size);
  flex: none;
  border-radius: var(--r-pill);
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--surface-3) 0);
}
.ring[data-low="true"] { background: conic-gradient(var(--warning) calc(var(--pct) * 1%), var(--surface-3) 0); }
.ring::before { content: ""; position: absolute; inset: var(--sp-2); border-radius: inherit; background: var(--card-bg); }
.ring__value { position: relative; display: grid; justify-items: center; line-height: 1.1; }
.ring__value b { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
.ring__value span { color: var(--text-3); font-size: var(--fs-xs); }

.rows:not(main > .rows) { display: grid; gap: var(--sp-2); padding: 0; }
.row-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  inline-size: 100%;
  min-block-size: calc(var(--touch-min) + var(--sp-4));
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  border: var(--card-border);
  text-align: start;
  transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
a.row-item:hover, button.row-item:hover { box-shadow: var(--card-shadow-hover); }
.row-item__ico { display: grid; place-items: center; inline-size: var(--btn-h-md); block-size: var(--btn-h-md); border-radius: var(--r-md); background: var(--accent-subtle); color: var(--accent-text-on-subtle); }
.row-item[data-status="done"] .row-item__ico { background: var(--success-subtle); color: var(--success-text); }
.row-item[data-status="rejected"] .row-item__ico { background: var(--danger-subtle); color: var(--danger-text); }
.row-item__body { display: grid; gap: var(--sp-0-5); min-inline-size: 0; }
.row-item__body strong { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item__body span, .ticket__meta { color: var(--text-3); font-size: var(--fs-sm); }
.row-item__end { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); }
.row-item[aria-expanded="true"] .ico--chev { transform: rotate(180deg); }
.ticketwrap { display: grid; gap: var(--sp-2); }
.thread { display: grid; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--card-radius); background: var(--surface-2); border: var(--hairline) solid var(--border-subtle); }
.thread__list { display: grid; gap: var(--sp-3); padding: 0; list-style: none; }
.thread__msg { max-inline-size: 86%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface-3); line-height: var(--lh-body); }
.thread__msg[data-by="me"] { justify-self: start; background: var(--accent-subtle); }
.thread__msg[data-by="them"] { justify-self: end; }
.thread__reply { display: grid; gap: var(--sp-3); }
.thread__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.newticket { display: grid; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--card-radius); background: var(--card-bg); border: var(--card-border); }
.formgrid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: var(--sp-2); }
.fchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fchip { min-block-size: var(--btn-h-sm); padding-inline: var(--sp-3); border-radius: var(--chip-radius); background: var(--chip-bg); border: var(--chip-border); color: var(--chip-fg); font-size: var(--fs-sm); }
@media (max-width: 767px) { .fchip { min-block-size: var(--touch-min); } }
.fchip[aria-checked="true"], .fchip[aria-pressed="true"] { background: var(--chip-active-bg); color: var(--chip-active-fg); font-weight: var(--fw-semibold); }
.attachbox, .attachfiles { display: grid; gap: var(--sp-2); }
.attachlist { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; list-style: none; }
.attachchip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3); border-radius: var(--chip-radius); background: var(--chip-bg); font-size: var(--fs-xs); }
.attachchip__meta { color: var(--text-3); }
.attachchip__x { display: grid; place-items: center; inline-size: var(--btn-h-sm); block-size: var(--btn-h-sm); border-radius: var(--r-pill); color: var(--text-3); }
.attachthumb { display: block; inline-size: calc(var(--sp-24) + var(--sp-4)); border-radius: var(--r-sm); overflow: hidden; }
.attachfile { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--accent-text); font-size: var(--fs-sm); }
.danger-zone .panel__subtitle .ico { color: var(--danger-text); }
.confirmbox { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--card-radius); background: var(--danger-subtle); }
.confirmbox__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

html[data-page="watch"] body { background: rgb(var(--scrim-rgb)); }

.pv-ring {
  position: fixed; z-index: calc(var(--z-skip) + 1); pointer-events: none;
  border: var(--focus-w) solid var(--focus); border-radius: var(--card-radius);
  box-shadow: var(--focus-ring);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
}
.pv-ring[data-on="true"] { opacity: 1; }
.pv-ring__label {
  position: absolute; inset-block-end: calc(100% + var(--sp-1)); inset-inline-start: 0;
  padding: var(--sp-0-5) var(--sp-3); border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap;
}
.pv-ring[data-inside="1"] .pv-ring__label { inset-block-end: auto; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2); }
.pv-ring__label:empty { display: none; }
html[data-preview="1"] [data-region] { cursor: pointer; }

@media (pointer: coarse) {
  .fchip { min-block-size: var(--touch-min); }
  .attachchip__x { inline-size: var(--touch-min); block-size: var(--touch-min); }
}

.ambient {
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 100vh;
  opacity: calc(var(--orn-opacity) * .9);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 0) 100%);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 0) 100%);
}
html[data-ornament="rich"] .ambient { position: fixed; block-size: auto; inset: 0; opacity: calc(var(--orn-opacity) * .55); -webkit-mask-image: none; mask-image: none; }
html[data-ornament="none"] .ambient { display: none; }

html[data-identity="cinema"] .ambient {
  background: radial-gradient(70% 55% at 50% -12%, var(--orn-accent), rgb(var(--accent-rgb) / 0) 70%);
}
html[data-identity="glass"] .ambient {
  opacity: calc(.45 + var(--orn-opacity) * .4);
  background:
    radial-gradient(38% 48% at 88% 6%, rgb(var(--accent-rgb) / var(--orn-glow-1)), rgb(var(--accent-rgb) / 0) 70%),
    radial-gradient(32% 40% at 8% 42%, rgb(var(--accent-rgb) / var(--orn-glow-2)), rgb(var(--accent-rgb) / 0) 70%);
}
html[data-identity="glass"][data-ornament="none"] .ambient { display: block; opacity: .4; }
html[data-identity="frost"] .ambient {
  background-image: radial-gradient(var(--orn-ink) calc(var(--hairline) * 1.2), transparent calc(var(--hairline) * 1.6));
  background-size: var(--sp-6) var(--sp-6);
  background-position: center top;
}
html[data-identity="flat"] .ambient {
  background-image:
    linear-gradient(to right, var(--orn-ink) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, var(--orn-ink) var(--hairline), transparent var(--hairline));
  background-size: var(--sp-16) var(--sp-16);
  background-position: center top;
}
html[data-identity="paper"] .ambient {
  background-color: var(--orn-ink);
  -webkit-mask-image: url(/assets/ornaments/khatam.svg), linear-gradient(to bottom, rgb(0 0 0 / 1), rgb(0 0 0 / 0));
  mask-image: url(/assets/ornaments/khatam.svg), linear-gradient(to bottom, rgb(0 0 0 / 1), rgb(0 0 0 / 0));
  -webkit-mask-size: var(--sp-20) var(--sp-20), 100% 100%;
  mask-size: var(--sp-20) var(--sp-20), 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-position: center top;
  mask-position: center top;
}
html[data-identity="paper"][data-ornament="rich"] .ambient {
  -webkit-mask-image: url(/assets/ornaments/khatam.svg);
  mask-image: url(/assets/ornaments/khatam.svg);
  -webkit-mask-size: var(--sp-20) var(--sp-20);
  mask-size: var(--sp-20) var(--sp-20);
}

html[data-identity="paper"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--orn-ink);
  opacity: .5;
  -webkit-mask-image: url(/assets/ornaments/grain.svg);
  mask-image: url(/assets/ornaments/grain.svg);
  -webkit-mask-size: var(--sp-32) var(--sp-32);
  mask-size: var(--sp-32) var(--sp-32);
}
@media (prefers-reduced-transparency: reduce) { .ambient, html[data-identity="paper"] body::before { display: none; } }

[data-enter="wait"] { opacity: 0; transform: translateY(var(--rise)); }
[data-enter="in"] {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-emph);
  transition-delay: var(--enter-delay, 0ms);
}

@view-transition { navigation: auto; }
::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-2); animation-timing-function: var(--ease-out); }
html[data-motion="off"]::view-transition-group(*),
html[data-motion="off"]::view-transition-old(*),
html[data-motion="off"]::view-transition-new(*) { animation: none !important; }
.hdr { view-transition-name: site-header; }
.bnav { view-transition-name: site-bnav; }

html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  [data-enter] { opacity: 1 !important; transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}