:root {
  color-scheme: light;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ink: #322338;
  --muted: #6e5a69;
  --line: #eaded8;
  --orange: #f39661;
  --orange-deep: #6e321f;
  --peach: #ffeadc;
  --lavender: #f0e8ff;
  --paper: #fffdfa;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); min-height: 100dvh; background: radial-gradient(ellipse at 85% 2%, #f2e5ff 0, transparent 30%), linear-gradient(160deg,#fff0dd 0,#fff9ef 39%,#fffdf8 82%); }
button, input, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #9966c2; outline-offset: 3px; }
.masthead { max-width: 820px; margin: auto; padding: 21px 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 790; font-size: 21px; letter-spacing: -.7px; }
.brand small { font-weight: 650; font-size: 13px; color: var(--muted); margin-left: 9px; letter-spacing: 0; }
#profile-link, #logout { font-size: 16px; letter-spacing: 0; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: #ffe0b1; }
main { max-width: 820px; margin: auto; padding: 6px 24px 28px; }
.welcome { max-width: 560px; margin: clamp(22px,6vh,74px) auto 0; padding: clamp(24px,6vw,49px); background: var(--paper); border: 1px solid #fff; border-radius: 32px; box-shadow: 0 15px 60px #754b5820; }
.welcome-art { display: grid; place-items: center; width: 113px; height: 106px; background: #ffebc9; border-radius: 37% 53% 43% 50%; margin-bottom: 22px; }
h1 { margin: 0; letter-spacing: -.05em; line-height: 1.12; font-weight: 820; }
.welcome h1 { font-size: clamp(38px,7vw,61px); }
.intro { color: var(--muted); font-size: 16px; line-height: 1.8; margin: 17px 0 24px; max-width: 320px; }
.access { display: grid; gap: 11px; }
.demo-note { background: var(--lavender); color: #5d437d; padding: 12px 15px; margin: 0; border-radius: 13px; font-size: 13px; }
button { border: 1px solid var(--line); border-radius: 13px; min-height: 44px; padding: 9px 15px; background: var(--paper); font-weight: 690; }
.primary { border-color: transparent; background: linear-gradient(100deg,#ffcd7c,#f39a66); color: #402621; min-height: 51px; }
.primary span { padding-left: 8px; }
.quiet { background: #fffaf6; color: #674852; }
.access label { font-size: 14px; font-weight: 700; }
input:not([type=range]), textarea { border: 1px solid var(--line); padding: 12px; border-radius: 11px; background: #fffefc; min-width: 0; width: 100%; color: var(--ink); }
.code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.notice { color: var(--muted); line-height: 1.55; font-size: 13px; margin: 10px 0 0; }
.notice:empty { display: none; }
.review-heading { padding: 15px 0 17px; display: flex; align-items: center; justify-content: space-between; }
.review h1 { font-size: clamp(34px,6vw,50px); }
.review-heading p { margin: 9px 0 0; color: var(--muted); }
.demo-tag { background: var(--lavender); color: #603f81; border-radius: 999px; padding: 7px 11px; font-size: 13px; white-space: nowrap; }
.session-list { display: flex; gap: 8px; overflow: auto; padding: 3px 3px 13px; margin: 0 -3px; scrollbar-width: thin; }
.session-list button { flex: 0 0 auto; white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }
.session-list button[aria-pressed=true] { background: #ffe3bd; border-color: #efb987; color: #633725; }
.conversation { display: grid; gap: 14px; padding: 8px 0 14px; }
.turn { background: var(--lavender); border-radius: 19px; padding: 14px 16px; max-width: 94%; justify-self: end; min-width: min(265px, 94%); }
.turn.assistant { background: var(--peach); justify-self: start; }
.turn.active { outline: 2px solid #ad73bc; outline-offset: 2px; }
.turn.assistant.active { outline-color: #dc8762; }
.turn-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #5d437d; font-size: 12px; font-weight: 750; }
.assistant .turn-meta { color: var(--orange-deep); }
.turn-text { font-size: 17px; line-height: 1.6; margin: 7px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.turn-text.seek { display: block; text-align: left; border: 0; padding: 0; min-height: 0; background: transparent; font-weight: 500; color: var(--ink); width: 100%; }
.edit { display: block; margin: 9px auto 0; border: 0; background: transparent; font-size: 13px; color: #67468e; }
.edit-form { display: grid; gap: 8px; margin-top: 9px; }
.edit-form textarea { min-height: 80px; resize: vertical; }
.edit-actions { display: flex; justify-content: end; gap: 8px; }
.edit-actions button { font-size: 13px; }
.player { position: sticky; bottom: 0; z-index: 1; padding: 13px 15px max(13px, env(safe-area-inset-bottom)); margin-top: 12px; background: #fffdfaf7; box-shadow: 0 0 36px #5d3d6420; border: 1px solid var(--line); border-radius: 19px 19px 0 0; }
.player-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 14px; }
.player-heading span { color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline { display: block; width: 100%; margin: 5px 0 8px; height: 26px; accent-color: #c26846; }
.play-buttons { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; }
.play-buttons button { font-size: 14px; }
.play-buttons #play { border-color: transparent; background: #ffc687; color: #42251b; }
#assistant-ball { position: fixed; z-index: 3; right: max(17px, calc((100vw - 810px) / 2)); bottom: 148px; width: 54px; height: 54px; padding: 0; border-radius: 50%; border-color: #d9bfee; background: #ead6fc; color: #563078; box-shadow: 0 6px 20px #58346d38; touch-action: none; }
.assistant-panel { position: fixed; z-index: 4; right: max(15px, calc((100vw - 780px) / 2)); bottom: 145px; width: min(320px, calc(100vw - 30px)); max-height: calc(100dvh - 164px); overflow: auto; padding: 14px; background: var(--paper); border: 1px solid #dcc9e7; border-radius: 16px; box-shadow: 0 10px 35px #58346d35; }
.assistant-results:not(:empty) { margin-top: 9px; }
.assistant-results button { font-weight: 500; }
.profile-count { display: flex; align-items: baseline; gap: 10px; background: var(--lavender); border-radius: 18px; padding: 18px; color: #563078; }
.profile-count strong { font-size: 34px; }
.profile-list { display: grid; gap: 10px; }
.profile-entry { display: block; width: 100%; text-align: left; overflow-wrap: anywhere; }
.profile-entry p { margin: 8px 0 0; font-weight: 500; white-space: pre-wrap; }
.profile-entry .turn-meta { flex-wrap: wrap; }
.assistant-panel > button { margin-top: 10px; }
.annotation-status { display: block; text-align: center; margin-top: 5px; font-size: 12px; color: #67468e; }
.turn-insight { margin-top: 10px; padding: 10px 12px; border-left: 3px solid #a17ac6; background: #fffdf9; border-radius: 9px; font-size: 14px; line-height: 1.55; }
.turn-insight.misheard { border-left-color: #c87947; background: #fff4e7; }
.turn-insight p { margin: 5px 0 0; overflow-wrap: anywhere; }
.turn-insight button { margin-top: 7px; min-height: 40px; font-size: 13px; }
.turn-insight blockquote { margin: 6px 0; font-weight: 650; overflow-wrap: anywhere; }
.correction-result { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fffdfa; overflow-wrap: anywhere; font-size: 14px; }
.correction-result .annotation-status, .turn-insight .annotation-status { text-align: left; }
.correction-pair { margin: 6px 0; font-weight: 700; }
.correction-pair del { color: #784b48; }
.correction-pair ins { color: #295e45; text-decoration: none; }
.correction-text { margin: 6px 0 0; white-space: pre-wrap; }
.profile-entry { border: 1px solid var(--line); border-radius: 13px; padding: 12px 15px; background: var(--paper); overflow-wrap: anywhere; }
#action-feedback { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(390px, calc(100% - 24px)); z-index: 5; pointer-events: none; }
.feedback-card { display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 4px 9px; background: #f3fbf0; border: 1px solid #bcd7ba; box-shadow: 0 4px 18px #263e241f; border-radius: 14px; padding: 10px 13px; color: #284e34; }
.feedback-card p { grid-column: 2; margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feedback-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #d9efda; }
@media (prefers-reduced-motion: no-preference) {
  .feedback-check { animation: feedback-check-in 180ms ease-out; }
}
@keyframes feedback-check-in { from { transform: scale(.75); } to { transform: scale(1); } }
@media(max-width: 480px) {
  .masthead { padding: 14px 16px; }
  main { padding: 4px 15px 0; }
  .welcome { margin-top: 28px; border-radius: 25px; }
  .player { margin-inline: -4px; }
  .turn { max-width: 96%; }
  .edit-form textarea { font-size: 16px; }
  #review:has(.edit-form textarea:focus) .player { position: static; }
  #review:has(.edit-form textarea:focus) #assistant-ball { visibility: hidden; }
}

#assistant-ball { width: auto; max-width: calc(100vw - 24px); height: 47px; padding: 0 15px; border-radius: 999px; white-space: nowrap; }
#assistant-ball span { color: #7c429f; margin-right: 3px; }
.profile-count { flex-wrap: wrap; gap: 6px 22px; }
.profile-count span { white-space: nowrap; }
.feedback-card { border-color: #a5cc9f; background: #f0fbed; box-shadow: 0 6px 20px #263e2429; }
.feedback-card strong { font-size: 17px; }

.assistant-results { display: grid; gap: 7px; }