@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {


  html:not(.pw-live) .home-top { position: relative; }
  html:not(.pw-live) .works {
    min-height: 0;
    padding-top: var(--s-3);
  }
  html:not(.pw-live) .ring {
    position: static;
    top: 0;
    height: auto;
    background: none;
  }
  html:not(.pw-live) .ring-probe { display: none; }
  html:not(.pw-live) .ring-list {
    position: static;
    display: grid;
    row-gap: var(--s-3);
    column-gap: var(--gutter, var(--s-2));
    padding-inline: var(--margin);
  }
  html:not(.pw-live) .ring-item { position: relative; }
  html:not(.pw-live) .ring-item .ring-link {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    z-index: auto;
    transform: none;
  }
  html:not(.pw-live) .ring-item .ring-label {
    position: static;
    width: auto;
    max-width: none;
    margin-top: var(--s-1);
    transform: none;
    opacity: 1;
    text-align: left;
    font-size: var(--t-label);
  }
  html:not(.pw-live) .home-foot {
    position: relative;
    margin-top: var(--s-4);
  }
  @media (orientation: landscape) {
    html:not(.pw-live) .ring-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .ring-item .ring-n     { display: inline; margin: 0 1ch 0 0; }
  .ring-item .ring-title { display: inline; }
  .ring-item .ring-meta  { display: block; color: var(--ink-soft); }

  html.has-js:not(.pw-live):not(.pw-off):not(.ring-failed) .works { visibility: hidden; }



  html.pw-live { --pw-top: 0px; }
  @media (max-width: 372px) {
    html.pw-live { --pw-top: 1.75rem; }
  }
  html.pw-live body.home {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
  html.pw-live .works {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding-top: calc(var(--ring-chrome-top) + var(--pw-top));
    overflow: hidden;
  }
  html.pw-live .ring {
    --pw-gap: 12px;
    --pw-lab: calc(var(--ring-label-gap) + 3 * 1.4 * var(--t-label) + 6px);
    --pw-foot: 3rem;
    --pw-air: 1.5rem;
    --pw-zone: calc(100vh - var(--ring-chrome-top) - var(--pw-top) - var(--pw-lab) - var(--pw-foot) - 2 * var(--pw-air));
    --pw-xr: calc(50vw - var(--margin));
    --F-l: min(2 * var(--pw-xr) * 0.86, (var(--pw-zone) / 2 - var(--pw-gap)) / 1.315);
    top: var(--pw-air);
    height: var(--pw-zone);
  }
  @supports (height: 1svh) {
    html.pw-live .ring {
      --pw-zone: calc(100svh - var(--ring-chrome-top) - var(--pw-top) - var(--pw-lab) - var(--pw-foot) - 2 * var(--pw-air));
    }
  }
  html.pw-live .ring-probe {
    left: auto;
    right: 100%;
    width: calc((0.8135 * var(--F-l) + var(--pw-gap)) / 0.314159);
    height: calc(var(--pw-zone) / 2);
    margin-left: var(--pw-xr);
  }

  html.pw-live .ring-label {
    font-size: var(--t-label);
    text-align: center;
  }

  html.pw-live .ring-sliders { display: none; }



  html.pw-side .ring {
    --pw-air: 0.5rem;
    --F-l: min(var(--pw-zone), ((50vw - var(--margin)) - var(--pw-gap)) / 1.315);
    margin-inline: var(--margin);
  }
  html.pw-side .ring-probe {
    height: calc(var(--F-l) / 2);
  }
}

@media (min-width: 761px) and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .home-top { grid-template-columns: minmax(0, 1fr) auto; }
  .home-mid { display: none; }
  .home-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--s-1);
    align-items: last baseline;
  }
  .foot-line,
  .foot-hint  { display: none; }
  .foot-place { grid-column: 1; grid-row: 1; }
  .foot-reach { grid-column: 2; grid-row: 1; }
}