:root {
    --bg: #0d0d10;
    --panel: #17171c;
    --panel-2: #22222a;
    --text: #f5f5f7;
    --muted: #a1a1aa;
    --line: rgba(255,255,255,.12);
    --accent: #ffcc33;
    --accent-ink: #1a1400;
    --sheet: #1c1c22;
    --radius: 14px;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
  body { overflow: hidden; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  .clay-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: middle;
    background-image: url("assets/clay-icons-3x3.png?v=objects-2");
    background-image: image-set(url("assets/clay-icons-3x3.webp?v=objects-3") type("image/webp"), url("assets/clay-icons-3x3.png?v=objects-2") type("image/png"));
    background-repeat: no-repeat; background-size: 300% 300%; }
  .clay-icon.age-rattle { background-position: 0% 0%; }
  .clay-icon.age-stack { background-position: 50% 0%; }
  .clay-icon.age-book { background-position: 100% 0%; }
  .clay-icon.age-backpack { background-position: 0% 50%; }
  .clay-icon.favorite { background-position: 100% 50%; }
  .clay-icon.collection { background-position: 0% 100%; }
  .clay-icon.notes { background-image: url("assets/clay-notebook.png?v=notes-1");
    background-image: image-set(url("assets/clay-notebook.webp?v=notes-2") type("image/webp"), url("assets/clay-notebook.png?v=notes-1") type("image/png"));
    background-position: center; background-size: contain; background-repeat: no-repeat; }
  .clay-icon.share { background-position: 50% 100%; }
  .clay-icon.pointer { background-position: 100% 100%; }

  #app { position: relative; height: 100dvh; max-width: 480px; margin: 0 auto; overflow: hidden; background: #000; }
  @media (min-width: 520px) { #app { box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(0,0,0,.6); } }

  /* 竖向滑动 */
  #feed { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
  #feed::-webkit-scrollbar { display: none; }
  .slide { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }

  /* 顶栏 */
  #topbar { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
    padding: calc(env(safe-area-inset-top) + 10px) 12px 10px; background: linear-gradient(rgba(0,0,0,.55), transparent); pointer-events: none; }
  #topbar > * { pointer-events: auto; }
  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(0,0,0,.45);
    border: 1px solid var(--line); font-size: 14px; backdrop-filter: blur(8px); white-space: nowrap; }
  .chip .clay-icon { width: 18px; height: 18px; }
  .chip .media-icon { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; background-image: url("assets/clay-media-controls.png?v=controls-1");
    background-image: image-set(url("assets/clay-media-controls.webp?v=controls-2") type("image/webp"), url("assets/clay-media-controls.png?v=controls-1") type("image/png"));
    background-repeat: no-repeat; background-size: 200% 100%; background-position-y: center; }
  .chip .media-icon.sound { background-position-x: left; }
  .chip .media-icon.barrage { background-position-x: right; }
  .chip.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
  .login-chip { width: 36px; height: 36px; justify-content: center; padding: 0; }
  .user-avatar { position: relative; display: block; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(145deg, #f0b66f, #bd6e45); box-shadow: inset 0 -2px 0 rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.28); }
  .user-avatar::before { content: ""; position: absolute; left: 7px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #fff4dd; }
  .user-avatar::after { content: ""; position: absolute; left: 4px; bottom: 3px; width: 14px; height: 8px; border-radius: 9px 9px 5px 5px; background: #fff4dd; }
  #topbar .spacer { flex: 1; }

  /* 视频区（真视频或占位） */
  .stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .stage video { width: 100%; height: 100%; object-fit: cover; background: #000; }
  .gallery-stage { display: block; overflow: hidden; background: radial-gradient(90% 70% at 50% 20%, #3a2c28, #0b0b0e 76%); touch-action: pan-y; user-select: none; cursor: grab; }
  .gallery-stage.dragging { cursor: grabbing; }
  .gallery-track { display: flex; width: 100%; height: 100%; transition: transform .24s ease; will-change: transform; }
  .gallery-page { position: relative; flex: 0 0 100%; width: 100%; height: 100%; display: grid; place-items: center; padding: 0; overflow: hidden; }
  .gallery-frame, .gallery-frame.fixed { display: grid; place-items: center; width: 100%; height: 100%; max-width: none; max-height: none; min-width: 0; min-height: 0; aspect-ratio: auto; overflow: hidden; }
  .gallery-page img, .gallery-frame.fixed img { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: initial; border-radius: 0; box-shadow: none; pointer-events: none; }
  .gallery-counter { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + 68px); right: 76px; padding: 5px 9px; border-radius: 999px; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.86); font-size: 12px; backdrop-filter: blur(8px); }
  .gallery-dots { position: absolute; z-index: 2; left: 16px; right: 76px; bottom: calc(env(safe-area-inset-bottom) + 128px); display: flex; justify-content: center; gap: 5px; pointer-events: auto; }
  .gallery-dots button { width: 6px; height: 6px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.38); border: 0; transition: transform .18s, background .18s; }
  .gallery-dots button.on { transform: scale(1.35); background: #fff; }
  .gallery-slide .progress { display: none; }
  .ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 28px 120px;
    background: radial-gradient(120% 80% at 20% 10%, color-mix(in srgb, var(--c) 70%, #fff 0%), transparent 60%),
                linear-gradient(160deg, color-mix(in srgb, var(--c) 85%, #000), #0b0b0e 85%); }
  .ph .ep-no { font-size: 13px; letter-spacing: .1em; opacity: .8; margin-bottom: 10px; }
  .ph .big { font-size: 32px; line-height: 1.25; font-weight: 800; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
  .ph .say { margin-top: 22px; font-size: 18px; line-height: 1.4; font-style: italic; opacity: .92; }
  .paused-ico { position: absolute; z-index: 3; left: 50%; top: 45%; transform: translate(-50%,-50%); font-size: 64px; opacity: 0;
    transition: opacity .15s; pointer-events: none; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
  .slide.paused .paused-ico { opacity: .85; }
  .sound-hint { position: absolute; z-index: 18; left: 50%; top: 50%; display: none; width: min(270px, calc(100% - 40px)); transform: translate(-50%,-50%);
    padding: 16px 18px 15px; border-radius: 16px; background: rgba(24,20,21,.92); border: 1px solid rgba(255,204,51,.72);
    box-shadow: 0 12px 36px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(12px); text-align: center;
    pointer-events: none; }
  .sound-hint.show { display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: auto; animation: sound-hint-in .2s ease-out; }
  .sound-hint .sound-hint-icon { font-size: 28px; line-height: 1; }
  .sound-hint b { font-size: 16px; }
  .sound-hint small { color: #ddd4c3; font-size: 12px; line-height: 1.45; }
  .sound-hint-action { width: 100%; min-height: 44px; margin-top: 8px; padding: 10px 16px; border-radius: 10px;
    background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 700; }
  .sound-hint-action:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  @keyframes sound-hint-in { from { opacity: 0; transform: translate(-50%,-46%) scale(.96); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

  .progress { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); }
  .progress i { display: block; height: 100%; width: 0; background: #fff; }

  /* 右侧按钮 */
  .rail { position: absolute; z-index: 6; right: 8px; bottom: 150px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
  .rail button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
  .rail button .lb { font-size: 11px; line-height: 1.2; white-space: nowrap; }
  .rail .ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
    background: rgba(0,0,0,.35); border: 1px solid var(--line); backdrop-filter: blur(6px); }
  .rail .ico .clay-icon { width: 32px; height: 32px; }
  .comment-symbol { position: relative; width: 27px; height: 22px; border-radius: 8px; background: linear-gradient(145deg, #f3f3f5, #aaaab2);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.22), 0 2px 5px rgba(0,0,0,.25); }
  .comment-symbol::after { content: ""; position: absolute; left: 5px; bottom: -5px; width: 9px; height: 9px; background: #b7b7be;
    clip-path: polygon(0 0, 100% 0, 0 100%); }
  .comment-symbol::before { content: "···"; position: absolute; left: 5px; top: -5px; color: #55555d; font-size: 18px; letter-spacing: 1px; }

  /* 底部信息 */
  .info { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 0 84px calc(env(safe-area-inset-bottom) + 16px) 14px;
    background: linear-gradient(transparent, rgba(0,0,0,.7) 40%); }
  .info .who { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
  .info .title { font-size: 15px; line-height: 1.45; }
  .collbar { margin-top: 10px; display: flex; align-items: center; gap: 8px; width: calc(100% + 56px); padding: 9px 12px;
    border-radius: 10px; background: rgba(255,255,255,.14); font-size: 13px; text-align: left; backdrop-filter: blur(6px); }
  .collbar .clay-icon { width: 18px; height: 18px; }
  .collbar .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .danmaku { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top) + 106px); left: 0; right: 0; height: 34%; overflow: hidden;
    pointer-events: none; mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
  .danmaku-item { position: absolute; top: calc(14% + var(--lane) * 34px); left: 100%; max-width: 72%; padding: 5px 10px; border-radius: 999px;
    background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 13px; line-height: 1.25; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; animation: danmaku-move 13s linear infinite; animation-delay: calc(var(--i) * -1.7s); }
  #app.danmaku-off .danmaku { display: none; }
  @keyframes danmaku-move { from { transform: translateX(0); } to { transform: translateX(-145vw); } }
  @media (prefers-reduced-motion: reduce) { .danmaku-item { left: 12px; animation: none; } }

  /* 首页：导学视频 + 年龄大按钮（方案 A） */
  .home { display: flex; flex-direction: column; background: var(--bg); }
  /* 首页导学视频固定 16:9，和后续横屏素材保持一致，避免竖屏素材在宽画幅中大幅裁切。 */
  .home .vid { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; }
  .home .vid .ph { padding: 0 24px 40px; justify-content: flex-end; }
  .home .brand { font-size: 13px; letter-spacing: .12em; opacity: .85; margin-bottom: 8px; }
  .home .cap { font-size: 22px; font-weight: 800; line-height: 1.35; min-height: 2.7em; transition: opacity .3s; }
  .home .progress { bottom: 0; }
  .home .ages { flex: 0 1 auto; overflow-y: auto; padding: 12px 12px calc(env(safe-area-inset-bottom) + 12px); background: var(--panel);
    border-top: 1px solid var(--line); }
  .home .ask { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
  .home .ask .hand { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; }
  .home .ask .hand .clay-icon { width: 52px; height: 52px; animation: hand-point 1.6s ease-in-out infinite; }
  .home .ask b { display: block; flex: 1; min-width: 0; font-size: 24px; font-weight: 800; line-height: 1.35; }
  .home .ask b > span { display: inline-block; }
  @keyframes hand-point { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
  @media (prefers-reduced-motion: reduce) { .home .ask .hand .clay-icon { animation: none; } }
  .home .trust { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 10px; }
  .home .help { font-size: 12px; color: var(--muted); margin: -4px 2px 10px; }

  /* 免登录畅学会员 */
  .membership-card { margin: 0 0 16px; padding: 15px; border-radius: 16px; color: #513614;
    background: linear-gradient(125deg, #fff2cf, #f7d991); border: 1px solid #ffe7ad; text-align: left; }
  .membership-card-head { display: flex; align-items: center; gap: 7px; }
  .membership-emblem { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; color: #a06a18; }
  .membership-emblem svg { width: 24px; height: 24px; }
  .membership-card-head b { flex: 1; font-size: 17px; font-weight: 800; line-height: 1.35; }
  .membership-tag { flex: 0 0 auto; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.55); color: #78551f; font-size: 10px; }
  .membership-card p { margin: 7px 0 10px; font-size: 12px; line-height: 1.5; color: #7c5a2c; }
  .membership-card > button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 42px;
    padding: 10px; border-radius: 10px; background: #744714; color: #fff5df; font-size: 14px; font-weight: 700; }
  .membership-card > button:focus-visible { outline: 2px solid #744714; outline-offset: 3px; }
  .membership-card > button:disabled { opacity: .6; cursor: wait; }
  .membership-card > small { display: block; margin-top: 7px; text-align: center; color: #81633c; font-size: 10px; }
  .membership-card.active { background: linear-gradient(125deg, #e4f3e8, #c1ddc9); border-color: #d2edda; color: #254d34; }
  .membership-card.active p, .membership-card.active .membership-emblem { color: #446b50; }
  .membership-card.active > button { background: #325f42; color: #f3fff7; }
  .membership-card.ending { background: linear-gradient(125deg, #ffecdb, #f8c8a5); border-color: #f6cfac; }
  .membership-card.ending p { color: #8b481b; font-weight: 700; }
  .membership-card.expired { background: #e5dfd7; border-color: #eee7de; }
  .home .membership-card { padding-top: 10px; padding-bottom: 10px; margin-bottom: 12px; }
  .home .membership-card.active p { margin: 4px 0 0; }
  .chero .membership-card { margin: 16px 0 0; }
  .chero .membership-card p { font-size: 12px; color: #7c5a2c; }
  .chero .membership-card.active p { color: #446b50; }
  .chero .membership-card.active > button { display: none; }
  .chero .membership-card.ending p { color: #8b481b; }
  .member-only { padding: 2px 5px; border-radius: 4px; background: #4d371b; color: #efc881; font-size: 10px; }
  .membership-locked-stage { background: radial-gradient(100% 65% at 15% 15%, #66472b, #171416 85%); }
  .membership-lock-copy { width: 100%; padding: 80px 84px 180px 18px; }
  .membership-lock-heading { margin-bottom: 12px; font-size: 15px; line-height: 1.5; color: #e8d3b9; }
  .membership-lock-copy .membership-card { padding: 13px; margin: 0; }
  .membership-lock-copy .membership-card-head { flex-wrap: wrap; }
  .membership-lock-copy .membership-card-head b { flex-basis: calc(100% - 31px); font-size: 18px; }
  .membership-lock-copy .membership-tag { margin-left: 31px; }
  .membership-locked .paused-ico, .membership-locked .progress { display: none; }
  .membership-details ul { padding-left: 20px; color: #d4d4d8; font-size: 14px; line-height: 1.8; }
  @media (max-width: 350px) { .membership-card-head b { font-size: 15px; } .membership-card { padding: 12px; } }
  .rows { display: flex; flex-direction: column; gap: 8px; }
  .srow { position: relative; display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; cursor: pointer;
    background: var(--panel-2); border: 1px solid var(--line); text-align: left; transition: transform .1s; }
  .srow:active { transform: scale(.98); }
  .srow .av { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; overflow: hidden;
    background: color-mix(in srgb, var(--c) 35%, var(--panel)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent); }
  .srow .av img { width: 100%; height: 100%; object-fit: cover; }
  .srow .av .clay-icon { width: 36px; height: 36px; }
  .srow .bd { flex: 1; min-width: 0; }
  .srow .hd { display: flex; align-items: baseline; gap: 8px; }
  .srow .a { font-size: 18px; font-weight: 800; white-space: nowrap; }
  .srow .stg { font-size: 11px; padding: 2px 7px; border-radius: 999px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); white-space: nowrap; }
  .srow .n { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
  .srow .ds { font-size: 12.5px; color: #d4d4d8; margin-top: 1px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .srow .yrs { display: flex; gap: 6px; margin-top: 6px; overflow: hidden; }
  .srow .yrs button { font-size: 11.5px; padding: 3px 8px; white-space: nowrap; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
  .srow .go { display: none; }
  .rows.compact .ds, .rows.compact .yrs { display: none !important; }
  .age-collections .srow { width: 100%; min-height: 76px; padding: 12px; }
  .age-collections .srow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .age-collections .av { flex-basis: 48px; height: 48px; }
  .age-collections .av .clay-icon { width: 38px; height: 38px; }
  .age-collections .a { font-size: 22px; line-height: 1.25; }
  .age-collections .n { flex: 0 0 auto; font-size: 12px; }
  .age-collections .go { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px;
    border-radius: 50%; color: var(--c); background: color-mix(in srgb, var(--c) 18%, var(--panel)); }
  .age-collections .go svg { display: block; width: 20px; height: 20px; }
  .grow-link { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 12px; font-size: 14px;
    background: color-mix(in srgb, var(--c) 18%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); text-align: left; }
  .grow-link span:nth-child(2) { flex: 1; }
  .ghead { font-size: 13px; color: var(--muted); margin: 14px 0 8px; }
  .ghead:first-of-type { margin-top: 0; }
  .home .swipe-hint { text-align: center; font-size: 12px; color: var(--muted); margin-top: 10px; }

  /* 目录页 */
  #catalog { position: absolute; inset: 0; z-index: 10; overflow-y: auto; background: var(--bg); display: none; }
  #catalog.show { display: block; }
  .chero { position: relative; padding: calc(env(safe-area-inset-top) + 70px) 18px 18px;
    background: linear-gradient(170deg, color-mix(in srgb, var(--c) 55%, #000) 0%, var(--bg) 100%); }
  .chero .row1 { display: flex; align-items: center; gap: 14px; }
  .chero .av { flex: 0 0 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; overflow: hidden;
    background: color-mix(in srgb, var(--c) 40%, var(--panel)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 80%, transparent); }
  .chero .av img { width: 100%; height: 100%; object-fit: cover; }
  .chero .av .clay-icon { width: 54px; height: 54px; }
  .chero .cage { font-size: 28px; font-weight: 800; line-height: 1.1; }
  .chero .stg { display: inline-block; margin-top: 6px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.3); }
  .chero h1 { font-size: 20px; margin: 16px 0 6px; }
  .chero p { margin: 0; color: #d4d4d8; font-size: 14px; line-height: 1.55; }
  .chero .meta { margin-top: 10px; font-size: 12px; color: var(--muted); }
  .chero .play { margin-top: 14px; width: 100%; padding: 13px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 16px; }
  .age-landing { background: var(--bg); }
  .age-intro-media { position: sticky; top: calc(env(safe-area-inset-top) + 58px); z-index: 5; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #050507; }
  .age-intro-media video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
  .age-intro-play { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 58px; height: 58px;
    transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0,0,0,.58); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 24px; line-height: 1;
    transition: opacity .18s, transform .18s; }
  .age-intro-play:active { transform: translate(-50%, -50%) scale(.94); }
  .age-intro-media.playing .age-intro-play { opacity: 0; pointer-events: none; }
  .age-intro-placeholder { display: grid; place-items: center; background: radial-gradient(100% 120% at 18% 12%, color-mix(in srgb, var(--c) 66%, #fff 0%), #0c0c11 78%); }
  .age-intro-placeholder-copy { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 24px; text-align: center; }
  .age-intro-placeholder-copy b { font-size: 20px; }
  .age-intro-placeholder-copy span { color: rgba(255,255,255,.68); font-size: 12px; }
  .age-title-wrap { padding: 20px 18px 18px; background: var(--bg); }
  .age-title { margin: 0; font-size: 24px; line-height: 1.35; font-weight: 800; }
  .ctabs { position: sticky; top: calc(env(safe-area-inset-top) + 56px); z-index: 2; display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 10px;
    background: var(--bg); border-bottom: 1px solid var(--line); scrollbar-width: none; }
  #topbar.solid { background: var(--bg); }
  .ctabs::-webkit-scrollbar { display: none; }
  .ctabs button { flex: 0 0 auto; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
  .ctabs button.on { background: var(--text); color: var(--bg); }
  .csec { padding: 4px 16px 6px; scroll-margin-top: calc(env(safe-area-inset-top) + 104px); }
  .csec h3 { font-size: 15px; margin: 14px 0 4px; }
  .csec .gt { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
  .chapter-index { padding: 8px 16px 12px; }
  .chapter-index .chapter-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0 8px; }
  .chapter-index .chapter-intro b { font-size: 16px; }
  .chapter-index .chapter-intro span { color: var(--muted); font-size: 12px; }
  .catalog-chapters { padding-top: 8px; }
  .catalog-chapters .chapter-intro { padding-bottom: 2px; }
  .catalog-chapter { padding: 20px 0 22px; scroll-margin-top: calc(env(safe-area-inset-top) + 104px); }
  .catalog-chapter + .catalog-chapter { border-top: 1px solid var(--line); }
  .age-chapters .catalog-chapter + .catalog-chapter { border-top: 0; }
  .catalog-chapter .chapter-heading { margin-bottom: 8px; }
  .catalog-chapter .chapter-heading h2 { margin: 4px 0 0; }
  .chapter-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; text-align: left; border-bottom: 1px solid var(--line); }
  .chapter-card:active { opacity: .72; }
  .chapter-card .num { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
    background: color-mix(in srgb, var(--c) 22%, var(--panel-2)); color: var(--c); font-size: 12px; font-weight: 800; }
  .chapter-card .copy { flex: 1; min-width: 0; }
  .chapter-card .copy b { display: block; font-size: 16px; line-height: 1.35; }
  .chapter-card .copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
  .chapter-card .copy em { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-style: normal; }
  .chapter-card .go { flex: 0 0 auto; color: var(--muted); font-size: 24px; line-height: 1; }
  .chapter-page { padding: 10px 16px 12px; }
  .chapter-page .kicker { color: var(--c); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
  .chapter-page h2 { margin: 4px 0 4px; font-size: 21px; line-height: 1.3; }
  .citem { display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line); }
  .citem .th { position: relative; flex: 0 0 54px; height: 72px; border-radius: 8px; overflow: hidden; display: grid; place-items: center;
    font-size: 18px; font-weight: 800; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 80%, #000), #111); }
  .citem .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .citem .th .d { position: absolute; right: 4px; bottom: 3px; padding: 1px 3px; border-radius: 3px;
    background: rgba(0,0,0,.68); color: #fff; font-size: 10px; line-height: 1.3; font-weight: 400; }
  .citem .tx { flex: 1; min-width: 0; }
  .citem .tx b { display: flex; align-items: baseline; gap: 6px; font-size: 15px; line-height: 1.4; font-weight: 600; }
  .citem .episode-number { flex: 0 0 auto; color: var(--c); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .citem .episode-title { min-width: 0; }
  .citem .tx small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
  .citem .mk { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .citem .mk .ok { color: #7bd389; }
  .citem .mk .hv { color: #ff4d6d; }
  .citem.last .tx b { color: var(--accent); }
  .age-citem { padding: 14px 0; }
  .age-citem .tx small { display: none; }
  .age-citem-go { flex: 0 0 auto; color: var(--c); font-size: 26px; line-height: 1; }
  .cfoot { padding: 18px 16px calc(env(safe-area-inset-bottom) + 24px); }
  .cfoot h3 { font-size: 14px; color: var(--muted); font-weight: 500; margin: 14px 0 10px; }

  /* 合集结束卡 */
  .end { display: flex; flex-direction: column; justify-content: flex-start; padding: calc(env(safe-area-inset-top) + 72px) 20px 24px; background: var(--bg); }
  .end .card-btn { padding: 12px 14px; margin-bottom: 10px; }
  .end .card-btn b { font-size: 15px; }
  .end h2 { font-size: 24px; margin: 0 0 6px; }
  .end p { color: var(--muted); margin: 0 0 22px; }
  .card-btn { display: block; width: 100%; text-align: left; padding: 16px; border-radius: var(--radius); margin-bottom: 12px;
    background: var(--panel-2); border: 1px solid var(--line); border-left: 5px solid var(--c); }
  .card-btn small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
  .card-btn b { font-size: 17px; }
  .cfoot .follow-card { background: var(--c, var(--accent)); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 84%, #fff); border-left: 0; box-shadow: 0 8px 20px color-mix(in srgb, var(--c, var(--accent)) 24%, transparent); }
  .cfoot .follow-card small { color: color-mix(in srgb, var(--accent-ink) 68%, var(--c, var(--accent))); }
  .cfoot .follow-card b { color: var(--accent-ink); }
  .end .more { margin-top: 10px; }
  .end .more h3 { font-size: 14px; color: var(--muted); font-weight: 500; margin: 8px 0 10px; }

  /* 底部弹出层 */
  #mask { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  #mask.show { opacity: 1; pointer-events: auto; }
  #sheet { position: absolute; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 78%; overflow-y: auto; background: var(--sheet);
    border-radius: 18px 18px 0 0; padding: 10px 16px calc(env(safe-area-inset-bottom) + 18px); transform: translateY(105%);
    transition: transform .25s ease; }
  #sheet.show { transform: none; }
  #sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 12px; }
  #sheet h3 { margin: 0 0 4px; font-size: 17px; }
  #sheet .sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
  #sheet.collection-sheet { height: 78%; padding-top: 0; padding-inline: 0; background: var(--bg); overscroll-behavior: contain; }
  .collection-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
    padding: 28px 16px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
  #sheet .collection-head .grab { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); margin: 0; }
  #sheet .collection-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 18px; }
  .collection-action, .collection-close { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 50%; background: var(--panel-2); color: var(--muted); }
  .collection-action .clay-icon { width: 20px; height: 20px; }
  .collection-close { font-size: 26px; line-height: 1; }
  .collection-sheet .catalog-chapters { padding: 0 16px 12px; }
  .collection-sheet .catalog-chapter { padding: 16px 0 18px; }
  .collection-sheet .chapter-heading h2 { font-size: 18px; }
  .collection-sheet .citem.current { padding-inline: 8px; margin-inline: -8px; width: calc(100% + 16px); border-radius: 10px;
    background: color-mix(in srgb, var(--c) 14%, var(--bg)); }
  .collection-sheet .citem .mk { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .collection-sheet .current-label { color: var(--c); font-size: 11px; font-weight: 700; }
  .eplist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ep { text-align: left; padding: 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
  .ep i { font-style: normal; color: var(--muted); font-size: 12px; display: block; }
  .ep small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
  .ep.cur { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .ep.cur i::after { content: " · 正在看"; color: var(--accent); }
  .sec { margin-top: 18px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }

  .say-card { padding: 16px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--line); }
  .say-card .en { font-size: 19px; line-height: 1.45; font-weight: 700; }
  .say-card .zh { color: var(--muted); font-size: 13px; margin-top: 8px; }
  .say-card .speak { margin-top: 12px; padding: 8px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14px; }
  .share-page { padding-bottom: 4px; }
  .share-page .share-sub { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
  .share-poster { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; padding: 18px; border-radius: 16px; background: linear-gradient(155deg, color-mix(in srgb, var(--c) 62%, #2a1d1b), #17151b 82%); border: 1px solid color-mix(in srgb, var(--c) 48%, transparent); }
  .share-poster::after { content: ""; position: absolute; width: 180px; height: 180px; right: -54px; top: -62px; border-radius: 50%; background: color-mix(in srgb, var(--c) 42%, transparent); }
  .share-poster .poster-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
  .share-poster .poster-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c) 32%, #17151b); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 78%, transparent); }
  .share-poster .poster-icon .clay-icon { width: 34px; height: 34px; }
  .share-poster .poster-age { font-size: 20px; font-weight: 800; }
  .share-poster .poster-stage { margin-top: 2px; color: #e8e1df; font-size: 12px; }
  .share-poster h4 { position: relative; z-index: 1; max-width: 78%; margin: 22px 0 5px; font-size: 20px; line-height: 1.3; }
  .share-poster p { position: relative; z-index: 1; max-width: 72%; margin: 0; color: #d1c9c7; font-size: 13px; line-height: 1.45; }
  .share-poster .poster-qr { position: absolute; z-index: 2; right: 18px; bottom: 18px; width: 76px; height: 76px; padding: 4px; border-radius: 8px; background: #fff; }
  .share-poster .poster-tip { position: absolute; z-index: 2; right: 18px; bottom: 4px; color: #ddd4d1; font-size: 9px; }
  .share-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
  .share-action { min-height: 40px; padding: 9px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; }
  .share-action.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
  .notes-page { padding-bottom: 4px; }
  .notes-page .note-meta { color: var(--muted); font-size: 12px; margin: -2px 0 14px; }
  .notes-page .note-block { padding: 13px 14px; margin-top: 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
  .notes-page .note-block b { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
  .notes-page .note-block p { margin: 0; font-size: 15px; line-height: 1.55; }
  .notes-page .note-block .en { font-size: 18px; font-weight: 700; }
  .notes-page .note-block .tip { margin-top: 6px; color: var(--muted); font-size: 13px; }
  .notes-page details { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
  .notes-page details summary { color: var(--text); font-size: 13px; }
  .notes-page .temper-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; }
  .notes-page .temper-note b { display: inline; color: var(--text); margin-right: 4px; }
  .notes-page .save-tip { margin-top: 14px; color: var(--muted); font-size: 12px; text-align: center; }
  .comments-page { padding-bottom: 4px; }
  .comments-page h3 { display: flex; align-items: baseline; gap: 6px; }
  .comments-page .comment-count { color: var(--muted); font-size: 12px; font-weight: 400; }
  .comments-page .comment-context { color: var(--muted); font-size: 12px; line-height: 1.4; margin: -1px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .comments-page .comment-tabs { display: flex; gap: 14px; padding: 4px 0 2px; }
  .comments-page .comment-tabs button { color: var(--muted); font-size: 12px; }
  .comments-page .comment-tabs button.on { color: var(--text); font-weight: 700; }
  .comments-page .comment-form { display: flex; gap: 8px; align-items: flex-end; margin: 2px 0 6px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
  .comments-page textarea { flex: 1; min-height: 42px; max-height: 100px; resize: vertical; padding: 10px 12px; border-radius: 10px; color: var(--text);
    background: var(--panel-2); border: 1px solid var(--line); font: inherit; font-size: 13px; line-height: 1.4; outline: none; }
  .comments-page textarea:focus { border-color: var(--accent); }
  .comments-page .send-comment { flex: 0 0 auto; padding: 10px 13px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; }
  .comments-page .comment-list { display: flex; flex-direction: column; }
  .comments-page .comment-item { display: flex; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
  .comments-page .comment-avatar { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
    background: var(--avatar-c, #6c63a8); color: #fff; font-size: 13px; font-weight: 800; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
  .comments-page .comment-body { flex: 1; min-width: 0; }
  .comments-page .comment-top { display: flex; align-items: center; gap: 6px; min-height: 18px; }
  .comments-page .comment-author { color: var(--muted); font-size: 12px; font-weight: 700; }
  .comments-page .comment-badge { padding: 1px 5px; border-radius: 4px; background: rgba(255,204,51,.16); color: var(--accent); font-size: 10px; }
  .comments-page .comment-badge.local { background: rgba(255,255,255,.08); color: var(--muted); }
  .comments-page .comment-text { margin: 4px 0 7px; color: var(--text); word-break: break-word; }
  .comments-page .comment-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }
  .comments-page .comment-action { color: var(--muted); font-size: 11px; }
  .comments-page .comment-like { margin-left: auto; color: var(--muted); font-size: 11px; }
  .comments-page .comment-like.on { color: #ff6b81; }
  .comments-page .comment-reply { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 12px; }
  .comments-page .comment-empty { padding: 18px 0; color: var(--muted); font-size: 13px; text-align: center; }
  .comments-page .comment-note { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.45; }
  .tchips { display: flex; gap: 8px; flex-wrap: wrap; }
  .tchips button { padding: 8px 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 14px; }
  .tchips button.on { background: var(--text); color: var(--bg); }
  .ttip { margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--panel-2); font-size: 14px; line-height: 1.55; display: none; }
  .ttip.show { display: block; }
  details { margin-top: 16px; font-size: 13px; color: var(--muted); }
  details summary { cursor: pointer; }
  details p { line-height: 1.6; margin: 8px 0 0; }
  .note { margin-top: 16px; font-size: 12px; color: var(--muted); line-height: 1.5; }

  .rail .fav .clay-icon { opacity: .72; transform: scale(.92); transition: opacity .15s, transform .15s; }
  .rail .fav.on .ico { background: rgba(255,77,109,.18); }
  .rail .fav.on .clay-icon { opacity: 1; transform: scale(1.06); }
  .ep .seen { position: absolute; right: 8px; top: 8px; font-size: 11px; color: #7bd389; }
  .ep { position: relative; }
  .favlist .ep { display: block; width: 100%; margin-bottom: 8px; }
  .empty { color: var(--muted); font-size: 14px; padding: 20px 0; text-align: center; line-height: 1.6; }
  .follow { text-align: center; }
  .follow .qr { width: 180px; height: 180px; margin: 14px auto; border-radius: 12px; background: #fff; display: grid; place-items: center; color: #888; font-size: 13px; overflow: hidden; }
  .follow .qr img { width: 100%; height: 100%; object-fit: contain; }
  .follow p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 6px 0 0; }
  .follow .ok { margin-top: 14px; padding: 10px 22px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
  .end .follow-card { margin-top: 6px; padding: 14px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 16%, var(--panel-2));
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); text-align: left; width: 100%; }
  .end .follow-card b { display: block; font-size: 16px; }
  .end .follow-card small { color: var(--muted); font-size: 13px; }
  .follow-card .clay-icon { width: 18px; height: 18px; margin-right: 4px; }
  .wx-guide { position: absolute; z-index: 70; inset: 0; background: rgba(0,0,0,.78); display: none; }
  .wx-guide.show { display: block; }
  .wx-guide .arrow { position: absolute; right: 22px; top: 6px; font-size: 54px; transform: rotate(-20deg); }
  .wx-guide .txt { position: absolute; right: 20px; left: 20px; top: 86px; text-align: right; font-size: 18px; line-height: 1.6; font-weight: 700; }
  .wx-guide .txt small { display: block; font-weight: 400; font-size: 14px; color: #ccc; margin-top: 6px; }
  .wx-guide .close { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); padding: 10px 26px; border-radius: 999px; border: 1px solid #fff; }
  .toast { position: absolute; z-index: 60; left: 50%; bottom: 120px; transform: translateX(-50%); padding: 10px 16px; border-radius: 10px;
    background: rgba(0,0,0,.8); font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 80%; text-align: center; }
  .toast.show { opacity: 1; }