/* Home page: a wall of real test scenes with a working test window in front.
   Always dark; scoped to .hw so the rest of the site keeps its own theme. */

body:has(.hw) {
  background: #08090b;
  color-scheme: dark;
  scrollbar-color: #34363e #08090b;
}

.hw {
  --hw-bg: #08090b;
  --hw-bg-2: #0d0e11;
  --hw-panel: #111216;
  --hw-line: #23252b;
  --hw-line-2: #34363e;
  --hw-text: #f4f4f5;
  --hw-soft: #d4d4da;
  --hw-muted: #a7a7b0;
  --hw-dim: #80808a;
  --hw-raised: #15161b;
  --hw-raised-2: #1c1e24;
  --hw-led: #5cc8ff;
  --hw-led-hi: #86d7ff;
  --hw-led-soft: rgba(92, 200, 255, 0.14);
  --hw-ink: #04121c;
  --hw-good: #4ade80;
  --hw-good-bg: rgba(74, 222, 128, 0.1);
  --hw-bad: #f87171;
  --hw-bad-bg: rgba(248, 113, 113, 0.1);
  --hw-wide: min(1560px, calc(100% - 48px));
  --hw-shell: min(1240px, calc(100% - 48px));
  --bg: var(--hw-bg);
  --bg-card: var(--hw-panel);
  --border: var(--hw-line);
  --text: var(--hw-text);
  --text-muted: var(--hw-muted);
  background: var(--hw-bg);
  color: var(--hw-text);
  font-size: 16px;
}

.hw ::selection {
  background: rgba(92, 200, 255, 0.32);
  color: var(--hw-text);
}

.hw h1,
.hw h2,
.hw h3 {
  color: inherit;
  text-wrap: balance;
}

.hw p,
.hw li,
.hw dd {
  text-wrap: pretty;
}

.hw a {
  text-underline-offset: 3px;
}

/* Numerals in the page's own Inter, bold and tabular, in the accent. The owner dropped the
   dot-matrix digits site-wide on 22 Oct 2026. */
