/* Sprech-Studio layout. Shares the app tokens; practice stays in the 760px column. */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--s-3); }
.sp-card { display: flex; flex-direction: column; gap: var(--s-1); min-height: 8.5rem; color: inherit; text-decoration: none; transition: border-color var(--t-fast) var(--ease); }
.sp-card:hover { border-color: var(--ink); }
.sp-card > .icon { color: var(--muted); }
.sp-card b { margin-top: var(--s-2); font-family: var(--font-display); font-size: var(--fs-22); font-weight: 700; line-height: var(--lh-tight); }
.sp-card small { color: var(--muted); font-size: var(--fs-14); }
.sp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.sp-stats .stat__label { display: inline-flex; align-items: center; gap: var(--s-1); }
.sp-kicker { font-family: var(--font-display); font-size: var(--fs-16); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); }
.sp-step { margin: 0; font-family: var(--font-display); font-size: var(--fs-28); font-weight: 700; line-height: var(--lh-tight); }
.sp-mouth { width: min(100%, 280px); height: auto; margin-top: var(--s-3); }
.sp-mouth__face { fill: var(--paper-sunk); stroke: var(--line-strong); stroke-width: 2; }
.sp-mouth__palate, .sp-mouth__tongue { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.sp-mouth__lip { fill: var(--signal); }
.sp-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s-3); }
.sp-word { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.sp-word b { font-family: var(--font-display); font-size: var(--fs-28); font-weight: 700; line-height: 1; }
.sp-interim { min-height: var(--s-6); margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--fs-18); }
.sp-hint { margin-top: var(--s-3); font-size: var(--fs-14); color: var(--muted); }
.sp-help { display: flex; align-items: center; gap: var(--s-3); min-height: var(--touch); margin-top: var(--s-3); }
.sp-checks { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.sp-check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--touch); }
.sp-chart { width: 100%; height: auto; margin-top: var(--s-3); }
.sp-chart__model { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.sp-chart__you { fill: none; stroke: var(--signal); stroke-width: 2.5; }
.sp-syll { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; font-family: var(--font-display); font-size: var(--fs-28); font-weight: 700; line-height: 1; }
.sp-syll__stress { color: var(--signal-text); }
.sp-log { display: flex; flex-direction: column; gap: var(--s-3); }
.sp-log p { margin: 0; }
.sp-phone { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.sp-phone__head { display: flex; align-items: center; gap: var(--s-4); }
.sp-phone__orb { flex: none; width: var(--s-8); height: var(--s-8); border-radius: 50%; background: var(--paper-sunk); border: var(--bw-strong) solid var(--line-strong); }
.sp-line[hidden], .sp-help[hidden] { display: none; }
.sp-known { background: color-mix(in srgb, var(--signal) 28%, transparent); border-radius: var(--r-control); padding: 0 var(--s-1); }
@media (max-width: 640px) {
  .sp-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-phone__orb { transition: none; }
}