.home-models {
  --hm-radius: 16px;
  container-type: inline-size;
  min-width: 0;
}

.hm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-bottom: 32px;
  padding: 0;
}

.hm-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.hm-tabs {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  width: 264px;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  background: var(--panel);
}

.hm-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: 600 13px/1 var(--sans);
  transition: background-color 150ms ease,color 150ms ease;
  cursor: pointer;
}

.hm-tabs button[aria-selected="true"] {
  background: var(--text);
  color: var(--bg);
  box-shadow: inset 0 1px 0 #fff,0 2px 4px #0003;
}

.hm-tabs svg,
.hm-play svg,
.hm-use svg,
.hm-cost svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.hm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
  min-width: 0;
}

.hm-grid[hidden] { display: none; }

#hm-panel-image { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hm-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--hm-radius);
  background: var(--panel);
}

.hm-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--panel-2);
}

#hm-panel-image .hm-media { aspect-ratio: 16 / 10; }

.hm-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hm-play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 9px;
  background: rgb(8 8 8 / .87);
  color: var(--text);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
}

.hm-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 20px;
}

.hm-use-case,
.hm-guide > span,
.hm-details header span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.hm-model-heading h2 {
  margin: 5px 0 6px;
  font-size: clamp(19px, 1.75vw, 26px);
  font-weight: 550;
  line-height: 1.14;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.hm-model-heading p,
.hm-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}

.hm-provenance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  max-width: 100%;
  margin: 4px 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 500 12px/1.4 var(--sans);
  text-align: left;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hm-provenance svg {
  flex: none;
  width: 15px;
  height: 15px;
}

.hm-guide {
  width: 100%;
  padding: 11px 0 15px;
  border-top: 1px solid var(--line);
}

.hm-ratings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 7px;
}

.hm-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

.hm-rating-icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.hm-rating-icon {
  display: inline-flex;
  color: var(--muted);
}

.hm-rating-icon svg {
  width: 13px;
  height: 13px;
}

.hm-rating-icon.is-filled { color: var(--text); }
.hm-rating-icon.is-filled svg { fill: currentColor; }

.hm-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  min-height: 72px;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.hm-price { min-width: 0; }

.hm-price small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.hm-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.hm-use {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: none;
  min-height: 44px;
  max-width: 100%;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--text);
  color: var(--bg);
  font: 600 12px/1.25 var(--sans);
  text-align: center;
  cursor: pointer;
}

.hm-use:disabled {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--muted);
  cursor: not-allowed;
}

.models-page :is(button, a, [role="tabpanel"]):focus-visible,
.hm-details :is(button, a, iframe, video):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.hm-use:focus-visible { outline-offset: 2px; }

.hm-details {
  width: min(680px, calc(100% - 28px));
  max-height: 88svh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(16px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--hm-radius, 16px);
  background: var(--panel);
  color: var(--text);
}

.hm-details::backdrop { background: rgb(0 0 0 / .74); }

.hm-details > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.hm-details h2 {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 550;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.hm-details header button {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}

.hm-details header svg { width: 17px; height: 17px; }

.hm-player {
  overflow: hidden;
  margin: 0 0 16px;
  border-radius: 9px;
  background: var(--bg);
}

.hm-player iframe,
.hm-player video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 50svh;
  border: 0;
  object-fit: contain;
}

.hm-details p,
.hm-details dl {
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.6;
}

.hm-details .hm-preview-title { color: var(--text); font-weight: 550; }
.hm-details p,
.hm-details dt { color: var(--muted); }

.hm-details dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
}

.hm-details dd { margin: 0; overflow-wrap: anywhere; }
.hm-details footer { display: flex; flex-wrap: wrap; gap: 4px 20px; }

.hm-details footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: 13px;
  text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .hm-tabs button:hover,
  .hm-details header button:hover { color: var(--text); background: var(--panel-2); }
  .hm-play:hover { background: var(--bg); }
  .hm-provenance:hover { color: var(--text); text-decoration: underline; }
  .hm-use:not(:disabled):hover { background: #fff; }
}

