#reader{max-width:1600px;padding:24px 40px 15px}.page{padding-top:12px}#page-title,body[data-kind=motion] #page-title{font-size:29px;line-height:1.45}.learning-layout{display:grid;grid-template-columns:minmax(310px,380px) minmax(0,1fr);gap:45px;margin-top:25px;align-items:start}#theory{padding:0;max-width:none}#answer{font-size:19px;line-height:1.65;font-weight:650}#why{margin-top:15px;font-size:15px;line-height:1.85;color:#52675c}#points{display:block;margin-top:22px}#points li{position:relative;padding:12px 0 12px 34px;border:0;border-top:1px solid var(--line)}#points li:before{position:absolute;left:0;top:15px;margin:0;font-size:11px}#points h2{font-size:15px;line-height:1.6;margin-bottom:4px}#points p{font-size:14px;line-height:1.8}#points li.active{background:#eaf2ed;border-radius:3px}#takeaway{font-size:15px;line-height:1.8;margin-top:18px;padding-left:12px}#worked-example{margin-top:19px;border-top:1px solid var(--line);padding-top:12px}#worked-example summary{font-size:12px;color:var(--green);cursor:pointer}#example{font-size:14px;line-height:1.9;margin-top:13px;color:#40564d}#note{font-size:11px;margin-top:13px}#motion{min-width:0;position:sticky;top:0}.visual-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:34px}#visual-title{font-size:12px;font-weight:650;color:var(--green)}#start-motion{border:0;background:var(--green);color:white;padding:9px 12px;border-radius:3px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650}#start-motion svg{width:14px;height:14px}#diagram{aspect-ratio:1000/700;max-height:none;margin:8px 0 0}.motion-reading{padding-top:5px}#caption{font-size:16px;min-height:52px;line-height:1.7}#phases{margin-bottom:9px}#phases button{font-size:11px;line-height:1.7}#phases button span{display:block}body[data-kind=motion] #reader{padding-top:24px}.details-row,body[data-kind=motion] .details-row{margin-top:20px}#motion-status{min-width:95px}.navigation{min-height:70px;padding-top:11px;padding-bottom:11px}#next{min-width:150px}.details-row #page-preview{font-size:11px}
@media (min-width:1200px){#theory{max-height:calc(100dvh - 240px);overflow:auto;padding-right:5px;scrollbar-width:thin}#diagram{height:calc(100dvh - 480px);min-height:260px;max-height:520px;aspect-ratio:auto}}
@media (min-width:681px) and (max-width:1050px){.learning-layout{grid-template-columns:1fr;gap:24px}#reader{padding:20px 25px}.visual-heading{flex-wrap:wrap}#motion{position:static}#diagram{aspect-ratio:1000/700}#answer{font-size:20px}#why{font-size:16px}#points h2{font-size:17px}#points p{font-size:16px}}
@media(max-width:680px){#reader,body[data-kind=motion] #reader{padding:18px 20px 20px}.learning-layout{display:flex;flex-direction:column;gap:25px;margin-top:20px}#page-title,body[data-kind=motion] #page-title{font-size:24px}#theory{max-height:none;overflow:visible;width:100%;padding:0}#answer{font-size:18px}#why{font-size:15px}#points{margin-top:18px}#points h2{font-size:16px}#points p{font-size:15px}#points li{padding-top:13px;padding-bottom:13px}#takeaway{font-size:16px}#worked-example{margin-top:16px}#motion{position:static;width:100%;border-top:1px solid var(--line);padding-top:15px}.visual-heading{align-items:center}#visual-title{font-size:11px}#start-motion{font-size:11px;padding:9px 10px}#diagram{aspect-ratio:620/720;min-height:0;height:auto;max-height:none}#caption{font-size:16px}#phases button{font-size:10px}.details-row #page-preview{font-size:10px}.jump label{display:none}}