/* R3D CSS 1.0 — layout only. Load before your own design CSS.
   r3d-row > r3d-col: equal height within each r3d-row; r3d-grid > r3d-col: equal height across rows.
   Widths are shares of a r3d-row INCLUDING its gap allocation, so 30 + 70 fits.
   Breakpoints use viewport width. r3d-min-* may cause an earlier wrap.
   At small widths a minimum is capped at 100% to prevent horizontal overflow.
   Custom minimum: style="--r3d-col-min: 275px" on a r3d-col (or on r3d-grid).
   Icons: load https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=block
   in HTML. No remote imports or global reset in this library. */
:where(.r3d-row, .r3d-grid, .r3d-col, .r3d-icon) { box-sizing: border-box; }
.r3d-row {
  --r3d-gap: 20px;
  --r3d-floor: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--r3d-gap);
}
.r3d-row > .r3d-col {
  --r3d-part: 1;
  --r3d-col-min: 0px;
  --r3d-share: max(var(--r3d-part), var(--r3d-floor));
  flex: 0 0 calc((100% + var(--r3d-gap)) * var(--r3d-share) - var(--r3d-gap));
  min-width: min(100%, var(--r3d-col-min));
  max-width: 100%;
}
.r3d-col { display: flex; flex-direction: column; overflow-wrap: anywhere; }
.r3d-col > * { min-width: 0; }
.r3d-col > :where(img, video, svg) { max-width: 100%; }
/* These align CONTENT, never the outer box: equal heights stay intact. */
.r3d-top { justify-content: flex-start; }
.r3d-middle { justify-content: center; }
.r3d-bottom { justify-content: flex-end; }
.r3d-center { align-items: center; text-align: center; }
.r3d-row > .r3d-fill { flex: 1 1 0%; min-width: min(100%, var(--r3d-col-min)); }
.r3d-row > .r3d-fixed { flex: 0 0 var(--r3d-col-size, 200px); min-width: 0; max-width: 100%; }
/* Equal columns with automatic wrapping. All rows share the tallest height. */
.r3d-grid {
  --r3d-gap: 20px;
  --r3d-col-min: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--r3d-col-min)), 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--r3d-gap);
}
.r3d-grid > .r3d-col { min-width: 0; }
.r3d-gap-0 { --r3d-gap: 0px; }
.r3d-gap-10 { --r3d-gap: 10px; }
.r3d-gap-20 { --r3d-gap: 20px; }
.r3d-gap-30 { --r3d-gap: 30px; }
.r3d-icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: var(--r3d-icon-size, 24px);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  overflow-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
/* 1280 / 1024 / 800 / 600. 320px is supported, not a device-specific breakpoint.
   Floors: >= 1/8, >= 1/4, >= 1/2, full r3d-row. Large requested widths stay large. */
@media (max-width: 1280px) { .r3d-row { --r3d-floor: 0.125; } }
@media (max-width: 1024px) { .r3d-row { --r3d-floor: 0.25; } }
@media (max-width: 800px) { .r3d-row { --r3d-floor: 0.5; } }
@media (max-width: 600px) {
  .r3d-row { --r3d-floor: 1; }
  .r3d-row > .r3d-fill { flex-basis: 100%; }
}
/* Opt out of breakpoint widening; explicit minima still apply. */
.r3d-row.r3d-keep { --r3d-floor: 0; }
.r3d-row.r3d-keep > .r3d-fill { flex-basis: 0%; }
/* Automatic cells ignore viewport floors and share remaining space equally.
   Use the same minimum on siblings for equal widths. Last row fills its row. */
.r3d-row > .r3d-auto {
  --r3d-col-min: 100px;
  flex: 1 1 min(100%, var(--r3d-col-min));
}
/* Put r3d-container on a wrapper, with r3d-row as its direct child.
   Unsupported browsers retain the viewport-based fallback. */
