:root {
    --ink:#183c34;
    --muted:#687770;
    --paper:#f8f7f2;
    --line:#dfe5db;
    --green:#235c46;
    --lime:#d6ed93;
    --white:#fffefa;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a {
    color:inherit;
    text-underline-offset:4px;
}
button,input,textarea,select {
    font:inherit;
}
button,a,input,textarea,select {
    touch-action:manipulation;
}
button,a {
    -webkit-tap-highlight-color:transparent;
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
    outline:3px solid #adbe53;
    outline-offset:3px;
}
.site-header {
    max-width:1200px;
    margin:auto;
    padding:28px 36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid var(--line);
}
.brand {
    font-size:26px;
    letter-spacing:-1px;
    font-weight:800;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:10px;
}
.brand-mark {
    background:var(--green);
    color:var(--lime);
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    font:italic 30px Georgia,serif;
}
.brand-dot {
    color:#679651;
    margin-left:-9px;
}
nav {
    display:flex;
    align-items:center;
    gap:24px;
    font-size:14px;
}
nav form {
    margin:0;
}
main {
    max-width:1200px;
    margin:auto;
    padding:54px 36px 80px;
    min-height:72vh;
}
h1 {
    font-size:clamp(32px,4vw,49px);
    line-height:1.15;
    letter-spacing:-1.7px;
    font-weight:650;
    margin:12px 0 20px;
}
h2 {
    font-size:23px;
    line-height:1.3;
    letter-spacing:-.5px;
    margin:0 0 18px;
}
h3 {
    font-size:17px;
    margin:16px 0 8px;
}
p {
    margin:10px 0 18px;
}
.eyebrow {
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:2px;
    font-weight:750;
}
.intro {
    color:var(--muted);
    max-width:600px;
}
.hero {
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:70px;
    align-items:center;
    padding:20px 0 65px;
}
.hero h1 {
    font-size:clamp(45px,5.3vw,68px);
    letter-spacing:-3px;
}
.hero h1 em {
    font-family:Georgia,serif;
    font-weight:400;
    color:#62823c;
}
.hero-copy {
    font-size:18px;
    max-width:460px;
    color:var(--muted);
}
.chinese {
    font-size:19px;
    margin:24px 0;
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    background:var(--green);
    color:white;
    border:1px solid var(--green);
    border-radius:10px;
    padding:12px 20px;
    text-decoration:none;
    cursor:pointer;
    font-size:14px;
    font-weight:650;
    margin-top:18px;
}
.button:hover {
    filter:brightness(1.12);
}
.button:disabled {
    opacity:.5;
    cursor:wait;
}
.button.secondary {
    background:transparent;
    color:var(--green);
    border-color:#a4b8a7;
}
.text-button {
    border:0;
    background:none;
    color:var(--muted);
    cursor:pointer;
    padding:0;
}
.study-card {
    padding:35px;
    background:#e8eddf;
    border:1px solid #d2ddc5;
    border-radius:22px;
    transform:rotate(1deg);
}
.study-card h2 {
    font:32px/1.2 Georgia,serif;
    margin:26px 0;
}
.badge {
    display:inline-block;
    border:1px solid #cbd8c5;
    border-radius:30px;
    padding:5px 12px;
    font-size:11px;
    white-space:nowrap;
    background:#eff3e7;
}
.bubble {
    padding:16px 20px;
    border-radius:15px;
    margin:16px 0;
    max-width:92%;
    overflow-wrap:anywhere;
    white-space:pre-wrap;
}
.bubble p {
    margin:6px 0 0;
}
.is-thinking {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--green);
}
.is-thinking::before {
    content:"";
    width:18px;
    height:18px;
    flex:0 0 18px;
    border:2px solid #cbd8c5;
    border-top-color:var(--green);
    border-radius:50%;
    animation:thinking-spin .8s linear infinite;
}
@keyframes thinking-spin {
    to { transform:rotate(360deg); }
}
@media(prefers-reduced-motion:reduce) {
    .is-thinking::before {
        animation:none;
    }
}
.bubble.tutor {
    background:#edf2e6;
    border-bottom-left-radius:3px;
}
.bubble.learner {
    background:#f3efe6;
    margin-left:auto;
    border-bottom-right-radius:3px;
}
.study-card .bubble.tutor {
    background:white;
}
.small {
    font-size:12px;
}
.muted {
    color:var(--muted);
}
.feature-row {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
    border-top:1px solid var(--line);
    padding-top:30px;
}
.feature-row span {
    font:italic 23px Georgia,serif;
    color:#7a9762;
}
.feature-row p {
    font-size:14px;
    color:var(--muted);
    max-width:270px;
}
.two-columns {
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:28px;
    align-items:start;
    margin-top:30px;
}
.card {
    padding:28px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--white);
    margin-bottom:22px;
}
.profile-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.profile {
    text-decoration:none;
}
.profile:hover {
    border-color:#8fae82;
}
.profile p {
    color:var(--muted);
    font-size:13px;
}
.profile>span:last-child {
    font-size:12px;
}
.avatar {
    display:grid;
    place-items:center;
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--lime);
    font-size:23px;
    margin-bottom:24px;
}
.profile h2 {
    margin-bottom:0;
}
label {
    display:block;
    font-size:13px;
    font-weight:650;
    margin:17px 0 7px;
}
input,select,textarea {
    display:block;
    width:100%;
    padding:11px 12px;
    border:1px solid #cdd5cb;
    border-radius:8px;
    background:white;
    color:var(--ink);
}
textarea {
    resize:vertical;
}
input[type=file] {
    font-size:12px;
    padding:10px;
}
input[type=checkbox] {
    display:inline-block;
    width:auto;
    margin-right:8px;
    accent-color:var(--green);
}
.pack-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
    gap:22px;
    margin-top:30px;
}
hr {
    border:0;
    border-top:1px solid var(--line);
    margin:26px 0;
}
.heading-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}
.heading-row form {
    max-width:280px;
}
.section-title {
    margin-top:36px;
}
.lesson-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    text-decoration:none;
    border-bottom:1px solid var(--line);
    padding:18px 0;
}
.lesson-row p {
    font-size:12px;
    color:var(--muted);
    margin:3px 0;
}
.document-row {
    display:block;
    padding:12px 0;
    text-decoration:none;
    border-bottom:1px solid var(--line);
    font-size:14px;
    overflow-wrap:anywhere;
}
.document-row span {
    font-size:9px;
    padding:3px 5px;
    background:#e9eddc;
    margin-right:8px;
}
.conversation-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding-bottom:16px;
    gap:12px;
}
.conversation-head h2 {
    margin:0;
}
.speaker {
    font-size:11px;
    font-weight:700;
    color:var(--muted);
}
.composer-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.empty {
    padding:35px 15px;
    color:var(--muted);
    text-align:center;
}
.back-link {
    font-size:13px;
    display:block;
    margin-bottom:30px;
}
.pre-wrap {
    white-space:pre-wrap;
}
.notice,.error {
    padding:16px 22px;
    border-radius:10px;
    margin-bottom:26px;
}
.notice {
    background:#e5eed9;
}
.error {
    background:#f6e6df;
    color:#803c2a;
}
.error ul {
    margin:0;
}
.pagination {
    margin-top:25px;
    justify-content:space-between;
}
footer {
    max-width:1200px;
    margin:auto;
    border-top:1px solid var(--line);
    padding:25px 36px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:var(--muted);
    font-size:12px;
}
@media(max-width:850px) {
    .hero {
        gap:30px;
    }
    .two-columns {
        grid-template-columns:1fr 280px;
    }
    .profile-grid {
        grid-template-columns:1fr;
    }
    .heading-row {
        align-items:flex-start;
    }
    .conversation-head {
        display:block;
    }
    .conversation-head span {
        display:block;
        margin-top:8px;
    }
}
@media(max-width:650px) {
    main {
        padding:30px 20px 50px;
    }
    .site-header {
        padding:20px;
        flex-wrap:wrap;
    }
    .brand {
        font-size:23px;
    }
    .site-header nav {
        gap:13px;
        font-size:12px;
        flex-wrap:wrap;
    }
    .site-header .muted {
        font-size:11px;
    }
    .hero,.two-columns {
        grid-template-columns:1fr;
    }
    .hero {
        padding-top:5px;
        gap:35px;
    }
    .hero h1 {
        font-size:52px;
    }
    .study-card {
        transform:none;
        padding:25px;
    }
    .feature-row {
        gap:20px;
        grid-template-columns:1fr;
    }
    .feature-row p {
        max-width:none;
    }
    .feature-row h3 {
        margin-top:4px;
    }
    .card {
        padding:22px;
    }
    .heading-row {
        display:block;
    }
    .heading-row form {
        max-width:none;
    }
    .bubble {
        max-width:96%;
    }
    footer {
        display:block;
        padding:25px 20px;
    }
    footer span {
        display:block;
        margin-top:8px;
    }
}
.site-header nav {
    flex-wrap:wrap;
    justify-content:flex-end;
}
.language-picker {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}
.language-picker label {
    margin:0;
    font-size:12px;
}
.language-picker select {
    width:auto;
    max-width:100%;
    padding:6px 8px;
}
.language-picker button {
    padding:8px 4px;
}
html:lang(zh) h1,html:lang(zh) h2,html:lang(zh) .eyebrow {
    letter-spacing:normal;
    line-height:1.4;
}
@media(max-width:650px) {
    .site-header nav {
        justify-content:flex-start;
    }
    .language-picker {
        flex-basis:100%;
    }
}