.hw-led {
  font-family: inherit;
  font-weight: 800;
  color: var(--hw-led);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ── Buttons ── */
.hw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.hw-btn[hidden] {
  display: none;
}
.hw-btn-primary {
  background: var(--hw-led);
  color: var(--hw-ink);
  box-shadow: 0 12px 30px -16px rgba(92, 200, 255, 0.75);
}
.hw-btn-primary:hover {
  background: var(--hw-led-hi);
  transform: translateY(-1px);
}
.hw-btn-line {
  background: transparent;
  border-color: var(--hw-line-2);
  color: var(--hw-text);
}
.hw-btn-line:hover {
  border-color: #5b5e68;
  background: rgba(255, 255, 255, 0.04);
}
.hw-btn-raised {
  border-color: var(--hw-line-2);
  background: var(--hw-raised-2);
  color: var(--hw-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hw-btn-raised:hover {
  border-color: rgba(92, 200, 255, 0.55);
  background: #22252c;
}
.hw-btn-sm {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  font-size: 0.88rem;
}
.hw-btn:active {
  transform: translateY(0);
}
.hw a:focus-visible,
.hw button:focus-visible,
.hw summary:focus-visible {
  outline: 2px solid var(--hw-led);
  outline-offset: 3px;
}

/* ── Navigation (the site-wide `nav` rule must not reach these blocks) ── */
.hw nav {
  position: static;
  display: block;
  height: auto;
  border-bottom: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hw .hw-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--hw-line);
  background: var(--hw-bg);
}
.hw-nav-in {
  display: flex;
  align-items: center;
  gap: 14px;
  width: var(--hw-wide);
  height: 64px;
  margin: 0 auto;
}
.hw-burger {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hw-line-2);
  border-radius: 11px;
  background: transparent;
  color: var(--hw-text);
  cursor: pointer;
}
.hw-burger:hover {
  border-color: #5b5e68;
}
.hw-logo {
  color: var(--hw-text);
}
.hw-nav-links {
  display: flex;
  gap: 26px;
  margin-left: 22px;
}
.hw-nav-links a,
.hw-nav-signin {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.hw-nav-links a {
  color: var(--hw-muted);
}
.hw-nav-links a:hover {
  color: var(--hw-text);
}
.hw-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.hw-nav-right a {
  white-space: nowrap;
}
.hw-nav-signin {
  color: var(--hw-text);
}

/* ── Hero: the wall and the test window ── */
.hw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--hw-line);
}
.hw-wall {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  align-content: start;
  gap: 6px;
  padding: 6px;
}
.hw-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 5 / 3;
  border-radius: 8px;
  background: #15161a;
}
.hw-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) brightness(0.58);
  transition: filter 0.6s ease;
}
.hw-tile.is-good::after,
.hw-tile.is-bad::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hw-good);
  box-shadow: 0 0 12px var(--hw-good);
}
.hw-tile.is-bad::after {
  background: var(--hw-bad);
  box-shadow: 0 0 12px var(--hw-bad);
}
.hw-tile.is-lit {
  z-index: 1;
  outline: 2px solid var(--hw-led);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(92, 200, 255, 0.2), 0 0 50px rgba(92, 200, 255, 0.35);
}
.hw-tile.is-lit img {
  filter: none;
}
.hw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 9, 11, 0.96) 0%, rgba(8, 9, 11, 0.9) 24%, rgba(8, 9, 11, 0.3) 46%, rgba(8, 9, 11, 0.3) 100%),
    linear-gradient(180deg, rgba(8, 9, 11, 0.25) 0%, rgba(8, 9, 11, 0) 22%, rgba(8, 9, 11, 0) 70%, rgba(8, 9, 11, 0.9) 100%);
}
.hw-hero-in {
  display: grid;
  grid-template-columns: minmax(300px, 0.74fr) minmax(0, 1.6fr) minmax(262px, 0.52fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head window feed"
    "foot window feed";
  align-items: start;
  align-content: center;
  gap: 24px 28px;
  width: var(--hw-wide);
  min-height: calc(100svh - 64px);
  margin: 0 auto;
  padding: 44px 0 52px;
}
.hw-intro-head {
  grid-area: head;
  padding-top: 6px;
}
.hw-intro-foot {
  grid-area: foot;
}
.hw-window {
  grid-area: window;
}
.hw-feed {
  grid-area: feed;
}
.hw h1 {
  margin: 0 0 18px;
  font-size: clamp(2.3rem, 3vw, 3.4rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.04em;
}
.hw-lede {
  max-width: 46ch;
  margin: 0;
  color: var(--hw-soft);
  font-size: 1.04rem;
  line-height: 1.65;
}
.hw-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hw-small {
  margin-top: 14px;
  color: var(--hw-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* One gantry strip instead of a pile of stat boxes. */
.hw-gantry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 420px;
  margin: 28px 0 0;
  overflow: hidden;
  border: 1px solid #2b2d34;
  border-radius: 14px;
  background-color: #050506;
}
.hw-gantry div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px;
}
.hw-gantry div:nth-child(odd) {
  border-right: 1px solid #23252b;
}
.hw-gantry div:nth-child(-n + 2) {
  border-bottom: 1px solid #23252b;
}
.hw-gantry dd {
  order: -1;
  margin: 0;
  font-size: 2rem;
  line-height: 1;
}
.hw-gantry dt {
  margin-top: 6px;
  color: var(--hw-muted);
  font-size: 0.8rem;
}

/* The test window */
.hw-window {
  overflow: hidden;
  border: 1px solid var(--hw-line-2);
  border-radius: 22px;
  background: #0c0d10;
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  scroll-margin-top: 84px;
}
.hw-win-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hw-line);
}
.hw-win-tag {
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--hw-led);
  color: var(--hw-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hw-win-title {
  margin: 0;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hw-win-timer {
  min-width: 80px;
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--hw-line-2);
  border-radius: 10px;
  font-size: 1.05rem;
  text-align: center;
}
.hw-mode {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hw-line-2);
  border-radius: 11px;
}
.hw-mode button {
  min-width: 42px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hw-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.hw-mode button:hover {
  color: var(--hw-text);
}
.hw-mode button[aria-pressed="true"] {
  background: var(--hw-led-soft);
  color: var(--hw-led-hi);
  box-shadow: inset 0 0 0 1px rgba(92, 200, 255, 0.5);
}
.hw-steps {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 12px 18px 0;
  list-style: none;
}
.hw-steps li {
  flex: 1;
}
.hw-steps button {
  display: block;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hw-steps button span {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #2a2c33;
  transition: background-color 0.2s ease;
}
.hw-steps button:hover span {
  background: #4a4d56;
}
.hw-steps button.is-good span {
  background: var(--hw-good);
}
.hw-steps button.is-bad span {
  background: var(--hw-bad);
}
.hw-steps button[aria-current="step"] span {
  background: var(--hw-led);
  box-shadow: 0 0 12px rgba(92, 200, 255, 0.5);
}
.hw-win-body {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 20px;
  padding: 14px 18px 20px;
}
.hw-win-body[hidden] {
  display: none;
}
/* The scene is shown whole: the question often depends on its edges. */
.hw-shot {
  position: relative;
  align-self: start;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 5 / 3;
  border-radius: 14px;
  background: #15161a;
}
.hw-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hw-q {
  min-width: 0;
}
.hw-q-text {
  margin: 0 0 8px;
  font-size: clamp(1.08rem, 1.3vw, 1.3rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.02em;
}
.hw-q-hint {
  margin: 0 0 12px;
  color: var(--hw-dim);
  font-size: 0.84rem;
  transition: color 0.2s ease;
}
.hw-q-hint.is-alert {
  color: var(--hw-led);
}
.hw-statements {
  display: grid;
  gap: 8px;
}
.hw-st {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--hw-line-2);
  border-radius: 13px;
  background: #14151a;
  color: var(--hw-text);
  font: inherit;
  font-size: 0.91rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hw-st:hover:not(:disabled) {
  border-color: #575a63;
}
.hw-st-box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid #5f626b;
  border-radius: 7px;
  color: transparent;
  font-size: 0.72rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hw-st[aria-pressed="true"] {
  border-color: rgba(92, 200, 255, 0.7);
  background: rgba(92, 200, 255, 0.08);
}
.hw-st[aria-pressed="true"] .hw-st-box {
  border-color: var(--hw-led);
  background: var(--hw-led);
  color: var(--hw-ink);
}
.hw-st:disabled {
  cursor: default;
}
.hw-st.is-right {
  border-color: rgba(74, 222, 128, 0.6);
  background: var(--hw-good-bg);
}
.hw-st.is-missed {
  border-color: rgba(74, 222, 128, 0.6);
  border-style: dashed;
}
.hw-st.is-wrong {
  border-color: rgba(248, 113, 113, 0.65);
  background: var(--hw-bad-bg);
}
.hw-st.is-quiet {
  opacity: 0.6;
}
.hw-st-verdict {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hw-st.is-right .hw-st-verdict,
.hw-st.is-missed .hw-st-verdict {
  color: var(--hw-good);
}
.hw-st.is-wrong .hw-st-verdict {
  color: var(--hw-bad);
}
.hw-why {
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--hw-line);
  border-radius: 14px;
  background: #121318;
}
.hw-why[hidden] {
  display: none;
}
.hw-why p {
  margin: 0;
  color: var(--hw-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}
.hw-why strong {
  color: var(--hw-led);
}
.hw-win-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.hw-summary {
  padding: 34px 28px 32px;
}
.hw-summary[hidden] {
  display: none;
}
.hw-summary-score {
  margin: 0 0 14px;
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  line-height: 1;
}
.hw-summary h3 {
  margin: 0 0 10px;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.hw-summary p {
  max-width: 52ch;
  margin: 0 0 22px;
  color: var(--hw-soft);
  line-height: 1.6;
}
.hw-noscript {
  padding: 0 18px 18px;
  color: var(--hw-soft);
}
.hw-noscript a {
  color: var(--hw-led);
}

/* The session feed: white event cards carry the real scene they are about. */
.hw-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--hw-line);
  border-radius: 18px;
  background: rgba(12, 13, 16, 0.94);
}
.hw-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--hw-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hw-feed-head .hw-led {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: none;
}
.hw-pinned {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--hw-led-soft);
  color: #d3efff;
  font-size: 0.82rem;
  line-height: 1.45;
}
.hw-pinned i {
  margin-top: 3px;
  color: var(--hw-led);
}
.hw-pinned p {
  margin: 0;
}
.hw-feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-feed-list .hw-ev:nth-child(n + 5) {
  display: none;
}
.hw-ev {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--hw-line);
  border-radius: 12px;
  background: var(--hw-raised);
  color: var(--hw-text);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
}
.hw-feed-list .hw-ev.is-new:first-child {
  border-color: rgba(92, 200, 255, 0.45);
}
.hw-ev.is-new {
  animation: hwEvIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hw-ev-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 34px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--hw-raised-2);
  color: var(--hw-muted);
  font-size: 0.85rem;
}
.hw-ev-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hw-ev-art.is-done {
  background: var(--hw-led-soft);
  color: var(--hw-led);
}
.hw-ev-badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--hw-good);
  color: #052e14;
  font-size: 0.55rem;
  box-shadow: 0 0 0 2px var(--hw-raised);
}
.hw-ev-badge.is-bad {
  background: var(--hw-bad);
  color: #3b0808;
}
.hw-ev-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.hw-ev-time {
  color: var(--hw-dim);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@keyframes hwEvIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Sections ── */
.hw-sec {
  padding: clamp(72px, 9vw, 120px) 0;
  border-bottom: 1px solid var(--hw-line);
  scroll-margin-top: 64px;
}
.hw-shell {
  width: var(--hw-shell);
  margin: 0 auto;
}
.hw-sec h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.hw-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 24px 64px;
  margin-bottom: 44px;
}
.hw-head p {
  max-width: 54ch;
  margin: 0;
  color: var(--hw-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}
.hw-head.is-stacked {
  display: block;
}
.hw-head.is-stacked p {
  margin-top: 18px;
}
.hw-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 56px;
}

