*{box-sizing:border-box}body{margin:0;background:#f6f6f5;color:#252923;font:15px/1.55 system-ui,sans-serif}main{max-width:1200px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;color:#666666;font-size:12px}a{color:inherit;text-underline-offset:4px}h1{font-size:clamp(36px,5vw,64px);font-weight:500;letter-spacing:-.05em;margin:50px 0 8px}h2{font-weight:500;font-size:25px}.intro{font-size:21px}.quiet{font-size:13px;color:#666666;max-width:780px}nav{display:flex;gap:8px;margin:32px 0 0;border-bottom:1px solid #d4d4d1;padding-bottom:16px}button,select{font:inherit;color:inherit;background:transparent;border:1px solid #d4d4d1;padding:10px 16px;border-radius:5px;cursor:pointer}button:hover{background:#f6f6f5}button[aria-pressed=true]{background:#252923;color:#666666;border-color:#252923}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #3153aa;outline-offset:3px}.study{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:center;padding:20px 0}.drawing{min-width:0}.drawing svg{display:block;width:100%;height:440px}.reading{max-width:390px}.reading #number{color:#666666;font-size:12px}.reading h2{font-size:36px;margin:4px 0}.phase{border-left:2px solid #d4d4d1;padding-left:12px;margin-top:28px}.actions{margin:20px 0}.transport{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0;border-block:1px solid #d4d4d1;font-size:13px}.scrubber{display:flex;align-items:center;gap:12px;flex:1;min-width:200px}input[type=range]{width:100%;accent-color:#535e4b}#clock{font-variant-numeric:tabular-nums}.steps{display:flex;gap:8px;justify-content:flex-end;margin:12px 0 40px}.steps button{font-size:12px;padding:6px 10px}#strip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}#strip button{padding:0;border-color:transparent;border-radius:0}#strip svg{width:100%;display:block}#strip span{font-size:11px;color:#666666}details{border-top:1px solid #d4d4d1;margin-top:32px;padding-top:20px}summary{cursor:pointer}#compare{display:grid;grid-template-columns:repeat(3,1fr)}#compare svg{width:100%;height:240px}#compare figure{margin:12px 0;text-align:center}#compare figcaption{font-size:13px}@media(max-width:650px){main{padding:20px 16px}.study{grid-template-columns:1fr;gap:0}.drawing svg{height:320px}.reading{max-width:none}.reading h2{font-size:28px}nav button{padding:9px 12px;font-size:13px}#strip{grid-template-columns:repeat(4,1fr)}#compare svg{height:160px}.transport>.scrubber{order:4;flex-basis:100%}h1{margin-top:32px}}

nav{flex-wrap:wrap}#compare{grid-template-columns:repeat(4,1fr)}@media(max-width:650px){#compare{grid-template-columns:repeat(2,1fr)}}