#rectangular-prism-lesson *{box-sizing:border-box}#rectangular-prism-lesson{scroll-behavior:smooth;scroll-padding-top:20px;color-scheme:light}#rectangular-prism-lesson{margin:0;font:16px/1.55 Arial,Helvetica,sans-serif;color:#26323d;background:#fff}#rectangular-prism-lesson button,#rectangular-prism-lesson input{font:inherit}#rectangular-prism-lesson button{cursor:pointer;touch-action:manipulation}#rectangular-prism-lesson button:disabled{opacity:.45;cursor:default}#rectangular-prism-lesson button:focus-visible,#rectangular-prism-lesson a:focus-visible,#rectangular-prism-lesson input:focus-visible,#rectangular-prism-lesson .viewport:focus-visible{outline:3px solid #2479b6;outline-offset:3px}#rectangular-prism-lesson a{color:#215f93}#rectangular-prism-lesson a:hover{text-decoration:underline}#rectangular-prism-lesson svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}#rectangular-prism-lesson .icon-library{position:absolute;width:0;height:0;overflow:hidden}#rectangular-prism-lesson [hidden]{display:none!important}#rectangular-prism-lesson .site-nav{position:absolute;left:max(30px,calc((100vw - 1380px)/2));top:113px;width:174px;display:flex;flex-direction:column;gap:0;font-size:14px}#rectangular-prism-lesson .site-nav strong{font-size:15px;color:#344c5c;padding:0 0 12px;border-bottom:1px solid #d2dbe2;margin-bottom:5px}#rectangular-prism-lesson .site-nav a{padding:10px 0;text-decoration:none;line-height:1.45}#rectangular-prism-lesson .site-nav a:hover{text-decoration:underline}#rectangular-prism-lesson main{max-width:1140px;margin-left:max(232px,calc((100vw - 1380px)/2 + 202px));margin-right:30px;padding-top:24px}#rectangular-prism-lesson .intro{padding-bottom:23px}#rectangular-prism-lesson .breadcrumb{font-size:12px;color:#687c8c}#rectangular-prism-lesson .breadcrumb span{color:#b3bfc7;margin:0 9px}#rectangular-prism-lesson h1{font-size:34px;font-weight:600;line-height:1.25;color:#204f73;margin:13px 0 9px}#rectangular-prism-lesson h2{font-size:21px;line-height:1.35;color:#2c4f68;margin:0 0 13px}#rectangular-prism-lesson h3{font-size:16px;line-height:1.4;margin:0 0 8px;color:#344c5f}#rectangular-prism-lesson p{margin:0 0 14px}#rectangular-prism-lesson .intro p{color:#596a77;margin:0;font-size:16px}#rectangular-prism-lesson .explorer{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:26px;align-items:start}#rectangular-prism-lesson .model-column{min-width:0}#rectangular-prism-lesson .section-bar{font-size:15px;font-weight:600;background:#e9f0f6;border:1px solid #c8d6e0;border-bottom:0;padding:10px 14px;color:#34576e;margin:0}#rectangular-prism-lesson .stage{height:459px;background:#f8fafc;border:1px solid #c8d6e0;position:relative;overflow:hidden}#rectangular-prism-lesson .stage-top{position:absolute;inset:15px 16px auto;z-index:4;display:flex;justify-content:space-between;align-items:center;pointer-events:none}#rectangular-prism-lesson .view-switch{display:flex;pointer-events:auto}#rectangular-prism-lesson .view-switch button{border:1px solid #b8c7d2;border-right:0;background:#fff;color:#4e6473;padding:6px 14px;font-size:14px;min-height:34px}#rectangular-prism-lesson .view-switch button:last-child{border-right:1px solid #b8c7d2}#rectangular-prism-lesson .view-switch button[aria-pressed=true]{background:#315f81;border-color:#315f81;color:#fff}#rectangular-prism-lesson .view-switch button:hover{background:#e6eef4;color:#264f6e}#rectangular-prism-lesson .stage-caption{font-size:10px;color:#8596a3;letter-spacing:.7px}#rectangular-prism-lesson .viewport{position:absolute;inset:0;touch-action:pan-y}#rectangular-prism-lesson .viewport canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab}#rectangular-prism-lesson .viewport canvas:active{cursor:grabbing}#rectangular-prism-lesson #rp-annotations{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;stroke-width:1}#rectangular-prism-lesson .face-tooltip{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-50%);padding:4px 9px;color:#254759;background:#fffffff0;border:1px solid #bdcbd6;font-size:12px;white-space:nowrap}#rectangular-prism-lesson .stage-bottom{position:absolute;bottom:14px;left:16px;right:14px;display:flex;justify-content:space-between;align-items:center;z-index:4;pointer-events:none}#rectangular-prism-lesson .gesture-hint{font-size:12px;color:#748896;display:flex;align-items:center;gap:7px}#rectangular-prism-lesson .gesture-hint svg{width:14px;height:14px}#rectangular-prism-lesson .camera-buttons{display:flex;gap:5px;pointer-events:auto}#rectangular-prism-lesson .camera-buttons button{width:30px;height:29px;background:#fff;border:1px solid #bdcbd6;color:#506c80;display:grid;place-items:center}#rectangular-prism-lesson .camera-buttons button:hover{background:#e7f0f7}#rectangular-prism-lesson .camera-buttons svg{width:16px;height:16px}#rectangular-prism-lesson .view-toolbar{border:1px solid #c8d6e0;border-top:0;padding:10px 12px;background:#f1f5f8;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}#rectangular-prism-lesson .presets,#rectangular-prism-lesson .display-options{display:flex;gap:4px;align-items:center}#rectangular-prism-lesson .presets>span{color:#637a88;margin-right:5px}#rectangular-prism-lesson .presets button{border:1px solid transparent;padding:3px 8px;background:none;color:#45667e;font-size:13px}#rectangular-prism-lesson .presets button[aria-pressed=true]{border:1px solid #b3c6d4;background:#fff;font-weight:bold}#rectangular-prism-lesson .presets button:hover{background:#e0e9f0}#rectangular-prism-lesson .display-options{gap:14px}#rectangular-prism-lesson .display-options button{border:0;background:none;display:flex;align-items:center;gap:5px;padding:3px 0;color:#7e909d;font-size:13px}#rectangular-prism-lesson .display-options button[aria-pressed=true]{color:#2b6085}#rectangular-prism-lesson .display-options svg{width:15px;height:15px}#rectangular-prism-lesson .figure-caption{font-size:12px;color:#72838f;margin:9px 1px 0;line-height:1.5}#rectangular-prism-lesson .figure-caption b{font-weight:600}#rectangular-prism-lesson .inspector{border-left:1px solid #d9e1e7;padding-left:23px}#rectangular-prism-lesson .inspector-top h2{font-size:19px;line-height:1.35;margin:0 0 13px}#rectangular-prism-lesson .inspector-top p{font-size:15px;color:#586d7b;line-height:1.65;margin:0 0 12px}#rectangular-prism-lesson .inspector-top strong{font-weight:600;color:#354f61}#rectangular-prism-lesson .dimensions-key{padding:14px 0 12px;border-top:1px solid #d9e1e7;margin-top:19px}#rectangular-prism-lesson .dimensions-key h3{font-size:15px;margin:0 0 13px}#rectangular-prism-lesson .dimensions-key>div{display:flex;align-items:center;gap:12px;margin:11px 0}#rectangular-prism-lesson .dimension-symbol{font-family:Georgia,serif;font-size:22px;font-style:italic;display:grid;place-items:center;width:23px}#rectangular-prism-lesson .dimension-symbol.length{color:#345e86}#rectangular-prism-lesson .dimension-symbol.width{color:#2f7d78}#rectangular-prism-lesson .dimension-symbol.height{color:#977229}#rectangular-prism-lesson .dimensions-key b{font-size:14px;font-weight:500;display:block;line-height:1.4}#rectangular-prism-lesson .dimensions-key small{font-size:12px;color:#81919e;display:block;line-height:1.4}#rectangular-prism-lesson .insight{border-top:1px solid #d9e1e7;padding-top:16px;margin-top:2px}#rectangular-prism-lesson .insight-heading{display:flex;gap:7px;color:#698093;align-items:center}#rectangular-prism-lesson .insight-heading svg{width:14px;height:14px}#rectangular-prism-lesson .insight-heading span{font-size:10px;letter-spacing:.6px}#rectangular-prism-lesson .insight h3{font-size:15px;color:#335971;margin:10px 0 7px}#rectangular-prism-lesson .insight p{font-size:13px;color:#758896;line-height:1.6;margin:0}#rectangular-prism-lesson .pairs{display:flex;gap:9px;margin-top:11px}#rectangular-prism-lesson .pairs button{display:flex;gap:4px;border:1px solid transparent;padding:5px;background:none}#rectangular-prism-lesson .pairs button[aria-pressed=true]{border-color:#718ea3;background:#f2f6fa}#rectangular-prism-lesson .pairs button:hover{background:#ecf2f6}#rectangular-prism-lesson .pairs i{width:14px;height:18px;background:#729ddd}#rectangular-prism-lesson .pairs button:nth-child(2) i{background:#59baae}#rectangular-prism-lesson .pairs button:nth-child(3) i{background:#e3be66}#rectangular-prism-lesson .clear-selection{margin-top:8px;border:0;background:none;text-decoration:underline;color:#315f81;font-size:12px;padding:0}#rectangular-prism-lesson .net-controls{position:absolute;z-index:5;bottom:57px;left:50%;transform:translateX(-50%);align-items:center;gap:9px;padding:7px 11px;border:1px solid #c3d0d9;background:#fffffff0;color:#5f7789;font-size:11px;white-space:nowrap}#rectangular-prism-lesson .net-controls:not([hidden]){display:flex}#rectangular-prism-lesson .net-controls input{width:125px;accent-color:#315f81;cursor:pointer}#rectangular-prism-lesson .anatomy{margin-top:26px;border-top:1px solid #d5dfe6;padding-top:22px}#rectangular-prism-lesson .anatomy>p{font-size:14px;color:#70828f;margin-top:-5px;margin-bottom:15px}#rectangular-prism-lesson .anatomy-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #c5d3de}#rectangular-prism-lesson .anatomy-card{padding:17px 18px;display:flex;gap:16px;align-items:center;text-align:left;background:#fff;border:0;border-right:1px solid #c5d3de;color:#4d687a;min-height:89px}#rectangular-prism-lesson .anatomy-card:last-child{border-right:0}#rectangular-prism-lesson .anatomy-card[aria-pressed=true]{background:#eaf2f8;color:#254f70;box-shadow:inset 0 -3px #477da6}#rectangular-prism-lesson .anatomy-card:hover{background:#f2f7fb}#rectangular-prism-lesson .anatomy-card strong{font-size:33px;font-weight:400;line-height:1}#rectangular-prism-lesson .anatomy-card b{font-size:15px;font-weight:600;display:block;line-height:1.5}#rectangular-prism-lesson .anatomy-card small{font-size:12px;color:#80939f;display:block;margin-top:3px;line-height:1.4}#rectangular-prism-lesson .properties{padding:27px 0 25px}#rectangular-prism-lesson .notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin-top:17px}#rectangular-prism-lesson .note p{font-size:14px;color:#70838f;line-height:1.65;margin:0}#rectangular-prism-lesson .note h3{font-size:15px;color:#405f74}#rectangular-prism-lesson .static-preview{position:absolute;inset:60px 20px 35px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}#rectangular-prism-lesson .static-preview img{width:100%;height:100%;max-height:340px;object-fit:contain}#rectangular-prism-lesson .static-preview span{font-size:12px;color:#7c8a95}#rectangular-prism-lesson .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#rectangular-prism-lesson .net-label{fill:#2b526a;stroke:#ffffffbb;stroke-width:3px;paint-order:stroke;font-size:12px;font-family:Arial,sans-serif}
/* Textbook: continuous article, serif type, broad diagrams and margin notes. */
/* Classic portal: familiar full-width masthead, navigation strip and boxed content. */
@media(max-width:1200px){#rectangular-prism-lesson main{margin-left:210px;margin-right:24px}#rectangular-prism-lesson .site-nav{left:24px;width:158px}#rectangular-prism-lesson .explorer{grid-template-columns:minmax(0,1fr) 244px;gap:21px}#rectangular-prism-lesson .stage-caption{display:none}#rectangular-prism-lesson .inspector{padding-left:19px}#rectangular-prism-lesson .stage{height:453px}#rectangular-prism-lesson .view-toolbar{justify-content:center}#rectangular-prism-lesson .anatomy-card{padding:15px 12px;gap:12px}#rectangular-prism-lesson .anatomy-card small{font-size:11px}}
@media(max-width:950px){#rectangular-prism-lesson .site-nav{position:static;width:auto;flex-direction:row;gap:23px;margin:0 26px;border-bottom:1px solid #d3dde5}#rectangular-prism-lesson .site-nav strong{display:none}#rectangular-prism-lesson .site-nav a{font-size:13px;padding:13px 0}#rectangular-prism-lesson main{margin:0 26px;padding-top:23px}#rectangular-prism-lesson .explorer{grid-template-columns:minmax(0,1fr) 253px;gap:22px}#rectangular-prism-lesson .stage{height:480px}}
@media(max-width:760px){#rectangular-prism-lesson .explorer{display:block}#rectangular-prism-lesson .inspector{margin-top:25px;border:0;border-top:1px solid #d7e1e7;padding:22px 0 0;display:grid;grid-template-columns:1.1fr 1fr;gap:24px}#rectangular-prism-lesson .inspector-top{grid-column:1}#rectangular-prism-lesson .dimensions-key{grid-column:2;grid-row:1;margin:0;padding:0;border:0}#rectangular-prism-lesson .insight{grid-column:1/-1;margin:0;padding-top:19px}#rectangular-prism-lesson .insight h3{font-size:17px}#rectangular-prism-lesson .insight p{font-size:15px}#rectangular-prism-lesson .inspector-top h2{font-size:22px}#rectangular-prism-lesson .inspector-top p{font-size:16px}#rectangular-prism-lesson .stage{height:460px}#rectangular-prism-lesson .view-toolbar{justify-content:space-between}#rectangular-prism-lesson .anatomy-buttons{grid-template-columns:1fr}#rectangular-prism-lesson .anatomy-card{padding:17px 20px;border-right:0;border-bottom:1px solid #c5d3de;min-height:76px;gap:22px}#rectangular-prism-lesson .anatomy-card:last-child{border-bottom:0}#rectangular-prism-lesson .anatomy-card strong{width:40px;font-size:31px}#rectangular-prism-lesson .anatomy-card b{font-size:16px}#rectangular-prism-lesson .anatomy-card small{font-size:13px}#rectangular-prism-lesson .notes{grid-template-columns:1fr;gap:21px}#rectangular-prism-lesson .note h3{font-size:17px;margin-bottom:5px}#rectangular-prism-lesson .note p{font-size:15px}#rectangular-prism-lesson .properties{padding-top:25px}}
@media(max-width:500px){#rectangular-prism-lesson .site-nav{margin:0 19px;gap:15px}#rectangular-prism-lesson .site-nav a{font-size:11px;padding:11px 0}#rectangular-prism-lesson .site-nav a:nth-of-type(2){max-width:100px}#rectangular-prism-lesson main{margin:0 18px;padding-top:22px}#rectangular-prism-lesson .breadcrumb{font-size:10px;line-height:1.6}#rectangular-prism-lesson .breadcrumb span{margin:0 5px}#rectangular-prism-lesson h1{font-size:29px;margin:12px 0 11px}#rectangular-prism-lesson .intro p{font-size:15px;line-height:1.65}#rectangular-prism-lesson .intro{padding-bottom:21px}#rectangular-prism-lesson .section-bar{font-size:14px;padding:9px 12px}#rectangular-prism-lesson .stage{height:398px}#rectangular-prism-lesson .stage-top{inset:13px 13px auto}#rectangular-prism-lesson .view-switch button{font-size:12px;padding:6px 12px}#rectangular-prism-lesson .stage-bottom{left:12px;right:12px;bottom:12px}#rectangular-prism-lesson .gesture-hint{font-size:10px;gap:5px}#rectangular-prism-lesson .gesture-hint svg{display:none}#rectangular-prism-lesson .camera-buttons{gap:4px}#rectangular-prism-lesson .camera-buttons button{width:26px;height:26px}#rectangular-prism-lesson .camera-buttons svg{width:14px;height:14px}#rectangular-prism-lesson .view-toolbar{justify-content:center;padding:10px;row-gap:9px}#rectangular-prism-lesson .presets>span,#rectangular-prism-lesson .presets button,#rectangular-prism-lesson .display-options button{font-size:12px}#rectangular-prism-lesson .display-options{gap:20px}#rectangular-prism-lesson .figure-caption{font-size:12px;line-height:1.6;margin-top:10px}#rectangular-prism-lesson .inspector{display:block;padding-top:20px;margin-top:21px}#rectangular-prism-lesson .inspector-top h2{font-size:22px}#rectangular-prism-lesson .inspector-top p{font-size:16px;line-height:1.7}#rectangular-prism-lesson .dimensions-key{margin-top:21px;padding-top:17px;border-top:1px solid #d7e1e7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}#rectangular-prism-lesson .dimensions-key h3{grid-column:1/-1;font-size:16px;margin-bottom:5px}#rectangular-prism-lesson .dimensions-key>div{align-items:flex-start;gap:7px;margin:7px 0 0}#rectangular-prism-lesson .dimension-symbol{font-size:21px;line-height:1.2;width:14px}#rectangular-prism-lesson .dimensions-key b{font-size:13px}#rectangular-prism-lesson .dimensions-key small{font-size:11px;margin-top:3px}#rectangular-prism-lesson .insight{margin-top:20px;padding-top:17px}#rectangular-prism-lesson .insight p{font-size:14px}#rectangular-prism-lesson .net-controls{font-size:10px;bottom:53px;padding:6px 9px;gap:7px}#rectangular-prism-lesson .net-controls input{width:103px}#rectangular-prism-lesson .anatomy{margin-top:25px;padding-top:21px}#rectangular-prism-lesson h2{font-size:21px}#rectangular-prism-lesson .anatomy>p{font-size:14px}#rectangular-prism-lesson .anatomy-card small{font-size:12px}#rectangular-prism-lesson .note p{font-size:14px}}
#rectangular-prism-lesson .insight p,#rectangular-prism-lesson .note p,#rectangular-prism-lesson .anatomy>p{color:#596f7e}#rectangular-prism-lesson .dimensions-key small,#rectangular-prism-lesson .anatomy-card small,#rectangular-prism-lesson .figure-caption{color:#657987}#rectangular-prism-lesson .gesture-hint{color:#607988}#rectangular-prism-lesson .insight-heading{color:#607586}#rectangular-prism-lesson .stage-caption{color:#647f92}#rectangular-prism-lesson .display-options button{color:#627887}
@media(prefers-reduced-motion:reduce){#rectangular-prism-lesson{scroll-behavior:auto}#rectangular-prism-lesson *,#rectangular-prism-lesson *:before,#rectangular-prism-lesson *:after{transition:none!important}}

/* The component can sit between the host website's own header and footer. */
#rectangular-prism-lesson{box-sizing:border-box;position:relative;display:block;max-width:1380px;margin:0 auto;padding:0 28px 24px;background:#fff;color:#26323d;font:16px/1.55 Arial,Helvetica,sans-serif;container-type:inline-size;container-name:rp-lesson;min-width:0}
#rectangular-prism-lesson .site-nav{position:absolute;left:28px;top:28px;width:174px;margin:0}
#rectangular-prism-lesson main,#rectangular-prism-lesson .lesson-article{display:block;max-width:none;margin:0 0 0 200px;padding:25px 0 0}
#rectangular-prism-lesson .model-column{margin:0;min-width:0}
#rectangular-prism-lesson .breadcrumb{display:none}
#rectangular-prism-lesson h1{margin-top:0}
#rectangular-prism-lesson .intro{padding-bottom:23px}
#rectangular-prism-lesson .net-explanation{border-top:1px solid #d5dfe6;padding-top:23px}
#rectangular-prism-lesson .net-explanation p{color:#596f7e;font-size:15px;line-height:1.7;max-width:none;margin-bottom:0}
#rectangular-prism-lesson .no-script-note{font-size:14px;color:#526d7f;margin:18px 0 0 200px;padding-top:14px;border-top:1px solid #d5dfe6}
@container rp-lesson (max-width:900px){
  #rectangular-prism-lesson .site-nav{position:static;width:auto;display:flex;flex-direction:row;gap:23px;border-bottom:1px solid #d3dde5;padding-top:3px}
  #rectangular-prism-lesson .site-nav strong{display:none}
  #rectangular-prism-lesson .site-nav a{font-size:13px;padding:13px 0}
  #rectangular-prism-lesson main,#rectangular-prism-lesson .lesson-article{margin:0;padding-top:23px}
  #rectangular-prism-lesson .no-script-note{margin-left:0}
}
@container rp-lesson (max-width:710px){
  #rectangular-prism-lesson .explorer{display:block}
  #rectangular-prism-lesson .inspector{margin-top:25px;border:0;border-top:1px solid #d7e1e7;padding:22px 0 0;display:grid;grid-template-columns:1.1fr 1fr;gap:24px}
  #rectangular-prism-lesson .dimensions-key{grid-column:2;grid-row:1;margin:0;padding:0;border:0}
  #rectangular-prism-lesson .insight{grid-column:1/-1;margin:0;padding-top:19px}
  #rectangular-prism-lesson .view-toolbar{justify-content:center}
  #rectangular-prism-lesson .anatomy-buttons,#rectangular-prism-lesson .notes{grid-template-columns:1fr}
  #rectangular-prism-lesson .anatomy-card{border-right:0;border-bottom:1px solid #c5d3de}
  #rectangular-prism-lesson .anatomy-card:last-child{border-bottom:0}
}
@container rp-lesson (max-width:450px){
  #rectangular-prism-lesson .site-nav{gap:15px}
  #rectangular-prism-lesson .site-nav a{font-size:11px;padding:11px 0}
  #rectangular-prism-lesson .inspector{display:block;padding-top:20px;margin-top:21px}
  #rectangular-prism-lesson .dimensions-key{margin-top:21px;padding-top:17px;border-top:1px solid #d7e1e7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  #rectangular-prism-lesson .dimensions-key h3{grid-column:1/-1}
  #rectangular-prism-lesson .insight{margin-top:20px;padding-top:17px}
}
@media(max-width:500px){#rectangular-prism-lesson{padding:0 18px 23px}}

/* Keep the whole viewer, including its controls, in the expanded view. */
#rectangular-prism-lesson .model-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #c8d6e0;border-bottom:0;background:#e9f0f6;padding-right:5px}
#rectangular-prism-lesson .model-heading .section-bar{border:0;background:none;padding-right:0}
#rectangular-prism-lesson .fullscreen-toggle{display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;min-width:44px;min-height:44px;padding:6px 9px;border:0;background:transparent;color:#315f81;font-size:12px}
#rectangular-prism-lesson .fullscreen-toggle:hover{background:#dce8f1}
#rectangular-prism-lesson .fullscreen-toggle svg{width:17px;height:17px}
#rectangular-prism-lesson .model-dialog{position:fixed;inset:0;margin:0;padding:0;border:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:#fff;color:#26323d;overflow:hidden}
#rectangular-prism-lesson .model-dialog::backdrop{background:#fff}
#rectangular-prism-lesson .model-dialog .model-column{display:flex;flex-direction:column;width:100%;height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);margin:0}
#rectangular-prism-lesson .model-dialog .model-heading,#rectangular-prism-lesson .model-dialog .view-toolbar{flex-shrink:0}
#rectangular-prism-lesson .model-dialog .stage{height:auto;min-height:0;flex:1}
#rectangular-prism-lesson .model-dialog .figure-caption{flex-shrink:0;margin:0;padding:6px 14px;background:#fff}
#rectangular-prism-lesson .reference-diagram{border-top:1px solid #d5dfe6;margin-top:26px;padding-top:22px}
#rectangular-prism-lesson .reference-diagram figure{margin:0}
#rectangular-prism-lesson .reference-diagram picture{display:block;border:1px solid #d5dfe6}
#rectangular-prism-lesson .reference-diagram img{display:block;width:100%;height:auto}
#rectangular-prism-lesson .reference-diagram figcaption{font-size:13px;color:#596f7e;line-height:1.6;margin-top:10px}
@container rp-lesson (max-width:450px){
  #rectangular-prism-lesson .fullscreen-toggle span{display:none}
  #rectangular-prism-lesson .model-dialog .fullscreen-toggle span{display:inline}
}

#rectangular-prism-lesson .visual-section{margin-top:34px;padding-top:26px;border-top:1px solid #d5dfe6}
#rectangular-prism-lesson .visual-section>h2{font-size:25px;margin-bottom:9px}
#rectangular-prism-lesson .section-intro{font-size:15px;color:#596f7e;line-height:1.7;margin-bottom:20px}
#rectangular-prism-lesson .demo-layout{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:25px;align-items:start}
#rectangular-prism-lesson .demo-figure{min-width:0;margin:0}
#rectangular-prism-lesson .demo-stage{height:475px;position:relative;border:1px solid #c8d6e0;background:#f8fafc;overflow:hidden;isolation:isolate;touch-action:pan-y}
#rectangular-prism-lesson .demo-stage:focus-visible{outline:3px solid #2479b6;outline-offset:3px}
#rectangular-prism-lesson .demo-stage canvas{display:block;position:absolute;inset:0;touch-action:none;cursor:grab}
#rectangular-prism-lesson .demo-stage canvas:active{cursor:grabbing}
#rectangular-prism-lesson .demo-fallback{position:absolute;inset:30px 10px;display:flex;align-items:center;justify-content:center;background:#fff;z-index:3}
#rectangular-prism-lesson .demo-fallback img{width:100%;height:100%;object-fit:contain}
#rectangular-prism-lesson .demo-stage-note{position:absolute;top:17px;left:18px;color:#536e80;font-size:12px;pointer-events:none}
#rectangular-prism-lesson .demo-stage-tools{position:absolute;bottom:12px;left:17px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
#rectangular-prism-lesson .demo-stage-tools span{font-size:12px;color:#607988}
#rectangular-prism-lesson .demo-stage-tools button{pointer-events:auto;background:#fff;border:1px solid #b8c7d2;padding:8px 12px;min-height:40px;font-size:12px;color:#315f81}
#rectangular-prism-lesson .demo-figure figcaption{font-size:13px;color:#596f7e;line-height:1.6;margin-top:10px}
#rectangular-prism-lesson .demo-controls{border-left:1px solid #d5dfe6;padding-left:22px;font-size:14px}
#rectangular-prism-lesson .slider-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
#rectangular-prism-lesson .slider-heading label{font-weight:600;color:#36586f}
#rectangular-prism-lesson .slider-heading output{font-variant-numeric:tabular-nums;font-size:14px;color:#315f81;min-width:38px;text-align:right}
#rectangular-prism-lesson .demo-controls input[type=range]{display:block;accent-color:#315f81;width:100%;margin:0;min-height:32px;cursor:pointer;touch-action:pan-y}
#rectangular-prism-lesson .slider-endpoints{display:flex;justify-content:space-between;color:#657987;font-size:12px;margin-top:0}
#rectangular-prism-lesson .demo-actions{display:flex;gap:7px;margin:17px 0 28px}
#rectangular-prism-lesson .demo-actions button,#rectangular-prism-lesson .shape-presets button{min-height:42px;border:1px solid #b8c7d2;background:#fff;color:#315f81;padding:7px 12px;font-size:13px;flex:1}
#rectangular-prism-lesson .demo-controls button:hover,#rectangular-prism-lesson .demo-stage-tools button:hover{background:#eaf2f8}
#rectangular-prism-lesson .demo-controls h3{font-size:15px;margin:0 0 12px}
#rectangular-prism-lesson .demo-pair-list{display:flex;flex-direction:column;gap:5px}
#rectangular-prism-lesson .demo-pair-list button{display:flex;align-items:center;gap:11px;text-align:left;background:transparent;border:1px solid transparent;color:#36586f;padding:9px 6px;min-height:58px;font-size:14px}
#rectangular-prism-lesson .demo-pair-list button[aria-pressed=true]{border-color:#aac0d0;background:#eaf2f8}
#rectangular-prism-lesson .demo-pair-list i{display:block;width:18px;height:27px;flex-shrink:0;border:1px solid #38556844;box-shadow:5px 3px 0 -1px #fff,5px 3px 0 0 #aac0cf}
#rectangular-prism-lesson .pair-front,#rectangular-prism-lesson .pairs i{background:#4b8bd1}
#rectangular-prism-lesson .pair-side,#rectangular-prism-lesson .pairs button:nth-child(2) i{background:#32a996}
#rectangular-prism-lesson .pair-top,#rectangular-prism-lesson .pairs button:nth-child(3) i{background:#e1b34e}
#rectangular-prism-lesson .demo-pair-list small{display:block;color:#657987;font-size:12px;margin-top:1px}
#rectangular-prism-lesson .demo-control-note{font-size:12px;color:#596f7e;line-height:1.65;margin:15px 0 0}
#rectangular-prism-lesson .demo-face-labels{position:absolute;inset:0;pointer-events:none}
#rectangular-prism-lesson .face-leaders{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;stroke:none}
#rectangular-prism-lesson .exploded-face-label{position:absolute;transform:translate(-50%,-50%);color:#2c4f68;background:#ffffffed;border:1px solid #c3d2dc;border-left:3px solid var(--face-color);padding:3px 9px;font-size:12px;line-height:1.5;white-space:nowrap}
#rectangular-prism-lesson .muted-face{opacity:.38}
#rectangular-prism-lesson .demo-annotations{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;stroke:none}
#rectangular-prism-lesson .topology-strip{display:flex;align-items:center;justify-content:space-evenly;gap:14px;border:1px solid #c8d6e0;border-top:0;background:#edf3f7;padding:12px;font-size:14px;color:#426078}
#rectangular-prism-lesson .topology-strip b{font-size:20px;color:#315f81;font-weight:600;margin-right:4px}
#rectangular-prism-lesson .dimension-units{font-size:12px;color:#657987;margin:-7px 0 22px}
#rectangular-prism-lesson .dimension-slider{margin:0 0 17px}
#rectangular-prism-lesson .dimension-slider i{font-family:Georgia,serif;font-size:16px;font-weight:400;margin-left:5px}
#rectangular-prism-lesson .width-slider input[type=range]{accent-color:#29776c}
#rectangular-prism-lesson .height-slider input[type=range]{accent-color:#967226}
#rectangular-prism-lesson .demo-controls .try-shape{border-top:1px solid #d5dfe6;padding-top:19px;margin-top:24px}
#rectangular-prism-lesson .shape-presets{display:flex;gap:6px;flex-wrap:wrap}
#rectangular-prism-lesson .shape-presets button{padding:7px 8px;white-space:nowrap;font-size:12px}
#rectangular-prism-lesson .shape-presets button[aria-pressed=true]{background:#315f81;color:#fff;border-color:#315f81}
#rectangular-prism-lesson .restore-proportions{display:block;color:#315f81;background:none;border:0;text-decoration:underline;padding:8px 0;min-height:44px;font-size:12px;margin-top:8px;text-align:left}
@container rp-lesson (max-width:900px){
  #rectangular-prism-lesson .site-nav{flex-wrap:wrap;gap:0 19px;padding:7px 0}
  #rectangular-prism-lesson .site-nav a{padding:6px 0}
  #rectangular-prism-lesson .demo-layout{grid-template-columns:minmax(0,1fr) 210px;gap:20px}
  #rectangular-prism-lesson .demo-controls{padding-left:17px}
}
@container rp-lesson (max-width:710px){
  #rectangular-prism-lesson .demo-layout{display:block}
  #rectangular-prism-lesson .demo-controls{border:0;padding:20px 0 0}
  #rectangular-prism-lesson .demo-stage{height:400px}
  #rectangular-prism-lesson .demo-pair-list{flex-direction:row;flex-wrap:wrap;gap:7px}
  #rectangular-prism-lesson .demo-pair-list button{flex:1;min-width:125px}
  #rectangular-prism-lesson .demo-actions{margin-bottom:23px}
  #rectangular-prism-lesson .dimension-slider{margin-bottom:15px}
  #rectangular-prism-lesson .visual-section>h2{font-size:23px}
}
@container rp-lesson (max-width:450px){
  #rectangular-prism-lesson .site-nav a:nth-of-type(2){max-width:none}
  #rectangular-prism-lesson .site-nav{gap:0 16px}
  #rectangular-prism-lesson .visual-section{margin-top:27px;padding-top:23px}
  #rectangular-prism-lesson .visual-section>h2{font-size:22px}
  #rectangular-prism-lesson .demo-stage{height:365px}
  #rectangular-prism-lesson .section-intro{font-size:14px}
  #rectangular-prism-lesson .demo-stage-note{font-size:11px;left:12px;top:13px}
  #rectangular-prism-lesson .exploded-face-label{font-size:11px;padding:2px 6px}
  #rectangular-prism-lesson .demo-stage-tools{left:12px}
  #rectangular-prism-lesson .demo-stage-tools span{font-size:11px}
  #rectangular-prism-lesson .topology-strip{padding:10px 8px;font-size:12px;gap:7px}
  #rectangular-prism-lesson .topology-strip b{font-size:18px}
}

/* Quiet studio setting and precise, classic controls. */
#rectangular-prism-lesson .stage,#rectangular-prism-lesson .demo-stage{background:radial-gradient(ellipse at 48% 36%,#fff 15%,#f6f8fa 70%,#eef2f5 100%);border-color:#d4dee5}
#rectangular-prism-lesson .stage{height:510px}
#rectangular-prism-lesson .demo-stage{height:530px}
#rectangular-prism-lesson .demo-layout{grid-template-columns:minmax(0,1fr) 228px;gap:28px}
#rectangular-prism-lesson .demo-controls{padding-top:7px;padding-left:25px}
#rectangular-prism-lesson .demo-controls input[type=range]{--range-color:#406d94;--range-fill:65%;appearance:none;-webkit-appearance:none;background:transparent;height:34px;min-height:34px;outline-offset:3px}
#rectangular-prism-lesson .demo-controls input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,var(--range-color) var(--range-fill),#dce4ea var(--range-fill));border-radius:0}
#rectangular-prism-lesson .demo-controls input[type=range]::-moz-range-track{height:4px;background:#dce4ea}
#rectangular-prism-lesson .demo-controls input[type=range]::-moz-range-progress{height:4px;background:var(--range-color)}
#rectangular-prism-lesson .demo-controls input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin-top:-6.5px;border:2px solid var(--range-color);border-radius:50%;background:#fff;box-shadow:0 1px 3px #30485d26}
#rectangular-prism-lesson .demo-controls input[type=range]::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--range-color);border-radius:50%;background:#fff;box-shadow:0 1px 3px #30485d26}
#rectangular-prism-lesson .demo-controls .width-slider input[type=range]{--range-color:#3e8b80}
#rectangular-prism-lesson .demo-controls .height-slider input[type=range]{--range-color:#b18b3e}
#rectangular-prism-lesson .slider-heading output{font-size:17px;font-weight:500;color:#294c66}
#rectangular-prism-lesson .demo-pair-list button{padding:11px 8px}
#rectangular-prism-lesson .exploded-face-label{font-size:12px;font-weight:600;border:0;border-left:3px solid var(--face-color);padding:4px 9px;background:#fffffff2;box-shadow:0 1px 3px #243d5012;color:#35536a}
#rectangular-prism-lesson .demo-stage-note{font-size:11px;letter-spacing:.15px;color:#718696}
#rectangular-prism-lesson .topology-strip{background:#f4f7f9;border-color:#d4dee5;padding:14px 12px}
#rectangular-prism-lesson .demo-stage-tools button{background:#ffffffeb;border-color:#ccd8e0;color:#48687f}
#rectangular-prism-lesson .model-heading{background:#f0f4f7;border-color:#d4dee5}
#rectangular-prism-lesson .view-toolbar{background:#f4f7f9;border-color:#d4dee5}
@container rp-lesson (max-width:710px){
  #rectangular-prism-lesson .demo-layout{display:block}
  #rectangular-prism-lesson .demo-controls{padding:22px 0 0}
  #rectangular-prism-lesson .demo-stage{height:420px}
}
@container rp-lesson (max-width:450px){
  #rectangular-prism-lesson .stage{height:405px}
  #rectangular-prism-lesson .demo-stage{height:380px}
  #rectangular-prism-lesson .exploded-face-label{font-size:11px;padding:3px 6px}
}
#rectangular-prism-lesson .model-dialog .stage{height:auto}

/* One adjustable model, with its measurements in the same lesson. */
#rectangular-prism-lesson .explorer{grid-template-columns:minmax(0,1fr) 285px;gap:26px}
#rectangular-prism-lesson .adjustable-controls{padding:0 0 0 23px;margin:0;display:block}
#rectangular-prism-lesson .adjustable-controls h2{font-size:19px;margin-bottom:15px}
#rectangular-prism-lesson .unit-control{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:13px;color:#36586f}
#rectangular-prism-lesson select{font:inherit;font-size:13px;color:#315670;border:1px solid #bccbd5;background:#fff;border-radius:0;padding:8px;max-width:190px;min-height:38px}
#rectangular-prism-lesson .control-guidance{font-size:12px;color:#657987;line-height:1.6;margin:10px 0 20px}
#rectangular-prism-lesson .adjustable-controls input[type=number]{width:85px;max-width:45%;min-height:38px;border:1px solid #bdcdd8;border-radius:0;background:#fff;color:#294f6b;text-align:right;padding:5px 7px;font-size:16px;font-variant-numeric:tabular-nums}
#rectangular-prism-lesson .adjustable-controls input[aria-invalid=true]{border-color:#b24432;outline-color:#b24432}
#rectangular-prism-lesson .dimension-error{color:#993c2f;font-size:12px;margin:8px 0 14px}
#rectangular-prism-lesson .adjustable-controls .dimension-slider{margin-bottom:11px}
#rectangular-prism-lesson .adjustable-controls .slider-heading{margin-bottom:0}
#rectangular-prism-lesson .adjustable-controls .insight{margin-top:6px}
#rectangular-prism-lesson .adjustable-controls .restore-proportions{margin-top:4px}
#rectangular-prism-lesson .stage-caption{display:none}
#rectangular-prism-lesson .topology-strip{padding:10px 12px}
#rectangular-prism-lesson .view-switch button{padding:6px 10px;font-size:13px}
#rectangular-prism-lesson .measurements{margin:27px 0 0;border-top:2px solid #527e9b;padding-top:20px}
#rectangular-prism-lesson .measurements-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:17px}
#rectangular-prism-lesson .measurements-heading h2{margin:0;font-size:22px}
#rectangular-prism-lesson .measurements-heading p{margin:0;color:#647a8a;font-size:13px}
#rectangular-prism-lesson .result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #d2dee6;background:#fafcfd}
#rectangular-prism-lesson .measurement{padding:20px 22px 17px;min-width:0;border-right:1px solid #d2dee6}
#rectangular-prism-lesson .measurement:last-child{border-right:0}
#rectangular-prism-lesson .measurement h3{font-size:14px;font-weight:600;margin:0 0 9px}
#rectangular-prism-lesson .measurement-value{font-size:32px;line-height:1.25;color:#295c80;margin:0 0 13px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#rectangular-prism-lesson .measurement-value span{font-size:15px;color:#617d91;white-space:nowrap}
#rectangular-prism-lesson .formula{font-size:15px;color:#365c75;margin:0 0 5px}
#rectangular-prism-lesson .formula i{font-family:Georgia,serif}
#rectangular-prism-lesson .substitution{font-size:12px;color:#657e90;line-height:1.5;margin:0 0 12px;overflow-wrap:anywhere}
#rectangular-prism-lesson .measurement-description{font-size:12px;color:#647785;line-height:1.55;margin:0}
#rectangular-prism-lesson .more-measurements{border-bottom:1px solid #d2dee6}
#rectangular-prism-lesson .more-measurements summary{padding:14px 0;color:#315f81;font-size:14px;cursor:pointer}
#rectangular-prism-lesson .more-measurements .result-grid{border-bottom:0;background:#fff}
#rectangular-prism-lesson .more-measurements .measurement-value{font-size:25px}
#rectangular-prism-lesson .rounding-note{color:#6a7c88;font-size:12px;margin:11px 0 0}
#rectangular-prism-lesson .shape-definition{margin-top:28px;padding-top:23px;border-top:1px solid #d5dfe6}
#rectangular-prism-lesson .shape-definition p{font-size:15px;line-height:1.7;color:#596f7e}
#rectangular-prism-lesson .diagram-explore{margin-top:13px;padding:9px 14px;border:1px solid #b7cbd9;background:#fff;color:#315f81;font-size:13px}
#rectangular-prism-lesson .diagram-explore:hover{background:#f0f5f8}
#rectangular-prism-lesson .model-dialog .explorer{display:grid;grid-template-columns:minmax(0,1fr) 285px;width:100%;height:100%;gap:0;background:#fff;overflow:auto}
#rectangular-prism-lesson .model-dialog .adjustable-controls{padding:24px 20px;overflow:auto}
#rectangular-prism-lesson .model-dialog .topology-strip{flex-shrink:0}
#rectangular-prism-lesson .model-dialog .model-column{min-height:400px}
@container rp-lesson (max-width:850px){
  #rectangular-prism-lesson .explorer{grid-template-columns:minmax(0,1fr) 250px;gap:18px}
  #rectangular-prism-lesson .adjustable-controls{padding-left:18px}
  #rectangular-prism-lesson .measurement{padding:18px 15px}
}
@container rp-lesson (max-width:710px){
  #rectangular-prism-lesson .explorer{display:block}
  #rectangular-prism-lesson .adjustable-controls{padding:22px 0 0;margin-top:20px;border-top:1px solid #d5dfe6;border-left:0}
  #rectangular-prism-lesson .adjustable-controls .insight{margin-top:10px}
  #rectangular-prism-lesson .measurements-heading{display:block}
  #rectangular-prism-lesson .measurements-heading p{margin-top:8px}
}
@container rp-lesson (max-width:520px){
  #rectangular-prism-lesson .result-grid{grid-template-columns:1fr}
  #rectangular-prism-lesson .measurement{border-right:0;border-bottom:1px solid #d2dee6;padding:18px 20px}
  #rectangular-prism-lesson .measurement:last-child{border-bottom:0}
  #rectangular-prism-lesson .stage-top{left:10px;right:10px}
  #rectangular-prism-lesson .view-switch{width:100%}
  #rectangular-prism-lesson .view-switch button{flex:1;padding:6px 4px;font-size:11px}
  #rectangular-prism-lesson .topology-strip{font-size:12px}
}
@media(max-width:710px){
  #rectangular-prism-lesson .model-dialog .explorer{display:block}
  #rectangular-prism-lesson .model-dialog .model-column{height:78vh;height:78dvh}
  #rectangular-prism-lesson .model-dialog .adjustable-controls{margin:0;border-left:0}
}

/* Put the answers first, with a compact readout beside the controls. */
#rectangular-prism-lesson .quick-results{margin:10px 0 19px;border:1px solid #a7bdcd;border-top:3px solid #315f81;background:#edf4f8;padding:13px 14px 0}
#rectangular-prism-lesson .quick-results h3{font-size:14px;margin:0 0 9px;color:#294d67}
#rectangular-prism-lesson .quick-result-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 0;border-top:1px solid #ccdae4}
#rectangular-prism-lesson .quick-result-row>span{font-size:12px;color:#3f596b;white-space:nowrap}
#rectangular-prism-lesson .quick-result-value{margin:0;font-size:27px;line-height:1.2;font-weight:700;color:#204f73;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#rectangular-prism-lesson .quick-result-value>span{display:inline-block;font-size:12px;font-weight:400;color:#456378;white-space:nowrap}
#rectangular-prism-lesson .quick-result-value .long-result{font-size:20px}
#rectangular-prism-lesson .all-results-link{display:block;border-top:1px solid #ccdae4;margin-top:3px;padding:11px 0;font-size:12px;color:#245b82;text-decoration:underline;min-height:42px}
#rectangular-prism-lesson .measurements{margin-top:28px;padding:23px;border:1px solid #a7bdcd;border-top:4px solid #315f81;background:#edf3f7}
#rectangular-prism-lesson .measurements-heading{align-items:center;margin-bottom:20px;gap:16px}
#rectangular-prism-lesson .measurements-heading .results-label{color:#42637c;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin:0 0 6px}
#rectangular-prism-lesson .measurements-heading h2{font-size:25px;color:#214d6f;font-weight:700;line-height:1.3}
#rectangular-prism-lesson .measurements-heading .results-dimensions{color:#3c596e;font-size:14px;margin:0}
#rectangular-prism-lesson .results-dimensions span{font-weight:600;white-space:normal}
#rectangular-prism-lesson .result-grid{background:#fff;border-color:#bacbd7}
#rectangular-prism-lesson .measurement{padding:21px 22px 19px;border-color:#c8d6e0;border-top:4px solid #467da7}
#rectangular-prism-lesson .measurement:nth-child(2){border-top-color:#3f8c7c}
#rectangular-prism-lesson .measurement:nth-child(3){border-top-color:#b09148}
#rectangular-prism-lesson .measurement h3{font-size:16px;color:#29495f;margin-bottom:13px}
#rectangular-prism-lesson .measurement-value{font-size:46px;font-weight:700;line-height:1.15;color:#214f73;margin:0 0 20px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
#rectangular-prism-lesson .measurement:nth-child(2) .measurement-value{color:#216d5d}
#rectangular-prism-lesson .measurement:nth-child(3) .measurement-value{color:#806424}
#rectangular-prism-lesson .measurement-value>span{font-size:17px;font-weight:400;color:#456174}
#rectangular-prism-lesson .measurement-value .long-result{font-size:30px}
#rectangular-prism-lesson .formula{font-size:16px;border-top:1px solid #d9e3ea;padding-top:13px;margin-bottom:7px;color:#35566e}
#rectangular-prism-lesson .substitution{font-size:13px;color:#526b7c;line-height:1.6}
#rectangular-prism-lesson .measurement-description{font-size:13px;color:#526675}
#rectangular-prism-lesson .more-measurements{margin-top:14px;border:1px solid #bacbd7;background:#fff}
#rectangular-prism-lesson .more-measurements summary{padding:14px 17px;font-size:14px;font-weight:600;color:#285c80;min-height:48px}
#rectangular-prism-lesson .more-measurements summary:hover{background:#f3f7fa}
#rectangular-prism-lesson .more-measurements .result-grid{border:0;border-top:1px solid #c8d6e0}
#rectangular-prism-lesson .more-measurements .measurement{border-top:0}
#rectangular-prism-lesson .more-measurements .measurement-value{font-size:35px}
#rectangular-prism-lesson .rounding-note{color:#536c7e;font-size:12px;margin-top:14px}
#rectangular-prism-lesson .model-dialog .all-results-link{display:none}
@container rp-lesson (max-width:850px){
  #rectangular-prism-lesson .measurement{padding:18px 15px}
  #rectangular-prism-lesson .measurement-value{font-size:38px}
  #rectangular-prism-lesson .measurement-value .long-result{font-size:25px}
  #rectangular-prism-lesson .quick-result-value{font-size:24px}
  #rectangular-prism-lesson .quick-results{padding-left:10px;padding-right:10px}
}
@container rp-lesson (max-width:710px){
  #rectangular-prism-lesson .measurements-heading .results-dimensions{margin-top:11px}
  #rectangular-prism-lesson .quick-result-value{font-size:30px}
}
@container rp-lesson (max-width:520px){
  #rectangular-prism-lesson .measurements{padding:17px 14px}
  #rectangular-prism-lesson .measurements-heading h2{font-size:23px}
  #rectangular-prism-lesson .measurement{padding:20px 18px;border-bottom:0}
  #rectangular-prism-lesson .measurement-value{font-size:44px}
  #rectangular-prism-lesson .measurement-value .long-result{font-size:24px}
  #rectangular-prism-lesson .more-measurements .measurement{border-bottom:1px solid #c8d6e0}
  #rectangular-prism-lesson .more-measurements .measurement:last-child{border-bottom:0}
}

/* A table of contents that becomes an expandable panel on small screens. */
#rectangular-prism-lesson .site-nav{display:block;padding:0;gap:0;border:0}
#rectangular-prism-lesson .nav-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #cbd8e2;padding:0 0 12px;margin-bottom:7px}
#rectangular-prism-lesson .nav-heading strong{display:block;padding:0;margin:0;border:0;font-size:15px;color:#294e69}
#rectangular-prism-lesson .nav-mobile-title,#rectangular-prism-lesson .nav-toggle{display:none}
#rectangular-prism-lesson .section-links{display:flex;flex-direction:column;gap:3px}
#rectangular-prism-lesson .site-nav .section-links a{display:flex;align-items:center;gap:9px;padding:10px 8px;min-height:44px;max-width:none;border:1px solid transparent;border-left:3px solid transparent;font-size:13px;line-height:1.4;color:#496478;text-decoration:none}
#rectangular-prism-lesson .section-links a svg{width:18px;height:18px;color:#6f8798}
#rectangular-prism-lesson .site-nav .section-links a:hover{background:#f0f5f8;color:#245779}
#rectangular-prism-lesson .site-nav .section-links a[aria-current=location]{border-left-color:#315f81;background:#eaf2f8;color:#214f73;font-weight:600}
#rectangular-prism-lesson .section-links a[aria-current=location] svg{color:#315f81}
@container rp-lesson (max-width:900px){
  #rectangular-prism-lesson .site-nav{margin:16px 0 0;padding:0;border:1px solid #c3d2dd;border-top:3px solid #315f81;background:#f5f8fa}
  #rectangular-prism-lesson .nav-heading{padding:4px 12px 4px 15px;margin:0;border-bottom:0;min-height:52px}
  #rectangular-prism-lesson .nav-desktop-title{display:none}
  #rectangular-prism-lesson .nav-mobile-title{display:inline}
  #rectangular-prism-lesson .nav-heading strong{display:block;font-size:15px}
  #rectangular-prism-lesson .nav-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:7px 6px;border:0;background:transparent;color:#315f81;font-size:12px}
  #rectangular-prism-lesson .nav-toggle svg{width:16px;height:16px;transform:rotate(180deg)}
  #rectangular-prism-lesson .nav-toggle[aria-expanded=false] svg{transform:none}
  #rectangular-prism-lesson .nav-toggle:hover{background:#e6eef4}
  #rectangular-prism-lesson .section-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0 10px 10px}
  #rectangular-prism-lesson .site-nav .section-links a{min-height:56px;padding:8px 9px;gap:8px;border:1px solid #d6e0e7;border-left:3px solid #d6e0e7;background:#fff;font-size:13px}
  #rectangular-prism-lesson .site-nav .section-links a[aria-current=location]{border-color:#b4c9d9;border-left-color:#315f81;background:#e8f1f7}
}
@container rp-lesson (max-width:340px){
  #rectangular-prism-lesson .site-nav .section-links a{padding:8px 6px;font-size:12px;gap:6px}
  #rectangular-prism-lesson .section-links a svg{width:16px;height:16px}
}

#rectangular-prism-lesson .area-explainer{margin:25px 0 12px;padding:22px;border-left:4px solid #3c7181;background:#f2f6f7}
#rectangular-prism-lesson .area-explainer p{max-width:none;margin:12px 0;line-height:1.7}

/* Shared reading and navigation behavior; each lesson keeps its composition. */
#rectangular-prism-lesson .mobile-contents { display: none; }
#rectangular-prism-lesson .mobile-contents summary { list-style: none; }
#rectangular-prism-lesson .mobile-contents summary::-webkit-details-marker { display: none; }

@media (max-width: 760px) {
  #rectangular-prism-lesson [data-desktop-contents] { display: none !important; }
  #rectangular-prism-lesson .mobile-contents { display: block; }
}
@container rp-lesson (max-width: 760px) {
  #rectangular-prism-lesson [data-desktop-contents] { display: none !important; }
  #rectangular-prism-lesson .mobile-contents { display: block; }
}
#rectangular-prism-lesson .mobile-contents {
  margin: 20px 0 24px;
  padding: 0;
  max-width: none;
  border: 1px solid var(--line, #ccd6dc);
  border-radius: 3px;
  background: #fff;
  color: var(--ink, #294e69);
  font: 15px/1.45 Arial, Helvetica, sans-serif;
}
#rectangular-prism-lesson .mobile-contents > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--tint, var(--paper, #f4f7f9));
  color: inherit;
}
#rectangular-prism-lesson .mobile-contents .contents-title { font-weight: 700; }
#rectangular-prism-lesson .mobile-contents .contents-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted, #617582);
  white-space: nowrap;
}
#rectangular-prism-lesson .mobile-contents > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  margin-left: 3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
#rectangular-prism-lesson .mobile-contents[open] > summary { border-bottom: 1px solid var(--line, #ccd6dc); }
#rectangular-prism-lesson .mobile-contents[open] > summary::after { transform: translateY(2px) rotate(225deg); }
#rectangular-prism-lesson .mobile-contents nav { display: block; padding: 0 16px; margin: 0; border: 0; }
#rectangular-prism-lesson .mobile-contents ol { list-style: none; padding: 0; margin: 0; }
#rectangular-prism-lesson .mobile-contents li { padding: 0; margin: 0; border-bottom: 1px solid var(--line, #dce3e7); }
#rectangular-prism-lesson .mobile-contents li:last-child { border-bottom: 0; }
#rectangular-prism-lesson .mobile-contents a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 11px 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: break-word;
}
#rectangular-prism-lesson .mobile-contents .contents-number { font-size: 11px; color: var(--muted, #617582); font-variant-numeric: tabular-nums; }
#rectangular-prism-lesson .mobile-contents .contents-arrow { color: var(--accent, var(--green, #315f81)); }
#rectangular-prism-lesson .mobile-contents a:hover { color: var(--accent, var(--green, #315f81)); text-decoration: underline; text-underline-offset: 3px; }
#rectangular-prism-lesson .mobile-contents a:focus-visible, #rectangular-prism-lesson .mobile-contents summary:focus-visible { outline: 2px solid var(--accent, var(--green, #315f81)); outline-offset: -3px; }

/* Keep the mode labels readable and separate them from the full-screen action. */
@media (max-width: 760px) {
  #rectangular-prism-lesson .model-toolbar, #rectangular-prism-lesson .viewer-bar { flex-wrap: wrap; gap: 10px; }
  #rectangular-prism-lesson .mode-tabs, #rectangular-prism-lesson .mode-buttons { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  #rectangular-prism-lesson .mode-tabs button, #rectangular-prism-lesson .mode-buttons button { flex: 1 1 auto; min-height: 44px; padding: 9px 12px; font-size: 13px; white-space: normal; }
  #rectangular-prism-lesson .model-toolbar .fullscreen, #rectangular-prism-lesson .viewer-bar .fullscreen { margin-left: auto; min-height: 44px; padding: 9px 12px; font-size: 13px; }
  #rectangular-prism-lesson .viewer-bar .fullscreen span { display: inline; }
  #rectangular-prism-lesson .camera-controls button { min-width: 44px; min-height: 44px; font-size: 13px; }
  #rectangular-prism-lesson .stage-top .view-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 5px; border: 0; background: transparent; }
  #rectangular-prism-lesson .stage-top .view-switch button { min-height: 44px; padding: 9px 8px; font-size: 13px; border: 1px solid var(--line, #ccd6dc); background: #fff; white-space: normal; }
  #rectangular-prism-lesson .stage-top .view-switch button[aria-pressed=true] { background: var(--green, #315f81); color: #fff; }
  #rectangular-prism-lesson .stage > .viewport { top: 112px; }
  #rectangular-prism-lesson .stage { min-height: 480px; }
  #rectangular-prism-lesson .camera-buttons button, #rectangular-prism-lesson .camera-bar button { min-width: 44px; min-height: 44px; }
}
@container rp-lesson (max-width: 760px) {
  #rectangular-prism-lesson .model-toolbar, #rectangular-prism-lesson .viewer-bar { flex-wrap: wrap; gap: 10px; }
  #rectangular-prism-lesson .mode-tabs, #rectangular-prism-lesson .mode-buttons { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  #rectangular-prism-lesson .mode-tabs button, #rectangular-prism-lesson .mode-buttons button { flex: 1 1 auto; min-height: 44px; padding: 9px 12px; font-size: 13px; white-space: normal; }
  #rectangular-prism-lesson .model-toolbar .fullscreen, #rectangular-prism-lesson .viewer-bar .fullscreen { margin-left: auto; min-height: 44px; padding: 9px 12px; font-size: 13px; }
  #rectangular-prism-lesson .viewer-bar .fullscreen span { display: inline; }
  #rectangular-prism-lesson .camera-controls button { min-width: 44px; min-height: 44px; font-size: 13px; }
  #rectangular-prism-lesson .stage-top .view-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 5px; border: 0; background: transparent; }
  #rectangular-prism-lesson .stage-top .view-switch button { min-height: 44px; padding: 9px 8px; font-size: 13px; border: 1px solid var(--line, #ccd6dc); background: #fff; white-space: normal; }
  #rectangular-prism-lesson .stage-top .view-switch button[aria-pressed=true] { background: var(--green, #315f81); color: #fff; }
  #rectangular-prism-lesson .stage > .viewport { top: 112px; }
  #rectangular-prism-lesson .stage { min-height: 480px; }
  #rectangular-prism-lesson .camera-buttons button, #rectangular-prism-lesson .camera-bar button { min-width: 44px; min-height: 44px; }
}

#rectangular-prism-lesson .featured-pin {
  --pin-ink: #223b48;
  --pin-muted: #536672;
  --pin-rule: #cbd3d4;
  margin-top: 56px;
  color: var(--pin-ink);
  container-type: inline-size;
  container-name: pin-reference;
}
#rectangular-prism-lesson .featured-pin * { box-sizing: border-box; }
#rectangular-prism-lesson .featured-pin h2 { margin: 0; font: 42px/1.12 Georgia, serif; letter-spacing: -1.1px; color: inherit; }
#rectangular-prism-lesson .featured-pin h3 { margin: 0; color: inherit; }
#rectangular-prism-lesson .featured-pin p { margin: 0; max-width: none; }
#rectangular-prism-lesson .featured-pin .pin-intro { margin: 18px 0 26px; font-size: 15px; line-height: 1.75; color: var(--pin-muted); }
#rectangular-prism-lesson .featured-pin .pin-art { width: 100%; max-width: 420px; margin: 0; justify-self: center; min-width: 0; }
#rectangular-prism-lesson .featured-pin .pin-preview { display: block; line-height: 0; background: #fff; box-shadow: 0 8px 24px #132e3914; }
#rectangular-prism-lesson .featured-pin .pin-preview img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 2 / 3; border: 1px solid #17344326; }
#rectangular-prism-lesson .featured-pin .pin-preview:hover { outline: 2px solid var(--pin-ink); outline-offset: 4px; }
#rectangular-prism-lesson .featured-pin figcaption { margin: 14px 0 0; padding: 0; text-align: center; font: 12px/1.5 Arial, sans-serif; color: var(--pin-muted); }
#rectangular-prism-lesson .featured-pin .pin-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 26px; }
#rectangular-prism-lesson .featured-pin .pin-actions :is(a, button) { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 46px; padding: 10px 18px; font: 600 14px/1.4 Arial, sans-serif; text-decoration: none; border: 1px solid var(--pin-ink); border-radius: 0; cursor: pointer; }
#rectangular-prism-lesson .featured-pin .pin-actions .pin-pinterest { flex: 0 0 auto; padding-inline: 14px; background: #bd081b; border-color: #bd081b; color: #fff; }
#rectangular-prism-lesson .featured-pin .pin-actions .pin-pinterest:hover { background: #9b0716; border-color: #9b0716; }
#rectangular-prism-lesson .featured-pin .pin-save { background: transparent; color: var(--pin-ink); }
#rectangular-prism-lesson .featured-pin .pin-enlarge { background: transparent; color: var(--pin-ink); }
#rectangular-prism-lesson .featured-pin .pin-actions a:hover { text-decoration: underline; text-underline-offset: 4px; }
#rectangular-prism-lesson .featured-pin :is(a, button):focus-visible { outline: 3px solid var(--pin-ink); outline-offset: 4px; }
#rectangular-prism-lesson .featured-pin .pin-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#rectangular-prism-lesson .featured-pin .pin-return { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 16px; font-size: 13px; color: var(--pin-ink); text-underline-offset: 4px; }
#rectangular-prism-lesson .featured-pin .pin-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container pin-reference (max-width: 700px) {
  #rectangular-prism-lesson .featured-pin h2 { font-size: 34px; letter-spacing: -.7px; }
  #rectangular-prism-lesson .featured-pin .pin-art { max-width: 420px; }
  #rectangular-prism-lesson .featured-pin .pin-intro { font-size: 15px; margin: 15px 0 22px; }
}
@media (max-width: 600px) {
  #rectangular-prism-lesson .featured-pin { margin-top: 36px; }
}

#rectangular-prism-lesson .featured-pin { --pin-ink: #243d52; --pin-muted: #596773; --pin-rule: #ccd4d4; }
#rectangular-prism-lesson .topic-pin-rectangular-prism { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 48px; border-top: 3px solid #243d52; padding: 34px 28px; background: #edf2f5; }
#rectangular-prism-lesson .topic-pin-rectangular-prism .topic-pin-heading { grid-column: 1; grid-row: 1; }
#rectangular-prism-lesson .topic-pin-rectangular-prism .pin-art { grid-column: 2; grid-row: 1 / 3; }
#rectangular-prism-lesson .topic-pin-rectangular-prism .topic-pin-details { grid-column: 1; grid-row: 2; align-self: start; }
#rectangular-prism-lesson .topic-pin-rectangular-prism .topic-pin-facts { margin: 0; }
#rectangular-prism-lesson .topic-pin-rectangular-prism .topic-pin-facts > div { padding: 18px 0; border-top: 1px solid var(--pin-rule); }
#rectangular-prism-lesson .topic-pin-rectangular-prism .topic-pin-facts dt { font: 22px/1.3 Georgia, serif; }
#rectangular-prism-lesson .topic-pin-rectangular-prism .topic-pin-facts dd { margin: 8px 0 0; color: var(--pin-muted); font-size: 14px; line-height: 1.7; }
@container pin-reference (max-width: 850px) { #rectangular-prism-lesson .topic-pin-rectangular-prism { padding: 28px 20px; column-gap: 28px; } #rectangular-prism-lesson .topic-pin-rectangular-prism h2 { font-size: 34px; } }
@container pin-reference (max-width: 700px) {
  #rectangular-prism-lesson .topic-pin-rectangular-prism { grid-template-columns: minmax(0, 1fr); padding: 25px 18px; gap: 0; }
  #rectangular-prism-lesson .topic-pin-rectangular-prism .topic-pin-heading { grid-column: 1; grid-row: 1; display: block; text-align: left; padding-bottom: 0; }
  #rectangular-prism-lesson .topic-pin-rectangular-prism .topic-pin-heading .pin-intro { margin-bottom: 22px; }
  #rectangular-prism-lesson .topic-pin-rectangular-prism .pin-art { grid-column: 1; grid-row: 2; margin: 0 0 26px; }
  #rectangular-prism-lesson .topic-pin-rectangular-prism .topic-pin-details { grid-column: 1; grid-row: 3; }
}