*{box-sizing:border-box}body{margin:0;background:#f6f6f5;color:#252923;font:16px/1.5 system-ui}main{max-width:1400px;margin:auto;padding:36px 5vw}a{color:inherit}header{max-width:760px;margin:55px 0 30px}h1{font-size:clamp(36px,5vw,64px);letter-spacing:-.055em;line-height:1.1;margin:0 0 20px}p{max-width:740px}.quiet,small{color:#686b65}.controls{display:flex;gap:24px;flex-wrap:wrap;padding:20px 0;border-block:1px solid #d4d4d1}.controls label{display:flex;gap:10px;align-items:center}button,select{font:inherit;background:transparent;border:1px solid #aaa;border-radius:20px;padding:7px 14px;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #3153aa;outline-offset:4px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0}.stage{aspect-ratio:3/4;background:#f6f6f5;border-radius:4px;overflow:hidden}.stage canvas,.stage svg{width:100%;height:100%;display:block}h2{font-size:21px;margin:14px 0 4px}article p{margin:0;font-size:14px}footer{border-top:1px solid #ddd;padding-top:20px;margin-top:40px}@media(max-width:700px){.grid{grid-template-columns:1fr}.stage{aspect-ratio:1/1}header{margin-top:35px}} 
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stage{aspect-ratio:1/1}.timeline{flex:1;min-width:220px}.timeline input{flex:1;min-width:100px}details{margin-top:30px;max-width:780px}.caption{min-height:3em}@media(max-width:700px){.grid{grid-template-columns:1fr}}