.deburr {
  --db-accent: #00bd99;
  --db-border: #164342;
  --db-text: #eef1f2;
  container: deburr / inline-size;
  color: var(--db-text);
  background: radial-gradient(ellipse at 45% 20%, #09202666, transparent 70%), #000c14;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  letter-spacing: 0;
  line-height: 1.55;
}

.deburr, .deburr * { box-sizing: border-box; }
.deburr figure, .deburr p, .deburr .deburr__heading, .deburr h2, .deburr h3 { margin: 0; }
.deburr img { display: block; max-width: 100%; }

.deburr__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr) minmax(0, 1fr);
  max-width: 1720px;
  margin: auto;
  padding: 20px;
}

.deburr__layout > * { min-width: 0; border: 1px solid var(--db-border); }
.deburr__details, .deburr__comparison, .deburr__explanation { padding: 28px; }
.deburr .deburr__heading, .deburr h2 {
  color: var(--db-accent);
  font-size: 23px;
  line-height: 1.3;
  font-weight: 650;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  margin-bottom: 26px;
}
.deburr .deburr__heading { font-size: 28px; }
.deburr h3 { font-size: 21px; font-weight: 550; line-height: 1.3; }

.deburr__part { position: relative; align-self: stretch; background: #000c14; }
.deburr__part > img { width: 100%; height: 100%; object-fit: contain; }
.deburr__part > figcaption {
  position: absolute;
  left: 84%;
  top: 50%;
  width: 16%;
  height: 32px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  background: #000c14;
  color: var(--db-accent);
  font-size: 14px;
}

.deburr__details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.deburr__table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.deburr__table th, .deburr__table td { border: 1px solid #243b42; padding: 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.deburr__table th { width: 42%; font-weight: 600; }
.deburr__notes { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.deburr__notes li { display: flex; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--db-border); }
.deburr__notes li:first-child { padding-top: 0; }
.deburr__notes li:last-child { border-bottom: 0; padding-bottom: 0; }
.deburr__note-number { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid var(--db-accent); border-radius: 50%; color: var(--db-accent); font-size: 14px; }

.deburr__comparison { display: flex; flex-direction: column; }
.deburr__comparison h2 { text-align: center; }
.deburr__diagrams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-block: auto; }
.deburr__diagram { min-width: 0; text-align: center; }
.deburr__diagram + .deburr__diagram { border-left: 1px solid var(--db-border); padding-left: 18px; }
.deburr__face-label { position: relative; font-size: 14px; line-height: 1.4; padding: 22px 0 28px; }
.deburr__face-label::after { content: ""; position: absolute; bottom: 5px; left: 50%; height: 18px; border-left: 1px solid #e9eeee; }
.deburr__face-label::before { content: ""; position: absolute; bottom: 3px; left: calc(50% - 3px); border-top: 5px solid #e9eeee; border-inline: 3px solid transparent; }
.deburr__face-label--bottom { padding: 28px 0 0; }
.deburr__face-label--bottom::after { top: 5px; bottom: auto; }
.deburr__face-label--bottom::before { top: 3px; bottom: auto; border-top: 0; border-bottom: 5px solid #e9eeee; }
.deburr__cross-section { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 14px; height: 120px; }
.deburr__metal { position: relative; border: 1px solid #bac1c3; background: repeating-linear-gradient(135deg, transparent 0 10px, #51636b 10px 11px); }
.deburr__edge { position: absolute; left: 0; right: 0; height: 5px; background: #69d1b1; }
.deburr__edge--top { top: -1px; }
.deburr__edge--bottom { bottom: -1px; }
.deburr__thickness { position: relative; display: grid; place-items: center; border-block: 1px solid #bac1c3; }
.deburr__thickness::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 50%; width: 1px; background: #bac1c3; }
.deburr__thickness::after { content: ""; position: absolute; top: 1px; bottom: 1px; left: calc(50% - 3px); width: 6px; background: #bac1c3; clip-path: polygon(50% 0, 100% 6%, 60% 6%, 60% 94%, 100% 94%, 50% 100%, 0 94%, 40% 94%, 40% 6%, 0 6%); }
.deburr__thickness span { position: relative; z-index: 1; background: #000c14; padding: 2px 4px; font-size: 16px; }
.deburr__legend { text-align: center; padding-top: 30px; font-size: 15px; }

.deburr__explanation { grid-column: 1 / 3; }
.deburr__explanation h2 { margin-bottom: 14px; }
.deburr__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 680px; margin: 0 0 22px; text-align: center; }
.deburr__options > div { min-width: 0; }
.deburr__options > div + div { border-left: 1px solid var(--db-border); padding-left: 24px; }
.deburr__options dt { display: inline-block; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--db-accent); font-size: 21px; }
.deburr__options dd { margin: 0; font-size: 16px; text-wrap: balance; }
.deburr__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 680px; }
.deburr__photos figcaption { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.deburr__photos img { width: 100%; aspect-ratio: 1.85; object-fit: cover; }
.deburr__summary { font-size: 15px; padding-top: 18px; max-width: 900px; }
.deburr__symbol { display: grid; place-items: center; padding: 24px; background: #000c14; }
.deburr__symbol img { width: 100%; max-width: 280px; height: auto; }

@container deburr (max-width: 1450px) {
  .deburr__layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 1fr); }
  .deburr__details, .deburr__comparison, .deburr__explanation { padding: 22px; }
  .deburr__details-grid { grid-template-columns: minmax(0, 1fr); }
  .deburr__notes { font-size: 14px; }
  .deburr__notes li { padding-block: 12px; }
  .deburr .deburr__heading { font-size: 25px; }
  .deburr h2 { font-size: 21px; }
  .deburr__diagrams { gap: 14px; }
  .deburr__diagram + .deburr__diagram { padding-left: 12px; }
  .deburr__cross-section { gap: 8px; }
}

@container deburr (max-width: 1100px) {
  .deburr__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deburr__details { grid-column: 2; grid-row: 1 / 3; }
  .deburr__part { grid-column: 1; grid-row: 1; aspect-ratio: 1; align-self: start; }
  .deburr__comparison { grid-column: 1; grid-row: 2; }
  .deburr__explanation { grid-column: 1; }
  .deburr__symbol { grid-column: 2; }
  .deburr__comparison h2 { text-align: left; }
  .deburr__diagrams { margin-top: 8px; }
}

@container deburr (max-width: 700px) {
  .deburr__layout { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .deburr__layout > * { grid-column: 1; grid-row: auto; }
  .deburr__part { max-height: 460px; }
  .deburr__details, .deburr__comparison, .deburr__explanation { padding: 24px 20px; }
  .deburr__details-grid { gap: 24px; }
  .deburr__table { font-size: 15px; }
  .deburr__notes { font-size: 16px; }
  .deburr__notes li { padding-block: 16px; }
  .deburr__comparison h2 { text-align: center; }
  .deburr__diagrams { gap: 18px; }
  .deburr h3, .deburr__options dt { font-size: 19px; }
  .deburr__photos, .deburr__options { gap: 16px; }
  .deburr__options > div + div { padding-left: 16px; }
  .deburr__options dd { font-size: 15px; }
  .deburr__symbol img { max-width: 220px; }
}

@container deburr (max-width: 380px) {
  .deburr__details, .deburr__comparison, .deburr__explanation { padding-inline: 16px; }
  .deburr__photos, .deburr__options { grid-template-columns: minmax(0, 1fr); }
  .deburr__options > div + div { padding-left: 0; border-left: 0; }
  .deburr__diagrams { gap: 12px; }
  .deburr__cross-section { height: 100px; grid-template-columns: minmax(0, 1fr) 18px; gap: 6px; }
  .deburr__face-label { font-size: 12px; }
  .deburr h3 { font-size: 17px; }
}