.trail-grid{display:grid;gap:.38rem;max-width:540px;aspect-ratio:1;margin:auto;padding:.5rem;border:6px solid #5d482b;border-radius:16px;background:#395d3e}.trail-cell{position:relative;min-width:44px;min-height:44px;border:1px solid #79916a;border-radius:8px;background:linear-gradient(135deg,#e8d7a8,#c7b27f);color:#18382c;font-weight:900}.trail-cell.shown,.trail-cell.entered{background:#f3cb70}.trail-cell.shown::after,.trail-cell.entered::after{content:attr(data-step);display:grid;place-items:center;position:absolute;inset:20%;border-radius:50%;background:#28503c;color:#fff}.trail-cell.start{box-shadow:inset 0 0 0 4px #fff}.trail-cell.finish{border:4px double #8c582d}.trail-cell.wrong{background:#d7a28e}.trail-cell:focus-visible{outline:4px solid #fff;z-index:2}@media(max-width:430px){.trail-grid{gap:.22rem;padding:.3rem}.trail-cell{min-width:0;min-height:44px;padding:0}}