*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:#0b0d12;color:#f5f7fb;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Helvetica Neue",sans-serif;
  -webkit-text-size-adjust:100%;overscroll-behavior:none}
#app{min-height:100dvh}
.home{
  min-height:100dvh;
  padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:flex-start;gap:28px;
}
.home-header{text-align:center}
.home-header h1{margin:0;font-size:2rem;font-weight:700;letter-spacing:.04em}
.home-header .sub{margin:10px 0 0;color:#9aa3b2;font-size:.95rem}
.entries{display:flex;flex-direction:column;gap:14px;width:min(100%,420px);margin:0 auto}
.entry{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;color:inherit;
  min-height:76px;padding:18px 20px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, background .12s ease;
}
.entry:active{transform:scale(.985)}
.entry .letter{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-size:1.35rem;font-weight:800;background:rgba(255,255,255,.12)
}
.entry .label{font-size:1.25rem;font-weight:650;flex:1}
.entry .count{color:#9aa3b2;font-size:.95rem}
.entry.a .letter{background:rgba(255,92,92,.22);color:#ff8e8e}
.entry.b .letter{background:rgba(74,158,255,.22);color:#8ec2ff}
.entry.c .letter{background:rgba(80,210,140,.22);color:#8ee0b3}
.entry.d .letter{background:rgba(255,186,72,.22);color:#ffd18a}

.viewer{position:fixed;inset:0;background:#000;z-index:10;touch-action:pan-x}
.viewer[hidden]{display:none!important}
.track{
  height:100dvh;width:100%;
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:none;
  touch-action:pan-x;
  scrollbar-width:none;
  cursor:grab;
}
.track::-webkit-scrollbar{display:none}
.track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.slide{
  flex:0 0 100%;width:100%;height:100dvh;
  scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  background:#000;
  touch-action:pan-x;
}
.slide img{
  width:100%;height:100%;
  max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;
  display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;
  background:#000;
  touch-action:pan-x;
}
body.mode-viewer{overflow:hidden;touch-action:pan-x;overscroll-behavior:none}
.home-header-multi{margin-top:10px}
.entry.multi .letter{
  width:auto;min-width:46px;padding:0 8px;
  background:rgba(186,120,255,.22);color:#d2a8ff;
  font-size:.95rem;letter-spacing:.02em;white-space:nowrap
}
.entry.multi .letter.combo-long{font-size:.8rem}