/* screen 2: the styles carousel - a jukebox record changer; a visor locks on to the centre cover and
   reads the style out the way a film HUD identifies a target. Background has four variants under test
   (.bg-a .. .bg-d, chosen with ?bg=a|b|c|d in the URL). */
.styx { position: relative; color: var(--on); overflow: hidden; outline: none; isolation: isolate;
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 104px 0 56px; }
.styx > .wrap { width: 100%; position: relative; z-index: 1; }

/* A - night navy lifted: blue light from above, warm floor light under the record changer */
.styx.bg-a { background:
  radial-gradient(60% 55% at 35% 78%, rgba(243,178,76,.16), transparent 70%),
  radial-gradient(90% 70% at 50% 0%, #1F3350 0%, transparent 70%),
  linear-gradient(180deg, #121B29 0%, #0C121B 100%); }
/* B - the current cover, blurred and enlarged, lights the whole screen and changes with each style */

/* C - brand blue, a lit studio wall */

/* D - warm daylight beige, dark text, the night stays in the hero */


.styx-head { max-width: 62rem; }
.styx-head .kicker { margin: 0 0 14px; }
.styx-title { font-weight: 700; font-size: clamp(30px, 3.5vw, 52px); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 16px; }
.styx-title span { color: var(--sun); }
.styx-sub { color: var(--on-2); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; margin: 0; max-width: 38rem; }

.styx-body { position: relative; margin-top: clamp(16px, 2.6vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: center; gap: clamp(16px, 3vw, 48px); }
.styx-stage { position: relative; height: clamp(320px, 44vh, 460px); perspective: 1400px; perspective-origin: 50% 45%; touch-action: pan-y; cursor: grab; user-select: none; }
.styx-stage:active { cursor: grabbing; }
.styx-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.styx-card { --s: clamp(200px, 19vw, 280px); position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  padding: 0; border: 0; border-radius: 10px; background: #111; cursor: pointer; transform-style: preserve-3d; will-change: transform, opacity;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); -webkit-box-reflect: below 10px linear-gradient(transparent 70%, rgba(255,255,255,.14)); }
.styx-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; pointer-events: none; filter: saturate(.92) brightness(.86); transition: filter .5s var(--ease); }
.styx-card.is-centre img { filter: none; }
.styx-name { position: absolute; left: 12px; bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.styx-card.is-centre .styx-name { opacity: 0; }

/* the visor over the centre slot: brackets close in, a crosshair and a measuring grid sweep the cover */
.styx-lock { --s: calc(clamp(200px, 19vw, 280px) * 1.12); position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); transform: translate(-50%, -50%); pointer-events: none; z-index: 200; }
.styx-lock .br { position: absolute; width: 26px; height: 26px; border: 2px solid var(--sun); opacity: 0; transition: opacity .2s ease, transform .55s var(--ease); }
.styx-lock .br:nth-child(1) { left: -14px; top: -14px; border-right: 0; border-bottom: 0; transform: translate(-18px, -18px); }
.styx-lock .br:nth-child(2) { right: -14px; top: -14px; border-left: 0; border-bottom: 0; transform: translate(18px, -18px); }
.styx-lock .br:nth-child(3) { left: -14px; bottom: -14px; border-right: 0; border-top: 0; transform: translate(-18px, 18px); }
.styx-lock .br:nth-child(4) { right: -14px; bottom: -14px; border-left: 0; border-top: 0; transform: translate(18px, 18px); }
.styx.locked .styx-lock .br { opacity: 1; transform: none; }
.styx-lock .cross { position: absolute; inset: 0; opacity: 0; }
.styx-lock .cross::before, .styx-lock .cross::after { content: ""; position: absolute; background: rgba(243,178,76,.75); }
.styx-lock .cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.styx-lock .cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.styx-lock .grid { position: absolute; inset: 0; border-radius: 10px; opacity: 0;
  background-image: linear-gradient(rgba(243,178,76,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(243,178,76,.22) 1px, transparent 1px); background-size: 12.5% 12.5%; }
.styx-lock .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, var(--sun), transparent); box-shadow: 0 0 18px rgba(243,178,76,.8); }
.styx-lock .tag { position: absolute; font: 600 10.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; color: #1a1306; background: var(--sun); padding: 4px 6px; border-radius: 2px; opacity: 0; white-space: nowrap; }
.styx-lock .tag.t1 { left: -14px; top: -40px; }
.styx-lock .tag.t2 { right: -14px; bottom: -40px; }
.styx.scanning .styx-lock .grid { animation: styx-grid 1.3s ease 1; }
.styx.scanning .styx-lock .cross { animation: styx-cross 1.3s var(--ease) 1; }
.styx.scanning .styx-lock .scan { animation: styx-scan 1.1s var(--ease) 1; }
.styx.locked .styx-lock .tag { opacity: 1; transition: opacity .3s ease .2s; }
@keyframes styx-grid { 0% { opacity: 0; } 20% { opacity: 1; } 75% { opacity: .7; } 100% { opacity: 0; } }
@keyframes styx-cross { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 80% { opacity: .8; } 100% { opacity: 0; } }
@keyframes styx-scan { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }

/* the read-out panel */
.styx-hud { position: relative; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: .06em; color: #CFE0F2;
  padding: 22px 22px 20px; border: 1px solid rgba(127,176,230,.3); border-radius: 12px; background: linear-gradient(160deg, rgba(62,133,211,.16), rgba(7,9,13,.42));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hud-top { display: flex; justify-content: space-between; gap: 12px; color: var(--blue-glow); font-size: 11px; }
.hud-status { color: var(--sun); }
.hud-progress { height: 2px; margin-top: 10px; background: rgba(127,176,230,.18); overflow: hidden; }
.hud-progress i { display: block; height: 100%; width: 100%; background: var(--sun); transform-origin: 0 50%; transform: scaleX(0); }
.hud-name { font-family: var(--font); font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; letter-spacing: -.01em; color: #fff; margin: 14px 0 8px; min-height: 1.15em; }
.hud-desc { font-family: var(--font); font-size: 15.5px; line-height: 1.5; letter-spacing: 0; color: var(--on); min-height: 4.5em; margin: 0 0 12px; }
.hud-grid { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding-top: 12px; border-top: 1px dashed rgba(127,176,230,.25); }
.hud-rows { display: grid; gap: 9px; align-content: start; }
.hud-r { display: grid; grid-template-columns: 7.2em 1fr; align-items: center; gap: 8px; }
.hud-r span:first-child { color: var(--blue-glow); font-size: 10.5px; text-transform: uppercase; }
.hud-r b { font-weight: 500; color: #fff; font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
.hud-meter { position: relative; height: 6px; border-radius: 3px; background: rgba(127,176,230,.18); overflow: hidden; }
.hud-meter i { position: absolute; inset: 0; background: linear-gradient(90deg, #7FB0E6, var(--sun)); transform-origin: 0 50%; transform: scaleX(0); }
.hud-dial { width: 96px; height: 96px; }
.hud-dial .ring { fill: none; stroke: rgba(127,176,230,.22); stroke-width: 6; }
.hud-dial .ticks line { stroke: rgba(127,176,230,.45); stroke-width: 1; }
.hud-dial .hud-arc { fill: none; stroke: var(--sun); stroke-width: 6; stroke-linecap: round; }
.hud-dial text { fill: var(--blue-glow); font-size: 9px; font-family: ui-monospace, Menlo, Consolas, monospace; text-anchor: middle; }
.hud-spec { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 14px; }
.hud-spec i { flex: 1; background: rgba(127,176,230,.55); border-radius: 1px; height: 8%; transition: height .18s linear; }
.hud-tags { margin: 10px 0 0; color: var(--on-3); font-size: 11.5px; text-transform: uppercase; min-height: 1.2em; }

.styx-nav { display: flex; gap: 10px; margin-top: 18px; }
.styx-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background-color .2s ease; }
.styx-nav button:hover { background: rgba(255,255,255,.1); }
.styx-nav svg { width: 18px; height: 18px; }

/* preview-only switcher for the four backgrounds */


@media (max-width: 900px) {
  .styx { padding: 88px 0 40px; }
  .styx-body { grid-template-columns: 1fr; }
  .styx-stage { height: 270px; }
  .styx-card { --s: 190px; }
  .styx-lock { --s: calc(190px * 1.12); }
  .styx-hud { padding: 16px; }
  .hud-desc { min-height: 3em; }
}
@media (prefers-reduced-motion: reduce) {
  .styx.scanning .styx-lock .grid, .styx.scanning .styx-lock .cross, .styx.scanning .styx-lock .scan { animation: none; }
}

/* ---- 03/10 revision ----
   Data font: Switzer with tabular figures instead of a monospace (the slashed zero reads as machine-made).
   The panel keeps one size and one translucency; the read-out appears inside it. */
.styx-hud, .styx-lock .tag, .hud-dial text { font-family: var(--font); font-variant-numeric: tabular-nums; }
.styx-hud { height: 452px; display: grid; grid-template-rows: auto; align-content: start;
  background: rgba(16, 26, 42, .46); border-color: rgba(127,176,230,.22); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); }
.hud-top { font-size: 11px; font-weight: 600; letter-spacing: .14em; }
.hud-name { margin: 16px 0 6px; line-height: 1.15em; height: 1.2em; overflow: hidden; white-space: nowrap; }
.hud-desc { height: 4.6em; min-height: 0; overflow: hidden; margin: 6px 0 0; }
.hud-grid { margin-top: 10px; }
.hud-r span:first-child { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; }
.hud-r b { font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.hud-tags { font-size: 11px; font-weight: 600; letter-spacing: .14em; margin: 8px 0 0; white-space: nowrap; overflow: hidden; }
.styx-lock .tag { font-weight: 700; font-size: 10.5px; letter-spacing: .1em; }

/* energy: ten cells, cool to warm, lit one by one */
.hud-meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 8px; background: none; border-radius: 0; overflow: visible; }
.hud-meter i { position: static; transform: none; border-radius: 2px; background: rgba(127,176,230,.16); transition: background-color .25s ease, box-shadow .25s ease; }
.hud-meter i.on:nth-child(1), .hud-meter i.on:nth-child(2) { background: #5E9BE0; }
.hud-meter i.on:nth-child(3), .hud-meter i.on:nth-child(4) { background: #4FC1E0; }
.hud-meter i.on:nth-child(5), .hud-meter i.on:nth-child(6) { background: #4FD6B0; }
.hud-meter i.on:nth-child(7), .hud-meter i.on:nth-child(8) { background: #B6E26B; }
.hud-meter i.on:nth-child(9), .hud-meter i.on:nth-child(10) { background: #FF7A59; }
.hud-meter i.on { box-shadow: 0 0 8px currentColor; }

/* the equaliser: bars scale from the floor, coloured low to high */
.hud-spec { height: 34px; margin-top: 12px; gap: 2px; }
.hud-spec i { height: 100%; transform-origin: 50% 100%; transform: scaleY(.06); transition: none; background: linear-gradient(180deg, #8EC3F2, #3E85D3); }
.hud-spec i:nth-child(n+10) { background: linear-gradient(180deg, #7FE3D0, #2FA7B8); }
.hud-spec i:nth-child(n+20) { background: linear-gradient(180deg, #D6EFA0, #6FBF8E); }

/* E - white, with the same floor reflection as A */


@media (max-width: 900px) { .styx-hud { height: 420px; } }
.hud-meter i.on { box-shadow: none; }
.hud-r { grid-template-columns: 8.6em 1fr; }

/* audit fixes 03/10: screen-reader line, narrow HUD, white-variant status contrast */
.styx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
  .hud-grid { grid-template-columns: minmax(0, 1fr); }
  .hud-dial { display: none; }
  .hud-r { grid-template-columns: 7.4em minmax(0, 1fr); }
  .hud-r b { white-space: normal; }
  .hud-tags { white-space: normal; }
}
/* preview-only accent picker */


/* every line of the read-out holds its place: fixed heights, no wrapping, values clipped, so the
   decoding glyphs and the typing never move anything */
.styx-hud > * { flex: none; }
.hud-top { height: 14px; line-height: 14px; overflow: hidden; }
.hud-top span { white-space: nowrap; }
.hud-status { min-width: 8.5em; text-align: right; }
.hud-name { height: 46px; line-height: 46px; margin: 12px 0 4px; }
.hud-desc { height: 4.5em; line-height: 1.5; }
.hud-rows { grid-template-rows: repeat(4, 22px); gap: 8px; }
.hud-r { height: 22px; grid-template-columns: 8.6em minmax(0, 1fr); }
.hud-r span:first-child { white-space: nowrap; }
.hud-r b { white-space: nowrap; overflow: hidden; text-overflow: clip; line-height: 22px; }
.hud-r > div { min-width: 0; }
.hud-energy { display: inline-block; min-width: 3.2em; text-align: right; }
.hud-spec { height: 34px; flex: none; }
.hud-tags { height: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }
@media (max-width: 900px) {
  .hud-r { grid-template-columns: 7.8em minmax(0, 1fr); }
  .hud-r span:first-child { font-size: 9.5px; letter-spacing: .1em; }
  .hud-r b { white-space: nowrap; font-size: 13px; }
  .hud-tags { white-space: nowrap; }
}
.hud-idx { display: none; }
.hud-top { justify-content: flex-start; }
.hud-status { min-width: 0; text-align: left; }

/* panel trimmed to its content (03/10): no empty band at the bottom */
.styx-hud { height: 394px; }
@media (max-width: 900px) { .styx-hud { height: 372px; } }
/* variant: the read-out floats with no glass plate behind it */

/* preview-only panel picker */

.styx-hud { height: 420px; }
@media (max-width: 900px) { .styx-hud { height: 396px; } }
/* the changer fades out before the read-out column, so no cover runs under the text */
@media (min-width: 901px) {
  .styx-stage { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 70px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 70px), transparent 100%); }
}
.styx-lock .tag-v:not(:empty)::before { content: "· "; }
@media (min-width: 901px) {
  .styx-stage { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%); }
}

/* 04/10: tighter screen. ~86% of the viewport so the next block rises into view, content lifted and
   scaled up, the changer tall enough for the full reflection, soft blends into the neighbours. */
.styx { min-height: 86vh; min-height: 86svh; align-items: flex-start; padding: clamp(96px, 9vh, 128px) 0 clamp(24px, 3vh, 40px); }
.styx-title { font-size: clamp(34px, 3.9vw, 62px); }
.styx-sub { font-size: clamp(17px, 1.35vw, 21px); max-width: 42rem; }
.styx-body { margin-top: clamp(8px, 1.6vw, 24px); grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); }
.styx-card { --s: clamp(220px, 21vw, 330px); }
.styx-lock { --s: calc(clamp(220px, 21vw, 330px) * 1.12); }
.styx-stage { height: clamp(400px, 52vh, 560px); perspective-origin: 50% 40%; }
/* cards sit a little above the middle so the reflection below has room inside the stage */
.styx-card { top: 44%; }
.styx-lock { top: 44%; }
.hud-name { font-size: clamp(30px, 2.8vw, 42px); height: 50px; line-height: 50px; }
.hud-desc { font-size: 16.5px; }
.styx-hud { height: 436px; }
/* blends: from the hero's black at the top, into the next section's night at the bottom */
.styx::before, .styx.bg-a::after { content: ""; position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; }
.styx::before { top: 0; height: 180px; background: linear-gradient(180deg, var(--black) 0%, rgba(7,9,13,0) 100%); }
.styx.bg-a::after { bottom: 0; height: 160px; background: linear-gradient(180deg, rgba(11,15,21,0) 0%, var(--night) 100%); }
@media (max-width: 900px) {
  .styx { min-height: 0; }
  .styx-card { --s: 200px; top: 46%; }
  .styx-lock { --s: calc(200px * 1.12); top: 46%; }
  .styx-stage { height: 330px; }
  .styx-hud { height: 404px; }
}
@media (max-width: 900px) { .styx-body { grid-template-columns: minmax(0, 1fr); } }

/* 04/10 b: film-visor type for the read-out (Chakra Petch: technical, square, no slashed zero);
   the description keeps Switzer for reading. Coordinates in the top line and beside the brackets. */
.styx-hud, .styx-lock .tag, .styx-lock .coord, .hud-dial text { font-family: "Chakra Petch", var(--font); font-variant-numeric: tabular-nums; }
.hud-desc { font-family: var(--font); }
.hud-name { font-family: "Chakra Petch", var(--font); font-weight: 600; letter-spacing: .01em; text-transform: uppercase; font-size: clamp(28px, 2.5vw, 38px); }
.hud-top { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.hud-coord { justify-self: end; color: var(--blue-glow); opacity: .85; white-space: nowrap; }
.hud-r span:first-child { font-size: 11px; letter-spacing: .16em; }
.hud-r b { font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.hud-tags, .hud-top { font-size: 11.5px; letter-spacing: .18em; }
.styx-lock .tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.styx-lock .coord { position: absolute; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; color: var(--blue-glow); white-space: nowrap; opacity: 0; transition: opacity .3s ease .3s; }
.styx-lock .c1 { right: -14px; top: -38px; }
.styx-lock .c2 { left: -14px; bottom: -38px; }
.styx.locked .styx-lock .coord { opacity: .9; }



/* sizes: a step back from the last pass, and a screen 10% taller */
.styx { min-height: 85vh; min-height: 85svh; }   /* 12/10: a tenth of the screen less empty floor under the changer */
.styx-title { font-size: clamp(32px, 3.6vw, 56px); }
.styx-card { --s: clamp(210px, 19.5vw, 305px); }
.styx-lock { --s: calc(clamp(210px, 19.5vw, 305px) * 1.12); }
.styx-body { grid-template-columns: minmax(0, 1fr) minmax(330px, 410px); }
.styx-stage { height: clamp(400px, 54vh, 560px); }
.styx-hud { height: 424px; }
@media (max-width: 900px) {
  .styx { min-height: 0; }
  .styx-body { grid-template-columns: minmax(0, 1fr); }
  .styx-card { --s: 200px; }
  .styx-lock { --s: calc(200px * 1.12); }
  .styx-stage { height: 330px; }
  .styx-hud { height: 410px; }
  .hud-coord { display: none; }
}
/* Chakra Petch runs wider than Switzer: give the values room beside the dial */
.hud-grid { grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; }
.hud-dial { width: 84px; height: 84px; }
.hud-r { grid-template-columns: 8em minmax(0, 1fr); }
.hud-r b { font-size: 14px; letter-spacing: .04em; }

/* 04/10 c: the changer runs the full width of the screen, like the record rack of a jukebox, with the
   selected cover in the middle; the read-out becomes the jukebox display, a wide strip under it. */
.styx-body { display: block; margin-top: clamp(4px, 1vw, 16px); }
.styx-stage { width: 100vw; margin-left: calc(50% - 50vw); height: clamp(380px, 47vh, 520px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.styx-card, .styx-lock { top: 46%; }
.styx-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; margin-top: -6px; }
.styx-nav { margin-top: 0; }
.styx-hud { height: 196px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, .9fr); column-gap: clamp(20px, 2.6vw, 40px);
  grid-template-areas: "top top top" "prog prog prog" "name rows spec" "desc rows spec" "desc rows tags"; grid-template-rows: auto auto auto 1fr auto; }
.hud-top { grid-area: top; grid-template-columns: auto 1fr; }
.hud-progress { grid-area: prog; }
.hud-name { grid-area: name; margin: 12px 0 2px; }
.hud-desc { grid-area: desc; height: auto; max-height: 4.5em; margin: 0; }
.hud-grid { grid-area: rows; margin-top: 14px; padding-top: 0; border-top: 0; align-self: start; }
.hud-spec { grid-area: spec; align-self: end; height: 44px; margin: 0; }
.hud-tags { grid-area: tags; margin: 6px 0 0; }
@media (max-width: 900px) {
  .styx-stage { height: 330px; -webkit-mask-image: none; mask-image: none; }
  .styx-panel { grid-template-columns: minmax(0, 1fr); }
  .styx-hud { height: 404px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "prog" "name" "desc" "rows" "spec" "tags"; grid-template-rows: none; }
  .hud-desc { height: 4.5em; }
  .hud-grid { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(127,176,230,.25); }
  .hud-spec { height: 34px; margin-top: 10px; }
}
/* fit title + changer + display in one laptop screen */
@media (min-width: 901px) {
  .styx { padding-top: clamp(88px, 8.5vh, 120px); }
  .styx-title { font-size: clamp(30px, 3.2vw, 52px); margin-bottom: 10px; }
  .styx-sub { font-size: clamp(16px, 1.2vw, 19px); }
  .styx-card { --s: clamp(196px, 17.5vw, 290px); }
  .styx-lock { --s: calc(clamp(196px, 17.5vw, 290px) * 1.12); }
  .styx-stage { height: clamp(340px, 42vh, 500px); }
  .styx-hud { height: 188px; }
}
@media (max-width: 900px) { .hud-r b { font-size: 12.5px; } }
/* the mask clips at the stage box: keep the cover tags inside it */
@media (min-width: 901px) { .styx-card, .styx-lock { top: 52%; } }
@media (max-width: 400px) { .hud-r { grid-template-columns: 6.9em minmax(0, 1fr); } .hud-r span:first-child { letter-spacing: .08em; } }
@media (min-width: 901px) {
  .styx-stage { height: clamp(380px, 46vh, 540px); }
  .styx-card, .styx-lock { top: 50%; }
  .styx-panel { margin-top: -44px; position: relative; z-index: 2; }
}
/* all cover tags on the top line (style, coordinates, hours) so the display strip can sit close below */
.styx-lock .t2 { right: -14px; left: auto; top: -40px; bottom: auto; }
.styx-lock .c1 { right: auto; left: 50%; transform: translateX(-50%); top: -36px; }
.styx-lock .c2 { display: none; }
@media (min-width: 901px) {
  .styx-panel { margin-top: -30px; }
  .styx-hud { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(0, .8fr); }
}
@media (min-width: 901px) and (max-width: 1399px) { .hud-grid { grid-template-columns: minmax(0, 1fr); } .hud-dial { display: none; } }
@media (max-width: 400px) { .hud-r b { font-size: 12px; letter-spacing: .02em; } }
.styx-lock .tag.t2 { right: -14px; left: auto; top: -40px; bottom: auto; }
.styx-lock .coord.c1 { display: none; }
@media (min-width: 901px) { .hud-tags { white-space: normal; height: 2.6em; line-height: 1.3em; } }
@media (max-width: 400px) { .hud-r { grid-template-columns: 6.4em minmax(0, 1fr); } .hud-r b { font-size: 11.5px; } }

/* ---- variant "Visière" (?hud=float), 05/10 ----
   The read-out is a pane of glass laid over the right of the changer, like the visor of a robot in a
   film showing what it has just scanned. One colour for everything it says - the brackets, the tags,
   the meters, the dial - and a slow scan that keeps running down the selected cover. */
.styx.hud-float { --mono: #EAF3FF; --mono-2: rgba(234,243,255,.62); --mono-3: rgba(234,243,255,.22); }
@media (min-width: 901px) {
  .styx.hud-float .styx-body { position: relative; }
  .styx.hud-float .styx-panel { position: absolute; z-index: 300; right: 0; top: 50%; transform: translateY(-50%);
    width: clamp(320px, 27vw, 400px); margin: 0; display: block; }
  .styx.hud-float .styx-hud { height: 430px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "top" "prog" "name" "desc" "rows" "spec" "tags"; padding: 22px 22px 20px; }
  .styx.hud-float .hud-desc { height: 4.5em; }
  .styx.hud-float .hud-grid { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--mono-3); grid-template-columns: minmax(0, 1fr) 84px; }
  .styx.hud-float .hud-dial { display: block; }
  .styx.hud-float .hud-spec { height: 34px; margin-top: 12px; }
  .styx.hud-float .styx-nav { margin-top: 14px; justify-content: flex-end; }
}
.styx.hud-float .styx-hud { background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(234,243,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 30px 60px -30px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); color: var(--mono); }
.styx.hud-float .hud-top, .styx.hud-float .hud-status, .styx.hud-float .hud-coord, .styx.hud-float .hud-r span:first-child,
.styx.hud-float .hud-tags, .styx.hud-float .hud-dial text { color: var(--mono-2); fill: var(--mono-2); }
.styx.hud-float .hud-status { color: var(--mono); }
.styx.hud-float .hud-name, .styx.hud-float .hud-desc, .styx.hud-float .hud-r b { color: var(--mono); }
.styx.hud-float .hud-progress { background: var(--mono-3); }
.styx.hud-float .hud-progress i { background: var(--mono); }
.styx.hud-float .hud-meter i { background: var(--mono-3); }
.styx.hud-float .hud-meter i.on { background: var(--mono); }
.styx.hud-float .hud-spec i { background: linear-gradient(180deg, var(--mono), rgba(234,243,255,.35)); }
.styx.hud-float .hud-dial .ring { stroke: var(--mono-3); }
.styx.hud-float .hud-dial .ticks line { stroke: var(--mono-2); }
.styx.hud-float .hud-dial .hud-arc { stroke: var(--mono); filter: none; }
/* the marks on the cover in the same colour */
.styx.hud-float .styx-lock .br { border-color: var(--mono); }
.styx.hud-float .styx-lock .tag { background: transparent; color: var(--mono); border: 1px solid var(--mono-2); }
.styx.hud-float .styx-lock .cross::before, .styx.hud-float .styx-lock .cross::after { background: var(--mono-2); }
.styx.hud-float .styx-lock .grid { background-image: linear-gradient(rgba(234,243,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(234,243,255,.18) 1px, transparent 1px); }
/* a light scan that keeps passing down the selected cover */
.styx.hud-float .styx-lock .scan { background: linear-gradient(90deg, transparent, rgba(234,243,255,.9), transparent); box-shadow: 0 0 16px rgba(234,243,255,.55); }
.styx.hud-float .styx-lock .scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 46px;
  background: linear-gradient(0deg, rgba(234,243,255,.12), transparent); }
.styx.hud-float.locked .styx-lock .scan { animation: styx-scan-loop 2.8s ease-in-out infinite; }
@keyframes styx-scan-loop { 0% { top: 0; opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { top: calc(100% - 2px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .styx.hud-float.locked .styx-lock .scan { animation: none; opacity: 0; } }
/* Visière, 05/10 b: no arrows, the pane a little lower, no scan line over the cover */
.styx.hud-float .styx-nav { display: none; }
@media (min-width: 901px) { .styx.hud-float .styx-panel { top: calc(50% + 48px); } }
.styx.hud-float .styx-lock .scan, .styx.hud-float.locked .styx-lock .scan, .styx.hud-float.scanning .styx-lock .scan { animation: none; opacity: 0; display: none; }
@media (min-width: 901px) { .styx.hud-float .styx-panel { top: 50%; } }

/* 12/10: the chosen accent of this screen (sky); the rest of the site keeps the sun */
.styx { --sun: #5BC0EB; }

/* 12/10: the cover is laid out at its centre size (JS scales the others down from it), so the cover in the
   slot renders at scale(1) and stays sharp; it used to be stretched 1.12x from a small bitmap. */
.styx-card { width: calc(var(--s) * 1.12); height: calc(var(--s) * 1.12); margin: calc(var(--s) * -.56) 0 0 calc(var(--s) * -.56); }
.styx-card.is-centre { will-change: auto; }

/* 12/10: the 40 s preview. A large white, mostly transparent play sign in the middle of the locked cover
   (no disc, no ring); pressed, it becomes a pause sign. JS places it on the cover's centre. Shown while the
   pointer is over the changer (which also stops it) or while playing; always on touch screens. */
.styx-play { position: absolute; left: 50%; top: 50%; z-index: 210; width: 132px; height: 132px; margin: -66px 0 0 -66px; padding: 0;
  border: 0; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: scale(.9); pointer-events: none; transition: opacity .25s ease, transform .35s var(--ease); }
.styx-play .ico { width: 78px; height: 78px; fill: currentColor; opacity: .5; filter: drop-shadow(0 2px 14px rgba(0,0,0,.35)); transition: opacity .2s ease; }
.styx.locked .styx-stage:hover .styx-play, .styx.playing .styx-play, .styx-play:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: none) { .styx.locked .styx-play { opacity: 1; transform: none; pointer-events: auto; } }
.styx-play:hover .ico { opacity: .78; }
.styx-play:active { transform: scale(.94); }
.styx-play:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: -10px; border-radius: 50%; }
.styx-play .i-pause, .styx.playing .styx-play .i-play { display: none; }
.styx.playing .styx-play .i-pause { display: inline; }
.styx.loading .styx-play .ico { animation: styx-wait 1s ease-in-out infinite alternate; }
@keyframes styx-wait { from { opacity: .5; } to { opacity: .2; } }
@media (max-width: 900px) { .styx-play .ico { width: 62px; height: 62px; } }
@media (prefers-reduced-motion: reduce) { .styx-play, .styx-play .ico { transition: none; } .styx.loading .styx-play .ico { animation: none; } }

/* 14/10, phones (founder): the changer 20% smaller than it was, and the read-out the same window as
   before, only 15% smaller with more room either side. transform keeps it identical in look on every
   engine (zoom shrank only its height on iOS); the negative margin gives back the 15% of its fixed
   404 px height. Its label column is as wide as "MOMENT IDÉAL", which used to run into its value, and
   the hours tag moves under the cover so a long style name no longer runs into it. */
@media (max-width: 900px) {
  .styx-card { --s: 162px; }
  .styx-lock { --s: calc(162px * 1.12); }
  .styx-stage { height: 280px; }
  .styx-play .ico { width: 50px; height: 50px; }
  .styx-hud { transform: scale(.85); transform-origin: 50% 0; margin-bottom: -61px; }
  .hud-r { grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; }
  .styx-lock .tag.t2 { top: auto; bottom: -40px; right: -14px; left: auto; }
}

/* 15/10 (review): a long Ambiance ("Convivial, chaleureux") was cut at the card's edge - every row was
   22 px high and nowrap. The Ambiance value now wraps to a second line and its row grows; the other
   rows keep their height, the label sits on the value's first line. The card's fixed height already
   had the room (checked on all 42 values at 1440 and 390 px, scratchpad hud_check.py). */
.hud-rows { grid-template-rows: none; grid-auto-rows: minmax(22px, auto); }
.hud-r:has(.hud-amb) { height: auto; min-height: 22px; align-items: baseline; }
.hud-r b.hud-amb { white-space: normal; overflow: visible; line-height: 1.3; text-wrap: balance; }