:root {
  
  --yuebai:     #F5F2E9;   
  --xiang:      #E6DCC6;   
  --ai:         #B7C7B1;   
  --ai-light:   #CBD6C6;   
  --piao:       #86A293;   
  --dai:        #335B52;   
  --dai-deep:   #26443D;   
  --dai-soft:   rgba(51, 91, 82, .08);
  --dai-line:   rgba(51, 91, 82, .22);

  
  --canvas:     var(--yuebai);
  
  --paper:      #FDFBF5;
  --card:       #FDFBF5;
  
  --paper-2:    #E2E6D9;

  
  --ink:        #1E2A26;
  --ink-2:      #4A554F;
  --ink-3:      #8A948C;
  
  --line:       #E3DECC;
  --line-2:     #CFC9B5;
  --seal:       #9E2B22;   

  
  --gold:       #AB9164;
  --gold-deep:  #693F27;
  --gold-soft:  rgba(171, 145, 100, .08);
  --gold-rgb:   171, 145, 100;   

  
  --gold-light:      #E3CB96;
  --gold-light-hi:   #F3E2BE;
  --gold-light-soft: rgba(227, 203, 150, .14);   
  --gold-light-line: rgba(227, 203, 150, .34);   
  
  --well:       rgba(38, 68, 61, .62);
  --serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", sans-serif;
  
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Kaiti TC", "Songti SC", serif;

  
  --cell:       206px;   
  --gap-x:      20px;
  --gap-y:      26px;

  
  --toolbar-h:  57px;

   
  --toolbar-stick: var(--toolbar-h);

  

  
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.11'/%3E%3C/svg%3E");

  
  --shade-1: 0 1px 2px rgba(28, 34, 30, .05);
  --shade-2: 0 10px 24px -18px rgba(28, 34, 30, .32);
  --shade-3: 0 26px 60px -30px rgba(28, 34, 30, .42);

  
  --ease: cubic-bezier(.22, .61, .36, 1);

  
  --fs-label:   10.5px;   
  --fs-meta:    11.5px;   
  --fs-body:    13px;     
  --fs-item:    15px;     
  --fs-band:    23px;     
  --fs-num:     21px;     
}

* { box-sizing: border-box; }

html {
  background-color: var(--canvas);
  background-image: var(--grain);
  background-repeat: repeat;
  background-size: 200px 200px;   
}

html, body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  background: transparent;   
  min-height: 100vh;
  min-height: 100svh;
}

main {
  min-height: 100vh;
  min-height: 100svh;
}

body.is-locked { overflow: hidden; }

.has-reveal .reveal { opacity: 0; }
.has-reveal .reveal.is-in {
  animation: rv-rise .58s var(--ease) both;
  animation-delay: var(--rv-d, 0s);
}
@keyframes rv-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal { opacity: 1; }
  .has-reveal .reveal.is-in { animation: none; }
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

a, button, [role="button"], summary, label, select, input {
  -webkit-tap-highlight-color: transparent;
}
button, a, [role="button"], summary {
  touch-action: manipulation;
}

html, body { touch-action: pan-x pan-y; }

.strip, .erarail, .ltv-strip__row, .ltv-preview {
  overscroll-behavior-x: contain;
}
.ltv-preview { overscroll-behavior-y: contain; }

.head {
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.head__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 13px 28px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.head__stats {
  display: flex;
  gap: 26px;
  color: var(--ink-3);
  font-size: var(--fs-meta);
  letter-spacing: .06em;
}

.hnav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.hnav__link {
  font-size: 13px;
  color: var(--dai);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: .06em;
  transition: background .15s, color .15s;
}
.hnav__link:hover { background: var(--gold-soft); color: var(--gold-deep); }
.hnav__link.is-on { background: var(--dai); color: var(--yuebai); }

.topbar {
  background: var(--dai);
  border-bottom: 1px solid var(--dai-deep);
  color: var(--gold-light);
}
.topbar__inner {
  max-width: 1280px;   
  margin: 0 auto;
  
  height: 66px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar__left {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  
  margin-left: -14.93px;
  margin-right: 14.93px;
}
.tbi {
  
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gold-light);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tbi svg { width: 23px; height: 23px; }
.tbi:hover { background: var(--gold-light-soft); color: var(--gold-light-hi); }

.topbar__brand {
  display: inline-flex;
  align-items: center;
  
  gap: 11px;
  text-decoration: none;
  color: inherit;
  padding-right: 4px;
}
.topbar__mark {
  
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  
  
  background: var(--gold-light);
  color: var(--dai);
  flex: 0 0 auto;
}

.topbar__mark svg { width: 24px; height: 24px; }
.topbar__name {
  
  font-family: var(--kai);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .14em;
  
  
  margin: 0;
  white-space: nowrap;
  
  color: var(--gold-light);
}

.topsearch {
  flex: 0 1 460px;
  max-width: 460px;
  display: flex;
  align-items: center;
  
  gap: 8px;
  height: 40px;
  padding: 0 8px 0 14px;
  border: 1px solid var(--gold-light-line);
  border-radius: 999px;
  background: var(--well);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.topsearch:focus-within {
  border-color: var(--gold-light);
  background: rgba(38, 68, 61, .42);
  box-shadow: 0 0 0 3px var(--gold-light-soft);
}
.topsearch__ico { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gold-light); opacity: .78; }
.topsearch__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--gold-light);
}
.topsearch__input::placeholder { color: rgba(227, 203, 150, .76); }
.topsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.topsearch__cam {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gold-light);
  opacity: .8;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.topsearch__cam svg { width: 17px; height: 17px; }
.topsearch__cam:hover { background: var(--gold-light-soft); color: var(--gold-light-hi); opacity: 1; }

.topbar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}

.userbox { position: relative; }
.userbox__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px 0 5px;
  border: 1px solid var(--gold-light-line);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-light);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.userbox__btn:hover { border-color: var(--gold-light); color: var(--gold-light-hi); background: var(--gold-light-soft); }
