.shruti-reference{margin:32px 0;background:#eae2d6;padding:28px}.reference-keyboards{display:grid;grid-template-columns:1fr 1fr;gap:28px}.reference-example h3{font-size:25px;line-height:1.2;margin:0 0 20px;text-wrap:balance}.reference-keyboard{display:block;width:100%;height:auto;overflow:visible}.keyboard-key{fill:#fffaf1;stroke:#765e53;stroke-width:1}.keyboard-key.is-reference{fill:#713f35}.keyboard-black{fill:#302724;stroke:#302724;stroke-width:1}.key-label{font-family:var(--sans,sans-serif);font-size:16px;fill:#46342d;text-anchor:middle}.key-label.is-reference-label{fill:#fffaf1}.sa-label{font-family:var(--serif,serif);font-size:23px;fill:#fffaf1;text-anchor:middle}.reference-example p{font-size:15px;line-height:1.6;margin:14px 0 0}.reference-example p strong{color:#713f35}.shruti-reference figcaption{border-top:1px solid #c9bbae;margin-top:24px;padding-top:20px;font-size:15px;line-height:1.7;color:#594b41}.shruti-reference figcaption strong{display:block;font-weight:650;color:#302724;margin-bottom:6px}@media(max-width:760px){.reference-keyboards{grid-template-columns:1fr;gap:28px}.shruti-reference{padding:22px}.reference-example h3{font-size:25px;margin-bottom:16px}.reference-keyboard{max-width:420px}.shruti-reference figcaption{margin-top:24px}}