phase-preview { display:none; }
@media (max-width:600px) {
  .phase-home-entry .lz-scrub-wrap { display:none; }
  phase-preview { display:block; }
  .phase-preview { margin:0; padding:10px 16px 16px; background:#f4f1e8; border:1px solid #d6cfc1; border-radius:6px; font-family:'IBM Plex Mono',monospace; color:#6b665d; }
  .phase-preview-header { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:26px; margin-bottom:10px; }
  .phase-preview-label { font-size:11px; line-height:1.5; }
  .phase-preview-play { display:grid; place-items:center; flex:0 0 26px; width:26px; height:26px; padding:5px; background:none; color:#746f65; border:0; border-radius:3px; cursor:pointer; }
  .phase-preview-play svg { display:block; width:14px; height:14px; fill:currentColor; }
  .phase-preview-play:hover { background:#ebe5d9; color:#b06a4f; }
  .phase-preview-play:focus-visible { outline:2px solid #b06a4f; outline-offset:3px; }
  .phase-preview-image { position:relative; width:min(100%,228px); aspect-ratio:1; margin:0 auto; border:1px solid #c9c1b0; border-radius:3px; overflow:hidden; background:#ece6da; }
  .phase-preview-image img { display:block; width:100%; height:100%; object-fit:cover; }
  .phase-preview-image img:not([src]) { visibility:hidden; }
  .phase-preview-scale { display:flex; justify-content:space-between; gap:10px; margin-top:12px; font-size:10.5px; }
  .phase-preview-scale output { color:#b06a4f; font-variant-numeric:tabular-nums; }
  .phase-preview-axis { position:relative; height:36px; margin:0 7px; }
  .phase-preview-rule { position:absolute; top:18px; height:1px; left:0; right:0; background:#a39b8c; }
  .phase-preview-ticks span { position:absolute; top:16px; width:1px; height:5px; background:#a39b8c; transform:translateX(-50%); }
  .phase-preview-ticks .phase-preview-major { top:13px; height:11px; }
  .phase-preview-thumb { position:absolute; top:18px; width:10px; height:10px; transform:translate(-50%,-50%); background:#b06a4f; border:2px solid #f4f1e8; border-radius:50%; box-shadow:0 0 0 1px #b06a4f; pointer-events:none; }
  .phase-preview-axis:focus-within .phase-preview-thumb { outline:2px solid #b06a4f; outline-offset:3px; }
  .phase-preview-axis input { position:absolute; top:0; left:-8px; display:block; width:calc(100% + 16px); height:36px; margin:0; opacity:0; cursor:ew-resize; }
  .phase-preview-endpoints { position:relative; height:12px; margin:-3px 7px 0; font-size:9.5px; }
  .phase-preview-endpoints span { position:absolute; transform:translateX(-50%); }
  .phase-preview-readout { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px; margin-top:12px; }
  .phase-preview-classifier { font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
  .phase-preview-result { font-size:14px; font-weight:500; line-height:1.5; }
}
/* Reserve both readout lines on narrow phones so longer class names cannot
   change the card height while it plays. */
@media (max-width:360px) {
  .phase-preview-readout { flex-direction:column; gap:5px; min-height:42px; }
}