/* A coherent learning surface. Geometry and reflow remain owned by the readable layout. */
body.hayato-body { background: #f0f4fa; font-family: "Segoe UI", "Yu Gothic UI", Meiryo, system-ui, sans-serif; }
#hayato-root { --bg: #f0f4fa; --panel: #fff; --ink: #1e3048; --line: #cfdaea; --blue: #3454be; --cyan: #3454be; --read-ink: #22354e; --read-muted: #465a73; color: var(--read-ink); }
#hayato-root .hayato-header { background: #fff; border-bottom: 1px solid #d6e0ee; }
#hayato-root .hayato-brand { color: #20395b; }
#hayato-root .hayato-brand>span { letter-spacing: .16em; font-weight: 700; }
#hayato-root .hayato-brand small { font-weight: 400; letter-spacing: .02em; }
#hayato-root .account-entry { background: #f5f8fd; border: 1px solid #cbd8e9; box-shadow: none; }
#hayato-root .new-chat-button { border-color: #b9c9df; background: #fff; }
#hayato-root .learning-desk { border-color: #c9d7ec; border-radius: 18px; box-shadow: 0 4px 16px #253c6210; overflow: hidden; }
#hayato-root .learning-desk > details:first-child > summary { background: #f6f9fe; }
#hayato-root .learning-desk .desk-body { background: #fff; padding-top: 10px; }
#hayato-root .desk-counts>span { background: #edf3fc; border: 1px solid #d5e0f0; border-radius: 8px; padding: 4px 10px; }
#hayato-root .desk-shortcuts { background: #fff; gap: 6px; padding: 8px; }
#hayato-root .desk-shortcuts button { flex-basis: 100px; border: 1px solid transparent; border-radius: 9px; padding: 9px 8px; }
#hayato-root .desk-shortcuts button[data-desk-action="pause_learning"] { flex-basis: 150px; background: #f0f6f3; color: #2b5644; border-color: #c7dbd0; }
#hayato-root .desk-shortcuts button[aria-current="page"] { background: #e9efff; border-color: #bdcbed; color: #263f99; font-weight: 650; }
#hayato-root .work-card { border-color: #cdd9e9; border-radius: 20px; box-shadow: 0 7px 24px #2138590b; }
#hayato-root .work-card h3 { font-size: 22px; font-weight: 700; letter-spacing: .015em; }
#hayato-root .work-card .card-kicker { display: inline-flex; align-items: center; max-width: 100%; margin-bottom: 9px; padding: 3px 9px; border-radius: 6px; background: #edf2fc; color: #3a5278; font-size: 12px; letter-spacing: .025em; }
#hayato-root .work-card .question-prompt { margin-top: 18px; border-left: 4px solid #4c6bc1; }
#hayato-root .voice_answer-card .question-prompt { color: #24364f !important; background: #f1f5fc; border-color: #b8c9e2; font-size: 17px; }
#hayato-root .work-card .answer-textarea { background: #fff; border-color: #a9bcd7; border-radius: 12px; box-shadow: inset 0 2px 4px #233d6310; }
#hayato-root .work-card .answer-textarea:focus { border-color: #3454be; }
#hayato-root .work-card .answer-option { border-color: #c4d2e5; border-radius: 10px; background: #f7f9fd; }
#hayato-root .work-card .answer-option:has(input:checked) { border-color: #4261bb; background: #eaf0ff; box-shadow: 0 0 0 1px #4261bb; }
#hayato-root .work-card input:is([type="radio"],[type="checkbox"]) { accent-color: #3454be; }
#hayato-root .work-card .card-actions { padding-top: 4px; gap: 10px; }
#hayato-root :is(button.primary-button,.send-button) { border-radius: 11px; box-shadow: 0 3px 9px #304ba624; font-weight: 650; }
#hayato-root .work-card .list-item { border-color: #d5dfed; background: #f8fafd; border-radius: 12px; padding: 16px; }
#hayato-root .message.user { background: #e6edf9; border-color: #d1ddef; }
#hayato-root .message.assistant .message-avatar { background: #fff; border-color: #c3d3e8; }
#hayato-root .conversation-history>summary { border-color: #cbd7e7; }
#hayato-root .hayato-composer { border: 1px solid #adbfdb; border-radius: 18px; background: #fff; box-shadow: 0 5px 22px #263e6112; }
#hayato-root .hayato-composer:focus-within { border-color: #506dc3; box-shadow: 0 0 0 3px #dce5fa; }
#hayato-root .composer-actions .voice-start { color: #354f78; background: #edf2fb; }
#hayato-root .welcome-heading h2 { font-size: clamp(30px,3vw,42px); font-weight: 750; letter-spacing: .01em; }
#hayato-root .welcome-heading h2 span { color: #3454be; }
#hayato-root .welcome-pill { padding: 4px 10px; background: #e9f0fb; border: 1px solid #d1def0; border-radius: 8px; }
#hayato-root .welcome-starters button { border-color: #c5d3e7; border-radius: 16px; box-shadow: 0 5px 16px #233c5f08; }
@media (min-width: 851px) {
  #hayato-root:not(.layout-reflow) .hayato-presence { --read-ink: #f0f5ff; --read-muted: #cfdbef; margin: 18px 0; padding: 24px 18px; background: #152d4c; border: 0; border-radius: 18px; box-shadow: 0 8px 22px #16314b16; }
  #hayato-root:not(.layout-reflow) .hayato-presence :is(.presence-identity h1,.presence-intro,.presence-bottom p,.studio-guide b,.studio-guide small,.studio-guide li>span,.presence-caption .eyebrow,.studio-guide>.eyebrow) { color: #e4edfc; }
  #hayato-root:not(.layout-reflow) .hayato-presence .presence-status { color: #c2e9d6; }
  #hayato-root:not(.layout-reflow) .hayato-presence .presence-status::before { background: #a6dfc2; }
  #hayato-root:not(.layout-reflow) .hayato-presence .presence-context { background: #203e60; border-color: #4b6585; box-shadow: none; }
  #hayato-root:not(.layout-reflow) .hayato-presence .presence-context :is(p,small,.eyebrow) { color: #e4edfc; }
  #hayato-root:not(.layout-reflow) .hayato-presence .studio-guide { border-color: #48607e; }
  #hayato-root:not(.layout-reflow) .learning-desk { max-width: 860px; }
  #hayato-root:not(.layout-reflow) .conversation-scroll { padding-inline: max(8px,calc((100% - 860px)/2)); }
  #hayato-root:not(.layout-reflow) .conversation-bottom { width: min(100%,860px); align-self: center; padding-inline: 0; }
}
@media (max-width: 850px) {
  #hayato-root .hayato-presence { background: #e8eff9; border: 1px solid #c8d7eb; border-radius: 12px; margin: 12px 0 0; padding: 12px; }
  #hayato-root .learning-desk { margin-top: 12px; }
}
@media (max-width: 620px) {
  #hayato-root .hayato-header { background: #f0f4fa; }
  #hayato-root .work-card { border-radius: 16px; }
  #hayato-root .work-card h3 { font-size: 20px; }
  #hayato-root .learning-menu > summary { background: #f4f7fc; font-weight: 600; }
  #hayato-root .desk-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #hayato-root .desk-shortcuts button { width: 100%; border-color: #d1ddec; background: #fff; }
}
@media (forced-colors: active) {
  #hayato-root .work-card .answer-option:has(input:checked) { border: 2px solid Highlight; }
  #hayato-root .desk-shortcuts button[aria-current="page"] { border: 2px solid Highlight; }
}
/* One visible step, with an explicit and recoverable stopping point. */
#hayato-root :is(.learning-step-workspace,.learning-pause-workspace) { color: #24364f; min-width: 0; }
#hayato-root :is(.learning-step-workspace,.learning-pause-workspace) :is(p,pre,span) { overflow-wrap: anywhere; }
#hayato-root .learning-step-explanation { white-space: pre-wrap; line-height: 1.85; font-size: 17px; }
#hayato-root .learning-step-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 14px; margin-bottom: 16px; padding: 10px 14px; background: #eef3fb; border: 1px solid #cedbed; border-radius: 10px; font-size: 14px; color: #334e73; }
#hayato-root .learning-step-status span { font-size: 14px; }
#hayato-root :is(.learning-step-example,.learning-step-next,.learning-pause-saved,.learning-pause-evidence) { min-width: 0; margin: 16px 0; padding: 16px; border: 1px solid #c9d7e8; border-radius: 12px; background: #f4f7fc; }
#hayato-root :is(.learning-step-example,.learning-step-next,.learning-pause-saved,.learning-pause-evidence) h4 { margin: 0 0 8px; color: #24364f; font-size: 16px; }
#hayato-root :is(.learning-step-example,.learning-step-next,.learning-pause-saved,.learning-pause-evidence) p { margin: 0; line-height: 1.8; }
#hayato-root .learning-step-example pre { margin: 0; padding: 14px; border: 1px solid #c5d2e3; border-radius: 8px; background: #fff; color: #24364f; white-space: pre-wrap; word-break: normal; font: 16px/1.8 ui-monospace, "Yu Gothic", monospace; }
#hayato-root .learning-step-next { border-left: 4px solid #3b54b8; background: #f1f5ff; }
#hayato-root .learning-step-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
#hayato-root .learning-step-choices button { min-height: 48px; padding: 12px 18px; border: 1px solid #9eb2d0; border-radius: 10px; background: #fff; color: #294369; box-shadow: none; font-size: 16px; white-space: normal; text-align: left; }
#hayato-root .learning-step-choices button:hover:not(:disabled) { background: #eaf0fc; border-color: #5b76ae; }
#hayato-root .learning-step-input { margin: 16px 0; }
#hayato-root .learning-step-input p { white-space: pre-wrap; }
#hayato-root .learning-step-input button { min-height: 44px; padding: 10px 16px; background: #eef3fb; color: #294369; border: 1px solid #b8c9e0; }
#hayato-root .learning-pause-saved { background: #eef7f2; border-color: #adcbb9; }
#hayato-root .learning-pause-saved p + p { margin-top: 6px; }
#hayato-root .learning-pause-topic { font-size: 18px; font-weight: 600; }
#hayato-root .history-next-step { color: #294369; font-size: 16px; line-height: 1.8; }
#hayato-root :is(.learning-step-workspace,.learning-pause-workspace,.voice_answer-card,.clarification-card) :is(button,a,summary):focus-visible { outline: 3px solid #223f9b; outline-offset: 3px; }
@media (max-width: 620px) {
  #hayato-root .learning-step-choices { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  #hayato-root .learning-step-choices button { width: 100%; padding: 12px; }
  #hayato-root :is(.learning-step-example,.learning-step-next,.learning-pause-saved,.learning-pause-evidence) { padding: 13px; }
  #hayato-root .learning-pause-workspace .card-actions { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  #hayato-root .learning-step-choices { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  #hayato-root :is(.learning-step-example,.learning-step-next,.learning-pause-saved,.learning-pause-evidence,.learning-step-status) { border: 1px solid CanvasText; }
  #hayato-root :is(.learning-step-workspace,.learning-pause-workspace) :is(button,a):focus-visible { outline-color: Highlight; }
}