:root{text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Avenir Next,PingFang SC,Helvetica Neue,Segoe UI,sans-serif;font-weight:500;line-height:1.4}*{box-sizing:border-box}body{min-height:100svh;margin:0}button,input,textarea{font:inherit}.vlog-page{background:radial-gradient(circle at 20% 0,#92a3b824,#0000 38%),radial-gradient(circle at 100% 20%,#788fab1a,#0000 45%),#edf1f5;justify-content:center;min-height:100svh;padding:14px;display:flex}.phone-shell{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#ffffffa8;border:1px solid #7b8c9d40;border-radius:24px;flex-direction:column;gap:12px;width:min(100%,430px);padding:14px;display:flex}.home-shell{justify-content:flex-start}.study-shell{min-height:calc(100svh - 28px)}.app-header{padding:6px 2px}.app-header h1{color:#16212f;letter-spacing:.02em;margin:0;font-size:20px;line-height:1.3}.home-subtitle{color:#5f7082;margin:6px 0 0;font-size:12px}.app-header-study{flex-direction:column;gap:4px;display:flex}.back-button{color:#2e4a6a;cursor:pointer;background:#e5edf6;border:none;border-radius:999px;width:fit-content;padding:6px 12px;font-size:12px;font-weight:700}.eyebrow{letter-spacing:.12em;color:#5f7082;margin:0 0 4px;font-size:11px;font-weight:700}.lesson-list{flex-direction:column;gap:10px;display:flex}.lesson-card{text-align:left;cursor:pointer;background:linear-gradient(#fff,#f8fbff);border:1px solid #d2dcea;border-radius:16px;padding:12px;transition:transform .2s,border-color .2s,box-shadow .2s}.lesson-card:active{transform:scale(.99)}.lesson-card:hover{border-color:#95b6ff;box-shadow:0 8px 18px #3f69d624}.lesson-card-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.lesson-card-head h2{color:#1b2a3b;margin:0;font-size:16px;line-height:1.35}.lesson-open-text{color:#3b56da;flex:none;font-size:12px;font-weight:700}.lesson-description{color:#5a6f86;margin:8px 0 0;font-size:13px;line-height:1.45}.lesson-meta{color:#70839b;justify-content:space-between;margin-top:10px;font-size:12px;font-weight:700;display:flex}.video-card{background:#0f1723;border-radius:18px;overflow:hidden;box-shadow:0 16px 26px #0f172329}.video-player{aspect-ratio:16/9;background:#000;width:100%;display:block}.subtitle-module{background:linear-gradient(#f8fbff,#f2f7fd);border:1px solid #d6dfea;border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px #fffc}.subtitle-module-header{background:#ffffffa6;border-bottom:1px solid #dbe5f0;padding:12px 12px 10px}.subtitle-module-header h2{color:#16283e;margin:0;font-size:16px;line-height:1.3}.subtitle-module-header p{color:#5d7289;margin:4px 0 0;font-size:12px}.subtitle-section{scroll-behavior:smooth;flex-direction:column;gap:10px;max-height:43svh;padding:0 10px;display:flex;position:relative;overflow-y:auto}.subtitle-section:before{content:"";pointer-events:none;z-index:1;border-top:1px dashed #2f7acb47;border-bottom:1px dashed #2f7acb47;height:44px;position:absolute;top:50%;left:10px;right:10px;transform:translateY(-50%)}.subtitle-spacer{flex:none}.subtitle-section::-webkit-scrollbar{width:6px}.subtitle-section::-webkit-scrollbar-thumb{background:#586f854d;border-radius:999px}.subtitle-card{z-index:2;text-align:left;cursor:pointer;background:#fff;border:1px solid #cfdae7;border-radius:14px;padding:12px;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s;position:relative}.subtitle-card:active{transform:scale(.99)}.subtitle-card.is-active{background:linear-gradient(#eef3ff,#fff);border-color:#3b56da;box-shadow:0 10px 24px #3b56da3d}.subtitle-time{color:#4f6a84;margin-bottom:6px;font-size:12px;font-weight:700}.subtitle-en{color:#1b2735;margin:0;font-size:15px;line-height:1.45}.subtitle-en-hit{color:#fff;background:linear-gradient(135deg,#5f6df8,#8c4fff);border-radius:8px;margin:0 1px;padding:1px 6px;font-weight:700;display:inline-block}.subtitle-cn{color:#5f7389;margin:8px 0 0;font-size:13px}.subtitle-word-list{flex-direction:column;gap:8px;margin-top:10px;display:flex}.subtitle-word-item{background:#f4f7ff;border:1px solid #d7e1ff;border-radius:10px;padding:8px 9px}.word-text,.word-meaning,.word-note{margin:0}.word-text{color:#2e49b8;font-size:13px;font-weight:700}.word-meaning{color:#27354a;margin-top:4px;font-size:13px}.word-note{color:#6e8198;margin-top:4px;font-size:12px}.subtitle-words-empty{color:#7e92a8;text-align:left;margin:0;font-size:12px}.subtitle-empty{text-align:center;z-index:2;margin:10px 0;font-size:14px;position:relative}.control-panel{background:#fff;border:1px solid #d7dee7;border-radius:16px;flex-direction:column;gap:9px;margin-top:auto;padding:10px;display:flex}.main-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.main-controls button,.speed-controls button,.loop-button{color:#1a2733;cursor:pointer;background:#eaf0f7;border:none;border-radius:10px;padding:10px 8px;font-size:14px}.main-controls button:active,.speed-controls button:active,.loop-button:active{transform:scale(.98)}.play-toggle{color:#fff;background:#2f7acb;font-weight:700}.speed-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.speed-controls .is-selected{color:#0f5aa6;background:#d3e8ff;font-weight:700}.loop-button{background:#eef2f7;width:100%}.loop-button.is-enabled{color:#0e6c46;background:#dff1e8;font-weight:700}@media (width>=900px){.vlog-page{padding:24px}.phone-shell{box-shadow:0 24px 60px #3a4a5a29}}