:root{color-scheme:light;--paper:#f5f3ee;--ink:#1d1c20;--line:#cac6cf;--purple:#584081;--pale:#e9e3f0}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Arial,sans-serif}main{max-width:1260px;margin:auto;padding:28px 30px 60px}a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}button,input{font:inherit}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--purple);outline-offset:5px}.skip{position:absolute;left:20px;top:-100px;background:white;padding:10px;z-index:2}.skip:focus{top:10px}.top-nav{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:14px}.top-nav a:first-child{margin-right:auto}header{margin:68px 0 42px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:var(--purple)}h1{font-size:clamp(48px,7.7vw,102px);font-weight:500;letter-spacing:-.065em;line-height:.98;margin:20px 0 32px}h2,h3,p{margin-top:0}h2{font-size:23px;font-weight:500;letter-spacing:-.025em;line-height:1.2}.introduction{display:grid;grid-template-columns:1fr 1fr;gap:50px}.introduction p{max-width:535px;margin-bottom:0}.lead{font-size:21px;line-height:1.5}.browse{border-top:1px solid var(--ink);padding-top:26px;margin-bottom:28px}.browse h2{font-size:17px;margin-bottom:18px}#role-filters{display:flex;flex-wrap:wrap;gap:8px}button{border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;padding:9px 15px;border-radius:3px}button:hover{border-color:var(--purple)}button[aria-pressed=true]{color:white;background:var(--ink);border-color:var(--ink)}.search-row{display:flex;gap:24px;align-items:end;margin-top:22px}.search-row label{font-size:12px;flex:1;max-width:530px}input[type=search]{display:block;width:100%;margin-top:6px;border:1px solid var(--line);background:#fffefa;padding:11px 14px;border-radius:3px;color:var(--ink)}#result-count{font-size:12px;margin-bottom:11px;color:#56525d}.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 28px}.method{min-width:0;background:#fffefa;border:1px solid var(--line);border-radius:4px;overflow:hidden;scroll-margin-top:24px}.method[hidden]{display:none}.method-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 23px 16px}.method h2{margin:3px 0 0;font-size:30px;letter-spacing:-.04em}.method h2 a{text-decoration:none}.method h2 a:hover{text-decoration:underline}.method-number{font-size:12px;color:var(--purple);letter-spacing:.06em}.role{font-size:11px;border:1px solid var(--line);padding:3px 8px;border-radius:3px;white-space:nowrap;align-self:start;margin-top:5px}.demo{margin:0;padding:0 14px}.demo canvas{width:100%;height:auto;display:block;border:1px solid #ded9e6;border-radius:2px;background:#eee7f4}.demo figcaption{font-size:12px;color:#5d5667;margin:9px 8px 0;line-height:1.5}.parameter{padding:17px 23px 22px;border-bottom:1px solid var(--line)}.parameter label{display:flex;justify-content:space-between;gap:12px;font-size:13px}.parameter output{color:var(--purple);font-variant-numeric:tabular-nums}.parameter input{display:block;width:100%;accent-color:var(--purple);margin:12px 0 0;cursor:pointer}.method-copy{padding:22px 23px}.method-copy h3{font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin:0 0 5px;color:#625a6c}.method-copy p{font-size:14px;margin-bottom:19px}.qualities{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 19px;padding:0;list-style:none}.qualities li{background:#f0ecf4;color:#4c3b63;font-size:12px;padding:2px 8px;border-radius:2px}.credits{list-style:none;padding:0;margin:0 0 19px}.credits li{margin:0 0 13px;font-size:13px;line-height:1.55}.credits small{display:block;color:#625a6c;font-size:11px;line-height:1.5}.source-link{font-size:11px}.method-copy .implementation{font-size:12px;color:#625a6c}.sources{padding-left:17px;font-size:12px;margin:0 0 20px}.sources li{margin-bottom:6px}.method-links{display:flex;gap:9px 20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;font-size:13px}.method-links a:first-child{font-weight:700}#empty{padding:30px 0}#empty button{padding:0;border:0;text-decoration:underline}.next{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;padding:44px;margin:60px 0 36px;background:var(--pale);border-radius:4px}.next h2{font-size:45px;letter-spacing:-.045em}.next p{max-width:460px;font-size:14px}.next h3{font-size:18px;margin-bottom:20px}.primary-link{display:inline-block;font-size:14px;color:white;background:var(--purple);padding:10px 16px;text-decoration:none;border-radius:3px}.reading{max-width:850px}.reading h2{font-size:21px}.reading p{font-size:14px}.reading .small{font-size:12px;color:#625a6c}.eponym-note{margin-bottom:0!important}#methods:focus{outline:none}
@media(max-width:760px){main{padding:22px 18px 40px}header{margin-top:45px}.top-nav{font-size:12px;gap:9px 18px}.top-nav a:first-child{flex-basis:100%}.introduction,.method-grid,.next{grid-template-columns:1fr}.introduction{gap:18px}.lead{font-size:18px}.search-row{display:block}#result-count{margin:10px 0 0}.method-grid{gap:24px}.method h2{font-size:28px}.method-heading,.method-copy{padding-left:20px;padding-right:20px}.next{padding:28px 24px;gap:24px;margin-top:40px}.next h2{font-size:37px}.role{font-size:10px;padding:3px 6px}button{padding:8px 11px;font-size:13px}.method-copy p{font-size:14px}}
.motion-button{display:block;font-size:12px;margin-top:14px;padding:6px 10px}.collection-study{display:grid;grid-template-columns:1fr 360px;align-items:center;gap:45px;margin-top:45px;padding-top:35px;border-top:1px solid var(--line)}.collection-study h2{font-size:42px;letter-spacing:-.045em}.collection-study p,.collection-study a{font-size:14px;max-width:500px}.collection-study figure{margin:0}.collection-study canvas{display:block;width:100%;height:auto;border:1px solid var(--line)}.collection-study .eyebrow{font-size:11px}@media(max-width:760px){.collection-study{grid-template-columns:1fr;gap:18px}.collection-study figure{max-width:360px;width:100%}.collection-study h2{font-size:36px}}