/* Library */
.hw-lib-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.hw-test {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  aspect-ratio: 4 / 3.5;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--hw-line);
  border-radius: 16px;
  background: #111214;
  color: #ffffff;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.hw-test > img,
.hw-test-mosaic {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.hw-test > img {
  object-fit: cover;
  filter: brightness(0.6) saturate(0.9);
  transition: transform 0.5s ease, filter 0.3s ease;
}
.hw-test-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: #050506;
}
.hw-test-mosaic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6) saturate(0.9);
}
.hw-test::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.84) 100%);
}
.hw-test:hover {
  border-color: rgba(92, 200, 255, 0.55);
}
.hw-test:hover > img {
  transform: scale(1.04);
  filter: brightness(0.74);
}
.hw-test-led {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 1.7rem;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.hw-test-tag {
  position: absolute;
  top: 12px;
  left: 14px;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--hw-led);
  font-size: 0.78rem;
  font-weight: 800;
}
.hw-test-name {
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.hw-test-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 6px;
  color: #d4d4d8;
  font-size: 0.78rem;
}
.hw-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.72rem;
  font-weight: 700;
}
.hw-chip.is-free {
  background: var(--hw-led);
  color: var(--hw-ink);
}
/* Test 12 asks rule questions; it shows the test's own rules graphic, kept darker than a scene. */
.hw-test.is-rules > img {
  filter: brightness(0.42) saturate(0.85);
}
.hw-test.is-free {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
  padding: 22px;
  border-color: rgba(92, 200, 255, 0.5);
}
.hw-test.is-free .hw-test-led {
  top: 18px;
  left: 22px;
  font-size: 3rem;
}
.hw-test.is-free .hw-test-name {
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}
.hw-test.is-free .hw-test-meta {
  font-size: 0.9rem;
}

