/* Material, shared scene and synchronized interpretation adapted from skeleton_linear_story. */
*{box-sizing:border-box}html{scrollbar-gutter:stable;scroll-behavior:smooth}body{margin:0;background:#f8f9fa;color:#202124;font:16px/1.75 -apple-system,BlinkMacSystemFont,'Noto Sans TC',Arial,sans-serif}main{max-width:1160px;margin:auto;padding:26px 26px 50px}header{padding:12px 12px 23px}h1{font-size:32px;font-weight:650;line-height:1.4;margin:5px 0 12px}header p{max-width:820px;color:#5f6368;margin:7px 0}.eyebrow{font-size:12px;color:#1967d2;letter-spacing:.08em;margin:0 0 7px}.chapter-nav{position:sticky;top:0;z-index:20;background:#f8f9fa;border-bottom:1px solid #dadce0;margin-bottom:18px}.desktop-nav{display:flex;overflow:auto;scrollbar-width:thin;gap:8px}.desktop-nav button{flex-shrink:0;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;padding:13px 15px;color:#5f6368}.desktop-nav button[aria-selected=true]{color:#174ea6;border-bottom-color:#1967d2}.mobile-nav{display:none}.panel{display:none;background:#fff;padding:28px;scroll-margin-top:74px}.panel.active{display:block}.section-head h2{font-size:27px;line-height:1.45;font-weight:650;margin:0 0 12px}.lead{color:#5f6368;max-width:890px;margin:0 0 22px}h3{font-size:20px;line-height:1.55;margin:16px 0 8px}p{margin:10px 0}figure{margin:0;min-width:0}figcaption{font-size:14px;color:#5f6368;line-height:1.6;margin-bottom:9px}svg{display:block;width:100%;height:auto;background:#f8f9fa;border-radius:5px}svg text{font:15px Arial,'Noto Sans TC',sans-serif;fill:#3c4043}svg [data-part]{cursor:pointer}svg [data-part]:focus-visible{outline:2px solid #1967d2}canvas{display:block;width:100%;height:auto;image-rendering:auto;background:#202124}.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin:20px 0;align-items:start}.work figure{min-width:0}.image-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:22px 0}.image-button{display:block;width:100%;padding:0;border:0;border-radius:4px;overflow:hidden;line-height:0;cursor:zoom-in}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0}button,select,input{font:inherit}button,select{min-height:44px;padding:9px 13px;border:1px solid #dadce0;border-radius:5px;background:white;color:#3c4043;cursor:pointer;box-shadow:none}button:hover{background:#f1f3f4}button[aria-pressed=true]{background:#e8f0fe;color:#174ea6;border-color:#e8f0fe}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #1967d2;outline-offset:3px}label{font-size:15px}label.slider{display:block;flex:1;min-width:220px}label input[type=range]{width:100%;display:block;min-height:34px;margin:5px 0;accent-color:#1967d2}input[type=checkbox]{width:19px;height:19px;accent-color:#1967d2;vertical-align:middle}output{color:#174ea6;margin-left:8px;font-variant-numeric:tabular-nums}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:22px 0}.metrics>div{border-top:1px solid #dadce0;padding-top:11px}.metrics span{display:block;font-size:13px;color:#5f6368}.metrics strong{display:block;font-size:25px;line-height:1.5;font-weight:550;font-variant-numeric:tabular-nums}.note{background:#f1f3f4;padding:15px 18px;border-radius:5px;margin:18px 0}.fine,details{font-size:14px;color:#5f6368}details{border-top:1px solid #e8eaed;padding:13px 0;margin-top:23px}summary{color:#174ea6;cursor:pointer;padding:5px 0;min-height:44px;font-size:15px}details a{display:block;padding:7px 0}a{color:#174ea6;text-decoration:none}a:hover{text-decoration:underline}.part-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.part-picker button{font-size:14px;text-align:left}dl dt{font-weight:650;margin-top:12px}dl dd{margin-left:0}footer{padding:23px 8px;font-size:14px;color:#5f6368}.window-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.window-grid figure{border-top:1px solid #dadce0;padding-top:8px}.window-grid p{font-size:13px;line-height:1.5}dialog{border:1px solid #dadce0;border-radius:10px;width:min(800px,95vw);max-height:95dvh;padding:20px}dialog::backdrop{background:#20212499}dialog canvas{max-height:72dvh;object-fit:contain}.dialog-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:16px}dialog p{font-size:14px}.diagram-select{outline:2px solid #1967d2}
@media(max-width:680px){main{padding:18px 12px 35px}header{padding:4px 4px 18px}h1{font-size:27px}.panel{padding:20px 14px}.section-head h2{font-size:23px}.work,.image-grid{grid-template-columns:1fr;gap:20px}.controls{gap:10px}.controls label.slider{min-width:250px}.metrics{gap:9px}.metrics strong{font-size:21px;overflow-wrap:anywhere}.metrics span{min-height:42px}.desktop-nav{display:none}.mobile-nav{display:flex;gap:8px;padding:7px 0}.mobile-nav select{min-width:0;flex:1;text-align:center;text-align-last:center}.part-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.image-grid canvas{max-height:340px;object-fit:contain}.window-grid{gap:6px}.window-grid p{font-size:12px}.panel svg text{font-size:16px}.eyebrow{font-size:12px}.fine{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}