.grid-demo{margin:2rem 0;padding:1rem;border:1px solid #507773;border-radius:20px;background:#142024}.grid-demo figcaption{font-size:.9rem;line-height:1.6;margin-bottom:1rem}.demo-beats{display:grid;grid-template-columns:repeat(4,1fr);font-size:.9rem}.demo-cells{display:grid;grid-template-columns:repeat(16,1fr);margin-top:.5rem}.demo-cell{height:48px;border:1px solid #59706e;font-size:clamp(.55rem,2vw,1rem);display:grid;place-items:center;color:#5fe5cf}.demo-cell.selected{background:#426d65;outline:2px solid #bbf8bc;z-index:1}.demo-cell:nth-child(4n+1){border-left:3px solid #a0b8b2}.demo-caption{min-height:3.6em;font-size:1rem}.demo-pan{max-width:280px;margin:auto}.demo-pan svg{width:100%;height:auto}.demo-pan .active-tone{fill:#e8aa56;stroke:#fff;stroke-width:5}.demo-controls{display:flex;gap:.6rem;flex-wrap:wrap}.demo-controls button{padding:.7rem 1rem;font:inherit;color:#e5eeeb;background:#263c3c;border:1px solid #73918a;border-radius:10px;min-height:44px}.lesson-toc{display:flex;flex-wrap:wrap;gap:1rem}.editorial section{scroll-margin-top:100px}

.real-grid-demo{margin:24px 0;padding:20px;background:#171b20;border:1px solid #364345;border-radius:20px}.real-grid-demo video{display:block;width:100%;max-width:440px;height:auto;margin:20px auto;border-radius:18px;background:#101014}.real-grid-demo figcaption{font-weight:600}.real-grid-demo p{font-size:.95rem;line-height:1.65}@media(max-width:600px){.real-grid-demo{padding:12px;margin-inline:0}.real-grid-demo video{border-radius:10px}}

.sound-hint{color:#d4ece5;font-size:1rem!important}.lesson-video-actions{display:flex;gap:8px;flex-wrap:wrap}.lesson-video-actions button{background:#223438;color:#fff;border:1px solid #597176;border-radius:9px;min-height:44px;padding:10px 14px;font:inherit;cursor:pointer}.lesson-video-actions button:focus-visible{outline:3px solid #fff19a}.grid-closeups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.grid-closeups figure{margin:0;padding:12px;background:#171b20;border:1px solid #364345;border-radius:14px}.grid-closeups img{display:block;width:100%;height:auto;border-radius:8px}.grid-closeups figcaption{font-size:1rem;line-height:1.65;padding-top:12px}@media(max-width:700px){.grid-closeups{grid-template-columns:1fr}.grid-closeups figure{max-width:100%}}

.toggle-detail{display:flex;gap:24px;align-items:center;margin:24px 0}.toggle-detail img{width:120px;height:auto;border-radius:14px}.toggle-detail figcaption{font-size:1rem;line-height:1.7}#listen-first{border-left:3px solid #4ab7ab;padding-left:22px;margin:32px 0}@media(max-width:500px){.toggle-detail{gap:16px}.toggle-detail img{width:90px}#listen-first{padding-left:14px}}