/* Kaleido — "Liquid Glass" iOS shell. System font, iOS system colours, one tint. */
:root {
  --tint: #0a84ff; --tint-ink: #fff;
  --bg: #000; --bg-2: #0b0b0d; --surface: #1c1c1e; --surface-2: #2c2c2e; --surface-3: #3a3a3c;
  --fill: rgba(120,120,128,.24); --fill-2: rgba(120,120,128,.16);
  --label: #fff; --label-2: rgba(235,235,245,.62); --label-3: rgba(235,235,245,.32);
  --sep: rgba(84,84,88,.55);
  --glass: rgba(28,28,30,.62); --glass-line: rgba(255,255,255,.10); --glass-hi: rgba(255,255,255,.14);
  --red: #ff453a; --green: #30d158; --orange: #ff9f0a; --pink: #ff375f; --purple: #bf5af2;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 50px -14px rgba(0,0,0,.7);
  --r-card: 22px; --r-ctl: 12px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --pad: 16px;
  --ease: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.36,.64,1);
  --t-fast: 160ms; --t: 260ms; --t-slow: 460ms;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "New York", ui-serif, "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --tabbar-h: 64px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f2f2f7; --bg-2: #fff; --surface: #fff; --surface-2: #f2f2f7; --surface-3: #e5e5ea;
  --fill: rgba(120,120,128,.14); --fill-2: rgba(120,120,128,.09);
  --label: #000; --label-2: rgba(60,60,67,.62); --label-3: rgba(60,60,67,.3);
  --sep: rgba(60,60,67,.22);
  --glass: rgba(250,250,252,.72); --glass-line: rgba(0,0,0,.07); --glass-hi: rgba(255,255,255,.9);
  --red: #ff3b30; --green: #34c759; --orange: #ff9500; --pink: #ff2d55; --purple: #af52de;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 40px -16px rgba(0,0,0,.22);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--label); font-family: var(--font); font-size: 17px; line-height: 1.35; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { overflow: hidden; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
input, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
a { color: var(--tint); text-decoration: none; }
svg.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
svg.i.f { fill: currentColor; stroke: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 70%, transparent); outline-offset: 2px; border-radius: 8px; }
.press { transition: transform var(--t-fast) var(--ease), opacity var(--t-fast); }
.press:active { transform: scale(.965); opacity: .86; }

/* ---------- app shell ---------- */
#app { position: fixed; inset: 0; display: flex; }
#stack { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.view { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; will-change: transform; }
.view[hidden] { display: none; }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding-bottom: calc(var(--tabbar-h) + var(--sab) + 96px); }
.view.push-in { animation: pushIn var(--t-slow) var(--ease) both; }
.view.push-under { animation: pushUnder var(--t-slow) var(--ease) both; }
.view.pop-out { animation: popOut 340ms var(--ease) both; }
.view.pop-over { animation: popOver 340ms var(--ease) both; }
@keyframes pushIn { from { transform: translateX(100%); box-shadow: -20px 0 40px rgba(0,0,0,.0); } to { transform: none; box-shadow: -20px 0 40px rgba(0,0,0,.25); } }
@keyframes pushUnder { to { transform: translateX(-28%); filter: brightness(.75); } }
@keyframes popOut { from { transform: var(--from, none); } to { transform: translateX(100%); } }
@keyframes popOver { from { transform: translateX(-28%); filter: brightness(.75); } to { transform: none; filter: none; } }
.view.tab-in { animation: tabIn 280ms var(--ease) both; }
@keyframes tabIn { from { opacity: 0; transform: translateY(6px) scale(.995); } }

/* nav bar */
.navbar { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: var(--sat) calc(8px + var(--sar)) 0 calc(8px + var(--sal)); height: calc(52px + var(--sat)); display: flex; align-items: center; gap: 4px; pointer-events: none; }
.navbar::before { content: ""; position: absolute; inset: 0; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: .5px solid var(--sep); opacity: 0; transition: opacity var(--t) var(--ease); }
.navbar.solid::before { opacity: 1; }
.navbar > * { position: relative; pointer-events: auto; }
.navbar .nt { position: absolute; left: 50%; transform: translateX(-50%) translateY(4px); font-weight: 600; font-size: 17px; max-width: 58%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); pointer-events: none; }
.navbar.solid .nt { opacity: 1; transform: translateX(-50%); }
.navbar .sp { flex: 1; }
.nb { height: 40px; min-width: 40px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--tint); font-size: 17px; }
.nb.glass { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 0 0 .5px var(--glass-line), inset 0 1px 0 var(--glass-hi); color: var(--label); }
.nb.back { padding-left: 4px; }
.nb.back svg { width: 26px; height: 26px; stroke-width: 2.4; }
.nb:active { opacity: .5; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--tint) 75%, #fff), var(--tint)); box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--tint) 60%, transparent); }

/* large title */
.lt { padding: calc(var(--sat) + 52px) calc(var(--pad) + var(--sar)) 6px calc(var(--pad) + var(--sal)); }
.lt .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--label-2); margin-bottom: 2px; }
.lt h1 { margin: 0; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .012em; }
.lt-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wrap { padding-left: calc(var(--pad) + var(--sal)); padding-right: calc(var(--pad) + var(--sar)); }