.userbox__btn.is-in { border-color: var(--gold-light); color: var(--gold-light-hi); background: var(--gold-light-soft); }
.userbox__av {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-light-soft);
  color: var(--gold-light);
  flex: 0 0 auto;
}

.userbox__btn.is-in .userbox__av { background: var(--gold-light); color: var(--dai); }
.userbox__av svg { width: 16px; height: 16px; }

.userbox__caret { width: 13px; height: 13px; opacity: .72; flex: 0 0 auto; }

.userbox__pop,
.popmenu {
  position: absolute;
  top: calc(100% + 8px);
  min-width: 208px;
  z-index: 90;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 16px 42px -20px rgba(0, 0, 0, .36);
}
.userbox__pop { right: 0; }
.popmenu { left: 0; }
.userbox__pop[hidden],
.popmenu[hidden] { display: none; }

.userbox__head {
  padding: 7px 10px 9px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 5px;
}
.userbox__head b {
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
}
.userbox__head span { font-size: 11.5px; color: var(--ink-3); }

.userbox__item,
.popmenu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.userbox__item svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .8; }
.userbox__item:hover,
.popmenu__item:hover { background: var(--gold-soft); color: var(--gold-deep); }

.loginmodal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(20, 18, 15, .42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.loginmodal[hidden] { display: none; }

.loginmodal__card {
  position: relative;
  width: min(370px, 100%);
  padding: 26px 24px 22px;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .55);
}
.loginmodal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.loginmodal__close:hover { background: var(--gold-soft); color: var(--gold-deep); }
.loginmodal__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .2em;
  margin: 0 0 4px;
}
.loginmodal__sub { margin: 0 0 18px; font-size: 12px; color: var(--ink-3); }
.loginmodal__field { display: block; margin-bottom: 13px; }
.loginmodal__field span {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 5px;
  letter-spacing: .06em;
}
.loginmodal__field input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.loginmodal__field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.loginmodal__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 14px;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.loginmodal__remember input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  
  accent-color: var(--dai);
  cursor: pointer;
}
.loginmodal__remember span { display: inline-flex; align-items: baseline; gap: 7px; }
.loginmodal__remember i { font-style: normal; font-size: 11.5px; opacity: .72; }
.loginmodal__msg { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); }
.loginmodal__msg[hidden] { display: none; }
.loginmodal__msg.is-err { color: #B3261E; }
.loginmodal__msg.is-ok { color: #2E7D52; }
.loginmodal__go {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: var(--dai);
  color: var(--yuebai);
  font: inherit;
  font-size: 14px;
  letter-spacing: .18em;
  cursor: pointer;
  transition: background .15s;
}
.loginmodal__go:hover { background: var(--gold-deep); }
.loginmodal__go:disabled { opacity: .6; cursor: default; }

.loginmodal__card[hidden] { display: none; }

.loginmodal__tabs[hidden], .loginmodal form[hidden] { display: none; }

.loginmodal__tabs {
  display: flex;
  gap: 18px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.loginmodal__tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 0 9px;
  margin-bottom: -1px;                 
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.loginmodal__tab:hover { color: var(--ink-2); }
.loginmodal__tab.is-on { color: var(--dai); border-bottom-color: var(--gold); }

.loginmodal__field .loginmodal__code {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  font-size: inherit;
  color: inherit;
}
.loginmodal__field .loginmodal__code input { flex: 1 1 auto; width: auto; min-width: 0; }
.loginmodal__code button {
  flex: none;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--paper-2);
  font: inherit;
  font-size: 12.5px;
  color: var(--gold-deep);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.loginmodal__code button:hover:not(:disabled) {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--dai);
}
.loginmodal__code button:disabled { opacity: .6; cursor: default; }

.loginmodal__hint {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

.loginmodal__or { display: inline-block; margin: 0 6px; opacity: .55; }

.loginmodal__agree {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink-3);
  opacity: .85;
}
.loginmodal__agree a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.loginmodal__agree a:hover { color: var(--dai); }

.loginmodal__switch {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
}
.loginmodal__switch button {
  border: 0;
  background: transparent;
  padding: 0 2px;
  font: inherit;
  color: var(--gold-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.loginmodal__switch button:hover { color: var(--dai); }

.loginmodal__switch button[hidden] { display: none; }

.loginmodal__field span i {
  font-style: normal;
  margin-left: 4px;
  font-size: 11px;
  opacity: .65;
}

.tbar-toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.tbar-toast__item {
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(23, 23, 23, .88);
  color: #F5F5F5;
  font-size: 12.5px;
  letter-spacing: .05em;
  transition: opacity .3s, transform .3s;
}
.tbar-toast__item.is-out { opacity: 0; transform: translateY(6px); }

.head__stats b {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-num);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(253, 251, 245, .92);   
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.toolbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.toolbar .seg {
  display: flex;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper-2);   
}
.toolbar .seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-body);
  padding: 7px 18px;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.toolbar .seg button:hover { background: rgba(51, 91, 82, .07); }
.toolbar .seg button.is-on {
  background: var(--dai);
  color: var(--yuebai);
}

.field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
  color: var(--ink-3);
  letter-spacing: .06em;
  white-space: nowrap;
}
.field--grow { flex: 1 1 190px; min-width: 150px; }
.field select,
.field input {
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: transparent;        
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 7px 14px;
  min-width: 0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field select { max-width: 200px; cursor: pointer; }
.field input { width: 100%; }
.field select:hover,
.field input:hover { border-color: var(--piao); }
.field select:focus,
.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-ghost {
  appearance: none;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease),
              background .18s var(--ease);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-deep); }

.seg__n {
  margin-left: 6px;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.seg button.is-on .seg__n { color: rgba(255, 255, 255, .78); }

.stage {
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 28px 80px;
  min-height: 60vh;
}
.count {
  margin: 0 0 22px;
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
  
  font-variant-numeric: tabular-nums;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr));
  gap: var(--gap-y) var(--gap-x);
  align-items: start;   
}

