.tutorial { margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-bg); }
.tutorial-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; width: 100%; max-width: 330px; margin: 1rem auto; }
.tutorial-tile { padding: 0; aspect-ratio: 1; min-width: 0; border: 2px solid #64748b; border-radius: 6px; background: #16213e; color: #a8b5cc; cursor: pointer; }
.tutorial-tile svg { display: block; width: 100%; height: 100%; }
.tutorial-tile path { stroke: currentColor; stroke-width: 9; fill: none; }
.tutorial-tile circle { fill: currentColor; }
.tutorial-tile.connected { color: #00e5ff; }
.tutorial-tile.server circle { fill: #ffb454; }
.tutorial-tile:disabled { opacity: 1; border-style: dashed; cursor: default; }
.tutorial-tile:focus-visible, .tutorial-actions button:focus-visible { outline: 3px solid #ffb454; outline-offset: 3px; }
.tutorial-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.tutorial-actions button { padding: .6rem .8rem; border: 1px solid #64748b; border-radius: 6px; background: #16213e; color: #e2e8f0; cursor: pointer; }
.tutorial-actions button:disabled { opacity: .45; cursor: default; }
.tutorial-feedback { min-height: 4.5em; }