/* ---------- tab bar (floating glass capsule) ---------- */
.tabbar { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(10px + var(--sab)); height: var(--tabbar-h); width: min(calc(100% - 28px), 420px); border-radius: 999px; display: flex; align-items: center; padding: 6px; gap: 2px;
  background: var(--glass); -webkit-backdrop-filter: saturate(190%) blur(26px); backdrop-filter: saturate(190%) blur(26px);
  box-shadow: inset 0 0 0 .5px var(--glass-line), inset 0 1px 0 var(--glass-hi), 0 12px 40px -10px rgba(0,0,0,.45); transition: transform var(--t-slow) var(--ease), opacity var(--t); }
.tabbar.hide { transform: translateX(-50%) translateY(140%); opacity: 0; }
.tab { position: relative; flex: 1; height: 100%; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--label-2); font-size: 10.5px; font-weight: 600; letter-spacing: .01em; transition: color var(--t-fast); z-index: 1; }
.tab svg { width: 25px; height: 25px; }
.tab.on { color: var(--tint); }
.tab-pill { position: absolute; top: 6px; bottom: 6px; left: 6px; border-radius: 999px; background: var(--fill); transition: transform 420ms var(--ease-spring), width 420ms var(--ease-spring); z-index: 0; }

/* sidebar (iPad / desktop) */
.sidebar { display: none; }
@media (min-width: 900px) {
  .sidebar { display: flex; flex-direction: column; width: 290px; flex: none; background: var(--bg-2); border-right: .5px solid var(--sep); padding: calc(var(--sat) + 18px) 12px calc(var(--sab) + 12px); overflow-y: auto; }
  :root[data-theme="light"] .sidebar { background: #fbfbfd; }
  .tabbar { display: none; }
  .scroll { padding-bottom: 120px; }
  .lt, .wrap { padding-left: 40px; padding-right: 40px; }
  .navbar { padding-left: 24px; padding-right: 24px; }
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.sb-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 10px; color: var(--label); font-size: 15px; font-weight: 500; width: 100%; text-align: left; }
.sb-item svg { width: 21px; height: 21px; color: var(--tint); }
.sb-item:hover { background: var(--fill-2); }
.sb-item.on { background: var(--tint); color: var(--tint-ink); }
.sb-item.on svg { color: currentColor; }
.sb-h { font-size: 13px; font-weight: 600; color: var(--label-2); padding: 18px 10px 6px; display: flex; justify-content: space-between; align-items: center; }
.sb-feed img, .sb-feed .fi { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: none; }
.sb-feed span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-foot { margin-top: auto; padding-top: 14px; }

/* ---------- controls ---------- */
.seg { display: flex; padding: 2px; background: var(--fill); border-radius: 10px; position: relative; }
.seg button { flex: 1; height: 30px; border-radius: 8px; font-size: 13px; font-weight: 600; position: relative; z-index: 1; color: var(--label); transition: color var(--t-fast); white-space: nowrap; padding: 0 10px; }
.seg .thumb { position: absolute; top: 2px; bottom: 2px; border-radius: 8px; background: var(--surface-3); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); transition: transform 380ms var(--ease-spring), width 380ms var(--ease-spring); }
:root[data-theme="light"] .seg .thumb { background: #fff; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px calc(var(--pad) + var(--sar)) 14px calc(var(--pad) + var(--sal)); scroll-padding: 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; background: var(--fill); color: var(--label); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease); }
.chip svg { width: 17px; height: 17px; }
.chip.on { background: var(--label); color: var(--bg); }
.chip:active { transform: scale(.95); }
@media (min-width: 900px) { .chips { padding-left: 40px; padding-right: 40px; } }
.btn { height: 50px; border-radius: 14px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 17px; background: var(--tint); color: var(--tint-ink); transition: transform var(--t-fast) var(--ease), opacity var(--t-fast), filter var(--t-fast); }
.btn:active { transform: scale(.97); filter: brightness(.9); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.block { width: 100%; }
.btn.tinted { background: color-mix(in srgb, var(--tint) 18%, transparent); color: var(--tint); }
.btn.gray { background: var(--fill); color: var(--label); }
.btn.sm { height: 34px; border-radius: 999px; font-size: 15px; padding: 0 14px; }
.btn.danger { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.pill-add { height: 30px; min-width: 64px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 700; background: var(--fill); color: var(--tint); display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: all var(--t) var(--ease); }
.pill-add.on { background: var(--tint); color: var(--tint-ink); }
.pill-add svg { width: 16px; height: 16px; stroke-width: 2.6; }
.field { width: 100%; height: 50px; border-radius: 12px; border: 0; background: var(--fill); padding: 0 16px; font-size: 17px; outline: none; transition: box-shadow var(--t-fast); }
.field:focus { box-shadow: 0 0 0 2px var(--tint); }
.search { display: flex; align-items: center; gap: 6px; height: 38px; border-radius: 12px; background: var(--fill); padding: 0 10px; color: var(--label-2); }
.search input { flex: 1; border: 0; background: none; outline: none; height: 100%; font-size: 17px; color: var(--label); min-width: 0; }
.search svg { width: 18px; height: 18px; }

/* iOS switch */
.sw { position: relative; width: 51px; height: 31px; flex: none; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--fill); transition: background var(--t) var(--ease); }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); transition: transform var(--t) var(--ease-spring); }
.sw input:checked + i { background: var(--green); }
.sw input:checked + i::after { transform: translateX(20px); }