.density {
  display: flex;
  border: 1px solid var(--line-2);
  border-radius: 999px;   
  overflow: hidden;
}
.density button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  padding: 7px 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.density button + button { border-left: 1px solid var(--line); }
.density button:hover { background: var(--dai-soft); color: var(--ink-2); }
.density button.is-on { background: var(--dai); color: var(--yuebai); }
.density svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.era {
  grid-column: 1 / -1;
  position: sticky;
  top: var(--toolbar-stick);
  z-index: 6;
  display: flex;
  align-items: baseline;
  gap: 13px;
  margin: 30px calc(var(--gap-x) / -2) 6px;
  padding: 9px 12px 10px;
  
  background: var(--paper);
  background-image: linear-gradient(90deg,
    var(--line-2) 0%, rgba(207, 201, 181, .34) 62%, rgba(207, 201, 181, 0) 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  border-bottom: 0;
  box-shadow: 0 6px 10px -9px rgba(28, 34, 30, .18);
}
.era:first-child { margin-top: 0; }
.era__name {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .16em;
  color: var(--ink);

  
  display: flex;
  align-items: center;
  gap: 9px;
}
.era__name::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dai);
  flex: 0 0 auto;
}

.era__span {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.era__n {
  margin-left: auto;
  font-size: var(--fs-meta);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.rail {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 7px 5px 7px 7px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(253, 251, 245, .96);
  backdrop-filter: saturate(170%) blur(10px);
  box-shadow: var(--shade-2);
  max-height: 76vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.rail[hidden] { display: none; }
.rail::-webkit-scrollbar { display: none; }
.rail__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: .06em;
  padding: 5px 10px 5px 9px;
  cursor: pointer;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  text-align: left;
}
.rail__btn:hover { color: var(--ink); background: rgba(0, 0, 0, .04); }
.rail__btn.is-on {
  color: var(--dai);
  border-left-color: var(--dai);
  background: var(--dai-soft);
}

@media (min-width: 1180px) {
  body.has-rail .stage { padding-right: 122px; }
}

.work { cursor: pointer; }

.work__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--xiang);   
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shade-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

.work:hover .work__frame {
  transform: translateY(-3px);
  box-shadow: var(--shade-2);
}
.work__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.work__frame.is-empty::after {
  content: "暂 无 图 版";
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--ink-3);
}

.seal {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  background: var(--seal);
  color: #FFFFFF;
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 26px;
  text-align: center;
  border-radius: 2px;
  letter-spacing: .02em;
  box-shadow: 0 1px 3px rgba(28, 34, 30, .22);
}
.seal--sm { font-size: 11px; letter-spacing: -.02em; }

.hd-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 20px;
  padding: 0 6px;
  background: rgba(38, 68, 61, .72);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: rgba(255, 255, 255, .93);
  font-size: var(--fs-label);
  line-height: 20px;
  letter-spacing: .06em;
  border-radius: 2px;
  pointer-events: none;
}

.vip-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px 0 6px;
  
  background: var(--gold-light);
  color: var(--gold-deep);
  
  border: 1px solid var(--gold-deep);
  font-size: var(--fs-label);
  line-height: 20px;
  letter-spacing: .06em;
  border-radius: 2px;
  pointer-events: none;
}

.vip-flag svg { display: block; }

.btn-ghost.is-on {
  background: var(--dai);
  border-color: var(--dai);
  color: var(--yuebai);
}

.work__meta { padding: 12px 1px 0; }
.work__title {
  font-family: var(--serif);
  font-size: var(--fs-item);
  font-weight: 500;
  margin: 0 0 5px;
  line-height: 1.42;
  
  letter-spacing: .03em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .18s var(--ease);
}

.work:hover .work__title { color: var(--gold-deep); }
.work__sub {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  
  font-variant-numeric: tabular-nums;
}

.work__kind {
  font-size: var(--fs-label);
  color: var(--ink-3);
  letter-spacing: .08em;
  padding: 0;
  line-height: 1.5;
}

.work__sub .work__kind + .work__kind::before {
  content: "·";
  margin-right: 7px;
  color: var(--line-2);
}

.placeholder {
  padding: 90px 0;
  text-align: center;
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .14em;
}
.placeholder p { margin: 10px 0 0; font-family: var(--sans); font-size: 13px; letter-spacing: 0; }

.more {
  margin-top: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.more[hidden] { display: none; }   
.more__hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.foot {
  
  background: transparent;
  color: var(--ink-2);
}

.foot__legal {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4px 28px 26px;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .02em;
  text-align: center;
  
  word-spacing: 6px;
  
  color: rgba(30, 42, 38, .68);
}

@media (max-width: 599px) {
  .foot__legal { padding-left: 16px; padding-right: 16px; }
}
.foot__legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 42, 38, .24);
  
  display: inline-block;
  white-space: nowrap;
}
.foot__legal a:hover { color: var(--dai); border-bottom-color: var(--dai-line); }
.foot__inner {
  
  display: none;
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 28px 38px;
  font-size: 12px;
  
  color: var(--ink-2);
  line-height: 1.9;
}
.foot__inner b { color: var(--dai); font-weight: 500; }   

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(18, 30, 26, .52);   
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: max(24px, env(safe-area-inset-top, 0px))
           max(24px, env(safe-area-inset-right, 0px))
           max(24px, env(safe-area-inset-bottom, 0px))
           max(24px, env(safe-area-inset-left, 0px));
}

.overlay[hidden] { display: none; }

.sheet {
  position: relative;
  width: min(1180px, 100%);
  
  height: min(760px, 100%);
  background: var(--paper-2);
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 336px;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .42);
}
@media (min-height: 940px) {
  .sheet { height: min(940px, 100%); }
}

.sheet__close {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink-2);
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.sheet__close:hover { color: var(--ink); border-color: var(--ink-2); }