/* The call stage stays independent of the character artwork. */
.lesson-page { padding-top:24px; }
.lesson-page .back-link { margin-bottom:14px; }
.lesson-page h1 { font-size:clamp(26px,3vw,36px); margin:6px 0 0; }
.lesson-page .heading-row .eyebrow { margin:0; }
.lesson-layout {
    margin-top:16px;
}
.session-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px 20px;
    margin-top:18px;
    padding:12px 16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--white);
}
.session-toolbar-time { flex:1 1 220px; min-width:0; }
.session-toolbar h2 { margin:0; font-size:18px; font-variant-numeric:tabular-nums; }
.session-toolbar-time p { margin:2px 0 0; }
.session-toolbar-actions,.session-start-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.session-toolbar .button { margin:0; padding:8px 12px; font-size:12px; }
.session-toolbar .text-button { min-height:40px; font-size:12px; }
.session-toolbar-note { flex-basis:100%; margin:0; }
.session-toolbar-note:empty { display:none; }
.lesson-materials-setup { margin-top:12px; font-size:13px; }
.lesson-materials-setup summary { width:fit-content; padding:8px 0; color:var(--green); cursor:pointer; font-weight:650; }
.lesson-materials-forms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:12px 0; }
.lesson-materials-forms h3 { margin:0; font-size:15px; }
.voice-conversation {
    overflow:hidden;
    padding:24px 32px;
}
.call-stage {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:24px 16px 20px;
    background:radial-gradient(ellipse at 50% 25%,#f0f5e6,transparent 65%);
}
.buddy-avatar {
    position:relative;
    display:grid;
    place-items:center;
    width:200px;
    height:200px;
    flex-shrink:0;
    margin:8px 0 14px;
    color:#b5d878;
}
.spark-halo,.spark-orbit {
    position:absolute;
    inset:17px;
    border-radius:50%;
}
.spark-halo {
    background:radial-gradient(circle,#d6ed9399, #e8f0db55 60%,transparent 72%);
    animation:spark-breathe 4s ease-in-out infinite;
}
.spark-orbit {
    inset:2px;
    border:1px solid #b3ca9740;
    transition:border-color .3s,background .3s;
}
.buddy-spark {
    position:relative;
    width:154px;
    height:154px;
    filter:drop-shadow(0 12px 16px #7c9c3830);
    animation:spark-float 4s ease-in-out infinite;
    transition:color .35s;
}
.spark-dot {
    position:absolute;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#98b86c;
    animation:spark-breathe 3s ease-in-out infinite;
}
.spark-dot-one { top:36px; right:28px; }
.spark-dot-two { bottom:40px; left:26px; width:6px; height:6px; animation-delay:-1.5s; }
.call-state {
    color:var(--green);
    font-size:13px;
    font-weight:650;
    margin:0 0 14px;
}
.current-message {
    width:100%;
    max-width:720px;
    max-height:210px;
    min-height:110px;
    overflow-y:auto;
    overflow-wrap:anywhere;
    scrollbar-width:thin;
    padding:4px 12px 12px;
}
.current-message p {
    font-size:clamp(20px,2.5vw,28px);
    line-height:1.6;
    letter-spacing:-.4px;
    margin:8px 0 0;
    white-space:pre-wrap;
}
#voice-controls { display:flex; flex-shrink:0; }
.microphone-toggle {
    display:inline-grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid var(--green);
    border-radius:50%;
    background:var(--green);
    color:white;
    cursor:pointer;
    box-shadow:0 5px 20px #235c4620;
    transition:background .2s,box-shadow .2s,transform .2s;
}
.microphone-toggle:hover { transform:translateY(-2px); }
.microphone-toggle svg { width:22px; height:22px; }
.microphone-toggle[aria-pressed=true] {
    color:var(--green);
    background:var(--lime);
    box-shadow:0 0 0 3px #d6ed9340;
}
.microphone-toggle[aria-pressed=true] .microphone-slash { display:none; }
.microphone-toggle:disabled { opacity:.5; cursor:wait; }
#voice-status { margin:8px 0; text-align:center; }
.voice-help { margin:8px auto 0; max-width:420px; text-align:center; }
.voice-help summary { font-size:11px; color:var(--muted); cursor:pointer; }
.conversation-history { border-top:1px solid var(--line); padding:16px 0; }
.conversation-history summary { cursor:pointer; font-size:14px; font-weight:650; }
.conversation-history #messages { max-height:340px; overflow-y:auto; padding-right:10px; scrollbar-width:thin; }
.text-composer { max-width:760px; margin:0 auto; padding:0 0 20px; }
.message-bar { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid #cdd5cb; border-radius:28px; background:white; }
.message-bar textarea { flex:1; min-width:0; border:0; background:transparent; resize:vertical; max-height:160px; padding:10px 12px; }
.message-bar textarea:focus-visible { outline-offset:0; }
.message-bar textarea:disabled { opacity:.6; }
.send-message-button { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border:0; border-radius:50%; background:#edf2e6; color:var(--green); cursor:pointer; }
.send-message-button svg { width:22px; height:22px; }
.send-message-button:disabled { opacity:.4; cursor:wait; }
#message-status:empty { display:none; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.call-stage[data-state=listening] .spark-orbit { border-color:#83ac55; background:#d6ed931a; }
.call-stage[data-state=listening] .spark-halo { animation-duration:2s; }
.call-stage[data-state=thinking] .buddy-spark,.call-stage[data-state=connecting] .buddy-spark { animation:spark-ponder 2.4s ease-in-out infinite; color:#d2c080; }
.call-stage[data-state=speaking] .buddy-spark { animation:spark-talk .65s ease-in-out infinite alternate; color:#a3ce60; }
.call-stage[data-state=speaking] .spark-halo { animation:spark-breathe .9s ease-in-out infinite; }
.call-stage[data-state=speaking] .spark-orbit { border-color:#b5d878; }
.call-stage[data-state=error] .buddy-spark { color:#d4b78b; }
@keyframes spark-float { 0%,100% { transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-9px) rotate(5deg); } }
@keyframes spark-breathe { 0%,100% { transform:scale(.9); opacity:.6; } 50% { transform:scale(1.1); opacity:1; } }
@keyframes spark-ponder { 0%,100% { transform:rotate(-12deg) scale(.94); } 50% { transform:rotate(12deg) scale(1.04); } }
@keyframes spark-talk { from { transform:scale(.93) rotate(-6deg); } to { transform:scale(1.09) rotate(6deg); } }
@media(max-width:650px) {
    .session-toolbar { padding:12px; gap:10px; }
    .session-toolbar-actions { width:100%; }
    .lesson-materials-forms { grid-template-columns:1fr; gap:16px; }
    .voice-conversation { padding:20px 18px; }
    .call-stage { padding:20px 0; }
    .buddy-avatar { width:190px; height:190px; margin:0 0 12px; }
    .buddy-spark { width:130px; height:130px; }
    .current-message { max-height:190px; min-height:100px; padding-inline:4px; }
    .current-message p { font-size:21px; }
    .conversation-head span { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
    .call-stage .buddy-spark,.call-stage .spark-halo,.call-stage .spark-dot { animation:none; }
    .microphone-toggle { transition:none; }
}