.search-bar{width:100%;display:flex;flex-direction:column;gap:10px}.search-pill{display:flex;align-items:center;gap:12px;background:var(--surface);border:var(--stroke-card) solid var(--ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-card);padding:10px 10px 10px 24px;transition:border-color var(--transition-base),box-shadow var(--transition-base)}.search-pill:focus-within{border-color:var(--candy-cobalt);box-shadow:2px 2px 0 0 var(--ink)}.search-pill.error{border-color:var(--error)}.search-input{flex:1;min-width:0;background:transparent;border:none;font-family:var(--font-body);font-size:16px;color:var(--ink)}.search-input::placeholder{color:var(--text-secondary)}.search-input:focus{outline:none}.search-input:disabled{opacity:.6}.search-submit{flex-shrink:0;background:var(--brand);color:#fff;border:var(--stroke-btn) solid var(--ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-btn);padding:13px 26px;font-family:var(--font-body);font-size:16px;font-weight:500;white-space:nowrap}.search-submit:disabled{opacity:.4;box-shadow:none;cursor:not-allowed}.error-inline{display:flex;align-items:center;gap:10px;background:var(--surface);border:var(--stroke-chip) solid var(--error);border-radius:var(--radius-pill);box-shadow:var(--shadow-chip);padding:8px 16px 8px 10px}.error-inline-text{font-size:16px;font-weight:500;color:var(--error);text-align:left}@media (max-width: 640px){.search-pill{padding:8px 8px 8px 16px;border-width:2.5px;box-shadow:4px 4px 0 0 var(--ink)}.search-input{font-size:15px}.search-input::placeholder{font-size:14px}.search-submit{padding:10px 18px;font-size:15px}.error-inline-text{font-size:14px}}.video-player-container{width:100%}.video-wrapper{position:relative;width:100%;padding-bottom:56.25%;background:var(--ink);border:var(--stroke-card) solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden}#youtube-player{position:absolute;top:0;left:0;width:100%;height:100%}@media (max-width: 640px){.video-wrapper{border-width:2.5px;border-radius:var(--radius-thumb);box-shadow:4px 4px 0 0 var(--ink)}}.word-token{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;vertical-align:top}.word-face{display:inline-block;font-family:var(--font-body);font-size:22px;line-height:1.6;color:var(--ink);padding:1px 5px;border-radius:8px;cursor:pointer;user-select:none;-webkit-user-select:none;white-space:nowrap;transition:background var(--transition-base)}.word-face:hover{background:color-mix(in srgb,var(--candy-lemon) 55%,transparent)}.word-face.translating{background:var(--candy-lemon);animation:dotPulse 1s infinite}.word-face.marked{background:var(--candy-mint);text-decoration:underline;text-underline-offset:3px}.word-face.karaoke{background:var(--candy-lemon)}.translation-sticker{display:inline-flex;flex-direction:column;gap:2px;background:var(--surface);border:var(--stroke-chip) solid var(--ink);border-radius:var(--radius-sticker);box-shadow:var(--shadow-sticker);padding:8px 14px 10px;margin-bottom:6px;max-width:320px;animation:popIn .3s cubic-bezier(.34,1.56,.64,1);transform-origin:top left}.sticker-word{font-family:var(--font-display-en);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);line-height:1.3;white-space:nowrap}.sticker-main{font-family:var(--font-body);font-size:16px;font-weight:500;color:var(--ink);line-height:1.4;display:inline-flex;align-items:center;gap:6px;white-space:normal}.translation-sticker.expandable{cursor:pointer}.expand-icon{font-size:12px;color:var(--text-secondary);transition:transform var(--transition-base)}.translation-sticker.expandable:hover .expand-icon{transform:translate(2px)}.expand-icon.expanded{transform:none}.sticker-alternatives{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding-top:8px;border-top:1.5px dashed color-mix(in srgb,var(--ink) 25%,transparent)}.sticker-alt-item{display:flex;align-items:baseline;gap:6px;font-size:14px;line-height:1.5}.sticker-pos{flex-shrink:0;font-family:var(--font-display-en);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--candy-cobalt);background:color-mix(in srgb,var(--candy-cobalt) 12%,transparent);border-radius:4px;padding:1px 5px}.sticker-alt-text{color:var(--ink);white-space:normal;word-break:break-word}@media (max-width: 640px){.word-face{font-size:18px;padding:1px 4px}.translation-sticker{max-width:240px;padding:6px 12px 8px}.sticker-main{font-size:14px}}.subtitle-panel{display:flex;flex-direction:column;gap:16px;flex:1;min-height:140px}.player-controls{position:relative;display:flex;align-items:center;justify-content:center;background:var(--surface);border:var(--stroke-btn) solid var(--ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-btn);padding:10px 20px}.player-controls-center{display:flex;align-items:center;gap:40px}.pc-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:4px;border-radius:50%;transition:transform var(--transition-press)}.pc-btn:hover{transform:scale(1.12)}.pc-btn:active{transform:scale(.94)}.pc-play{width:48px;height:48px;background:var(--brand);border:var(--stroke-chip) solid var(--ink);box-shadow:var(--shadow-chip);padding-left:6px}.pc-play.playing{padding-left:4px}.pc-play:hover{transform:none}.subtitle-count{position:absolute;right:24px;font-family:var(--font-display-en);font-weight:600;font-size:13px;color:var(--text-secondary)}.subtitle-list{display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1;min-height:0;position:relative;scroll-behavior:smooth;padding:4px;margin:-4px}.empty-subtitles{display:flex;align-items:center;justify-content:center;padding:64px 24px;color:var(--text-secondary);font-size:17px}.subtitle-line{position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px 52px 12px 16px;border-radius:var(--radius-thumb);border:var(--stroke-btn) solid transparent}.subtitle-line.upcoming{opacity:.55}.subtitle-line.current{opacity:1;background:var(--surface);border-color:var(--ink);box-shadow:var(--shadow-btn)}.subtitle-time{flex-shrink:0;font-family:var(--font-display-en);font-weight:600;font-size:13px;line-height:37px;color:var(--text-secondary)}.subtitle-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.subtitle-words{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-start}.sentence-translation{align-self:flex-start;display:flex;align-items:center;gap:10px;background:var(--candy-mint);border-radius:10px;padding:8px 14px 8px 12px;font-size:16px;color:var(--ink)}.sentence-translation-accent{width:4px;height:22px;flex-shrink:0;border-radius:2px;background:color-mix(in srgb,var(--ink) 30%,var(--candy-mint))}.translate-btn{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:none;background:transparent;color:var(--ink);transition:transform var(--transition-press),background var(--transition-base)}.subtitle-line.current .translate-btn{top:9.5px;right:9.5px}.translate-btn.lemon{background:var(--candy-lemon);border:1.5px solid var(--ink)}.translate-btn.ghost{opacity:.85}.translate-btn:hover:not(:disabled){transform:scale(1.1)}.translate-btn:active:not(:disabled){transform:scale(.92)}.translate-btn.translating{opacity:.6;cursor:not-allowed}.translate-dots{display:flex;gap:3px}.translate-dots span{width:4px;height:4px;border-radius:50%;background:var(--ink);animation:dotPulse 1.1s infinite}.translate-dots span:nth-child(2){animation-delay:.18s}.translate-dots span:nth-child(3){animation-delay:.36s}@media (max-width: 640px){.subtitle-list{max-height:none;overflow-y:visible}.player-controls{padding:6px 14px}.player-controls-center{gap:24px}.pc-play{width:40px;height:40px}.subtitle-count{right:16px;font-size:12px}.subtitle-line{padding:10px 44px 10px 10px;gap:8px}.subtitle-time{font-size:11px;line-height:30px}.sentence-translation{font-size:14px;padding:6px 12px 6px 10px}}.skeleton-theater{width:100%;max-width:880px;margin:24px auto 0;display:flex;flex-direction:column;gap:20px;padding-bottom:40px}.skeleton-video{position:relative;width:100%;aspect-ratio:16 / 9;background:var(--surface);border:var(--stroke-card) solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;display:flex;align-items:center;justify-content:center}.skeleton-shimmer{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(39,28,4,.05),transparent);animation:shimmer 1.8s infinite}.skeleton-loading-overlay{display:flex;flex-direction:column;align-items:center;gap:18px;z-index:2}.skeleton-bubbles{display:flex;align-items:flex-end;gap:10px;height:36px}.skeleton-bubble{border-radius:50%;border:var(--stroke-chip) solid var(--ink);animation:bubbleFloat 1.2s ease-in-out infinite}.skeleton-bubble.b1{width:22px;height:22px;background:var(--brand)}.skeleton-bubble.b2{width:16px;height:16px;background:var(--candy-lemon);animation-delay:.18s}.skeleton-bubble.b3{width:11px;height:11px;background:var(--candy-mint);animation-delay:.36s}.skeleton-loading-text{font-family:var(--font-display-zh);font-size:20px;color:var(--ink);animation:dotPulse 1.6s ease-in-out infinite}.skeleton-lines{display:flex;flex-direction:column;gap:12px}.skeleton-line{height:40px;border-radius:var(--radius-thumb);background:color-mix(in srgb,var(--ink) 7%,var(--bg));position:relative;overflow:hidden}.skeleton-line:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 1.8s infinite}@media (max-width: 640px){.skeleton-video{border-width:2.5px;box-shadow:4px 4px 0 0 var(--ink);border-radius:var(--radius-thumb)}.skeleton-loading-text{font-size:16px}}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}.video-grid+.video-grid{margin-top:24px}.channel-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.channel-tab{background:var(--surface);border:var(--stroke-chip) solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:var(--radius-pill);padding:7px 18px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text-secondary);transition:transform var(--transition-press),box-shadow var(--transition-press),background var(--transition-base)}.channel-tab:hover{border-color:var(--ink);color:var(--ink)}.channel-tab.active{background:var(--candy-lemon);border-color:var(--ink);color:var(--ink);font-weight:700;box-shadow:var(--shadow-chip)}.channel-tab.active:active{transform:translate(2px,2px);box-shadow:none}@media (min-width: 1100px){.video-grid-recommended{grid-template-columns:repeat(5,1fr)}}.load-more-sentinel{display:flex;justify-content:center;padding:28px 0 8px}.load-more-dots{display:flex;gap:8px}.load-more-dots span{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:var(--candy-lemon);animation:bubbleFloat 1.1s ease-in-out infinite}.load-more-dots span:nth-child(2){background:var(--candy-mint);animation-delay:.18s}.load-more-dots span:nth-child(3){background:var(--candy-pink);animation-delay:.36s}.video-card{display:flex;flex-direction:column;text-align:left;background:var(--surface);border:var(--stroke-card) solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;padding:0;transition:transform var(--transition-press),box-shadow var(--transition-press)}.video-card:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 0 var(--ink)}.video-card:active{transform:translate(6px,6px);box-shadow:none}.video-card-thumb{position:relative;display:block;width:100%;aspect-ratio:16 / 9;background:var(--candy-mint);border-bottom:var(--stroke-chip) solid var(--ink);overflow:hidden}.video-card:nth-child(4n+2) .video-card-thumb{background:var(--candy-cobalt)}.video-card:nth-child(4n+3) .video-card-thumb{background:var(--candy-pink)}.video-card:nth-child(4n+4) .video-card-thumb{background:var(--candy-lemon)}.video-card-thumb img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.video-card-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--surface);border:var(--stroke-chip) solid var(--ink);box-shadow:var(--shadow-chip);display:flex;align-items:center;justify-content:center;padding-left:3px;opacity:0;transition:opacity var(--transition-base)}.video-card:hover .video-card-play{opacity:1}.video-card-body{display:flex;flex-direction:column;gap:6px;padding:16px 20px 18px}.video-card-title{font-size:17px;font-weight:700;color:var(--ink);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.video-card-meta{font-size:13px;color:var(--text-secondary)}.video-card-skeleton{background:var(--surface);border:var(--stroke-card) solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:var(--radius-card);overflow:hidden;padding-bottom:18px}.video-card-skeleton-thumb{aspect-ratio:16 / 9;background:color-mix(in srgb,var(--ink) 8%,var(--bg));position:relative;overflow:hidden;margin-bottom:16px}.video-card-skeleton-line{height:14px;border-radius:7px;background:color-mix(in srgb,var(--ink) 8%,var(--bg));margin:0 20px 10px;position:relative;overflow:hidden}.video-card-skeleton-line.short{width:45%}.video-card-skeleton-thumb:after,.video-card-skeleton-line:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.6s infinite}@media (max-width: 640px){.video-grid{grid-template-columns:1fr;gap:16px}.video-card{border-width:2.5px;box-shadow:4px 4px 0 0 var(--ink)}.video-card-body{padding:12px 16px 14px}.video-card-title{font-size:16px}}.app{min-height:100vh;display:flex;flex-direction:column;width:100%;max-width:1440px;margin:0 auto;padding:0 var(--page-pad)}.nav{display:flex;align-items:center;height:80px;padding:20px 0}.logo{position:relative;background:none;border:none;padding:0 14px 4px 0;display:inline-block}.logo-clickable{cursor:pointer}.logo-clickable:active .logo-pill{transform:translate(3px,3px);box-shadow:none}.logo-pill{display:inline-flex;align-items:center;gap:6px;background:var(--brand);border:var(--stroke-btn) solid var(--ink);border-radius:var(--radius-pill);box-shadow:3px 3px 0 0 var(--ink);padding:8px 20px 8px 14px;transition:transform var(--transition-press),box-shadow var(--transition-press)}.logo-ear{width:28px;height:28px;flex-shrink:0}.logo-text{font-family:var(--font-display-zh);font-size:22px;color:#fff;line-height:1;letter-spacing:1px}.logo-bubble{position:absolute;border-radius:50%;background:var(--candy-lemon);border:2px solid var(--ink);animation:bubbleFloat 2.6s ease-in-out infinite}.logo-bubble-1{width:14px;height:14px;right:6px;top:-6px}.logo-bubble-2{width:9px;height:9px;right:-3px;top:6px;background:var(--candy-pink);animation-delay:.4s}.logo-bubble-3{width:6px;height:6px;right:3px;top:18px;background:var(--surface);animation-delay:.9s}.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 0 40px}.hero-title{font-family:var(--font-display-zh);font-weight:400;font-size:68px;line-height:1.25;color:var(--ink);display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}.hero-highlight{display:inline-block;background:var(--candy-lemon);border:var(--stroke-card) solid var(--ink);border-radius:var(--radius-highlight);box-shadow:var(--shadow-btn);padding:0 22px 6px;transform:rotate(-2deg)}.hero-sub{margin-top:24px;font-size:17px;color:var(--text-secondary)}.hero-sub-mobile{display:none}.search-area{width:100%;max-width:720px;margin-top:40px;display:flex;flex-direction:column;gap:16px}.error-banner{display:flex;align-items:center;gap:10px;background:var(--surface);border:var(--stroke-chip) solid var(--error);border-radius:var(--radius-pill);box-shadow:var(--shadow-chip);padding:10px 20px 10px 12px;text-align:left}.error-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;background:var(--candy-lemon);border:1.5px solid var(--ink);border-radius:50%;color:var(--ink)}.error-banner-text{font-size:16px;font-weight:500;color:var(--error)}.section{width:100%;margin-top:56px}.section-header{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}.section-title{font-family:var(--font-display-zh);font-weight:400;font-size:28px;color:var(--ink)}.section-note{font-family:var(--font-display-en);font-weight:600;font-size:13px;color:var(--text-secondary)}.section-spacer{flex:1}.ghost-btn{background:transparent;border:var(--stroke-chip) solid var(--ink);border-radius:var(--radius-pill);padding:6px 16px;font-size:14px;font-weight:500;color:var(--ink);transition:background var(--transition-base),transform var(--transition-press)}.ghost-btn:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}.ghost-btn:active{transform:translate(1px,1px)}.footer{margin-top:auto;padding:64px 0 32px;text-align:center;font-size:14px;color:var(--text-secondary)}.theater{width:100%;max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:20px;height:calc(100vh - 96px);padding-bottom:24px;animation:fadeIn .4s cubic-bezier(.4,0,.2,1)}.theater>.video-stage,.theater>.theater-toolbar{flex-shrink:0}.video-stage{width:100%}.video-stage.hidden{display:none}.theater-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.toolbar-toggles{display:flex;align-items:center;gap:24px}.toolbar-actions{display:flex;align-items:center;gap:12px}.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle input{position:absolute;opacity:0;pointer-events:none}.toggle-track{width:50px;height:28px;border-radius:var(--radius-pill);border:var(--stroke-chip) solid var(--ink);background:var(--surface);display:inline-flex;align-items:center;padding:2px;transition:background var(--transition-base)}.toggle.on .toggle-track{background:var(--candy-mint)}.toggle-knob{width:20px;height:20px;border-radius:50%;background:var(--surface);border:var(--stroke-chip) solid var(--ink);transition:transform var(--transition-base)}.toggle.on .toggle-knob{transform:translate(22px)}.toggle-label{font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}@media (max-width: 1024px){.hero-title{font-size:52px}}@media (max-width: 640px){.nav{height:64px;padding:10px 0}.logo-pill{padding:6px 14px 6px 10px;box-shadow:2px 2px 0 0 var(--ink);border-width:2px}.logo-ear{width:20px;height:20px}.logo-text{font-size:15px}.hero{padding:32px 0 24px}.hero-title{font-size:40px;gap:10px}.hero-highlight{padding:0 14px 4px;border-radius:14px;border-width:2.5px;box-shadow:3px 3px 0 0 var(--ink)}.hero-sub{margin-top:16px;font-size:15px;padding:0 8px}.hero-sub-desktop{display:none}.hero-sub-mobile{display:block}.search-area{margin-top:24px}.section{margin-top:36px}.section-title{font-size:22px}.theater{gap:12px;height:auto}.video-stage{position:sticky;top:0;z-index:50;background:var(--bg);padding-bottom:8px}.theater-toolbar{gap:8px}.toolbar-toggles{gap:12px}.toggle-label{font-size:12px}.ghost-btn{padding:5px 12px;font-size:12px}.footer{padding:40px 0 24px}}:root{--bg: #FFF6E9;--surface: #FFFFFF;--ink: #271C04;--text-secondary: #6B5937;--brand: #FF7A1A;--candy-cobalt: #2B5CFF;--candy-mint: #35C48D;--candy-pink: #FF5C8A;--candy-lemon: #FFC53D;--error: #E5484D;--font-display-zh: "ZCOOL KuaiLe", "Noto Sans SC", sans-serif;--font-display-en: "Baloo 2", "Noto Sans SC", sans-serif;--font-body: "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;--radius-card: 24px;--radius-pill: 999px;--radius-highlight: 20px;--radius-thumb: 16px;--radius-sticker: 12px;--stroke-card: 3px;--stroke-btn: 2.5px;--stroke-chip: 2px;--shadow-card: 6px 6px 0 0 var(--ink);--shadow-btn: 4px 4px 0 0 var(--ink);--shadow-sticker: 3px 3px 0 0 var(--ink);--shadow-chip: 2px 2px 0 0 var(--ink);--page-pad: 80px;--transition-press: .13s cubic-bezier(.34, 1.3, .64, 1);--transition-base: .22s cubic-bezier(.4, 0, .2, 1)}@media (max-width: 1024px){:root{--page-pad: 40px}}@media (max-width: 640px){:root{--page-pad: 16px}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);min-height:100vh;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}button{font-family:inherit;cursor:pointer}.pressable{transition:transform var(--transition-press),box-shadow var(--transition-press)}.pressable:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink)}.pressable:active:not(:disabled){transform:translate(4px,4px);box-shadow:none}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 22%,transparent);border-radius:var(--radius-pill)}::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 40%,transparent)}*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 22%,transparent) transparent}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.7) translateY(4px)}70%{transform:scale(1.06)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes bubbleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes shimmer{0%{left:-100%}to{left:100%}}@keyframes dotPulse{0%,80%,to{opacity:.25}40%{opacity:1}}.fade-in{animation:fadeIn .4s cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}