:root{color-scheme:light;--ink:#24333b;--muted:#617078;--teal:#006f7e;--line:#d8e4e4}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#f9fbfb;color:var(--ink);font:14px/1.6 system-ui,-apple-system,sans-serif}main{padding:20px}h1{font-size:21px;line-height:1.3;margin:0 0 8px}h2{font-size:15px;margin:0 0 8px}p{margin:0 0 16px}.eyebrow{font-size:10px;color:var(--teal);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}.intro,.caption{color:var(--muted);font-size:12px}.controls{display:flex;flex-wrap:wrap;gap:14px 24px;margin:18px 0;padding:15px;background:#eef5f5;border-radius:5px}.controls label{font-size:12px;flex:1;min-width:150px}.controls input[type=range],select{width:100%;accent-color:var(--teal);display:block;margin-top:7px}output{font-variant-numeric:tabular-nums;color:var(--teal)}button,select{font:inherit;color:var(--teal);background:#fff;border:1px solid #a7bfc1;border-radius:4px;padding:7px 12px}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #dfaa56;outline-offset:3px}.buttons{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.panels{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panels.three{grid-template-columns:1fr 1fr 1fr}.panel{min-width:0;background:#fff;border:1px solid var(--line);border-radius:5px;padding:12px}canvas{display:block;width:100%;height:auto;aspect-ratio:1.4;background:white;touch-action:none}canvas.square{aspect-ratio:1}.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:11px;color:var(--muted);margin:8px 0}.legend span:before{content:"";display:inline-block;width:18px;height:3px;background:var(--c);vertical-align:middle;margin-right:5px}#status{font-size:12px;line-height:1.8;font-variant-numeric:tabular-nums;padding:13px 0;margin:0;min-height:45px}.notice{border-left:3px solid #84b8bd;padding:10px 13px;background:#eef5f5;font-size:12px;color:var(--muted)}.wide{margin-top:18px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}noscript{display:block;background:#fff4db;padding:15px}a{color:var(--teal)}@media(max-width:660px){main{padding:12px}.panels,.panels.three{grid-template-columns:1fr}.controls{gap:12px}.controls label{min-width:120px}canvas{aspect-ratio:1.55}.panel{padding:10px}}