@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f4f3ef;color:#263b40;font:15px 'DM Sans',system-ui,sans-serif}a{color:inherit}header{padding:23px 4vw;border-bottom:1px solid #d8ddda;display:flex;justify-content:space-between;gap:15px;font-size:12px;letter-spacing:.05em}header a{text-decoration:none}main{max-width:1600px;margin:auto;padding:34px 4vw}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.eyebrow,.notes article>span{font-size:10px;letter-spacing:.16em;font-weight:700;color:#60817e}h1{font-size:clamp(32px,4vw,57px);font-weight:500;letter-spacing:-.05em;margin:8px 0}p{line-height:1.65}.intro p{margin:0}.badge{border:1px solid #aebeb7;border-radius:30px;padding:9px 15px;white-space:nowrap;font-size:12px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;border:1px solid #d1d9d4;border-radius:18px;overflow:hidden;background:#fbfbf8}.stage{position:relative;min-height:590px;background:#182a31}canvas{display:block;width:100%;height:100%;position:absolute;touch-action:none}.viewbar{position:absolute;top:18px;left:18px;right:18px;display:flex;flex-wrap:wrap;gap:6px}button{border:1px solid #ccd8d1;background:#fafbf8;color:#284642;border-radius:7px;padding:9px 11px;font:inherit;font-size:12px;cursor:pointer}button:hover{background:#d8e7df}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #dfb779}.viewbar button{background:#20383fe8;color:#e1e9e5;border-color:#48616a}.caption{position:absolute;bottom:18px;left:20px;right:20px;color:#c1d2d2;display:flex;justify-content:space-between;gap:12px;font-size:11px}.caption span:first-child{color:#e6c18e}#loading{position:absolute;top:45%;width:100%;text-align:center;color:#cee0db}aside{padding:24px}aside>label{display:block;margin-top:19px;font-size:12px;font-weight:600}output{float:right;color:#68877e}input[type=range]{width:100%;margin:12px 0;accent-color:#376f63}.primary{width:100%;background:#326a5f;color:#fff;margin:8px 0}.toggles{display:grid;gap:12px;margin:20px 0;font-size:12px}.toggles input{accent-color:#376f63;margin-right:7px}select{width:100%;padding:10px;margin:10px 0;border:1px solid #d0dad2;background:white;border-radius:6px;font:inherit;font-size:12px}#detail{font-size:12px;line-height:1.7;color:#45645c}.small{font-size:10px;color:#7b8b82}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:35px 0}.notes h2{font-size:23px;font-weight:500;letter-spacing:-.025em;margin:10px 0}.notes p{font-size:13px;color:#536a64}footer{border-top:1px solid #d1d9d4;padding:20px 0;font-size:11px;color:#657c73;line-height:1.8}footer a{display:block} @media(max-width:800px){main{padding:24px 18px}.intro{display:block}.badge{display:inline-block;margin-top:18px}.workspace{grid-template-columns:1fr}.stage{min-height:480px}aside{padding:22px}.notes{grid-template-columns:1fr;gap:15px}.caption{flex-direction:column}header{font-size:10px}header span{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}