.sheet__viewer {
  position: relative;
  
  background: linear-gradient(to top,
    rgb(35, 35, 35) 0%, rgb(152, 151, 151) 54%,
    rgb(228, 228, 228) 92%, rgb(138, 138, 138) 100%);
  min-width: 0;
  overflow: hidden;
}

.sheet__viewer::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(50% - 58px);
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid rgba(0, 0, 0, .18);
  border-top-color: rgba(0, 0, 0, .55);
  border-radius: 50%;
  animation: ltv-spin .9s linear infinite;
  pointer-events: none;
}
@keyframes ltv-spin { to { transform: rotate(360deg); } }
.sheet__viewer.is-ready::before,
.sheet__viewer.is-void::before { opacity: 0; }

.osd { position: absolute; left: 0; right: 0; top: 0; bottom: 0; touch-action: none; }
.osd__fallback { width: 100%; height: 100%; object-fit: contain; display: block; }

.sheet__viewer #osd,
.sheet__viewer #osdGhost,
.sheet__viewer .osd__fallback { transition: filter .18s var(--ease); }
.sheet__viewer.is-gateblur #osd,
.sheet__viewer.is-gateblur #osdGhost,
.sheet__viewer.is-gateblur .osd__fallback { filter: blur(14px); }
.osd__void {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .5);
  font-family: var(--serif);
  font-size: 14px;
}

.osd__ghost {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;        
  opacity: 0;
  transition: opacity .22s ease;
}
.osd__ghost.is-on { opacity: 1; }

.osd__notice {
  position: absolute;
  left: 50%;
  top: calc(50% - 40px);
  transform: translate(-50%, -50%);
  z-index: 5;
  margin: 0;
  max-width: min(78%, 420px);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
  background: rgba(0, 0, 0, .62);
  padding: 6px 12px;
  border-radius: 5px;
  pointer-events: none;
}
.osd__notice[hidden] { display: none; }

#osd .openseadragon-message { display: none !important; }

.osd__hint {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;
  margin: 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .78);
  background: rgba(0, 0, 0, .46);
  padding: 3px 9px;
  border-radius: 4px;
  pointer-events: none;
}

.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .hint-pointer { display: none; }
  .hint-touch { display: inline; }
}

#osd .navigator {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 18px -9px rgba(0, 0, 0, .85);
}
#osd .navigator .displayregion { border-radius: 2px; }

.refgrid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.refgrid[hidden] { display: none; }
.refgrid span {
  position: absolute;
  background: rgba(171, 145, 100, .62);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .6);
}

.refgrid span:nth-child(1) { left: 0; right: 0; top: 33.333%; height: 1px; }
.refgrid span:nth-child(2) { left: 0; right: 0; top: 66.667%; height: 1px; }

.refgrid span:nth-child(3) { top: 0; bottom: 0; left: 33.333%; width: 1px; }
.refgrid span:nth-child(4) { top: 0; bottom: 0; left: 66.667%; width: 1px; }

.hdgate {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  pointer-events: none;        
}
.sheet__viewer.has-pages .hdgate { bottom: 180px; }
.hdgate[hidden] { display: none; }

.hdgate__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  color: #fff;
  text-shadow: none;
  max-width: min(320px, calc(100vw - 64px));
  padding: 24px 28px 22px;
  border-radius: 18px;
  background: rgba(22, 28, 26, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .46), 0 1px 0 rgba(255, 255, 255, .1) inset;
}
.hdgate__line {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  font-weight: 500;
  max-width: 15em;   
}

.hdgate__cta {
  pointer-events: auto;
  display: inline-block;
  padding: 10px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #F0C862 0%, #DFA93A 100%);
  color: #5A3A18;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .03em;
  text-decoration: none;
  text-shadow: none;
  box-shadow: 0 3px 12px rgba(180, 130, 40, .42), 0 1px 0 rgba(255, 255, 255, .45) inset;
  transition: filter .14s ease, transform .14s ease;
}
.hdgate__cta:hover { filter: brightness(1.06); }
.hdgate__cta:active { transform: scale(.98); }

.ltv-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                      
  height: 68px;
  z-index: 7;
  background: transparent;        
  pointer-events: none;           
}
.ltv-bar[hidden] { display: none; }

.ltv-bar__inner {
  height: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 96px;
  pointer-events: none;
}
.ltv-bar__group {
  display: flex;
  align-items: center;
  gap: 3.5px;
  pointer-events: none;
}

