.sbp-letters-hero{padding-bottom:2.5rem}.sbp-letters-note{margin:1.4rem 0 0;padding:.85rem 1.1rem;max-width:34rem;font-size:1rem;line-height:1.5;color:var(--ink-2);border:1.5px dashed var(--ink-hair);border-radius:14px}.sbp-letters-board{padding:0 0 3.5rem}.sbp-letters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.9rem}.sbp-letter-card{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-height:9.75rem;padding:.9rem .5rem .75rem;font-family:var(--sbp-body);text-align:center;color:var(--ink);background:var(--paper-3);border:2px solid var(--ink-line);border-radius:12px;cursor:pointer;transition:transform .14s var(--sbp-ease),box-shadow .14s var(--sbp-ease),background-color .14s var(--sbp-ease);box-shadow:3px 4px 0 -1px var(--paper-shade),3px 4px 0 .5px var(--ink-hair)}.sbp-letter-card:hover{transform:translate(-1px,-2px)}.sbp-letter-card:active,.sbp-letter-card.is-active{transform:translate(2px,3px);background:var(--wash);box-shadow:1px 1px 0 -1px var(--paper-shade),0 3px 6px -4px #784c0a66}.sbp-letter-card:focus-visible{outline:3px solid var(--honey-lip);outline-offset:3px}.sbp-letter-pair{display:flex;gap:.25rem;font-family:var(--sbp-display);font-size:1.5rem;line-height:1;color:var(--rose-ink)}.sbp-letter-card img{width:3.5rem;height:3.5rem;object-fit:contain}.sbp-letter-word{font-size:.95rem;font-weight:750}.sbp-letter-sound{font-size:.82rem;font-weight:650;color:var(--ink-2)}.sbp-letters-table-section{padding:1rem 0 4rem}.sbp-letters-table-wrap{margin-top:1.6rem;overflow-x:auto}.sbp-letters-table{width:100%;min-width:26rem;border-collapse:collapse;font-size:1.02rem}.sbp-letters-table caption{margin-bottom:.9rem;text-align:left;color:var(--ink-2)}.sbp-letters-table th,.sbp-letters-table td{padding:.55rem .9rem;text-align:left;border-bottom:1.5px solid var(--ink-hair)}.sbp-letters-table th{font-family:var(--sbp-display);font-weight:400;font-size:1.1rem}.sbp-letters-table-note{margin-top:1.4rem;max-width:40rem}.sbp-letters-bridge-icon{width:2.4rem;height:2.4rem;margin:0 auto .6rem;color:var(--honey-lip)}.sbp-letters-bridge-points{display:grid;gap:.6rem;max-width:34rem;margin:1.3rem auto 1.8rem;padding:0;list-style:none;text-align:left;font-size:1.05rem;line-height:1.5;color:var(--ink-2)}.sbp-letters-bridge-points li{padding-left:1.3rem;position:relative}.sbp-letters-bridge-points li:before{content:"•";position:absolute;left:.2rem;color:var(--honey-lip)}@media(min-width:640px){.sbp-letters-grid{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}}