/* Signs */
.hw-signs .hw-head {
  margin-bottom: 36px;
}
.hw-signs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  align-items: stretch;
  gap: 20px;
}
.hw-scene {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hw-line);
  border-radius: 20px;
  background: #15161a;
}
.hw-scene img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}
.hw-marker {
  position: absolute;
  left: 68.2%;
  top: 15.6%;
  width: 9.4%;
  height: 23.6%;
  border: 2px solid var(--hw-led);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(92, 200, 255, 0.2), 0 0 30px rgba(92, 200, 255, 0.35);
  animation: hwPulse 2.4s ease-in-out 2;
}
.hw-marker-label {
  position: absolute;
  left: -2px;
  bottom: calc(100% + 6px);
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--hw-led);
  color: var(--hw-ink);
  font-size: 0.8rem;
  font-weight: 800;
}
.hw-scene figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #e4e4e7;
  font-size: 0.78rem;
}
@keyframes hwPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(92, 200, 255, 0.2), 0 0 30px rgba(92, 200, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(92, 200, 255, 0.1), 0 0 48px rgba(92, 200, 255, 0.55);
  }
}
.hw-signcard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--hw-line-2);
  border-radius: 20px;
  background: var(--hw-panel);
  color: var(--hw-text);
}
.hw-signcard-top {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.hw-signcard-top img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.hw-code {
  margin: 0;
  color: var(--hw-led);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.hw-signcard h3 {
  margin: 2px 0 0;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.hw-signcard dl {
  display: grid;
  gap: 12px;
  margin: 0;
}
.hw-signcard dl div {
  padding-top: 12px;
  border-top: 1px solid var(--hw-line);
}
.hw-signcard dt {
  margin-bottom: 4px;
  color: var(--hw-muted);
  font-size: 0.82rem;
  font-weight: 800;
}
.hw-signcard dd {
  margin: 0;
  color: var(--hw-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}
.hw-signcard .is-mistake dt i {
  margin-right: 4px;
  color: var(--hw-led);
}
.hw-review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid #2b2d34;
  border-radius: 18px;
  background-color: #050506;
}
.hw-review p {
  margin: 0;
  color: var(--hw-muted);
  font-size: 0.92rem;
}
.hw-days {
  display: flex;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-days li {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 8px;
  color: var(--hw-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.hw-days li + li {
  border-left: 1px solid #2b2d34;
}
.hw-days .hw-led {
  font-size: 1.8rem;
  line-height: 1;
}
.hw-lessons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0 30px;
}
.hw-lessons a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--hw-line);
  border-radius: 12px;
  background: var(--hw-bg-2);
  color: var(--hw-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hw-lessons a:hover {
  border-color: rgba(92, 200, 255, 0.5);
  background: #121318;
}
.hw-lessons .hw-led {
  flex: none;
  min-width: 2ch;
  font-size: 1.15rem;
}

/* Words */
.hw-words-copy {
  max-width: 48ch;
  margin: 18px 0 26px;
  color: var(--hw-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}
.hw-word-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-word-grid li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--hw-line);
  border-radius: 16px;
  background: var(--hw-panel);
}
.hw-da {
  color: var(--hw-led);
  font-size: 0.82rem;
  font-weight: 700;
}
.hw-word-grid strong {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Two wordings: one real scene with a working switch. */
.hw-wording-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--hw-line-2);
  border-radius: 24px;
  background: var(--hw-panel);
  color: var(--hw-text);
}
.hw-wording-shot {
  margin: 0;
  min-height: 100%;
}
.hw-wording-shot img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.hw-wording-body {
  padding: clamp(24px, 3.4vw, 44px);
}
.hw-wording-copy {
  max-width: 48ch;
  margin: 14px 0 22px;
  color: var(--hw-muted);
  line-height: 1.6;
}
.hw-wording-q {
  margin: 22px 0 14px;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.hw-wording-answers {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-wording-answers li {
  padding: 11px 14px;
  border: 1px solid var(--hw-line-2);
  border-radius: 12px;
  background: var(--hw-raised);
  color: var(--hw-soft);
  font-size: 0.93rem;
  line-height: 1.45;
}
.hw-wording-q,
.hw-wording-answers li {
  transition: opacity 0.2s ease;
}
.hw-wording-card.is-swapping .hw-wording-q,
.hw-wording-card.is-swapping .hw-wording-answers li {
  opacity: 0;
}

/* Test day */
.hw-testday-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px 56px;
}
.hw-testday-in p {
  max-width: 52ch;
  margin: 18px 0 0;
  color: var(--hw-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}
.hw-guides {
  display: grid;
  gap: 10px;
}
.hw-guides a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 14px 20px;
  border: 1px solid var(--hw-line-2);
  border-radius: 14px;
  background: var(--hw-raised);
  color: var(--hw-text);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hw-guides a:hover {
  border-color: rgba(92, 200, 255, 0.55);
  background: var(--hw-raised-2);
}
.hw-guides a i {
  color: var(--hw-led);
  transition: transform 0.15s ease;
}
.hw-guides a:hover i {
  transform: translateX(3px);
}

/* Access */
.hw-access-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 14px;
}
.hw-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--hw-line);
  border-radius: 22px;
  background: var(--hw-panel);
}
.hw-plan.is-full {
  border-color: rgba(92, 200, 255, 0.45);
  background: linear-gradient(180deg, rgba(92, 200, 255, 0.08), rgba(92, 200, 255, 0) 55%), var(--hw-panel);
}
.hw-plan h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.hw-plan ul {
  display: grid;
  gap: 10px;
  margin: 4px 0 10px;
  padding: 0;
  list-style: none;
}
.hw-plan li {
  display: flex;
  gap: 10px;
  color: var(--hw-soft);
  line-height: 1.5;
}
.hw-plan li i {
  margin-top: 6px;
  color: var(--hw-led);
  font-size: 0.78rem;
}
.hw-plan .hw-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* FAQ */
.hw-faq-more {
  margin: 18px 0 0;
}
.hw-faq-more a {
  color: var(--hw-led);
  font-weight: 700;
}
.hw-faq-list details {
  border-bottom: 1px solid var(--hw-line);
}
.hw-faq-list details:first-child {
  border-top: 1px solid var(--hw-line);
}
.hw-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px 20px 0;
  font-size: 1.05rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.hw-faq-list summary::-webkit-details-marker {
  display: none;
}
.hw-faq-list summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 2px solid var(--hw-muted);
  border-bottom: 2px solid var(--hw-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.15s ease;
}
.hw-faq-list details[open] > summary::after {
  margin-top: 4px;
  transform: rotate(225deg);
  border-color: var(--hw-led);
}
.hw-faq-list summary:hover::after {
  border-color: var(--hw-text);
}
.hw-faq-list details p {
  max-width: 62ch;
  margin: 0;
  padding: 0 0 22px;
  color: var(--hw-muted);
  line-height: 1.7;
}
.hw-faq-list details a {
  color: var(--hw-text);
}

/* Close and footer */
.hw-close {
  border-bottom: 0;
}
.hw-close-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.hw-close h2 {
  max-width: 16ch;
}
.hw-close .hw-cta {
  justify-content: center;
}
.hw-footer {
  padding: 36px 0 44px;
  border-top: 1px solid var(--hw-line);
}
.hw-footer-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.hw-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.hw-footer nav a {
  color: var(--hw-muted);
  font-size: 0.9rem;
  text-decoration: none;
}
.hw-footer nav a:hover {
  color: var(--hw-text);
}
.hw-footer p {
  margin: 0;
  color: var(--hw-dim);
  font-size: 0.82rem;
}

/* Wide screens: the question runs across the window, the whole scene sits beside the statements,
   and the explanation spans the window once revealed. */
@media (min-width: 1281px) {
  .hw-win-body {
    grid-template-areas:
      "text text"
      "hint hint"
      "shot list"
      "why why"
      "actions actions";
    row-gap: 0;
  }
  .hw-q {
    display: contents;
  }
  .hw-q-text {
    grid-area: text;
  }
  .hw-q-hint {
    grid-area: hint;
  }
  .hw-shot {
    grid-area: shot;
  }
  .hw-statements {
    grid-area: list;
    align-self: start;
  }
  .hw-why {
    grid-area: why;
  }
  .hw-win-actions {
    grid-area: actions;
  }
}
/* The guide runs from 1024px, so the window takes the wide arrangement there too. */
.hw.has-guide .hw-win-body {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas:
    "text text"
    "hint hint"
    "shot list"
    "why why"
    "actions actions";
  row-gap: 0;
}
.hw.has-guide .hw-q {
  display: contents;
}
.hw.has-guide .hw-q-text {
  grid-area: text;
}
.hw.has-guide .hw-q-hint {
  grid-area: hint;
}
.hw.has-guide .hw-shot {
  grid-area: shot;
}
.hw.has-guide .hw-statements {
  grid-area: list;
  align-self: start;
}
.hw.has-guide .hw-why {
  grid-area: why;
}
.hw.has-guide .hw-win-actions {
  grid-area: actions;
}

/* ── Soft reveal ──
   Each block comes in once, as it first enters view: a dotted edge wipes down it while it fades
   up, like a matrix sign brightening. html.hw-anim is set in <head> only when motion is welcome. */
@property --hw-wipe {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 130%;
}
@property --hw-dot {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}
html.hw-anim .hw [data-reveal]:not(.is-in),
html.hw-anim .hw-tile:not(.is-in) {
  opacity: 0;
}
html.hw-anim .hw [data-reveal].is-in:not(.is-done) {
  -webkit-mask-image:
    linear-gradient(180deg, #000 calc(var(--hw-wipe) - 34%), transparent var(--hw-wipe)),
    radial-gradient(circle, #000 calc(var(--hw-dot) - 12%), transparent var(--hw-dot));
  mask-image:
    linear-gradient(180deg, #000 calc(var(--hw-wipe) - 34%), transparent var(--hw-wipe)),
    radial-gradient(circle, #000 calc(var(--hw-dot) - 12%), transparent var(--hw-dot));
  -webkit-mask-size: 100% 100%, 10px 10px;
  mask-size: 100% 100%, 10px 10px;
  -webkit-mask-repeat: no-repeat, repeat;
  mask-repeat: no-repeat, repeat;
  animation: hwReveal 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--hw-in-delay, 0ms) both;
}
/* The window also moves in the tour, so it reveals without a movement of its own. */
html.hw-anim .hw .hw-window[data-reveal].is-in:not(.is-done) {
  animation-name: hwRevealFlat;
}
@keyframes hwReveal {
  from {
    --hw-wipe: -6%;
    --hw-dot: 0%;
    opacity: 0;
    transform: translateY(14px);
  }
  35% {
    opacity: 1;
  }
  to {
    --hw-wipe: 134%;
    --hw-dot: 80%;
    opacity: 1;
    transform: none;
  }
}
@keyframes hwRevealFlat {
  from {
    --hw-wipe: -6%;
    --hw-dot: 0%;
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  to {
    --hw-wipe: 134%;
    --hw-dot: 80%;
    opacity: 1;
  }
}
/* Wall tiles light up softly, outward from the test window. */
html.hw-anim .hw-tile.is-in {
  animation: hwTileIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--hw-in-delay, 0ms) both;
}
.hw-wall.is-settled .hw-tile.is-in {
  animation: none;
}
@keyframes hwTileIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Guide (≥1024px, motion welcome; opened with "How it works") ──
   The real window lifts out of the wall into the middle of the screen and plays one example
   question step by step. Nothing happens until the visitor asks for it. */
.hw-caption,
.hw-rail,
.hw-demo,
.hw-demo-title,
.hw-guide-open {
  display: none;
}
.hw.has-guide .hw-guide-open {
  display: inline-flex;
}
html.hw-guide-lock {
  overflow: hidden;
}
html:has(.hw) {
  scrollbar-gutter: stable;
}
.hw.has-guide :is(.hw-intro-head, .hw-intro-foot, .hw-feed) {
  transition: opacity 0.45s ease;
}
.hw.is-guide :is(.hw-intro-head, .hw-intro-foot, .hw-feed) {
  opacity: 0;
}
.hw-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(rgba(8, 9, 11, 0.9) 1.1px, transparent 1.5px) 0 0 / 4px 4px,
    rgba(8, 9, 11, 0.6);
  transition: opacity 0.5s ease;
}
.hw.is-guide .hw-veil {
  opacity: 1;
  pointer-events: auto;
}
.hw-window {
  transform-origin: 0 0;
}
.hw.has-guide .hw-window {
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.hw.is-guide .hw-window {
  z-index: 2;
}
.hw-window.is-moving {
  will-change: transform;
}
/* The button that opens the guide, in the window bar and in the how-it-works section. */
.hw-guide-open {
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(92, 200, 255, 0.45);
  border-radius: 10px;
  background: var(--hw-led-soft);
  color: var(--hw-led-hi);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.hw-guide-open:hover {
  border-color: var(--hw-led);
  background: rgba(92, 200, 255, 0.22);
}
.hw-guide-open.is-hint {
  animation: hwHint 2.2s ease-in-out 1.2s 2;
}
.hw-win-bar .hw-guide-open {
  margin-left: auto;
}
.hw.is-guide .hw-win-bar .hw-guide-open {
  visibility: hidden;
}
.hw-win-bar .hw-guide-open + .hw-win-timer {
  margin-left: 0;
}
.hw-how .hw-guide-open {
  min-height: 44px;
  margin-top: 18px;
  padding: 0 16px;
  font-size: 0.92rem;
}
@keyframes hwHint {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(92, 200, 255, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(92, 200, 255, 0.18);
  }
}
.hw-window :is(.hw-win-bar, .hw-steps, .hw-shot, .hw-q-text, .hw-q-hint, .hw-statements, .hw-why, .hw-win-actions) {
  transition: opacity 0.45s ease, outline-color 0.45s ease, color 0.2s ease;
}
.hw-window .is-tour-dim {
  opacity: 0.38;
}
.hw-window .is-tour-focus {
  border-radius: 14px;
  outline: 2px solid var(--hw-led);
  outline-offset: 5px;
}

/* The demonstration: during the tour the window plays one example question step by step. */
.hw-window.is-demo [data-hw-body],
.hw-window.is-demo .hw-summary,
.hw-window.is-demo .hw-win-tag,
.hw-window.is-demo #hwWinTitle {
  display: none;
}
.hw-window.is-demo .hw-demo {
  display: grid;
  animation: hwFadeIn 0.45s ease both;
}
.hw-window.is-demo .hw-demo-title {
  display: inline;
}
.hw-demo .hw-shot {
  position: relative;
}
.hw-demo .hw-st {
  cursor: default;
}
.hw-demo .hw-st,
.hw-demo .hw-st-box,
.hw-demo .hw-st-verdict {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, opacity 0.35s ease;
}
.hw-demo .hw-st-verdict {
  opacity: 0;
}
.hw-demo.is-statements .hw-st.is-pick {
  border-color: rgba(92, 200, 255, 0.7);
  background: rgba(92, 200, 255, 0.08);
  transition-delay: calc(0.25s + var(--pick, 0) * 0.5s);
}
.hw-demo.is-statements .hw-st.is-pick .hw-st-box {
  border-color: var(--hw-led);
  background: var(--hw-led);
  color: var(--hw-ink);
  transition-delay: calc(0.25s + var(--pick, 0) * 0.5s);
}
.hw-demo.is-check .hw-st.is-pick.is-correct {
  border-color: rgba(74, 222, 128, 0.6);
  background: var(--hw-good-bg);
  transition-delay: 0s;
}
.hw-demo.is-check .hw-st.is-correct:not(.is-pick) {
  border-color: rgba(74, 222, 128, 0.6);
  border-style: dashed;
}
.hw-demo.is-check .hw-st.is-pick:not(.is-correct) {
  border-color: rgba(248, 113, 113, 0.65);
  background: var(--hw-bad-bg);
  transition-delay: 0s;
}
.hw-demo.is-check .hw-st:not(.is-pick):not(.is-correct) {
  opacity: 0.6;
}
.hw-demo.is-check .hw-st-verdict {
  opacity: 1;
  transition-delay: 0.3s;
}
.hw-demo .hw-st.is-correct .hw-st-verdict {
  color: var(--hw-good);
}
.hw-demo .hw-st.is-pick:not(.is-correct) .hw-st-verdict {
  color: var(--hw-bad);
}
.hw-demo .hw-why {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hw-demo.is-why .hw-why {
  opacity: 1;
  transform: none;
}
.hw-demo .hw-win-actions {
  align-items: center;
}
.hw-demo .hw-demo-next,
.hw-demo .hw-demo-mode {
  display: none;
}
.hw-demo.is-check .hw-demo-check {
  display: none;
}
.hw-demo.is-check .hw-demo-next {
  display: inline-flex;
  animation: hwFadeIn 0.4s ease both;
}
.hw-demo.is-words .hw-demo-mode {
  display: inline-flex;
  margin-left: auto;
  animation: hwFadeIn 0.4s ease both;
}
.hw-demo-mode span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--hw-muted);
  font-size: 0.82rem;
  font-weight: 700;
}
.hw-demo-mode .is-plain {
  background: var(--hw-led-soft);
  color: var(--hw-led-hi);
  box-shadow: inset 0 0 0 1px rgba(92, 200, 255, 0.5);
}
.hw-demo-plain {
  display: none;
}
.hw-demo.is-words .hw-demo-original {
  display: none;
}
.hw-demo.is-words .hw-demo-plain {
  display: inline;
  animation: hwFadeIn 0.5s ease both;
}
.hw-demo .hw-marker,
.hw-demo-sign {
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hw-demo .hw-marker {
  animation: none;
}
.hw-demo.is-scene .hw-marker {
  opacity: 1;
  animation: hwPulse 2.4s ease-in-out 0.3s 2;
}
.hw-demo-sign {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--hw-line-2);
  border-radius: 12px;
  background: rgba(12, 13, 16, 0.92);
  color: var(--hw-text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  transform: translateY(8px);
}
.hw-demo-sign img {
  flex: none;
  width: 34px;
  height: 34px;
}
.hw-demo-sign strong {
  margin-right: 4px;
  color: var(--hw-led);
}
.hw-demo.is-scene .hw-demo-sign {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s;
}
@keyframes hwFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Caption card and progress rail */
.hw.is-guide .hw-caption {
  position: absolute;
  z-index: 2;
  display: block;
  padding: 24px 24px 18px;
  border: 1px solid var(--hw-line-2);
  border-radius: 20px;
  background: rgba(12, 13, 16, 0.94);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-50% + 12px));
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
}
.hw.is-guide .hw-caption.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hw-caption-body {
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hw-caption-body.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}
.hw-caption-body.is-entering {
  animation: hwCaptionIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hwCaptionIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hw-caption .hw-how-n {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 18px;
  font-size: 2.6rem;
  line-height: 1;
}
.hw-how-of {
  color: var(--hw-dim);
  font-size: 1.05rem;
  text-shadow: none;
}
.hw-caption h3 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.hw-caption p {
  margin: 0;
  color: var(--hw-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}
.hw-caption p + p {
  margin-top: 14px;
}
.hw-caption-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hw-line);
}
.hw-caption-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hw-line-2);
  border-radius: 11px;
  background: var(--hw-raised-2);
  color: var(--hw-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hw-caption-btn:hover {
  border-color: rgba(92, 200, 255, 0.55);
}
.hw-caption-keys {
  color: var(--hw-dim);
  font-size: 0.8rem;
}
.hw-caption-keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--hw-line-2);
  border-radius: 6px;
  color: var(--hw-soft);
  font: inherit;
  font-size: 0.78rem;
}
.hw-caption-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-left: auto;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: var(--hw-led);
  color: var(--hw-ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.hw-caption-next:hover {
  background: var(--hw-led-hi);
}
.hw-caption-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--hw-line-2);
  border-radius: 10px;
  background: transparent;
  color: var(--hw-muted);
  cursor: pointer;
}
.hw-caption-close:hover {
  border-color: rgba(92, 200, 255, 0.55);
  color: var(--hw-text);
}
.hw-caption-end {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(92, 200, 255, 0.35);
  border-radius: 12px;
  background: var(--hw-led-soft);
  color: var(--hw-text);
  font-size: 0.9rem;
  line-height: 1.5;
}
.hw.is-guide .hw-rail {
  position: absolute;
  right: 16px;
  z-index: 2;
  display: grid;
  gap: 4px;
  transform: translateY(-50%);
  animation: hwFadeIn 0.5s ease both;
}
.hw-rail button {
  display: block;
  width: 15px;
  height: 32px;
  padding: 0 6px;
  border: 0;
  background: none;
  cursor: pointer;
}
.hw-rail button span {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--hw-line-2);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.hw-rail button:hover span,
.hw-rail button.is-done span {
  background: #5b5e68;
}
.hw-rail button.is-on span {
  background: var(--hw-led);
  box-shadow: 0 0 10px rgba(92, 200, 255, 0.6);
}