@container (max-width: 910px) {
  .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 585px) {
  .hm-grid,
  #hm-panel-image { grid-template-columns: minmax(0, 1fr); }
  .hm-card-copy { padding: 17px; }
  .hm-toolbar { margin-bottom: 14px; }
}

.hm-poster-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 20px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.hm-media > [hidden] { display: none; }

/* Four-card shelf with stable, interruptible movement. */
.hm-carousel .hm-grid{display:flex;gap:18px;overflow:hidden;padding-bottom:4px;position:relative}
.hm-carousel .hm-grid[hidden]{display:none}
.hm-carousel .hm-card{flex:0 0 calc((100% - 54px)/4);position:relative}
.hm-carousel .hm-grid[data-sliding="true"] .hm-card{transition:transform 280ms cubic-bezier(.23,1,.32,1)}
.hm-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hm-carousel .hm-provenance{position:absolute;right:12px;top:12px;margin:0;width:32px;height:32px;min-height:32px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;background:#080808b8;color:var(--text);z-index:1}
.hm-carousel .hm-provenance span{display:none}
.hm-carousel .hm-card-foot{align-items:stretch;flex-direction:column;gap:18px}
.hm-carousel .hm-use{width:100%;min-height:46px;border:1px solid #ffffff70;background:linear-gradient(180deg,#f6f5f2,#d7d5d1);box-shadow:inset 0 1px 0 #fff,0 3px 0 #93918e,0 6px 14px #0003;justify-content:space-between;padding:0 16px;transition:transform 120ms ease,opacity 120ms ease}
.hm-carousel .hm-use:not(:disabled):active{transform:translateY(2px)}
.hm-shelf{--hm-arrow-gutter:max(0px,calc(60px - var(--models-side-padding,60px)));position:relative;padding-inline:var(--hm-arrow-gutter)}
.hm-carousel #hm-panel-image[data-single-page="true"]{justify-content:center}
.hm-carousel #hm-panel-image[data-single-page="true"] .hm-card{flex-basis:min(420px,calc((100% - 18px)/2))}
.hm-carousel-controls{position:absolute;inset-inline:0;height:0;pointer-events:none}
.hm-carousel-controls button{position:absolute;display:grid;place-items:center;width:44px;height:44px;transform:translateY(-50%);border:1px solid var(--line-strong);border-radius:50%;background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:inset 0 1px 0 #ffffff12,0 4px 12px #0003;color:var(--text);cursor:pointer;pointer-events:auto;transition:opacity 120ms ease,transform 120ms ease}
.hm-carousel-controls [data-model-step="-1"]{left:calc(var(--hm-arrow-gutter) - 54px)}
.hm-carousel-controls [data-model-step="1"]{right:calc(var(--hm-arrow-gutter) - 54px)}
.hm-carousel-controls button:disabled{opacity:.3;cursor:default}
.hm-carousel-controls button:active:not(:disabled){transform:translateY(-50%) scale(.96)}
.hm-carousel-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@container(max-width:850px){.hm-carousel .hm-card{flex-basis:calc((100% - 18px)/2)}}
@container(max-width:585px){.hm-carousel .hm-card,.hm-carousel #hm-panel-image[data-single-page="true"] .hm-card{flex-basis:100%}.hm-shelf{padding-inline:52px}.hm-carousel-controls [data-model-step="-1"]{left:0}.hm-carousel-controls [data-model-step="1"]{right:0}}
@container(max-width:340px){.hm-carousel .hm-ratings{grid-template-columns:1fr}}
@media(hover:hover) and (pointer:fine){.hm-tabs button[aria-selected="true"]:hover{background:var(--text);color:var(--bg)}.hm-carousel-controls button:not(:disabled):hover{border-color:var(--muted);background:var(--panel-2)}}
@media(prefers-reduced-motion:reduce){.hm-carousel .hm-grid[data-sliding="true"] .hm-card,.hm-carousel .hm-use,.hm-carousel-controls button{transition:none}}