.vfs{--a:#3b5bdb;--a2:#e8edff;--ink:#1c2230;--mute:#6b7385;--line:#e3e6ee;--bg:#fff;--soft:#f6f7fb;--ok:#2b8a3e;--okbg:#e6f6ea;--bad:#c92a2a;--badbg:#fdecec;--warn:#e67700;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.5;max-width:1180px;margin:0 auto;box-sizing:border-box}.vfs *,.vfs *::before,.vfs *::after{box-sizing:border-box}.vfs button{font:inherit;cursor:pointer}.vfs h2,.vfs h3{margin:0;line-height:1.3}.vfs-top{background:linear-gradient(135deg,#eef2ff,#f8f9ff);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:20px}.vfs-brand b{display:block;font-size:22px;letter-spacing:-.01em}.vfs-brand span{color:var(--mute);font-size:14px}.vfs-form{display:flex;gap:8px;margin-top:14px}.vfs-url{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:16px;background:#fff;color:var(--ink)}.vfs-url:focus{outline:2px solid var(--a);outline-offset:0;border-color:var(--a)}.vfs-btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:10px 16px;font-weight:600;white-space:nowrap;transition:background .15s,transform .05s}.vfs-btn:hover{background:var(--soft)}.vfs-btn:active{transform:translateY(1px)}.vfs-primary{background:var(--a);border-color:var(--a);color:#fff}.vfs-primary:hover{background:#2f4bc0}.vfs-sm{padding:6px 10px;font-size:14px}.vfs-link{background:none;border:0;color:var(--a);padding:0;font-weight:600}.vfs-msg{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:14px;white-space:pre-line}.vfs-info{background:var(--a2);color:#2b3f99}.vfs-err{background:var(--badbg);color:var(--bad)}.vfs-ok{color:var(--ok)}.vfs-msg.vfs-ok{background:var(--okbg)}.vfs-paste{margin-top:12px;font-size:14px}.vfs-paste summary{cursor:pointer;color:var(--mute)}.vfs-hint{color:var(--mute);margin:8px 0}.vfs-paste-text{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;font:13px/1.45 ui-monospace,Menlo,Consolas,monospace;margin-bottom:8px;background:#fff;color:var(--ink)}.vfs-shelf h3{font-size:17px;margin:4px 0 10px}.vfs-shelf+.vfs-shelf{margin-top:20px}.vfs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.vfs-item{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;overflow:hidden;padding:0}.vfs-item:hover{border-color:var(--a)}.vfs-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--soft)}.vfs-item-t{padding:8px 10px 2px;font-weight:600;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vfs-item-m{padding:0 10px 10px;color:var(--mute);font-size:12px}.vfs-empty{background:var(--soft);border-radius:12px;padding:16px 18px;font-size:15px}.vfs-empty ol{margin:8px 0 0;padding-left:20px}.vfs-lesson{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}.vfs-lesson[hidden],.vfs-home[hidden],.vfs-result[hidden],.vfs-msg[hidden]{display:none}.vfs-player-wrap{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}.vfs-player-wrap iframe,.vfs-player-wrap>div{position:absolute;inset:0;width:100%;height:100%}.vfs-titlebar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:12px 0 6px}.vfs-title{font-size:18px}.vfs-home-btn{font-size:14px;white-space:nowrap}.vfs-stats{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;color:var(--mute);font-size:14px;margin-bottom:12px}.vfs-stats b{color:var(--ink)}.vfs-bar{flex-basis:100%;height:6px;background:var(--soft);border-radius:4px;overflow:hidden}.vfs-bar i{display:block;height:100%;background:var(--a);border-radius:4px;transition:width .3s}.vfs-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;box-shadow:0 1px 2px rgb(20 30 60 / .04)}.vfs-card-head{display:flex;justify-content:space-between;color:var(--mute);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.vfs-bestbadge{text-transform:none;letter-spacing:0}.vfs-sentence{font-size:22px;line-height:1.5;margin:12px 0 16px;font-weight:500;min-height:2.2em}.vfs-sentence .vfs-ok{color:var(--ok);background:var(--okbg);border-radius:4px;padding:0 2px}.vfs-sentence .vfs-bad{color:var(--bad);background:var(--badbg);border-radius:4px;padding:0 2px;text-decoration:underline wavy rgb(201 42 42 / .5);text-underline-offset:4px}.vfs-blank{color:var(--mute);letter-spacing:.06em}.vfs-reveal{font-size:14px;margin-left:6px}.vfs-controls{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:8px}.vfs-ic{padding:10px 14px}.vfs-play.vfs-on{background:var(--a2);border-color:var(--a);color:var(--a)}.vfs-rec{background:#fff4e6;border-color:#ffc078;color:#a34b00}.vfs-rec.vfs-live{background:var(--bad);border-color:var(--bad);color:#fff;animation:vfs-pulse 1.2s infinite}@keyframes vfs-pulse{0%{box-shadow:0 0 0 0 rgb(201 42 42 / .45)}70%{box-shadow:0 0 0 10px #fff0}100%{box-shadow:0 0 0 0 #fff0}}.vfs-result{display:flex;gap:14px;align-items:flex-start;margin-top:14px;padding:12px;background:var(--soft);border-radius:12px}.vfs-note{color:var(--mute);font-size:15px}.vfs-score{--p:0;flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c,var(--a)) calc(var(--p)*1%),#dfe3ec 0)}.vfs-score span{width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}.vfs-g4{--c:var(--ok);color:var(--ok)}.vfs-g3{--c:#5c940d;color:#5c940d}.vfs-g2{--c:var(--warn);color:var(--warn)}.vfs-g1{--c:var(--bad);color:var(--bad)}.vfs-score span{color:inherit}.vfs-res-body{flex:1;min-width:0;font-size:14px}.vfs-res-body>b{font-size:15px;color:var(--ink)}.vfs-heard{color:var(--mute);margin-top:2px;word-break:break-word}.vfs-missed{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}.vfs-missed span{background:var(--badbg);color:var(--bad);border-radius:6px;padding:1px 7px;font-weight:600}.vfs-res-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.vfs-opts{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:14px;color:var(--mute)}.vfs-opts label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.vfs-opts select{padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit}.vfs-keys{margin-top:10px;font-size:12px;color:var(--mute)}.vfs-keys kbd{background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:0 5px;font:11px ui-monospace,monospace}.vfs-side{border:1px solid var(--line);border-radius:14px;background:#fff;position:sticky;top:20px;overflow:hidden}.vfs-side-head{padding:12px 14px;font-weight:700;border-bottom:1px solid var(--line)}.vfs-list{list-style:none;margin:0;padding:6px;max-height:calc(100vh - 120px);overflow-y:auto;counter-reset:s}.vfs-list li{counter-increment:s;display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:8px;cursor:pointer;font-size:14px;margin:0}.vfs-list li::before{content:counter(s);color:var(--mute);font-size:12px;min-width:22px;padding-top:2px}.vfs-list li:hover{background:var(--soft)}.vfs-list li.vfs-active{background:var(--a2)}.vfs-li-t{flex:1;min-width:0}.vfs-li-b{font-weight:700;font-size:12px;min-width:24px;text-align:right;padding-top:2px}@media (max-width:900px){.vfs-lesson{grid-template-columns:1fr}.vfs-side{position:static}.vfs-list{max-height:360px}}@media (max-width:560px){.vfs-top{padding:16px;border-radius:12px}.vfs-form{flex-direction:column}.vfs-sentence{font-size:19px}.vfs-controls{grid-template-columns:auto 1fr 1fr auto}.vfs-ic{padding:10px}.vfs-keys{display:none}.vfs-grid{grid-template-columns:repeat(2,1fr);gap:10px}}