.ltv-bar__btn {
  appearance: none;
  font: inherit;
  height: 58px;
  min-width: 52px;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, .80);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: background .15s, color .15s;
}
.ltv-bar__btn:hover { background: rgba(255, 255, 255, .10); color: #FFFFFF; }
.ltv-bar__btn svg {
  width: 21px;
  height: 21px;
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}
.ltv-bar__label { max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
.ltv-bar__btn.is-on { color: var(--gold); }

.ltv-bar__btn:disabled,
.ltv-bar__btn:disabled:hover {
  background: transparent;
  color: rgba(255, 255, 255, .30);
  cursor: default;
}

.ltv-more {
  position: absolute;
  right: 12px;
  bottom: 76px;                        
  z-index: 8;
  width: min(312px, calc(100% - 24px));
  border-radius: 10px;
  background: rgba(9, 9, 9, .95);
  color: #FFFFFF;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .28), 0 18px 44px -14px rgba(0, 0, 0, .8);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.ltv-more[hidden] { display: none; }

.ltv-more__head {
  padding: 8px 12px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.ltv-more__head h2 { margin: 0; font-size: 13px; font-weight: 500; }
.ltv-more__x {
  appearance: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, .70);
  cursor: pointer;
}
.ltv-more__x:hover { color: #FFFFFF; }
.ltv-more__x svg { width: 15px; height: 15px; display: block; }

.ltv-more__body { padding: 6px 12px 12px; }
.ltv-more__sec { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.ltv-more__sec:last-child { border-bottom: 0; }
.ltv-more__sec h3 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, .45);
}
.ltv-more__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ltv-more__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ltv-more__cell {
  appearance: none;
  font: inherit;
  min-height: 54px;
  min-width: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #FFFFFF;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ltv-more__cell:hover { background: rgba(255, 255, 255, .10); }
.ltv-more__cell svg { width: 22px; height: 22px; display: block; flex: 0 0 auto; }
.ltv-more__cell span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltv-more__cell--wide { grid-column: span 2; }
.ltv-more__cell.is-on { color: var(--gold); background: rgba(171, 145, 100, .22); }
.ltv-more__cell:disabled,
.ltv-more__cell:disabled:hover {
  background: transparent;
  color: rgba(255, 255, 255, .28);
  cursor: default;
}

.ltv-more__pct { font-size: 14px; font-variant-numeric: tabular-nums; }

.overlay.is-full {
  padding: 0;

  
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.overlay.is-full .osd,
.overlay.is-full .osd__ghost,
.overlay.is-full .refgrid {
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px);
}

.overlay.is-full .osd__ghost { width: auto; height: auto; }

.overlay.is-full .ltv-bar   { bottom: env(safe-area-inset-bottom, 0px); }
.overlay.is-full .ltv-strip { bottom: env(safe-area-inset-bottom, 0px); }
.overlay.is-full .ltv-more  { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.overlay.is-full .sheet__viewer.has-pages .osd      { bottom: calc(180px + env(safe-area-inset-bottom, 0px)); }
.overlay.is-full .sheet__viewer.has-pages .ltv-bar  { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
.overlay.is-full .sheet__viewer.has-pages .ltv-more { bottom: calc(192px + env(safe-area-inset-bottom, 0px)); }

.overlay.is-full .sheet__close {
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: calc(10px + env(safe-area-inset-left, 0px));
}
.overlay.is-full .osd__hint {
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: calc(14px + env(safe-area-inset-left, 0px));
}
.overlay.is-full .sheet {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  grid-template-columns: 1fr 336px;
}

.sheet__viewer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(to top, rgba(0, 0, 0, .60), rgba(0, 0, 0, 0));
  pointer-events: none;
  opacity: 1;
  transition: opacity .2s ease;
}
.overlay.is-full.is-immersive .sheet__viewer::after { opacity: 0; }

.overlay.is-full.is-immersive .ltv-bar,
.overlay.is-full.is-immersive .ltv-strip,
.overlay.is-full.is-immersive .sheet__close,
.overlay.is-full.is-immersive .osd__hint {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}

.overlay.is-full.is-immersive .sheet__viewer.has-pages .osd {
  bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 900px), (max-height: 500px), (any-pointer: coarse) {
  .overlay.is-full .osd,
  .overlay.is-full .osd__ghost,
  .overlay.is-full .refgrid {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .overlay.is-full .sheet__viewer.has-pages .osd,
  .overlay.is-full .sheet__viewer.has-pages .osd__ghost,
  .overlay.is-full.is-immersive .sheet__viewer.has-pages .osd,
  .overlay.is-full.is-immersive .sheet__viewer.has-pages .osd__ghost {
    bottom: 0;
  }
}

.ltv-bar,
.ltv-strip,
.sheet__close,
.osd__hint {
  transition: opacity .2s ease, visibility 0s linear 0s;
}

@media (max-width: 900px) {
  .sheet,
  .overlay.is-full .sheet {
    grid-template-columns: 1fr;
    
    grid-template-rows: minmax(120px, 1fr) minmax(0, 44%);
  }
  .sheet__info {
    border-left: 0;
    border-top: 1px solid var(--line);
    
  }
}

.ltv-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 112px;
  padding: 3px 0 5px;
  z-index: 6;
  background: transparent;        
  pointer-events: none;           
}
.ltv-strip[hidden] { display: none; }

.ltv-strip__page {
  height: 22px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.ltv-strip__rowwrap { position: relative; height: 85px; }

.ltv-strip__row {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 32px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  pointer-events: auto;
}
.ltv-strip__row::-webkit-scrollbar { display: none; }
.ltv-strip__row.is-dragging { cursor: grabbing; }

.ltv-strip__row::before,
.ltv-strip__row::after {
  content: '';
  flex: 0 0 auto;
  width: calc(50% - 28px);
}

.ltv-strip__item {
  flex: 0 0 auto;
  position: relative;
  width: 56px;
  height: 82px;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: .54;
  cursor: pointer;
  transition: opacity .15s;
}
.ltv-strip__item:hover { opacity: .86; }
.ltv-strip__item.is-on { opacity: 1; }

.ltv-strip__thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 76px;
  margin: -38px 0 0 -27px;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: #1E1E1E;
}
.ltv-strip__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.ltv-strip__item.is-on::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 1px;
  width: 72px;
  height: 82px;
  margin-left: -36px;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .58), 0 0 18px rgba(255, 255, 255, .2);
  pointer-events: none;
}

.ltv-strip__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38px;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.ltv-strip.fade-l .ltv-strip__fade--l,
.ltv-strip.fade-r .ltv-strip__fade--r { opacity: 1; }
.ltv-strip__fade--l { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); }
.ltv-strip__fade--r { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); }

.ltv-strip__preview {
  position: absolute;
  right: 12px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 5;
  height: 52px;
  min-width: 46px;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, .90);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  pointer-events: auto;
}
.ltv-strip__preview:hover { color: #FFFFFF; background: rgba(255, 255, 255, .10); }
.ltv-strip__preview svg { width: 21px; height: 21px; display: block; }

.sheet__viewer.has-pages .osd     { bottom: 180px; }
.sheet__viewer.has-pages .ltv-bar { bottom: 112px; }
.sheet__viewer.has-pages .ltv-more{ bottom: 192px; }

.ltv-arrow {
  position: absolute;
  z-index: 4;
  
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  opacity: .40;
  cursor: pointer;
  pointer-events: auto;           
  transition: opacity .15s;
}
.ltv-arrow:hover { opacity: 1; }
.ltv-arrow[hidden] { display: none; }
.ltv-arrow svg {
  width: 32px;
  height: 32px;
  display: block;
  
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}
.ltv-arrow--next svg { transform: rotate(180deg); }

.ltv-preview {
  position: absolute;
  inset: 0;
  z-index: 9;
  padding: 32px 32px 48px;
  overflow-y: auto;
  background: rgba(12, 12, 12, .94);
  backdrop-filter: blur(6px);
}
.ltv-preview[hidden] { display: none; }
.ltv-preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}
.ltv-preview__item {
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px;
  background: #1E1E1E;
  aspect-ratio: 54 / 76;
  overflow: hidden;
  cursor: pointer;
  opacity: .7;
  transition: opacity .15s, border-color .15s;
}
.ltv-preview__item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ltv-preview__item:hover { opacity: 1; }
.ltv-preview__item.is-on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ltv-preview__close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ltv-preview__close:hover { background: rgba(255, 255, 255, .20); }

