/* HANSHOP / optical glass. Content remains opaque, unfiltered and original. */
:root {
  --glass-fill: rgb(255 255 255 / 76%);
  --glass-edge: inset 0 1px 1px rgb(255 255 255 / 98%), inset 0 -1px 1px rgb(93 104 120 / 12%);
  --glass-low: 0 3px 7px rgb(24 35 52 / 4%), 0 12px 30px rgb(24 35 52 / 7%);
  --glass-high: 0 8px 18px rgb(24 35 52 / 7%), 0 26px 55px rgb(24 35 52 / 13%);
  --glass-ease: cubic-bezier(.16, 1, .3, 1);
  --glass-press: cubic-bezier(.22, .8, .24, 1);
  --muted: #65666e;
}
html { scroll-padding-top: 120px; scrollbar-color: #b9bbc3 #fff; }
body { background: #fff; }
::selection { background: #ffd1e3; color: #281720; }
input { caret-color: #d71466; }
button, a { touch-action: manipulation; }
button:disabled { cursor: default; }
:is(button, a, input, summary):focus-visible { outline: 3px solid #c91f65; outline-offset: 4px; }

/* A detached, translucent navigation plane. Real content passes behind it. */
.header {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: var(--content-max);
  margin: 16px auto 24px;
  top: 16px;
  height: 72px;
  padding: 0 20px;
  gap: 24px;
  border: 0;
  border-radius: 26px;
  background: linear-gradient(125deg, rgb(255 255 255 / 91%), rgb(255 255 255 / 69%) 45%, rgb(245 248 255 / 78%));
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
  box-shadow: var(--glass-edge), var(--glass-low), inset 1px 0 rgb(255 255 255 / 95%);
  transition: box-shadow 420ms var(--glass-ease), background-color 420ms, transform 420ms var(--glass-ease);
  isolation: isolate;
}
.header.is-scrolled { box-shadow: var(--glass-edge), 0 6px 14px rgb(24 35 52 / 7%), 0 22px 45px rgb(24 35 52 / 14%); }
.header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 300px 95px at var(--light-x, 30%) var(--light-y, 0%), rgb(255 255 255 / 90%), transparent 75%);
}
.header .wordmark { font-size: 25px; letter-spacing: -.9px; }
.header nav { gap: 5px; font-size: 14px; }
.header nav a { padding: 12px 15px; border-radius: 22px; transition: background-color 200ms, box-shadow 300ms var(--glass-ease); }
.header nav a:hover { background: rgb(255 255 255 / 78%); box-shadow: var(--glass-edge), 0 4px 10px rgb(35 44 60 / 9%); }
.header nav a:hover::after { display: none; }
.search {
  height: 43px; padding: 9px 14px; border: 0; background: rgb(235 238 243 / 55%);
  box-shadow: inset 0 1px 3px rgb(44 54 76 / 8%), 0 1px rgb(255 255 255 / 95%);
  transition: background-color 250ms, box-shadow 300ms var(--glass-ease);
}
.search:focus-within { background: rgb(255 255 255 / 94%); box-shadow: inset 0 0 0 1px #cd879e, 0 4px 16px rgb(196 63 118 / 12%); }
.search input::placeholder { color: #65666e; opacity: 1; }
.search kbd { color: #65666e; }
.header .member-entry { padding: 10px 13px; min-height: 44px; border-radius: 24px; font-weight: 600; }
.header .app-link, .app-link { border-radius: 25px; min-height: 44px; background: linear-gradient(155deg, #45434a, #17171b 70%); box-shadow: inset 0 1px rgb(255 255 255 / 30%), 0 5px 13px rgb(24 26 35 / 17%); }
.app-link:hover { background: linear-gradient(155deg, #63545e, #252029 70%); }

/* Same full-width artwork, held in a clear frame. */
.hero { border-radius: 28px; overflow: hidden; background: #fff url('assets/hero.png') center / 100% 100% no-repeat; box-shadow: var(--glass-edge), 0 8px 25px rgb(42 36 55 / 5%); }
.hero::after { content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 90%), inset 0 -1px 2px rgb(33 40 58 / 10%); }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-logo { transition: box-shadow 350ms var(--glass-ease), background-color 350ms; }
.hero-logo:hover { box-shadow: inset 0 1px 2px rgb(255 255 255 / 90%), 0 14px 32px rgb(63 21 47 / 16%); background: rgb(255 255 255 / 4%); }
.hero-cta { color: #212128; background: rgb(255 255 255 / 80%); border: 0; min-height: 38px; padding: .7em 1.15em; box-shadow: var(--glass-edge), 0 5px 16px rgb(23 31 43 / 21%); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.hero-cta:hover { background: rgb(255 255 255 / 95%); box-shadow: var(--glass-edge), 0 10px 24px rgb(23 31 43 / 24%); }
.hero-pause { border: 0; background: rgb(255 255 255 / 82%); border-radius: 20px; padding: 9px 13px; min-height: 36px; box-shadow: var(--glass-edge), 0 3px 10px rgb(23 31 43 / 8%); }
.hero-toolbar { border: 0; padding: 16px 0 8px; }
.hero-toolbar > span { color: #64646d; }
.hero-toolbar button { min-height: 40px; background: #f6f7f9; box-shadow: var(--glass-edge), 0 3px 9px rgb(33 40 58 / 4%); }
.hero-toolbar button:hover { background: #fff; }

/* Polished lenses around the original brand artwork. */
.brands { border: 0; padding-top: 32px; padding-bottom: 18px; }
.brands .section-head { margin-bottom: 2px; }
.brand-rail { padding: 22px 6px 25px; gap: 22px; }
.brand { padding: 0; gap: 9px; border-radius: 20px; }
.brand-ring {
  display: block; position: relative; width: 92px; height: 92px; padding: 7px;
  background: linear-gradient(140deg, #fff 12%, #f0f2f7 45%, #fff 75%);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px rgb(96 107 129 / 22%), 0 6px 14px rgb(39 47 70 / 10%);
  transition: transform 480ms var(--glass-ease), box-shadow 480ms var(--glass-ease);
}
.brand-ring img { border: 1px solid rgb(255 255 255 / 90%); box-shadow: 0 1px 4px rgb(26 35 52 / 13%); }
.brand-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 50% 28% at var(--light-x, 28%) var(--light-y, 4%), rgb(255 255 255 / 85%), transparent 100%);
  box-shadow: inset 1px 1px 1px rgb(255 255 255 / 92%), inset -1px -1px 1px rgb(255 255 255 / 70%);
  opacity: .55; transition: opacity 300ms;
}
.brand:hover .brand-ring { transform: none; }
.brand[aria-pressed=true] .brand-ring { background: #fff; transform: none; box-shadow: inset 0 0 0 2px #d3266b, 0 6px 16px rgb(129 34 75 / 14%); }
.brand[aria-pressed=true] .brand-ring::before { content: ''; position: absolute; bottom: -7px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #cc2367; }
.brand > small { color: #666873; }
.rail-controls { gap: 8px; }
.rail-controls button { width: 42px; height: 42px; border: 0; background: linear-gradient(150deg, #fff, #f0f2f5); box-shadow: var(--glass-edge), 0 4px 10px rgb(33 40 58 / 9%); }
.rail-controls button:hover { background: #fff; }
.rail-controls button[aria-pressed=true] { color: #a52558; background: #fff2f7; }

/* One floating glass control strip. No frosted overlay on the media itself. */
.discover { padding-top: 34px; }
.discover .section-head { margin-bottom: 22px; }
.chinese { letter-spacing: -.035em; }
.filterbar {
  position: sticky; top: 100px; z-index: 12;
  padding: 8px; min-height: 64px; border-radius: 25px;
  background: rgb(255 255 255 / 78%);
  -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%);
  box-shadow: var(--glass-edge), 0 5px 18px rgb(29 39 59 / 8%);
  gap: 12px; margin-top: 24px;
}
.filters { position: relative; padding: 0; gap: 3px; isolation: isolate; }
.filters button { min-height: 46px; border: 0; padding: 11px 24px; font-size: 14px; z-index: 1; color: #51505b; background: transparent; transition: color 200ms, background-color 200ms; }
.filters button[aria-pressed=true] { color: #19191f; font-weight: 700; background: rgb(255 255 255 / 94%); }
.filters.has-glass-pill button[aria-pressed=true] { background: transparent; }
.glass-pill {
  position: absolute; inset: 0 auto 0 0; width: var(--pill-width, 76px); transform: translateX(var(--pill-x, 0px));
  background: linear-gradient(145deg, #fff, rgb(233 237 244 / 80%)); border-radius: 20px;
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgb(68 77 96 / 14%), 0 3px 8px rgb(23 33 49 / 14%);
  pointer-events: none; z-index: 0; opacity: var(--pill-opacity, 1);
  transition: transform 440ms var(--glass-ease), opacity 180ms;
}
.latest-label { padding-right: 5px; }
#refresh-feed { border: 0; color: #a3295d; background: rgb(255 244 248 / 76%); min-height: 40px; box-shadow: inset 0 1px #fff; }
#refresh-feed:hover { background: #fff; }
#clear-brand { min-height: 44px; border-radius: 22px; }
.content-source-note { color: #65666e; margin-top: -12px; }
.discover::before, .discover::after { opacity: .7; }

/* Light comes from the pointer. The shadow shifts in the opposite direction. */
.masonry { gap: 24px; }
#feed .post {
  --light-x: 40%; --light-y: 0%; --tilt-x: 0deg; --tilt-y: 0deg; --shadow-x: 0px;
  padding: 9px 9px 16px; border: 0; border-radius: 24px; background: #fff;
  box-shadow: inset 0 1px #fff, 0 1px 3px rgb(36 47 64 / 4%), 0 8px 24px rgb(36 47 64 / 5%);
  transition: transform 500ms var(--glass-ease), box-shadow 500ms var(--glass-ease);
  transform-origin: 50% 45%; isolation: isolate;
}
#feed .post::before { display: none; }
#feed .post-media { border: 0; border-radius: 17px; box-shadow: inset 0 1px #fff; }
.post-media::after {
  content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 82%), inset 0 -1px 1px rgb(255 255 255 / 48%);
  background: radial-gradient(ellipse 58% 25% at var(--light-x, 40%) 0%, rgb(255 255 255 / 16%), transparent);
  opacity: 0; transition: opacity 350ms;
}
.post-media img { transform: none; filter: none; }
.post-brand { padding: 0 5px; margin-top: 8px; }
.post-brand > button:first-child { min-height: 44px; font-size: 12px; }
.post-brand img { width: 25px; height: 25px; }
.post .caption { padding: 0 5px; color: #41414b; font-size: 12px; line-height: 1.75; }
.post-time { color: #686974; padding: 0 5px; font-size: 10px; font-variant-numeric: tabular-nums; }
.save { min-height: 44px; min-width: 40px; display: grid; place-items: center; border-radius: 50%; transition: background-color 200ms, color 200ms, transform 280ms var(--glass-press); }
.save:hover { background: #f2f3f7; }
.save.is-saved { background: #fff0f6; color: #c32463; }
.save:active { transform: scale(.9); }
.play-badge {
  width: 42px; height: 42px; top: 12px; right: 12px; border-radius: 50%;
  color: #24252c; background: rgb(255 255 255 / 75%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--glass-edge), 0 4px 13px rgb(16 26 43 / 14%);
  transition: transform 350ms var(--glass-ease), box-shadow 350ms var(--glass-ease);
}
.play-badge svg { width: 19px; height: 19px; }
.post:focus-within { box-shadow: 0 7px 24px rgb(36 47 64 / 13%); }
.empty { border: 0; border-radius: 24px; background: #f7f8fa; box-shadow: var(--glass-edge); }
#load-more, #reset { min-height: 44px; border-radius: 24px; }

/* Dialogs occupy a separate plane; text has its own sufficiently opaque layer. */
dialog {
  border-radius: 30px; background: rgb(249 250 253 / 88%);
  -webkit-backdrop-filter: blur(28px) saturate(130%); backdrop-filter: blur(28px) saturate(130%);
  box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1px rgb(255 255 255 / 80%), 0 25px 90px rgb(15 23 39 / 24%);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity 220ms ease, transform 360ms var(--glass-ease), display 360ms allow-discrete, overlay 360ms allow-discrete;
}
dialog[open] { opacity: 1; transform: translateY(0) scale(1); }
dialog::backdrop {
  background: rgb(35 40 54 / 18%);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  opacity: 0; transition: opacity 250ms, display 360ms allow-discrete, overlay 360ms allow-discrete;
}
dialog[open]::backdrop { opacity: 1; }
@starting-style { dialog[open] { opacity: 0; transform: translateY(18px) scale(.97); } dialog[open]::backdrop { opacity: 0; } }
#detail { padding: 9px; }
#detail-media { overflow: hidden; border-radius: 22px; background: #f2f3f6; }
.detail-copy { border-radius: 22px; background: rgb(255 255 255 / 78%); }
.modal-close { width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / 86%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--glass-edge), 0 4px 16px rgb(25 35 50 / 14%); }
.member-dialog { padding: 9px; gap: 9px; }
.member-intro { border-radius: 22px; background: linear-gradient(145deg, rgb(241 255 210 / 88%), rgb(222 246 174 / 64%)); box-shadow: inset 0 1px #fff; }
.member-body { border-radius: 22px; background: rgb(255 255 255 / 74%); }
.member-intro h2 { letter-spacing: -.035em; }
.member-intro .eyebrow, .member-body .eyebrow { color: #585d4a; }
.member-star { opacity: .85; }
.member-status { background: rgb(236 239 246 / 62%); border-radius: 14px; }
.member-body > p, .member-help { color: #64646f; }
.member-app, .member-submit { border-radius: 22px; min-height: 46px; }
.member-app { border: 0; background: #fff; box-shadow: var(--glass-edge), 0 4px 13px rgb(32 43 62 / 12%); }
.member-app:hover { background: #f7ffe9; }
.member-help a { padding: 7px 0; }
.member-body input { border-radius: 14px; border-color: #d0d1d8; }
.toast { color: #24242c; background: rgb(255 255 255 / 89%); border-radius: 24px; box-shadow: var(--glass-edge), var(--glass-high); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.site-footer { border-top: 1px solid #e9eaf0; background: linear-gradient(#fff, #f8fafb); }
.help-nav a { background: #fff; border: 0; min-height: 44px; box-shadow: var(--glass-edge), var(--glass-low); }
.help-status { border: 0; border-radius: 14px; background: #f4f5f8; padding: 15px 18px; }
.help-section summary { min-height: 44px; padding: 10px 0; }
.help-section, .help-lead { color: #62636b; }

/* The small controls have a faster response than the larger floating planes. */
:is(.header .member-entry, .app-link, .hero-cta, .hero-pause, .hero-toolbar button, .rail-controls button, #refresh-feed, .modal-close, .member-app, .member-submit, .brand-more, #detail-save, .help-nav a) {
  transition: translate 320ms var(--glass-ease), scale 220ms var(--glass-press), box-shadow 350ms var(--glass-ease), background-color 220ms, color 220ms;
}
@media (hover: hover) and (pointer: fine) {
  :is(.member-entry, .app-link, .hero-cta, .hero-pause, .hero-toolbar button, .rail-controls button, #refresh-feed, .modal-close, .member-app, .member-submit, .brand-more, #detail-save, .help-nav a):hover { translate: 0 -2px; }
  .member-entry:hover { color: #22212a; background: rgb(255 255 255 / 76%); box-shadow: var(--glass-edge), 0 5px 12px rgb(29 39 58 / 9%); }
  #feed .post.is-lit { z-index: 2; transform: perspective(1100px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); box-shadow: inset 0 1px #fff, var(--shadow-x) 9px 17px rgb(32 43 62 / 8%), var(--shadow-x) 26px 44px rgb(32 43 62 / 13%); }
  .post.is-lit .post-media::after { opacity: 1; }
  .post.is-lit .play-badge { transform: scale(1.05); box-shadow: var(--glass-edge), 0 7px 20px rgb(16 26 43 / 23%); }
  .brand.is-lit .brand-ring { transform: perspective(500px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px rgb(96 107 129 / 20%), var(--shadow-x) 14px 22px rgb(39 47 70 / 17%); }
  .brand.is-lit .brand-ring::after { opacity: .9; }
}
:is(.member-entry, .app-link, .hero-cta, .hero-pause, .hero-toolbar button, .rail-controls button, #refresh-feed, .modal-close, .member-app, .member-submit, .brand-more, #detail-save, .help-nav a):active { translate: 0 0; scale: .96; }
.brand:active .brand-ring { scale: .96; }
.brand-ring { transition: transform 450ms var(--glass-ease), box-shadow 450ms var(--glass-ease), scale 200ms var(--glass-press); }

@media (max-width: 1150px) {
  .header { gap: 12px; padding: 0 16px; }
  .header nav a { padding: 12px 10px; }
  .header .search { max-width: 230px; }
  .header .member-entry { padding: 10px; }
}
@media (max-width: 1050px) { .masonry { gap: 18px; } }
@media (max-width: 900px) and (min-width: 721px) { .header .member-entry span { display: none; } .header .wordmark { font-size: 22px; } .header nav { font-size: 12px; gap: 0; } }
@media (max-width: 720px) {
  html { scroll-padding-top: 138px; }
  .header { width: calc(100% - 24px); margin: 10px auto 18px; top: 10px; height: auto; min-height: 104px; padding: 10px 12px; gap: 6px 8px; border-radius: 25px; }
  .header .wordmark { font-size: 23px; }
  .header .member-entry { min-width: 44px; min-height: 44px; padding: 10px; }
  .header .app-link { padding: 10px 13px; font-size: 12px; min-height: 42px; gap: 9px; }
  .header nav { gap: 0; font-size: 12px; }
  .header nav a { padding: 11px 8px; }
  .header .search { padding: 9px 11px; height: 38px; min-width: 0; max-width: 155px; }
  .header .search input { font-size: 12px; }
  .search kbd { display: none; }
  .hero { border-radius: 19px; }
  .hero-cta { min-height: 30px; font-size: 10px; }
  .hero-pause { bottom: 6px; right: 6px; min-height: 28px; font-size: 9px; padding: 7px 9px; }
  .hero-toolbar { padding: 8px 0; }
  .hero-toolbar > span { font-size: 8px; }
  .hero-toolbar button { padding: 9px 12px; font-size: 10px; }
  .brands { padding-top: 22px; }
  .brand-ring { width: 76px; height: 76px; padding: 6px; }
  .brand-rail { gap: 15px; padding: 17px 3px 20px; }
  .brand { flex-basis: 86px; }
  .brand > small { font-size: 9px; }
  .rail-controls button { height: 38px; width: 38px; }
  .discover { padding-top: 20px; }
  .chinese { font-size: 28px; }
  .discover .filterbar { top: 124px; border-radius: 24px; padding: 6px; gap: 7px; margin-top: 22px; margin-bottom: 25px; }
  .filters { flex: 1 0 100%; justify-content: space-between; }
  .filters button { flex: 1; min-height: 44px; padding: 10px 13px; font-size: 13px; }
  .filterbar .latest-label { width: 100%; justify-content: space-between; padding: 0 5px 1px 10px; font-size: 11px; }
  #refresh-feed { min-height: 32px; font-size: 11px; }
  .content-source-note { margin-top: -12px; font-size: 10px; }
  .masonry { gap: 12px; }
  #feed .post { padding: 5px 5px 12px; border-radius: 18px; margin-bottom: 19px; }
  #feed .post-media { border-radius: 13px; }
  .post-brand { padding: 0 3px; gap: 2px; margin-top: 3px; }
  .post-brand > button:first-child { font-size: 10px; gap: 4px; }
  .post-brand img { width: 20px; height: 20px; }
  .save { min-width: 32px; }
  .post .caption { padding: 0 4px; font-size: 11px; }
  .post-time { padding: 0 4px; font-size: 9px; line-height: 1.8; }
  .play-badge { width: 34px; height: 34px; top: 8px; right: 8px; }
  dialog { border-radius: 25px; max-height: 90dvh; }
  #detail { padding: 6px; }
  #detail-media, .detail-copy { border-radius: 19px; }
  .member-dialog { padding: 6px; }
  .member-intro { border-radius: 19px; padding: 23px; }
  .member-body { margin-top: 6px; padding: 26px 23px; border-radius: 19px; }
  .member-intro h2 { font-size: 27px; }
  .member-intro h2 em { font-size: 26px; }
  .member-star { font-size: 59px; top: 40px; }
  .member-help { font-size: 12px; gap: 12px 20px; }
  .support-header { min-height: 64px; }
}
@media (max-width: 380px) {
  .header { column-gap: 4px; padding-inline: 10px; }
  .header .wordmark { font-size: 21px; }
  .header nav { font-size: 11px; }
  .header nav a { padding-inline: 6px; }
  .header .search { max-width: 125px; padding-inline: 9px; }
  .header .app-link { padding-inline: 10px; gap: 6px; }
}
/* Browsers without backdrop blur, and users choosing higher legibility. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .filterbar, dialog, .hero-cta, .play-badge, .toast, .modal-close { background: #fff; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .header, .filterbar, dialog, .detail-copy, .member-body, .hero-cta, .play-badge, .toast, .modal-close { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .header, .filterbar, .brand-ring, #feed .post { outline: 1px solid #72747d; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #feed .post.is-lit, .brand.is-lit .brand-ring { transform: none; }
  .glass-pill { transition: none; }
  :is(button, a):active { scale: 1; translate: 0; }
}