.lab-tag { margin-top: var(--space-5); }
.box { background: var(--color-primary-soft); border: 2px solid var(--color-primary); border-radius: var(--radius-sm); padding: var(--space-4); font-weight: 600; min-width: 0; }
.flex-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.flex-row .box { flex: 1 1 120px; } .flex-row .box--wide { flex: 2 1 200px; background: var(--color-accent-soft); border-color: var(--color-accent); }
.flex-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 120px 120px 120px; grid-template-areas: "a a b b" "a a c c" "d d c c"; gap: var(--space-3); }
.bento__a { grid-area: a; } .bento__b { grid-area: b; } .bento__c { grid-area: c; background: var(--color-dark); color: var(--color-on-primary); border-color: var(--color-dark); } .bento__d { grid-area: d; }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.nest-l1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); padding: var(--space-3); border: 2px dotted var(--color-accent); }
.nest-l2 { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border: 2px dotted var(--color-primary); }
.nest-l3 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-3); border: 2px dotted var(--color-muted); }
.asym { display: grid; grid-template-columns: 1fr 2.6fr; gap: var(--space-4); }
.stage { position: relative; height: 240px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.layer { position: absolute; width: 180px; height: 120px; border-radius: var(--radius-md); padding: var(--space-3); font-weight: 700; color: var(--color-on-primary); }
.layer--1 { top: 20px; left: 20px; background: var(--color-dark); z-index: 1; }
.layer--2 { top: 60px; left: 120px; background: var(--color-primary); z-index: 3; }
.layer--3 { top: 100px; left: 220px; background: var(--color-accent); z-index: 2; }
.neg__top { padding-bottom: var(--space-7); }
.neg__pull { margin: -40px var(--space-6) 0; position: relative; background: var(--color-surface); box-shadow: var(--shadow-md); }
.sticky-wrap { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-5); align-items: start; }
.sticky-side { position: sticky; top: 90px; }
.sticky-body p { padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-sm); }
.units { display: grid; gap: var(--space-3); }
.u-px { width: 240px; } .u-pct { width: 60%; } .u-ch { width: 30ch; } .u-vw { width: clamp(200px, 40vw, 520px); } .u-minmax { width: 50%; min-width: 180px; max-width: 420px; }
.ovf { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.ovf__hidden { overflow: hidden; white-space: nowrap; }
.ovf__scroll { height: 110px; overflow: auto; }
.ovf__ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "a a" "b c" "d d"; }
  .nest-l1, .asym, .sticky-wrap, .ovf { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  .layer { width: 140px; } .layer--2 { left: 80px; } .layer--3 { left: 140px; }
  .u-px { width: 100%; max-width: 240px; } .u-ch { width: 100%; max-width: 30ch; }
}