@import url('./punctuation.css');
@import url('./lesson-foundations.css');
@import url('./theme-motion.css');
#practice-answer{width:92px;text-align:center;color:var(--ink)}
.thread-row{display:flex;align-items:center;min-width:0;flex-shrink:0;border-radius:11px}
.thread-row.active{background:#ece3fc;color:#6c42b4}
.thread-row .thread{flex:1;min-width:0;width:auto}
.thread-menu-toggle{display:grid;place-items:center;width:30px;height:30px;margin-right:5px;flex-shrink:0;border-radius:8px;color:#9077a7;transition:background-color .16s ease}
.thread-menu-toggle:hover,.thread-menu-toggle[aria-expanded=true]{background:#e8dff5}
.thread-pin{display:inline-flex;vertical-align:middle;margin-right:5px}
.thread-pin svg{width:12px;height:12px}
.thread-action-menu{position:fixed;z-index:1000;width:210px;padding:6px;background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #302b4014}
.thread-action-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:8px;text-align:left;font-size:13px}
.thread-action-menu button:hover,.thread-action-menu button:focus-visible{background:#f4effb}
.thread-action-menu [data-chat-action=delete]{color:#b23c50}
.chat-action-form h2{margin:0;font-size:22px}
.chat-action-form label{display:block;margin:22px 0 8px}
.chat-action-form input{width:100%;padding:12px;border:1px solid #e6dfef;border-radius:10px;color:var(--ink)}
.chat-action-form p{overflow-wrap:anywhere}
.chat-action-form .actions{justify-content:flex-end}
.chat-action-form .chat-delete-confirm{background:#b23c50;box-shadow:none}
.chat-action-form .chat-delete-confirm:hover{background:#962c3e}
.board .feedback{white-space:pre-line}
.exam-rows{text-align:left;width:min(100%,760px);margin:24px auto}
.exam-rows p{color:var(--ink);font-size:18px}
.board .words{max-width:100%;overflow-wrap:anywhere}
.board .words>span{white-space:normal}
.rule-tabs{max-width:100%}
.rule-tabs button{flex-shrink:0}
.result .row strong{min-width:0;overflow-wrap:anywhere}
.message{min-width:0;flex-shrink:0;overflow-wrap:anywhere;word-break:break-word}
.message p{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.message[data-message-flight]{--chat-flight-background:#f5efff;--chat-flight-color:var(--ink)}
@media(max-width:760px){.exam-rows p{font-size:16px}}

#header .logo{transition:color .16s ease}
#header nav button{isolation:isolate}
#header nav button::before{content:'';position:absolute;top:50%;left:-10px;right:-10px;height:40px;border-radius:10px;background:#f1f1f3;opacity:0;transform:translateY(-50%);transition:opacity .16s ease;pointer-events:none;z-index:-1}
.plan-switch button{transition:background-color .16s ease}
.plan-monthnav button{transition:background-color .16s ease,border-color .16s ease}
.plan-monthnav button:focus-visible{background:#f1f1f3;border-color:#ddd6e8}
@media(hover:hover){.plan-monthnav button:hover{background:#f1f1f3;border-color:#ddd6e8}}
#header .logo:focus-visible{color:var(--purple)}
#header nav button:focus-visible::before{opacity:1}
.plan-switch button:focus-visible{background:#e9e9ed}
@media(hover:hover){#header .logo:hover{color:var(--purple)}#header nav button:hover::before{opacity:1}.plan-switch button:hover{background:#e9e9ed}}

html.chat-entry-transition #app{view-transition-name:chat-page}
html:is(.chat-entry-transition,.chat-content-transition)::view-transition-group(chat-composer){animation-duration:380ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
html:is(.chat-entry-transition,.chat-content-transition)::view-transition-old(root),html:is(.chat-entry-transition,.chat-content-transition)::view-transition-new(root){animation:none}
html.chat-entry-transition::view-transition-old(chat-page){animation:chat-page-out var(--motion-control) var(--motion-easing) both}
html.chat-entry-transition::view-transition-new(chat-page){animation:chat-content-in var(--motion-duration) var(--motion-easing) both}
html:is(.chat-entry-transition,.chat-content-transition)::view-transition-old(chat-composer){animation:chat-page-out var(--motion-control) var(--motion-easing) both}
html:is(.chat-entry-transition,.chat-content-transition)::view-transition-new(chat-composer){animation:chat-page-in var(--motion-duration) var(--motion-easing) both}
html.chat-content-transition #studio-log{view-transition-name:chat-conversation}
html.chat-content-transition .chat-toolbar{view-transition-name:chat-heading}
html.chat-content-transition .thread-list{view-transition-name:chat-threads}
html.chat-content-transition::view-transition-group(chat-conversation),html.chat-content-transition::view-transition-group(chat-heading),html.chat-content-transition::view-transition-group(chat-threads){animation-duration:380ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
html.chat-content-transition::view-transition-old(chat-conversation),html.chat-content-transition::view-transition-old(chat-heading),html.chat-content-transition::view-transition-old(chat-threads){animation:chat-page-out var(--motion-control) var(--motion-easing) both}
html.chat-content-transition::view-transition-new(chat-conversation),html.chat-content-transition::view-transition-new(chat-heading),html.chat-content-transition::view-transition-new(chat-threads){animation:chat-content-in var(--motion-duration) var(--motion-easing) both}
@keyframes chat-page-out{to{opacity:0}}
@keyframes chat-page-in{from{opacity:0}to{opacity:1}}
@keyframes chat-content-in{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}

:where(button,[role="button"]){transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,opacity .16s ease}
form.composer .lesson-voice-button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--purple)}
form.composer .lesson-voice-button:hover{background:var(--wash);border-color:var(--purple)}
form.composer .lesson-voice-button.is-recording{background:var(--wash);border-color:var(--purple)}
.lesson-voice-stop{display:block;width:12px;height:12px;border-radius:3px;background:currentColor}
.lesson-voice-status{margin:8px 0;font-size:12px;line-height:1.6}
.tutor-is-typing::after{content:'';display:inline-block;width:2px;height:1em;margin-left:-2px;transform:translateX(3px);vertical-align:-.12em;background:var(--purple);animation:tutor-caret .7s step-end infinite}
.tutor-is-typing :is(mark,strong,em):empty{padding:0;background:transparent}
@keyframes tutor-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.tutor-is-typing::after{animation:none}}
#app[data-page="lesson"]>.reply{font-size:17px;line-height:1.85;padding:20px 24px;overflow-wrap:anywhere}
@media(max-width:760px){#app[data-page="lesson"]>.reply{font-size:16px;padding:17px 18px}.composer:has(.lesson-voice-button){gap:8px;padding:8px}.composer:has(.lesson-voice-button) input{font-size:16px;min-width:0;padding:10px 4px}}
#app:where([data-page="lesson"],[data-page="practice"],[data-page="lesson04-intro"]){overflow-x:clip}
:where(#app,#modal,#overlay) button:where(:not(:disabled):hover){background-color:var(--wash)}
@media(prefers-reduced-motion:reduce){:where(button,[role="button"]){transition:none}}

html.chat-message-transition::view-transition-group(*){animation-duration:380ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
html.chat-message-transition::view-transition-old(root),html.chat-message-transition::view-transition-new(root){animation:none}
html.chat-content-transition::view-transition-group(chat-outgoing-message){animation-duration:380ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
html:is(.chat-message-transition,.chat-content-transition)::view-transition-old(chat-outgoing-message){animation:chat-page-out var(--motion-control) var(--motion-easing) both}
html:is(.chat-message-transition,.chat-content-transition)::view-transition-new(chat-outgoing-message){animation:chat-page-in var(--motion-duration) var(--motion-easing) both}