:root{--ink:#182f36;--muted:#63767d;--green:#006e62;--pale:#e7f3ef;--paper:#fff;--line:#dbe5e2;--blue:#0758b0;--purple:#7935a0}*{box-sizing:border-box}body{margin:0;background:#f1f4f1;color:var(--ink);font:16px/1.7 "Segoe UI",Tahoma,Arial,sans-serif}button,select,input{font:inherit}button,select{border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);padding:8px 13px}button{cursor:pointer;transition:background .15s}button:hover{background:var(--pale)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #e0a52d;outline-offset:3px}button:disabled{opacity:.45;cursor:default}a{color:var(--green)}header{background:#123d37;color:#fff;padding:27px max(24px,calc((100vw - 1540px)/2));display:flex;gap:30px;justify-content:space-between;align-items:center}.eyebrow{margin:0;font-size:12px;letter-spacing:1.5px;color:#add7cc}h1{font-size:28px;line-height:1.4;margin:4px 0 7px}header p{margin:0;font-size:14px;color:#d0e5de}.badge{border:1px solid #5e8c7c;border-radius:30px;padding:6px 15px;white-space:nowrap;font-size:13px}.shell{max-width:1580px;margin:auto;padding:22px 24px 50px}.units{display:flex;gap:8px;overflow:auto;padding:2px 0 15px}.unit{white-space:nowrap;flex:0 0 auto}.unit.active{background:var(--green);border-color:var(--green);color:#fff}.unit small{display:block;font-size:11px;opacity:.8}.toolbar{background:white;border:1px solid var(--line);border-radius:14px;padding:15px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.field{display:flex;align-items:center;gap:7px;font-size:13px}.field input[type=search]{border:1px solid var(--line);border-radius:9px;padding:9px;width:215px}.divider{height:28px;width:1px;background:var(--line)}.main-nav{display:flex;gap:7px;align-items:center}.counter{font-size:13px;color:var(--muted);margin-inline-start:auto}.speechbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:13px 0}.speechbar select{max-width:300px}.status{color:var(--muted);font-size:12px;min-height:21px;flex:1;min-width:200px}.layout{display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr);gap:20px;align-items:start}.book{grid-column:2;grid-row:1;min-width:0;background:#dfe7e1;border:1px solid var(--line);border-radius:15px;overflow:hidden}.bookhead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:white;gap:8px;flex-wrap:wrap}.bookhead h2{font-size:16px;margin:0}.zoom{display:flex;align-items:center;gap:6px;font-size:12px}.zoom input{width:95px;accent-color:var(--green)}.image-viewport{overflow:auto;direction:ltr;max-height:calc(100vh - 145px);min-height:350px;padding:12px}.canvas{position:relative;margin:auto;width:100%;min-width:100%}.canvas img{display:block;width:100%;height:auto;box-shadow:0 3px 15px #203b3022}.target{position:absolute;border:none;border-bottom:1px dotted #00846799;border-radius:1px;padding:0;background:transparent;min-height:5px;z-index:1}.target:hover,.target.selected{background:#ffc74b55;border:1px solid #c08d12}.canvas[data-mode=phrase] .target[data-kind=word],.canvas[data-mode=word] .target[data-kind=phrase],.canvas.no-marks .target{display:none}.aside{grid-column:1;grid-row:1;min-width:0;background:white;border:1px solid var(--line);border-radius:15px;overflow:hidden;position:sticky;top:12px}.tabs{display:flex;border-bottom:1px solid var(--line)}.tab{flex:1;border:0;border-radius:0;padding:13px;font-size:14px;background:#f8faf9}.tab.active{background:white;color:var(--green);box-shadow:inset 0 -3px var(--green);font-weight:600}.aside-actions{padding:10px 13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);font-size:12px}.aside-actions button{padding:5px 10px;font-size:12px}.cards{max-height:calc(100vh - 240px);min-height:220px;overflow:auto;padding:12px;scroll-behavior:smooth}.card{padding:13px 12px;margin-bottom:10px;border:1px solid var(--line);border-radius:10px;background:#fff}.card.active{background:#f2f9f5;border-color:#6ba898;box-shadow:inset -3px 0 var(--green)}.card.speaking{outline:2px solid #b9a14c}.tr{font-size:16px;line-height:1.65;direction:ltr;text-align:left;overflow-wrap:anywhere;color:#173a40}.ar{margin-top:8px;color:#425b62;font-size:14px;line-height:1.85}.no-ar .ar{display:none}.answer .tr{color:var(--blue)}.answer.model .tr{color:var(--purple)}.card-controls{display:flex;gap:6px;align-items:center;margin-top:9px}.play{padding:3px 10px;font-size:12px;border-color:#c5dcd3;color:var(--green)}.meta{font-size:10px;color:#788e91;margin-inline-start:auto}.note{font-size:12px;color:#5d7277;background:#e8eeea;border-radius:10px;padding:12px 15px;margin-top:16px}.note p{margin:3px 0}.note summary{cursor:pointer;font-weight:600}.empty{padding:30px 16px;color:var(--muted);text-align:center}.popup{position:fixed;inset:auto 25px 22px auto;width:min(455px,calc(100vw - 40px));background:#fff;border:1px solid #a4bfb4;border-radius:14px;box-shadow:0 12px 60px #102e3e44;padding:19px;z-index:10;max-height:65vh;overflow:auto}.popup[hidden]{display:none}.popuphead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;color:var(--muted)}.popup .close{padding:0 8px;font-size:22px;border:0}.popup .play{margin-top:12px}.search-results{background:white;border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:10px;max-height:350px;overflow:auto}.search-results[hidden]{display:none}.result{display:block;width:100%;text-align:start;margin:5px 0}.result small{display:block;color:var(--muted)}.footer-nav{display:flex;justify-content:space-between;margin-top:16px}.footer-nav button{min-width:135px}.progress{height:3px;background:#dce9e1;margin-top:13px;border-radius:8px;overflow:hidden}.progress span{display:block;height:100%;background:var(--green);transition:width .2s}footer{font-size:12px;color:var(--muted);margin-top:18px;text-align:center}.mobile-guide{display:none}.offline{font-size:12px;color:var(--muted);margin:12px 0}#page-select{max-width:205px}#search-clear{padding:6px 10px}input[type=checkbox]{accent-color:var(--green)}
@media(min-width:1600px){.image-viewport{max-height:none}.cards{max-height:82vh}}@media(max-width:950px){header{padding:22px}.badge{display:none}.shell{padding:16px 12px}.layout{grid-template-columns:1fr}.book{grid-column:1;grid-row:1}.aside{grid-column:1;grid-row:2;position:static}.cards{max-height:520px}.image-viewport{max-height:none;min-height:0}.counter{margin:0}.speechbar select{max-width:200px}.mobile-guide{display:block;font-size:12px;color:var(--muted)}}@media(max-width:520px){h1{font-size:22px}.toolbar{padding:10px;gap:9px}.main-nav{width:100%;justify-content:space-between}.divider{display:none}.field input[type=search]{width:170px}.speechbar{gap:7px}.speechbar select{max-width:180px}.bookhead{padding:10px}.popup{inset:auto 12px 12px auto;width:calc(100vw - 24px)}}@media print{header,.toolbar,.speechbar,.units,.aside-actions,.note,.footer-nav,.popup,.progress,.bookhead,.offline,footer,.card-controls{display:none!important}.shell{padding:0}.layout{display:block}.book,.aside{border:0;position:static}.image-viewport,.cards{max-height:none;overflow:visible;padding:0}.canvas{width:100%!important}.target{display:none}.aside{page-break-before:always}.cards .card{break-inside:avoid}}

.view-tabs{display:flex;gap:8px;margin:0 0 18px}.view-tabs button{font-weight:600;min-width:155px}.view-tabs .active{background:var(--green);color:#fff;border-color:var(--green)}[hidden]{display:none!important}body[data-view="grammar"] .book-only{display:none!important}.grammar-heading h2{font-size:25px;margin:5px 0}.grammar-heading p{color:var(--muted);margin:0 0 15px}.grammar-tools{display:flex;gap:14px;flex-wrap:wrap;align-items:center;background:white;padding:15px;border:1px solid var(--line);border-radius:12px;margin-bottom:17px}.grammar-tools input[type=search]{padding:9px;border:1px solid var(--line);border-radius:8px;min-width:250px}.grammar-count{font-size:13px;color:var(--muted)}.grammar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:18px}.rule-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px;min-width:0;scroll-margin-top:18px}.rule-card h3{font-size:21px;margin:7px 0}.rule-tr{color:var(--green);font-size:16px;text-align:left;direction:ltr;margin:0 0 12px}.rule-chip{display:inline-block;font-size:11px;color:#47645b;background:var(--pale);padding:3px 9px;border-radius:20px;margin-inline-end:7px}.rule-explain{font-size:15px;line-height:1.95;margin:12px 0}.rule-summary{border-inline-start:3px solid #a4c4b5;padding:6px 12px;font-size:14px;direction:ltr;text-align:left;color:#44636b}.rule-formula{direction:ltr;text-align:left;white-space:pre-wrap;background:#f1f6f4;border:1px solid #e0e9e3;border-radius:8px;padding:12px;font:14px/1.9 Consolas,"Segoe UI",sans-serif;overflow-wrap:anywhere}.rule-actions{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.rule-actions button{font-size:12px;padding:5px 10px}.rule-examples-title{font-size:14px;margin:15px 0 8px}.grammar-example{background:#f8fafc;border:1px solid #e1e8ec;border-radius:9px;padding:13px;margin-top:10px}.grammar-example .tr{color:var(--blue)}.example-source{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--muted)}.example-source button{font-size:11px;padding:3px 9px;color:var(--green)}.example-note{font-size:12px;color:#627078;margin:8px 0 0}.grammar-hide-ar .grammar-ar{display:none}.grammar-intro{font-size:13px;background:#e8eeea;padding:12px 16px;border-radius:9px;margin-bottom:15px}.rule-jump{outline:3px solid #c5a558}.grammar-return{font-size:12px;color:var(--muted)}@media(max-width:520px){.rule-card{padding:16px}.grammar-tools input[type=search]{min-width:0;width:100%}.grammar-tools label:first-child{width:100%}.view-tabs button{min-width:0;flex:1}}
@media print{.view-tabs,.grammar-tools,.rule-actions,.example-source button{display:none!important}.grammar-grid{display:block}.rule-card{break-inside:avoid;border:0}.grammar-example{break-inside:avoid}}

.project-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.project-nav a{color:#fff;text-decoration:none;border:1px solid #6a9b8e;border-radius:9px;padding:5px 13px;font-size:13px}.project-nav a[aria-current=page]{background:#e7f3ef;color:#123d37}