/* HANSHOP combined stylesheet; source rules and order are preserved. */

/* source: /hanshop-web/glass.css?v=glass2 */
/* 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; }
}


/* source: /hanshop-web/glass-settings.css?v=20261010-restore-template09 */
/* Background transparency only: never fade text, photographs or video. */
:root {
  --glass-alpha: 0;
  --glass-blur: 8px;
  --glass-effective-alpha: var(--glass-alpha);
  --glass-effective-blur: var(--glass-blur);
  --glass-surface: rgb(255 255 255 / var(--glass-effective-alpha));
  --glass-readable: var(--glass-surface);
  --glass-reflection: calc(.1 + var(--glass-effective-alpha) * .4);
}
.header, .filterbar, dialog, .hero-cta, .hero-pause, .play-badge, .modal-close, .toast {
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-effective-blur)) saturate(135%);
  backdrop-filter: blur(var(--glass-effective-blur)) saturate(135%);
}
.header::before { background: radial-gradient(ellipse 300px 95px at var(--light-x, 30%) var(--light-y, 0%), rgb(255 255 255 / var(--glass-reflection)), transparent 75%); }
.header :is(.wordmark, nav a, .member-entry), .filterbar, .hero-cta, .hero-pause { text-shadow: 0 1px 3px rgb(255 255 255 / 95%); }
.header .app-link { text-shadow: none; }
.header .search { background: var(--glass-readable); }
.header .search:focus-within { background: rgb(255 255 255 / 85%); }
.header nav a:hover, .member-entry:hover, .hero-cta:hover, .rail-controls button:hover, .hero-toolbar button:hover, #refresh-feed:hover, .member-app:hover { background: var(--glass-readable); }
.glass-pill { background: var(--glass-readable); }
.filters button[aria-pressed=true] { background: var(--glass-readable); }
.filters.has-glass-pill button[aria-pressed=true] { background: transparent; }
.brand-ring, .brand[aria-pressed=true] .brand-ring { background: var(--glass-surface); }
.brand-ring::after { opacity: var(--glass-reflection); }
.brand.is-lit .brand-ring::after { opacity: calc(var(--glass-reflection) + .12); }
.rail-controls button, .hero-toolbar button, #refresh-feed, .member-app, .help-nav a { background: var(--glass-readable); }
#feed .post { background: var(--glass-surface); }
.detail-copy, .member-body { background: var(--glass-readable); text-shadow: 0 1px 2px rgb(255 255 255 / 80%); }
.member-intro { background: rgb(235 255 190 / calc(.15 + var(--glass-effective-alpha) * .7)); }
.member-status { background: var(--glass-readable); }
dialog::backdrop { background: rgb(35 40 54 / 10%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* The material controller uses the same glass as the rest of the website. */
.glass-launcher {
  position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); right: max(22px, env(safe-area-inset-right)); z-index: 45;
  display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 17px;
  border: 0; border-radius: 26px; background: var(--glass-surface); color: #24252d;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--glass-edge), 0 6px 24px rgb(32 42 60 / 15%);
  font-size: 12px; font-weight: 650;
  transition: transform 260ms var(--glass-ease), box-shadow 260ms;
}
.glass-launcher svg { width: 19px; height: 19px; }
.glass-launcher:hover { transform: translateY(-2px); box-shadow: var(--glass-edge), 0 10px 28px rgb(32 42 60 / 19%); }
.glass-launcher[aria-expanded=true] { background: var(--glass-surface); color: #a62059; box-shadow: var(--glass-edge), inset 0 0 0 1px #b3487366, 0 6px 24px rgb(32 42 60 / 15%); }
.glass-panel {
  position: fixed; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 58px); right: max(22px, env(safe-area-inset-right));
  z-index: 46; width: 320px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 112px);
  padding: 20px; overflow-y: auto; overscroll-behavior: contain; border-radius: 25px;
  color: #272932; background: var(--glass-surface);
  -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
  box-shadow: inset 0 1px 1px #fff, 0 10px 28px rgb(26 35 52 / 12%), 0 25px 70px rgb(26 35 52 / 13%);
}
.glass-panel[hidden] { display: none; }
.glass-panel:not([hidden]) { animation: glass-panel-enter 240ms var(--glass-ease); }
@keyframes glass-panel-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.glass-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.glass-panel h2 { font-size: 19px; margin: 0; letter-spacing: -.025em; }
.glass-panel-close { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--glass-surface); }
.glass-panel-close svg { width: 17px; height: 17px; }
.glass-panel p { color: #666873; font-size: 12px; line-height: 1.7; margin: 8px 0 14px; }
.glass-sample { height: 84px; border-radius: 16px; overflow: hidden; position: relative; background: #fff url('assets/hero.png') center 44% / 125% auto no-repeat; box-shadow: inset 0 0 0 1px rgb(34 43 57 / 6%); }
.glass-sample::after {
  content: ''; position: absolute; width: 74px; height: 74px; top: 5px; left: calc(50% - 37px); border-radius: 50%;
  background: var(--glass-surface); -webkit-backdrop-filter: blur(var(--glass-effective-blur)); backdrop-filter: blur(var(--glass-effective-blur));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 96%), inset 0 -1px 1px rgb(255 255 255 / 45%), 0 5px 16px rgb(18 29 44 / 23%);
}
.glass-presets { display: flex; gap: 6px; margin: 14px 0 18px; }
.glass-presets button { flex: 1; min-height: 38px; font-size: 12px; border-radius: 19px; background: var(--glass-surface); color: #595c68; }
.glass-presets button[aria-pressed=true] { color: #a62059; box-shadow: inset 0 0 0 1px #b3487366, 0 3px 9px rgb(32 42 60 / 10%); font-weight: 750; }
.glass-slider-label { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; font-size: 13px; font-weight: 600; margin-top: 16px; }
.glass-slider-label output { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.glass-slider {
  display: block; width: 100%; height: 36px; margin: 6px 0 0; padding: 0; border: 0;
  appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; accent-color: #282a33;
}
.glass-slider::-webkit-slider-runnable-track { height: 5px; border-radius: 4px; background: linear-gradient(to right, rgb(40 43 55 / 62%) 0 var(--range-fill, 100%), rgb(90 97 116 / 15%) var(--range-fill, 100%) 100%); }
.glass-slider::-moz-range-track { height: 5px; border-radius: 4px; background: rgb(90 97 116 / 15%); }
.glass-slider::-moz-range-progress { height: 5px; background: rgb(40 43 55 / 62%); }
.glass-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 24px; width: 24px; margin-top: -9.5px; border-radius: 50%; background: var(--glass-surface); border: 1px solid #a1a7b7; box-shadow: 0 2px 7px rgb(36 45 63 / 22%); }
.glass-slider::-moz-range-thumb { height: 23px; width: 23px; border-radius: 50%; background: var(--glass-surface); border: 1px solid #a1a7b7; box-shadow: 0 2px 7px rgb(36 45 63 / 22%); }
.glass-range-hints { display: flex; justify-content: space-between; color: #6a6d78; font-size: 10px; }
.glass-panel-foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 19px; padding-top: 10px; border-top: 1px solid #e6e8ed; }
.glass-panel-foot span { font-size: 10px; color: #696c76; }
.glass-panel-foot button { min-height: 36px; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.glass-panel .glass-access-note { background: var(--glass-surface); padding: 9px 11px; border-radius: 10px; margin-bottom: 0; font-size: 11px; }
.glass-panel :disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 720px) {
  .glass-launcher { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); min-height: 44px; padding: 0 14px; }
  .glass-panel { right: 14px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 55px); max-height: calc(100dvh - 96px); padding: 18px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-effective-alpha: 1; --glass-effective-blur: 0px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass-effective-alpha: 1; --glass-effective-blur: 0px; }
  .glass-panel, .glass-launcher { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass-launcher[aria-expanded=true] { background: #25262d; }
}
@media (prefers-reduced-motion: reduce) { .glass-panel:not([hidden]) { animation: none; } .glass-launcher:hover { transform: none; } }

/* Global material contract. This is deliberately the final layer, including
   hover / focus / selected states inherited from earlier designs. Important
   is limited to material fills so no legacy black or white tile leaks through.
   Images, video pixels, text, icons, focus rings and selection marks are content. */
body :is(
  button, input:not([type="range"]), textarea, select, dialog,
  .header, .search, .filterbar, .glass-pill, .brand-ring,
  .post, .post-media, #detail-media, .detail-copy, .related,
  .member-intro, .member-body, .member-status, .empty, .toast,
  .site-footer, .hero-toolbar, .help-nav a, .help-status,
  .help-section details, .glass-panel, .glass-access-note,
  .app-link, .hero-cta, .play-badge, .skip
) {
  background-color: var(--glass-surface) !important;
  background-image: none !important;
}
/* A control's selected state is an edge, never an opaque background. */
body :is(.app-link, .member-submit, .empty button, .glass-launcher, .glass-presets button, .skip) {
  color: #24252d;
  text-shadow: 0 1px 2px rgb(255 255 255 / 90%);
}
.glass-launcher[aria-expanded=true], .glass-presets button[aria-pressed=true], .save.is-saved, #detail-save[aria-pressed=true] { color: #a62059; }
.glass-presets button[aria-pressed=true] { position: relative; }
.glass-presets button[aria-pressed=true]::after { content: ''; position: absolute; bottom: 5px; left: calc(50% - 7px); width: 14px; height: 2px; border-radius: 2px; background: currentColor; }
body :is(
  .header, .filterbar, dialog, .glass-panel, .glass-launcher, .toast,
  .app-link, .hero-cta, .hero-pause, .modal-close, .play-badge,
  .glass-panel-close, .help-nav a
) {
  -webkit-backdrop-filter: blur(var(--glass-effective-blur)) saturate(135%);
  backdrop-filter: blur(var(--glass-effective-blur)) saturate(135%);
}
/* Inner controls receive a lighter refraction to avoid excessive stacked blur. */
body :is(
  .search, .brand-ring, .rail-controls button, .glass-presets button,
  .member-app, .member-submit, .member-body input, .brand-more,
  #detail-save, #load-more, #reset, #refresh-feed, #clear-brand, .glass-pill
) {
  -webkit-backdrop-filter: blur(min(var(--glass-effective-blur), 6px));
  backdrop-filter: blur(min(var(--glass-effective-blur), 6px));
}
body :is(.app-link, .member-submit, .member-app, #reset, #load-more, .glass-panel-close, .glass-presets button) {
  box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(90 102 126 / 14%), 0 5px 15px rgb(34 45 64 / 10%);
}
body :is(.app-link, .member-submit, .member-app, #reset, #load-more):hover { box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(90 102 126 / 22%), 0 9px 23px rgb(34 45 64 / 16%); }
.glass-presets button[aria-pressed=true] { box-shadow: var(--glass-edge), inset 0 0 0 1px #b3487370, 0 5px 15px rgb(34 45 64 / 10%); }
.glass-panel { text-shadow: 0 1px 2px rgb(255 255 255 / 98%); }
.glass-panel p, .glass-range-hints, .glass-panel-foot span { color: #444650; }
.glass-panel-close { box-shadow: var(--glass-edge), 0 4px 12px rgb(30 39 56 / 12%); }
.glass-slider::-webkit-slider-thumb { -webkit-backdrop-filter: blur(min(var(--glass-effective-blur), 6px)); backdrop-filter: blur(min(var(--glass-effective-blur), 6px)); box-shadow: var(--glass-edge), 0 3px 8px rgb(36 45 63 / 26%); }
.glass-slider::-moz-range-thumb { backdrop-filter: blur(min(var(--glass-effective-blur), 6px)); box-shadow: var(--glass-edge), 0 3px 8px rgb(36 45 63 / 26%); }
.detail-copy, .member-body, .member-intro { -webkit-backdrop-filter: blur(min(var(--glass-effective-blur), 6px)); backdrop-filter: blur(min(var(--glass-effective-blur), 6px)); box-shadow: inset 0 1px 1px rgb(255 255 255 / 75%); }
.member-status, .help-status { box-shadow: inset 0 0 0 1px rgb(87 98 120 / 14%); }
.site-footer { box-shadow: inset 0 1px rgb(255 255 255 / 90%), 0 -8px 28px rgb(40 50 69 / 3%); -webkit-backdrop-filter: blur(var(--glass-effective-blur)); backdrop-filter: blur(var(--glass-effective-blur)); }
.empty { box-shadow: var(--glass-edge), 0 8px 26px rgb(30 40 58 / 7%); }
.hero { background-color: transparent; }
dialog::backdrop { background: rgb(35 40 54 / calc(var(--glass-effective-alpha) * .18)); -webkit-backdrop-filter: blur(calc(var(--glass-effective-blur) * .375)); backdrop-filter: blur(calc(var(--glass-effective-blur) * .375)); }

/* Reading surfaces are deliberately independent of the decorative glass shell.
   Even at 100% transparency, original captions retain a 96% white foundation. */
:root { --reading-surface: rgb(255 255 255 / max(.96, var(--glass-effective-alpha))); }
body #detail { padding:12px; }
#detail .detail-layout { gap:12px; }
body #detail .detail-copy {
  --glass-surface: var(--reading-surface);
  background-color:var(--reading-surface) !important;
  background-image:none !important;
  color:#252830;
  text-shadow:none;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px #fff,0 5px 16px rgb(30 40 56 / 5%);
}
#detail .detail-copy { min-width:0; border-radius:20px; }
#detail #detail-caption { color:#252830;line-height:1.9; }
#detail .detail-copy :is(#detail-handle,.detail-published,.small-note) { color:#555b65; }
@media (max-width:720px) {
  body #detail { padding:8px; }
  #detail .detail-copy { margin-top:8px;border-radius:17px; }
}


/* source: /hanshop-web/studio.css?v=3 */
/* The workspace uses the same adjustable clear material, without colour fills. */
body.has-studio { padding-bottom: 88px; }
.inspiration-studio svg, .desk-card-actions svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0; }
.desk-card-actions { display:flex;justify-content:space-between;gap:6px;padding:7px 12px 12px; }
.desk-card-actions button { display:flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:5px 8px;border-radius:14px;font-size:11px;color:#4c505b; }
.desk-card-actions button:hover { box-shadow:inset 0 0 0 1px rgb(70 81 99 / 24%);color:#20242b; }
.desk-card-actions button[aria-pressed=true], .desk-piece-foot button[aria-pressed=true] { color:#20242b;box-shadow:inset 0 0 0 1px currentColor;font-weight:650; }
.desk-dock { position:fixed;bottom:max(22px,env(safe-area-inset-bottom));left:max(22px,env(safe-area-inset-left));z-index:44;display:flex;align-items:center;gap:3px;padding:5px;border-radius:28px;background:var(--glass-surface);backdrop-filter:blur(var(--glass-effective-blur));-webkit-backdrop-filter:blur(var(--glass-effective-blur));box-shadow:var(--glass-edge),0 6px 24px rgb(32 42 60 / 15%); }
.desk-dock button { display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 15px;min-height:38px;border-radius:22px;font-size:12px;color:#272b33; }
.desk-dock b { font-weight:600;font-variant-numeric:tabular-nums;margin-left:3px; }
.desk-dock button:hover, .desk-dock .is-ready { box-shadow:inset 0 0 0 1px rgb(45 56 74 / 40%),0 4px 10px rgb(35 45 63 / 8%); }
.desk-drop-hint { display:none;position:absolute;bottom:calc(100% + 8px);left:0;white-space:nowrap;padding:10px 16px;border-radius:14px;font-size:12px;background:var(--glass-surface);backdrop-filter:blur(var(--glass-effective-blur));box-shadow:var(--glass-edge),0 6px 16px rgb(30 40 56 / 12%); }
.desk-dock.is-dragging .desk-drop-hint { display:block; }
.desk-dock.is-over { outline:2px solid #3d4655;outline-offset:4px; }
.studio-dialog { width:min(1140px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:24px;color:#222831;overflow:auto;background:var(--glass-surface);backdrop-filter:blur(var(--glass-effective-blur));-webkit-backdrop-filter:blur(var(--glass-effective-blur));box-shadow:var(--glass-edge),0 25px 75px rgb(30 39 55 / 22%); }
.studio-dialog[open] { display:block;animation:studio-open 240ms var(--glass-ease); }
.studio-dialog::backdrop { background:rgb(42 48 60 / calc(var(--glass-effective-alpha) * .18));backdrop-filter:blur(calc(var(--glass-effective-blur) * .375)); }
.studio-head { display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:25px 28px 16px; }
.studio-head h2 { font-family:inherit;font-size:25px;line-height:1.3;letter-spacing:-.025em;margin:0; }
.studio-head h2 span { font-size:17px;font-weight:500; }
.studio-head p { font-size:12px;line-height:1.6;margin:8px 0 0;color:#4d5460; }
.studio-close { display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;box-shadow:var(--glass-edge),0 4px 12px rgb(35 44 58 / 10%); }
.studio-toolbar { display:flex;align-items:center;gap:10px;padding:0 28px 17px; }
.studio-toolbar > span { margin-right:auto;font-size:12px;color:#4b515b; }
.studio-toolbar button, .studio-foot button, .studio-empty button { display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 13px;border-radius:19px;font-size:12px;box-shadow:var(--glass-edge),0 3px 10px rgb(35 44 58 / 9%);white-space:nowrap; }
.studio-dialog button:disabled { opacity:.5;cursor:not-allowed; }
.studio-dialog button:not(:disabled):hover { color:#11151d; }
.studio-dialog :is(button,input,select):focus-visible { outline:2px solid #495365;outline-offset:3px; }
.desk-scroll { position:relative;height:min(57dvh,620px);min-height:260px;overflow:auto;overscroll-behavior:contain;margin:0 16px;scrollbar-width:thin; }
.desk-board { position:relative;min-height:480px;isolation:isolate; }
.desk-piece { position:absolute;border-radius:14px;padding:6px;background:var(--glass-surface);backdrop-filter:blur(min(var(--glass-effective-blur),6px));-webkit-backdrop-filter:blur(min(var(--glass-effective-blur),6px));box-shadow:var(--glass-edge),0 8px 20px rgb(32 43 62 / 13%);transition:box-shadow 200ms; }
.desk-piece.is-moving { box-shadow:var(--glass-edge),0 16px 30px rgb(32 43 62 / 22%); }
.desk-piece-head { display:flex;align-items:center;gap:4px;min-height:34px; }
.desk-move { display:flex;align-items:center;gap:5px;min-width:0;flex:1;min-height:34px;cursor:grab;touch-action:none;text-align:left;font-size:11px;padding:0 3px; }
.desk-move span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.desk-move:active { cursor:grabbing; }
.desk-remove { display:grid;place-items:center;flex-shrink:0;width:30px;height:34px;border-radius:50%; }
.desk-remove svg { width:14px;height:14px; }
.desk-piece-media { display:block;position:relative;width:100%;aspect-ratio:1/1.06;overflow:hidden;border-radius:9px; }
.desk-piece-media img { width:100%;height:100%;object-fit:cover;display:block; }
.desk-kind { position:absolute;right:6px;bottom:6px;padding:4px 7px;border-radius:9px;font-size:10px;color:#252b34;background:var(--glass-surface);backdrop-filter:blur(var(--glass-effective-blur));text-shadow:0 1px 2px #fff; }
.desk-piece-foot { display:flex;align-items:center;justify-content:space-between;gap:4px;padding-top:5px;min-height:35px; }
.desk-piece-foot > span { font-size:10px;color:#4d535e; }
.desk-piece-foot button { display:flex;align-items:center;gap:4px;min-height:32px;font-size:10px;padding:5px;border-radius:10px; }
.desk-piece-foot svg { width:14px;height:14px; }
.studio-foot { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px 22px;font-size:11px;line-height:1.6;color:#4d5460; }
.studio-empty { min-height:300px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 15px; }
.studio-empty[hidden], .desk-board[hidden] { display:none; }
.studio-empty > svg { width:36px;height:36px;margin-bottom:16px; }
.studio-empty h3 { font-size:21px;letter-spacing:-.02em;margin:0 0 10px; }
.studio-empty p { font-size:13px;line-height:1.8;margin:0 0 20px;color:#4d5460; }
.studio-notice { position:fixed;z-index:100;bottom:90px;left:24px;max-width:min(390px,calc(100vw - 48px));padding:12px 17px;border-radius:16px;background:var(--glass-surface);backdrop-filter:blur(var(--glass-effective-blur));box-shadow:var(--glass-edge),0 6px 22px rgb(30 40 57 / 17%);font-size:12px;color:#242a34;opacity:0;pointer-events:none;transition:opacity 160ms; }
.studio-notice.show { opacity:1; }
@keyframes studio-open { from {opacity:.7;transform:translateY(8px)} to {opacity:1;transform:translateY(0)} }
@media (max-width:720px) {
 .desk-card-actions { padding:5px 6px 10px;gap:2px; }.desk-card-actions button { gap:3px;padding:5px 4px;font-size:10px; }.desk-card-actions svg { width:15px;height:15px; }
 .desk-dock { left:14px;bottom:max(14px,env(safe-area-inset-bottom));max-width:calc(100vw - 147px);padding:3px;gap:1px; }
 .desk-dock button { padding:6px 8px;min-height:38px;font-size:11px;white-space:nowrap;gap:0; }.desk-dock button > svg {display:none;}.desk-dock b {margin-left:1px;}
 .studio-dialog { width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:20px; }
 .studio-head { padding:20px 16px 14px;gap:10px; }.studio-head h2 {font-size:22px;}.studio-head p {font-size:11px;}
 .studio-toolbar { padding:0 16px 14px;flex-wrap:wrap;gap:7px; }.studio-toolbar > span {width:100%;font-size:11px;}.studio-toolbar button {font-size:11px;padding:7px 10px;}
 .desk-scroll {margin:0 8px;height:52dvh;}.desk-piece {padding:5px;}.desk-move {font-size:10px;}.desk-move svg {width:14px;height:14px;}.desk-remove {width:24px;}
 .studio-foot {padding:14px 16px 18px;flex-wrap:wrap;gap:5px;font-size:10px;}
 .studio-notice {left:14px;bottom:80px;font-size:11px;}
}
@media (prefers-reduced-motion:reduce) { .studio-dialog[open] {animation:none;} .studio-notice,.desk-piece {transition:none;} }
/* Override the old site's generic footer styles inside these workspaces. */
.studio-foot { margin:0;border:0;background:var(--glass-surface); }
.studio-foot > span { font-size:inherit; }
.studio-dialog .desk-move:disabled { opacity:1;cursor:default; }
.desk-drag-preview { position:fixed;top:0;left:0;z-index:100;width:92px;height:108px;object-fit:cover;border-radius:12px;pointer-events:none;box-shadow:0 14px 28px rgb(30 40 56 / 25%); }
.is-content-dragging { user-select:none;cursor:grabbing; }


/* source: /hanshop-web/responsive-brand4.css?v=mobile4 */
/* Device adaptation keeps content readable instead of shrinking the desktop UI. */
html { -webkit-text-size-adjust:100%;text-size-adjust:100%; }
:is(.header,.filterbar,.post,.detail-copy,.member-body) { min-width:0; }
#detail-media img { display:block;width:100%;height:auto;max-width:100%; }
#detail-media video { display:block;width:100%;max-width:100%;max-height:80dvh;object-fit:contain; }
.studio-head { position:sticky;top:0;z-index:8;background:var(--reading-surface);border-radius:24px 24px 0 0; }
@media (max-width:720px) {
  /* 16 px controls avoid automatic form-focus zoom on iPhone Safari. */
  input:not([type="range"]),textarea,select,.header .search input,.member-body input select { font-size:16px; }
  .header .search { min-width:0; }
  .header .search input { min-width:0;width:100%; }
  body #detail { width:calc(100vw - 20px);max-height:calc(100dvh - 24px); }
  #detail .modal-close { position:sticky;top:0;float:right;z-index:5;margin:0 0 -44px -44px; }
  #detail-media video { height:auto;max-height:68dvh; }
  #detail .detail-copy { max-height:none;position:static;padding:24px 20px; }
  #detail #detail-caption { font-size:14px;line-height:1.9; }
  .studio-head { border-radius:20px 20px 0 0; }
}
@media (pointer:coarse) {
  .save,.rail-controls button,.member-entry,.studio-close,.desk-remove { min-width:44px;min-height:44px; }
  .desk-card-actions button,.desk-piece-foot button,.studio-toolbar button,.glass-presets button,.studio-foot button { min-height:44px; }
  .desk-move:disabled { cursor:default; }
}
@media (max-width:350px) { .masonry { gap:10px; }.post .caption { font-size:11px; } }

/* Mobile feed uses short summaries; full text remains in the detail reader. */
.caption-more { display:none; }
@media (max-width:720px) {
  #feed .post .caption {
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
    line-height:1.65;font-size:12px;max-height:3.3em;overflow:hidden;
    white-space:normal;overflow-wrap:anywhere;margin-top:7px;
  }
  #feed .caption-more {
    display:flex;align-items:center;gap:5px;min-height:36px;padding:4px;
    font-size:11px;font-weight:600;color:#645366;text-align:left;
  }
  #feed .caption-more:focus-visible { outline-offset:1px; }
  #feed .post-brand { gap:5px; }
  #feed .post-brand > button:first-child { min-width:0;flex:1; }
  #feed .post-brand .save { flex-shrink:0; }
  #feed .post-time { font-size:10px;line-height:1.6;overflow-wrap:anywhere; }
  #feed .post { margin-bottom:24px; }
}


/* source: /hanshop-web/hero-brands.css?v=1 */
/* Replace only the original coin faces. Main artwork and downloads stay intact. */
.hero-live-brands { position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0; }
.hero-live-brands.is-ready { opacity:1; }
.hero-brand-edge { fill:white;stroke:rgb(61 66 76 / 20%);stroke-width:1;filter:drop-shadow(1px 5px 5px rgb(25 31 42 / 14%)); }
.hero-brand-rim { fill:none;stroke:rgb(255 255 255 / 70%);stroke-width:2; }
.hero :is(.hero-logo,.hero-store,.hero-cta,.hero-pause) { z-index:3; }