@font-face { font-family:"Lesson Kai"; src:url("/fonts/edukai-5.1.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
:root { color-scheme:light; --ink:#173f42; --muted:#587276; --green:#137d70; --green-dark:#096358; --pale:#e9f5ef; --line:#cce1d8; --orange:#c47727; --cream:#fff7e7; --radius:24px; --lesson-font:"DFKai-SB","BiauKai","標楷體","Lesson Kai",serif; font-family:var(--lesson-font); font-size:18px; color:var(--ink); background:#f3f7f1; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(ellipse at top left,#fff0d5 0,transparent 40%); } button,input,select { font:inherit; } button,a,input,select { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; touch-action:manipulation; } button:disabled { cursor:default; opacity:.5; } button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #d98127; outline-offset:4px; } [hidden] { display:none!important; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.site-header { max-width:1080px; margin:auto; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); } .brand-icon { display:grid; place-items:center; width:50px; height:54px; border-radius:14px; background:var(--green); color:white; font-size:36px; box-shadow:0 4px 0 #c5dec8; } .brand small,.brand strong { display:block; } .brand small { font-size:.75rem; color:var(--muted); margin-bottom:4px; } .brand strong { font-size:1.3rem; letter-spacing:.07em; } .edition { padding:7px 12px; border:1px solid #e8d2a2; border-radius:50px; background:#fff8e8; color:#926228; font-size:.8rem; white-space:nowrap; }
#app { max-width:1032px; margin:0 auto; padding:6px 24px 24px; outline:none; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:8px; font-size:clamp(1.65rem,3vw,2.2rem); letter-spacing:.015em; } h2 { font-size:1.35rem; margin-bottom:8px; } p { line-height:1.65; } .muted { color:var(--muted); } .small { font-size:.85rem; } .panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:0 10px 30px #1e5f4310; } .toolbar,.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .toolbar { justify-content:space-between; margin-bottom:22px; } .learner-control { display:flex; align-items:center; gap:8px; font-size:.9rem; } select,input { min-height:44px; border:1px solid #acc9c0; border-radius:10px; padding:8px 12px; color:var(--ink); background:#fff; max-width:100%; } .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:12px 20px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:white; font-weight:700; text-decoration:none; line-height:1.4; } .btn.primary { color:white; background:var(--green); border-color:var(--green); box-shadow:0 3px 0 #095d50; } .btn.primary:hover { background:var(--green-dark); } .btn.soft { color:#176457; background:var(--pale); border-color:#b8d8cc; } .btn.quiet { min-height:44px; padding:8px 12px; font-size:.85rem; box-shadow:none; } .btn.warm { background:var(--cream); border-color:#e6c783; color:#885a1f; } .btn svg { width:21px; height:21px; flex-shrink:0; }
.intro-row { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:22px; } .intro-row p { margin-bottom:0; } .count-pill { font-size:.9rem; background:var(--pale); color:var(--green-dark); padding:8px 12px; border-radius:12px; white-space:nowrap; } .character-picker { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } .pick { display:flex; flex-direction:column; align-items:center; padding:12px; border:2px solid #dce9e1; border-radius:18px; background:#fff; color:var(--ink); position:relative; } .pick[aria-pressed=true] { border-color:var(--green); background:#eef8f1; box-shadow:0 3px 0 #c9e5d4; } .pick .glyph { font-size:2.7rem; line-height:1.3; } .pick .check { position:absolute; top:8px; right:9px; font-size:15px; font-weight:700; color:var(--green); } .pick small { font-size:.8rem; color:var(--muted); } .glyph,.word-letter { font-family:var(--lesson-font); font-weight:400; }
fieldset { padding:0; margin:0; border:0; } legend { padding:0; margin-bottom:8px; font-weight:700; font-size:.9rem; } .segment { display:flex; gap:4px; padding:4px; border-radius:12px; background:#eef3ef; } .segment label { position:relative; cursor:pointer; } .segment input { position:absolute; opacity:0; width:1px; height:1px; } .segment span { display:block; padding:9px 13px; border-radius:8px; font-size:.9rem; } .segment input:checked+span { background:white; color:var(--green-dark); box-shadow:0 2px 6px #1c58431a; font-weight:700; } .segment input:focus-visible+span { outline:3px solid #d98127; }
.panel > .family-entry { margin-top:24px; }
.check-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 16px; margin-bottom:14px; }
.check-heading h2 { margin:0; }
.check-options { min-width:0; max-width:100%; }
.check-options .segment label { flex:1; min-width:0; text-align:center; }
.check-options .segment span { display:flex; align-items:center; justify-content:center; min-height:44px; padding:9px 8px; white-space:nowrap; }
@media(max-width:650px) { .check-heading { flex-direction:column; align-items:stretch; } }
.start-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; } .start-card { padding:22px; border-radius:20px; background:#edf6f0; border:1px solid #bfdccd; } .start-card.check-card { background:#fff9eb; border-color:#e8d5a8; } .start-card p { margin:6px 0 18px; color:var(--muted); font-size:.9rem; } .start-card .btn { width:100%; } .check-actions { display:flex; gap:8px; } .check-actions .btn { padding:12px 8px; font-size:.95rem; } .review-strip { display:flex; gap:14px; justify-content:space-between; align-items:center; margin-top:18px; padding:16px 18px; background:#fff; border:1px solid var(--line); border-radius:18px; } .review-strip p { margin:0; font-size:.9rem; } .storage-note { color:var(--muted); font-size:.8rem; text-align:center; margin:20px 0 0; } .storage-note.error { color:#a24f20; } details { font-size:.9rem; margin-top:18px; color:var(--muted); } summary { cursor:pointer; padding:8px 0; font-weight:700; } details p { margin:8px 0; } .site-footer { display:flex; justify-content:space-between; max-width:1032px; padding:0 24px 22px; margin:auto; font-size:.78rem; color:var(--muted); } .site-footer a { color:inherit; text-underline-offset:3px; }
.practice-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 14px; } .practice-top strong { font-size:1rem; } .steps { display:flex; list-style:none; padding:0; margin:0 0 16px; gap:8px; } .steps li { flex:1; border-bottom:4px solid #dce8df; padding:8px 4px; color:#647971; font-size:.9rem; text-align:center; } .steps li.active { border-color:var(--green); color:var(--green-dark); font-weight:700; } .progress { height:8px; border-radius:8px; background:#e0ebe2; overflow:hidden; margin-bottom:22px; } .progress span { display:block; height:100%; background:#e6a64f; transition:width .2s; } .activity { text-align:center; } .activity h1 { font-size:1.65rem; margin-bottom:8px; } .activity .instruction { color:var(--muted); margin-bottom:16px; font-size:.95rem; } .teaching-stage { display:flex; justify-content:center; align-items:center; gap:36px; min-height:290px; padding:18px; background:#f5faf6; border:1px solid #d7e8dc; border-radius:20px; margin-bottom:20px; } .picture-cue { width:260px; max-width:42%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; transition:width .25s; } .cue-small { width:84px; } .teaching-letter { font-size:9rem; line-height:1.25; } .teaching-word { margin:0; font-size:1.3rem; } .activity-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; } .feedback { border-radius:14px; background:#eaf6ee; color:#23684b; padding:14px; margin-top:20px; line-height:1.5; } .feedback.help { background:#fff4dc; color:#855d27; } .listen-button { font-size:1.2rem; min-height:62px; margin:10px 0 25px; padding:16px 32px; } .letter-options { display:flex; justify-content:center; gap:22px; margin:0 auto; max-width:690px; } .letter-option { flex:1; min-width:0; max-width:220px; aspect-ratio:1; display:grid; place-items:center; border:3px solid #c6dfd1; border-radius:22px; background:#fff; color:var(--ink); box-shadow:0 5px 0 #e0eee5; font-size:5rem; } .letter-option:hover { border-color:var(--green); } .letter-option.correct { background:#e2f3e7; border-color:var(--green); } .letter-option:disabled { opacity:1; } .hint-box { display:flex; align-items:center; justify-content:center; gap:16px; border:1px dashed #d5a85f; border-radius:18px; padding:14px; background:#fffaec; margin:18px auto 0; max-width:610px; } .hint-box img { width:90px; height:72px; object-fit:cover; border-radius:12px; } .hint-box .glyph { font-size:3.5rem; } .hint-box p { margin:0; font-size:.95rem; text-align:left; }
.read-letter { font-size:10rem; line-height:1.4; margin:5px auto 12px; display:grid; place-items:center; min-height:235px; max-width:390px; border-radius:22px; background:#f6faf5; border:1px solid var(--line); } .teacher-label { display:flex; align-items:center; gap:10px; justify-content:center; font-size:.85rem; color:var(--muted); margin:22px 0 12px; } .teacher-label:before,.teacher-label:after { content:''; height:1px; background:var(--line); flex:1; max-width:130px; } .teacher-rating { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .word-prompt { color:var(--green-dark); } .word-prompt .glyph { font-size:2rem; } .word-strip { display:flex; justify-content:center; gap:18px; margin:28px auto; } .word-letter { font-size:4.5rem; width:130px; min-height:140px; border:2px solid var(--line); background:#fff; border-radius:20px; color:var(--ink); } .word-letter.correct { border-color:var(--green); background:#e7f4eb; }
.result-badge { width:70px; height:70px; display:grid; place-items:center; border-radius:22px; margin:0 auto 18px; color:var(--green); background:#e3f3e7; font-size:2rem; } .result-words { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:24px 0; } .result-words .glyph { padding:10px 20px; border:1px solid var(--line); border-radius:14px; font-size:2.5rem; } .table-wrap { overflow:auto; margin:20px 0; border:1px solid var(--line); border-radius:16px; } table { width:100%; border-collapse:collapse; font-size:.88rem; text-align:left; } th { background:#edf5ee; color:#47625a; font-size:.8rem; font-weight:700; } td,th { padding:14px 12px; border-bottom:1px solid #e2ece4; } tr:last-child td { border-bottom:0; } td .glyph { font-size:2rem; } .status { display:inline-block; font-size:.8rem; line-height:1.5; padding:4px 7px; border-radius:7px; white-space:nowrap; } .status.independent { color:#21623d; background:#e8f5e9; } .status.prompted { color:#7c5a20; background:#fff2d5; } .status.practice { color:#865649; background:#f9ede7; } .record-summary { padding:18px; border-radius:16px; background:#edf6ef; margin-bottom:18px; } .record-summary p { margin:0; } .profile-dialog { border:1px solid var(--line); border-radius:22px; padding:26px; max-width:min(450px,92vw); box-shadow:0 15px 80px #123c3340; } .profile-dialog::backdrop { background:#173f4260; } .profile-dialog label { display:block; margin:16px 0 8px; } .profile-dialog input { width:100%; } .profile-dialog .row { justify-content:flex-end; margin-top:20px; } .audio-notice { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); max-width:min(92vw,580px); padding:12px 20px; background:#fff0d2; color:#79501e; border:1px solid #dcb46e; border-radius:12px; z-index:5; font-size:.9rem; } #print-cards { display:none; }
@media(max-width:650px) { :root { font-size:17px; } .site-header { padding:16px; } .brand-icon { width:42px; height:46px; } .brand strong { font-size:1.1rem; } .edition { font-size:.7rem; padding:6px 8px; } #app { padding:4px 12px 20px; } .panel { padding:20px 16px; border-radius:20px; } .toolbar { gap:10px; margin-bottom:18px; } .intro-row { gap:8px; margin-bottom:18px; } .count-pill { font-size:.8rem; padding:7px 8px; } .character-picker { gap:8px; } .pick { padding:14px 3px 10px; border-radius:13px; } .pick .glyph { font-size:2.2rem; } .pick small { font-size:.7rem; } .pick .check { top:3px; right:4px; font-size:12px; } .start-grid { grid-template-columns:1fr; } .start-card { padding:18px; } .review-strip { align-items:start; flex-wrap:wrap; } .site-footer { padding:0 16px 18px; } .teaching-stage { min-height:245px; gap:18px; padding:12px; } .teaching-letter { font-size:6.5rem; } .teaching-word { font-size:1.1rem; } .cue-small { width:54px; } .steps { gap:4px; } .steps li { font-size:.78rem; } .activity h1 { font-size:1.45rem; } .letter-options { gap:10px; } .letter-option { font-size:3.2rem; border-radius:16px; } .letter-options.two .letter-option { max-width:150px; font-size:4.5rem; } .read-letter { min-height:215px; font-size:8rem; } .teacher-rating { grid-template-columns:1fr; gap:8px; } .teacher-rating .btn { min-height:46px; padding:10px; } .word-strip { gap:10px; } .word-letter { font-size:3.5rem; width:92px; min-height:110px; } .feedback { font-size:.95rem; } .btn { padding:12px 16px; } .hint-box { padding:10px; gap:10px; } .hint-box img { width:65px; height:58px; } .hint-box p { font-size:.85rem; } .activity-actions .btn { flex:1; } td,th { padding:12px 8px; } }
.reading-controls { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:18px; }
.reading-controls .microphone { min-width:210px; min-height:60px; font-size:1.15rem; }
.reading-controls .microphone.active { border:2px solid #b87923; }
.recognition-status { margin:16px auto 6px; max-width:600px; line-height:1.6; color:var(--muted); }
.recognition-status.is-listening { color:#885a1f; font-weight:700; }
.recognition-transcript { font-size:.95rem; color:var(--muted); margin:10px auto; overflow-wrap:anywhere; }
.reading-secondary { margin:12px 0 0; }
.reading-sound { color:var(--muted); margin:6px 0; font-size:.95rem; }
.reading-sound.heard { color:var(--green-dark); }
.reading-open { margin:16px 0 0; }
.reading-help { max-width:640px; margin:12px auto 0; text-align:left; }
.reading-help summary { text-align:center; }
.dictation-box { max-width:600px; margin:18px auto; padding:18px; background:var(--pale); border:1px solid var(--line); border-radius:16px; }
.dictation-box label { display:block; margin-bottom:8px; }
.dictation-box input { width:100%; min-height:56px; text-align:center; font-size:1.25rem; }
.dictation-box input::placeholder { font-size:1rem; }
.dictation-box p { margin-bottom:12px; }
.dictation-box .activity-actions { margin:12px 0; }
.reading-cue-stage { max-width:390px; margin:5px auto 12px; }
.reading-cue-stage .read-letter { width:100%; margin:0; }
.reading-cue-stage.has-picture { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:18px; max-width:650px; }
.reading-help-picture { width:100%; height:235px; object-fit:cover; border:1px solid var(--line); border-radius:22px; }
@media(max-width:650px) { .reading-cue-stage.has-picture { gap:10px; } .reading-help-picture { height:180px; border-radius:18px; } .reading-cue-stage.has-picture .read-letter { font-size:6rem; border-radius:18px; } }
.read-letter.dictation-letter { min-height:120px; font-size:6rem; }
.status.unassessed { background:#eef2f3; color:#52696a; }
@media(max-width:650px) { .reading-controls { gap:8px; } .reading-controls .microphone { min-width:0; flex:1; padding:12px; } .reading-controls .btn.soft { padding:10px 12px; } .recognition-status { font-size:.95rem; } }
@media(max-width:650px) {
  .reading-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reading-controls .btn { min-width:0; min-height:48px; padding:10px 8px; font-size:1rem; white-space:nowrap; }
  .reading-controls .microphone,.reading-controls .btn.soft { grid-column:1/-1; }
  .reading-controls.with-finish .microphone { grid-column:auto; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:650px) { .read-letter { min-height:180px; font-size:7rem; line-height:1.2; } .teacher-label { margin-top:18px; } .pick small { font-size:14px; } }
.learner-control { flex-wrap:wrap; }
.teacher-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:22px 0 10px; }
.teacher-notice { margin:16px 0; line-height:1.6; }
.teacher-notice:empty { display:none; }
.teacher-page td,.teacher-page th { white-space:nowrap; }
.btn.danger { color:#923b29; background:#fff3ee; border-color:#d9a191; }
.btn.danger:hover { background:#fce5da; }
.teacher-dialog { width:min(480px,calc(100vw - 24px)); color:var(--ink); }
.teacher-dialog .row { flex-wrap:wrap; }
.teacher-dialog .row .btn { flex:1; }
.error { color:#a24f20; }
.learner-name { padding:9px 12px; border:1px solid var(--line); border-radius:11px; background:#fff; max-width:240px; overflow-wrap:anywhere; }
.handwriting-dialog { width:min(780px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:24px; border:1px solid var(--line); border-radius:24px; color:var(--ink); background:#fff; overflow:auto; box-shadow:0 18px 70px #173f4233; }
.handwriting-dialog::backdrop { background:#173f4260; }
.handwriting-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.handwriting-heading h2 { margin:0; }
.handwriting-intro { margin:10px 0 16px; }
.handwriting-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.handwriting-canvas { display:block; width:100%; aspect-ratio:1; border:2px solid #afd2c1; border-radius:16px; background:linear-gradient(90deg,transparent calc(50% - .5px),#cddfd5 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#cddfd5 50%,transparent calc(50% + .5px)),#f8fbf6; cursor:crosshair; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none; }
#handwriting-tip { margin:8px 0; font-size:.8rem; }
.handwriting-tools { display:flex; flex-wrap:wrap; gap:8px; }
.handwriting-tools .btn { flex:1; padding:10px; }
.handwriting-tools [data-recognize] { flex-basis:100%; }
.handwriting-status { min-height:28px; margin-bottom:10px; }
.handwriting-candidates { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
.candidate { min-height:55px; padding:6px; border:1px solid #b8d8cc; border-radius:12px; background:var(--pale); color:var(--ink); font-size:2rem; }
.candidate:hover { border-color:var(--green); background:#dcf0e3; }
.handwriting-result label { display:block; font-weight:700; font-size:.95rem; margin-bottom:8px; }
.handwriting-result input { width:100%; font-size:1.4rem; min-height:56px; }
.handwriting-name-actions { margin:8px 0; }
.handwriting-result p.small { margin-bottom:12px; }
.handwriting-confirm { width:100%; }
.handwriting-error { color:#a24f20; min-height:0; }
.handwriting-error:empty { display:none; }
.existing-profiles { border-top:1px solid var(--line); padding-top:10px; margin-top:18px; }
.profile-choices { display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; }
.handwriting-note { color:var(--muted); font-size:.8rem; line-height:1.6; margin:12px 0 0; }
@media(max-width:650px) {
  .learner-control { gap:8px; }
  .learner-name { max-width:180px; }
  .site-footer { gap:12px; flex-wrap:wrap; }
  .handwriting-dialog { padding:16px; border-radius:20px; }
  .handwriting-layout { grid-template-columns:1fr; gap:14px; }
  .handwriting-heading h2 { font-size:1.2rem; }
  .handwriting-intro { margin:8px 0 12px; }
  .handwriting-canvas { width:min(100%,240px,32dvh); min-width:180px; margin:0 auto; }
  #handwriting-tip { text-align:center; }
  .handwriting-tools { gap:6px; }
  .handwriting-tools .btn { flex:1; font-size:.82rem; padding:10px 6px; min-height:44px; }
  .handwriting-tools [data-recognize] { flex-basis:auto; }
  .handwriting-status { min-height:0; margin:0 0 8px; }
  .handwriting-candidates { gap:6px; margin-bottom:12px; }
  .candidate { min-height:48px; font-size:1.8rem; padding:4px; }
  .handwriting-result input { min-height:48px; font-size:1.2rem; }
}

.lesson-switch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 20px;padding:14px 18px;background:#e9f5ef;border:1px solid var(--line);border-radius:16px}.lesson-switch label{font-weight:bold}.lesson-switch select{flex:1;min-width:140px}.lesson-record-title{font-size:1.2rem;color:var(--green-dark)}

.edition{max-width:50%;white-space:normal;overflow-wrap:anywhere;text-align:center}

.letter-options.four { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.letter-options.four .letter-option { width:100%; max-width:none; }
@media(max-width:650px) { .letter-options.four { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:340px; } .letter-options.four .letter-option { font-size:4.5rem; } }