/* Everside OS — restrained motion, warm materials, stable navigation. */
:root {
  --os-settle: cubic-bezier(.22, .8, .22, 1);
  --os-exit: cubic-bezier(.4, 0, 1, 1);
  --os-glass: rgba(23, 24, 28, .78);
}
body { font-optical-sizing: auto; }
.field { opacity: .38; }
#hud { transition: opacity 1.4s var(--ease, ease); } body.immersive #hud { transition-duration: 2.4s; }
body.inworld #hud { z-index: 26; }
#hud .top {
  height: 72px;
  padding-inline: 32px;
  background: linear-gradient(180deg, rgba(10,11,14,.82), rgba(10,11,14,.3) 75%, transparent);
}
#hud .scname { color: rgba(255,250,248,.58); letter-spacing: .18em; }
#hud .right { gap: 16px; }
#hud .search { height: 36px; border-radius: 10px; background: rgba(255,255,255,.035); }
#hud .right button { border-radius: 7px; }
#hud .right .av { background: linear-gradient(145deg, #36373e, #191a20); box-shadow: inset 0 1px 0 #ffffff1a; }
#hints { opacity: .65; }

/* Home keeps its two everyday actions within reach while the system strip rests. */
.os-home-actions { position: absolute; top: max(26px, env(safe-area-inset-top)); right: max(32px, env(safe-area-inset-right)); z-index: 4; display: flex; align-items: center; gap: 18px; }
.os-home-actions button, .os-home-actions a { box-sizing: border-box; width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--bone); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.os-home-actions .os-home-search img { width: 30px; height: 30px; filter: brightness(0) invert(1); }
.os-home-actions .os-home-profile { width: 48px; height: 48px; border: 2px solid var(--bone); padding: 3px; background: rgba(14,15,18,.24); }
.os-home-profile img { display: block; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.os-home-profile.has-avatar img { width: 100%; height: 100%; }
.os-home-actions button:hover, .os-home-actions a:hover { background: rgba(255,250,248,.12); }
.os-home-actions :focus-visible { outline: 2px solid var(--bone); outline-offset: 5px; }
body.strip .os-home-actions, body.shade-open .os-home-actions { visibility: hidden; pointer-events: none; }
/* idle on Home: the actions leave slowly and come back slowly, never a snap */
.os-home-actions { transition: opacity 1.4s var(--ease); }
body.immersive .os-home-actions { opacity: 0; pointer-events: none; transition-duration: 2.4s; }
/* the small menu under the picture: icons only, a hairline plate, a name only under the hand */
.os-home-menu { position: absolute; top: calc(100% + 10px); right: 0; display: flex; gap: 2px; padding: 6px; background: rgba(14, 15, 18, .94); border: 1px solid rgba(255, 250, 248, .16); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .28s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
.os-home-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--bone); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.os-home-menu.on { opacity: 1; transform: none; pointer-events: auto; }
.os-home-menu.on::before { transform: scaleX(1); }
.os-home-menu :is(a, button) { position: relative; width: 40px; height: 40px; border-radius: 4px; border: 0; padding: 0; display: grid; place-items: center; background: transparent; color: var(--bone); cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .4s cubic-bezier(.16, 1, .3, 1), background .2s ease; transition-delay: calc(var(--k, 0) * 35ms); }
.os-home-menu.on :is(a, button) { opacity: 1; transform: none; }
.os-home-menu :is(a, button) img { width: 18px; height: 18px; filter: brightness(0) invert(1); opacity: .8; }
.os-home-menu :is(a, button):hover img, .os-home-menu :is(a, button):focus-visible img { opacity: 1; }
.os-home-menu :is(a, button):hover, .os-home-menu :is(a, button):focus-visible { background: rgba(255, 250, 248, .08); }
.os-home-menu :is(a, button) i { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); white-space: nowrap; font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); opacity: 0; transition: opacity .2s ease, transform .3s ease; pointer-events: none; }
.os-home-menu :is(a, button):hover i, .os-home-menu :is(a, button):focus-visible i { opacity: 1; transform: translate(-50%, 0); }
.os-home-actions .os-home-profile[aria-expanded="true"] { border-color: var(--bone); background: rgba(255, 250, 248, .12); }
@media (prefers-reduced-motion: reduce) { .os-home-actions, .os-home-menu, .os-home-menu :is(a, button), .os-home-menu::before { transition: none; } }
.scene[data-key="home"] .copy .btns { align-items: center; }
.scene[data-key="home"] .os-watch-trailer { height: 56px; gap: 12px; padding: 0 24px; flex: none; white-space: nowrap; border: 1px solid rgba(255,255,255,.55); border-radius: 8px; background: #f7f7f5; color: var(--ink); font: 600 16px/1 var(--sans); letter-spacing: 0; box-shadow: 0 2px 8px #00000014; }
.scene[data-key="home"] .os-watch-trailer img { width: 22px; height: 22px; flex: none; }
.scene[data-key="home"] .os-watch-trailer:hover { background: #fff; }
.scene[data-key="home"] .os-watch-trailer:focus-visible { outline: 2px solid var(--bone); outline-offset: 5px; }
@media (max-width: 640px) {
  .os-home-actions { top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); gap: 10px; }
  .os-home-actions .os-home-profile { width: 44px; height: 44px; }
  .os-home-actions .os-home-search img { width: 28px; height: 28px; }
  .scene[data-key="home"] .copy .btns { flex-wrap: wrap; }
  .scene[data-key="home"] .os-watch-trailer { height: 52px; gap: 10px; padding-inline: 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .os-home-actions button, .os-home-actions a { transition: none; } }

/* Keep every scene on one canvas. Navigation never travels across unrelated pages. */
#scenes { width: 100%; transform: none !important; transition: none; }
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 12px, 0);
  transition: opacity 220ms ease, transform 360ms var(--os-settle), visibility 0s 360ms;
}
.scene.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.bg img, .scene.on .bg img { transform: none; transition: none; }
.bgv, .bgv2 { transition: opacity 700ms ease; }
.copy { gap: 17px; bottom: 16vh; max-width: min(780px, 82vw); }
.copy .title { font-size: clamp(52px, 7.2vw, 108px); line-height: 1.03; text-shadow: 0 4px 32px #0000001a; }
.copy .tag { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; }
.copy .eyebrow { letter-spacing: .17em; font-size: 10px; }
.copy .ro { font-size: 11px; color: rgba(246,233,210,.65); }
.copy .btns { margin-top: 9px; gap: 12px; }
.scrim { background: linear-gradient(90deg, rgba(9,10,13,.64), transparent 75%), linear-gradient(0deg, rgba(9,10,13,.96), rgba(9,10,13,.22) 48%, rgba(9,10,13,.16)); }

/* Equal hit areas keep the dock and its active marker still while labels change. */
#dock, .wdock {
  gap: 4px;
  padding: 7px;
  bottom: max(24px, env(safe-area-inset-bottom));
  border-radius: 18px;
  background: var(--os-glass);
  border: 1px solid rgba(255,250,248,.14);
  box-shadow: 0 16px 56px #00000055, 0 4px 12px #00000026, inset 0 1px 0 #ffffff0a;
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
#dock span, .wdock span {
  z-index: 1;
  width: 108px;
  height: 44px;
  padding: 0 8px;
  gap: 9px;
  justify-content: center;
  border-radius: 11px;
  color: rgba(255,250,248,.56);
  transition: color 150ms ease, transform 150ms var(--os-settle);
  user-select: none;
  touch-action: manipulation;
}
#dock span.on, .wdock span.on { gap: 9px; color: var(--bone); }
#dock span b, .wdock span b { max-width: none; opacity: 1; font-size: 9px; letter-spacing: .08em; transition: none; }
#dock span svg, .wdock span svg { width: 17px; height: 17px; }
#dock .rule, .wdock .wrule {
  left: 0;
  top: 7px;
  bottom: 7px;
  height: auto;
  border-radius: 11px;
  background: rgba(255,250,248,.085);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 6px #00000015;
  transition: transform 280ms var(--os-settle);
  pointer-events: none;
}
#dock .rule::after, .wdock .wrule::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 20px;
  left: calc(50% - 10px);
  bottom: 2px;
  border-radius: 1px;
  background: var(--rgb);
  opacity: .85;
}
.wdock .wrule::after { background: var(--wacc); }