/* grouped list (Settings style) */
.group { background: var(--surface); border-radius: 12px; overflow: hidden; margin: 0 0 26px; }
.group-h { font-size: 13px; color: var(--label-2); text-transform: uppercase; letter-spacing: .02em; padding: 0 16px 7px; }
.group-f { font-size: 13px; color: var(--label-2); padding: 0 16px; margin: -18px 0 26px; }
.row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; width: 100%; text-align: left; background: var(--surface); transition: background var(--t-fast); }
.row + .row::before, .swipe + .swipe .row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset, 16px); border-top: .5px solid var(--sep); }
button.row:active, .row.tap:active { background: var(--surface-3); }
.row .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.row .ic svg { width: 19px; height: 19px; }
.row .tx { flex: 1; min-width: 0; }
.row .t1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t2 { font-size: 13px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.row .val { color: var(--label-2); font-size: 17px; }
.row .chev { color: var(--label-3); width: 14px; height: 14px; stroke-width: 3; }
.row .art { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; background: var(--fill); }
.feedrow { --inset: 76px; }
.swipe { position: relative; overflow: hidden; }
.swipe .acts { position: absolute; inset: 0 0 0 auto; display: flex; }
.swipe .acts button { width: 84px; background: var(--red); color: #fff; font-weight: 600; font-size: 15px; display: grid; place-items: center; }
.swipe .row { transition: transform var(--t) var(--ease); z-index: 1; }

/* ---------- home grid & cards ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; grid-auto-flow: row dense; padding: 4px calc(var(--pad) + var(--sar)) 0 calc(var(--pad) + var(--sal)); }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; padding: 4px 40px 0; } }
.card { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; text-align: left; display: block; width: 100%; isolation: isolate; transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); content-visibility: auto; contain-intrinsic-size: 260px; }
.card:active { transform: scale(.975); }
@media (hover: hover) { .card:hover { transform: translateY(-2px); box-shadow: var(--shadow), 0 24px 50px -20px rgba(0,0,0,.45); } }
.card .ph { position: relative; background: var(--surface-2); overflow: hidden; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--ease), transform 900ms var(--ease); transform: scale(1.04); }
.card .ph img.ok { opacity: 1; transform: none; }
.card .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.05) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; z-index: -1; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.card .meta { padding: 11px 13px 13px; }
.src { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--label-2); min-width: 0; }
.src img, .src .fi { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; flex: none; }
.src span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src time { margin-left: auto; font-weight: 500; flex: none; color: var(--label-3); }
.card h3 { margin: 5px 0 0; font-size: 16px; line-height: 1.25; font-weight: 650; letter-spacing: -.005em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.card p { margin: 5px 0 0; font-size: 14px; color: var(--label-2); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fi { display: grid; place-items: center; background: var(--tint); color: #fff; font-size: 10px; font-weight: 700; }

.c-hero { grid-column: 1 / -1; aspect-ratio: 4 / 4.6; max-height: 72vh; color: #fff; background: #111; }
.c-hero .ph { position: absolute; inset: 0; }
.c-hero .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 26%, transparent 46%, rgba(0,0,0,.82) 100%); }
.c-hero .top { position: absolute; top: 16px; left: 18px; right: 18px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .9; display: flex; justify-content: space-between; }
.c-hero .bot { position: absolute; left: 18px; right: 18px; bottom: 18px; }
.c-hero h2 { margin: 0; font-size: clamp(26px, 6.6vw, 40px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.c-hero .src { color: rgba(255,255,255,.85); margin-top: 10px; }
.c-hero .src time { color: rgba(255,255,255,.6); }
.c-hero .kind { display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 900px) { .c-hero { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 520px; } .c-hero h2 { font-size: 34px; } }
@media (min-width: 1300px) { .c-hero { grid-column: span 3; } }

.c-video { grid-column: 1 / -1; }
.c-video .ph { aspect-ratio: 16 / 9; }
.c-video .play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(30,30,30,.45); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25); transition: transform var(--t) var(--ease-spring); }
.c-video .play svg { width: 24px; height: 24px; margin-left: 3px; }
.card:hover .play { transform: scale(1.08); }
.dur { position: absolute; right: 9px; bottom: 9px; padding: 3px 7px; border-radius: 7px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.badge { position: absolute; left: 9px; top: 9px; padding: 3px 8px 3px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: inline-flex; gap: 4px; align-items: center; letter-spacing: .02em; text-transform: uppercase; }
.badge svg { width: 13px; height: 13px; }
@media (min-width: 900px) { .c-video { grid-column: span 2; } }

.c-image .ph { aspect-ratio: 1; }
.c-image.tall { grid-row: span 2; }
.c-image.tall .ph { aspect-ratio: auto; height: 100%; position: absolute; inset: 0; }
.c-image .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 11px 10px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.c-image .count { position: absolute; top: 9px; right: 9px; }
.c-image .count.dur { bottom: auto; }

.c-audio { grid-column: 1 / -1; display: flex; gap: 13px; padding: 12px; align-items: center; }
.c-audio .art { position: relative; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; flex: none; background: var(--surface-2); box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }
.c-audio .art img { width: 100%; height: 100%; object-fit: cover; }
.c-audio .tx { flex: 1; min-width: 0; }
.c-audio h3 { -webkit-line-clamp: 2; margin-top: 3px; }
.c-audio .row2 { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pp { height: 30px; padding: 0 12px 0 9px; border-radius: 999px; background: var(--fill); color: var(--tint); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.pp svg { width: 14px; height: 14px; }
.pp .bar { width: 34px; height: 4px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.pp .bar i { display: block; height: 100%; background: var(--tint); }
.pp.on { background: var(--tint); color: var(--tint-ink); }
@media (min-width: 900px) { .c-audio { grid-column: span 2; } }

.c-article.wide { grid-column: 1 / -1; display: flex; flex-direction: row-reverse; align-items: stretch; }
.c-article.wide .ph { width: 38%; flex: none; min-height: 128px; }
.c-article.wide .meta { flex: 1; min-width: 0; }
.c-article .ph { aspect-ratio: 4 / 3; }
.c-article.wide .ph { aspect-ratio: auto; }
.c-article.text { background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 16%, var(--surface)), var(--surface) 70%); }
.c-article.text h3 { font-size: 19px; -webkit-line-clamp: 5; font-family: var(--serif); font-weight: 700; }
.c-article.text p { -webkit-line-clamp: 4; }
@media (min-width: 900px) { .c-article.wide { grid-column: span 2; } }

.deal { animation: deal 620ms var(--ease) both; animation-delay: calc(var(--i, 0) * 34ms); }
@keyframes deal { from { opacity: 0; transform: translateY(26px) scale(.96) rotate(var(--rot, 0deg)); } }

.empty { text-align: center; padding: 48px 28px; color: var(--label-2); }
.empty .big { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 24px; display: grid; place-items: center; background: color-mix(in srgb, var(--tint) 16%, transparent); color: var(--tint); }
.empty .big svg { width: 40px; height: 40px; }
.empty h2 { color: var(--label); font-size: 22px; margin: 0 0 6px; }
.empty p { margin: 0 auto 20px; max-width: 320px; font-size: 15px; }

.skel { border-radius: var(--r-card); background: var(--surface); position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--label) 6%, transparent) 50%, transparent 80%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }

/* shuffle FAB */
.shuffle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--tint-ink); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--tint) 80%, transparent); transition: transform 600ms var(--ease-spring); }
.shuffle svg { width: 22px; height: 22px; stroke-width: 2.2; }
.shuffle.spin { transform: rotate(360deg) scale(1.08); }

/* pull to refresh */
.ptr { height: 0; display: flex; justify-content: center; align-items: flex-end; overflow: visible; position: relative; z-index: 2; }
.ptr .spinner { position: absolute; top: calc(var(--sat) + 60px); opacity: 0; transform: scale(.6); transition: opacity var(--t-fast); }
.spinner { width: 26px; height: 26px; position: relative; }
.spinner i { position: absolute; left: 11.5px; top: 1px; width: 3px; height: 7px; border-radius: 2px; background: var(--label-2); transform-origin: 1.5px 12px; }
.spinner.run i { animation: spokes .9s linear infinite; }
@keyframes spokes { from { opacity: 1; } to { opacity: .18; } }

/* ---------- reader ---------- */
.reader { max-width: 720px; margin: 0 auto; }
.reader .hero { width: 100%; max-height: 62vh; object-fit: cover; border-radius: 0; background: var(--surface); cursor: zoom-in; }
.reader .head { padding: 22px calc(var(--pad) + var(--sar)) 4px calc(var(--pad) + var(--sal)); }
.reader .head .src { font-size: 14px; }
.reader h1 { font-family: var(--serif); font-size: clamp(28px, 7vw, 38px); line-height: 1.12; margin: 12px 0 10px; letter-spacing: -.01em; text-wrap: balance; }
.reader .by { font-size: 14px; color: var(--label-2); }
.reader .body { padding: 6px calc(var(--pad) + var(--sar)) 28px calc(var(--pad) + var(--sal)); font-family: var(--serif); font-size: calc(19px * var(--ts, 1)); line-height: 1.6; overflow-wrap: anywhere; }
.reader .body p { margin: 0 0 1em; }
.reader .body img, .reader .body video { max-width: 100%; height: auto; border-radius: 14px; margin: 18px auto; cursor: zoom-in; background: var(--surface); }
.reader .body figure { margin: 18px 0; }
.reader .body figcaption { font-family: var(--font); font-size: 13px; color: var(--label-2); margin-top: -8px; }
.reader .body h2, .reader .body h3, .reader .body h4 { font-family: var(--font); line-height: 1.25; margin: 1.4em 0 .5em; }
.reader .body blockquote { margin: 1.2em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--tint); color: var(--label-2); font-style: italic; }
.reader .body pre { font-family: var(--mono); font-size: 14px; background: var(--surface); padding: 14px; border-radius: 12px; overflow-x: auto; }
.reader .body code { font-family: var(--mono); font-size: .86em; background: var(--fill); padding: 1px 5px; border-radius: 5px; }
.reader .body pre code { background: none; padding: 0; }
.reader .body a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tint) 45%, transparent); text-underline-offset: 3px; }
.reader .body iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 14px; }
.reader .body table { width: 100%; border-collapse: collapse; font-family: var(--font); font-size: 15px; display: block; overflow-x: auto; }
.reader .body td, .reader .body th { border-bottom: .5px solid var(--sep); padding: 8px; text-align: left; }
.reader .body hr { border: 0; border-top: .5px solid var(--sep); margin: 2em 0; }
.reader .foot { padding: 0 calc(var(--pad) + var(--sar)) 40px calc(var(--pad) + var(--sal)); display: flex; gap: 10px; flex-wrap: wrap; }
.reader .ep { margin: 14px calc(var(--pad) + var(--sar)) 6px calc(var(--pad) + var(--sal)); display: flex; gap: 12px; align-items: center; }
.reader .ep img { width: 110px; height: 110px; border-radius: 16px; object-fit: cover; box-shadow: var(--shadow); }
.reader .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 10px 0; }
.reader .gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 0; margin: 0; cursor: zoom-in; }

/* feed page header */
.fhead { display: flex; gap: 16px; align-items: center; padding: calc(var(--sat) + 60px) calc(var(--pad) + var(--sar)) 10px calc(var(--pad) + var(--sal)); }
.fhead .art { width: 104px; height: 104px; border-radius: 22px; object-fit: cover; background: var(--surface); box-shadow: var(--shadow); flex: none; }
.fhead h1 { margin: 0; font-size: 26px; line-height: 1.12; letter-spacing: -.01em; }
.fhead p { margin: 6px 0 0; color: var(--label-2); font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.fhead-acts { display: flex; gap: 10px; padding: 6px calc(var(--pad) + var(--sar)) 14px calc(var(--pad) + var(--sal)); }
.fhead-acts .btn { flex: 1; height: 44px; font-size: 16px; border-radius: 12px; }
@media (min-width: 900px) { .fhead, .fhead-acts { padding-left: 40px; padding-right: 40px; } .fhead .art { width: 140px; height: 140px; border-radius: 28px; } .fhead h1 { font-size: 34px; } .fhead-acts { max-width: 520px; } }

/* discover */
.cat { margin-bottom: 26px; }
.cat-h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 calc(var(--pad) + var(--sar)) 10px calc(var(--pad) + var(--sal)); }
.cat-h h2 { margin: 0; font-size: 22px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.cat-h h2 i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.shelf { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 330px); grid-template-rows: repeat(3, auto); gap: 0 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 calc(var(--pad) + var(--sar)) 0 calc(var(--pad) + var(--sal)); scroll-padding: 0 16px; }
.shelf::-webkit-scrollbar { display: none; }
.sitem { scroll-snap-align: start; display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: .5px solid var(--sep); min-width: 0; }
.sitem .sart { width: 54px; height: 54px; border-radius: 13px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, #fff 0%), color-mix(in srgb, var(--c) 60%, #000)); overflow: hidden; }
.sitem .sart img { width: 100%; height: 100%; object-fit: cover; }
.sitem .tx { flex: 1; min-width: 0; }
.sitem .t1 { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitem .t2 { font-size: 13px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .cat-h, .shelf { padding-left: 40px; padding-right: 40px; } .shelf { grid-auto-columns: 320px; } }

/* ---------- sheets & overlays ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.4); opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.scrim.on { opacity: 1; }
.sheet { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: calc(100dvh - var(--sat) - 10px); background: var(--bg-2); border-radius: 14px 14px 0 0; transform: translateY(105%); transition: transform 520ms var(--ease); display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,.3); padding-bottom: var(--sab); }
:root[data-theme="light"] .sheet { background: #f2f2f7; }
.sheet.on { transform: none; }
.sheet.full { height: calc(100dvh - var(--sat) - 10px); }
.sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: var(--label-3); margin: 6px auto 0; flex: none; }
.sheet .sh { display: flex; align-items: center; padding: 8px 8px 6px; min-height: 50px; flex: none; }
.sheet .sh h2 { flex: 1; text-align: center; margin: 0; font-size: 17px; font-weight: 600; }
.sheet .sh .nb { min-width: 70px; }
.sheet .sb { overflow-y: auto; padding: 8px 16px 24px; flex: 1; overscroll-behavior: contain; }
@media (min-width: 900px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 560px; max-height: min(760px, 86vh); border-radius: 18px; transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: transform 380ms var(--ease), opacity 260ms; }
  .sheet.on { transform: translate(-50%, -50%); opacity: 1; }
  .sheet.full { height: min(760px, 86vh); }
  .sheet .grab { display: none; }
}
.actsheet { position: fixed; z-index: 61; left: 8px; right: 8px; bottom: calc(8px + var(--sab)); transform: translateY(120%); transition: transform 460ms var(--ease); display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin: 0 auto; }
.actsheet.on { transform: none; }
.actsheet .ag { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border-radius: 14px; overflow: hidden; }
.actsheet .ah { padding: 14px 16px; text-align: center; font-size: 13px; color: var(--label-2); border-bottom: .5px solid var(--sep); display: flex; gap: 10px; align-items: center; }
.actsheet .ah img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.actsheet .ah b { display: block; color: var(--label); font-size: 14px; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.actsheet button { width: 100%; height: 57px; font-size: 19px; color: var(--tint); display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; }
.actsheet button + button { border-top: .5px solid var(--sep); }
.actsheet button:active { background: var(--fill); }
.actsheet button.red { color: var(--red); }
.actsheet button svg { width: 21px; height: 21px; }
.actsheet .cancel { background: var(--surface); border-radius: 14px; font-weight: 600; }
:root[data-theme="light"] .actsheet .cancel { background: #fff; }

.toast { position: fixed; z-index: 90; left: 50%; top: calc(var(--sat) + 10px); transform: translate(-50%, -140%); padding: 10px 18px 10px 12px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(26px); backdrop-filter: saturate(180%) blur(26px); box-shadow: inset 0 0 0 .5px var(--glass-line), 0 12px 32px -8px rgba(0,0,0,.4); font-size: 15px; font-weight: 600; display: flex; gap: 8px; align-items: center; transition: transform 520ms var(--ease-spring); max-width: calc(100% - 32px); }
.toast.on { transform: translate(-50%, 0); }
.toast svg { width: 20px; height: 20px; color: var(--tint); flex: none; }
.toast.err svg { color: var(--red); }

/* ---------- mini player ---------- */
.mini { position: fixed; z-index: 39; left: 50%; bottom: calc(10px + var(--sab) + var(--tabbar-h) + 8px); transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; width: min(calc(100% - 28px), 420px); height: 58px; border-radius: 18px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 7px;
  background: var(--glass); -webkit-backdrop-filter: saturate(190%) blur(26px); backdrop-filter: saturate(190%) blur(26px); box-shadow: inset 0 0 0 .5px var(--glass-line), inset 0 1px 0 var(--glass-hi), 0 12px 32px -10px rgba(0,0,0,.45); transition: transform var(--t-slow) var(--ease), opacity var(--t); overflow: hidden; }
.mini.on { transform: translateX(-50%); opacity: 1; pointer-events: auto; }
.mini img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; background: var(--fill); }
.mini .tx { flex: 1; min-width: 0; cursor: pointer; }
.mini .t1 { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .t2 { font-size: 12px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; }
.mini button:active { background: var(--fill); }
.mini button svg { width: 24px; height: 24px; }
.mini .prog { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; }
.mini .prog i { display: block; height: 100%; background: var(--tint); width: 0; }
@media (min-width: 900px) { .mini { left: calc(50% + 145px); bottom: 20px; width: 460px; } }

/* ---------- now playing ---------- */
.np { position: fixed; inset: 0; z-index: 70; color: #fff; background: #111; transform: translateY(100%); transition: transform 560ms var(--ease); overflow: hidden; display: flex; flex-direction: column; touch-action: pan-x; }
.np.on { transform: translateY(0); }
.np .amb { position: absolute; inset: -20%; background-size: cover; background-position: center; filter: blur(70px) saturate(1.6) brightness(.62); transform: scale(1.15); z-index: 0; transition: background-image 1s; }
.np .amb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.45)); }
.np > *:not(.amb) { position: relative; z-index: 1; }
.np .grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.4); margin: calc(var(--sat) + 10px) auto 0; flex: none; }
.np .inner { flex: 1; display: flex; flex-direction: column; justify-content: center; width: min(100%, 520px); margin: 0 auto; padding: 10px 28px calc(var(--sab) + 20px); gap: 6px; }
.np .cover { width: 100%; aspect-ratio: 1; max-height: 46dvh; max-width: 46dvh; margin: 0 auto 26px; border-radius: 14px; object-fit: cover; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); transition: transform 600ms var(--ease-spring); background: rgba(255,255,255,.08); }
.np.paused .cover { transform: scale(.82); }
.np .titles { display: flex; align-items: center; gap: 12px; }
.np .titles .tx { flex: 1; min-width: 0; }
.np h2 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.np .sub { font-size: 17px; color: rgba(255,255,255,.62); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np .circ { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; flex: none; }
.np .circ svg { width: 19px; height: 19px; }
.scrub { position: relative; height: 34px; display: flex; align-items: center; cursor: pointer; touch-action: none; margin-top: 18px; }
.scrub .track { position: relative; width: 100%; height: 7px; border-radius: 7px; background: rgba(255,255,255,.2); overflow: hidden; transition: height 200ms var(--ease); }
.scrub .buf { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.18); }
.scrub .fill { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.88); }
.scrub.drag .track { height: 12px; }
.times { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; margin-top: -2px; }
.np .ctrls { display: flex; align-items: center; justify-content: space-evenly; margin: 22px 0 18px; }
.np .ctrls button { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; transition: transform 200ms var(--ease-spring), background 200ms; }
.np .ctrls button:active { transform: scale(.86); background: rgba(255,255,255,.12); }
.np .ctrls svg { width: 40px; height: 40px; }
.np .ctrls .big svg { width: 54px; height: 54px; }
.np .bottom { display: flex; justify-content: space-between; align-items: center; }
.np .bottom button { height: 38px; min-width: 44px; padding: 0 10px; border-radius: 999px; color: rgba(255,255,255,.75); font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.np .bottom button svg { width: 22px; height: 22px; }
.np .bottom button.on { color: #fff; background: rgba(255,255,255,.18); }
.np .notes { max-height: 0; overflow: hidden; transition: max-height 500ms var(--ease); font-size: 15px; color: rgba(255,255,255,.75); line-height: 1.45; }
.np .notes.on { max-height: 40vh; overflow-y: auto; margin-top: 14px; }
@media (min-width: 900px) and (min-height: 600px) { .np .inner { padding-top: 40px; } }

/* ---------- video player ---------- */
.vp { position: fixed; inset: 0; z-index: 80; background: #000; color: #fff; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 520ms var(--ease), opacity 300ms; }
.vp.on { transform: none; }
.vp .stage { position: relative; width: 100%; background: #000; flex: none; padding-top: var(--sat); }
.vp .box { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 100dvh; }
.vp video, .vp iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.vp .ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 28%, transparent 62%, rgba(0,0,0,.7)); opacity: 1; transition: opacity 300ms var(--ease); }
.vp .ov.hide { opacity: 0; pointer-events: none; }
.vp .ov .top, .vp .ov .bot { display: flex; align-items: center; gap: 4px; padding: 8px 10px; }
.vp .ov .mid { display: flex; justify-content: center; align-items: center; gap: 46px; }
.vp .gb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(40,40,40,.4); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18); transition: transform 180ms var(--ease-spring); }
.vp .gb:active { transform: scale(.88); }
.vp .gb svg { width: 22px; height: 22px; }
.vp .gb.lg { width: 70px; height: 70px; }
.vp .gb.lg svg { width: 34px; height: 34px; }
.vp .gb.md svg { width: 28px; height: 28px; }
.vp .gb.md { width: 54px; height: 54px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.vp .ov .bot { flex-direction: column; align-items: stretch; gap: 0; padding: 0 14px 8px; }
.vp .ov .bot .scrub { margin-top: 0; height: 26px; }
.vp .ov .bot .scrub .track { height: 5px; }
.vp .ov .bot .scrub.drag .track { height: 9px; }
.vp .ov .brow { display: flex; align-items: center; gap: 6px; }
.vp .ov .brow .times { flex: 1; margin: 0; justify-content: flex-start; gap: 6px; color: rgba(255,255,255,.75); }
.vp .tb { height: 34px; min-width: 34px; padding: 0 8px; border-radius: 999px; font-size: 14px; font-weight: 700; display: grid; place-items: center; color: #fff; }
.vp .tb svg { width: 21px; height: 21px; }
.vp .info { flex: 1; overflow-y: auto; padding: 16px 18px calc(var(--sab) + 24px); background: #000; }
.vp .info h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; }
.vp .info .src { color: rgba(255,255,255,.6); font-size: 14px; }
.vp .info .src time { color: rgba(255,255,255,.4); }
.vp .info .desc { color: rgba(255,255,255,.72); font-size: 15px; margin: 12px 0 0; white-space: pre-line; line-height: 1.45; max-height: 7.2em; overflow: hidden; position: relative; cursor: pointer; }
.vp .info .desc.open { max-height: none; }
.vp .info .acts { display: flex; gap: 8px; margin: 14px 0 6px; overflow-x: auto; scrollbar-width: none; }
.vp .info .acts .btn { height: 36px; font-size: 14px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; flex: none; padding: 0 14px; }
.vp .info .acts .btn svg { width: 17px; height: 17px; }
.vp .info h3 { font-size: 17px; margin: 22px 0 10px; }
.upn { display: flex; gap: 12px; padding: 7px 0; cursor: pointer; align-items: center; width: 100%; text-align: left; color: #fff; }
.upn .th { position: relative; width: 150px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; flex: none; background: #1c1c1e; }
.upn .th img { width: 100%; height: 100%; object-fit: cover; }
.upn .tx { flex: 1; min-width: 0; }
.upn .t1 { font-size: 15px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.upn .t2 { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 3px; }
.vp .seekhint { position: absolute; top: 50%; transform: translateY(-50%); width: 92px; height: 92px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; font-weight: 700; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 300ms; }
.vp .seekhint.l { left: 10%; } .vp .seekhint.r { right: 10%; }
.vp .seekhint.on { opacity: 1; transition: none; }
.vp .spin { position: absolute; inset: 0; margin: auto; opacity: 0; transition: opacity 200ms; pointer-events: none; }
.vp .spin.on { opacity: 1; }
.vp .spin i { background: #fff; }
.vp .speedpop { position: absolute; right: 12px; bottom: 56px; background: rgba(30,30,30,.82); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-radius: 14px; overflow: hidden; display: none; min-width: 140px; }
.vp .speedpop.on { display: block; }
.vp .speedpop button { display: flex; width: 100%; padding: 11px 16px; font-size: 15px; justify-content: space-between; color: #fff; }
.vp .speedpop button + button { border-top: .5px solid rgba(255,255,255,.12); }
@media (orientation: landscape) and (max-height: 560px) {
  .vp .stage { position: absolute; inset: 0; padding: 0; }
  .vp .box { height: 100%; aspect-ratio: auto; }
  .vp .info { display: none; }
  .vp .ov .top { padding-top: max(8px, var(--sat)); padding-left: max(10px, var(--sal)); padding-right: max(10px, var(--sar)); }
  .vp .ov .bot { padding-left: max(14px, var(--sal)); padding-right: max(14px, var(--sar)); padding-bottom: max(8px, var(--sab)); }
}
@media (min-width: 900px) {
  .vp { flex-direction: row; }
  .vp .stage { flex: 1; display: flex; align-items: center; padding: 0; }
  .vp .box { max-height: 100dvh; }
  .vp .info { flex: none; width: 380px; border-left: .5px solid rgba(255,255,255,.1); padding-top: 24px; background: #0b0b0c; }
}

/* ---------- image viewer ---------- */
.iv { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,1); color: #fff; opacity: 0; transition: opacity 280ms var(--ease); touch-action: none; user-select: none; -webkit-user-select: none; }
.iv.on { opacity: 1; }
.iv .track { position: absolute; inset: 0; display: flex; will-change: transform; }
.iv .slide { position: relative; flex: none; width: 100vw; height: 100%; display: grid; place-items: center; overflow: hidden; }
.iv .slide .m { max-width: 100vw; max-height: 100dvh; object-fit: contain; transform-origin: center; will-change: transform; -webkit-user-drag: none; pointer-events: none; }
.iv .bar { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; transition: opacity 260ms; }
.iv .bar.t { top: 0; padding-top: calc(var(--sat) + 8px); background: linear-gradient(rgba(0,0,0,.5), transparent); }
.iv .bar.b { bottom: 0; padding-bottom: calc(var(--sab) + 12px); background: linear-gradient(transparent, rgba(0,0,0,.6)); flex-direction: column; align-items: stretch; }
.iv.chromeless .bar { opacity: 0; pointer-events: none; }
.iv .count { flex: 1; text-align: center; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.iv .cap { font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.35; max-height: 4.2em; overflow: hidden; }
.iv .gb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(40,40,40,.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; }
.iv .gb svg { width: 20px; height: 20px; }
.iv .thumbs { display: flex; gap: 3px; justify-content: center; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.iv .thumbs img { width: 34px; height: 46px; object-fit: cover; border-radius: 4px; opacity: .45; transition: opacity 200ms, width 260ms var(--ease); cursor: pointer; flex: none; }
.iv .thumbs img.on { opacity: 1; width: 52px; }
.iv .navb { position: absolute; top: 50%; transform: translateY(-50%); display: none; }
@media (hover: hover) and (min-width: 700px) { .iv .navb { display: grid; } .iv .navb.l { left: 16px; } .iv .navb.r { right: 16px; } }

/* ---------- auth ---------- */
.auth { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #04060b; color: #fff; overflow: hidden; padding: calc(var(--sat) + 16px) 20px calc(var(--sab) + 16px); }
.auth .river { position: absolute; inset: -10% -30%; display: flex; gap: 14px; transform: rotate(-12deg); opacity: .9; }
.auth .col { display: flex; flex-direction: column; gap: 14px; animation: drift 46s linear infinite; }
.auth .col:nth-child(2n) { animation-duration: 58s; animation-direction: reverse; }
.auth .col:nth-child(3n) { animation-duration: 40s; }
.auth .tile { width: 150px; border-radius: 22px; flex: none; position: relative; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); }
.auth .tile svg { position: absolute; left: 14px; bottom: 14px; width: 26px; height: 26px; color: rgba(255,255,255,.9); }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.auth .veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(4,6,11,.35), rgba(4,6,11,.92) 70%); }
.auth .card2 { position: relative; width: min(100%, 400px); padding: 28px 22px 22px; border-radius: 30px; background: rgba(20,22,28,.55); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12), 0 40px 80px -20px rgba(0,0,0,.8); animation: rise 800ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.auth .logo { width: 78px; height: 78px; border-radius: 19px; margin: 0 auto 14px; box-shadow: 0 16px 40px -10px rgba(10,132,255,.6); }
.auth h1 { text-align: center; margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -.02em; }
.auth .tag { text-align: center; margin: 4px 0 22px; color: rgba(255,255,255,.62); font-size: 16px; }
.auth .seg { background: rgba(255,255,255,.1); margin-bottom: 14px; }
.auth .seg button { color: #fff; }
.auth .seg .thumb { background: rgba(255,255,255,.2); }
.auth .field { background: rgba(255,255,255,.09); color: #fff; margin-bottom: 10px; }
.auth .field::placeholder { color: rgba(255,255,255,.4); }
.auth .err { color: #ff6961; font-size: 14px; min-height: 20px; margin: 2px 2px 8px; }
.auth .fine { text-align: center; font-size: 12px; color: rgba(255,255,255,.4); margin-top: 14px; }

/* onboarding chips */
.pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 22px; }
.pick button { height: 38px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--surface); display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--sep); transition: all var(--t-fast) var(--ease); }
.pick button i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); }
.pick button i svg { width: 15px; height: 15px; stroke-width: 2.6; }
.pick button.on { background: var(--tint); color: var(--tint-ink); box-shadow: none; }
.pick button.on i { background: rgba(255,255,255,.25); }
.pick-h { font-size: 20px; font-weight: 700; margin: 6px 0 2px; display: flex; gap: 8px; align-items: center; }
.pick-h i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }

.tints { display: flex; gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
.tints button { width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.0); transition: transform var(--t-fast) var(--ease-spring); position: relative; }
.tints button.on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--c); }
.tints button:active { transform: scale(.9); }

.preview-items .row .art { width: 56px; height: 56px; }
.offline { position: fixed; z-index: 95; top: calc(var(--sat) + 8px); left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--orange); color: #000; display: none; }
.offline.on { display: block; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
:root.rm *, :root.rm *::before, :root.rm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

/* reddit / animated media */
.card video.loop { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--surface-2); }
.c-image.tall video.loop { position: absolute; inset: 0; }
.c-image .badge { top: 9px; left: 9px; }
.card.nsfw .ph img, .card.nsfw .ph video { filter: blur(26px) saturate(1.2); transform: scale(1.15); }
.nsfw-tag { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .04em; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.iv .slide.vid video { max-height: calc(100dvh - var(--sat) - var(--sab) - 150px); }
.iv .slide video.m { background: #000; }
.reader .rgal { display: grid; gap: 6px; margin: 4px 0 20px; }
.reader .rgal img, .reader .rgal video { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 14px; margin: 0; background: var(--surface); cursor: zoom-in; }
.reader .rgal video { cursor: auto; }
.iv .slide.vid video { pointer-events: auto; }