/* Paperclaw: blue sky, grass green, cream paper and a small yellow highlight. */
:root{--ink:#163b60;--blue:#2c699a;--green:#537348;--paper:#fffef9;--sky:#e5f3fc;--yellow:#f7e5a2;--line:#c4d7d7;--muted:#587381;color:var(--ink);background:#e7f2f7;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
body{min-width:320px;min-height:100vh;background-color:#eaf4fa;background-image:linear-gradient(180deg,rgba(237,247,252,.16),rgba(248,249,239,.52)),url('./watercolor-landscape.webp');background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent }
button,input,select,textarea{color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #c99c27;outline-offset:3px}
.topbar{min-height:76px;height:auto;background:rgba(255,254,249,.7);color:var(--ink);border-bottom:1px solid rgba(68,103,126,.22);box-shadow:none;padding-top:16px;padding-bottom:16px;gap:16px}
.brand{color:var(--ink);font-weight:750;gap:11px;letter-spacing:.025em}
.brand-mark{width:37px;height:37px;flex-shrink:0;border:1.5px solid var(--blue);border-radius:12px 10px 13px 9px;background:var(--paper);color:var(--blue);font:700 1.5rem Georgia,serif;transform:rotate(-4deg);box-shadow:3px 3px 0 rgba(160,185,136,.25)}
.brand small,.brand span:not(.brand-mark){color:var(--muted)}
.account span{color:#41637a;font-size:.875rem}
.topbar .text-button,.plain-button{color:var(--ink);background:transparent;border-color:#a9c2d1;font-size:.875rem;border-radius:9px}
.topbar .text-button:hover,.plain-button:hover{background:#edf5e8}
.intro,.heading{padding-top:6px;margin-bottom:25px;gap:16px}
h1,.heading h1{font-family:"Kaiti SC",STKaiti,"KaiTi","Songti SC",serif;color:var(--ink);font-weight:750;font-size:clamp(1.85rem,3.4vw,2.65rem);letter-spacing:.025em;line-height:1.35;position:relative;width:fit-content;isolation:isolate;margin:0}
h1::after,.heading h1::after{content:"";position:absolute;z-index:-1;height:.23em;left:-2px;right:-8px;bottom:.08em;background:var(--yellow);transform:rotate(-1deg);border-radius:38% 10% 30% 14%}
.eyebrow{color:var(--green);letter-spacing:.15em}
.round-tabs,.task-tabs{gap:12px;margin-bottom:20px}
.round-tab,.task-tab{border:1px solid #afc8d6;background:rgba(255,254,249,.93);color:#345c79;border-radius:15px 12px 15px 11px;box-shadow:0 3px 12px rgba(34,68,85,.04)}
.round-tab:hover,.task-tab:hover{background:#f2f7e9;border-color:#89a773}
.round-tab.active,.task-tab.active{background:#e1f0fb;color:var(--ink);border-color:#659abb;box-shadow:inset 0 -4px 0 var(--yellow),0 4px 12px rgba(46,95,131,.08)}
.round-tab b{display:grid;place-items:center;min-width:31px;width:31px;height:31px;flex-shrink:0;border-radius:50%;font:700 1.125rem Georgia,serif;background:#e5eedc;color:var(--green);border:1px solid #bdd0a9}
.round-tab.active b{color:#fffef9;background:var(--green);border-color:var(--green)}
.round-tab small,.task-tab span,.task-tab.active span{color:#526f83;font-size:.875rem;opacity:1}
.sidebar,.main-card,.surface,.empty,.login-card,.manage-dialog,.history-dialog{background:rgba(255,254,249,.98);border:1px solid #bfd1d2;border-radius:18px 15px 18px 14px;box-shadow:0 12px 30px rgba(39,73,94,.07);color:var(--ink)}
.main-card,.workspace{min-width:0}
.sidebar{background:rgba(255,254,249,.97)}
.sidebar h2,.workspace-head h2{color:var(--blue)}
.sidebar label,.full-label,.answer-title label{color:#355671;font-size:.875rem}
.sidebar select,.sidebar input,.step textarea,textarea,.login-card input,.login-card select{background:#fffefc;border-color:#b9ced6;border-radius:10px;color:var(--ink)}
.sidebar select:focus,.sidebar input:focus,.step textarea:focus,textarea:focus{border-color:var(--blue)}
.count,.pill,.plain-button span{color:var(--green);background:#ebf2e2;font-size:.875rem}
.question-group{border-color:#d5e0da}
.group-title{color:var(--blue)}
.question-item{background:transparent;color:var(--ink)}
.question-item.active{border-color:#8dadd0;background:#e8f2fb;box-shadow:inset 3px 0 0 #5e89b1}
.question-item:hover{background:#f0f5e7}
.group-items .question-item strong{font-size:.875rem;line-height:1.5}
.group-items .question-item span{color:var(--green);font-size:.875rem}
.prompt{color:var(--ink);font-weight:600;line-height:1.55}
.prompt p,.prompt .cue{color:var(--ink)}
.card-top,.step,.finish-bar,.answer-area,.sentence-builder,.sentence-navigation,.prompt,.login-alternative{border-color:#d8e2db}
.step-num,.prompt h3,.stage-label{color:var(--green)}
.primary,.primary-button{background:var(--blue);border-color:var(--blue);color:white;border-radius:11px}
.primary:hover,.primary-button:hover{background:#21577f;border-color:#21577f}
.secondary,.secondary-button,.file-button{background:#fffef9;color:var(--blue);border-color:#9cb9cc;border-radius:10px}
.secondary:hover,.secondary-button:hover,.file-button:hover{background:#eaf3fc}
.small,.primary-button,.secondary-button,.record-status,.muted,.hint,.paper-reminder,.finish-bar,.stage-hint,.timer-row span:last-child,.toast{font-size:.875rem}
.muted,.hint,.record-status,.paper-reminder,.source-note,.privacy-note,.generated-note,.sentence-controls span,.prep-note{color:var(--muted)}
.checkbox-row input,.review-toggle input{accent-color:var(--green)}
.prep-card{border:1px solid #cdd9ba;background:#f7f8ed;border-radius:12px 10px 13px 9px}
.prep-card>summary,.prep-body strong,.prep-example summary{color:var(--green)}
.prep-card>summary span,.prep-body .prep-note{color:#596e5b}
.prep-example{border-color:#d6dfc6}
.practice-timer-row,.timer-row{background:#eef6fc;border:1px solid #cadde9;border-radius:11px;padding:10px 12px;margin:14px 0}
.timer,.timer-display{color:var(--blue);font-variant-numeric:tabular-nums}
.timer.live,.timer-display.done{color:#a05638}
.finish-bar{color:var(--green)}
.stage-area{background:#f4f7e9;border-color:#ccd9b9;border-radius:12px}
.stage-switch button{color:var(--green);background:#fffef9;border-color:#b7c8a5}
.stage-switch button.selected{background:var(--green);border-color:var(--green);color:white}
.prompt .speech{background:#f2f6eb;border-left-color:#88a471}
.prompt .context{color:#587584}
.sentence-target{background:#eef6fd;border-color:#93b6d3}
.sentence-bank{background:#f2f6e7;border-color:#c8d6b7}
.word-tile{background:#fffef9;color:var(--ink);border-color:#a9c1d1}
.sentence-target .word-tile{background:#deedfa;border-color:#85aac9}
.word-tile:hover{background:#f8efc8}
.fixed-fragment,.sentence-instruction{color:var(--ink)}
.feedback{background:#f2f6e8;border-color:#c1d3ad}
.feedback h3{color:var(--green)}
.history-item{background:#f2f7fc;border-color:#cadce8;color:var(--ink)}
.history-item:hover{background:#e9f2df}
.history-entry{border-color:#d8e2db}
.history-entry small{color:var(--muted)}
.manage-dialog::backdrop,.history-dialog::backdrop{background:rgba(26,53,75,.38)}
.login-shell{padding-top:60px}.login-card h1{font-size:1.65rem}.login-card{box-shadow:0 15px 45px rgba(36,73,95,.14)}
@media(max-width:760px){body{background-attachment:scroll;background-size:auto 1100px;background-position:center top}.topbar{padding:13px 16px;min-height:68px}.round-tab{padding:12px 10px;gap:9px}.round-tab small{font-size:.8125rem}.brand{font-size:1rem}.brand-mark{width:32px;height:32px}.intro h1{font-size:1.9rem}}
@media(max-width:440px){.round-tab{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.round-tab b{margin:0}.round-tab span{font-size:.875rem}.round-tab small{line-height:1.4}.card-top{gap:10px}.topbar .brand{gap:8px;font-size:.9rem}.account .text-button{padding:7px;font-size:.8125rem}}