/*! Ember Thermal (Modern) - JavCMS theme stylesheet | original code (MIT, JavCMS project)
 * A thermal-camera catalogue: violet-char base, a data-driven heat ramp, HUD geometry and kinetic variable type.
 * Fonts: Bricolage Grotesque + Manrope (OFL, static/vendor/fx/fonts). Icons: Tabler (MIT) sprite in assets/icons.svg.
 * Effects come from the shared FX kit (static/template-ui/fx) + assets/js/thermal.js / thermal-fx.js / gl-thermal.js. */

/* =========================================================== 1. tokens */
:root, html[data-color-mode="dark"] {
  color-scheme: dark;
  --bg: #0b0710; --surface: #150e1b; --surface-2: #1f1428; --surface-3: #2a1a33;
  --line: #38243f; --field: #8c6a86;
  --text: #fff2e8; --muted: #c9a99c;
  --accent: #ff6a13; --on-accent: #170700;
  --accent-ink: #ff8a3d; --accent-ink-h: #ffb35c;
  --hot: #ffc531; --cold: #8f6bff; --cold-ink: #a58bff;
  --focus: #ffc531;
  --glass: rgba(11, 7, 16, .78); --glass-solid: #0b0710;
  --chip: rgba(11, 7, 16, .78); --chip-ink: #fff2e8;
  --scrim: rgba(6, 3, 10, .62);
  --shadow: 0 18px 48px -18px rgba(0, 0, 0, .7);
  --h0: #8f6bff; --h1: #ff4f9e; --h2: #ee3b3b; --h3: #ff7a12; --h4: #ffc531; --h5: #fff3c4;
  --t0: #a58bff; --t1: #ff5aa8; --t2: #ff6b5e; --t3: #ff8a3d; --t4: #ffc531; --t5: #fff3c4;
  --ramp: linear-gradient(90deg, #24104a, #5b1696 17%, #b0207f 33%, #ee3b3b 50%, #ff7a12 67%, #ffc531 84%, #fff3c4);
  --ramp-v: linear-gradient(0deg, #24104a, #5b1696 17%, #b0207f 33%, #ee3b3b 50%, #ff7a12 67%, #ffc531 84%, #fff3c4);
  --grad-text: linear-gradient(90deg, #ff4f9e, #ff7a12, #ffc531);
  --molten: linear-gradient(135deg, #ff6a13, #ff8a1f 55%, #ffa531);
  --molten-h: linear-gradient(135deg, #ff8a1f, #ffb02a 55%, #ffc531);
  --ph: url("../brand/ph-dark.svg");
  --hud: #ffc531;
  --hero-fade-m: linear-gradient(180deg, rgba(11, 7, 16, .55) 0%, rgba(11, 7, 16, 0) 22%, rgba(11, 7, 16, 0) 46%, rgba(11, 7, 16, .82) 60%, #0b0710 76%);
  --thermal-fb-m:
    radial-gradient(70% 34% at 70% 46%, #ffc531 0, rgba(255, 197, 49, 0) 70%),
    radial-gradient(90% 40% at 60% 42%, #ff7a12 0, rgba(255, 122, 18, 0) 72%),
    radial-gradient(110% 46% at 40% 38%, #ee3b3b 0, rgba(238, 59, 59, 0) 72%),
    radial-gradient(120% 60% at 30% 20%, #5b1696 0, rgba(91, 22, 150, 0) 75%),
    #0b0710;
  --hero-fade: linear-gradient(90deg, rgba(11, 7, 16, .92) 0%, rgba(11, 7, 16, .7) 32%, rgba(11, 7, 16, .1) 62%, rgba(11, 7, 16, 0) 80%);
  --thermal-fb:
    radial-gradient(60% 75% at 72% 100%, #ffc531 0, rgba(255, 197, 49, 0) 55%),
    radial-gradient(70% 80% at 80% 90%, #ff7a12 0, rgba(255, 122, 18, 0) 60%),
    radial-gradient(80% 90% at 60% 75%, #ee3b3b 0, rgba(238, 59, 59, 0) 62%),
    radial-gradient(90% 90% at 40% 40%, #5b1696 0, rgba(91, 22, 150, 0) 70%),
    radial-gradient(70% 60% at 85% 20%, #3a1270 0, rgba(58, 18, 112, 0) 70%),
    #0b0710;
  /* FX kit tokens */
  --fx-accent: #ff6a13; --fx-accent-2: #ee3b3b; --fx-accent-3: #ffc531;
  --fx-ink: #fff2e8; --fx-muted: #c9a99c; --fx-bg: #0b0710; --fx-surface: #150e1b;
  --fx-grad-1: #ff4f9e; --fx-grad-2: #ff7a12; --fx-grad-3: #ffc531;
  --fx-skel-bg: #150e1b; --fx-skel-hl: #2a1a33;
  --fx-icon-stroke: 1.75;
  /* shared ui.css dialogs and toasts */
  --tui-accent: #ff6a13; --tui-accent-hover: #ff8a1f; --tui-surface: #1f1428; --tui-text: #fff2e8; --tui-muted: #c9a99c; --tui-border: #8c6a86; --tui-focus: #ffc531;
}
html[data-color-mode="light"] {
  color-scheme: light;
  --bg: #fff5ec; --surface: #ffffff; --surface-2: #ffe8d6; --surface-3: #ffdcc2;
  --line: #efc9b0; --field: #a8735c;
  --text: #1d0b05; --muted: #6e4636;
  --accent: #ff6a13; --on-accent: #1d0b05;
  --accent-ink: #b23c00; --accent-ink-h: #8f2f00;
  --hot: #8a5a00; --cold: #5b2fd6; --cold-ink: #5b2fd6;
  --focus: #5b2fd6;
  --glass: rgba(255, 245, 236, .84); --glass-solid: #fff5ec;
  --chip: rgba(255, 250, 245, .93); --chip-ink: #1d0b05;
  --scrim: rgba(40, 18, 8, .38);
  --shadow: 0 18px 44px -20px rgba(120, 50, 10, .35);
  --h0: #8f6bff; --h1: #ff4f9e; --h2: #ee3b3b; --h3: #ff7a12; --h4: #ffb320; --h5: #ff7a12;
  --t0: #6a3fd1; --t1: #b0175f; --t2: #b8261f; --t3: #b23c00; --t4: #8a5a00; --t5: #1d0b05;
  --ramp: linear-gradient(90deg, rgba(36, 16, 74, .55), rgba(91, 22, 150, .6) 17%, rgba(176, 32, 127, .62) 33%, rgba(238, 59, 59, .65) 50%, rgba(255, 122, 18, .7) 67%, rgba(255, 197, 49, .7) 84%, rgba(255, 179, 32, .7));
  --ramp-v: linear-gradient(0deg, rgba(36, 16, 74, .55), rgba(91, 22, 150, .6) 17%, rgba(176, 32, 127, .62) 33%, rgba(238, 59, 59, .65) 50%, rgba(255, 122, 18, .7) 67%, rgba(255, 197, 49, .7) 84%, rgba(255, 179, 32, .7));
  --grad-text: linear-gradient(90deg, #b0175f, #b23c00, #8a5a00);
  --ph: url("../brand/ph-light.svg");
  --hud: #b23c00;
  --hero-fade-m: linear-gradient(180deg, rgba(255, 245, 236, .6) 0%, rgba(255, 245, 236, 0) 22%, rgba(255, 245, 236, 0) 46%, rgba(255, 245, 236, .86) 60%, #fff5ec 76%);
  --thermal-fb-m:
    radial-gradient(70% 34% at 70% 46%, rgba(255, 197, 49, .55) 0, rgba(255, 197, 49, 0) 70%),
    radial-gradient(90% 40% at 60% 42%, rgba(255, 122, 18, .42) 0, rgba(255, 122, 18, 0) 72%),
    radial-gradient(110% 46% at 40% 38%, rgba(238, 59, 59, .25) 0, rgba(238, 59, 59, 0) 72%),
    radial-gradient(120% 60% at 30% 20%, rgba(143, 107, 255, .2) 0, rgba(143, 107, 255, 0) 75%),
    #fff5ec;
  --hero-fade: linear-gradient(90deg, rgba(255, 245, 236, .95) 0%, rgba(255, 245, 236, .78) 34%, rgba(255, 245, 236, .15) 64%, rgba(255, 245, 236, 0) 82%);
  --thermal-fb:
    radial-gradient(60% 75% at 72% 100%, rgba(255, 197, 49, .55) 0, rgba(255, 197, 49, 0) 55%),
    radial-gradient(70% 80% at 80% 90%, rgba(255, 122, 18, .45) 0, rgba(255, 122, 18, 0) 60%),
    radial-gradient(80% 90% at 60% 75%, rgba(238, 59, 59, .3) 0, rgba(238, 59, 59, 0) 62%),
    radial-gradient(90% 90% at 40% 40%, rgba(143, 107, 255, .22) 0, rgba(143, 107, 255, 0) 70%),
    #fff5ec;
  --fx-accent: #ff6a13; --fx-accent-2: #b8261f; --fx-accent-3: #8a5a00;
  --fx-ink: #1d0b05; --fx-muted: #6e4636; --fx-bg: #fff5ec; --fx-surface: #ffffff;
  --fx-grad-1: #b0175f; --fx-grad-2: #b23c00; --fx-grad-3: #8a5a00;
  --fx-skel-bg: #ffe8d6; --fx-skel-hl: #fff7f0;
  --tui-accent: #b23c00; --tui-accent-hover: #8f2f00; --tui-surface: #ffffff; --tui-text: #1d0b05; --tui-muted: #6e4636; --tui-border: #a8735c; --tui-focus: #5b2fd6;
}
:root {
  --f-display: 'Bricolage Grotesque', var(--fx-font-scripts), var(--fx-font-system);
  --f-text: 'Manrope', var(--fx-font-scripts), var(--fx-font-system);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r-card: 12px; --r-thumb: 10px;
  --pad: clamp(12px, 3.2vw, 32px);
  --hdr: 68px;
  --dock: 0px;
  --dir: 1;
}
[dir="rtl"] { --dir: -1; }
:lang(ar) { --f-display: 'Rubik', var(--fx-font-scripts), var(--fx-font-system); --f-text: 'Rubik', var(--fx-font-scripts), var(--fx-font-system); }
:lang(ru) { --f-display: var(--f-text); }

/* =========================================================== 2. base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); scroll-padding-bottom: calc(var(--dock) + 16px); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 15px/24px var(--f-text); font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding-bottom: var(--dock);
}
img, svg, video, canvas { max-width: 100%; }
img { border-style: none; }
a { color: var(--accent-ink); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: #ff6a13; color: #170700; }
.sr-only, .fx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; inset-inline-start: 12px; top: -80px; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 800; transition: top .2s; }
.skip-link:focus, .skip-link:focus-visible { top: 10px; outline-color: var(--text); }
.t-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.t-wrap { width: min(100% - 2 * var(--pad), 1440px); margin-inline: auto; }
.t-i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
[dir="rtl"] .t-flip { transform: scaleX(-1); }
.t-num, .t-hudn { font-family: var(--f-display); font-stretch: 75%; font-weight: 600; font-variant-numeric: tabular-nums; font-optical-sizing: auto; }
:lang(ru) .t-num, :lang(ru) .t-hudn { font-stretch: 100%; }
.t-main { display: block; min-height: 60vh; padding-bottom: 48px; }
.t-main:focus { outline: none; }

/* =========================================================== 3. buttons, chips, pills */
.t-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  border-radius: 999px; border: 1px solid var(--field); background: transparent; color: var(--text);
  font: 700 14px/1.2 var(--f-text); white-space: nowrap; text-decoration: none;
  transition: background .18s var(--ease), color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.t-btn .t-i { width: 18px; height: 18px; }
.t-btn.is-molten { border-color: transparent; background-color: #ff6a13; background-image: var(--molten); color: var(--on-accent); box-shadow: 0 8px 24px -10px rgba(255, 106, 19, .7); }
.t-btn.is-ghost { background: rgba(255, 255, 255, .04); }
html[data-color-mode="light"] .t-btn.is-ghost { background: #fff; }
.t-btn.is-big { min-height: 52px; padding: 12px 28px; font-size: 16px; }
.t-btn:active { transform: translateY(1px); }
.t-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) {
  .t-btn:hover { border-color: var(--accent-ink); color: var(--text); background: var(--surface-2); }
  .t-btn.is-molten:hover { background-color: #ff9a24; background-image: var(--molten-h); color: var(--on-accent); border-color: transparent; box-shadow: 0 10px 30px -8px rgba(255, 140, 30, .8); }
}
.t-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.t-chips a, .t-chips span.t-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 600 13px/1.3 var(--f-text);
  transition: background .18s, color .18s; /* the hover border (state indicator) switches instantly: never a low-contrast in-between */
}
.t-chips a.is-tag { color: var(--muted); }
.t-chips a[aria-current] { background: var(--accent); border-color: transparent; color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .t-chips a:hover { border-color: var(--accent-ink); color: var(--text); background: var(--surface-3); }
}
.t-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--h0); flex: none; }
.t-dot.b1 { background: var(--h2); } .t-dot.b2 { background: var(--h3); } .t-dot.b3 { background: var(--h4); }

/* =========================================================== 4. header */
.t-hdr {
  position: sticky; top: 0; z-index: 50; height: var(--hdr);
  background: var(--glass-solid); view-transition-name: site-header;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .t-hdr { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.t-hdr-in { height: 100%; display: flex; align-items: center; gap: 14px; }
.t-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; flex: 0 1 auto; color: var(--text); text-decoration: none; border-radius: 10px; }
.t-mark { width: 36px; height: 36px; flex: none; overflow: visible; }
.t-mark-bg { fill: transparent; }
html[data-color-mode="light"] .t-mark-bg { fill: #0b0710; }
.t-word {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 800 22px/1 var(--f-display); font-stretch: 78%; letter-spacing: -.01em; text-transform: uppercase;
  transition: font-stretch .6s var(--ease), letter-spacing .6s var(--ease);
}
:lang(ru) .t-word, :lang(ar) .t-word { font-stretch: 100%; }
.t-brand-img { display: block; max-height: 40px; width: auto; max-width: 180px; object-fit: contain; }
@media (hover: hover) and (pointer: fine) { .t-brand:hover .t-word { font-stretch: 100%; } }
.t-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; }
.t-pill {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px;
  border: 0; background: transparent; color: var(--text); font: 700 14px/1 var(--f-text); white-space: nowrap; text-decoration: none;
  transition: background .18s, color .18s;
}
.t-pill .t-i { width: 17px; height: 17px; }
.t-pill.is-hot .t-i { color: var(--accent); }
.t-pill[aria-current="page"], .t-pill[aria-expanded="true"], .t-pill[data-current] { background: var(--surface-2); }
.t-pill[aria-current="page"]::after, .t-pill[data-current]::after {
  content: ""; position: absolute; inset-inline: 16px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--grad-text);
}
.t-chev { transition: transform .2s; }
.t-pill[aria-expanded="true"] .t-chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .t-pill:hover { background: var(--surface-2); color: var(--text); } }

.t-search { position: relative; flex: 1 1 260px; max-width: 420px; margin-inline-start: auto; }
.t-search-ring { position: relative; display: block; color: var(--muted); }
.t-search-ring > .t-i { position: absolute; z-index: 1; inset-inline-start: 15px; top: 50%; margin-top: -10px; width: 20px; height: 20px; pointer-events: none; }
.t-search-in {
  display: block; width: 100%; height: 44px; padding: 0 16px 0 44px; border-radius: 999px; border: 2px solid transparent; color: var(--text); font-size: 14px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, var(--field), var(--field)) border-box;
}
[dir="rtl"] .t-search-in { padding: 0 44px 0 16px; }
.t-search-in:focus { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, #5b1696, #ee3b3b, #ff7a12, #ffc531, #ee3b3b, #5b1696) border-box; background-size: 100% 100%, 300% 100%; }
.t-search-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .t-search-in:focus { animation: t-ring 3s linear infinite; } }
@keyframes t-ring { to { background-position: 0 0, 300% 0; } }
.t-search-in::placeholder, .t-scan-in::placeholder { color: var(--muted); opacity: 1; }
.t-search-in::-webkit-search-cancel-button { filter: grayscale(1); }
.t-sugg {
  position: absolute; z-index: 60; inset-inline: 0; top: calc(100% + 8px); max-height: min(70vh, 460px); overflow: auto;
  padding: 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow);
}
.t-sugg a, .t-sugg p { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--text); font-size: 14px; line-height: 1.35; }
.t-sugg p { color: var(--muted); }
.t-sugg img { width: 64px; height: 36px; flex: none; border-radius: 6px; object-fit: cover; background: var(--surface-2) var(--ph) center / cover; }
.t-sugg .t-s-txt { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-sugg .t-dot { background: var(--accent); }
.t-sugg a[aria-selected="true"], .t-sugg a:focus-visible { background: var(--surface-2); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .t-sugg a:hover { background: var(--surface-2); } }

.t-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.t-ibtn {
  position: relative; display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--text); list-style: none; gap: 4px;
  transition: background .18s, color .18s;
}
.t-ibtn .t-i { width: 20px; height: 20px; }
.t-ibtn > svg:not(.t-i) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.t-ibtn::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .t-ibtn:hover { background: var(--surface-2); border-color: var(--field); } }
.t-lang { position: relative; }
.t-lang-btn { grid-auto-flow: column; }
.t-lang-code { font: 700 11px/1 var(--f-display); font-stretch: 75%; letter-spacing: .06em; color: var(--muted); }
.t-lang[open] > .t-lang-btn { background: var(--surface-2); border-color: var(--line); }
.t-lang-list {
  position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-end: 0; width: 248px; max-height: min(70vh, 520px); overflow: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 6px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow);
}
.t-lang-list a { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 600; }
.t-lang-list a[aria-current] { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .t-lang-list a:not([aria-current]):hover { background: var(--surface-2); } }
.t-acct {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 170px; padding: 0 16px 0 14px; border-radius: 999px;
  border: 1px solid var(--field); color: var(--text); font: 700 14px/1 var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .18s, background .18s;
}
.t-acct::before {
  content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) { .t-acct:hover { border-color: var(--accent-ink); background: var(--surface-2); } }
.mac_user_box { position: absolute; z-index: 70; min-width: 180px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.mac_user_box a { display: flex; min-height: 40px; align-items: center; padding: 6px 12px; border-radius: 10px; color: var(--text); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .mac_user_box a:hover { background: var(--surface-2); } }
.t-mode svg { transition: transform .5s var(--ease); }

/* scroll heat line: a travelling hot spot along the header bottom */
.t-heatline { position: absolute; inset-inline: 0; bottom: 0; height: 2px; overflow: hidden; background: linear-gradient(90deg, rgba(143, 107, 255, .35), rgba(238, 59, 59, .25), rgba(255, 197, 49, .25)); }
.t-heatline span {
  position: absolute; inset: 0; display: block; transform-origin: 0 50%; scale: var(--fx-progress, 0) 1;
  background: linear-gradient(90deg, #5b1696, #ee3b3b 60%, #ff7a12 85%, #fff3c4);
}
[dir="rtl"] .t-heatline span { transform-origin: 100% 50%; }
.t-heatline span::after {
  content: ""; position: absolute; inset-inline-end: 0; top: -3px; width: 40px; height: 8px; border-radius: 8px;
  background: radial-gradient(closest-side, #fff3c4, rgba(255, 197, 49, 0)); filter: blur(1px);
}

/* categories mega panel */
.t-mega { position: absolute; inset-inline: 0; top: 100%; z-index: 49; padding: 20px 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.t-mega[hidden] { display: none; }
.t-mega-k { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 600 12px/1 var(--f-display); font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
:lang(ja) .t-mega-k, :lang(zh) .t-mega-k, :lang(ko) .t-mega-k, :lang(th) .t-mega-k, :lang(ar) .t-mega-k, :lang(hi) .t-mega-k { letter-spacing: normal; text-transform: none; }

/* thermal scale strip on the inline-start edge (>= 1280px) */
.t-scale { display: none; }
@media (min-width: 1280px) {
  .t-scale {
    position: fixed; z-index: 40; inset-inline-start: 0; top: calc(var(--hdr) + 24px); bottom: 24px; width: 18px;
    display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
    font: 600 9px/1 var(--f-display); font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  }
  .t-scale i { flex: 1; width: 6px; align-self: flex-start; border-radius: 0 6px 6px 0; background: linear-gradient(180deg, #fff3c4, #ffc531 14%, #ff7a12 30%, #ee3b3b 48%, #b0207f 64%, #5b1696 82%, #24104a); opacity: .75; }
  [dir="rtl"] .t-scale i { border-radius: 6px 0 0 6px; }
  .t-scale span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  :lang(ja) .t-scale span, :lang(zh) .t-scale span, :lang(ko) .t-scale span { transform: none; letter-spacing: normal; }
}
/* =========================================================== 5. sections */
.t-sec { margin-top: clamp(32px, 4vw, 56px); }
.t-sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; min-height: 48px; }
.t-sec-t {
  min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 800 clamp(26px, 3vw, 44px)/1.1 var(--f-display); font-stretch: 100%; letter-spacing: -.015em; padding-block: .06em;
}
.t-sec-t > span, .t-sec-t .char { transition: font-stretch .6s var(--ease), font-weight .6s var(--ease); }
.t-sec-t .char { transition-delay: calc(var(--char-index, 0) * 24ms); transition-duration: .5s; transition-timing-function: steps(5, end); }
.t-sec-t .word { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  html.fx-js [data-t-kin]:not(.is-hot) > span, html.fx-js [data-t-kin]:not(.is-hot) .char { font-stretch: 75%; font-weight: 500; }
  html.fx-js:not(.t-live) [data-t-kin] > span { animation: t-kin-fs 0s 3s forwards; }
}
@keyframes t-kin-fs { to { font-stretch: 100%; font-weight: 800; } }
:lang(ru) [data-t-kin] > span, :lang(ar) [data-t-kin] > span, :lang(ja) [data-t-kin] > span, :lang(zh) [data-t-kin] > span, :lang(ko) [data-t-kin] > span, :lang(th) [data-t-kin] > span, :lang(hi) [data-t-kin] > span { font-stretch: 100% !important; font-weight: 800 !important; animation: none !important; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .t-sec-head:hover [data-t-kin].is-hot .char { animation: t-kin-wave .9s var(--ease) calc(var(--char-index, 0) * 24ms) both; animation-timing-function: steps(4, end) !important; }
}
@keyframes t-kin-wave { 40% { font-stretch: 75%; font-weight: 500; } }
.t-legend { flex: none; display: inline-flex; align-items: center; gap: 8px; width: 120px; }
.t-legend i { display: block; height: 6px; width: 100%; border-radius: 6px; background: var(--ramp); }
/* phones: the section title wins the space; the decorative legend flexes (16-120 px) and drops out below 420 px */
@media (max-width: 767px) { .t-sec-head { gap: 12px; } .t-legend { flex: 1 1 0; width: auto; min-width: 16px; max-width: 120px; } .t-more { padding-inline: 14px; } }
@media (max-width: 419px) { .t-legend { display: none; } }
.t-more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-inline-start: auto; padding: 8px 16px; border-radius: 999px; flex: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 700 13px/1 var(--f-text); white-space: nowrap;
  transition: background .18s, color .18s;
}
.t-more .t-i { width: 16px; height: 16px; color: var(--accent-ink); transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .t-more:hover { border-color: var(--accent-ink); background: var(--surface-2); color: var(--text); }
  .t-more:hover .t-i { transform: translateX(calc(3px * var(--dir))); }
  [dir="rtl"] .t-more:hover .t-i { transform: scaleX(-1) translateX(3px); }
}
.t-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1.3 var(--f-display); font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
:lang(ja) .t-eyebrow, :lang(zh) .t-eyebrow, :lang(ko) .t-eyebrow, :lang(th) .t-eyebrow, :lang(ar) .t-eyebrow, :lang(hi) .t-eyebrow { letter-spacing: normal; text-transform: none; }

/* =========================================================== 6. grid + heat cards */
.t-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 20px;
  --fx-reveal-dist: 16px; --fx-reveal-filter: blur(6px); --fx-reveal-dur: .65s; --fx-stagger: 40ms; --fx-glow-width: 2px; --fx-glow-size: 260px; }
@media (max-width: 1023px) { .t-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; } }
@media (max-width: 767px) { .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; --fx-reveal-filter: none; } }
.t-card {
  --halo: var(--h0); --tink: var(--t0); --fill: .1667;
  position: relative; min-width: 0; border-radius: 14px; padding: 2px;
  background: var(--halo);
  background: linear-gradient(150deg, var(--halo), color-mix(in srgb, var(--halo) 20%, transparent) 46%, color-mix(in srgb, var(--halo) 55%, transparent));
  transition: box-shadow .3s var(--ease), background .3s;
  --fx-glow-color: var(--halo);
}
.t-card.heat-1 { --halo: var(--h1); --tink: var(--t1); --fill: .3333; }
.t-card.heat-2 { --halo: var(--h2); --tink: var(--t2); --fill: .5; }
.t-card.heat-3 { --halo: var(--h3); --tink: var(--t3); --fill: .6667; }
.t-card.heat-4 { --halo: var(--h4); --tink: var(--t4); --fill: .8333; }
.t-card.heat-5 { --halo: var(--h5); --tink: var(--t5); --fill: 1; }
html[data-color-mode="light"] .t-card.heat-5 { background: linear-gradient(150deg, #ffb320, #ff7a12 40%, #ffb320); }
.t-card.is-top1 { --halo: #fff3c4; } .t-card.is-top2 { --halo: #ffc531; } .t-card.is-top3 { --halo: #ff7a12; }
html[data-color-mode="light"] .t-card.is-top1 { --halo: #ffb320; }
.t-card-in { position: relative; height: 100%; border-radius: var(--r-card); background: var(--surface); padding: 6px 6px 12px; display: flex; flex-direction: column; }
.t-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-thumb);
  background: var(--surface-2) var(--ph) center / cover no-repeat; isolation: isolate;
}
.t-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease), opacity .3s; }
img[data-broken] { opacity: 0 !important; }
.t-thumb::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11, 7, 16, .38), rgba(11, 7, 16, 0) 30%, rgba(11, 7, 16, 0) 64%, rgba(11, 7, 16, .45)); }
.t-code, .t-heat, .t-dur, .t-gchip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 16px);
  padding: 3px 8px; border-radius: 999px; background: var(--chip); color: var(--chip-ink);
  font: 700 11px/16px var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-code { top: 8px; inset-inline-start: 8px; max-width: 58%; letter-spacing: .02em; }
.t-code .t-i { width: 13px; height: 13px; }
.t-heat { top: 8px; inset-inline-end: 8px; color: var(--tink); font-family: var(--f-display); font-stretch: 75%; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.t-heat .t-i { width: 13px; height: 13px; }
.t-dur { bottom: 8px; inset-inline-end: 8px; font-family: var(--f-display); font-stretch: 75%; font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
:lang(ru) .t-heat, :lang(ru) .t-dur { font-stretch: 100%; }
.t-gchip { top: 8px; inset-inline-start: 8px; font-family: var(--f-display); font-stretch: 75%; font-size: 12px; }
.t-gchip i { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(from -90deg, #ffc531 calc(var(--g, 0) * 1%), rgba(255, 255, 255, .18) 0); -webkit-mask: radial-gradient(circle, transparent 3.5px, #000 4px); mask: radial-gradient(circle, transparent 3.5px, #000 4px); }
html[data-color-mode="light"] .t-gchip i { background: conic-gradient(from -90deg, #b23c00 calc(var(--g, 0) * 1%), rgba(29, 11, 5, .15) 0); }
.t-disc {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  display: grid; place-items: center; background-color: #ff6a13; background-image: var(--molten); color: var(--on-accent); box-shadow: 0 0 0 6px rgba(255, 106, 19, .2), 0 10px 28px -6px rgba(255, 106, 19, .8);
  opacity: 0; transform: scale(.7); transition: opacity .2s, transform .3s var(--ease);
}
.t-disc .t-i { width: 20px; height: 20px; margin-inline-start: 2px; }
.t-spark { position: absolute; z-index: 2; bottom: 10px; inset-inline-start: 10px; width: 10px; height: 10px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 0 3px rgba(255, 197, 49, .45), 0 0 14px 2px #ff7a12; }
@media (prefers-reduced-motion: no-preference) { .t-spark { animation: t-pulse 1.8s ease-in-out infinite; } }
@keyframes t-pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 197, 49, 0), 0 0 18px 4px #ff7a12; } }
.t-rank {
  position: absolute; z-index: 4; top: -14px; inset-inline-start: -6px; pointer-events: none;
  font: 800 46px/1 var(--f-display); font-stretch: 75%; letter-spacing: -.03em; color: var(--rc, #9a82ff); font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 var(--bg), 2px 0 0 var(--bg), -2px 0 0 var(--bg), 0 -2px 0 var(--bg), 0 6px 16px rgba(0, 0, 0, .55);
}
html[data-color-mode="light"] .t-rank { color: var(--rcl, #5b2fd6); text-shadow: 0 2px 0 var(--bg), 2px 0 0 var(--bg), -2px 0 0 var(--bg), 0 -2px 0 var(--bg); }
.t-therm { position: relative; display: block; height: 3px; margin: 10px 4px 0; border-radius: 3px; background: var(--line); overflow: hidden; }
.t-therm::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--fill) * 100%); border-radius: inherit; background: var(--ramp); background-size: calc(100% / var(--fill)) 100%; }
[dir="rtl"] .t-therm::before { background-position: right; transform: scaleX(-1); inset-inline-start: auto; inset-inline-end: 0; right: 0; }
.t-ct { margin: 8px 4px 0; font: 600 14px/20px var(--f-text); }
.t-ct a { display: block; color: var(--text); border-radius: 6px; }
.t-ct a span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; overflow-wrap: anywhere; }
.t-cm { display: flex; align-items: center; gap: 10px; margin: 6px 4px 0; color: var(--muted); font: 500 12px/16px var(--f-text); }
.t-cm time { font-variant-numeric: tabular-nums; }
.t-score { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
.t-score .t-i { width: 13px; height: 13px; color: var(--hot); }
.t-card .t-ct a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.t-card:focus-within, .t-card.is-flare { box-shadow: 0 0 0 1px var(--halo), 0 0 26px -4px color-mix(in srgb, var(--halo) 60%, transparent); }
.t-card:focus-within .t-disc { opacity: 1; transform: scale(1); }
@media (hover: hover) and (pointer: fine) {
  .t-card:hover { box-shadow: 0 0 0 1px var(--halo), 0 0 30px -4px color-mix(in srgb, var(--halo) 55%, transparent); }
  .t-card:hover .t-thumb img { transform: scale(1.04); }
  .t-card:hover .t-disc { opacity: 1; transform: scale(1); }
  .t-card .t-ct a:hover { color: var(--accent-ink); }
}
@media (hover: none), (pointer: coarse) {
  .t-card { background: color-mix(in srgb, var(--halo) 45%, transparent); }
  .t-card.is-flare { background: var(--halo); }
}
.t-grid[data-fx~="glow"] > .t-card::before { border-radius: 14px; }

/* =========================================================== 7. heat map + heat list */
.t-heatmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 104px; grid-auto-flow: dense; gap: 12px; }
.t-heatmap > li { grid-column: span var(--cs, 1); grid-row: span var(--rs, 1); min-width: 0; }
.t-heatmap a {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; padding: 14px 16px; overflow: hidden;
  border-radius: 14px; color: #fff2e8; text-decoration: none; isolation: isolate;
  background-color: #24104a; background-image: radial-gradient(120% 120% at 100% 100%, #5b1696, #24104a 70%); border: 1px solid rgba(255, 255, 255, .08);
  transition: filter .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.t-heatmap .b1 a { background-color: #3a1270; background-image: radial-gradient(120% 120% at 100% 100%, #b0207f, #3a1270 75%); }
.t-heatmap .b2 a { background-color: #5b1696; background-image: radial-gradient(120% 130% at 100% 100%, #ff7a12, #ee3b3b 45%, #5b1696 100%); }
.t-heatmap .b3 a { background-color: #5b1696; background-image: radial-gradient(130% 130% at 100% 100%, #fff3c4, #ffc531 18%, #ff7a12 42%, #ee3b3b 66%, #5b1696 100%); }
.t-heatmap .is-all a { background-color: var(--surface-2); background-image: none; color: var(--text); flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; border-color: var(--line); }
.t-heatmap .is-all .t-i { margin-inline-start: auto; width: 20px; height: 20px; color: var(--accent-ink); }
.t-heatmap .is-all .t-hm-count { color: var(--muted); }
.t-heatmap a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 7, 16, .62), rgba(11, 7, 16, 0) 70%); }
.t-heatmap .is-all a::after { display: none; }
.t-hm-name { font: 700 18px/1.1 var(--f-display); font-stretch: 85%; transition: font-stretch .5s var(--ease); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.t-heatmap .b3 .t-hm-name { font-size: clamp(24px, 2.6vw, 38px); font-weight: 800; }
.t-heatmap .b2 .t-hm-name { font-size: clamp(20px, 1.9vw, 28px); }
.t-hm-count { font: 600 13px/1 var(--f-display); font-stretch: 75%; font-variant-numeric: tabular-nums; color: rgba(255, 242, 232, .92); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.t-hm-count b { font-weight: 700; }
.t-hm-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.t-hm-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #ff7a12, #ffc531, #fff3c4); border-radius: inherit; }
.t-heatmap a:focus-visible { outline-offset: 3px; }
.t-heatmap.is-mini { grid-auto-rows: 72px; gap: 8px; }
.t-heatmap.is-mini a { padding: 10px 12px; border-radius: 12px; }
.t-heatmap.is-mini .t-hm-name, .t-heatmap.is-mini .b3 .t-hm-name, .t-heatmap.is-mini .b2 .t-hm-name { font-size: 16px; -webkit-line-clamp: 1; }
@media (hover: hover) and (pointer: fine) {
  .t-heatmap a:hover { filter: brightness(1.14) saturate(1.1); box-shadow: 0 12px 34px -14px rgba(255, 106, 19, .65); }
  .t-heatmap a:hover .t-hm-name { font-stretch: 100%; }
  .t-heatmap .is-all a:hover { filter: none; border-color: var(--accent-ink); }
}
.t-heatmap a:focus-visible .t-hm-name { font-stretch: 100%; }
@media (max-width: 767px) {
  .t-heatmap { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 92px; gap: 10px; }
  .t-heatmap > li { grid-column: span var(--pc, 1); grid-row: span 1; }
  .t-heatmap > li:first-child { grid-row: span 2; }
  .t-heatmap .b3 .t-hm-name { font-size: 28px; }
}
.t-heatlist { display: grid; gap: 6px; }
.t-heatlist a {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n c" "b b"; align-items: center; gap: 6px 12px; min-height: 52px; padding: 8px 14px;
  border-radius: 12px; background: var(--surface-2); color: var(--text); border: 1px solid transparent;
}
.t-hl-name { grid-area: n; font-weight: 700; font-size: 15px; }
.t-hl-count { grid-area: c; font: 600 13px/1 var(--f-display); font-stretch: 75%; color: var(--muted); font-variant-numeric: tabular-nums; }
.t-hl-bar { grid-area: b; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.t-hl-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #5b1696, #ee3b3b, #ff7a12, #ffc531); }
html[data-color-mode="light"] .t-hl-bar i { background: linear-gradient(90deg, #5b2fd6, #b8261f, #b23c00, #ffb320); }
.t-heatlist .is-all a { background: transparent; border-color: var(--line); }
@media (hover: hover) and (pointer: fine) { .t-heatlist a:hover { border-color: var(--accent-ink); } }

.heat-0 { --tink: var(--t0); } .heat-1 { --tink: var(--t1); } .heat-2 { --tink: var(--t2); } .heat-3 { --tink: var(--t3); } .heat-4 { --tink: var(--t4); } .heat-5 { --tink: var(--t5); }

/* =========================================================== 8. HUD monitor geometry */
.t-hud { position: relative; }
.t-hud::after {
  content: ""; position: absolute; inset: -7px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--hud), var(--hud)) top left / 14px 2px no-repeat, linear-gradient(var(--hud), var(--hud)) top left / 2px 14px no-repeat,
    linear-gradient(var(--hud), var(--hud)) top right / 14px 2px no-repeat, linear-gradient(var(--hud), var(--hud)) top right / 2px 14px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom left / 14px 2px no-repeat, linear-gradient(var(--hud), var(--hud)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom right / 14px 2px no-repeat, linear-gradient(var(--hud), var(--hud)) bottom right / 2px 14px no-repeat;
}
.t-screen { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--surface-2) var(--ph) center / cover no-repeat; }
.t-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-screen .t-ir { filter: url(#t-thermal); opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none; }
.t-screen.is-ir .t-ir { opacity: 1; transition-duration: .15s; }
.t-screen.is-haze .t-true { filter: url(#t-haze); }
.t-screen .t-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--molten); color: var(--on-accent); box-shadow: 0 0 0 8px rgba(255, 106, 19, .22), 0 14px 34px -8px rgba(255, 106, 19, .85);
  transition: transform .3s var(--ease);
}
.t-screen .t-play .t-i { width: 26px; height: 26px; margin-inline-start: 3px; }
@media (hover: hover) and (pointer: fine) { a.t-screen:hover .t-play { transform: scale(1.08); } }
.t-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 12px/1 var(--f-display); font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.t-status b { color: var(--text); font-weight: 700; }
.t-status .t-live { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); }
.t-status .t-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ee3b3b; box-shadow: 0 0 10px #ee3b3b; }
:lang(ja) .t-status, :lang(zh) .t-status, :lang(ko) .t-status, :lang(th) .t-status, :lang(ar) .t-status, :lang(hi) .t-status { letter-spacing: normal; text-transform: none; }
.t-pulse { width: 9px; height: 9px; border-radius: 50%; background: #ee3b3b; box-shadow: 0 0 0 0 rgba(238, 59, 59, .6); flex: none; }
@media (prefers-reduced-motion: no-preference) { .t-pulse { animation: t-beat 1.6s ease-out infinite; } }
@keyframes t-beat { 70% { box-shadow: 0 0 0 9px rgba(238, 59, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(238, 59, 59, 0); } }

/* =========================================================== 9. home hero: the infrared stage */
.t-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(70vh, 640px); display: flex; align-items: center; padding: 36px 0 40px; --fx-fallback: var(--thermal-fb); --fx-c1: #ee3b3b; --fx-c2: #ff7a12; --fx-c3: #ffc531; --fx-base: #0b0710; }
html[data-color-mode="light"] .t-hero { --fx-base: #fff5ec; }
.t-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--hero-fade); }
[dir="rtl"] .t-hero::after { transform: scaleX(-1); }
.t-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "top mon" "bot mon"; gap: 14px clamp(24px, 4vw, 64px); align-items: center; }
.t-hero-top { grid-area: top; align-self: end; min-width: 0; }
.t-hero-bot { grid-area: bot; align-self: start; min-width: 0; }
.t-monitor { grid-area: mon; min-width: 0; }
.t-kw { display: block; margin-top: 14px; height: .98em; font: 800 clamp(44px, 7.5vw, 112px)/.88 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.t-kw-g { display: inline-block; }
.t-kw-g, .t-kw .fx-rot-w {
  background-image: var(--grad-text); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.t-kw-g.is-rot { background-image: none !important; -webkit-text-fill-color: initial; animation: none !important; }
@supports selector(:has(*)) { .t-kw-g:has(.fx-rot) { background-image: none !important; -webkit-text-fill-color: initial; animation: none !important; } }
.t-kw .fx-rot-w { font-stretch: 75%; font-weight: 500; transition: opacity .45s ease, translate .6s var(--ease), font-stretch .7s var(--ease) .05s, font-weight .7s var(--ease) .05s; padding-inline-end: .04em; }
.t-kw .fx-rot-w[data-on] { font-stretch: 100%; font-weight: 800; }
.t-kw-g { font-stretch: 100%; }
@media (prefers-reduced-motion: no-preference) { .t-kw .fx-rot-w { animation: fx-gradient 7s linear infinite; } }
:lang(ru) .t-kw .fx-rot-w, :lang(ar) .t-kw .fx-rot-w { font-stretch: 100%; font-weight: 800; }
.t-feat-t { font: 700 clamp(22px, 2.4vw, 34px)/1.18 var(--f-display); font-stretch: 85%; }
.t-feat-t a { display: block; padding-block: 8px; margin-block: -8px; color: var(--text); border-radius: 6px; }
.t-feat-t a > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:lang(ru) .t-feat-t, :lang(ar) .t-feat-t { font-stretch: 100%; }
@media (hover: hover) and (pointer: fine) { .t-feat-t a:hover { color: var(--accent-ink-h); } html[data-color-mode="light"] .t-feat-t a:hover { color: var(--accent-ink); } }
.t-meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.t-meta-chips > span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--text); font: 600 12px/1 var(--f-text); }
.t-meta-chips .t-i { width: 14px; height: 14px; color: var(--muted); }
.t-meta-chips .is-heat { color: var(--tink, var(--accent-ink)); font-family: var(--f-display); font-stretch: 75%; font-size: 13px; font-weight: 700; }
.t-meta-chips .is-heat .t-i { color: currentColor; }
.t-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.t-mon-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 7px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.t-mon-read { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; padding: 6px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: var(--text); font: 600 13px/1.4 var(--f-display); font-stretch: 75%; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.t-mon-read b { color: var(--text); font-weight: 700; }
:lang(ru) .t-mon-read { font-stretch: 100%; }
.t-channels { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.t-ch-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; flex: 1; min-width: 0; }
.t-ch {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px; border-radius: 10px; text-align: start;
  border: 1px solid var(--line); background: var(--glass); color: var(--muted); font: 600 11px/1 var(--f-display); font-stretch: 75%; letter-spacing: .08em;
  transition: color .2s, background .2s;
}
.t-ch img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--surface-2) var(--ph) center / cover; }
.t-ch-bar { display: block; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.t-ch-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #ee3b3b, #ffc531); }
[dir="rtl"] .t-ch-bar i { transform-origin: 100% 50%; background: linear-gradient(270deg, #ee3b3b, #ffc531); }
.t-ch[aria-pressed="true"] { border-color: var(--accent-ink); color: var(--text); background: var(--surface-2); }
.t-ch[aria-pressed="true"] .t-ch-bar i { transform: scaleX(1); }
.t-channels.is-run .t-ch[aria-pressed="true"] .t-ch-bar i { transform: scaleX(0); animation: t-chfill var(--ch-ms, 6000ms) linear forwards; }
.t-channels.is-paused .t-ch[aria-pressed="true"] .t-ch-bar i { animation-play-state: paused; }
@keyframes t-chfill { to { transform: scaleX(1); } }
.t-ch-ctl { display: flex; flex-direction: column; gap: 6px; }
.t-ch-ctl .t-ibtn { min-width: 40px; height: 40px; border-color: var(--line); background: var(--glass); }
.t-ch-ctl .t-ibtn svg:not(.t-i) { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .t-ch:hover { border-color: var(--accent-ink); color: var(--text); } }
.t-hero .t-btn.is-ghost { background: var(--glass); border-color: var(--field); }
@media (max-width: 1023px) {
  .t-hero { min-height: 0; padding: 22px 0 28px; --fx-fallback: var(--thermal-fb-m); }
  .t-hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "mon" "bot"; gap: 18px; }
  .t-monitor { width: 100%; max-width: 680px; }
  .t-hero::after { background: var(--hero-fade-m); }
  [dir="rtl"] .t-hero::after { transform: none; }
}
@media (max-width: 767px) {
  .t-kw { margin-top: 8px; font-size: clamp(34px, 11vw, 48px); }
  .t-ch img, .t-ch-ctl { display: none; }
  .t-ch-list { display: flex; justify-content: center; gap: 4px; }
  .t-ch { flex: none; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; letter-spacing: 0; }
  .t-ch .t-ch-l { display: none; }
  .t-ch-bar { position: absolute; inset-inline: 10px; bottom: 7px; }
  .t-ch-n { font-size: 13px; }
  .t-channels { justify-content: center; }
}

/* =========================================================== 10. category header band, sort selector, pager */
.t-band { position: relative; isolation: isolate; overflow: hidden; min-height: 160px; display: flex; align-items: flex-end; padding: 28px 0 22px; --fx-fallback: var(--thermal-fb); --fx-c1: #ee3b3b; --fx-c2: #ff7a12; --fx-c3: #ffc531; --fx-base: #0b0710; }
html[data-color-mode="light"] .t-band { --fx-base: #fff5ec; }
.t-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-fade); pointer-events: none; }
[dir="rtl"] .t-band::after { transform: scaleX(-1); }
.t-band-in { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px 22px; flex-wrap: wrap; }
.t-band.is-static { background: var(--thermal-fb); }
.t-band.is-static::after { background: var(--hero-fade); }
.t-rankgrid { padding-top: 12px; row-gap: 34px; }
.t-band h1 { font: 800 clamp(30px, 4.4vw, 60px)/1.02 var(--f-display); letter-spacing: -.02em; min-width: 0; overflow-wrap: anywhere; }
.t-band h1 small { display: block; margin-top: 6px; font: 700 15px/1.3 var(--f-text); letter-spacing: 0; color: var(--muted); }
.t-band-total { padding: 6px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font: 600 14px/1.3 var(--f-display); font-stretch: 75%; letter-spacing: .06em; color: var(--text); }
.t-band-total b { color: var(--text); font-size: 22px; font-weight: 800; }
[data-t-expand] { font-stretch: 100%; transition: font-stretch .9s var(--ease) .1s; }
@media (prefers-reduced-motion: no-preference) { html.fx-js [data-t-expand]:not(.is-hot) { font-stretch: 75%; } }
:lang(ru) [data-t-expand], :lang(ar) [data-t-expand] { font-stretch: 100% !important; }
.t-crumb { display: flex; align-items: center; gap: 0 6px; flex-wrap: wrap; margin-bottom: 4px; font: 600 12px/1.4 var(--f-text); color: var(--muted); }
.t-crumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 44px; color: var(--muted); border-radius: 4px; }
.t-crumb .t-i { width: 13px; height: 13px; opacity: .7; }
.t-crumb [aria-current] { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .t-crumb a:hover { color: var(--accent-ink); } }
.t-filters { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 22px; }
.t-sorts { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px; margin: -6px; }
.t-sorts::-webkit-scrollbar { display: none; }
.t-sorts a {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 16px; border-radius: 999px; flex: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 700 13px/1 var(--f-text); white-space: nowrap;
}
.t-sorts a .t-i { width: 16px; height: 16px; color: var(--muted); }
.t-sorts a.h5 .t-i { color: var(--t4); } .t-sorts a.h4 .t-i { color: var(--t3); } .t-sorts a.h3 .t-i { color: var(--t4); } .t-sorts a.h2 .t-i { color: var(--t1); } .t-sorts a.h1 .t-i { color: var(--t0); }
.t-sorts a[aria-current] { background-color: #ff6a13; background-image: var(--molten); border-color: transparent; color: var(--on-accent); }
.t-sorts a[aria-current] .t-i { color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .t-sorts a:not([aria-current]):hover { border-color: var(--accent-ink); background: var(--surface-2); } }
.t-sibs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px; margin: -6px; }
.t-sibs::-webkit-scrollbar { display: none; }
.t-sibs a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px; flex: none; background: var(--surface-2); color: var(--text); font: 600 13px/1 var(--f-text); white-space: nowrap; border: 1px solid transparent; }
.t-sibs a[aria-current] { border-color: var(--accent); color: var(--accent-ink); }
html[data-color-mode="dark"] .t-sibs a[aria-current] { color: var(--accent-ink-h); }
@media (hover: hover) and (pointer: fine) { .t-sibs a:hover { border-color: var(--field); background: var(--surface-3); } }
.t-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 36px 0 8px; }
.t-pager a, .t-pager span {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 700 14px/1 var(--f-display); font-stretch: 85%; font-variant-numeric: tabular-nums;
}
.t-pager .t-pg-cur { background-color: #ff6a13; background-image: var(--molten); border-color: transparent; color: var(--on-accent); }
.t-pager .t-pg-gap { border-color: transparent; background: transparent; color: var(--muted); min-width: 24px; padding: 0; }
.t-pager .t-i { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .t-pager a:hover { border-color: var(--accent-ink); background: var(--surface-2); } }
.t-lead { color: var(--muted); max-width: 70ch; }
.t-ranknote { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 20px; color: var(--muted); font-size: 14px; }
.t-hscale { flex: none; width: min(320px, 60vw); height: 8px; border-radius: 8px; background: var(--ramp); position: relative; }
.t-hscale::before, .t-hscale::after { position: absolute; top: 12px; font: 600 10px/1 var(--f-display); font-stretch: 75%; letter-spacing: .1em; color: var(--muted); }

/* =========================================================== 11. detail */
.t-detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: start; margin-top: 18px; }
.t-detail-media { min-width: 0; }
.t-detail-side { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.t-vh1 { font: 700 clamp(24px, 2.6vw, 36px)/1.15 var(--f-display); font-stretch: 85%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
:lang(ru) .t-vh1, :lang(ar) .t-vh1 { font-stretch: 100%; }
.t-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.t-readout > div { min-width: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.t-readout > div:nth-child(odd):not(.is-wide) { border-inline-end: 1px solid var(--line); }
.t-readout > div.is-wide { grid-column: 1 / -1; border-inline-end: 0; }
.t-readout > div:last-child { border-bottom: 0; }
.t-readout dt { margin-bottom: 4px; font: 600 11px/1.2 var(--f-display); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
:lang(ja) .t-readout dt, :lang(zh) .t-readout dt, :lang(ko) .t-readout dt, :lang(th) .t-readout dt, :lang(ar) .t-readout dt, :lang(hi) .t-readout dt, :lang(ru) .t-readout dt { letter-spacing: normal; text-transform: none; font-stretch: 100%; }
.t-readout dd { font: 600 14px/1.45 var(--f-text); color: var(--text); overflow-wrap: anywhere; }
.t-readout dd.is-code { font: 800 16px/1.3 var(--f-display); font-stretch: 85%; letter-spacing: .02em; color: var(--accent-ink); }
html[data-color-mode="dark"] .t-readout dd.is-code { color: var(--accent-ink-h); }
.t-readout dd a { display: inline-flex; align-items: center; min-height: 40px; margin-block: -4px; color: var(--accent-ink); border-radius: 4px; }
.t-readout .t-chips { margin-top: 4px; }
.t-readout .t-chips a { min-height: 34px; color: var(--text); }
.t-readout .t-star { color: var(--hot); }
.t-tierink { color: var(--tink, var(--text)) !important; }
.t-readout.heat-0 { --tink: var(--t0); } .t-readout.heat-1 { --tink: var(--t1); } .t-readout.heat-2 { --tink: var(--t2); } .t-readout.heat-3 { --tink: var(--t3); } .t-readout.heat-4 { --tink: var(--t4); } .t-readout.heat-5 { --tink: var(--t5); }
.t-readout dd.t-num { font: 700 16px/1.3 var(--f-display); font-stretch: 75%; }
@media (hover: hover) and (pointer: fine) { .t-readout dd a:hover { color: var(--accent-ink-h); } html[data-color-mode="light"] .t-readout dd a:hover { color: var(--accent-ink-h); } }
.t-gaugebox { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.t-gauge { position: relative; width: 136px; flex: none; }
.t-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.t-gauge .t-g-track { fill: none; stroke: var(--line); stroke-width: 10; stroke-linecap: round; }
.t-gauge .t-g-val { fill: none; stroke: url(#t-ramp-arc); stroke-width: 10; stroke-linecap: round; stroke-dasharray: var(--gvf, 0) 100; transition: stroke-dasharray 1.2s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  html.fx-js .t-gauge:not(.is-on) .t-g-val { stroke-dasharray: 0 100; }
  html.fx-js:not(.t-live) .t-gauge .t-g-val { animation: t-gauge-fs 0s 3s forwards; }
}
@keyframes t-gauge-fs { to { stroke-dasharray: var(--gvf, 0) 100; } }
.t-heatbar { display: block; width: 120px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.t-heatbar i { display: block; height: 100%; width: var(--w, 16%); border-radius: inherit; background: var(--ramp); background-size: 120px 100%; }
.t-gauge-num { position: absolute; inset-inline: 0; bottom: 6px; text-align: center; font: 800 30px/1 var(--f-display); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.t-gauge-num small { font-size: 13px; color: var(--muted); font-weight: 600; }
.t-gauge-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.t-gauge-side .t-k { font: 600 11px/1.2 var(--f-display); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.t-gauge-side .t-v { font: 800 26px/1 var(--f-display); font-stretch: 75%; color: var(--tink, var(--text)); font-variant-numeric: tabular-nums; }
:lang(ja) .t-gauge-side .t-k, :lang(zh) .t-gauge-side .t-k, :lang(ko) .t-gauge-side .t-k, :lang(th) .t-gauge-side .t-k, :lang(ar) .t-gauge-side .t-k, :lang(hi) .t-gauge-side .t-k { letter-spacing: normal; text-transform: none; }
.t-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.t-desc { position: relative; margin-top: 28px; padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.t-desc h2 { margin-bottom: 8px; font: 800 20px/1.2 var(--f-display); font-stretch: 85%; }
.t-desc-body { color: var(--text); line-height: 1.7; max-height: 7.2em; overflow: hidden; transition: max-height .4s var(--ease); }
.t-desc-body.is-open { max-height: none; }
.t-desc-body.is-short + .t-readmore { display: none; }
.t-readmore { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--accent-ink); font-weight: 700; font-size: 13px; }
.t-readmore .t-less { display: none; }
.t-readmore[aria-expanded="true"] .t-less { display: inline; }
.t-readmore[aria-expanded="true"] .t-morel { display: none; }
@media (hover: hover) and (pointer: fine) { .t-readmore:hover { border-color: var(--accent-ink); background: var(--surface-2); } }
@media (max-width: 1023px) { .t-detail { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================== 12. watch */
.t-watch { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(20px, 2.4vw, 36px); align-items: start; margin-top: 14px; }
.t-watch-main { min-width: 0; }
.t-watch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.t-player-wrap { position: relative; }
.t-player {
  position: relative; z-index: 0; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--hdr) - 150px); margin-inline: auto;
  border-radius: 10px; overflow: hidden; background: #07040b;
}
.t-player > :not(.t-irboot) { position: relative; z-index: 1; }
.t-player .MacPlayer { background: transparent !important; height: 100% !important; }
.t-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.t-irboot { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; overflow: hidden; color: #c9a99c; background: radial-gradient(80% 90% at 50% 60%, #241334, #07040b 72%); transition: opacity .6s ease; }
.t-irboot.is-done { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; } /* faded layer stops painting its scan */
.t-irboot-read { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--f-display); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; }
:lang(ja) .t-irboot-read, :lang(zh) .t-irboot-read, :lang(ko) .t-irboot-read, :lang(th) .t-irboot-read, :lang(ar) .t-irboot-read, :lang(hi) .t-irboot-read { letter-spacing: normal; text-transform: none; }
.t-irboot-read::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff7a12; box-shadow: 0 0 10px #ff7a12; }
.t-irboot::before { content: ""; position: absolute; inset-inline: 0; height: 30%; top: 0; transform: translateY(-100%); will-change: transform; background: linear-gradient(180deg, rgba(255, 122, 18, 0), rgba(255, 122, 18, .16) 70%, rgba(255, 197, 49, .5) 100%); }
@media (prefers-reduced-motion: no-preference) { .t-irboot::before { animation: t-scan 2.4s cubic-bezier(.45, 0, .55, 1) infinite; } }
@keyframes t-scan { to { transform: translateY(333.4%); } }
.t-irboot::after { content: ""; position: absolute; inset: 18px; background:
  linear-gradient(#ffc531, #ffc531) top left / 14px 2px no-repeat, linear-gradient(#ffc531, #ffc531) top left / 2px 14px no-repeat,
  linear-gradient(#ffc531, #ffc531) top right / 14px 2px no-repeat, linear-gradient(#ffc531, #ffc531) top right / 2px 14px no-repeat,
  linear-gradient(#ffc531, #ffc531) bottom left / 14px 2px no-repeat, linear-gradient(#ffc531, #ffc531) bottom left / 2px 14px no-repeat,
  linear-gradient(#ffc531, #ffc531) bottom right / 14px 2px no-repeat, linear-gradient(#ffc531, #ffc531) bottom right / 2px 14px no-repeat; opacity: .6; }
.t-player-line { height: 1px; margin-bottom: 0; background: linear-gradient(90deg, #5b1696, #ee3b3b, #ff7a12, #ffc531); }
.t-wh1 { margin-top: 18px; font: 700 clamp(20px, 2vw, 28px)/1.25 var(--f-display); font-stretch: 85%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:lang(ru) .t-wh1, :lang(ar) .t-wh1 { font-stretch: 100%; }
.t-heatchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.t-heatchips span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text); font: 600 12px/1 var(--f-text); }
.t-heatchips .t-i { width: 14px; height: 14px; color: var(--muted); }
.t-heatchips .is-heat { color: var(--tink); font-family: var(--f-display); font-stretch: 75%; font-size: 13px; font-weight: 700; }
.t-heatchips .is-heat .t-i { color: currentColor; }
.t-heatchips.heat-0 { --tink: var(--t0); } .t-heatchips.heat-1 { --tink: var(--t1); } .t-heatchips.heat-2 { --tink: var(--t2); } .t-heatchips.heat-3 { --tink: var(--t3); } .t-heatchips.heat-4 { --tink: var(--t4); } .t-heatchips.heat-5 { --tink: var(--t5); }
.t-actbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.t-actbar .t-btn { min-height: 44px; padding: 8px 16px; font-size: 13px; }
.t-actbar .t-fav[aria-pressed="true"] .t-i { color: #ff4f9e; }
.t-actbar .t-copy[data-fx-state="copied"] { border-color: var(--accent); color: var(--accent-ink); }
.t-watch .t-readout { margin-top: 18px; position: relative; background: var(--surface-2); border-color: transparent; }
.t-watch .t-readout::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--ramp-v); }
.t-watch .t-readout > div { border-color: var(--line); }
.t-eps { margin-top: 18px; }
.t-eps h2 { margin-bottom: 10px; font: 700 15px/1.2 var(--f-text); color: var(--muted); }
.t-eps .t-chips a { font-family: var(--f-display); font-stretch: 80%; letter-spacing: .04em; }
.t-heatside { min-width: 0; position: sticky; top: calc(var(--hdr) + 14px); }
.t-heatside h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 800 20px/1.2 var(--f-display); font-stretch: 85%; }
.t-heatside h2 .t-i { color: var(--accent); }
.t-hrows { display: grid; gap: 10px; }
.t-hrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; padding: 6px; border-radius: 12px; color: var(--text); border: 1px solid transparent; }
.t-hrow .t-hr-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--surface-2) var(--ph) center / cover; }
.t-hrow .t-hr-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-hrow .t-hr-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 13px/18px var(--f-text); }
.t-hrow .t-hr-bar { display: block; height: 3px; margin-top: 8px; border-radius: 3px; background: var(--line); overflow: hidden; }
.t-hrow .t-hr-bar i { display: block; height: 100%; width: calc(var(--f, .17) * 100%); background: var(--ramp); background-size: calc(100% / var(--f, .17)) 100%; }
.t-hrow .t-hr-m { display: block; margin-top: 6px; font: 600 12px/1 var(--f-display); font-stretch: 75%; color: var(--tink, var(--muted)); }
.t-hrow.heat-0 { --tink: var(--t0); --f: .1667; } .t-hrow.heat-1 { --tink: var(--t1); --f: .3333; } .t-hrow.heat-2 { --tink: var(--t2); --f: .5; } .t-hrow.heat-3 { --tink: var(--t3); --f: .6667; } .t-hrow.heat-4 { --tink: var(--t4); --f: .8333; } .t-hrow.heat-5 { --tink: var(--t5); --f: 1; }
@media (hover: hover) and (pointer: fine) { .t-hrow:hover { background: var(--surface); border-color: var(--field); } .t-hrow:hover .t-hr-t { color: var(--accent-ink); } html[data-color-mode="dark"] .t-hrow:hover .t-hr-t { color: var(--accent-ink-h); } }
@media (max-width: 1023px) {
  .t-watch { grid-template-columns: minmax(0, 1fr); }
  .t-heatside { position: static; }
  .t-hrows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .t-page-watch .t-crumb, .t-page-watch .t-watch-head { display: none; }
  .t-page-watch .t-watch { margin-top: 0; }
  .t-page-watch .t-player-wrap { margin-inline: calc(-1 * var(--pad)); }
  .t-page-watch .t-player { border-radius: 0; max-height: none; }
  .t-page-watch .t-player-wrap.t-hud::after { display: none; }
  .t-wh1 { font: 700 18px/24px var(--f-text); -webkit-line-clamp: 2; margin-top: 14px; }
  .t-heatside { display: none; }
}

/* comments = heat thread */
.t-comments { margin-top: 36px; }
.t-comments h2, .t-comments .comment-title { font: 800 22px/1.2 var(--f-display); font-stretch: 85%; margin-bottom: 14px; }
.mac_comment { display: block; }
.mac_comment textarea, .mac_comment input[type="text"], .mac_comment input:not([type]) {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--field); background: var(--surface); color: var(--text);
}
.mac_comment textarea { min-height: 110px; resize: vertical; }
.mac_comment textarea:focus-visible, .mac_comment input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: transparent; }
.mac_comment button, .mac_comment input[type="button"], .mac_comment input[type="submit"], .comment_submit, .gbook_submit {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border: 0; border-radius: 999px;
  background-color: #ff6a13; background-image: var(--molten); color: var(--on-accent); font-weight: 800; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .mac_comment button:hover, .comment_submit:hover, .gbook_submit:hover { background-color: #ff9a24; background-image: var(--molten-h); } }
.mac_comment .comment-item, .mac_comment li, .message-list article {
  position: relative; margin-top: 12px; padding: 14px 16px 14px 20px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
}
.mac_comment .comment-item::before, .mac_comment li::before, .message-list article::before {
  content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--heatc, linear-gradient(180deg, #ffc531, #ff7a12));
}
[dir="rtl"] .mac_comment li::before, [dir="rtl"] .message-list article::before, [dir="rtl"] .mac_comment .comment-item::before { border-radius: 3px 0 0 3px; }
.message-list article:nth-child(2)::before, .mac_comment li:nth-child(2)::before { --heatc: linear-gradient(180deg, #ff7a12, #ee3b3b); }
.message-list article:nth-child(3)::before, .mac_comment li:nth-child(3)::before { --heatc: linear-gradient(180deg, #ee3b3b, #b0207f); }
.message-list article:nth-child(n+4)::before, .mac_comment li:nth-child(n+4)::before { --heatc: linear-gradient(180deg, #b0207f, #5b1696); }
.message-list article:nth-child(n+7)::before, .mac_comment li:nth-child(n+7)::before { --heatc: linear-gradient(180deg, #5b1696, #8f6bff); }
.comment-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.comment-head strong { color: var(--text); }
.site-reply { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.community-empty { color: var(--muted); padding: 10px 0; }
.mac_comment a { color: var(--accent-ink); }

/* =========================================================== 13. empty states, notice, 404 */
.t-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin: 28px auto; max-width: 560px; padding: 32px 20px; border-radius: 18px; background: var(--surface); border: 1px dashed var(--line); }
.t-empty p { color: var(--muted); }
.t-empty-t { font: 800 clamp(22px, 2.6vw, 30px)/1.15 var(--f-display); font-stretch: 85%; }
.t-vf { position: relative; width: 200px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: radial-gradient(70% 80% at 50% 55%, #2a1640, #0b0710 80%); }
html[data-color-mode="light"] .t-vf { background: radial-gradient(70% 80% at 50% 55%, #f3e9ff, #e9dcff 80%); }
.t-vf svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--cold); stroke-width: 2; stroke-linecap: round; }
.t-vf .t-vf-r, .t-vf .t-vf-x { stroke-width: 1.5; opacity: .75; }
.t-vf-scan { position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(143, 107, 255, 0), #a58bff, rgba(143, 107, 255, 0)); box-shadow: 0 0 12px #8f6bff; }
@media (prefers-reduced-motion: no-preference) { .t-vf-scan { animation: t-vscan 3.2s ease-in-out infinite alternate; } }
@keyframes t-vscan { to { transform: translateY(123px); } }
.t-vf-read { position: absolute; inset-inline: 0; bottom: 8px; text-align: center; font: 700 10px/1 var(--f-display); font-stretch: 75%; letter-spacing: .18em; text-transform: uppercase; color: var(--cold-ink); }
:lang(ja) .t-vf-read, :lang(zh) .t-vf-read, :lang(ko) .t-vf-read, :lang(th) .t-vf-read, :lang(ar) .t-vf-read, :lang(hi) .t-vf-read { letter-spacing: normal; text-transform: none; }
.t-notice { margin-top: 36px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.t-notice strong { color: var(--accent-ink); }
.t-cold404 { text-align: center; padding: 28px 0 8px; }
.t-404num {
  display: inline-block; font: 800 clamp(120px, 24vw, 280px)/.86 var(--f-display); font-stretch: 100%; letter-spacing: -.04em; user-select: none;
  background: radial-gradient(260px circle at var(--px, 50%) var(--py, 50%), #ffc531, #ff7a12 30%, rgba(255, 122, 18, 0) 62%), linear-gradient(135deg, #24104a, #5b2fd6 55%, #8f6bff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
html[data-color-mode="light"] .t-404num { background: radial-gradient(260px circle at var(--px, 50%) var(--py, 50%), #ff7a12, #b23c00 34%, rgba(178, 60, 0, 0) 62%), linear-gradient(135deg, #3a1270, #5b2fd6 55%, #8f6bff); -webkit-background-clip: text; background-clip: text; }
.t-cold404 h1 { margin-top: 10px; font: 800 clamp(26px, 3.4vw, 42px)/1.15 var(--f-display); font-stretch: 85%; }
.t-cold404 p { margin: 10px auto 0; max-width: 56ch; color: var(--muted); }
.t-cold404 .t-scan { max-width: 560px; margin: 22px auto 0; }
.t-cold404 .t-cta { justify-content: center; }

/* IR scanner input (search page, search sheet, 404) */
.t-scan { position: relative; }
.t-scan-ring { position: relative; display: block; color: var(--muted); }
.t-scan-ring > .t-i { position: absolute; z-index: 1; inset-inline-start: 18px; top: 50%; margin-top: -10px; width: 20px; height: 20px; pointer-events: none; }
.t-scan-in {
  display: block; width: 100%; height: 56px; padding: 0 62px 0 48px; border-radius: 999px; border: 2px solid transparent; color: var(--text); font-size: 16px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, #5b1696, #ee3b3b, #ff7a12, #ffc531, #ee3b3b, #5b1696) border-box;
  background-size: 100% 100%, 300% 100%;
}
[dir="rtl"] .t-scan-in { padding: 0 48px 0 62px; }
.t-scan-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .t-scan-ring.is-typing .t-scan-in { animation: t-ring 1.4s linear infinite; } }
.t-scan-go { position: absolute; z-index: 1; inset-inline-end: 6px; top: 50%; margin-top: -22px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background-color: #ff6a13; background-image: var(--molten); color: var(--on-accent); }
.t-scan-go .t-i { width: 20px; height: 20px; }
[dir="rtl"] .t-scan-go .t-i { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { .t-scan-go:hover { background-image: var(--molten-h); } }
.t-scan .t-sugg { top: calc(100% + 6px); }
.t-searchhead { padding: 28px 0 8px; }
.t-searchhead .t-scan { max-width: 760px; }
.t-searchhead h1 { margin: 22px 0 6px; font: 800 clamp(24px, 3vw, 40px)/1.15 var(--f-display); font-stretch: 85%; overflow-wrap: anywhere; }
.t-result-line { color: var(--muted); font-size: 14px; }
.t-result-line b { color: var(--text); font-family: var(--f-display); font-stretch: 75%; font-size: 16px; }

/* =========================================================== 14. footer + dock + sheets */
.t-ft { position: relative; margin-top: 56px; padding: 44px 0 28px; background: linear-gradient(180deg, var(--bg), #120a1d 55%, #1a0d2e); color: var(--text); }
html[data-color-mode="light"] .t-ft { background: linear-gradient(180deg, var(--bg), #fbe9ff 70%, #f1e3ff); }
.t-ft::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, #5b1696, #ee3b3b, #ff7a12, #ffc531, #ff7a12, #ee3b3b, #5b1696); }
.t-ft-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.t-ft-brand .t-brand { margin-bottom: 10px; }
.t-ft-tag { color: var(--muted); max-width: 34ch; font-size: 14px; }
.t-ft-tools { display: flex; gap: 8px; margin-top: 16px; }
.t-ft-tools .t-ibtn { border-color: var(--line); }
.t-ft-tools .t-lang-list { top: auto; bottom: calc(100% + 8px); inset-inline-end: auto; inset-inline-start: 0; }
.t-ft-col h2 { margin-bottom: 12px; font: 600 12px/1.2 var(--f-display); font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
:lang(ja) .t-ft-col h2, :lang(zh) .t-ft-col h2, :lang(ko) .t-ft-col h2, :lang(th) .t-ft-col h2, :lang(ar) .t-ft-col h2, :lang(hi) .t-ft-col h2, :lang(ru) .t-ft-col h2 { letter-spacing: normal; text-transform: none; font-stretch: 100%; }
.t-ft-col li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--text); font-size: 14px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .t-ft-col li a:hover { color: var(--accent-ink); } html[data-color-mode="dark"] .t-ft-col li a:hover { color: var(--accent-ink-h); } }
.t-ft-bottom { margin-top: 32px; display: grid; gap: 8px; }
.t-ft-scale { height: 4px; border-radius: 4px; overflow: hidden; background: var(--line); }
.t-ft-scale i { display: block; height: 100%; background: var(--ramp); }
.t-ft-copy { margin-top: 8px; font-weight: 700; }
.t-18 { display: inline-grid; place-items: center; margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: #ff6a13; color: var(--on-accent); font: 800 11px/1.4 var(--f-text); }
.t-ft-note { color: var(--muted); font-size: 13px; }
.t-ft-note a { color: var(--accent-ink); }
@media (max-width: 1023px) { .t-ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .t-ft-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .t-ft-brand { grid-column: 1 / -1; } .t-ft { margin-top: 40px; } }

.t-dock { display: none; }
.t-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; }
.t-sheet[hidden] { display: none; }
.t-sheet.is-top { align-items: flex-start; }
.t-sheet-scrim { position: absolute; inset: 0; background: var(--scrim); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .t-sheet-scrim { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } }
.t-sheet-panel {
  position: relative; width: 100%; max-height: 86vh; overflow: auto; overscroll-behavior: contain; padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .6);
}
.t-sheet.is-top .t-sheet-panel { border-radius: 0 0 22px 22px; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 20px; border-top: 0; border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .t-sheet:not([hidden]) .t-sheet-panel { animation: t-sheet-up .32s var(--ease); }
  .t-sheet.is-top:not([hidden]) .t-sheet-panel { animation-name: t-sheet-down; }
  .t-sheet:not([hidden]) .t-sheet-scrim { animation: t-fade .25s ease; }
}
@keyframes t-sheet-up { from { transform: translateY(100%); } }
@keyframes t-sheet-down { from { transform: translateY(-100%); } }
@keyframes t-fade { from { opacity: 0; } }
.t-sheet-grip { width: 44px; height: 4px; margin: 2px auto 10px; border-radius: 4px; background: var(--line); }
.t-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.t-sheet-head h2 { display: flex; align-items: center; gap: 8px; font: 800 20px/1.2 var(--f-display); font-stretch: 85%; }
.t-sheet-head h2 .t-i { color: var(--accent); }
.t-sheet-k { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font: 600 12px/1.2 var(--f-display); font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
:lang(ja) .t-sheet-k, :lang(zh) .t-sheet-k, :lang(ko) .t-sheet-k, :lang(th) .t-sheet-k, :lang(ar) .t-sheet-k, :lang(hi) .t-sheet-k, :lang(ru) .t-sheet-k { letter-spacing: normal; text-transform: none; font-stretch: 100%; }
.t-sheet-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.t-sheet-links a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 14px; }
.t-sheet-links .t-i { color: var(--accent-ink); }
.t-langrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.t-langrow a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; text-align: center; }
.t-langrow a[aria-current] { background: var(--accent); color: var(--on-accent); }
.t-recent .t-chips a, .t-sheet .t-chips a { min-height: 40px; }
.t-sheet .t-scan { margin-top: 4px; }
html.t-sheet-open { overflow: hidden; }

@media (max-width: 767px) {
  :root { --hdr: 56px; --dock: calc(64px + env(safe-area-inset-bottom)); }
  .t-hdr-in { gap: 6px; }
  .t-nav, .t-search, .t-lang, .t-acct { display: none; }
  .t-tools { margin-inline-start: auto; gap: 2px; }
  .t-mark { width: 32px; height: 32px; }
  .t-word { font-size: 19px; }
  .t-dock {
    position: fixed; z-index: 60; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
    height: var(--dock); padding: 0 6px env(safe-area-inset-bottom); background: var(--glass-solid);
    transition: transform .25s var(--ease);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .t-dock { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); } }
  .t-dock::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, #5b1696, #ee3b3b, #ff7a12, #ffc531, #ff7a12, #ee3b3b, #5b1696); }
  .t-dock > a, .t-dock > button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 64px; min-width: 0; padding: 4px 2px;
    border: 0; background: transparent; color: var(--muted); font: 700 11px/1.1 var(--f-text); text-decoration: none; border-radius: 12px;
  }
  .t-dock span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .t-dock .t-i { width: 22px; height: 22px; }
  .t-dock [aria-current="page"], .t-dock [aria-expanded="true"] { color: var(--text); }
  .t-dock [aria-current="page"]::after { content: ""; position: absolute; top: 8px; width: 34px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 122, 18, .5), rgba(255, 122, 18, 0)); z-index: -1; }
  .t-dock .t-dock-heat { justify-content: flex-end; padding-bottom: 6px; }
  .t-dock-orb {
    position: absolute; top: -20px; left: 50%; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--molten); color: var(--on-accent); box-shadow: 0 0 0 4px var(--bg), 0 10px 26px -6px rgba(255, 106, 19, .9);
  }
  .t-dock-orb .t-i { width: 26px; height: 26px; }
  .t-dock-orb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 197, 49, .55); opacity: .7; }
  .t-dock .t-dock-heat span:last-child { color: var(--text); }
  .t-dock .t-mi, .t-dock .fx-morph-svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  html.t-input-focus .t-dock { transform: translateY(110%); }
  html.t-input-focus { --dock: 0px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.t-dock-idle .t-dock-orb::after { animation: t-orb 2.8s ease-out infinite; }
}
@keyframes t-orb { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
@media (max-width: 359px) { .t-word { display: none; } }
@media (min-width: 768px) {
  .t-only-phone { display: none !important; }
  .t-sheet { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .t-search { display: none; }
  .t-only-phone { display: inline-grid !important; }
  .t-sheet:not([hidden]) { display: flex !important; }
  .t-sheet-panel { max-width: 640px; margin-inline: auto; border-radius: 22px 22px 0 0; }
  .t-nav .t-pill:nth-child(1), .t-nav .t-pill:nth-child(4) { display: none; }
  .t-tools { margin-inline-start: auto; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .t-nav .t-pill:nth-child(1), .t-nav .t-pill:nth-child(4) { display: none; }
  .t-search { max-width: 300px; }
}
@media (min-width: 1024px) { .t-acct { max-width: 170px; } }

/* =========================================================== 15. forms, panels, user pages basics, gbook, map, jump */
.t-panel { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); padding: clamp(16px, 2.4vw, 28px); }
.t-form { display: grid; gap: 14px; }
.t-field { display: grid; gap: 6px; }
.t-field label, .t-form label { font: 700 13px/1.3 var(--f-text); color: var(--text); }
.t-input, .t-form input[type="text"], .t-form input[type="password"], .t-form input[type="email"], .t-form input[type="tel"], .t-form input[type="search"], .t-form textarea, .t-form select {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--field); background: var(--bg); color: var(--text);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.t-form textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.t-input:focus-visible, .t-form input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible, .t-form textarea:focus-visible, .t-form select:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-color: transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(90deg, #5b1696, #ee3b3b, #ff7a12, #ffc531) border-box; border: 1px solid transparent;
}
.verification-field { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: end; }
.verification-field label { grid-column: 1 / -1; }
.verification-field img, img.e-verify, img.t-verify { height: 48px; width: 120px; border-radius: 12px; border: 1px solid var(--field); background: var(--surface-2) center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a99c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4'/%3E%3C/svg%3E"); cursor: pointer; object-fit: contain; }
.gbook_form { display: grid; gap: 12px; }
.gbook_form label { font-weight: 700; font-size: 13px; }
.gbook_form textarea, .gbook_form input:not([type="hidden"]):not([type="button"]) { width: 100%; padding: 12px 14px; min-height: 48px; border-radius: 12px; border: 1px solid var(--field); background: var(--bg); color: var(--text); }
.gbook_form textarea { min-height: 140px; resize: vertical; }
.gbook_form textarea:focus-visible, .gbook_form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.t-twocol { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
@media (max-width: 1023px) { .t-twocol { grid-template-columns: minmax(0, 1fr); } }
.t-pagehead { padding: 28px 0 6px; }
.t-pagehead h1 { font: 800 clamp(28px, 3.6vw, 48px)/1.1 var(--f-display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.t-pagehead p { margin-top: 8px; color: var(--muted); max-width: 70ch; }
.t-maplinks { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.mac_msg_jump { max-width: 520px; margin: 12vh auto; padding: 32px 28px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: center; position: relative; }
.mac_msg_jump .title { font: 600 12px/1 var(--f-display); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mac_msg_jump .msg_jump_tit { margin-top: 10px; font: 800 26px/1.2 var(--f-display); font-stretch: 85%; }
.mac_msg_jump .text { margin-top: 12px; color: var(--muted); }
.mac_msg_jump .jump { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; color: var(--muted); }
.mac_msg_jump .jump a { color: var(--accent-ink); font-weight: 700; }
.t-ring { width: 64px; height: 64px; margin: 18px auto 0; display: block; }
.t-ring circle { fill: none; stroke-width: 5; }
.t-ring .t-rg-bg { stroke: var(--line); }
.t-ring .t-rg-v { stroke: url(#t-ramp-arc); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 163.4; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .t-ring .t-rg-v { animation: t-countdown var(--wait, 3s) linear forwards; } }
@keyframes t-countdown { to { stroke-dashoffset: 163.4; } }
.gallery-status { position: fixed; inset-inline-start: -9999px; }

/* =========================================================== 15b. performers, collections, articles, access pages */
.t-rankgrid .t-code { top: auto; bottom: 8px; inset-inline-start: 8px; }
.t-row5 { grid-template-rows: auto; }
.t-agrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 20px; }
@media (max-width: 1023px) { .t-agrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .t-agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }
.t-actor a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 16px; color: var(--text); text-align: center; border: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) { .t-actor a:hover { background: var(--surface); border-color: var(--line); } }
.t-av { position: relative; display: grid; place-items: center; width: 124px; aspect-ratio: 1; border-radius: 50%; padding: 4px; background: conic-gradient(from 210deg, var(--h0), var(--tinkh, var(--h1)), var(--h0)); }
.t-actor.heat-2 .t-av, .t-person .heat-2 { --tinkh: var(--h2); } .t-actor.heat-3 .t-av { --tinkh: var(--h3); } .t-actor.heat-4 .t-av { --tinkh: var(--h4); } .t-actor.heat-5 .t-av { --tinkh: var(--h5); }
.t-av img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.t-av-i { position: absolute; inset: 4px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--text); font: 800 40px/1 var(--f-display); font-stretch: 85%; }
.t-av.is-big { width: min(220px, 50vw); flex: none; }
.t-av.is-big .t-av-i { font-size: 72px; }
.t-av-n { font: 700 15px/1.3 var(--f-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-av-m { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font: 600 12px/1 var(--f-display); font-stretch: 75%; }
.t-av-m .t-i { width: 13px; height: 13px; color: var(--accent); }
.t-person { display: flex; gap: clamp(20px, 3vw, 40px); align-items: flex-start; margin-top: 8px; }
.t-person-b { flex: 1; min-width: 0; display: grid; gap: 16px; }
@media (max-width: 767px) { .t-person { flex-direction: column; align-items: center; } .t-person-b { width: 100%; } }
.t-artlist { display: grid; gap: 14px; }
.t-artrow { display: grid; grid-template-columns: minmax(160px, 280px) minmax(0, 1fr); gap: 18px; align-items: start; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.t-artrow-b { min-width: 0; padding-top: 4px; }
.t-artrow .t-ct { margin: 0; font-size: 17px; line-height: 1.35; }
.t-artrow-x { margin-top: 8px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) { .t-artrow { grid-template-columns: minmax(0, 1fr); } }
.t-article { max-width: 820px; margin: 8px auto 0; }
.t-article .t-cm { margin: 10px 0 18px; }
.t-article-body { line-height: 1.8; font-size: 16px; overflow-wrap: anywhere; }
.t-article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.t-article-body a { color: var(--accent-ink); text-decoration: underline; }
.permission-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--thermal-fb); }
.permission-page .mac_msg_jump { margin: 0; width: min(100%, 520px); }
.mac_msg_jump.t-hud::after { inset: -8px; }
.t-page-msg .mac_msg_jump { margin: 8vh auto; }
.article-access-page { min-height: 70vh; display: grid; place-items: center; padding: 24px 0; }
.article-access-card { position: relative; width: min(100%, 460px); padding: 28px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.article-access-kicker { font: 600 12px/1 var(--f-display); font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.article-access-card h1 { margin-top: 10px; font: 800 24px/1.2 var(--f-display); font-stretch: 85%; }
.article-access-form { display: grid; gap: 12px; margin-top: 16px; text-align: start; }
.article-access-form input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--field); background: var(--bg); color: var(--text); }
.article-access-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.article-access-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.article-access-actions a, .article-access-actions button, .article-access-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--field); background: transparent; color: var(--text); font-weight: 700; }
.article-access-primary, .article-access-actions .article-access-primary { background: var(--molten); color: var(--on-accent); border-color: transparent; }
.password-link { color: var(--accent-ink); }
.comment_form { display: grid; gap: 10px; margin-bottom: 8px; }
.comment_form label { font-weight: 700; font-size: 13px; }
.comment-actions { display: flex; gap: 8px; margin-top: 8px; }
.comment-actions .secondary, .comment-pages button { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font-weight: 700; font-size: 13px; }
.comment-response { margin-top: 10px; margin-inline-start: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.comment-pages { display: flex; gap: 8px; margin-top: 12px; }
.comment-list > article { position: relative; margin-top: 12px; padding: 14px 16px 14px 20px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.comment-list > article::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #ffc531, #ff7a12); }
.comment-list > article:nth-child(2)::before { background: linear-gradient(180deg, #ff7a12, #ee3b3b); }
.comment-list > article:nth-child(3)::before { background: linear-gradient(180deg, #ee3b3b, #b0207f); }
.comment-list > article:nth-child(n+4)::before { background: linear-gradient(180deg, #b0207f, #5b1696); }
.comment-list > article:nth-child(n+7)::before { background: linear-gradient(180deg, #5b1696, #8f6bff); }
@media (hover: hover) and (pointer: fine) { .comment-actions .secondary:hover, .comment-pages button:hover { border-color: var(--accent-ink); background: var(--surface-2); } }

/* =========================================================== 16. heat-wipe page transition (cross-document View Transitions)
   The old page is clipped away from its leading edge, the new page is revealed behind it, and a ramp-coloured
   band (the image pair's own background) shows in the moving gap between them. */
@media (prefers-reduced-motion: no-preference) {
  html[data-fx-vt-style="ember-modern"]::view-transition-old(root),
  html[data-fx-vt-style="ember-modern"]::view-transition-new(root) { mix-blend-mode: normal; animation-duration: .5s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); animation-fill-mode: both; }
  html[data-fx-vt-style="ember-modern"]::view-transition-old(root) { animation-name: t-vt-old; }
  html[data-fx-vt-style="ember-modern"]::view-transition-new(root) { animation-name: t-vt-new; }
  html[data-fx-vt-style="ember-modern"]::view-transition-image-pair(root) {
    background: linear-gradient(90deg, rgba(91, 22, 150, 0), #5b1696 18%, #ee3b3b 36%, #ff7a12 50%, #ffc531 64%, #ee3b3b 82%, rgba(91, 22, 150, 0)) no-repeat;
    background-size: 34% 100%; animation: t-vt-band .5s cubic-bezier(.65, 0, .35, 1) both;
  }
  html[dir="rtl"][data-fx-vt-style="ember-modern"]::view-transition-old(root) { animation-name: t-vt-old-rtl; }
  html[dir="rtl"][data-fx-vt-style="ember-modern"]::view-transition-new(root) { animation-name: t-vt-new-rtl; }
  html[dir="rtl"][data-fx-vt-style="ember-modern"]::view-transition-image-pair(root) { animation-name: t-vt-band-rtl; }
}
@keyframes t-vt-new { from { clip-path: polygon(0 0, -16% 0, -16% 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes t-vt-old { from { clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%); } to { clip-path: polygon(116% 0, 100% 0, 100% 100%, 116% 100%); } }
@keyframes t-vt-band { from { background-position: -38% 0; } to { background-position: 138% 0; } }
@keyframes t-vt-new-rtl { from { clip-path: polygon(100% 0, 116% 0, 116% 100%, 100% 100%); } to { clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); } }
@keyframes t-vt-old-rtl { from { clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); } to { clip-path: polygon(-16% 0, 0 0, 0 100%, -16% 100%); } }
@keyframes t-vt-band-rtl { from { background-position: 138% 0; } to { background-position: -38% 0; } }

/* =========================================================== 17. reduced motion / misc */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .t-search-in:focus, .t-scan-ring.is-typing .t-scan-in { animation: none; }
  .t-screen .t-ir { display: none; }
  .t-card, .t-thumb img, .t-disc, .t-heatmap a { transition: none !important; }
}
/* performer page: videos live on the paged actor search (no in-page LIKE scan) */
.t-actor-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 20px 22px 20px 26px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.t-actor-cta::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
  background: linear-gradient(180deg, #fff3c4, #ffc531, #ff7a12, #ee3b3b, #b0207f, #5b1696); }
.t-actor-cta-i { flex: none; width: 28px; height: 28px; color: var(--accent-ink); }
.t-actor-cta p { flex: 1 1 220px; margin: 0; font: 600 15px/1.5 var(--f-text); color: var(--text); }
/* optical size pinned per role (Bricolage opsz 12-96): engines without automatic optical sizing would render every size at
   the default opsz 96 (display spacing) and crush the small HUD labels; giant decorative numerals keep the default */
.t-num, .t-hudn, .t-lang-code, .t-mega-k, .t-eyebrow, .t-heat, .t-dur, .t-gchip, .t-hm-count, .t-hl-count, .t-status,
.t-meta-chips .is-heat, .t-mon-read, .t-ch, .t-band-total, .t-hscale::before, .t-hscale::after, .t-readout dt,
.t-readout dd.is-code, .t-readout dd.t-num, .t-gauge-side .t-k, .t-gauge-side .t-v, .t-irboot-read, .t-heatchips .is-heat,
.t-eps .t-chips a, .t-hrow .t-hr-m, .t-vf-read, .t-result-line b, .t-sheet-k, .t-pager a, .t-pager span, .t-scale,
.t-ft-col h2, .mac_msg_jump .title, .t-av-m, .article-access-kicker { font-variation-settings: "opsz" 12; }
.t-word, .t-hm-name, .t-feat-t, .t-vh1, .t-wh1, .t-gauge-num, .t-desc h2, .t-heatside h2, .t-comments h2,
.t-comments .comment-title, .t-empty-t, .t-sheet-head h2, .mac_msg_jump .msg_jump_tit, .article-access-card h1,
.t-cold404 h1 { font-variation-settings: "opsz" 24; }
.t-sec-t, .t-band h1, .t-searchhead h1, .t-pagehead h1, .t-rank, .t-av-i { font-variation-settings: "opsz" 32; }
@media (forced-colors: active) { .t-card { border: 1px solid CanvasText; } .t-btn.is-molten, .t-pager .t-pg-cur, .t-sorts a[aria-current] { border: 2px solid ButtonText; } }
@media print { .t-hdr, .t-dock, .t-ft, .t-scale, .t-sheet { display: none !important; } body { padding: 0; } }

/* =========================================================== 18. repair round (REVIEW-ember-modern P2/P3 + final-pass findings) */
/* F1 (P2-1) header: the brand never gives way to the nav on tablets / small laptops; the nav and tools compact instead */
@media (min-width: 768px) { .t-brand { flex: none; } }
@media (min-width: 768px) and (max-width: 1279px) {
  .t-pill { padding-inline: 10px; }
  .t-lang-code { display: none; }
  .t-acct { width: 44px; min-width: 44px; padding: 0; justify-content: center; gap: 0; font-size: 0; }
}
/* FX-8 long user names in the account pill end with an ellipsis (text-overflow needs a block container, not flex) */
@media (min-width: 1280px) {
  .t-acct { display: inline-block; line-height: 42px; }
  .t-acct::before { display: inline-block; vertical-align: -3px; margin-inline-end: 8px; }
}
/* F2 (P2-3) phones: keep the slideshow pause control (WCAG 2.2.2); the dots stay the channel picker */
@media (max-width: 767px) {
  .t-channels .t-ch-ctl { display: flex; flex-direction: row; }
  .t-channels .t-ch-ctl [data-t-prev], .t-channels .t-ch-ctl [data-t-next] { display: none; }
  .t-channels .t-ch-ctl .t-ibtn { min-width: 44px; height: 44px; border-radius: 50%; }
}
/* F3 (P3-3) readout: "+144 today" stays together */
.t-mon-read { display: inline-block; }
/* F4 (P3-4) channel label "CH 01" on one line */
.t-ch { flex-direction: row; flex-wrap: wrap; align-content: flex-start; column-gap: 4px; }
.t-ch img, .t-ch .t-ch-bar { flex: 0 0 100%; }
@media (max-width: 767px) { .t-ch { align-content: center; } }
/* F5 (P3-5) hottest heat-map tiles: no extra brightening on hover (the name keeps its contrast on the amber corner) */
@media (hover: hover) and (pointer: fine) { .t-heatmap .b2 a:hover, .t-heatmap .b3 a:hover { filter: saturate(1.12); } }
/* FX-2 heat-map names are never clipped in long languages: no line clamp (category names are short admin strings), long
   words break (hyphenated where the browser can), room for Cyrillic/Vietnamese descenders, rows grow instead of clipping */
.t-hm-name, .t-heatmap.is-mini .t-hm-name { display: block; overflow: visible; -webkit-line-clamp: none; flex-shrink: 0; overflow-wrap: anywhere; hyphens: auto; line-height: 1.12; padding-bottom: .12em; }
.t-heatmap { grid-auto-rows: minmax(104px, auto); }
.t-heatmap.is-mini { grid-auto-rows: minmax(72px, auto); }
@media (max-width: 767px) { .t-heatmap { grid-auto-rows: minmax(92px, auto); } }
/* F7 (P2-2) phones: section titles wrap (max 2 balanced lines) instead of being cut; dock labels may wrap */
@media (max-width: 767px) {
  .t-sec-t { white-space: normal; overflow: visible; text-overflow: clip; font-size: clamp(22px, 6.2vw, 28px); line-height: 1.08; text-wrap: balance; }
  .t-more { padding-inline: 12px; }
  .t-dock span { white-space: normal; text-align: center; line-height: 1.05; overflow-wrap: anywhere; }
}
/* F7 follow-up (zero CLS): a wrapping title could gain a line while its width expands, so on phones titles start in their
   final state and thermal-fx.js applies the condensed start (t-kin-cold) only where it keeps the title's height */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.fx-js [data-t-kin]:not(.is-hot):not(.t-kin-cold) > span { font-stretch: 100%; font-weight: 800; }
  .t-kin-measure > span { transition: none !important; }
}
/* FX-2 follow-up: one-column tiles span two columns on tablets (no mid-word breaks such as "Chinesisc/he"); the template
   computes the tablet remainder for the "All videos" tile (--tc); phones give the small tiles a little more text room */
@media (min-width: 768px) and (max-width: 1023px) {
  .t-heatmap > li.b0 { grid-column: span 2; }
  .t-heatmap > li.is-all { grid-column: span var(--tc, 6); }
}
@media (max-width: 767px) {
  .t-heatmap a { padding-inline: 12px; }
  .t-heatmap > li:not(:first-child) .t-hm-name { font-size: clamp(15px, 4.7vw, 18px); }
}
/* the "All videos" tile has no gradient behind its text: no dark text shadow (it smudged on thermal paper) */
.t-heatmap .is-all .t-hm-name, .t-heatmap .is-all .t-hm-count { text-shadow: none; }
/* two-line dock labels (es "Mas recientes") keep every icon on one line: items align to the top, not the centre */
@media (max-width: 767px) { .t-dock > a:not(.t-dock-heat), .t-dock > button { justify-content: flex-start; padding-top: 13px; } }
/* long search placeholders (fr, de, ru) end with an ellipsis instead of a hard cut */
.t-search-in { text-overflow: ellipsis; }
/* F8 (P3-8) landscape phones: the player fits between the 56 px header and the 64 px dock (16:9 kept, centred);
   the reviewer's cap reserved only the header, which left the player's bottom (its controls) under the dock */
@media (max-width: 767px) and (orientation: landscape) {
  .t-player-wrap, .t-page-watch .t-player-wrap { max-width: calc((100vh - 128px) * 16 / 9); max-width: calc((100svh - 128px) * 16 / 9); margin-inline: auto; }
}
/* F9 (P3-10) phone tap targets >= 44 px (the auth links live in thermal-user.css) */
@media (max-width: 767px) { .t-crumb a { min-height: 44px; display: inline-flex; align-items: center; } .t-ct a { display: block; padding-block: 2px; } }
/* skip link: no animated `top` under reduced motion */
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }