.box-model-figure:where(.astro-7wogg6js){margin-block:var(--teaching-space-6);border:1px solid var(--teaching-color-border);border-radius:var(--teaching-radius-lg);background:var(--teaching-color-surface-low);box-shadow:var(--teaching-shadow-sm);padding:var(--teaching-space-5)}header:where(.astro-7wogg6js){margin-block-end:var(--teaching-space-3)}.eyebrow:where(.astro-7wogg6js){margin:0 0 var(--teaching-space-1);color:var(--teaching-color-muted);font-size:var(--teaching-font-size-label);letter-spacing:.04em;text-transform:uppercase;font-weight:700}h3:where(.astro-7wogg6js){color:var(--teaching-color-ink);margin:0;font-size:1.25rem}.reading-order:where(.astro-7wogg6js){margin:0 0 var(--teaching-space-4);color:var(--teaching-color-muted);font-size:var(--teaching-font-size-body-sm)}.box-model:where(.astro-7wogg6js){min-width:0}.layer:where(.astro-7wogg6js){min-width:0;padding:2.75rem clamp(.75rem,4vw,2rem) clamp(.75rem,4vw,2rem);position:relative}.layer-label:where(.astro-7wogg6js){gap:var(--teaching-space-1) var(--teaching-space-2);color:var(--teaching-color-ink);flex-wrap:wrap;align-items:baseline;line-height:1.3;display:flex;position:absolute;inset-block-start:var(--teaching-space-2);inset-inline-start:var(--teaching-space-3)}.layer-label:where(.astro-7wogg6js) small:where(.astro-7wogg6js){color:var(--teaching-color-muted);font-size:var(--teaching-font-size-label)}.margin-layer:where(.astro-7wogg6js){border:2px dashed var(--teaching-color-outline);border-radius:var(--teaching-radius-md);background:var(--teaching-color-surface)}.border-layer:where(.astro-7wogg6js){border:.4rem solid var(--teaching-color-primary);border-radius:var(--teaching-radius-sm);background:var(--teaching-color-surface-low)}.padding-layer:where(.astro-7wogg6js){border:2px dotted var(--teaching-color-primary-strong);border-radius:var(--teaching-radius-sm);background:var(--teaching-color-primary-container)}.content-layer:where(.astro-7wogg6js){border:1px solid var(--teaching-color-outline);border-radius:var(--teaching-radius-sm);background:var(--teaching-color-surface);min-height:5rem;padding:var(--teaching-space-4);color:var(--teaching-color-ink);text-align:center;place-content:center;display:grid}.content-layer:where(.astro-7wogg6js) span:where(.astro-7wogg6js){color:var(--teaching-color-muted);font-size:var(--teaching-font-size-body-sm)}figcaption:where(.astro-7wogg6js){border-block-start:1px solid var(--teaching-color-border);color:var(--teaching-color-muted);font-size:var(--teaching-font-size-body-sm);margin-block-start:var(--teaching-space-4);padding-block-start:var(--teaching-space-4);line-height:1.55}@media (width<=30rem){.box-model-figure:where(.astro-7wogg6js){border-radius:var(--teaching-radius-md);padding:var(--teaching-space-4)}.layer:where(.astro-7wogg6js){padding:var(--teaching-space-3)}.layer-label:where(.astro-7wogg6js){gap:0;margin-block-end:var(--teaching-space-2);display:grid;position:static}}.box-sizing-figure:where(.astro-3ulkz54u){margin-block:var(--teaching-space-6);border:1px solid var(--teaching-color-border);border-radius:var(--teaching-radius-lg);background:var(--teaching-color-surface-low);box-shadow:var(--teaching-shadow-sm);padding:var(--teaching-space-5)}header:where(.astro-3ulkz54u){margin-block-end:var(--teaching-space-3)}.eyebrow:where(.astro-3ulkz54u){margin:0 0 var(--teaching-space-1);color:var(--teaching-color-muted);font-size:var(--teaching-font-size-label);letter-spacing:.04em;text-transform:uppercase;font-weight:700}h3:where(.astro-3ulkz54u){color:var(--teaching-color-ink);margin:0;font-size:1.25rem}.shared-rule:where(.astro-3ulkz54u){margin:0 0 var(--teaching-space-4);color:var(--teaching-color-muted);line-height:1.55}.comparison:where(.astro-3ulkz54u){gap:var(--teaching-space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}section:where(.astro-3ulkz54u){border:1px solid var(--teaching-color-border);border-radius:var(--teaching-radius-md);background:var(--teaching-color-surface);min-width:0;padding:var(--teaching-space-4)}h4:where(.astro-3ulkz54u){color:var(--teaching-color-ink);margin:0;font-size:1.05rem}.mode-description:where(.astro-3ulkz54u){min-height:3.2em;margin:var(--teaching-space-2) 0 var(--teaching-space-4);color:var(--teaching-color-muted);font-size:var(--teaching-font-size-body-sm);line-height:1.55}.width-track:where(.astro-3ulkz54u){border:1px dashed var(--teaching-color-outline);border-radius:var(--teaching-radius-sm);background:var(--teaching-color-surface-high);min-height:6rem;padding:var(--teaching-space-2);align-items:center;display:flex}.width-bar:where(.astro-3ulkz54u){border:4px solid var(--teaching-color-primary);border-radius:var(--teaching-radius-sm);background:var(--teaching-color-primary-container);min-height:4.25rem;padding:var(--teaching-space-2);color:var(--teaching-color-primary-strong);font-size:var(--teaching-font-size-body-sm);text-align:center;place-items:center;font-weight:700;display:grid}.content-box-width:where(.astro-3ulkz54u){width:100%}.border-box-width:where(.astro-3ulkz54u){width:81.1%}dl:where(.astro-3ulkz54u){gap:var(--teaching-space-3);margin:var(--teaching-space-4) 0 0;display:grid}dt:where(.astro-3ulkz54u){color:var(--teaching-color-muted);font-size:var(--teaching-font-size-label);letter-spacing:.04em;text-transform:uppercase;font-weight:700}dd:where(.astro-3ulkz54u){margin:var(--teaching-space-1) 0 0;color:var(--teaching-color-ink);line-height:1.5}figcaption:where(.astro-3ulkz54u){border-block-start:1px solid var(--teaching-color-border);color:var(--teaching-color-muted);font-size:var(--teaching-font-size-body-sm);margin-block-start:var(--teaching-space-4);padding-block-start:var(--teaching-space-4);line-height:1.55}@media (width<=42rem){.comparison:where(.astro-3ulkz54u){grid-template-columns:1fr}.mode-description:where(.astro-3ulkz54u){min-height:0}}@media (width<=30rem){.box-sizing-figure:where(.astro-3ulkz54u){border-radius:var(--teaching-radius-md);padding:var(--teaching-space-4)}}