/* The square instrument. Every size is in container units (cqi), so the
   corners read the same on a phone, a desk screen or a 55-inch wall. */
.sq-instrument {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 41%, rgba(240, 197, 106, 0.05) 52%, transparent 72%),
    radial-gradient(1px 1px at 12% 22%, rgba(247, 241, 223, 0.55), transparent),
    radial-gradient(1px 1px at 86% 14%, rgba(247, 241, 223, 0.45), transparent),
    radial-gradient(1px 1px at 9% 81%, rgba(247, 241, 223, 0.4), transparent),
    radial-gradient(1px 1px at 91% 88%, rgba(247, 241, 223, 0.5), transparent),
    radial-gradient(1px 1px at 22% 93%, rgba(247, 241, 223, 0.35), transparent),
    radial-gradient(1px 1px at 78% 6%, rgba(247, 241, 223, 0.35), transparent),
    #05070d;
  box-shadow: 0 2.5rem 6rem rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(240, 197, 106, 0.18);
  color: #f7f1df;
  overflow: hidden;
}
/* Engraved double rule inside the housing edge, and a ring around the dial. */
.sq-instrument::before {
  content: "";
  position: absolute;
  inset: 2.2cqi;
  border: 1px solid rgba(240, 197, 106, 0.32);
  outline: 1px solid rgba(240, 197, 106, 0.12);
  outline-offset: 0.8cqi;
  pointer-events: none;
}
.sq-instrument::after {
  content: "";
  position: absolute;
  inset: 10.6cqi;
  border-radius: 50%;
  border: 1px solid rgba(240, 197, 106, 0.22);
  pointer-events: none;
}
.sq-dial {
  position: absolute;
  inset: 12cqi;
  width: 76cqi;
  height: 76cqi;
  border: 0;
  border-radius: 50%;
  background: #07090f;
  z-index: 1;
}
.sq-read {
  position: absolute;
  z-index: 2;
  max-width: 26cqi;
  display: grid;
  text-align: left;
  gap: 0.5cqi;
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
}
.sq-read small {
  font-size: max(7px, 1.4cqi);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f0c56a;
}
.sq-read strong {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: max(11px, 2.7cqi);
  font-weight: 400;
  line-height: 1.1;
}
.sq-read .num {
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  letter-spacing: 0.02em;
}
.sq-read span {
  font-size: max(7px, 1.4cqi);
  line-height: 1.35;
  color: #c9c3b4;
}
.sq-tl { left: 5cqi; top: 5cqi; }
.sq-tr { right: 5cqi; top: 5cqi; text-align: right; }
.sq-bl { left: 5cqi; bottom: 5cqi; }
.sq-br { right: 5cqi; bottom: 5cqi; text-align: right; }
.sq-mark {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 4.4cqi;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: max(8px, 1.3cqi);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(240, 197, 106, 0.6);
}
/* "See it at wall size": the housing fills the screen, centred on black. */
.sq-instrument:fullscreen {
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  box-shadow: none;
}
.sq-instrument::backdrop { background: #000; }

.sq-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}
.sq-switch {
  display: inline-flex;
  border: 1px solid rgba(240, 197, 106, 0.35);
}
.sq-switch button,
.sq-wall {
  font: 500 0.75rem/1 var(--font-sans, 'IBM Plex Sans', sans-serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9c3b4;
  background: transparent;
  border: 0;
  padding: 0.85rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
}
.sq-switch button[aria-pressed="true"] {
  background: rgba(240, 197, 106, 0.14);
  color: #ffdf8f;
}
.sq-wall {
  border: 1px solid rgba(240, 197, 106, 0.35);
  color: #f0c56a;
}
.sq-switch button:hover,
.sq-wall:hover { color: #ffdf8f; }
.sq-switch button:focus-visible,
.sq-wall:focus-visible { outline: 2px solid #f0c56a; outline-offset: 2px; }