gt-connect {
  display: block;
  --gtc-font: system-ui, sans-serif;
  --gtc-ink: #1c2330;
  --gtc-muted: #68707f;
  --gtc-bg: transparent;
  --gtc-tile-bg: #eceff3;
  --gtc-tile-border: #d9dde3;
  --gtc-tile-on-bg: #454e5e;
  --gtc-tile-on-ink: #fff;
  --gtc-accent: #2456c9;
  --gtc-accent-ink: #fff;
  --gtc-d1: #e7c84c;   
  --gtc-d2: #7fb457;
  --gtc-d3: #6ea2d9;
  --gtc-d4: #a97fc9;   
  --gtc-d-ink: #1c2330;
  --gtc-radius: 8px;
  font-family: var(--gtc-font);
  color: var(--gtc-ink);
  background: var(--gtc-bg);
}

.gtc { max-width: 34rem; margin: 0 auto; }

.gtc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.gtc-title { font-size: 1.25rem; margin: 0; }
.gtc-intro { color: var(--gtc-muted); font-size: .85rem; margin: .15rem 0 .75rem; }
.gtc-mistakes { text-align: right; font-size: .8rem; color: var(--gtc-muted); white-space: nowrap; }
.gtc-dots { display: block; margin-top: .25rem; }
.gtc-dot {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--gtc-tile-border); margin-left: .25rem;
}
.gtc-dot-on { background: var(--gtc-accent); }

.gtc-solved:not(:empty) { display: grid; gap: .4rem; margin-bottom: .4rem; }
.gtc-group {
  border-radius: var(--gtc-radius); padding: .5rem .75rem; text-align: center;
  color: var(--gtc-d-ink);
}
.gtc-d1 { background: var(--gtc-d1); }
.gtc-d2 { background: var(--gtc-d2); }
.gtc-d3 { background: var(--gtc-d3); }
.gtc-d4 { background: var(--gtc-d4); }
.gtc-group-label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.gtc-group-items { font-size: .85rem; }
.gtc-group-revealed { opacity: .75; }

.gtc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.gtc-tile {
  font: inherit; font-size: .78rem; font-weight: 600; line-height: 1.15;
  padding: .9rem .25rem; cursor: pointer; word-break: break-word;
  border: 1px solid var(--gtc-tile-border); border-radius: var(--gtc-radius);
  background: var(--gtc-tile-bg); color: var(--gtc-ink);
  min-height: 3.6rem;
}
.gtc-tile-on { background: var(--gtc-tile-on-bg); color: var(--gtc-tile-on-ink); border-color: var(--gtc-tile-on-bg); }
@media (prefers-reduced-motion: no-preference) {
  .gtc-tile { transition: background .12s, color .12s, transform .12s; }
  .gtc-tile:active { transform: scale(.96); }
  .gtc-group { animation: gtc-lock .3s ease-out backwards; }
  @keyframes gtc-lock {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

.gtc-controls { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; }
.gtc-btn {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: .5rem 1rem; border: 0; border-radius: var(--gtc-radius);
  background: var(--gtc-accent); color: var(--gtc-accent-ink);
}
.gtc-btn:disabled { opacity: .45; cursor: default; }
.gtc-btn:not(:disabled):hover { filter: brightness(1.08); }
.gtc-btn-ghost {
  background: transparent; color: var(--gtc-ink);
  border: 1px solid var(--gtc-tile-border);
}

.gtc-msg { min-height: 1.2em; color: var(--gtc-muted); font-size: .85rem; margin: .5rem 0 0; text-align: center; }

.gtc-result { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .75rem; }