html,body{max-width:100%;overflow-x:hidden}.interactive-diagrams-page{background:#0b0f1a;color:#eef2ff}.interactive-diagrams-main{max-width:1180px;margin:0 auto;padding:24px}.interactive-diagrams-main a{color:#9fc5ff}.interactive-diagrams-main a:hover{color:#d4e5ff}.interactive-diagrams-main a:focus-visible,.interactive-diagrams-error button:focus-visible{outline:3px solid #f5c451;outline-offset:3px}.interactive-diagrams-banner,.interactive-diagrams-disclosure,.interactive-diagrams-lessons,.interactive-diagrams-instructions{background:#131a2a;border:1px solid #2a3652;border-radius:14px;padding:20px;margin-bottom:22px}.interactive-diagrams-banner{display:flex;justify-content:space-between;gap:18px;align-items:center}.interactive-diagrams-banner p{margin:5px 0 0}.interactive-diagrams-heading{margin:28px 0}.interactive-diagrams-heading h1{font-size:clamp(2rem,5vw,3.4rem);margin:0 0 10px}.interactive-diagrams-shell{position:relative;margin:22px 0}.interactive-diagrams-shell iframe{display:block;width:100%;height:1040px;border:0;border-radius:14px;background:#fff}.interactive-diagrams-status,.interactive-diagrams-error{padding:16px;border:1px solid #465779;border-radius:10px;margin-bottom:12px}.interactive-diagrams-error button{min-height:44px;padding:10px 18px}.interactive-diagrams-lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.interactive-diagram-summary{border:1px solid #344361;border-radius:10px;padding:16px}.interactive-diagram-summary h3{margin-top:0}.interactive-diagram-summary code{overflow-wrap:anywhere}.interactive-diagram-source{font-size:.9rem;color:#b6c1d9}.interactive-diagrams-footer{padding:20px 0;color:#b6c1d9}@media(max-width:760px){.interactive-diagrams-main{padding:16px}.interactive-diagrams-banner{display:block}.interactive-diagrams-lessons{grid-template-columns:1fr}.interactive-diagrams-shell iframe{height:1760px}}@media(max-width:340px){.interactive-diagrams-main{padding:10px}.interactive-diagrams-shell iframe{height:1840px}}