*{box-sizing:border-box}
body{width:420px;margin:0;background:#f4f6fb;color:#26303d;font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif}
body.detached{width:auto;min-width:420px}
main{padding:14px}
header{background:linear-gradient(135deg,#173b3e,#2f6f73);color:#fff;border-radius:14px;padding:14px 16px;margin-bottom:12px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.window-actions{display:flex;align-items:center;gap:6px}
.eyebrow{font-size:11px;letter-spacing:2px;opacity:.8}
.eyebrow.dark{color:#2f6f73;opacity:1;font-weight:900}
h1{font-size:20px;margin:4px 0}
h2{font-size:16px;line-height:1.35;margin:2px 0 0;color:#102026}
p{margin:0;opacity:.9}
.trainer{background:#fff;border:1px solid #dfe8ea;border-radius:14px;padding:12px;margin:0 0 12px}
.trainer-top{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;margin-bottom:8px}
.counter{font-size:12px;font-weight:900;color:#173b3e;background:#e9f2f0;border-radius:999px;padding:3px 9px;white-space:nowrap}
textarea{width:100%;border:1px solid #dfe8ea;border-radius:12px;padding:10px 12px;font:14px/1.5 inherit;resize:vertical;background:#fff;color:#26303d}
.voice-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:9px 0}
.voice-row label{font-weight:800;color:#173b3e}
.speech-row{display:grid;grid-template-columns:auto 1fr 42px auto;gap:8px;align-items:center;margin:8px 0 2px}
.speech-row label{font-weight:800;color:#173b3e}
.speech-row input{min-width:0;accent-color:#2f6f73}
.speech-row output{font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#475569;text-align:center}
select{min-width:0;border:1px solid #dfe8ea;border-radius:10px;background:#fff;color:#26303d;padding:7px 9px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.actions.compact{margin:8px 0 0}
button{border:0;background:#2f6f73;color:#fff;border-radius:18px;padding:7px 13px;cursor:pointer;font-weight:800}
button.secondary{background:#61757a}
button.tiny{border-radius:10px;padding:7px 9px;background:#e9f2f0;color:#173b3e}
button.icon{width:34px;height:34px;border-radius:999px;padding:0;font-size:22px;line-height:1;background:#e9f2f0;color:#173b3e}
button.tiny-icon{width:28px;height:28px;font-size:18px}
.feedback{min-height:22px;margin-top:7px;font-size:12.5px;color:#6b7785}
.feedback.good{color:#166534;font-weight:800}
.feedback.almost{color:#92400e;font-weight:800}
.feedback.bad{color:#991b1b;font-weight:800}
.output{background:#fff;border:1px solid #dfe8ea;border-radius:14px;padding:12px;min-height:80px}
.coach-stage{position:relative;margin:-2px -2px 14px;padding:12px 8px 10px;background:#fbfcfe;border:1px solid #edf1f5;border-radius:14px;overflow:hidden}
.explain-card{max-width:330px;margin:0 auto 12px;background:#fff;border:1px solid #e6ebf0;border-radius:10px;padding:10px 12px;box-shadow:0 10px 24px rgba(15,23,42,.08)}
.explain-card div{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center}
.explain-card .dot{width:10px;height:10px;border-radius:999px;background:#2fb7f1;display:inline-block}
.explain-card b{font-size:13px;color:#111827}
.explain-card em{font-style:italic;color:#8a94a3;font-size:12px}
.explain-card p{margin:6px 0 0;color:#4b5563;font-size:12.5px;line-height:1.55}
.learn-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:end;gap:8px 10px;margin:6px auto 10px}
.learn-word{display:grid;grid-template-rows:20px auto 22px 28px;min-width:70px;max-width:190px;padding:0;background:transparent;color:#172033;border:0;border-radius:0;text-align:center;cursor:pointer}
.learn-word .ipa{justify-self:center;min-width:48px;min-height:18px;border-radius:5px;background:#eef1f5;color:#7b8493;font:12px/18px ui-monospace,SFMono-Regular,Menlo,monospace;padding:0 6px}
.learn-word .big-word{display:block;padding:0 7px 1px;font-size:28px;line-height:1.16;font-weight:950;letter-spacing:0;border-radius:7px 7px 2px 2px;background:#bdefff;border-bottom:4px solid #ef476f;white-space:nowrap}
.learn-word.predicate .big-word{background:#ffc3d2;border-bottom-color:#22c55e}
.learn-word.adverbial .big-word{background:#c8eef7;border-bottom-color:#7c5cff}
.learn-word.object .big-word{background:#bdefff;border-bottom-color:#4ade80}
.learn-word.operator .big-word{background:#ead8ff;border-bottom-color:#7c5cff}
.learn-word.complement .big-word{background:#d9f99d;border-bottom-color:#65a30d}
.learn-word .word-pos{justify-self:center;margin-top:3px;border:1px solid #dfe4ea;border-radius:999px;background:#fff;color:#556070;font-size:11px;line-height:18px;padding:0 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.learn-word .word-zh{font-size:12px;font-weight:800;color:#4b5563;line-height:1.3;display:flex;align-items:center;justify-content:center}
.translation{text-align:center;font-size:18px;font-weight:800;color:#475569;margin:4px 0 10px}
.shortcut-bar{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;color:#425066;font-size:11px}
.shortcut-bar span{background:#f4f7fb;border:1px solid #dfe6ee;border-radius:6px;padding:2px 6px;white-space:nowrap}
.dependency-panel{margin:0 0 14px;border:1px solid #dfe6ee;border-radius:12px;background:#fff;padding:11px 12px}
.dep-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dep-head span{font-size:15px;font-weight:950;color:#102026}
.dep-sentence{margin:0 0 8px;color:#334155;font-weight:800;line-height:1.4}
.dep-canvas{position:relative;display:grid;overflow:auto;min-height:330px;border:1px solid #e2e8f0;border-radius:10px;background:#fbfcff;padding:18px;isolation:isolate}
.dep-node{z-index:2;align-self:center;justify-self:center;min-width:44px;max-width:92px;border:2px solid #94a3b8;border-radius:8px;background:#fff;color:#26303d;text-align:center;font:800 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;padding:9px 8px;box-shadow:0 1px 0 rgba(15,23,42,.04)}
.dep-node span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dep-node.root{border-color:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.12)}
.dep-node.subject{border-color:#ef4444}
.dep-node.aux{border-color:#22c55e}
.dep-node.prep,.dep-node.prepObject,.dep-node.object{border-color:#6366f1}
.dep-node.determiner{border-color:#14b8a6}
.dep-node.adverbial{border-color:#8b5cf6}
.dep-node.punct{border-color:#64748b;color:#64748b}
.dep-edge{z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.dep-edge path{fill:none;stroke:#64748b;stroke-width:2;stroke-dasharray:5 4}
.dep-edge text{paint-order:stroke;stroke:#fbfcff;stroke-width:6px;fill:#1f2937;font:900 10px -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;text-anchor:middle;dominant-baseline:middle}
.first-pass-panel{margin:0 0 14px;border:1px solid #cfe0dc;border-radius:12px;background:#f7fbfa;padding:11px 12px}
.first-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.first-head span{font-size:16px;font-weight:950;color:#102026}
.first-head b{font-size:11px;color:#fff;background:#2f6f73;border-radius:999px;padding:2px 8px;white-space:nowrap}
.first-pattern{border-radius:10px;background:#173b3e;color:#d9fbf5;padding:9px 10px;margin-bottom:8px}
.first-pattern small{display:block;font-size:11px;color:#a7f3d0;font-weight:900;margin-bottom:2px}
.first-pattern strong{display:block;font-size:15px;line-height:1.35}
.first-pattern p{margin:4px 0 0;color:#d1e8e5;font-size:12px;line-height:1.4;opacity:1}
.component-table-wrap{margin:8px 0;border:1px solid #dfe8ea;border-radius:10px;background:#fff;overflow:auto}
.component-table{width:100%;border-collapse:collapse;min-width:360px}
.component-table th,.component-table td{border-bottom:1px solid #edf1f5;padding:7px 8px;text-align:left;vertical-align:top;font-size:12px;line-height:1.4}
.component-table thead th{background:#f1f7f6;color:#173b3e;font-weight:950;white-space:nowrap}
.component-table tbody th{width:104px;color:#102026;font-weight:950}
.component-table tbody td:first-of-type{width:92px;color:#102026;font-weight:900}
.component-table tbody td:last-child{color:#475569;overflow-wrap:anywhere}
.component-table tr:last-child th,.component-table tr:last-child td{border-bottom:0}
.first-chunks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:8px 0}
.first-chunk{min-width:0;border:1px solid #dfe8ea;background:#fff;border-radius:10px;padding:7px 8px}
.first-chunk b{display:block;color:#173b3e;font-size:12px}
.first-chunk span{display:block;color:#102026;font-size:13px;font-weight:900;line-height:1.35;overflow-wrap:anywhere}
.first-chunk em{display:block;color:#64748b;font-size:11.5px;font-style:normal;line-height:1.35;margin-top:2px}
.first-make,.first-examples{border:1px solid #dfe8ea;background:#fff;border-radius:10px;padding:8px;margin-top:8px}
.first-swaps{border:1px solid #dfe8ea;background:#fff;border-radius:10px;padding:8px;margin-top:8px}
.first-make h3,.first-examples h3,.first-swaps h3{font-size:13px;line-height:1.25;margin:0 0 6px;color:#173b3e}
.first-make ol{margin:0;padding-left:18px}
.first-make li{margin:5px 0;color:#475569;font-size:12.5px;line-height:1.4}
.first-make li b{display:block;color:#102026}
.first-make li span{display:block}
.swap-card{border-top:1px solid #edf1f5;padding-top:7px;margin-top:7px}
.swap-card:first-of-type{border-top:0;padding-top:0;margin-top:0}
.swap-card b{display:inline-block;color:#102026;font-size:12.5px;margin-right:6px}
.swap-card em{font-style:normal;color:#2f6f73;font-size:12px;font-weight:900}
.swap-card p{margin:4px 0;color:#475569;font-size:12px;line-height:1.4;opacity:1}
.swap-card div{display:flex;gap:5px;flex-wrap:wrap}
.swap-card span{background:#eef7f5;color:#26303d;border-radius:999px;padding:2px 7px;font-size:11.5px;font-weight:800}
.first-example{font-size:12px}
.pattern-study-panel{margin:0 0 14px;border:1px solid #d7e2ec;border-radius:12px;background:#fbfcff;padding:11px 12px}
.study-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.study-head span{font-size:16px;font-weight:950;color:#102026}
.study-head b{font-size:11px;color:#173b3e;background:#e9f2f0;border-radius:999px;padding:2px 8px;white-space:nowrap}
.study-rule{border-radius:10px;background:#173b3e;color:#d9fbf5;padding:9px 10px;margin-bottom:9px}
.study-rule small{display:block;font-size:11px;color:#a7f3d0;font-weight:900;margin-bottom:2px}
.study-rule strong{display:block;font-size:14px;line-height:1.35}
.study-rule p{margin:4px 0 0;color:#d1e8e5;font-size:12px;line-height:1.4;opacity:1}
.pattern-study-panel section{border-top:1px solid #e2e8f0;padding-top:8px;margin-top:8px}
.pattern-study-panel h3{font-size:13px;line-height:1.25;margin:0 0 6px;color:#173b3e}
.pattern-groups{display:grid;gap:8px}
.pattern-group{border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:8px}
.pattern-group>b{display:block;color:#173b3e;font-size:12.5px}
.pattern-group>p{margin:2px 0 6px;color:#64748b;font-size:12px;line-height:1.4;opacity:1}
.pattern-example{font-size:12px}
.question-grid,.transform-grid{display:grid;gap:7px}
.question-row,.transform-row{display:grid;gap:3px;border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:8px}
.question-row b,.transform-row b{font-size:11.5px;color:#2f6f73}
.question-row span,.transform-row span{font-size:13px;line-height:1.35;font-weight:900;color:#102026;overflow-wrap:anywhere}
.question-row em,.transform-row em{font-size:11.5px;line-height:1.35;color:#64748b;font-style:normal}
.native-panel{margin:0 0 14px;border:1px solid #cfe0dc;border-radius:12px;background:#f7fbfa;padding:11px 12px}
.native-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.native-head span{font-size:16px;font-weight:950;color:#102026}
.native-head b{font-size:11px;color:#fff;background:#2f6f73;border-radius:999px;padding:2px 8px;white-space:nowrap}
.native-panel>p{margin:0 0 9px;color:#475569;font-size:12.5px;line-height:1.5;opacity:1}
.native-steps{display:grid;gap:6px}
.native-step{display:grid;grid-template-columns:24px 1fr;gap:2px 8px;border:1px solid #dfe8ea;background:#fff;border-radius:10px;padding:7px 8px}
.native-step span{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:#e9f2f0;color:#173b3e;font-weight:950;font-size:12px}
.native-step b{font-size:12.5px;color:#173b3e}
.native-step p{margin:0;color:#475569;font-size:12px;line-height:1.35;opacity:1}
.native-checks{margin-top:8px;border:1px solid #dfe8ea;background:#fff;border-radius:10px;padding:8px}
.native-checks>b{display:block;color:#173b3e;margin-bottom:5px}
.native-checks div{display:flex;gap:5px;flex-wrap:wrap}
.native-checks span{background:#eef7f5;color:#26303d;border-radius:999px;padding:2px 7px;font-size:11.5px;font-weight:800}
.daily-loop{margin:0 0 14px;border:1px solid #d7e2ec;border-radius:12px;background:#fbfcff;padding:11px 12px}
.loop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.loop-head span{font-size:15px;font-weight:950;color:#102026}
.loop-head b{font-size:11px;color:#173b3e;background:#e9f2f0;border-radius:999px;padding:2px 8px;white-space:nowrap}
.loop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.loop-card{border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:8px;min-width:0}
.loop-card b{display:inline-block;color:#173b3e;font-size:12.5px;margin-right:5px}
.loop-card span{display:inline-block;color:#2f6f73;background:#eef7f5;border-radius:999px;padding:1px 6px;font-size:11px;font-weight:900}
.loop-card p{margin:5px 0 0;color:#475569;font-size:12px;line-height:1.4;opacity:1}
.loop-note{margin-top:8px;border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:7px 8px;color:#173b3e;font-size:12px;font-weight:800;line-height:1.45}
.progress-panel{margin:0 0 14px;border:1px solid #d8e7e4;border-radius:12px;background:#f7fbfa;padding:11px 12px}
.progress-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.progress-head span{font-size:16px;font-weight:950;color:#102026}
.progress-head b{font-size:11px;color:#fff;background:#2f6f73;border-radius:999px;padding:2px 8px;white-space:nowrap}
.progress-bar{height:8px;border-radius:999px;background:#e2e8f0;overflow:hidden;margin-bottom:8px}
.progress-bar i{display:block;height:100%;border-radius:999px;background:#2f6f73;transition:width .18s ease}
.progress-advice{border:1px solid #dfe8ea;background:#fff;border-radius:10px;padding:7px 8px;color:#173b3e;font-size:12px;font-weight:800;line-height:1.45;margin-bottom:8px}
.progress-list{display:grid;gap:7px}
.progress-item{display:grid;grid-template-columns:20px 1fr;gap:7px;align-items:start;border:1px solid #dfe8ea;background:#fff;border-radius:10px;padding:8px;cursor:pointer}
.progress-item input{width:16px;height:16px;margin:2px 0 0;accent-color:#2f6f73}
.progress-item span{display:grid;gap:2px;min-width:0}
.progress-item b{font-size:12.5px;line-height:1.25;color:#102026}
.progress-item em{font-size:11.5px;line-height:1.35;color:#64748b;font-style:normal;overflow-wrap:anywhere}
.progress-item:has(input:checked){border-color:#9ccfca;background:#eef7f5}
.card-fusion-panel{margin:0 0 14px;border:1px solid #d7e2ec;border-radius:12px;background:#fbfcff;padding:11px 12px}
.fusion-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.fusion-head span{font-size:16px;font-weight:950;color:#102026}
.fusion-head b{font-size:11px;color:#173b3e;background:#e9f2f0;border-radius:999px;padding:2px 8px;white-space:nowrap}
.fusion-source{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:8px;margin-bottom:8px}
.fusion-source strong{font-size:12.5px;color:#102026;line-height:1.3}
.fusion-source a{font-size:12px;font-weight:900;color:#2f6f73;text-decoration:none;white-space:nowrap}
.fusion-meta{display:grid;gap:5px;margin-bottom:8px}
.fusion-meta span{display:block;border:1px solid #e2e8f0;background:#fff;border-radius:9px;padding:6px 8px;color:#475569;font-size:12px;line-height:1.35}
.fusion-layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.fusion-layers div{border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:8px;min-width:0}
.fusion-layers b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:#e9f2f0;color:#173b3e;font-weight:950;margin-bottom:4px}
.fusion-layers p{margin:0;color:#475569;font-size:11.5px;line-height:1.4;opacity:1}
.essential-pack-panel{margin:0 0 14px;border:1px solid #cfe0dc;border-radius:12px;background:#f7fbfa;padding:11px 12px}
.essential-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.essential-head span{font-size:16px;font-weight:950;color:#102026}
.essential-head b{font-size:11px;color:#fff;background:#2f6f73;border-radius:999px;padding:2px 8px;white-space:nowrap}
.essential-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.essential-grid section{border:1px solid #dfe8ea;background:#fff;border-radius:10px;padding:8px;min-width:0}
.essential-grid section.wide{grid-column:1/-1}
.essential-grid h3{font-size:12.5px;line-height:1.25;margin:0 0 6px;color:#173b3e}
.essential-ipa{margin:0;color:#102026;font:800 12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:1;overflow-wrap:anywhere}
.essential-grid em{display:block;margin-top:4px;color:#64748b;font-size:11px;font-style:normal;line-height:1.3}
.essential-list{display:grid;gap:5px}
.essential-list div{display:grid;gap:1px;border-top:1px solid #edf1f5;padding-top:5px}
.essential-list div:first-child{border-top:0;padding-top:0}
.essential-list b{font-size:11px;line-height:1.25;color:#2f6f73}
.essential-list span{font-size:11.5px;line-height:1.35;color:#334155;overflow-wrap:anywhere}
.essential-plp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.essential-plp div{border:1px solid #edf1f5;background:#fbfcff;border-radius:8px;padding:7px}
.essential-plp b{display:block;color:#2f6f73;font-size:11.5px;margin-bottom:2px}
.essential-plp span{display:block;color:#475569;font-size:11.5px;line-height:1.35}
.memory-lab-panel{margin:0 0 14px;border:1px solid #d7e2ec;border-radius:12px;background:#fbfcff;padding:11px 12px}
.memory-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.memory-head span{font-size:16px;font-weight:950;color:#102026}
.memory-head b{font-size:11px;color:#173b3e;background:#e9f2f0;border-radius:999px;padding:2px 8px;white-space:nowrap}
.memory-route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:8px}
.memory-route span{display:flex;align-items:center;justify-content:center;min-height:28px;border:1px solid #dfe8ea;background:#fff;color:#2f6f73;border-radius:8px;font-size:11px;font-weight:900;text-align:center;line-height:1.2;padding:3px}
.memory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.memory-grid section{border:1px solid #dfe8ea;background:#fff;border-radius:10px;padding:8px;min-width:0}
.memory-grid section.wide{grid-column:1/-1}
.memory-grid h3{font-size:12.5px;line-height:1.25;margin:0 0 6px;color:#173b3e}
.memory-grid em{display:block;margin-top:4px;color:#64748b;font-size:11px;font-style:normal;line-height:1.35}
.memory-zh,.memory-cloze,.memory-story,.memory-answer{margin:0;color:#102026;font-size:12.5px;line-height:1.45;font-weight:850;overflow-wrap:anywhere}
.memory-cloze{font:900 13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:#173b3e}
.memory-story{color:#475569;font-weight:800}
.memory-reveal{margin-top:7px}
.memory-answer{margin-top:7px;border:1px solid #dfe8ea;background:#f7fbfa;border-radius:8px;padding:7px 8px}
.memory-examples{display:grid;gap:6px}
.memory-example{margin:0}
.memory-example b{display:block;color:#2f6f73;font-size:11px}
.memory-example em{font-size:11px}
.memory-mistakes{display:grid;gap:6px}
.memory-mistakes div{border-top:1px solid #edf1f5;padding-top:6px}
.memory-mistakes div:first-child{border-top:0;padding-top:0}
.memory-mistakes b{display:block;color:#2f6f73;font-size:11.5px;margin-bottom:2px}
.memory-mistakes span{display:block;color:#475569;font-size:11.5px;line-height:1.35}
.memory-review{display:grid;gap:7px}
.memory-review p{margin:0;color:#475569;font-size:12px;line-height:1.4;font-weight:800}
.memory-review div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.memory-review button{border-radius:9px;padding:7px 6px;font-size:12px}
.knowledge-hub{margin:0 0 14px;border:1px solid #dfe8ea;border-radius:12px;background:#fff;padding:10px 11px}
.hub-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.hub-head span{font-size:15px;font-weight:950;color:#102026}
.hub-head b{font-size:11px;color:#2f6f73;background:#eef7f5;border-radius:999px;padding:2px 8px;white-space:nowrap}
.knowledge-list{display:flex;flex-wrap:wrap;gap:6px}
.knowledge-btn{background:#e9f2f0;color:#173b3e;border:1px solid #cfe0dc;border-radius:999px;padding:5px 9px;font-size:12px}
.builder-panel{margin:0 0 14px;border:1px solid #d8e7e4;border-radius:12px;background:#f7fbfa;padding:11px 12px}
.builder-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}
.builder-head span{font-size:15px;font-weight:950;color:#102026}
.builder-head b{font-size:11px;color:#2f6f73;background:#e0f2ef;border-radius:999px;padding:2px 8px;white-space:nowrap}
.builder-pattern{background:#173b3e;color:#d9fbf5;border-radius:9px;padding:8px 10px;font-weight:900}
.builder-note{margin:7px 0;color:#475569;font-size:12.5px;line-height:1.5}
.slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:8px 0}
.slot-card{border:1px solid #dfe8ea;background:#fff;border-radius:10px;padding:7px 8px}
.slot-card b{display:block;color:#173b3e;margin-bottom:4px}
.slot-card span{display:inline-block;margin:2px 3px 2px 0;background:#eef7f5;color:#26303d;border-radius:999px;padding:1px 7px;font-size:12px;font-weight:800}
.builder-expand{margin-top:8px}
.builder-expand>b{display:block;color:#173b3e;margin-bottom:6px}
.playground-panel{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:11px 12px}
.playground-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.playground-head span{font-size:15px;font-weight:950;color:#102026}
.play-layers{display:grid;gap:10px}
.play-layers section{border-top:1px solid #edf1f5;padding-top:8px}
.play-layers h3{font-size:13px;line-height:1.25;margin:0 0 6px;color:#173b3e}
.drill-pills{display:flex;flex-wrap:wrap;gap:6px}
.drill-pill{display:grid;gap:2px;text-align:left;border:1px solid #dfe8ea;background:#fbfcff;color:#26303d;border-radius:10px;padding:6px 8px;max-width:100%}
.drill-pill b{font-size:11px;color:#2f6f73}
.drill-pill span{font-size:12px;line-height:1.3}
.drill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.drill-card{display:grid;gap:3px;text-align:left;border:1px solid #dfe8ea;background:#fbfcff;color:#26303d;border-radius:10px;padding:7px 8px;min-width:0}
.drill-card b{font-size:11px;color:#2f6f73}
.drill-card span{font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.scene-grid{display:grid;gap:7px}
.scene-card{border:1px solid #dfe8ea;background:#fbfcff;border-radius:10px;padding:8px}
.scene-card>div{display:grid;gap:1px;margin-bottom:5px}
.scene-card b{color:#173b3e;font-size:13px}
.scene-card span{color:#6b7785;font-size:12px}
.scene-sentence{display:block;width:100%;text-align:left;margin:5px 0 0;border:1px solid #e5edf0;background:#fff;color:#26303d;border-radius:8px;padding:5px 7px;font-size:12px}
.transfer-grid{display:grid;gap:7px}
.transfer-card{border:1px solid #dfe8ea;background:#fbfcff;border-radius:10px;padding:8px}
.transfer-card>b{display:block;color:#173b3e;font-size:13px}
.transfer-card>span{display:block;color:#6b7785;font-size:12px;margin:1px 0 5px}
.transfer-sentence{display:block;width:100%;text-align:left;margin:5px 0 0;border:1px solid #e5edf0;background:#fff;color:#26303d;border-radius:8px;padding:5px 7px;font-size:12px}
.block{margin:0 0 12px}
.block h2{font-size:14px;color:#173b3e;margin:0 0 6px}
.text{background:#f7fbfa;border-left:4px solid #2f6f73;border-radius:8px;padding:8px 10px;font-weight:800}
.pattern{background:#173b3e;color:#d9fbf5;border-radius:10px;padding:8px 10px;margin:7px 0;font-weight:800}
.same-pattern{margin-top:9px;border:1px solid #e7ecef;border-radius:10px;background:#fbfcff;padding:9px 10px}
.same-pattern b{display:block;color:#173b3e;margin-bottom:6px}
.example-sentence{display:block;width:100%;text-align:left;margin:5px 0;border:1px solid #dfe8ea;background:#fff;color:#26303d;border-radius:9px;padding:6px 8px;font-weight:800}
.example-sentence:hover{background:#eef7f5;border-color:#9ccfca}
.example-sentence span{display:block}
.ex-en{font-size:13px;line-height:1.35;font-weight:900;color:#102026;overflow-wrap:anywhere}
.ex-ipa{margin-top:2px;font:11.5px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;color:#64748b;font-weight:700}
.ex-zh{margin-top:2px;font-size:12px;line-height:1.35;color:#475569;font-weight:800}
.ex-read{margin-top:2px;font-size:11.5px;line-height:1.35;color:#2f6f73;font-weight:800}
.linking-lab{margin:0 0 14px;border:1px solid #dbe6ef;border-radius:12px;background:#fbfcff;padding:11px 12px}
.lab-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.lab-head span{font-size:15px;font-weight:950;color:#102026}
.lab-head b{font-size:11px;color:#173b3e;background:#e9f2f0;border-radius:999px;padding:2px 8px;white-space:nowrap}
.mouth-point{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:7px 8px;margin-bottom:8px}
.mouth-point b{color:#2f6f73;font-size:12px}
.mouth-point span{font-weight:900;color:#102026}
.mouth-point em{grid-column:1/-1;color:#64748b;font-style:normal;font-size:12px}
.mouth-card,.slow-line{border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:8px;margin-bottom:8px}
.mouth-card b,.slow-line b,.lab-videos h3,.lab-grid h3{display:block;color:#173b3e;font-size:13px;margin:0 0 4px}
.mouth-card p{margin:0;color:#475569;font-size:12.5px;line-height:1.5}
.slow-line span{display:block;color:#102026;font-weight:900;font-size:12.5px;line-height:1.45}
.lab-grid{display:grid;gap:8px}
.lab-grid section{border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:8px}
.lab-grid ol{margin:0;padding-left:18px}
.lab-grid li{font-size:12.5px;line-height:1.45;margin:2px 0;color:#475569}
.link-drill{font-size:12px}
.lab-videos{margin-top:8px;border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:8px}
.link-video{display:grid;gap:2px;border:1px solid #e5edf0;border-radius:8px;padding:6px 8px;margin-top:5px;text-decoration:none;color:#26303d}
.link-video:hover{background:#eef7f5;border-color:#9ccfca}
.link-video b{font-size:12.5px;color:#173b3e}
.link-video span{font-size:12px;color:#64748b}
.muted{color:#6b7785;font-size:12.5px}
.chip{display:inline-block;border:1px solid #dfe8ea;background:#fff;border-radius:10px;padding:4px 8px;margin:3px}
.point{border:1px solid #e7ecef;border-radius:10px;padding:8px 10px;margin:7px 0;background:#fbfcff}
.point b{color:#2f6f73}
.video-list{display:grid;gap:7px}
.video-link{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;border:1px solid #dfe8ea;background:#fbfcff;color:#26303d;border-radius:10px;padding:8px 10px;text-decoration:none}
.video-link:hover{background:#eef7f5;border-color:#9ccfca}
.video-link b{display:block;font-size:13px;line-height:1.25;color:#173b3e}
.video-link small{display:block;margin-top:2px;color:#6b7785;font-size:12px;line-height:1.25}
.play-dot{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:#2f6f73;color:#fff;font-size:11px}
ol{padding-left:20px;margin:6px 0}
.wordgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.word{border:1px solid #dfe8ea;border-bottom:4px solid #2f6f73;border-radius:10px;padding:7px 8px;background:#fff}
.word .w{font-size:17px;font-weight:900;color:#102026}
.word .pos{display:inline-block;font-size:11px;color:#2f6f73;background:#eef7f5;border-radius:10px;padding:1px 7px;margin:3px 0}
.word .role{font-size:12px;color:#334155;font-weight:700}
.structure{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.sblock{border-radius:10px;padding:8px 10px;min-width:94px;border-bottom:4px solid #2f6f73;background:#dff7ff}
.sblock.subject{background:#bdefff;border-bottom-color:#ef476f}
.sblock.predicate{background:#ffc3d2;border-bottom-color:#22c55e}
.sblock.adverbial{background:#c8eef7;border-bottom-color:#7c5cff}
.sblock.contraction{background:#bdefff;border-bottom-color:#ef476f}
.sblock.object{background:#ead8ff;border-bottom-color:#f59e0b}
.sblock.complement{background:#d9f99d;border-bottom-color:#65a30d}
.sblock .phrase{font-size:20px;font-weight:950;letter-spacing:0;color:#102026}
.sblock .label{display:inline-block;background:#fff;border:1px solid #d9e2e7;border-radius:12px;padding:1px 8px;margin:3px 0;font-size:11px;color:#334155}
.sexplain{margin-top:8px;padding:9px 11px;border-radius:10px;background:#fff;border:1px solid #e7ecef}
.sexplain b{color:#173b3e}
.knowledge-modal{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.38);display:flex;align-items:flex-start;justify-content:center;padding:22px 12px}
.knowledge-modal[hidden]{display:none}
.knowledge-dialog{position:relative;width:min(420px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:12px;border:1px solid #dfe8ea;box-shadow:0 24px 60px rgba(15,23,42,.28);padding:14px}
.modal-close{position:absolute;right:10px;top:10px}
#knowledgeBody h2{font-size:18px;margin:0 34px 8px 0;color:#102026}
.knowledge-summary{margin:0 0 9px;color:#475569;font-size:13px;line-height:1.5;opacity:1}
#knowledgeBody ul{margin:8px 0;padding-left:18px}
#knowledgeBody li{font-size:13px;line-height:1.45;margin:4px 0;color:#26303d}
.knowledge-tip{border:1px solid #dfe8ea;background:#f7fbfa;border-radius:10px;padding:8px 9px;margin:9px 0}
.knowledge-tip b,.knowledge-examples>b{display:block;color:#173b3e;margin-bottom:4px}
.knowledge-tip span{display:block;color:#475569;font-size:12.5px;line-height:1.45}
.knowledge-examples{margin-top:9px}
.knowledge-example{font-size:12px}