/* How the test window works: the tour's captions as a plain list. It is the tour on phones and
   with reduced motion, and the screen-reader text for the tour on wide screens. */
.hw-how-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-how-list li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 26px 0 30px;
  border-top: 1px solid var(--hw-line);
}
.hw-how-list .hw-how-n {
  font-size: 1.9rem;
  line-height: 1;
}
.hw-how-list h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.hw-how-list p {
  margin: 0;
  color: var(--hw-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.hw-how-list p + p {
  margin-top: 12px;
}
.hw-how-keys {
  color: var(--hw-dim);
  font-size: 0.88rem;
}
.hw-how-keys i {
  margin-right: 6px;
  color: var(--hw-led);
}
.hw-how-verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hw-how-verdicts span {
  padding: 4px 9px;
  border: 1px solid;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hw-how-verdicts .is-right {
  border-color: rgba(74, 222, 128, 0.6);
  background: var(--hw-good-bg);
  color: var(--hw-good);
}
.hw-how-verdicts .is-missed {
  border-color: rgba(74, 222, 128, 0.6);
  border-style: dashed;
  color: var(--hw-good);
}
.hw-how-verdicts .is-wrong {
  border-color: rgba(248, 113, 113, 0.65);
  background: var(--hw-bad-bg);
  color: var(--hw-bad);
}
.hw-how-sign {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hw-how-sign img {
  flex: none;
  width: 40px;
  height: 40px;
}
.hw-how-sign strong {
  margin-right: 4px;
  color: var(--hw-led);
}
.hw-how-term span {
  display: block;
  margin-bottom: 2px;
  color: var(--hw-led);
  font-size: 0.85rem;
  font-weight: 700;
}
.hw-how-list .hw-how-term,
.hw-caption .hw-how-term {
  color: var(--hw-text);
  font-weight: 700;
}
/* Keyboard tips only where there is a keyboard to speak of. */
@media (hover: none) {
  .hw-how-keys,
  .hw-ev.is-keys {
    display: none;
  }
}
.hw-close h2 .hw-led {
  font-size: 1.12em;
  letter-spacing: 0;
}

/* The wall is only placed around the window on wide screens; elsewhere it stays a quiet backdrop. */
@media (max-width: 1280px) {
  .hw-tile.is-lit {
    outline: 0;
    box-shadow: none;
  }
  .hw-tile.is-lit img {
    filter: grayscale(0.3) brightness(0.58);
  }
  .hw-tile.is-good::after,
  .hw-tile.is-bad::after {
    display: none;
  }
}

/* ── Responsive ── */
@media (max-width: 1280px) {
  .hw-hero-in {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head window"
      "foot window"
      "feed window";
  }
  .hw-win-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1100px) {
  .hw-nav-links {
    gap: 18px;
    margin-left: 10px;
  }
  .hw-lib-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hw-test.is-free {
    grid-row: span 1;
  }
  .hw-test.is-free .hw-test-led {
    font-size: 2.2rem;
  }
  .hw-test.is-free .hw-test-name {
    font-size: 1.25rem;
  }
}
@media (max-width: 980px) {
  .hw-nav-links {
    display: none;
  }
  .hw-hero::before {
    background: linear-gradient(180deg, rgba(8, 9, 11, 0.86) 0%, rgba(8, 9, 11, 0.9) 40%, rgba(8, 9, 11, 0.96) 100%);
  }
  .hw-hero-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "head"
      "window"
      "foot"
      "feed";
    min-height: 0;
    padding: 32px 0 44px;
  }
  .hw-gantry {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
  }
  .hw-gantry div:nth-child(odd) {
    border-right: 0;
  }
  .hw-gantry div:nth-child(-n + 2) {
    border-bottom: 0;
  }
  .hw-gantry div + div {
    border-left: 1px solid #23252b;
  }
  .hw-head,
  .hw-split,
  .hw-testday-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .hw-split,
  .hw-testday-in {
    gap: 32px;
  }
  .hw-signs-grid,
  .hw-access-grid,
  .hw-wording-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .hw-wording-shot img {
    min-height: 0;
    aspect-ratio: 5 / 3;
  }
  .hw-lessons,
  .hw-how-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .hw {
    --hw-wide: calc(100% - 28px);
    --hw-shell: calc(100% - 28px);
  }
  .hw-wall {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 4px;
    padding: 4px;
  }
  .hw-hero-in {
    gap: 18px;
    padding-top: 24px;
  }
  .hw h1 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 8.6vw, 2.5rem);
  }
  .hw-lede {
    font-size: 0.98rem;
  }
  .hw-gantry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hw-gantry div + div {
    border-left: 0;
  }
  .hw-gantry div:nth-child(odd) {
    border-right: 1px solid #23252b;
  }
  .hw-gantry div:nth-child(-n + 2) {
    border-bottom: 1px solid #23252b;
  }
  .hw-win-bar {
    padding: 12px 14px;
  }
  .hw-win-timer {
    min-width: 72px;
    font-size: 0.95rem;
  }
  .hw-steps {
    padding: 10px 14px 0;
  }
  .hw-win-body {
    padding: 12px 14px 16px;
  }
  .hw-st {
    padding: 11px 12px;
    font-size: 0.9rem;
  }
  .hw-feed-list .hw-ev:nth-child(n + 4) {
    display: none;
  }
  .hw-lib-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(210px, 66%);
    margin-right: -14px;
    padding: 0 14px 8px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-color: #34363e transparent;
    scrollbar-width: thin;
  }
  .hw-test,
  .hw-test.is-free {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3.4;
    padding: 14px;
    scroll-snap-align: start;
  }
  .hw-test.is-free .hw-test-led {
    top: 10px;
    left: 14px;
    font-size: 1.7rem;
  }
  .hw-test.is-free .hw-test-name {
    font-size: 1.15rem;
  }
  .hw-lessons a:nth-child(n + 7) {
    display: none;
  }
  .hw-lessons,
  .hw-word-grid,
  .hw-how-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .hw-how-list li {
    padding: 20px 0 22px;
  }
  .hw-review {
    padding: 14px;
  }
  .hw-days li {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
    font-size: 0.72rem;
  }
  .hw-days .hw-led {
    font-size: 1.5rem;
  }
  .hw-signcard-top {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .hw-signcard-top img {
    width: 52px;
    height: 52px;
  }
  .hw-plan {
    padding: 22px;
  }
  .hw-btn {
    width: 100%;
  }
  .hw-btn-sm,
  .hw-win-actions .hw-btn {
    width: auto;
  }
}
/* Phone pass (22 Oct 2026). The owner found the home page awkward on a phone: twelve screens of
   scrolling, the start button below the sample, a desktop-only session feed. On phones the start
   button comes first, then the sample, then the facts; explanations are shorter and sections closer. */
@media (max-width: 700px) {
  .hw-hero-in {
    grid-template-areas:
      "head"
      "cta"
      "small"
      "window"
      "facts";
    gap: 14px;
    padding: 18px 0 32px;
  }
  .hw-intro-foot {
    display: contents;
  }
  .hw-intro-foot > .hw-cta {
    grid-area: cta;
    margin: 0;
  }
  .hw-intro-foot > .hw-small {
    grid-area: small;
    margin: -4px 0 0;
  }
  .hw-intro-foot > .hw-gantry {
    grid-area: facts;
    margin: 0;
  }
  .hw-intro-head h1 {
    margin-bottom: 8px;
  }
  .hw-feed {
    display: none;
  }
  .hw-sec {
    padding: 40px 0;
  }
  .hw-head p {
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .hw-sec h2 {
    font-size: clamp(1.75rem, 7.6vw, 2.1rem);
  }
  .hw-head {
    margin-bottom: 22px;
  }
  .hw-how-list li {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 10px;
    padding: 14px 0 16px;
  }
  .hw-how-list .hw-how-n {
    font-size: 1.35rem;
  }
  .hw-how-list h3 {
    margin-bottom: 4px;
    font-size: 1.02rem;
  }
  .hw-how-list p {
    display: none;
  }
  .hw-how-list h3 {
    margin: 0;
  }
  .hw-how-keys,
  .hw-how-verdicts,
  .hw-how-sign,
  .hw-how-term {
    display: none;
  }
  .hw-signcard dl div:not(:first-child) {
    display: none;
  }
  .hw-lessons a:nth-child(n + 5) {
    display: none;
  }
  .hw-word-grid li:nth-child(n + 4) {
    display: none;
  }
  .hw-wording,
  .hw-review,
  .hw-lessons {
    display: none;
  }
  .hw-signs .hw-cta {
    margin-top: 20px;
  }
  .hw-word-grid li:nth-child(n + 3) {
    display: none;
  }
  .hw-plan {
    padding: 18px;
  }
  .hw-plan li {
    font-size: 0.92rem;
  }
}
/* Second phone pass (22 Oct 2026): the owner still found it long. On phones the headings carry
   the sections; ledes and extra examples stay for bigger screens, and sections sit closer. */
@media (max-width: 700px) {
  .hw-sec {
    padding: 32px 0;
  }
  .hw-head {
    margin-bottom: 14px;
  }
  .hw-how .hw-head p,
  .hw-library .hw-head p,
  .hw-signs .hw-head p,
  .hw-testday-in > div:first-child p,
  .hw-words-copy,
  .hw-word-grid {
    display: none;
  }
  .hw-words .hw-split,
  .hw-testday-in {
    gap: 14px;
  }
  .hw-how-list li {
    padding: 10px 0 12px;
  }
}
@media (max-width: 480px) {
  .hw-nav-join {
    display: none;
  }
  .hw-win-tag {
    display: none;
  }
  .hw-win-bar {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .hw-win-timer {
    min-width: 0;
    padding: 6px 8px;
  }
  .hw-nav-signin {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--hw-line-2);
    border-radius: 11px;
  }
}
@media (max-width: 380px) {
  .hw-win-title {
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hw *,
  .hw *::before,
  .hw *::after {
    transition-duration: 0.01ms !important;
  }
  .hw-marker {
    animation: none;
  }
  .hw-ev.is-new {
    animation: hwEvFade 0.3s ease both;
  }
  .hw-btn-primary:hover,
  .hw-test:hover > img {
    transform: none;
  }
}
@keyframes hwEvFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media print {
  html.hw-anim .hw [data-reveal]:not(.is-in),
  html.hw-anim .hw-tile:not(.is-in) {
    opacity: 1;
  }
  html.hw-anim .hw [data-reveal].is-in,
  html.hw-anim .hw-tile.is-in {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hw.is-guide .hw-caption,
  .hw.is-guide .hw-rail,
  .hw-guide-open {
    display: none;
  }
}