.sheet.no-info .sheet__info { display: none; }
@media (min-width: 901px) {
  .sheet.no-info,
  .overlay.is-full .sheet.no-info { grid-template-columns: 1fr 0; }
}

@media (max-width: 900px) {
  .sheet.no-info,
  .overlay.is-full .sheet.no-info { grid-template-rows: minmax(0, 1fr) 0; }
}

@media (max-width: 700px) {
  .ltv-bar__inner { padding: 0 12px; gap: 24px; }
  .ltv-more { right: 12px; }
  .ltv-preview { padding: 20px 16px 32px; }
}

@media (max-width: 560px) {
  .ltv-bar__inner { justify-content: space-between; gap: 8px; }
  .ltv-bar__btn { min-width: 44px; }
  .ltv-strip__row { padding: 0 16px; }
  .ltv-strip__fade { width: 24px; }
  .ltv-strip__item { width: 52px; }
  
  .ltv-strip__row::before,
  .ltv-strip__row::after { width: calc(50% - 26px); }
}

.sheet__info {
  border-left: 1px solid var(--line);
  padding: 26px 24px 30px;
  overflow-y: auto;
  background: var(--card);
}
.sheet__info h2 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  margin: 0 0 2px;
  line-height: 1.45;
}
.sheet__info .en {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 18px;
  font-style: italic;
}
.sheet__info .artist {
  font-family: var(--serif);
  font-size: 15px;
  margin: 0 0 4px;
}
.sheet__info .artist span { color: var(--ink-3); font-size: 12.5px; font-family: var(--sans); }

.sheet__info .artist__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--dai-line);
}
.sheet__info .artist__link:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}
.sheet__info .artist__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 11.5px;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.crumb__link {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 0;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
  
  text-decoration: none;
}
.crumb__link:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }
.crumb__sep { color: var(--line-2); }

.subtitle {
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: .06em;
  margin: 4px 0 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}.chip {
  font-size: 11.5px;
  color: var(--ink-2);
  background: #F7F7F7;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 18px;
}

.blk {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.blk__title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ink);
  margin: 0 0 9px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.blk__title::before {
  content: "";
  width: 3px;
  height: 12px;
  background: var(--dai);
  flex: 0 0 auto;
  transform: translateY(1px);
}
.blk__body {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-2);
  word-break: break-word;
}

.blk__body--verse {
  white-space: pre-wrap;
  font-family: var(--serif);
  line-height: 2;
  letter-spacing: .04em;
}
.blk__body.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blk__more {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  color: var(--gold-deep);
  padding: 5px 0 0;
  cursor: pointer;
}
.blk__more:hover { text-decoration: underline; }
.blk__by {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 7px;
}

dl.kv {
  margin: 18px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
dl.kv div {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
dl.kv dt {
  flex: 0 0 62px;
  color: var(--ink-3);
}
dl.kv dd {
  margin: 0;
  color: var(--ink);
  flex: 1;
  word-break: break-word;
}

.credit {
  margin-top: 20px;
  padding: 12px 13px;
  background: var(--paper-2);
  border-left: 3px solid var(--dai);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.75;
}
.credit b { color: var(--ink); font-weight: 500; }
.credit a { color: var(--gold-deep); }

.preview-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.75;
}
.preview-note b { color: var(--ink-2); font-weight: 500; }

.vip-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--dai-line);
  border-radius: 3px;
  background: var(--dai-soft);
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-2);
}

.vip-banner__tag {
  padding: 1px 8px;
  border-radius: 2px;
  background: var(--dai);
  color: var(--gold-light);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  white-space: nowrap;
}
.vip-banner a { color: var(--gold-deep); white-space: nowrap; }

@media (max-width: 860px) {
  
  .head__inner, .toolbar__inner, .stage, .foot__inner { padding-left: 16px; padding-right: 16px; }

  
  .rail { display: none; }
  body.has-rail .stage { padding-right: 16px; }

  
  .density { display: none; }

  .era { margin-left: -7px; margin-right: -7px; }
}

@media (max-width: 620px) {
  
  .grid { --cell: 46vw; grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
}

@media (max-width: 1100px), (hover: none) {
  .seg button { min-height: 40px; }
  .field select, .field input { min-height: 40px; }
  .subject { min-height: 40px; }
  .btn-ghost { min-height: 40px; }
  .hnav__link { min-height: 40px; display: inline-flex; align-items: center; }
  .era-chip { min-height: 44px; }
}

@media (max-width: 1100px), (hover: none) {
  .tbi, .topsearch__cam, .userbox__btn, .topbar__brand,
  .band__more, .hnav__link, .btn-ghost { position: relative; }

  
  .band__more::before,
  .hnav__link::before,
  .btn-ghost::before,
  .topbar__brand::before,
  .userbox__btn::before,
  .tbi::before,
  .topsearch__cam::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -3px;
    bottom: -3px;
  }

  
  .tbi::before { left: -3px; right: -3px; top: -3px; bottom: -3px; }              
  .topsearch__cam::before { left: -8px; right: -8px; top: -8px; bottom: -8px; }   

  
  .topbar__brand::before,
  .userbox__btn::before { top: -6px; bottom: -6px; }

  
  .band__more::before { top: -13px; bottom: -13px; }
}

