.grammar-path{margin:20px 0;padding:20px;border:1px solid #d8e3de;border-radius:20px;background:var(--panel,#fffdf7);color:var(--ink,#263d3a)}
.grammar-path h3{margin:0 0 8px}.grammar-path details{margin:12px 0;border-top:1px solid #d8e3de;padding-top:12px}.grammar-path summary{cursor:pointer;font-weight:700;padding:5px 0}.grammar-path-links,.grammar-foundation-links{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.grammar-path-links button,.grammar-foundation-links button{white-space:normal;text-align:left;max-width:100%}.grammar-path-outcome{border-left:5px solid #558f82;padding:10px 14px;background:#edf8f2;border-radius:8px;color:#23453c}
.grammar-foundation{padding:16px;border-radius:16px;background:#f7f5ff;color:#29344c;margin-top:14px}.grammar-foundation table{width:100%;border-collapse:collapse;background:white}.grammar-foundation td,.grammar-foundation th{text-align:left;padding:9px;border-bottom:1px solid #d9dcec;overflow-wrap:anywhere}.grammar-foundation .table-wrap{overflow:auto;max-width:100%}.grammar-foundation h4{margin-bottom:5px}.grammar-foundation-feedback{padding:10px 0;line-height:1.6}.grammar-foundation fieldset{min-width:0}.grammar-foundation .opt{overflow-wrap:anywhere}
.grammar-picture{margin:18px 0;padding:18px;border-radius:18px;background:linear-gradient(140deg,#f1fbf6,#f6f0ff);color:#263d3a;border:1px solid #d3e6dd;overflow:hidden}.grammar-picture h4{font-size:18px;margin:7px 0 14px}.grammar-picture svg{display:block;width:100%;max-width:600px;margin:0 auto 10px}.grammar-picture-cards{display:flex;gap:9px;flex-wrap:wrap}.grammar-picture-card{flex:1 1 135px;padding:12px;border-radius:12px;min-width:0;color:#203c3b;overflow-wrap:anywhere;background:#d8f2e8}.grammar-picture-card small{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;margin-bottom:7px}.grammar-picture-card strong{font-size:16px;line-height:1.5}.grammar-picture-card.tone-1{background:#ffe6bf}.grammar-picture-card.tone-2{background:#e4ddff}.grammar-picture-card.tone-3{background:#ffe0e9}.grammar-picture p{font-size:14px;line-height:1.65;margin:13px 0}.grammar-picture-model{padding:12px;background:rgba(255,255,255,.85);border-radius:10px;font-size:14px;line-height:1.7}.grammar-picture-model b{color:#4f4582}
@media(max-width:480px){.grammar-path{padding:13px}.grammar-picture{padding:12px}.grammar-picture-card{flex-basis:110px;padding:10px}.grammar-picture-card strong{font-size:15px}.grammar-path .btn{font-size:13px}.grammar-foundation{padding:11px}}