@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root { color-scheme:light; --bg:#f7f3e8; --paper:#fffdf7; --ink:#243e35; --muted:#64776c; --green:#22644a; --green-soft:#e3efdd; --line:#dbe3d6; --yellow:#f6c65b; --pink:#f6d6c7; --blue:#cce5ee; --error:#9b412e; --error-bg:#fce5dc; --white:#ffffff; --shadow:#243e3512; --focus:#277eb0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#17241f; --paper:#22352b; --ink:#f1f1de; --muted:#b0c4b3; --green:#a4dc9e; --green-soft:#314c38; --line:#41574a; --yellow:#e8bd63; --pink:#b57664; --blue:#6799ac; --error:#ffc3ae; --error-bg:#50352c; --white:#19281f; --shadow:#00000030; --focus:#88cffa; color-scheme:dark; } }
:root[data-theme="dark"] { --bg:#17241f; --paper:#22352b; --ink:#f1f1de; --muted:#b0c4b3; --green:#a4dc9e; --green-soft:#314c38; --line:#41574a; --yellow:#e8bd63; --pink:#b57664; --blue:#6799ac; --error:#ffc3ae; --error-bg:#50352c; --white:#19281f; --shadow:#00000030; --focus:#88cffa; color-scheme:dark; }
* { box-sizing:border-box; } html,body { height:100%; margin:0; } body { background:var(--bg); color:var(--ink); font-family:Nunito,system-ui,sans-serif; font-size:18px; line-height:1.5; }
button { font:inherit; color:inherit; cursor:pointer; min-height:48px; border:2px solid var(--line); border-radius:16px; background:var(--paper); padding:10px 16px; touch-action:manipulation; } button:hover:not(:disabled) { border-color:var(--green); } button:disabled { cursor:default; opacity:.65; } button:focus-visible { outline:3px solid var(--focus); outline-offset:4px; } h1,h2,h3,p { margin:0 0 16px; } h1 { font-size:clamp(30px,6vw,44px); line-height:1.15; font-weight:900; } h2 { font-size:28px; line-height:1.2; } h3 { font-size:21px; } small,.muted { color:var(--muted); } svg { max-width:100%; vertical-align:middle; } .shell { max-width:900px; margin:auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:24px 40px; } .top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:28px; } .brand { font-weight:900; letter-spacing:.03em; } .badge { display:inline-block; background:var(--yellow); color:var(--white); padding:3px 12px; border-radius:6px; font-size:15px; font-weight:900; transform:rotate(-3deg); margin-bottom:16px; } .sheet { border:2px solid var(--line); border-radius:24px; padding:clamp(18px,4vw,36px); background-color:var(--paper); background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:28px 28px; box-shadow:0 8px 0 var(--shadow); margin-bottom:24px; } .sheet p,.sheet h1 { max-width:620px; } .plain { background:var(--paper); border-radius:16px; padding:16px; } .primary { background:var(--green); color:var(--white); border-color:var(--green); font-weight:900; } .soft { background:var(--green-soft); } .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .spread { justify-content:space-between; } .lessons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .lesson { text-align:left; padding:18px; display:flex; flex-direction:column; gap:6px; } .lesson strong { font-size:20px; } .lesson small { font-size:15px; } .lesson:disabled { opacity:1; color:var(--muted); background:var(--bg); } .progress { height:12px; background:var(--line); border-radius:12px; overflow:hidden; margin:12px 0 20px; } .progress span { display:block; height:100%; background:var(--green); transition:width .3s; } .center { text-align:center; } .art { width:164px; height:144px; margin:8px auto 16px; display:block; } .word { font-size:34px; font-weight:900; margin-bottom:0; } .options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-block:20px; } .option { min-width:0; min-height:80px; font-weight:800; font-size:22px; } .option .art { width:120px; height:100px; margin:0 auto; } .sound { display:inline-flex; align-items:center; gap:8px; } .sound svg { width:22px; height:22px; } .dialog-line { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; } .dialog-line:nth-child(even) { flex-direction:row-reverse; } .bubble { flex:1; min-width:0; border:2px solid var(--line); background:var(--paper); padding:14px; border-radius:18px; } .bubble p { margin-bottom:6px; font-weight:800; } .translation { font-size:16px; margin-top:8px; color:var(--muted); } .link-button { font-size:16px; padding:6px 12px; } .status { min-height:56px; margin-block:16px; border-radius:14px; padding:12px 16px; background:var(--green-soft); font-weight:800; } .status:empty { background:transparent; } .status.error { color:var(--error); background:var(--error-bg); animation:shake .25s; } .status.success { animation:pop .35s; } .star { color:var(--yellow); display:inline-block; font-size:32px; } .tiles { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; } .tiles button { font-size:23px; font-weight:800; } .answer { min-height:90px; padding:12px; border:2px dashed var(--green); border-radius:16px; background:var(--green-soft); } .match-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .match-col { display:flex; flex-direction:column; gap:10px; min-width:0; } .match-item { display:flex; align-items:stretch; gap:4px; min-height:92px; } .match-item .choose { flex:1; min-width:0; padding:8px; font-size:17px; overflow-wrap:anywhere; } .match-item .sound { padding:8px; flex:none; } .selected { border-color:var(--green); background:var(--green-soft); } .matched { background:var(--green-soft); border-color:var(--green); } .footer { margin-top:22px; } .notice { font-size:15px; padding:10px 0; color:var(--muted); } .review-list { list-style:none; padding:0; } .review-list li { padding-block:8px; border-bottom:1px solid var(--line); } [hidden] { display:none !important; }
@keyframes shake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } } @keyframes pop { 50% { transform:scale(1.025); } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } } @media(max-width:520px) { .lessons { grid-template-columns:1fr; } .top { margin-bottom:20px; } .match-item .choose { font-size:16px; } .match-item .sound { padding:4px; } .match-item .sound svg { width:18px; } .sheet { border-radius:18px; } }

input { font:inherit; color:inherit; background:var(--paper); border:2px solid var(--line); border-radius:12px; padding:12px; max-width:100%; width:100%; min-height:48px; } a {color:var(--green);} .session-card {border-bottom:1px solid var(--line); padding:16px 0;} details {padding:12px 0; overflow-wrap:anywhere;} summary {cursor:pointer; min-height:48px;} .stats {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;} .stats strong {display:block; font-size:26px;} .shell {overflow-wrap:anywhere;}

.sound-pair { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; vertical-align:middle; }
.match-item .sound-pair { flex-direction:column; flex-wrap:nowrap; flex:none; }
.match-item .sound-pair .sound { justify-content:center; }

.count-objects { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-block:20px; padding:12px; background:var(--paper); border-radius:16px; }
.count-objects .art { width:100%; max-width:80px; height:auto; margin:0 auto; }
.stage-tip { border-left:4px solid var(--green); }

.sort-bin { width:100%; min-height:112px; margin-bottom:12px; }