.article{min-width:0}.article>h1{margin-top:32px}.article canvas,.article svg.material{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:640/360;border-radius:8px;background:#f6f6f5}.article [hidden]{display:none!important}label{display:block;font-size:14px;margin:16px 0 6px}textarea{width:100%;font:inherit;font-size:16px;padding:12px;border:1px solid #aaa;border-radius:6px;resize:vertical;box-sizing:border-box}input[type=range]{width:100%;min-height:32px}button{font:inherit;font-size:14px;padding:8px 14px;background:white;border:1px solid #aaa;border-radius:6px;cursor:pointer}.controls{display:flex;align-items:center;gap:16px;margin-top:12px}output,.development-status,.engine-transcript,.caption{font-size:14px;line-height:1.6}.material-control{display:flex;align-items:center;gap:14px;font-size:13px}.material-control label{margin:0}.material-control input{min-width:0}.article a:focus-visible,.article button:focus-visible,.article input:focus-visible,.article textarea:focus-visible{outline:2px solid #3153aa;outline-offset:4px}
/* The character renderer uses square coordinates; preserve its proportions. */
.article canvas.engine-stage{aspect-ratio:1 / 1;max-width:460px;margin-inline:auto}
.tone-picker{border:0;padding:0;margin:28px 0 12px}.tone-picker legend{font-size:15px;margin-bottom:10px}.tone-options{display:flex;gap:8px;flex-wrap:wrap}.tone-options button,.quiet-button{font:inherit;font-size:14px;border:1px solid #ccc;background:white;color:#333;border-radius:20px;padding:8px 14px;cursor:pointer}.tone-options button[aria-pressed=true]{background:#303030;color:white;border-color:#303030}.tone-options button:focus-visible,.quiet-button:focus-visible{outline:2px solid #3165c7;outline-offset:3px}#engine #message{margin-bottom:8px}#engine #message-help{font-size:13px;margin:0 0 20px}#engine .development-status{text-align:center;font-size:14px;color:#666}#engine #tone-reading{font-size:16px;margin-top:16px}#engine .quiet-button{margin-top:16px}#engine .controls{align-items:center}#engine details{margin-top:20px}#engine details p{font-size:14px}#engine #disagree-note{font-size:13px}

/* The interaction is the exhibit; context stays within a readable measure. */
.study-page { padding-top: 48px; }
.study-header { margin: 28px 0; max-width: 65ch; }
.study-header h1 { margin: 0 0 14px; }
.study-header p { margin-bottom: 12px; }
.study-page .controls { flex-wrap: wrap; gap: 10px; }
.study-page button { min-height: 44px; }
.study-page .controls label { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; }
.aniemails-page { width: min(840px, calc(100% - 48px)); }
.message-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; grid-template-areas: "editor stage" "editor result"; margin-top: 16px; align-items: start; }
.message-workspace > div { min-width: 0; }
.message-stage { grid-area: stage; }
.message-editor { grid-area: editor; }
.message-result { grid-area: result; }
.message-editor label { margin-top: 0; }
.message-editor textarea { min-height: 200px; }
.message-stage .engine-stage { width: 100%; }
#engine .message-result .controls { margin: 12px 0; }
#engine .message-result #tone-reading { font-size: 14px; line-height: 1.6; }
.message-stage .development-status { margin: 8px 0; }
.study-page .tone-picker { margin-top: 24px; }
.tone-study .practice { margin-top: 24px; }
.tone-study .feedback { min-height: 0; margin-top: 16px; }
.tone-study .motion-key { margin-bottom: 12px; }
.tone-study #attemptTrail { border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 20px; }
.study-page .footer { font-size: 13px; }
@media (max-width: 640px) {
 .study-page { padding-top: 28px; }
 .study-header { margin: 24px 0; }
 .message-workspace { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "editor" "result"; gap: 12px; }
 .message-editor textarea { min-height: 128px; }
 .message-stage .engine-stage { max-width: 300px; }
 .study-page .tone-picker { margin-top: 18px; }
 .study-page .footer { flex-direction: column; align-items: flex-start; }
}