@media (max-width: 860px) {
  .topbar__inner {
    height: auto;
    
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .topbar__left { order: 1; flex: 0 0 auto; }
  .topbar__right { order: 2; flex: 0 0 auto; margin-left: auto; }
  .topsearch { order: 3; flex: 1 1 100%; max-width: none; }
  
  .topbar__name { font-size: 16px; }
  .userbox__pop { min-width: 190px; }

  .head__inner { padding: 10px 16px; gap: 10px; }
  .hnav { order: 3; width: 100%; }
  .head__stats { font-size: 11.5px; gap: 16px; }
}

@media (hover: none) {
  .ltv-strip__item { opacity: .82; }
  .ltv-strip__item.is-on { opacity: 1; }
  .ltv-arrow { opacity: .88; }
  .ltv-bar__btn { color: rgba(255, 255, 255, .92); }
  .ltv-preview__item { opacity: .96; }
  
  .work:hover .work__frame,
  .tile:hover .tile__frame,
  .artist-card:hover { transform: none; }
}

.work:active .work__frame,
.tile:active .tile__frame {
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -16px rgba(0, 0, 0, .18);
}
.artist-card:active { border-color: var(--line-2); background: var(--card); }
.subject:active { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-soft); }
.hnav__link:active, .band__more:active, .crumb__link:active { color: var(--gold-deep); }
.seg button:active, .density button:active { background: rgba(0, 0, 0, .07); }
.ltv-bar__btn:active { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.ltv-more__cell:active { background: rgba(255, 255, 255, .16); }
.ltv-more__x:active { color: #FFFFFF; background: rgba(255, 255, 255, .16); }
.ltv-strip__preview:active { color: #FFFFFF; background: rgba(255, 255, 255, .16); }
.ltv-arrow:active { opacity: 1; }
.ltv-preview__item:active { opacity: 1; }
.ltv-preview__close:active { background: rgba(255, 255, 255, .22); }
.sheet__close:active { color: var(--ink); border-color: var(--ink-2); }

.tbi:active,
.topsearch__cam:active,
.userbox__btn:active {
  background: var(--gold-light-soft);
  color: var(--gold-light-hi);
}

.topbar__brand:active .topbar__name { color: var(--gold-light-hi); }

.btn-ghost:active {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: var(--gold-soft);
}
.era-chip:active {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: var(--gold-soft);
}

.fav-flag {
  position: absolute;
  right: 9px;
  bottom: 9px;
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 0 3px #fff, 0 0 6px rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .28);
  pointer-events: none;
}

.work__tools {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.work__tool {
  appearance: none;
  font: inherit;
  font-size: 11.5px;
  line-height: 1;
  padding: 5px 9px;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.work__tool:hover { color: var(--gold-deep); border-color: var(--gold); background: var(--gold-soft); }
.work__tool:active { color: var(--gold-deep); border-color: var(--gold); background: var(--gold-soft); }

.favbanner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -6px 0 20px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--dai);
  border-radius: 4px;
}
.favbanner[hidden] { display: none; }
.favbanner b {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
}
.favbanner__n { font-size: 12.5px; color: var(--ink-3); }
.favbanner .btn-ghost { margin-left: auto; }

.favbanner .btn-ghost + .btn-ghost { margin-left: 0; }

.grid.is-favlists {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 22px;
}
.favlist {
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}
.favlist:hover { border-color: var(--gold); box-shadow: 0 10px 26px -20px rgba(0, 0, 0, .35); }
.favlist__cover {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 4 / 3;
  background: #F2F0EC;
  gap: 1px;
  overflow: hidden;
}
.favlist__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.favlist__cover.is-one { grid-template-columns: 1fr; grid-template-rows: 1fr; }

.favlist__cover.is-one img { object-fit: contain; padding: 8px; }
.favlist__cover.is-empty {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .3em;
}
.favlist__meta { padding: 11px 13px 0; }
.favlist__name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 3px;
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.favlist__sub { margin: 0; font-size: 12px; color: var(--ink-3); }
.favlist__acts {
  display: flex;
  gap: 8px;
  padding: 10px 13px 12px;
}
.favlist__btn {
  appearance: none;
  font: inherit;
  font-size: 12px;
  padding: 5px 11px;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  cursor: pointer;
}
.favlist__btn:hover { color: var(--gold-deep); border-color: var(--gold); background: var(--gold-soft); }
.favlist__btn--danger:hover { color: var(--seal); border-color: var(--seal); background: rgba(158, 43, 34, .06); }

.favmodal__card { width: min(420px, 100%); }
.favmodal__rows {
  max-height: min(46vh, 320px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.favmodal__row {
  appearance: none;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink);
}
.favmodal__row:last-child { border-bottom: 0; }
.favmodal__row:hover { background: var(--gold-soft); }
.favmodal__row.is-on { background: var(--gold-soft); }
.favmodal__row:disabled { opacity: .55; }
.favmodal__tick {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
}
.favmodal__row.is-on .favmodal__tick { background: var(--dai); border-color: var(--dai); }
.favmodal__name { flex: 1 1 auto; font-size: 14px; }
.favmodal__row.is-on .favmodal__name { color: var(--gold-deep); }
.favmodal__n { flex: 0 0 auto; font-size: 12px; color: var(--ink-3); }
.favmodal__empty {
  margin: 0;
  padding: 22px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}
.favmodal__new { display: flex; gap: 8px; }
.favmodal__new input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 6px;
}
.favmodal__new input:focus { outline: 0; border-color: var(--gold); }
.favmodal__new button {
  appearance: none;
  font: inherit;
  font-size: 13px;
  padding: 0 16px;
  color: var(--yuebai);
  background: var(--dai);
  border: 1px solid var(--dai);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.favmodal__new button:hover { background: var(--dai-deep); border-color: var(--dai-deep); }
.favmodal__new button:disabled { opacity: .6; cursor: default; }

.userbox__n {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  color: var(--gold-deep);
  background: var(--gold-soft);
  border-radius: 9px;
}

.ltv-bar__btn--fav.is-on svg path { fill: currentColor; }

@media (max-width: 620px) {
  
  .work__tool { font-size: 11px; padding: 5px 7px; }
  .grid.is-favlists { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }

  
  .toolbar__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 16px;
  }
  .toolbar .seg { grid-column: 1 / -1; }
  
  .toolbar .seg button { flex: 1 1 auto; white-space: nowrap; }
  .toolbar .field { grid-column: span 6; }
  .toolbar .field--grow { grid-column: 1 / -1; }
  .toolbar .btn-ghost { grid-column: span 4; }
  
  .toolbar .density { display: none; }
}

.topbar__inner {
  
  height: calc(66px + env(safe-area-inset-top, 0px));
  padding-top: calc(0px + env(safe-area-inset-top, 0px));
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
}

.head__inner,
.toolbar__inner,
.stage,
.foot__inner {
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
}

.foot__inner {
  padding-bottom: calc(38px + env(safe-area-inset-bottom, 0px));
}

.toolbar { top: env(safe-area-inset-top, 0px); }

.era { top: calc(var(--toolbar-stick) + env(safe-area-inset-top, 0px)); }

@media (max-width: 900px) {
  .toolbar { position: static; }
  .era { position: static; }   
  :root { --toolbar-stick: 0px; }
}

@media (max-width: 860px) {
  
  .topbar__inner {
    height: auto;                                              
    padding-top: calc(10px + env(safe-area-inset-top, 0px));   
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .head__inner,
  .toolbar__inner,
  .stage,
  .foot__inner {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

:root {
  
  --tabbar-bg:  var(--paper);
  --tabbar-ico: 24px;
  --tabbar-h:   calc(52px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 760px) {
  :root {
    --tabbar-ico: 27px;
    --tabbar-h:   calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  :root {
    --tabbar-ico: 24px;
    --tabbar-h:   calc(52px + env(safe-area-inset-bottom, 0px));
  }
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: var(--tabbar-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);   
  background: var(--tabbar-bg);
  border-top: 1px solid var(--line);
  box-shadow: 0 -1px 3px rgba(51, 91, 82, .05);
  transition: transform .22s ease;
}

.tabbar__it {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  
  min-height: 44px;
  text-decoration: none;
  color: var(--ink-2);
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}
.tabbar__it.is-on { color: var(--gold-deep); }
.tabbar__it:active { opacity: .55; }
.tabbar__it:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

.tabbar__ico,
.tabbar__ico svg {
  width: var(--tabbar-ico);
  height: var(--tabbar-ico);
  display: block;
}

.tabbar__lb {
  font-size: 11px;
  line-height: 1;
  letter-spacing: .06em;
}
.tabbar__it.is-on .tabbar__lb { font-weight: 500; }
@media (min-width: 760px) { .tabbar__lb { font-size: 12px; } }

html.has-tabbar body { padding-bottom: var(--tabbar-h); }
html.has-tabbar .tbar-toast { bottom: calc(var(--tabbar-h) + 14px); }

body.is-locked .tabbar { transform: translateY(100%); }

@media (prefers-reduced-motion: reduce) {
  .tabbar { transition: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ltv-preview__pg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 11px;
  line-height: 1.2;
  color: var(--ai-dim, #8a8a8a);
  background: rgba(0, 0, 0, .28);
  text-align: center;
  padding: 2px;
  box-sizing: border-box;
}

.foot__sep { opacity: .45; margin: 0 6px; display: none; }
@media (min-width: 600px) {
  .foot__sep { display: inline; }
}

html.is-app .foot__icp { display: none; }

.hdcta {
  position: absolute;
  left: 50%;
  bottom: 180px;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .14) inset;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, background .14s ease, opacity .14s ease;
}
.hdcta:hover { background: rgba(255, 255, 255, .18); }
.hdcta:active { transform: translateX(-50%) scale(.97); }
.hdcta svg { flex: none; opacity: .9; }
.hdcta em {
  font-style: normal;
  font-size: 12px;
  opacity: .72;
  padding-left: 9px;
  margin-left: 2px;
  border-left: 1px solid rgba(247, 243, 234, .28);
}

.is-full .hdcta { display: none !important; }
.hdcta[hidden] { display: none !important; }

.vip-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 18px 0 6px;
}
@media (min-width: 520px) {
  .vip-plans { grid-template-columns: repeat(3, 1fr); }
}
.vip-plan {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(51, 91, 82, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.vip-plan:hover { border-color: rgba(51, 91, 82, .34); }
.vip-plan.is-on {
  border-color: #335B52;
  background: rgba(51, 91, 82, .07);
  box-shadow: 0 0 0 1px #335B52 inset;
}
.vip-plan__l { display: flex; flex-direction: column; gap: 3px; }
.vip-plan__cn { font-size: 15px; font-weight: 600; color: #23302c; }
.vip-plan__sub { font-size: 12px; color: #7b8a85; line-height: 1.3; }
.vip-plan__r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.vip-plan__price { font-size: 19px; font-weight: 700; color: #335B52; letter-spacing: -.01em; }
.vip-plan__price small { font-size: 12px; font-weight: 400; color: #7b8a85; }
.vip-plan__badge {
  position: absolute;
  top: -8px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #8a6d3b;
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
}
.vip-plan__free {
  font-size: 11px;
  color: #8a6d3b;
}