.hermes-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); align-items: center; gap: clamp(24px, 3vw, 56px); padding-block: clamp(50px, 6vw, 90px) 65px; }
.hermes-hero-copy { min-width: 0; }
.hermes-hero-copy h1 { margin-bottom: 30px; }
.hermes-hero-copy .lead { max-width: 560px; margin-bottom: 30px; }
.hermes-hero .hermes-sorter { min-width: 0; margin: 0; }
.hermes-hero .hermes-sorter-viewport { height: clamp(360px, 36vw, 520px); }
@media (max-width: 850px) {
  .hermes-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hermes-hero-copy h1 { font-size: clamp(2.85rem, 7vw, 4.5rem); }
}
.hermes-sorter { margin: 38px 0 24px; background: radial-gradient(ellipse at 50% 55%, #17211a88, transparent 66%); }
.hermes-sorter-viewport { position: relative; height: clamp(390px, 47vw, 590px); overflow: hidden; }
.hermes-sorter-viewport canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hermes-sorter.has-file-hover canvas { cursor: grab; }
.hermes-sorter.is-resisting canvas { cursor: grabbing; }
.hermes-sorter-viewport:focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; border-radius: 8px; }
.hermes-sorter-reaction-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hermes-sorter-fallback { max-width: 520px; margin: 24px auto; }
.hermes-sorter-fallback svg { display: block; width: 100%; height: 240px; }
.hermes-sorter-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hermes-sorter-label { color: #a4b3a8; font: 10px/1.3 monospace; white-space: nowrap; }
.hermes-sorter-label i { display: inline-block; width: 4px; height: 4px; background: #607367; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.hermes-sorter.is-ready .hermes-sorter-labels { position: absolute; inset: 0; pointer-events: none; }
.hermes-sorter-label {
  padding: 4px 6px;
  border: 1px solid rgba(224, 250, 217, .24);
  border-radius: 6px;
  background: linear-gradient(130deg, rgba(224, 248, 217, .12), rgba(14, 26, 20, .55) 55%, rgba(184, 230, 213, .1));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px rgba(243, 255, 233, .22), inset 0 -1px rgba(198, 237, 220, .12), 0 4px 10px -6px #000;
  color: #c9dacf;
}
.hermes-sorter.is-ready .hermes-sorter-label { position: absolute; transform: translate(-50%, 0); }
.hermes-sorter-label.is-sorted { color: #86ffae; }
.hermes-sorter-label.is-sorted i { background: #64f593; box-shadow: 0 0 8px #64f593; }
.hermes-sorter.is-ready .hermes-sorter-fallback { display: none; }
@media (max-width: 600px) {
  .hermes-sorter { margin-top: 28px; }
  .hermes-sorter-viewport { height: 390px; }
  .hermes-sorter-label { font-size: 8px; }
  .hermes-sorter.is-ready .hermes-sorter-label { padding: 3px; }
  .hermes-sorter-label i { display: none; }
}