*{box-sizing:border-box}body{margin:0;background:#f4eedf;color:#203d43;font:16px/1.55 system-ui,sans-serif}header{padding:22px 5%;border-bottom:1px solid #c9c4b4;display:flex;justify-content:space-between;align-items:center}header b{letter-spacing:.13em;font-size:13px}.badge{background:#e2e8d8;border-radius:30px;padding:5px 13px;font-size:12px}main{max-width:1180px;margin:36px auto;padding:0 22px}.intro{display:grid;grid-template-columns:1fr 1.25fr;gap:34px}.art{width:100%;border-radius:20px;display:block;aspect-ratio:1;object-fit:cover;box-shadow:0 12px 40px #2343}.eyebrow{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:#8f552d}h1{font:clamp(32px,4vw,58px)/1.05 Georgia,serif;margin:10px 0 20px}h2{font:26px Georgia,serif;margin:10px 0}.muted{color:#5c7070}button,select,input,textarea{font:inherit}button,select{border:1px solid #a6b3a9;border-radius:10px;padding:10px 16px;background:#fffdf5;color:#203d43;cursor:pointer;min-height:44px}button:hover{background:#e2e8d8}button:focus-visible,select:focus-visible{outline:3px solid #cc6a39;outline-offset:3px}button.primary{background:#245b59;color:white;border-color:#245b59}button:disabled{opacity:.45;cursor:default}.panel{background:#fffdf6;border:1px solid #d6d7c8;border-radius:20px;padding:24px;box-shadow:0 4px 16px #3451}.toolbar,.choices{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}.choices button{flex:1;min-width:68px;font-weight:600}.status{padding:12px 16px;border-left:3px solid #cf763b;background:#f4eddf;min-height:52px;border-radius:4px}.big{font-size:80px;text-align:center;line-height:1.4}.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.grid button{padding:8px}.picked{background:#245b59!important;color:white}.progress{display:flex;gap:5px;flex-wrap:wrap;margin:14px 0}.dot{width:20px;height:7px;border-radius:6px;background:#d7dace}.dot.done{background:#d17a36}.note{font-size:13px;margin-top:22px;color:#59716e}footer{max-width:1180px;margin:40px auto;padding:24px;border-top:1px solid #ccc6b9;font-size:12px;color:#61706b}#writer{width:280px;height:280px;margin:12px auto;touch-action:none;background:linear-gradient(45deg,transparent 49.7%,#ced9cc 50%,transparent 50.3%),linear-gradient(-45deg,transparent 49.7%,#ced9cc 50%,transparent 50.3%);border:1px solid #c6ccbd}#writer svg{display:block}.kana-stage{height:185px;border:1px dashed #b9c6b5;border-radius:15px;display:grid;place-items:center;background:#eef1e3;overflow:hidden}.kana-stage span{font-size:82px;animation:float 3s ease-in-out infinite}@keyframes float{50%{transform:translateY(14px)}}input,textarea{padding:10px;border:1px solid #9cad9f;border-radius:8px;max-width:100%;background:white}.composer{display:flex;gap:8px;justify-content:center}.composer select{width:30%;font-size:25px}.lesson-list{display:flex;gap:6px;flex-wrap:wrap}.lesson-list button{padding:5px 11px;font-size:22px}@media(max-width:700px){header{padding:16px 20px}main{margin:20px auto}.intro{grid-template-columns:1fr;gap:20px}.art{aspect-ratio:2.1;height:auto;max-height:220px}.panel{padding:18px}h1{font-size:38px}.grid{grid-template-columns:repeat(5,1fr)}.big{font-size:66px}.choices button{padding:10px}footer{margin-top:25px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
[hidden]{display:none!important}
.kana-stage{background:linear-gradient(#fff9,#fff9),url('scene.webp') center/cover}.kana-stage span{background:#fffdf3e8;padding:0 30px;border-radius:20px}#writer{background:linear-gradient(#fffffff0,#fffffff0),url('scene.webp') center/cover}