.tps { display: grid; grid-template-columns: 1.15fr 1.15fr .7fr; border: 1px solid var(--hair); }
.tps-card { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--hair); outline: none; cursor: default; }
.tps-card:first-child { border-left: 0; }
.tps-card:focus-visible { outline: 1px solid var(--ink); outline-offset: -4px; }
.tps-spec { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--hair); }
.tps-marquee .tps-spec { background: #1C0416; color: #F6EEE9; }
.tps-voice .tps-spec { background: #F6EEE9; color: #441C47; }
.tps-sign .tps-spec { background: #E2D6D0; color: #1C0416; }
.tps-aa, .tps-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; transition: opacity .6s var(--ease), transform .6s var(--ease); white-space: nowrap; }
.tps-aa { line-height: 1; }
.tps-marquee .tps-aa { font-family: var(--font-marquee); font-size: clamp(120px, 14vw, 220px); letter-spacing: .04em; padding-left: .04em; }
.tps-marquee .tps-word { font-family: var(--font-marquee); font-size: clamp(34px, 4.6vw, 76px); letter-spacing: .08em; padding-left: .08em; }
.tps-voice .tps-aa { font-family: var(--font-display); font-weight: 500; font-size: clamp(120px, 14vw, 220px); letter-spacing: -.04em; }
.tps-voice .tps-word { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.8vw, 62px); letter-spacing: -.03em; transition: opacity .6s var(--ease), font-weight .3s; }
.tps-word { opacity: 0; transform: translateY(8px); }
.tps-on .tps-word { opacity: 1; transform: none; }
.tps-on .tps-aa { opacity: 0; transform: translateY(-8px); }
.tps-sign .tps-aa { font-family: var(--font-display); font-weight: 300; font-size: clamp(150px, 17vw, 260px); opacity: .3; }
.tps-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tps-line line { stroke: currentColor; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .7; }
.tps-on .tps-line line { animation: tps-draw 1.1s var(--ease) both; }
@keyframes tps-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.tps-sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 38% 90% at 50% 50%, rgba(246,238,233,.08), transparent 70%); transform: translateX(-70%); }
.tps-marquee.tps-on .tps-sweep { opacity: 1; animation: tps-sweep 5s linear infinite; }
@keyframes tps-sweep { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
.tps-meta { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.tps-role { color: var(--grey-1); }
.tps-name { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; }
.tps-desc { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.55; }
.tps-by { margin: auto 0 0; padding-top: 8px; font-family: var(--font-body); font-size: 12px; color: var(--grey-1); }
@media (prefers-reduced-motion: reduce) {
  .tps-aa, .tps-word { transition: opacity .2s; transform: none !important; }
  .tps-sweep { animation: none !important; }
}
@media (max-width: 820px) {
  .tps { grid-template-columns: 1fr; }
  .tps-card { border-left: 0; border-top: 1px solid var(--hair); }
  .tps-card:first-child { border-top: 0; }
  .tps-marquee .tps-aa, .tps-voice .tps-aa { font-size: clamp(110px, 38vw, 180px); }
  .tps-sign .tps-aa { font-size: clamp(130px, 44vw, 210px); }
  .tps-marquee .tps-word { font-size: clamp(36px, 12vw, 64px); }
  .tps-voice .tps-word { font-size: clamp(32px, 10vw, 54px); }
}