/* Transparent component. All disk faces, edges and shadows are CSS. */
.os3-dtf,
.os3-dtf *,
.os3-dtf *::before,
.os3-dtf *::after { box-sizing: border-box; }
.os3-dtf {
 width: 100%;
 min-width: 0;
 margin: 0;
 padding: 24px 28px 54px;
 background: transparent;
 font-family: inherit;
 text-align: center;
 isolation: isolate;
}
.os3-dtf .os3-dtf__inner { width: 100%; max-width: 940px; min-width: 0; margin: 0 auto; }
.os3-dtf .os3-dtf__circles {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 align-items: start;
 justify-items: center;
 gap: clamp(24px, 4vw, 56px);
 margin: 0;
 padding: 0;
 list-style: none;
}
.os3-dtf .os3-dtf__circle {
 position: relative;
 display: grid;
 place-items: center;
 width: 100%;
 max-width: 260px;
 min-width: 0;
 height: auto;
 min-height: 0;
 aspect-ratio: 1 / 1;
 margin: 0;
 padding: 0;
 border: 2px solid #08668f;
 border-radius: 50%;
 /* A raised lip surrounds the recessed face, like a shallow display cup. */
 background: linear-gradient(135deg, #77d1e8 0%, #249ec8 24%, #067cad 58%, #034c7a 100%);
 transition: transform 320ms cubic-bezier(.2, .65, .3, 1);
 box-shadow:
  inset 1px 2px 2px rgb(255 255 255 / 40%),
  inset -1px -2px 2px rgb(0 48 86 / 22%),
  0.5px 1px 0 #096b98,
  1px 2px 0 #096994,
  1.5px 3px 0 #086691,
  2px 4px 0 #08638e,
  2.5px 5px 0 #07608a,
  3px 6px 0 #075c86,
  3.5px 7px 0 #065982,
  4px 8px 0 #06567e,
  4.5px 9px 0 #05527a,
  5px 10px 0 #054f76,
  5.5px 11px 0 #044b72,
  6px 12px 0 #04486e,
  6.5px 13px 0 #03456a,
  7px 14px 0 #034267,
  10px 21px 12px -4px rgb(0 34 62 / 24%),
  17px 30px 26px -7px rgb(0 34 62 / 27%);
 list-style: none;
 color: #fff;
}
.os3-dtf .os3-dtf__circle::before {
 content: "";
 position: absolute;
 inset: 9px;
 border: 1px solid rgb(0 47 81 / 40%);
 border-right-color: rgb(119 216 239 / 62%);
 border-bottom-color: rgb(119 216 239 / 75%);
 border-radius: 50%;
 background: linear-gradient(145deg, #00658e 0%, #007eac 52%, #078dbc 100%);
 box-shadow: inset 5px 7px 12px rgb(0 32 62 / 48%), inset -2px -3px 5px rgb(135 221 244 / 30%);
 pointer-events: none;
}
.os3-dtf .os3-dtf__circle::after { content: none; }
.os3-dtf .os3-dtf__label {
 position: relative;
 z-index: 1;
 display: block;
 width: 78%;
 max-height: 74%;
 overflow: auto;
 margin: 0;
 padding: 3px;
 color: #fff;
 font-family: inherit;
 font-size: clamp(16px, 1.6vw, 20px);
 font-weight: 600;
 line-height: 1.4;
 text-align: center;
 text-shadow: 0 1px 2px rgb(0 31 71 / 25%);
 overflow-wrap: anywhere;
 transition: transform 320ms cubic-bezier(.2, .65, .3, 1);
}
.os3-dtf .os3-dtf__circle.os3-dtf--revealing { animation: os3-dtf-reveal 700ms cubic-bezier(.2, .65, .3, 1) both; }
.os3-dtf .os3-dtf__circle.os3-dtf--revealing:nth-child(2) { animation-delay: 130ms; }
.os3-dtf .os3-dtf__circle.os3-dtf--revealing:nth-child(3) { animation-delay: 260ms; }
@keyframes os3-dtf-reveal {
 from { opacity: 0; transform: translateY(22px); }
 to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) and (min-width: 600px) {
 .os3-dtf .os3-dtf__circles { gap: 26px; }
 .os3-dtf .os3-dtf__circle { max-width: 220px; }
 .os3-dtf .os3-dtf__label { font-size: 16px; }
}
@media (max-width: 599px) {
 .os3-dtf { padding: 24px 14px 54px; }
 .os3-dtf .os3-dtf__circles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
 .os3-dtf .os3-dtf__circle { width: 100%; max-width: 220px; }
 .os3-dtf:not(.os3-dtf--categories) .os3-dtf__circle:first-child { grid-column: 1 / -1; width: calc((100% - 18px) / 2); }
 .os3-dtf .os3-dtf__label { font-size: clamp(12px, 3.6vw, 16px); }
 .os3-dtf .os3-dtf__circle.os3-dtf--revealing { animation-delay: 0ms; }
}
/* Decorative pointer feedback only; these remain informational list items. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .os3-dtf .os3-dtf__circle:hover {
  transform: perspective(1000px) translateY(-9px) rotateX(5deg) rotateY(-5deg);
 }
 .os3-dtf .os3-dtf__circle:hover .os3-dtf__label { transform: translate(1px, 2px); }
}
@media (prefers-reduced-motion: reduce) {
 .os3-dtf .os3-dtf__circle.os3-dtf--revealing { animation: none; }
 .os3-dtf .os3-dtf__circle,
 .os3-dtf .os3-dtf__label { transition: none; transform: none; }
}

/* Seven-category cluster with separate layout rules. */
.os3-dtf.os3-dtf--categories { padding-top: 28px; }
.os3-dtf--categories .os3-dtf__inner { max-width: 880px; }
.os3-dtf--categories .os3-dtf__circles {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 18px;
}
/* The categories use smooth raised plaques, in Delorbis blue and cyan tints. */
.os3-dtf--categories .os3-dtf__circle {
 --category-face: #d6edf9;
 --category-edge: #7faac3;
 max-width: 200px;
 border: 1px solid var(--category-edge);
 background: linear-gradient(145deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 0%) 65%), var(--category-face);
 color: #041b50;
 box-shadow:
  inset 1px 2px 3px rgb(255 255 255 / 85%),
  inset -1px -2px 3px rgb(33 57 76 / 8%),
  .5px 1px 0 var(--category-edge),
  1px 2px 0 var(--category-edge),
  1.5px 3px 0 var(--category-edge),
  2px 4px 0 var(--category-edge),
  2.5px 5px 0 var(--category-edge),
  3px 6px 0 var(--category-edge),
  3.5px 7px 0 var(--category-edge),
  4px 8px 0 var(--category-edge),
  7px 14px 10px -4px rgb(28 48 66 / 16%),
  12px 22px 22px -7px rgb(28 48 66 / 19%);
}
.os3-dtf--categories .os3-dtf__circle::before {
 inset: 3px;
 background: none;
 border: 1px solid rgb(255 255 255 / 65%);
 border-right-color: rgb(33 57 76 / 5%);
 border-bottom-color: rgb(33 57 76 / 8%);
 box-shadow: none;
}
.os3-dtf--categories .os3-dtf__label { color: #041b50; text-shadow: none; }
.os3-dtf--categories .os3-dtf__circle:nth-child(1) { --category-face: #d6edf9; --category-edge: #7faac3; }
.os3-dtf--categories .os3-dtf__circle:nth-child(2) { --category-face: #b9e4f6; --category-edge: #599cbf; }
.os3-dtf--categories .os3-dtf__circle:nth-child(3) { --category-face: #eff6fb; --category-edge: #98b6cf; }
.os3-dtf--categories .os3-dtf__circle:nth-child(4) { --category-face: #86c9ea; --category-edge: #398cb8; }
.os3-dtf--categories .os3-dtf__circle:nth-child(5) { --category-face: #c4d9ed; --category-edge: #6a95b8; }
.os3-dtf--categories .os3-dtf__circle:nth-child(6) { --category-face: #dff2fb; --category-edge: #81b3ce; }
.os3-dtf--categories .os3-dtf__circle:nth-child(7) { --category-face: #9dcce5; --category-edge: #528fb3; }
.os3-dtf--categories .os3-dtf__label { font-size: 15px; width: 82%; }
.os3-dtf--categories .os3-dtf__circle:nth-child(1) { grid-column: 1; grid-row: 1; margin-top: 42px; }
.os3-dtf--categories .os3-dtf__circle:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.os3-dtf--categories .os3-dtf__circle:nth-child(3) { grid-column: 3; grid-row: 1; margin-top: 0; }
.os3-dtf--categories .os3-dtf__circle:nth-child(4) { grid-column: 4; grid-row: 1; margin-top: 64px; }
.os3-dtf--categories .os3-dtf__circle:nth-child(5) { grid-column: 1; grid-row: 2; margin-top: 4px; }
.os3-dtf--categories .os3-dtf__circle:nth-child(6) { grid-column: 3; grid-row: 2; margin-top: 26px; }
.os3-dtf--categories .os3-dtf__circle:nth-child(7) { grid-column: 4; grid-row: 2; }
.os3-dtf--categories .os3-dtf__circle.os3-dtf--revealing:nth-child(2) { animation-delay: 70ms; }
.os3-dtf--categories .os3-dtf__circle.os3-dtf--revealing:nth-child(3) { animation-delay: 140ms; }
.os3-dtf--categories .os3-dtf__circle.os3-dtf--revealing:nth-child(4) { animation-delay: 210ms; }
.os3-dtf--categories .os3-dtf__circle.os3-dtf--revealing:nth-child(5) { animation-delay: 280ms; }
.os3-dtf--categories .os3-dtf__circle.os3-dtf--revealing:nth-child(6) { animation-delay: 350ms; }
.os3-dtf--categories .os3-dtf__circle.os3-dtf--revealing:nth-child(7) { animation-delay: 420ms; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .os3-dtf--categories .os3-dtf__circle:hover { transform: translateY(-5px) scale(1.045); }
 .os3-dtf--categories .os3-dtf__circle:hover .os3-dtf__label { transform: none; }
}
@media (max-width: 900px) {
 .os3-dtf--categories .os3-dtf__circles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; max-width: 456px; margin: 0 auto; }
 .os3-dtf--categories .os3-dtf__circle:nth-child(n) { grid-column: auto; grid-row: auto; align-self: start; width: 100%; margin: 0; max-width: 200px; }
 .os3-dtf--categories .os3-dtf__circle:nth-child(2) { margin-top: 28px; }
 .os3-dtf--categories .os3-dtf__circle:nth-child(3) { margin-top: 10px; }
 .os3-dtf--categories .os3-dtf__circle:nth-child(4) { margin-top: 42px; }
 .os3-dtf--categories .os3-dtf__circle:nth-child(5) { margin-top: 4px; }
 .os3-dtf--categories .os3-dtf__circle:nth-child(6) { margin-top: 20px; }
 .os3-dtf--categories .os3-dtf__circle:nth-child(7) { margin-top: 14px; }
 .os3-dtf--categories .os3-dtf__label { font-size: 15px; }
}
@media (max-width: 599px) {
 .os3-dtf--categories .os3-dtf__circles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
 .os3-dtf--categories .os3-dtf__circle:nth-child(n) { width: 100%; max-width: 200px; }
 .os3-dtf--categories .os3-dtf__circle.os3-dtf--revealing:nth-child(n) { animation-delay: 0ms; }
 .os3-dtf--categories .os3-dtf__label { font-size: clamp(11.5px, 3.2vw, 15px); width: 88%; }
}