.professor-hook { position: relative; box-sizing: border-box; width: 100%; max-width: min(42rem, calc(100vw - 2rem)); margin: 1rem auto; padding: .75rem 1rem; border: 3px solid #192438; border-radius: 1rem; background: #fffdf4; color: #192438; box-shadow: 4px 4px 0 #192438; font-family: 'DM Sans', sans-serif; pointer-events: none; overflow-wrap: anywhere; }
.professor-hook[hidden] { display: none; }
.professor-hook strong { display: block; font-family: 'Lilita One', sans-serif; font-size: 1.05rem; }
.professor-hook p { margin: .3rem 0 0; line-height: 1.4; font-size: .95rem; }
.professor-hook[data-emotion='angry'], .professor-hook[data-emotion='rage'] { background: #ffddd8; }
.professor-hook[data-emotion='happy'], .professor-hook[data-emotion='ecstatic'], .professor-hook[data-emotion='proud'] { background: #def5e5; }
@media (max-width: 600px) { .professor-hook { margin: .75rem auto; } }

.professor-hook-voice { display: block; margin: .5rem auto 1rem; padding: .5rem .8rem; border: 2px solid #192438; border-radius: .65rem; background: #fffdf4; color: #192438; font: inherit; cursor: pointer; }
.professor-hook-voice[hidden] { display: none; }
.professor-hook-voice:focus-visible { outline: 3px solid #192438; outline-offset: 3px; }