/* WorkFisher — the hub. Dark and cinematic: near-black, film grain, hairline frames, light type,
   one red accent, and the imagery (a lit form behind reeded glass, the video covers) doing the talking. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg: #09090b;
  --bg-deep: #050506;
  --panel: rgb(255 255 255 / 0.025);
  --panel-hover: rgb(255 255 255 / 0.045);
  --line: rgb(255 255 255 / 0.09);
  --line-strong: rgb(255 255 255 / 0.2);
  --text: #f3f2ef;
  --text-2: #a4a3a8;
  --text-3: #6e6d73;
  --red: #ff3b30;
  --red-soft: #ff7a70;
  --red-glow: rgb(255 59 48 / 0.35);
  --display: "Outfit WF", "Noto Sans SC WF", "PingFang SC", "Microsoft YaHei UI Light", "Microsoft YaHei UI", sans-serif;
  --sans: "Outfit WF", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --light: "Outfit WF", "PingFang SC", "Microsoft YaHei UI Light", "Microsoft YaHei Light", "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --inset: 20px;
  --pad: 56px;
  --bar: 64px;
  --win-x: 40px;
  --win-y: 30px;
  --win-bar: 56px;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.7 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 1.5px solid var(--red); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 500; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(1240px + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.display { font-family: var(--display); font-weight: 300; font-synthesis: none; }
.eyebrow { margin: 0; font: 400 12px/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); }

/* Film grain over everything: a tiny noise tile nudged a few pixels every frame of a stepped loop. */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.06; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- cursor: a dot that tracks exactly and a ring that trails, grows over links and names what a click does ---------- */
.cursor { display: none; }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input, .has-cursor textarea { cursor: text !important; }
.has-cursor .cursor { display: block; position: fixed; inset: 0 auto auto 0; z-index: 95; pointer-events: none; }
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; border-radius: 50%; translate: var(--x, -100px) var(--y, -100px); }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; mix-blend-mode: difference; transition: opacity 0.2s, scale 0.3s var(--out); }
.cursor-ring { --size: 34px; display: grid; place-items: center; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2); translate: var(--rx, -100px) var(--ry, -100px); border: 1px solid rgb(255 255 255 / 0.45); transition: width 0.45s var(--out), height 0.45s var(--out), margin 0.45s var(--out), background-color 0.35s, border-color 0.35s, opacity 0.25s, scale 0.25s var(--out); }
.cursor-label { font: 500 12px/1 var(--sans); letter-spacing: 0.06em; color: #fff; white-space: nowrap; opacity: 0; transition: opacity 0.25s; }
.cursor.is-link .cursor-ring { --size: 54px; background: rgb(255 255 255 / 0.07); border-color: rgb(255 255 255 / 0.6); }
.cursor.is-label .cursor-ring { --size: 84px; background: var(--red); border-color: var(--red); }
.cursor.is-label .cursor-label { opacity: 1; }
.cursor.is-label .cursor-dot, .cursor.is-text .cursor-dot, .cursor.is-text .cursor-ring { opacity: 0; }
.cursor.is-down .cursor-ring { scale: 0.85; }
.cursor.is-away .cursor-ring, .cursor.is-away .cursor-dot { opacity: 0; }

/* Spotlight: a soft light and a red rim follow the pointer across panels (app.js writes --mx/--my). */
.spot { position: relative; isolation: isolate; }
.spot::before, .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.spot::before { z-index: -1; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.06), transparent 60%); }
.spot::after { padding: 1px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(255 90 80 / 0.75), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* ---------- buttons and links ---------- */
.btn { position: relative; display: inline-grid; grid-auto-flow: column; place-items: center; gap: 8px; height: 48px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; font: 500 15px/1 var(--sans); cursor: pointer; transition: background-color 0.25s, border-color 0.25s, box-shadow 0.4s var(--out); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: #ff5147; box-shadow: 0 0 40px var(--red-glow); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { background: var(--panel-hover); border-color: rgb(255 255 255 / 0.36); }
.btn-text { grid-area: 1 / 1; transition: opacity 0.2s, translate 0.25s var(--out); }
.btn-text--done { opacity: 0; translate: 0 6px; }
.btn.is-done .btn-text:first-child { opacity: 0; translate: 0 -6px; }
.btn.is-done .btn-text--done { opacity: 1; translate: 0 0; }
.magnetic { transition: translate 0.5s var(--out), background-color 0.25s, border-color 0.25s, box-shadow 0.4s var(--out); }
.arrow { display: inline-block; transition: translate 0.3s var(--out); }
a:hover .arrow, button:hover .arrow { translate: 4px 0; }
.text-link { color: var(--text-2); font-size: 14px; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
.text-link:hover { color: var(--text); border-color: var(--text); }

/* ---------- header: sits inside the hero frame's title bar, becomes a glass bar once the page moves ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 60; height: calc(var(--inset) + var(--win-y) + var(--win-bar)); padding: calc(var(--inset) + var(--win-y)) calc(var(--inset) + var(--win-x) + 24px) 0; transition: height 0.45s var(--out), padding 0.45s var(--out), background-color 0.4s, border-color 0.4s, translate 0.35s var(--out); border-bottom: 1px solid transparent; }
.bar.is-solid { height: var(--bar); padding: 0 var(--pad); background: rgb(9 9 11 / 0.94); border-bottom-color: var(--line); }
.bar.is-tucked { translate: 0 -100%; }
.bar-inner { display: flex; align-items: center; gap: 28px; height: 100%; max-width: 1240px; margin-inline: auto; }
.bar:not(.is-solid) .bar-inner { max-width: none; }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border: 1px solid var(--line-strong); border-radius: 50%; }
.wordmark { font: 400 18px/1 var(--sans); letter-spacing: 0.01em; }
.bar-nav { display: flex; gap: 30px; margin-left: auto; font-size: 14px; color: var(--text-2); }
.bar-nav a, .bar-channels a { position: relative; transition: color 0.2s; }
.bar-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; scale: 0 1; transform-origin: right; transition: scale 0.4s var(--out); }
.bar-nav a:hover::after { scale: 1 1; transform-origin: left; }
.bar-nav a:hover, .bar-channels a:hover { color: var(--text); }
.bar-channels { display: flex; gap: 22px; font-size: 14px; color: var(--text-2); }
.asterisk { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; transition: rotate 0.8s var(--out); }
.bar:hover .asterisk { rotate: 90deg; }

/* ---------- hero: a dark picture with a thin-lined window set inside it; the lit form behind reeded glass
   (glass.js) fills the whole picture, so it runs past the window's lines as in the reference ---------- */
.hero { padding: var(--inset); }
.frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--win-bar) 1fr auto; height: calc(100svh - 2 * var(--inset)); min-height: 620px; padding: var(--win-y) var(--win-x); border-radius: 26px; overflow: hidden; background: radial-gradient(40% 60% at 70% 50%, rgb(150 20 20 / 0.45), transparent 70%), #070708; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05); animation: frame-in 1.2s var(--out) both; }
@keyframes frame-in { from { opacity: 0; scale: 0.985; } }
.window { position: absolute; inset: var(--win-y) var(--win-x); z-index: 2; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 18px; pointer-events: none; animation: window-in 1.4s var(--out) 0.15s both; }
.window::before { content: ""; position: absolute; inset: var(--win-bar) 0 auto; border-top: 1px solid rgb(255 255 255 / 0.22); }
@keyframes window-in { from { opacity: 0; inset: calc(var(--win-y) + 14px) calc(var(--win-x) + 14px); } }
.frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(7 7 8 / 0.72) 0%, rgb(7 7 8 / 0.35) 30%, rgb(7 7 8 / 0) 50%); }
.glass { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.8s var(--out) 0.2s; }
.glass.is-on { opacity: 1; }
.hero-copy { position: relative; z-index: 3; grid-row: 2; align-self: center; max-width: 720px; padding: 28px 0 28px 48px; }
.line { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line > span { display: inline-block; animation: rise 1.1s var(--out) both; animation-delay: calc(var(--i, 0) * 90ms + 250ms); }
@keyframes rise { from { transform: translateY(108%); } }
.fade { animation: fade-up 0.9s var(--out) both; animation-delay: calc(var(--i, 0) * 90ms + 250ms); }
@keyframes fade-up { from { opacity: 0; translate: 0 14px; } }
.hero-title { margin: 20px 0 22px; font: 300 clamp(56px, 6.6vw, 108px)/0.98 var(--sans); letter-spacing: -0.035em; }
.hero-title i { font-style: normal; color: var(--red); }
.hero-sub { margin: 0 0 32px; max-width: 30em; color: #b9b8bd; font-size: 16px; line-height: 1.8; text-shadow: 0 1px 14px rgb(0 0 0 / 0.9); }
.hot { text-shadow: 0 1px 10px rgb(0 0 0 / 0.9); }
.search { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 6px 0 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(14 14 16 / 0.82); color: var(--text-3); transition: border-color 0.25s, box-shadow 0.4s var(--out); }
.search:focus-within { border-color: rgb(255 255 255 / 0.4); box-shadow: 0 0 0 4px rgb(255 59 48 / 0.14); color: var(--text-2); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: 400 16px var(--sans); outline: none; }
.search input::placeholder { color: var(--text-3); }
.search input::-webkit-search-cancel-button { filter: invert(1); cursor: pointer; }
.search-go { flex: none; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font-weight: 500; font-size: 14px; cursor: pointer; }
.search-go:hover { background: #ff5147; box-shadow: 0 0 30px var(--red-glow); }
.hero-search { max-width: 540px; margin: 0 0 18px; }
.hot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; font-size: 13px; }
.hot-label { color: var(--text-3); }
.hot button { position: relative; padding: 0 0 1px; border: 0; background: none; color: var(--text-2); cursor: pointer; transition: color 0.2s; }
.hot button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; scale: 0 1; transform-origin: right; transition: scale 0.4s var(--out); }
.hot button:hover { color: var(--text); }
.hot button:hover::after { scale: 1 1; transform-origin: left; }
.hero-links { position: relative; z-index: 3; grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 1px 1px; border-top: 1px solid rgb(255 255 255 / 0.16); border-radius: 0 0 17px 17px; overflow: hidden; background: rgb(7 7 8 / 0.74); }
.hero-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 18px 28px 20px; }
.hero-links a + a { border-left: 1px solid var(--line); }
.hero-links .spot::after { border-radius: 0; }
.hl-tag { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#direct-pack .hl-tag { color: var(--red-soft); }
.hl-name { grid-column: 1; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-go { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--text-3); transition: color 0.25s, translate 0.35s var(--out); }
.hero-links a:hover .hl-go { color: var(--red); translate: 3px -3px; }

/* ---------- latest videos: cards on the inside of a slowly turning cylinder (app.js spins it; hover stops it) ---------- */
.latest { position: relative; padding: 120px 0 96px; overflow: hidden; background: var(--bg-deep); }
/* The backdrop is blurred at 160×90 and then scaled up as one layer: a soft wash for a fraction of the cost of
   blurring a full-screen image (will-change keeps it rasterised at the small size). */
.latest-bg { position: absolute; left: 50%; top: 50%; width: 160px; height: 90px; transform: translate(-50%, -50%) scale(16); will-change: transform; overflow: hidden; pointer-events: none; }
.latest-bg img { position: absolute; inset: -25%; width: 150%; height: 150%; max-width: none; object-fit: cover; filter: blur(7px) brightness(0.45) saturate(1.3); opacity: 0; transition: opacity 1.4s var(--out); }
.latest-bg img.is-on { opacity: 0.85; }
.latest::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--bg) 0%, rgb(5 5 6 / 0) 30%, rgb(5 5 6 / 0) 70%, var(--bg) 100%); }
.latest-head, .ring-stage, .latest-info { position: relative; z-index: 2; }
.latest-head { text-align: center; }
.latest-heading { margin: 14px 0 12px; font-size: clamp(38px, 4.2vw, 64px); line-height: 1.12; letter-spacing: -0.01em; }
.latest-sub { margin: 0; font-size: 14px; color: var(--text-3); }
.ring-stage { position: relative; height: var(--stage-h, 520px); margin-top: 8px; perspective: var(--lens, 600px); perspective-origin: 50% 50%; touch-action: pan-y; user-select: none; }
.ring-stage.is-dragging { cursor: grabbing; }
/* Each card carries the whole transform (push toward the camera, spin, out to the wall). If the ring itself were pushed
   past the camera, Chromium would still draw the cards but skip them when hit-testing clicks. */