.btn, .hbtn, .act, .cb {
  border-radius: 10px;
  transition: transform 150ms var(--os-settle), background 180ms ease, border-color 180ms ease, color 180ms ease;
  touch-action: manipulation;
}
.btn { height: 48px; padding-inline: 21px; }
.btn-primary { box-shadow: inset 0 1px 0 #ffffff80, 0 4px 16px #00000020; }
.btn-secondary, .hbtn { background: rgba(16,17,21,.32); border-color: rgba(246,233,210,.26); backdrop-filter: blur(12px); }
.hbtn { width: 48px; height: 48px; }
.hbtn.sm { width: 34px; height: 34px; }
.btn kbd { opacity: .45; }
.btn:active, .hbtn:active, .act:active, .cb:active, #dock span:active, .wdock span:active { transform: scale(.97); transition-duration: 80ms; }
.tile { border-radius: 12px; transition: opacity 180ms ease, filter 180ms ease, box-shadow 180ms ease; }
.tile img { transition: transform 420ms var(--os-settle); }
.tile::after { border-radius: inherit; padding: 1px; background: rgba(255,250,248,.55); transition: opacity 160ms ease; pointer-events: none; }
.tile.focus::after { opacity: .6; }
.tile .tl { left: 16px; right: 16px; bottom: 14px; gap: 6px; }
.tile .tl b { line-height: 1.35; }
.tile .tl span { line-height: 1.4; }
.spot .big .rk {
  top: 20px;
  left: 22px;
  padding: 10px 13px;
  font-size: 30px;
  letter-spacing: -.04em;
  color: var(--bone);
  background: rgba(14,15,18,.66);
  border: 1px solid #ffffff26;
  border-radius: 10px;
  text-shadow: none;
  backdrop-filter: blur(12px);
}
.queue .tile img { width: 96px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.tile.row { border-radius: 8px; }
.tile.row .rs, .tcard { border-radius: 10px; }
.col .cacts { transition: opacity 180ms ease, transform 220ms var(--os-settle); }
.col:focus-within .cacts { opacity: 1; transform: none; }
.col { flex: 1; transition: flex 560ms var(--os-settle); }
.col:hover, .col.focus { flex: 1.6; }
.col img { transition: transform 480ms var(--os-settle), filter 200ms ease; }
.col:hover img, .col.focus img { transform: scale(1.025); }
.cols:hover .col:not(:hover):not(.focus) img { filter: brightness(.82); }
.col .cc p { transition: opacity 180ms ease, transform 220ms var(--os-settle); }
.col::after { height: 2px; transition-duration: 220ms; opacity: .65; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover img, .tile.focus img { transform: scale(1.025); }
  .btn:hover, .hbtn:hover { transform: translateY(-1px); }
  .btn-primary:hover { background: #fff5e2; }
  .btn-secondary:hover, .hbtn:hover { background: rgba(255,250,248,.10); border-color: rgba(246,233,210,.5); }
  #dock span:hover, .wdock span:hover { color: var(--bone); }
}
@media (hover: none) { .tile:hover img, .tile.focus img { transform: none; } .col .cacts { opacity: 1; transform: none; } }

/* Layers retrace the same small movement when dismissed; CSS retargets on interruption. */
#worldv { transform: translate3d(0, 12px, 0) scale(.985); transition: opacity 240ms ease, transform 360ms var(--os-settle), visibility 0s 360ms; visibility: hidden; }
#worldv.on { transform: none; visibility: visible; transition-delay: 0s; }
#viewer { transform: scale(.988); visibility: hidden; transition: opacity 200ms ease, transform 300ms var(--os-settle), visibility 0s 300ms; }
#viewer.on { transform: none; visibility: visible; transition-delay: 0s; }
#viewer.on .bg img { animation: none; transform: none; }
#viewer .ctrls { border-radius: 16px; border-color: #ffffff24; background: rgba(23,24,28,.78); box-shadow: 0 10px 40px #00000040; }
#viewer .back, #viewer .vr { top: 28px; }
#viewer .vc, #viewer .back, #viewer .vr, #viewer .ctrls { transition: opacity 200ms ease, transform 220ms var(--os-settle); }
#rails, .rt { transition: transform 320ms var(--os-settle); }
.rail { opacity: .46; transition: opacity 220ms ease, transform 320ms var(--os-settle); }
.rail:not(.on) { transform: none; }
.whead { transition: transform 300ms var(--os-settle), opacity 200ms ease; }
#worldv.deep .whead { transform: translateY(-10px) scale(.86); }
#insight, #about { transition: transform 280ms var(--os-settle), visibility 0s 280ms; visibility: hidden; }
#viewer.info #insight, #about.on { visibility: visible; transition-delay: 0s; }
#line { transition: opacity 150ms ease, visibility 0s 150ms; visibility: hidden; background: rgba(7,8,11,.58); }
#line.on { visibility: visible; transition-delay: 0s; }
#line .box { border-radius: 18px; background: rgba(26,27,33,.96); transform: translateY(-6px) scale(.99); transition: transform 200ms var(--os-settle); border-color: #ffffff26; }
#line .in { padding: 22px; }
#line .r { padding: 15px 22px; }
#line .r.sel { background: #ffffff0b; }
#toast { border-radius: 12px; bottom: 104px; padding: 15px 20px; font-size: 10px; letter-spacing: .08em; background: rgba(26,27,33,.92); box-shadow: 0 8px 32px #00000040; transition: opacity 160ms ease, transform 220ms var(--os-settle); }
.dot.live { animation: none; box-shadow: 0 0 8px #2bb67344; border-radius: 50%; }
.pop svg { animation-duration: 320ms; }
.burst i { animation-duration: 600ms; width: 4px; height: 4px; }
#boot { transition-duration: 320ms; }
#boot .wm { animation: os-mark-in 700ms var(--os-settle) both; clip-path: none; }
#boot .scatter { display: none; }
#boot .line { max-width: 80vw; font-size: 10px; letter-spacing: .12em; }
@keyframes os-mark-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
:is(button, [role="button"], .tile, .col, input):focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }

/* Keyboard actions and accessibility preferences keep the same immediate feedback. */
body.keyboard-nav :is(.scene, #rails, .rt, .rail, #worldv, #viewer, #dock .rule, .wrule, #line, #line .box) { transition-duration: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  .scene, #worldv, #viewer, #line .box { transform: none !important; }
  .bgv, .bgv2, .cv, .tpv { opacity: 0 !important; }
  .burst { display: none; }
  #boot .wm { opacity: 1; clip-path: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  #dock, .wdock, #line .box, #toast, #viewer .ctrls, #insight, #about { background: #1b1c21; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #ffffff66; }
}
@media (max-width: 700px) {
  #hud .top { padding-inline: 20px; height: 64px; grid-template-columns: auto 1fr auto; gap: 12px; }
  #hud .scname { min-width: 0; font-size: 9px; letter-spacing: .1em; }
  #hud .top .wm { font-size: 17px; }
  #hud .right { gap: 8px; font-size: 9px; }
  #hud .right .clock, #hud .right .av, #hud .right .live { display: none; }
  #hud .search { width: 32px; padding: 0; justify-content: center; }
  #hud .search b { display: none; }
  #dock, .wdock { max-width: calc(100vw - 24px); padding: 6px; gap: 2px; border-radius: 17px; }
  #dock span, .wdock span { width: 72px; height: 48px; flex-direction: column; gap: 6px; padding: 4px; }
  #dock span.on, .wdock span.on { gap: 6px; }
  #dock span b, .wdock span b { font-size: 8px; }
  #dock .rule, .wdock .wrule { top: 6px; bottom: 6px; }
  #dock .rule::after, .wdock .wrule::after { bottom: 0; width: 12px; left: calc(50% - 6px); }
  .copy { left: 6vw; right: 6vw; bottom: 18vh; max-width: none; gap: 14px; }
  .copy .title { font-size: clamp(37px, 9.7vw, 64px); }
  .copy .eyebrow { font-size: 8px; line-height: 1.7; }
  .copy .tag { max-width: 300px; }
  .copy .ro { font-size: 9px; gap: 10px; }
  .copy .btns { gap: 8px; }
  .btn { padding-inline: 14px; font-size: 12px; }
  .btn kbd { display: none; }
  .cols { overflow-y: auto; display: block; padding-top: 140px; padding-bottom: 104px; }
  .col { height: 390px; margin: 0 16px 12px; border-radius: 14px; }
  .col .cc { bottom: 24px; }
  .col .cc p, .col .cacts { opacity: 1; transform: none; }
  .ohead { top: 78px; }
  .ohead .slate { display: none; }
  .ohead .eyebrow { font-size: 8px; line-height: 1.5; }
  #toast { width: max-content; max-width: calc(100vw - 32px); text-align: center; line-height: 1.6; }
}

/* Content-first discovery: one collection, on-demand context. */
.chart.discovery [hidden] { display:none !important; }
.chart.discovery { gap:24px; background:linear-gradient(155deg,rgba(31,34,40,.35),transparent 55%); }
.discovery .chead { gap:20px; }
.discovery .chead h2 { font-size:clamp(32px,3vw,46px); letter-spacing:-.04em; margin-top:12px; }
.discovery .chead .eyebrow { color:var(--bone-45); }
.discovery .pbar { gap:0; }
.discovery .pbar > .mono { display:none; }
.discovery .plats { display:flex;flex-wrap:wrap;gap:8px; }
.discovery .plats .chip { border:1px solid var(--line);border-radius:20px;padding:10px 16px;cursor:pointer; }
.discovery .plats .chip.on { color:var(--bone);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25); }
.discovery .plats .chip span { opacity:.48;margin-left:5px; }
.discovery .discovery-summary { display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--bone-45); }
.discovery .discovery-summary > :first-child { color:var(--bone-70); }
.discovery-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px; }
.chart.discovery .discovery-card { min-width:0;background:transparent;border:0;border-radius:10px;overflow:hidden;aspect-ratio:auto;transform:none; }
.chart.discovery .discovery-card::after { pointer-events:none;border-radius:10px;padding:1px; }
.discovery-card .rs { position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#1b1d22; }
.discovery-card .rs > img { display:block;width:100%;height:100%;object-fit:cover; }
.discovery-card .rs::after { content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none; }
.discovery-platform,.discovery-process { position:absolute;z-index:2;font:500 10px/1.3 var(--mono);background:rgba(13,15,19,.8);padding:5px 8px;border-radius:4px; }
.discovery-platform { top:12px;left:12px; }
.discovery-process { bottom:12px;left:12px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.discovery-play { position:absolute;z-index:2;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(15,16,20,.65);transform:translate(-50%,-45%);opacity:0;transition:opacity 160ms ease,transform 160ms ease; }
.discovery-card:hover .discovery-play,.discovery-card:focus-within .discovery-play { opacity:1;transform:translate(-50%,-50%); }
.discovery-copy { display:grid;gap:8px;padding:16px 10px 10px; }
.discovery-creator { font-size:12px;color:var(--bone-45); }
.discovery-open { background:none;border:0;padding:0;text-align:left;color:var(--bone);font:600 16px/1.45 var(--sans);letter-spacing:-.012em;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:46px; }
/* ---- the Trending card as a spatial object: still, frame, type on three planes ---- */
.discovery-grid { perspective: 1400px; }
.chart.discovery .discovery-card { position: relative; overflow: visible; transform-style: preserve-3d; transition: transform .42s var(--os-settle), filter .3s ease; will-change: transform; outline: none; }
.chart.discovery .discovery-card:hover, .chart.discovery .discovery-card:focus-within, .chart.discovery .discovery-card.sharing { transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); z-index: 3; }
.discovery-card .rs { border: 1px solid rgba(255, 250, 248, .12); border-radius: 8px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); transition: border-color .3s ease, box-shadow .42s var(--os-settle), transform .42s var(--os-settle); transform: translateZ(0); }
.discovery-card:hover .rs, .discovery-card:focus-within .rs { border-color: rgba(255, 250, 248, .34); box-shadow: 0 34px 70px -26px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 250, 248, .04); transform: translateZ(14px); }
.discovery-card .rs > img { transition: transform .9s var(--os-settle), filter .4s ease; filter: saturate(.92) brightness(.92); }
.discovery-card:hover .rs > img, .discovery-card:focus-within .rs > img { transform: scale(1.03) translate(calc((50% - var(--mx, 50%)) * .04), calc((50% - var(--my, 50%)) * .04)); filter: none; }
.discovery-card .rs::after { background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.discovery-sweep { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(70% 90% at var(--mx, 50%) var(--my, 40%), rgba(255, 250, 248, .16), rgba(255, 250, 248, 0) 62%); mix-blend-mode: screen; }
.discovery-card:hover .discovery-sweep { opacity: 1; }
.discovery-platform { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(255, 250, 248, .1); }
.discovery-platform .dot { width: 5px; height: 5px; background: var(--bone-45); border-radius: 0; }
.discovery-platform .dot.r { background: var(--r, #F04E4E); box-shadow: 0 0 6px rgba(240, 78, 78, .6); }
.discovery-platform .dot.g { background: var(--g, #2BB673); box-shadow: 0 0 6px rgba(43, 182, 115, .6); }
.discovery-platform .dot.b { background: var(--b, #2E44E6); box-shadow: 0 0 6px rgba(46, 68, 230, .7); }
.discovery-copy { position: relative; display: grid; gap: 6px; padding: 12px 2px 4px; transform: translateZ(22px); }
.discovery-creator { font: 500 9.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
.discovery-views { font-family: 'Doto', var(--mono); font-weight: 800; font-size: 22px; line-height: 1; color: var(--bone); display: flex; align-items: baseline; gap: 8px; }
.discovery-views small { font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
/* the menu materialises on the foot hairline, item by item, left to right */
.discovery-menu { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255, 250, 248, .1); }
.discovery-menu :is(button, a) { all: unset; display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 5px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-70); cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .4s var(--os-settle), color .2s ease, background .2s ease; transition-delay: calc(var(--k, 0) * 40ms); }
.discovery-card:hover .discovery-menu button, .discovery-card:focus-within .discovery-menu button, .trending-creator-card:hover .discovery-menu :is(button, a), .trending-creator-card:focus-within .discovery-menu :is(button, a), .trending-creator-card.open .discovery-menu :is(button, a) { opacity: 1; transform: none; }
.discovery-menu :is(button, a):hover, .discovery-menu :is(button, a):focus-visible, .discovery-menu button[aria-pressed="true"], .discovery-menu button[aria-expanded="true"] { color: var(--bone); background: rgba(255, 250, 248, .07); }
.discovery-menu button[aria-pressed="true"]::before { content: ''; width: 5px; height: 5px; background: var(--g, #2BB673); box-shadow: 0 0 6px rgba(43, 182, 115, .6); }
.discovery-menu kbd, .discovery-share kbd, .osmsg-x kbd { font: 500 9px/1 var(--mono); padding: 3px 4px; border: 1px solid rgba(255, 250, 248, .22); border-radius: 3px; color: var(--bone-45); }
.discovery-menu :is(button, a):hover kbd { color: var(--bone-70); border-color: rgba(255, 250, 248, .4); }
/* the share sheet: a plane over the copy, hairline above, esc to close */
.discovery-share { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: 10px; padding: 12px 12px 10px; background: rgba(14, 15, 18, .97); border: 1px solid rgba(255, 250, 248, .16); border-radius: 8px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9); transform: translateY(8px) translateZ(30px); opacity: 0; transition: opacity .25s ease, transform .4s var(--os-settle); }
.discovery-card.sharing .discovery-share { opacity: 1; transform: translateZ(30px); }
.discovery-share[hidden] { display: none; }
.discovery-share .lab { font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-45); }
.discovery-share .t { font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone); }
.discovery-share-page { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; }
.discovery-share-page .t { grid-column: 1 / -1; }
.discovery-share-page input { all: unset; min-width: 0; font: 400 13px/1.3 var(--sans); color: var(--bone); padding: 7px 0; border-bottom: 1px solid rgba(255, 250, 248, .18); }
.discovery-share-page input::placeholder { color: var(--bone-45); }
.discovery-share-page input:focus { border-color: var(--bone); }
.discovery-share-page button { all: unset; cursor: pointer; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink, #0E0F12); background: var(--bone); padding: 8px 10px; border-radius: 4px; }
.discovery-share-friend { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 2px; border-top: 1px solid rgba(255, 250, 248, .1); }
.discovery-share-friend:hover .t, .discovery-share-friend:focus-visible .t { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.discovery-share-friend .avs { display: inline-flex; gap: 4px; }
.discovery-share-friend .avs i { width: 14px; height: 14px; border: 1px solid rgba(255, 250, 248, .3); background: repeating-linear-gradient(90deg, rgba(255, 250, 248, .35) 0 2px, transparent 2px 4px); }
.discovery-share-esc { font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); justify-self: end; }
/* the Messages window: the inbox in its own frame, chrome at the edges */
#osmsg { border: 1px solid rgba(255, 250, 248, .2); border-radius: 10px; padding: 0; background: #0E0F12; color: var(--bone); width: min(92vw, 980px); height: min(86vh, 760px); box-shadow: 0 60px 120px -40px #000; }
#osmsg::backdrop { background: rgba(14, 15, 18, .78); backdrop-filter: blur(6px); }
#osmsg .osmsg-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255, 250, 248, .12); }
#osmsg .osmsg-x { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-70); }
#osmsg .osmsg-x:hover { color: var(--bone); }
#osmsg iframe { display: block; width: 100%; height: calc(100% - 45px); border: 0; background: #0E0F12; }
#discovery-empty button { color:var(--bone-70);background:transparent;border:1px solid var(--line);border-radius:6px;padding:7px 12px;font:500 12px/1.3 var(--sans);cursor:pointer; }
@media (prefers-reduced-motion: reduce) { .chart.discovery .discovery-card, .discovery-card .rs, .discovery-card .rs > img, .discovery-menu button, .discovery-share { transition: none; } .chart.discovery .discovery-card:hover, .chart.discovery .discovery-card:focus-within { transform: none; } .discovery-card:hover .rs > img { transform: none; } .discovery-sweep { display: none; } }
.discovery button:focus-visible,.discovery [role="button"]:focus-visible { outline:2px solid var(--bone);outline-offset:3px; }
#discovery-empty { padding:60px 20px;text-align:center;color:var(--bone-70); }
.search-empty { color:var(--bone-70);padding:24px;font-size:14px; }
#insight button.act { font:inherit;color:inherit;cursor:pointer; }
@media(min-width:1800px) { .discovery-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1000px) { .discovery-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px; } }
@media(max-width:600px) {
 .chart.discovery { gap:20px;padding-inline:20px; }
 .discovery .chead { align-items:center; }
 .discovery .chead .eyebrow { font-size:9px;letter-spacing:.06em; }
 .discovery #playchart { font-size:11px;padding:9px; }
 .discovery #playchart kbd { display:none; }
 .discovery .pbar { display:block; }
 .discovery .plats .chip { padding:9px 11px;font-size:10px; }
 .discovery-grid { grid-template-columns:minmax(0,1fr); }
 .discovery .discovery-summary { flex-direction:column;gap:5px; }
}
@media(prefers-reduced-motion:reduce) { .discovery-play { transition:none; } }
#insight button.ix { border:0;background:none;color:inherit;font:inherit;cursor:pointer; }

/* A cinematic top-three banner restores hierarchy above the discovery grid. */
.trending-banner { position:relative;isolation:isolate;min-height:420px;height:min(54vw,570px);border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;background:#101216; }
.trending-slide { position:absolute;inset:0;opacity:0;transition:opacity 420ms cubic-bezier(.22,1,.36,1);pointer-events:none; }
.trending-slide.active { opacity:1;pointer-events:auto;z-index:1; }
.trending-art { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%; }
.trending-shade { position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,14,.95),rgba(8,10,14,.68) 36%,rgba(8,10,14,.08) 80%),linear-gradient(0deg,rgba(8,10,14,.92),transparent 70%); }
.trending-feature-copy { position:absolute;inset:38px auto 90px 42px;width:min(65%,780px);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end; }
.trending-kicker { display:flex;align-items:center;gap:12px;margin-bottom:auto;color:rgba(255,255,255,.65);font:500 11px/1.2 var(--mono);letter-spacing:.13em; }
.trending-kicker b { color:var(--bone);font-family:'Doto',var(--mono);font-weight:800;font-size:52px;line-height:1;letter-spacing:.02em;min-width:1.3em;text-shadow:0 0 18px rgba(255,250,248,.28); }
.trending-kicker b.rise { animation:tk-rise .62s cubic-bezier(.16,1,.3,1) both; }
@keyframes tk-rise { from { opacity:0;transform:translateY(14px);filter:blur(3px); } 60% { filter:blur(0); } to { opacity:1;transform:none; } }
.tk-caret { display:inline-block;width:.46em;height:.86em;margin-left:.08em;vertical-align:-.06em;background:var(--bone);box-shadow:0 0 14px rgba(255,250,248,.55);animation:tk-blink .8s steps(1) infinite; }
@keyframes tk-blink { 50% { opacity:.15; } }
/* the page bar counts the wait to the next slide; the hand or the pause holds it */
.trending-pages button { position:relative; }
.trending-pages button::after { content:'';position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--bone);box-shadow:0 0 8px rgba(255,250,248,.5);transform:scaleX(0);transform-origin:left;opacity:0; }
.trending-banner.counting .trending-pages button[aria-pressed="true"]::after { opacity:1;animation:tk-count 6.5s linear forwards; }
.trending-banner.paused .trending-pages button::after, .trending-banner:hover .trending-pages button::after, .trending-banner:focus-within .trending-pages button::after { animation-play-state:paused; }
@keyframes tk-count { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .trending-kicker b.rise, .tk-caret, .trending-pages button::after { animation:none; } }
.trending-kicker > span { border-left:1px solid rgba(255,255,255,.25);padding-left:14px;font-size:9px;letter-spacing:.06em; }
.trending-byline { font:500 12px/1.6 var(--sans);color:rgba(255,255,255,.8);margin-bottom:14px; }
.trending-byline > span { margin:0 7px;color:rgba(255,255,255,.4); }
.trending-feature-copy h3 { font:650 clamp(24px,2.6vw,43px)/1.14 var(--sans);letter-spacing:-.035em;color:var(--bone);margin:0 0 26px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance; }
.trending-feature-actions { display:flex;gap:10px; }
.trending-feature-actions button { min-height:42px;padding:10px 23px;border:1px solid rgba(255,255,255,.25);border-radius:7px;background:rgba(255,255,255,.07);color:var(--bone);font:600 13px/1.2 var(--sans);cursor:pointer; }
.trending-feature-actions .trending-watch { color:#13151a;background:var(--bone);border-color:var(--bone); }
.trending-watch span { margin-left:8px; }
.trending-carousel-controls { position:absolute;z-index:3;bottom:25px;left:42px;right:30px;display:flex;align-items:center;justify-content:space-between; }
.trending-pages,.trending-arrows { display:flex;gap:8px; }
.trending-carousel-controls button { background:rgba(16,18,22,.45);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.18);border-radius:6px;min-height:34px;min-width:38px;cursor:pointer;font:500 11px/1 var(--mono); }
.trending-pages button { width:65px;border:0;border-top:2px solid rgba(255,255,255,.23);border-radius:0;background:none;text-align:left;padding:10px 0 0; }
.trending-pages button[aria-pressed="true"] { border-image:var(--rgb) 1;color:var(--bone); }
.trending-carousel-controls button:hover { color:white; }
.trending-announcement { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.keyboard-nav .trending-slide { transition:none; }
@media(max-width:900px) { .trending-feature-copy { width:76%;left:28px;top:28px; } .trending-carousel-controls { left:28px;right:24px; } }
@media(max-width:600px) {
 .trending-banner { height:490px;min-height:0;border-radius:12px; }
 .trending-feature-copy { left:22px;right:22px;top:24px;bottom:86px;width:auto; }
 .trending-feature-copy h3 { font-size:27px;-webkit-line-clamp:4;margin-bottom:22px; }
 .trending-shade { background:linear-gradient(0deg,rgba(8,10,14,.98),rgba(8,10,14,.66) 60%,rgba(8,10,14,.25)); }
 .trending-byline { font-size:11px;margin-bottom:10px; }
 .trending-carousel-controls { left:22px;right:22px;bottom:22px; }
 .trending-pages button { width:36px; }
 .trending-arrows { gap:5px; }
 .trending-carousel-controls .trending-arrows button { min-width:32px; }
}
@media(prefers-reduced-motion:reduce) { .trending-slide { transition:none; } }

/* Let the featured artwork fill the screen, with the page title over the image. */
.chart.discovery { --discovery-gutter:6vw;padding-inline:var(--discovery-gutter); }
.chart.discovery:has(.trending-banner:not([hidden])) { padding-top:0; }
.discovery:has(.trending-banner:not([hidden])) > .chead {
 grid-area:1 / 1;align-self:start;z-index:2;margin-top:100px;pointer-events:none;
}
.discovery .trending-banner {
 grid-area:1 / 1;margin-inline:calc(-1 * var(--discovery-gutter));
 height:70svh;min-height:640px;max-height:900px;border:0;border-radius:0;
}
.discovery .trending-feature-copy { left:var(--discovery-gutter);top:210px;width:min(65%,820px); }
.discovery .trending-carousel-controls { left:var(--discovery-gutter);right:var(--discovery-gutter); }
.discovery .trending-shade {
 background:linear-gradient(180deg,rgba(8,10,14,.7),transparent 30%),linear-gradient(90deg,rgba(8,10,14,.94),rgba(8,10,14,.6) 36%,rgba(8,10,14,.06) 80%),linear-gradient(0deg,rgba(8,10,14,.94),transparent 70%);
}
@media(max-width:900px) { .discovery .trending-feature-copy { width:76%; } }
@media(max-width:600px) {
 .chart.discovery { --discovery-gutter:20px; }
 .discovery:has(.trending-banner:not([hidden])) > .chead { margin-top:90px; }
 .discovery .trending-banner { height:80svh;min-height:620px;max-height:780px; }
 .discovery .trending-feature-copy { top:175px;right:var(--discovery-gutter);width:auto; }
 .discovery .trending-shade { background:linear-gradient(180deg,rgba(8,10,14,.75),transparent 35%),linear-gradient(0deg,rgba(8,10,14,.98),rgba(8,10,14,.65) 60%,rgba(8,10,14,.25)); }
}
.discovery-live-controls { display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--bone-70);font-size:12px; }
.discovery-live-controls label { display:flex;align-items:center;gap:8px; }
.discovery-live-controls select,.discovery-live-controls button,.discovery-load-more { background:#16191e;color:var(--bone);font:inherit;border:1px solid var(--line);border-radius:7px;padding:9px 12px;cursor:pointer; }
.discovery-load-more { justify-self:center;min-width:160px; }
.discovery-sources { position:relative;margin-left:auto; }
.discovery-sources summary { cursor:pointer;padding:10px; }
.discovery-sources[open] > div { position:absolute;right:0;top:100%;z-index:10;width:min(440px,84vw);background:#17191f;border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:0 16px 60px #0009; }
.discovery-sources > div > div { display:grid;gap:5px;padding:9px 0;border-bottom:1px solid var(--line); }
.discovery-sources > div span { color:var(--bone-45);font-size:11px; }
#live-embed { display:none;position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:#08090b; }
#viewer.has-live-embed #live-embed { display:block;opacity:1; }
#viewer.has-live-embed #vback,#viewer.has-live-embed #ctrls,#viewer.has-live-embed #insight { z-index:6; }
/* a portrait piece from Instagram: its player as a window in the middle of our frame, the still blurred behind, our chrome around it */
#viewer.embed-portrait #live-embed { inset:auto;left:50%;top:50%;width:min(92vw,420px);height:min(84vh,760px);transform:translate(-50%,-50%);border-radius:8px;box-shadow:0 40px 120px -40px #000; }
#viewer.embed-portrait .bg img { opacity:.35;filter:blur(28px) saturate(.8);transform:scale(1.08); }
#live-source-link { position:absolute;z-index:7;top:82px;right:28px;padding:12px 16px;border:1px solid #ffffff40;border-radius:7px;background:#14161de6;color:#f7f6f2;font:500 12px/1.4 var(--sans);text-decoration:none; }
#live-source-link[hidden] { display:none; }
#viewer.info #live-source-link { display:none; }
#viewer.live-selection .cb[data-c="like"],#viewer.live-selection .cb[data-c="vote"],#viewer.live-selection .cb[data-c="share"],#viewer.live-selection .cb[data-c="thread"] { display:none; }
@media(max-width:600px) { .discovery-live-controls { gap:10px;font-size:11px; } #live-source-link { top:64px;right:16px;max-width:75%; } }
.discovery .plats button.chip { background:transparent;color:var(--bone-70);font:500 10px/1.3 var(--mono);text-transform:uppercase; }
.discovery .plats button.chip.on { background:rgba(255,255,255,.09);color:var(--bone); }
/* A native modal keeps the OS inert while the existing account tools are open. */
.os-account-window { position:fixed; inset:0; width:min(1440px,94vw); height:90svh; max-width:none; max-height:none; margin:auto; padding:0; border:1px solid #ffffff24; border-radius:20px; overflow:hidden; background:#101114; color:#f7f6f2; box-shadow:0 40px 120px #0009; }
.os-account-window::backdrop { background:#0009; backdrop-filter:blur(12px); }
.os-account-bar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid #ffffff18; font:11px monospace; letter-spacing:.12em; }
.os-account-bar button { border:0; border-radius:8px; background:#ffffff0d; color:inherit; padding:9px 12px; cursor:pointer; }
.os-account-window iframe { display:block; width:100%; height:calc(100% - 56px); border:0; background:#101114; }
#hud button.av { padding:0; cursor:pointer; }
#hud button.av:focus-visible,.os-account-bar button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
@media(max-width:640px) { .os-account-window { width:100%; height:100svh; border-radius:0; border:0; } }

/* Imported posts can have long captions; keep banner controls visible. */
.trending-feature-copy h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }

/* Bilibili title translation stays beside the discovery filters. */
.discovery-translation { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 0 0 22px; color: #aaa; font-size: 12px; }
.discovery-translation[hidden] { display: none; }
.discovery-translation label { display: flex; align-items: center; gap: 10px; }
.discovery-translation select, .discovery-translation button { font: inherit; color: #f7f6f2; background: #191a1d; border: 1px solid #36383b; border-radius: 8px; padding: 9px 12px; }
.discovery-translation button:disabled { opacity: .45; cursor: default; }
.discovery-translation :focus-visible { outline: 2px solid #f7f6f2; outline-offset: 4px; }
.discovery-translation-note { display: block; font-size: 10px; color: #a5afc0; margin: 7px 0; }

#hud .os-profile-launch { display:inline-flex;align-items:center;gap:9px;color:#eeeef2;text-decoration:none;border:1px solid #ffffff20;border-radius:24px;padding:9px 15px;font:500 12px var(--sans, sans-serif);background:#ffffff07;transition:background 160ms ease,border-color 160ms ease; }
#hud .os-profile-launch span { color:#b2b5c1;font-size:18px;line-height:1; }
#hud .os-account-launch { display:grid;place-items:center;width:30px;height:30px;border:0;background:transparent;color:#9da1ad;font-size:18px;cursor:pointer; }
#hud .os-profile-launch:hover { background:#ffffff12;border-color:#ffffff45; }
#hud .os-profile-launch:focus-visible,#hud .os-account-launch:focus-visible { outline:2px solid white;outline-offset:4px; }
@media(max-width:680px) { #hud .os-profile-launch { padding:7px 10px; }.os-account-launch { flex-shrink:0; } }

/* the provenance rail under the viewer's title */
#viewer .vrail { margin: 10px 0 0; }
#viewer .vrail:empty { display: none; }