.r3d-container { box-sizing: border-box; container: r3d-layout / inline-size; }
@supports (container-type: inline-size) {
  .r3d-container > .r3d-row:not(.r3d-keep) { --r3d-floor: 0; }
  .r3d-container > .r3d-row:not(.r3d-keep) > .r3d-fill { flex-basis: 0%; }
  @container r3d-layout (max-width: 1280px) {
    .r3d-container > .r3d-row:not(.r3d-keep) { --r3d-floor: 0.125; }
  }
  @container r3d-layout (max-width: 1024px) {
    .r3d-container > .r3d-row:not(.r3d-keep) { --r3d-floor: 0.25; }
  }
  @container r3d-layout (max-width: 800px) {
    .r3d-container > .r3d-row:not(.r3d-keep) { --r3d-floor: 0.5; }
  }
  @container r3d-layout (max-width: 600px) {
    .r3d-container > .r3d-row:not(.r3d-keep) { --r3d-floor: 1; }
    .r3d-container > .r3d-row:not(.r3d-keep) > .r3d-fill { flex-basis: 100%; }
  }
}

/* Width utilities below are scoped to direct r3d-row children. */
.r3d-row > .r3d-col-5 { --r3d-part: 0.05; }
.r3d-row > .r3d-col-10 { --r3d-part: 0.1; }
.r3d-row > .r3d-col-15 { --r3d-part: 0.15; }
.r3d-row > .r3d-col-20 { --r3d-part: 0.2; }
.r3d-row > .r3d-col-25 { --r3d-part: 0.25; }
.r3d-row > .r3d-col-30 { --r3d-part: 0.3; }
.r3d-row > .r3d-col-35 { --r3d-part: 0.35; }
.r3d-row > .r3d-col-40 { --r3d-part: 0.4; }
.r3d-row > .r3d-col-45 { --r3d-part: 0.45; }
.r3d-row > .r3d-col-50 { --r3d-part: 0.5; }
.r3d-row > .r3d-col-55 { --r3d-part: 0.55; }
.r3d-row > .r3d-col-60 { --r3d-part: 0.6; }
.r3d-row > .r3d-col-65 { --r3d-part: 0.65; }
.r3d-row > .r3d-col-70 { --r3d-part: 0.7; }
.r3d-row > .r3d-col-75 { --r3d-part: 0.75; }
.r3d-row > .r3d-col-80 { --r3d-part: 0.8; }
.r3d-row > .r3d-col-85 { --r3d-part: 0.85; }
.r3d-row > .r3d-col-90 { --r3d-part: 0.9; }
.r3d-row > .r3d-col-95 { --r3d-part: 0.95; }
.r3d-row > .r3d-col-100 { --r3d-part: 1; }
.r3d-row > .r3d-col-1o2 { --r3d-part: 0.5; }
.r3d-row > .r3d-col-2o2 { --r3d-part: 1; }
.r3d-row > .r3d-col-1o3 { --r3d-part: 0.3333333333; }
.r3d-row > .r3d-col-2o3 { --r3d-part: 0.6666666667; }
.r3d-row > .r3d-col-3o3 { --r3d-part: 1; }
.r3d-row > .r3d-col-1o4 { --r3d-part: 0.25; }
.r3d-row > .r3d-col-2o4 { --r3d-part: 0.5; }
.r3d-row > .r3d-col-3o4 { --r3d-part: 0.75; }
.r3d-row > .r3d-col-4o4 { --r3d-part: 1; }
.r3d-row > .r3d-col-1o5 { --r3d-part: 0.2; }
.r3d-row > .r3d-col-2o5 { --r3d-part: 0.4; }
.r3d-row > .r3d-col-3o5 { --r3d-part: 0.6; }
.r3d-row > .r3d-col-4o5 { --r3d-part: 0.8; }
.r3d-row > .r3d-col-5o5 { --r3d-part: 1; }
.r3d-row > .r3d-col-1o6 { --r3d-part: 0.1666666667; }
.r3d-row > .r3d-col-2o6 { --r3d-part: 0.3333333333; }
.r3d-row > .r3d-col-3o6 { --r3d-part: 0.5; }
.r3d-row > .r3d-col-4o6 { --r3d-part: 0.6666666667; }
.r3d-row > .r3d-col-5o6 { --r3d-part: 0.8333333333; }
.r3d-row > .r3d-col-6o6 { --r3d-part: 1; }
.r3d-row > .r3d-col-1o7 { --r3d-part: 0.1428571429; }
.r3d-row > .r3d-col-2o7 { --r3d-part: 0.2857142857; }
.r3d-row > .r3d-col-3o7 { --r3d-part: 0.4285714286; }
.r3d-row > .r3d-col-4o7 { --r3d-part: 0.5714285714; }
.r3d-row > .r3d-col-5o7 { --r3d-part: 0.7142857143; }
.r3d-row > .r3d-col-6o7 { --r3d-part: 0.8571428571; }
.r3d-row > .r3d-col-7o7 { --r3d-part: 1; }
.r3d-row > .r3d-col-1o8 { --r3d-part: 0.125; }
.r3d-row > .r3d-col-2o8 { --r3d-part: 0.25; }
.r3d-row > .r3d-col-3o8 { --r3d-part: 0.375; }
.r3d-row > .r3d-col-4o8 { --r3d-part: 0.5; }
.r3d-row > .r3d-col-5o8 { --r3d-part: 0.625; }
.r3d-row > .r3d-col-6o8 { --r3d-part: 0.75; }
.r3d-row > .r3d-col-7o8 { --r3d-part: 0.875; }
.r3d-row > .r3d-col-8o8 { --r3d-part: 1; }
.r3d-row > .r3d-col-1o9 { --r3d-part: 0.1111111111; }
.r3d-row > .r3d-col-2o9 { --r3d-part: 0.2222222222; }
.r3d-row > .r3d-col-3o9 { --r3d-part: 0.3333333333; }
.r3d-row > .r3d-col-4o9 { --r3d-part: 0.4444444444; }
.r3d-row > .r3d-col-5o9 { --r3d-part: 0.5555555556; }
.r3d-row > .r3d-col-6o9 { --r3d-part: 0.6666666667; }
.r3d-row > .r3d-col-7o9 { --r3d-part: 0.7777777778; }
.r3d-row > .r3d-col-8o9 { --r3d-part: 0.8888888889; }
.r3d-row > .r3d-col-9o9 { --r3d-part: 1; }
.r3d-row > .r3d-col-1o10 { --r3d-part: 0.1; }
.r3d-row > .r3d-col-2o10 { --r3d-part: 0.2; }
.r3d-row > .r3d-col-3o10 { --r3d-part: 0.3; }
.r3d-row > .r3d-col-4o10 { --r3d-part: 0.4; }
.r3d-row > .r3d-col-5o10 { --r3d-part: 0.5; }
.r3d-row > .r3d-col-6o10 { --r3d-part: 0.6; }
.r3d-row > .r3d-col-7o10 { --r3d-part: 0.7; }
.r3d-row > .r3d-col-8o10 { --r3d-part: 0.8; }
.r3d-row > .r3d-col-9o10 { --r3d-part: 0.9; }
.r3d-row > .r3d-col-10o10 { --r3d-part: 1; }
.r3d-row > .r3d-min-100, .r3d-grid.r3d-min-100 { --r3d-col-min: 100px; }
.r3d-row > .r3d-min-150, .r3d-grid.r3d-min-150 { --r3d-col-min: 150px; }
.r3d-row > .r3d-min-200, .r3d-grid.r3d-min-200 { --r3d-col-min: 200px; }
.r3d-row > .r3d-min-250, .r3d-grid.r3d-min-250 { --r3d-col-min: 250px; }
.r3d-row > .r3d-min-300, .r3d-grid.r3d-min-300 { --r3d-col-min: 300px; }
.r3d-row > .r3d-min-350, .r3d-grid.r3d-min-350 { --r3d-col-min: 350px; }
.r3d-row > .r3d-min-400, .r3d-grid.r3d-min-400 { --r3d-col-min: 400px; }
.r3d-row > .r3d-min-450, .r3d-grid.r3d-min-450 { --r3d-col-min: 450px; }
.r3d-row > .r3d-min-500, .r3d-grid.r3d-min-500 { --r3d-col-min: 500px; }
.r3d-row > .r3d-min-550, .r3d-grid.r3d-min-550 { --r3d-col-min: 550px; }
.r3d-row > .r3d-min-600, .r3d-grid.r3d-min-600 { --r3d-col-min: 600px; }

/* Align outer boxes horizontally; r3d-center aligns content inside a box. */
.r3d-row.r3d-row-center { justify-content: center; }
/* Optional growth from the requested width/minimum. A lone item fills its row.
   Multiple growing items share spare space; this is not a lone-item selector.
   Use with percentage/fraction columns, not r3d-fixed. */
.r3d-row > .r3d-col.r3d-grow { flex-grow: 1; }