.sm-article{background:#f6f3ec;color:#202626}.sm-hero{background:#171c1b;color:#f6f3ec;padding:clamp(38px,7vw,100px) max(24px,calc((100vw - 1120px)/2)) 54px}.sm-hero h1{font-size:clamp(32px,5.1vw,66px);line-height:1.18;max-width:1000px;overflow-wrap:anywhere}.sm-hero h1 em{color:#d1ef76;font-style:normal}.sm-hero .lead{max-width:850px;color:#dddcd4;font-size:clamp(18px,2vw,22px);line-height:1.7}.sm-date{color:#aaa;font-size:14px;margin-top:28px}.sm-demo{max-width:1120px;margin:auto;padding:60px 24px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:50px;align-items:center}.sm-demo h2,.sm-section h2{font-size:clamp(24px,3vw,38px);line-height:1.3;overflow-wrap:anywhere}.sm-demo p,.sm-section p{line-height:1.85}.sm-demo figure{margin:0;background:#e6e4db;border:1px solid #d4d6c8;border-radius:18px;padding:20px;text-align:center;min-width:0}.sm-demo canvas{width:192px;height:256px;max-width:100%;display:block;margin:auto;background:radial-gradient(ellipse at 50% 81%,#c7c8bb 0,transparent 40%)}.sm-demo figcaption{font-size:13px;line-height:1.7;max-width:300px;margin:12px auto;color:#454b45}.sm-controls{display:flex;flex-wrap:wrap;align-items:end;gap:14px;margin-top:24px}.sm-controls label{display:grid;gap:7px;font-size:14px;min-width:0}.sm-controls select,.sm-controls button{font:inherit;min-height:46px;padding:9px 12px;border:1px solid #727a69;border-radius:7px;background:#fff;color:#202626;max-width:100%}.sm-controls button{cursor:pointer;background:#d1ef76}.sm-controls button:disabled{opacity:.6;cursor:wait}.sm-controls :focus-visible{outline:3px solid #344e19;outline-offset:3px}#sm-status,#sm-frame{font-size:13px;min-height:1.8em;color:#525b50}.sm-toc{display:flex;gap:12px 25px;flex-wrap:wrap;max-width:1072px;margin:0 auto;padding:24px;border-block:1px solid #c8ccbe}.sm-toc a{color:#303d2c;text-decoration:none;font-size:14px}.sm-toc span{color:#637253;margin-right:8px}.sm-section{max-width:820px;margin:0 auto;padding:48px 24px 10px;scroll-margin-top:110px}.sm-section .eyebrow{margin-bottom:10px}.sm-section h2{margin:0 0 24px}.sm-section p{font-size:18px;margin:0 0 22px}.sm-section b{font-weight:700}.sm-article .related-links{margin-top:50px} @media(max-width:760px){.sm-demo{grid-template-columns:minmax(0,1fr);gap:28px;padding:35px 22px}.sm-demo figure{max-width:440px;width:100%;justify-self:center;box-sizing:border-box}.sm-section{padding-top:36px}.sm-section p{font-size:17px}.sm-hero{padding:36px 22px}.sm-toc{margin:0 22px;padding:20px 0}.sm-controls label{flex:1 1 145px}.sm-controls select{width:100%}.sm-controls button{flex:1 1 100%}}