.ring { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.ring-card { position: absolute; left: 0; top: 0; width: var(--w, 240px); height: var(--h, 280px); margin: calc(var(--h, 280px) / -2) 0 0 calc(var(--w, 240px) / -2); padding: 0; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 18px; overflow: hidden; background: #111; transform: translateZ(var(--depth, 500px)) rotateY(calc(var(--a) + var(--spin, 0deg))) translateZ(calc(var(--r, 760px) * -1)); backface-visibility: hidden; opacity: var(--o, 1); cursor: pointer; text-align: left; transition: border-color 0.4s; }
.ring-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; pointer-events: none; transition: scale 0.9s var(--out); }
.ring-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.78) 100%); pointer-events: none; }
.ring-caption { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: grid; gap: 4px; pointer-events: none; }
.ring-no { font-size: 11px; letter-spacing: 0.14em; color: var(--red-soft); }
.ring-title { font-size: 13px; line-height: 1.4; color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ring-card:hover, .ring-card:focus-visible, .ring-card.is-focus { border-color: rgb(255 255 255 / 0.55); }
.ring-card:hover img { scale: 1.06; }
.ring-card::before { content: ""; position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--out); }
.ring.is-hovering .ring-card:not(:hover)::before { opacity: 0.5; }
.latest-info { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-top: 36px; }
.latest-text { max-width: 760px; transition: opacity 0.35s var(--out), translate 0.35s var(--out); }
.latest-text.is-swapping { opacity: 0; translate: 0 10px; }
.latest-eyebrow { margin: 0; font-size: 12px; letter-spacing: 0.12em; color: var(--red-soft); }
.latest-name { margin: 10px 0 8px; font: 300 clamp(20px, 2vw, 30px)/1.35 var(--light); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.latest-meta { margin: 0; font-size: 13px; color: var(--text-2); }
.latest-actions { display: flex; align-items: center; gap: 22px; }

/* ---------- section heads ---------- */
.section-head { margin-bottom: 36px; }
.section-title { margin: 14px 0 10px; font-size: clamp(38px, 4.2vw, 64px); line-height: 1.12; letter-spacing: -0.01em; }
.section-sum { margin: 0; font-size: 13px; color: var(--text-3); }

/* ---------- library ---------- */
.library { padding: 140px 0 120px; }
.filter { position: sticky; top: var(--bar); z-index: 20; padding: 14px 0; background: rgb(9 9 11 / 0.96); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.filter.is-stuck { border-bottom-color: var(--line); }
.filter-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.search--filter { flex: 1 1 360px; height: 48px; padding-right: 20px; }
.chips { display: flex; gap: 8px; }
.chip { height: 34px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-2); font-size: 13px; white-space: nowrap; cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
/* Directions: a quiet tab bar. Text only, evenly spaced, the active one marked by a red underline on the bar's hairline.
   The chosen direction's subjects sit below as small pills, left-aligned with everything above. */
.topics { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 18px; border-bottom: 1px solid var(--line); }
.topic { position: relative; display: inline-flex; align-items: baseline; gap: 5px; height: 40px; padding: 0; border: 0; background: none; color: var(--text-2); font-size: 14px; white-space: nowrap; cursor: pointer; transition: color 0.2s; }
.topic::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--red); scale: 0 1; transition: scale 0.35s var(--out); }
.topic:hover { color: var(--text); }
.topic[aria-pressed="true"], .topic.is-open { color: var(--text); }
.topic[aria-pressed="true"]::after, .topic.is-open::after { scale: 1 1; }
.topic-count { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.topic[aria-pressed="true"] .topic-count, .topic.is-open .topic-count { color: var(--red-soft); }
.subtopics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; animation: fade-up 0.4s var(--out); }
.subtopics[hidden] { display: none; }
.subtopic { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-2); font-size: 13px; white-space: nowrap; cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.subtopic:hover { color: var(--text); border-color: var(--line-strong); }
.subtopic[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.subtopic[aria-pressed="true"] .topic-count { color: rgb(0 0 0 / 0.5); }
.chips--kinds .chip { height: 30px; padding: 0 12px; font-size: 12.5px; }
.video-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 0; }
.video-tag { padding: 0 8px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.05); color: var(--text-3); font-size: 11.5px; line-height: 20px; cursor: pointer; transition: color 0.2s, background-color 0.2s; }
.video-tag:hover, .video-tag[aria-pressed="true"] { color: var(--red-soft); background: rgb(255 59 48 / 0.12); }
.count { margin: 22px 0 26px; font-size: 13px; color: var(--text-3); }
.videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; transition: opacity 0.18s linear; }
.videos.is-fading { opacity: 0; }
.video { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); scroll-margin-top: calc(var(--bar) + 110px); transition: border-color 0.3s, background-color 0.3s, box-shadow 0.5s var(--out); }
.video:hover { border-color: rgb(255 255 255 / 0.14); background: var(--panel-hover); }
.video.is-new { animation: fade-in 0.5s linear both; }
@keyframes fade-in { from { opacity: 0; } }
.video.is-target { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 48px rgb(255 59 48 / 0.22); }
.video-cover { position: relative; display: block; aspect-ratio: 16 / 9; margin: 8px 8px 0; border-radius: 12px; overflow: hidden; background: #151518; }
.video-cover img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--out), filter 0.6s; }
.video:hover .video-cover img { scale: 1.05; }
.video-time { position: absolute; right: 10px; bottom: 10px; padding: 0 7px; border-radius: 6px; background: rgb(0 0 0 / 0.66); color: #fff; font-size: 12px; line-height: 20px; }
.video-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 20px; }
.video-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-3); }
.video-no { font: 400 12px var(--sans); letter-spacing: 0.14em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.video-title { margin: 0; font: 400 16px/1.55 var(--sans); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.video-title a { transition: color 0.2s; }
.video-title a:hover { color: #fff; }
.video-resources { list-style: none; margin: 2px 0 0; padding: 0; border-top: 1px solid var(--line); }
.video-resources li { border-bottom: 1px solid var(--line); }
.resource { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 6px 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); transition: color 0.2s, padding 0.35s var(--out); }
.resource:hover { color: var(--text); padding-left: 4px; }
.resource-name { min-width: 0; overflow-wrap: anywhere; }
.resource-go { color: var(--text-3); transition: color 0.25s, translate 0.35s var(--out); }
.resource:hover .resource-go { color: var(--red); translate: 3px -3px; }
.badge { flex: none; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11px; line-height: 18px; color: var(--text-2); white-space: nowrap; }
.badge--download { border-color: transparent; background: rgb(255 59 48 / 0.16); color: var(--red-soft); }
.badge--cloud-cn, .badge--cloud-global { border-color: transparent; background: rgb(255 255 255 / 0.09); color: var(--text); }
.expand { align-self: flex-start; padding: 0 0 1px; border: 0; border-bottom: 1px solid var(--line-strong); background: none; color: var(--text-2); font-size: 13px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.expand:hover { color: var(--text); border-color: var(--text); }
.video-dead { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.video-dead a { color: var(--red-soft); border-bottom: 1px solid rgb(255 122 112 / 0.4); }
.video-empty { margin: 0; font-size: 13px; color: var(--text-3); }
.empty { grid-column: 1 / -1; padding: 64px 0; border: 1px dashed var(--line-strong); border-radius: 18px; text-align: center; color: var(--text-3); }
.lib-more { margin-top: 56px; text-align: center; }

/* ---------- products: the list stays put while the pictures scroll past; the one in view lights its name ---------- */
.products { padding: 120px 0 80px; }
.showcase { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.showcase-side { position: sticky; top: calc(var(--bar) + 60px); }
.showcase-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.showcase-list li { border-bottom: 1px solid var(--line); }
.showcase-list button { display: flex; align-items: baseline; gap: 18px; width: 100%; padding: 20px 0; border: 0; background: none; text-align: left; color: var(--text-3); cursor: pointer; transition: color 0.5s var(--out); }
.showcase-list button:hover { color: var(--text-2); }
.showcase-list li.is-active button { color: var(--text); }
.sc-no { font: 400 12px var(--sans); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.showcase-list li.is-active .sc-no { color: var(--red); }
.sc-name { font: 300 clamp(26px, 2.6vw, 38px)/1.2 var(--light); transition: translate 0.6s var(--out); }
.showcase-list li.is-active .sc-name { translate: 8px 0; }
.showcase-detail { margin-top: 32px; transition: opacity 0.35s var(--out), translate 0.35s var(--out); }
.showcase-detail.is-swapping { opacity: 0; translate: 0 10px; }
.sc-tag { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.1em; color: var(--red-soft); }
.sc-text { margin: 0 0 28px; max-width: 26em; color: var(--text-2); font-size: 15.5px; line-height: 1.8; }
.showcase-media { display: grid; gap: 28vh; padding: 6vh 0 18vh; }
.sc-panel { display: block; }
.sc-frame { position: relative; display: block; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #111114; }
.sc-frame img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; translate: 0 var(--shift, 0px); transition: scale 1.2s var(--out); }
.sc-panel:hover .sc-frame img { scale: 1.16; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.gallery-grid img { min-height: 0; }
.gallery-grid img { scale: 1.08; }
.api-visual { display: grid; align-content: center; justify-items: center; background: radial-gradient(55% 55% at 50% 55%, rgb(255 59 48 / 0.45), transparent 70%), #0b0b0d; }
.api-glow { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 90 70 / 0.9), rgb(255 40 30 / 0.2) 55%, transparent 70%); filter: blur(24px); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { scale: 1.15; opacity: 0.8; } }
.api-key { position: relative; font: 200 clamp(72px, 9vw, 150px)/1 var(--sans); letter-spacing: -0.04em; }
.api-rows { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.api-rows span { padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; color: var(--text-2); background: rgb(0 0 0 / 0.3); }
.sc-caption { display: none; }
.others { margin-top: 56px; }
.other-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.other-list li { border-bottom: 1px solid var(--line); }
.other { display: grid; grid-template-columns: 280px minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 96px; transition: padding 0.5s var(--out); }
.other:hover { padding-left: 14px; }
.other strong { font: 300 28px/1.2 var(--sans); letter-spacing: -0.01em; transition: color 0.3s; }
.other > span { color: var(--text-2); font-size: 14px; }
.other .other-go { color: var(--text-3); font-size: 13px; transition: color 0.3s; }
.other:hover strong { color: #fff; }
.other:hover .other-go { color: var(--red-soft); }
.preview { position: fixed; left: 0; top: 0; z-index: 40; width: 280px; aspect-ratio: 16 / 9; border-radius: 12px; object-fit: cover; pointer-events: none; opacity: 0; scale: 0.8; rotate: var(--tilt, 0deg); translate: var(--px, -999px) var(--py, -999px); transition: opacity 0.3s var(--out), scale 0.45s var(--out); box-shadow: 0 30px 70px rgb(0 0 0 / 0.6); }
.preview.is-on { opacity: 1; scale: 1; }

/* ---------- contact + footer ---------- */
.contact { position: relative; padding: 60px 0 0; overflow: hidden; background: radial-gradient(50% 60% at 80% 55%, rgb(255 59 48 / 0.1), transparent 70%); }
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 26px 0; }
.marquee-track { display: flex; width: max-content; gap: 44px; padding-inline-end: 44px; margin: 0; font: 200 clamp(56px, 8vw, 128px)/1 var(--sans); letter-spacing: -0.03em; white-space: nowrap; will-change: translate; }
.marquee-track span:nth-child(4n + 3) { font-family: var(--display); font-weight: 300; }
.marquee-track i { font-style: normal; color: var(--red); font-size: 0.6em; align-self: center; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; margin-top: 110px; }
.contact-text { margin: 0 0 28px; max-width: 30em; color: var(--text-2); font-size: 17px; }
.services { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.services li { padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13.5px; color: var(--text-2); }
.contact-card { display: grid; gap: 14px; justify-items: start; padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.contact-label { margin: 0; font-size: 12px; letter-spacing: 0.14em; color: var(--text-3); }
.contact-id { font: 300 clamp(34px, 3.4vw, 50px)/1 var(--sans); letter-spacing: -0.01em; user-select: all; }
.contact-note { margin: 0; font-size: 13px; color: var(--text-3); }
.contact-note a { color: var(--text-2); border-bottom: 1px solid var(--line-strong); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 96px auto 0; }
.stats div { display: flex; flex-direction: column-reverse; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.stats dt { font-size: 13px; color: var(--text-3); }
.stats dd { margin: 0; font: 200 clamp(44px, 4.6vw, 72px)/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stats small { margin-left: 4px; font-size: 0.4em; letter-spacing: 0; color: var(--text-2); }
.footer { margin-top: 110px; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 26px; padding-bottom: 26px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.footer-row p { margin: 0; }
.footer-row a:hover { color: var(--text); }
.footer-mark { margin: 0; padding: 0 var(--inset); font: 200 21vw/0.78 var(--sans); letter-spacing: -0.055em; text-align: center; white-space: nowrap; color: transparent; background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.02) 85%); -webkit-background-clip: text; background-clip: text; translate: 0 12%; user-select: none; }

/* ---------- scroll reveals: headings, text and cards fade up once ---------- */
.motion .reveal { opacity: 0; translate: 0 28px; transition: opacity 1s var(--out), translate 1s var(--out); transition-delay: calc(var(--d, 0) * 90ms); }
.motion .reveal.is-in { opacity: 1; translate: 0 0; }

/* ---------- tablets ---------- */
@media (max-width: 1024px) {
  :root { --pad: 32px; }
  .bar-nav { gap: 22px; }
  .hero-copy { padding-left: 36px; max-width: 620px; }
  .hero-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-links a:nth-child(odd of :not([hidden])) { border-left: 0; }
  .hero-links a:nth-child(n + 3 of :not([hidden])) { border-top: 1px solid var(--line); }
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase { grid-template-columns: 1fr; }
  .showcase-side { display: none; }
  .showcase-media { gap: 48px; padding: 0; }
  .sc-caption { display: grid; gap: 6px; margin-top: 18px; }
  .sc-caption strong { font: 300 28px/1.2 var(--light); }
  .sc-caption span:not(.sc-no) { color: var(--text-2); font-size: 15px; }
  .sc-caption em { font-style: normal; color: var(--red-soft); font-size: 14px; }
  .sc-caption .sc-no { color: var(--red); }
  .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  :root { --inset: 8px; --pad: 20px; --bar: 56px; --win-x: 8px; --win-y: 8px; --win-bar: 50px; }
  body { font-size: 15px; }
  .bar { height: calc(var(--inset) + var(--win-y) + var(--win-bar)); padding: calc(var(--inset) + var(--win-y)) calc(var(--inset) + var(--win-x) + 14px) 0; }
  .bar.is-solid { height: var(--bar); padding: 0 var(--pad); }
  .bar-inner { gap: 16px; }
  .dots, .bar-nav { display: none; }
  .bar-channels { margin-left: auto; gap: 16px; font-size: 13px; }
  .wordmark { font-size: 17px; }
  .frame { height: auto; min-height: calc(100svh - 2 * var(--inset)); border-radius: 20px; }
  .window { border-radius: 14px; }
  .hero-links { border-radius: 0 0 13px 13px; }
  .frame::after { background: linear-gradient(180deg, rgb(7 7 8 / 0.6) 0%, rgb(7 7 8 / 0.25) 55%, rgb(7 7 8 / 0) 100%); }
  .hero-copy { padding: 32px 16px 36px; }
  .hero-title { font-size: clamp(38px, 12.4vw, 60px); margin: 16px 0; }
  .hero-sub { font-size: 15px; margin-bottom: 26px; }
  .search { height: 52px; padding-left: 16px; }
  .search svg { display: none; }
  .search-go { height: 42px; padding: 0 18px; }
  .hot { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; margin-inline: -20px; padding-inline: 20px; }
  .hot::-webkit-scrollbar { display: none; }
  .hero-links a { padding: 14px 16px 16px; }
  .hl-name { font-size: 14px; white-space: normal; text-overflow: clip; }
  .latest { padding: 88px 0 72px; }
  .latest-sub { font-size: 13px; padding-inline: 12px; }
  .ring-stage { margin-top: 20px; }
  .latest-info { margin-top: 24px; }
  .latest-actions { gap: 16px; }
  .library { padding: 96px 0 80px; }
  /* Sticks under the bar; while it is pinned the bar tucks away (app.js) and it slides up to the very top. */
  .filter { top: 0; padding: 10px 0; }
  .bar:not(.is-tucked) ~ main .filter { top: var(--bar); }
  .search--filter { flex-basis: 100%; height: 44px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); }
  .topics { flex-wrap: nowrap; gap: 0 22px; overflow-x: auto; scrollbar-width: none; margin: 10px calc(-1 * var(--pad)) 0; padding-inline: var(--pad); }
  .subtopics { margin-top: 12px; }
  .topics::-webkit-scrollbar { display: none; }
  .subtopics { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); }
  .subtopics::-webkit-scrollbar { display: none; }
  .video-tags { grid-area: tags; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { height: 32px; padding: 0 13px; }
  .count { margin: 14px 0 6px; }
  /* A row per video on phones: cover left, title right, links underneath, about three videos per screen. */
  .videos { grid-template-columns: 1fr; gap: 0; }
  .video { display: grid; grid-template-columns: 124px minmax(0, 1fr); grid-template-areas: "cover top" "cover title" "tags tags" "list list" "more more" "dead dead"; column-gap: 12px; row-gap: 6px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; scroll-margin-top: 110px; }
  .video:hover { background: none; }
  .video.is-target { box-shadow: none; border-bottom-color: var(--red); }
  .video-body { display: contents; }
  .video-cover { grid-area: cover; align-self: start; margin: 0; border-radius: 8px; }
  .video-time { right: 4px; bottom: 4px; font-size: 11px; line-height: 17px; }
  .video-top { grid-area: top; }
  .video-title { grid-area: title; align-self: start; font-size: 14.5px; line-height: 1.45; }
  .video-resources { grid-area: list; margin-top: 6px; }
  .expand { grid-area: more; justify-self: start; }
  .video-dead, .video-empty { grid-area: dead; }
  .spot::before, .spot::after { display: none; }
  .products { padding: 96px 0 64px; }
  .sc-frame { border-radius: 16px; }
  .other { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; min-height: 0; }
  .other:hover { padding-left: 0; }
  .marquee { padding: 18px 0; }
  .contact-grid { margin-top: 64px; gap: 36px; }
  .contact-card { padding: 24px; }
  .stats { margin-top: 64px; }
  .footer { margin-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .glass { opacity: 1; }
}