@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}body{margin:0;color:#18343d;background:#eef2f3;font-family:'DM Sans',sans-serif;font-size:16px}button,input{font:inherit}button{cursor:pointer}header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#fff;border-bottom:1px solid #dbe3e5}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:2px}.mark{display:grid;place-items:center;background:#173a43;color:#dafa89;width:34px;height:36px;font-size:24px;border-radius:3px}.divider{height:22px;width:1px;background:#cbd5d8;margin:0 6px}.sub{font-weight:500;font-size:16px;letter-spacing:0}.badge,.eyebrow,.viewbadge{font-size:12px;font-weight:700;letter-spacing:1.6px}.badge{color:#59717a}main{display:grid;grid-template-columns:345px 1fr;height:calc(100dvh - 78px);min-height:660px}aside{padding:30px 26px;background:#fff;overflow:auto;border-right:1px solid #dbe3e5}.eyebrow{color:#74858b}h1{font:700 26px 'Manrope',sans-serif;letter-spacing:-1px;margin:12px 0 6px}.intro{font-size:14px;color:#7b8b90;margin:0 0 25px}.types{display:grid;gap:8px}.type{position:relative;text-align:left;border:1px solid #dbe3e5;background:white;border-radius:7px;padding:13px 14px 13px 45px;color:#24414b}.type>span{position:absolute;left:12px;top:18px;font-size:12px;color:#8ca0a7}.type strong{display:block;font-size:15px}.type small{display:block;color:#7a8b91;margin-top:3px;font-size:12px}.type.active{border-color:#275964;background:#edf4f3;box-shadow:inset 3px 0 #275964}.type.active:after{content:'✓';position:absolute;right:14px;top:24px}section{padding-top:23px}section+section{border-top:1px solid #e6ebed;margin-top:21px}.sectionhead{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:12px 0}output{font-variant-numeric:tabular-nums;font-weight:700}input[type=range]{width:100%;accent-color:#275964;cursor:pointer;height:16px}.ends{display:flex;justify-content:space-between;color:#8b999f;font-size:12px}.swatches{display:flex;gap:12px}.swatch,.custom{height:33px;width:33px;border-radius:50%;border:3px solid white;box-shadow:0 0 0 1px #d7e0e3;background:var(--c);display:grid;place-items:center}.swatch.selected{box-shadow:0 0 0 2px #234b54}.custom{position:relative;overflow:hidden;cursor:pointer;color:#667e87;background:#f4f6f6}.custom input{position:absolute;inset:0;opacity:0;cursor:pointer}.toggleRow{display:flex;align-items:center;justify-content:space-between;position:relative;margin-top:21px;cursor:pointer}.toggleRow strong{font-size:14px;font-weight:500;display:block}.toggleRow small{display:block;font-size:12px;color:#8b999f;margin-top:5px}.toggleRow input{position:absolute;right:0;opacity:0;width:40px;height:24px}.toggleRow i{height:23px;width:40px;background:#dbe2e5;border-radius:20px;position:relative;flex-shrink:0}.toggleRow i:after{content:'';position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}.toggleRow input:checked+i{background:#285b64}.toggleRow input:checked+i:after{transform:translateX(17px)}.toggleRow input:focus-visible+i{outline:2px solid #285b64;outline-offset:3px}.note{font-size:12px;line-height:1.7;color:#819198;margin:28px 0 0}#viewport{position:relative;overflow:hidden;background:radial-gradient(ellipse at 48% 40%,#fcfdfd 0,#e8eef0 90%)}#canvasHost{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}.viewtitle{position:absolute;top:31px;left:34px;pointer-events:none;z-index:1}h2{font:600 28px 'Manrope',sans-serif;margin:8px 0;letter-spacing:-1px}.viewbadge{position:absolute;right:30px;top:35px;color:#91a0a5;z-index:1;font-size:10px}.toolbar{position:absolute;bottom:66px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:6px;background:#fff;border:1px solid #dce3e5;border-radius:9px;box-shadow:0 6px 30px #214b5410;white-space:nowrap}.toolbar button{border:0;border-radius:5px;padding:10px 12px;background:transparent;color:#31545e;font-size:18px}.toolbar button span{font-size:13px;margin-left:5px}.toolbar button:hover,.toolbar button[aria-pressed=true]{background:#e8f0ef}.toolsep{width:1px;background:#e5eaec;margin:8px 3px}.viewfoot{position:absolute;bottom:25px;left:34px;right:30px;display:flex;justify-content:space-between;font-size:12px;color:#809198;pointer-events:none}.viewfoot b{padding:0 8px;color:#bac7cc}#dimension{font-weight:700;color:#4f6e79}#error{position:absolute;top:45%;padding:35px;z-index:2}button:focus-visible{outline:3px solid #779dba;outline-offset:3px}@media(max-width:900px){main{grid-template-columns:290px 1fr}aside{padding:25px 20px}.viewbadge{display:none}.toolbar button{padding:9px}.toolbar button span{display:none}.viewfoot span:first-child{max-width:200px;line-height:1.7}.viewtitle{left:23px}}@media(max-width:620px){header{height:64px;padding:0 18px}.badge{display:none}.brand{font-size:14px}.sub{font-size:14px}main{height:auto;min-height:0;display:flex;flex-direction:column}#viewport{height:65dvh;min-height:410px;order:-1}aside{overflow:visible;padding:24px;border:0}.types{grid-template-columns:repeat(3,1fr)}.type{padding:13px 8px;text-align:center}.type>span{display:none}.type.active:after{display:none}.type small{font-size:10px}.toolbar{bottom:56px}.viewfoot{bottom:17px;left:20px;right:20px}.viewfoot span:first-child{max-width:230px;font-size:10px}.viewtitle{top:18px}h2{font-size:24px}.swatches{gap:18px}}

.viewfoot span:first-child{max-width:75%;line-height:1.6}.toolbar{max-width:calc(100% - 24px)}.toolbar button{padding:10px 9px}.sectionhead label[for="reach"]{max-width:80%}@media(max-width:620px){.viewfoot span:first-child{max-width:80%;font-size:10px}.viewfoot{bottom:10px}.toolbar{bottom:75px}.brand{letter-spacing:1px}.brand .divider{margin:0}.sub{font-size:13px}}