.ebr-hero {
  --ink: #1d2733; --muted: #5b6573; --given: #E4E9F0; --wrong: #C0304F; --wrong-bg: #F6D3DB;
  --ok: #1f8a4c; --ok-bg: #E3F3E8; --line: #b9c2cf;
  display: flex; align-items: center; justify-content: center; gap: 2.2rem;
  max-width: 900px; margin: 0 auto; color: var(--ink); font-family: inherit;
}
.ebr-hero__land { position: relative; flex: 1 1 56%; min-width: 0; }
.ebr-hero__pic { position: relative; }
.ebr-hero__land img { display: block; width: 100%; height: auto; }
.ebr-hero__overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ebr-hero__ghost { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 2.5; stroke-dasharray: 7 8; stroke-linecap: round; }
.ebr-hero__trail { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s; }
.ebr-hero__dot { fill: #fff; stroke: var(--ink); stroke-width: 3; transition: fill .3s; }
.ebr-hero__halo { fill: rgba(255,255,255,.28); }
.ebr-hero.is-solved .ebr-hero__dot { fill: var(--ok); stroke: #fff; }
.ebr-hero__cbar { display: flex; align-items: center; gap: .45rem; justify-content: center; font-size: .78rem; color: var(--muted); margin-top: .9rem; }
.ebr-hero__cbl { color: var(--ink); }
.ebr-hero__cbbar { position: relative; width: 42%; height: 6px; border-radius: 3px; }
.ebr-hero__cbm { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; background: var(--ink); transition: left .28s ease; }

.ebr-hero__side { flex: 0 1 300px; display: flex; flex-direction: column; align-items: stretch; gap: .7rem; }
.ebr-hero__board {
  display: grid; grid-template-columns: repeat(9, 1fr); aspect-ratio: 1; width: 100%;
  font-variant-numeric: tabular-nums; font-size: clamp(.8rem, 2.6vw, 1.05rem); line-height: 1;
  border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); transition: box-shadow .5s;
}
.ebr-hero__cell {
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .4s, color .4s;
}
.ebr-hero__cell:nth-child(9n) { border-right: 1.5px solid var(--ink); }
.ebr-hero__cell:nth-child(n+73) { border-bottom: 1.5px solid var(--ink); }
.ebr-hero__cell.bR { border-right: 1.5px solid var(--ink); }
.ebr-hero__cell.bB { border-bottom: 1.5px solid var(--ink); }
.ebr-hero__cell.is-given { background: var(--given); }
.ebr-hero__cell.is-wrong { color: var(--wrong); background: var(--wrong-bg); font-weight: 700; }
.ebr-hero__cell.is-flash { animation: ebr-flash .6s ease-out; }
@keyframes ebr-flash { 0% { background: #FFE58A; transform: scale(1.12); } 100% { transform: none; } }
.ebr-hero.is-solved .ebr-hero__cell:not(.is-given) { background: var(--ok-bg); }
.ebr-hero.is-solved .ebr-hero__board { box-shadow: 0 0 0 3px rgba(31,138,76,.25); }

.ebr-hero__read { display: flex; justify-content: space-between; gap: .8rem; font-size: .92rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ebr-hero__wrong { color: var(--wrong); font-weight: 600; }
.ebr-hero.is-solved .ebr-hero__wrong { color: var(--ok); }
.ebr-hero__ctl { display: flex; align-items: center; gap: .6rem; }
.ebr-hero__ctl input[type=range] { flex: 1; accent-color: var(--ink); margin: 0; }
.ebr-hero__play { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; position: relative; flex: none; }
.ebr-hero__play::before { content: ""; position: absolute; left: 11px; top: 9px; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ebr-hero__play.is-playing::before { left: 10px; top: 10px; width: 3px; height: 10px; border: 0; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.ebr-hero__play:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

@media (max-width: 640px) {
  .ebr-hero { flex-direction: column; gap: 1rem; }
  .ebr-hero__land { width: 100%; }
  .ebr-hero__side { width: min(320px, 92%); flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ebr-hero * { transition: none !important; animation: none !important; }
}
.ebr-hero__lbl { font-size: 34px; font-weight: 600; font-family: inherit; fill: var(--ink); paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 7px; stroke-linejoin: round; }
.ebr-hero.is-debug .ebr-hero__dot { fill: none; stroke: #00ffff; stroke-width: 3; }
.ebr-hero.is-debug .ebr-hero__halo, .ebr-hero.is-debug .ebr-hero__trail, .ebr-hero.is-debug .ebr-hero__ghost, .ebr-hero.is-debug .ebr-hero__lbl { display: none; }

.ebr-hero__play.is-done::before { left: 8px; top: 8px; width: 14px; height: 14px; border: 2px solid #fff;
  border-right-color: transparent; border-radius: 50%; box-sizing: border-box; }
.ebr-hero__play.is-done::after { content: ""; position: absolute; left: 17px; top: 6px; border-left: 5px solid #fff;
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; transform: rotate(35deg); }