*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:#f4f2eb;color:#213d39;font:16px/1.6 system-ui,sans-serif}header{height:100px;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d6ded5}.eyebrow{font-size:10px;letter-spacing:3px;color:#65766e}h1{font-size:27px;margin:0}h1 small{font-size:14px;font-weight:400;margin-left:16px}.draft{font-size:12px;color:#816434}main{height:calc(100dvh - 100px);display:grid;grid-template-columns:minmax(320px,60%) minmax(0,1fr);gap:24px;padding:24px}.watch{min-width:0;overflow:auto}.steps{display:flex;gap:8px;margin-bottom:16px}.steps button{flex:1;text-align:left;padding:12px}.steps span{display:block;font-size:11px;opacity:.75}button,select,input{font:inherit}button{cursor:pointer;border:1px solid #b8c9bf;border-radius:8px;background:#fff;color:#244b40;padding:7px 12px}button:hover{background:#e8efe6}button.selected{background:#235b49;color:white;border-color:#235b49}button:focus-visible,input:focus-visible,select:focus-visible,.scroll:focus-visible{outline:3px solid #c98d32;outline-offset:2px}#stage{background:#101a17;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}video{width:100%;display:block;max-height:65vh}video::cue{background:rgba(12,30,24,.86);color:#fff5b5;font-family:system-ui;font-size:110%}#stage:fullscreen{width:100vw;height:100vh;border-radius:0}#stage:fullscreen video{height:100%;max-height:100vh;object-fit:contain}.tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:13px}.tools select{padding:4px;background:white;border:1px solid #b8c9bf;border-radius:5px}input[type=checkbox]{accent-color:#235b49}#status{font-size:14px;font-weight:600}.hint,.foot{font-size:12px;color:#6d786c}.lesson{min-height:0;min-width:0;display:flex;flex-direction:column;background:#fffdf7;border:1px solid #dedfd1;border-radius:12px;overflow:hidden}.lesson-head{padding:14px 18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}h2{font-size:18px;margin:0}.search{font-size:12px;margin-left:auto}.search input{width:180px;padding:6px 8px;border:1px solid #d7ddce;border-radius:6px;font-size:12px}#count{font-size:11px;color:#788273}.scroll{overflow:auto;flex:1;min-height:0;overscroll-behavior:contain}table{border-collapse:separate;border-spacing:0;width:100%;min-width:520px;table-layout:fixed}th{position:sticky;top:0;background:#eaf0e5;text-align:left;font-size:12px;padding:10px 16px;z-index:1}th:first-child{width:150px}td{border-bottom:1px solid #eceee3;padding:16px;vertical-align:top;overflow-wrap:anywhere}tr.active{background:#e8f1df}td img{display:block;width:100%;margin-top:9px;border-radius:3px}.line{display:block;border:0;background:transparent;text-align:left;padding:0;width:100%;font-size:16px;line-height:1.7}.cantonese{font-weight:650;color:#1c5b44}.time{font-size:12px;padding:5px 9px}.flag{display:block;font-size:10px;color:#94703a;margin-top:7px}.foot{margin:0;padding:10px 16px;background:#f4f6ef}@media(max-width:800px){header{height:68px;padding:8px 14px}h1{font-size:20px}h1 small{font-size:11px;margin-left:6px}.eyebrow{display:none}.draft{font-size:10px}main{height:calc(100dvh - 68px);display:flex;flex-direction:column;gap:10px;padding:10px}.watch{flex:none;overflow:visible}.steps{margin-bottom:7px}.steps button{padding:7px;font-size:12px}.steps span{display:none}video{max-height:29dvh}.tools{margin-top:6px;gap:10px}#status{margin:5px 0;font-size:11px}.hint{display:none}.lesson{flex:1}.lesson-head{padding:7px 10px}.search input{width:140px}.foot{font-size:10px;padding:6px 10px}table{min-width:520px}}