*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Trebuchet MS","Segoe UI",Verdana,system-ui,sans-serif;background:#fff8e7;color:#2b2d42;line-height:1.45}
.wrap{max-width:720px;margin:0 auto;padding:18px 16px 40px}
header.top{text-align:center;padding:10px 0 6px}
.logo{font-size:2.6rem;line-height:1}
h1{font-size:1.7rem;margin:.3em 0 .1em;color:#264653}
.sub{margin:0;color:#6c757d;font-weight:bold}
.intro{background:#fff;border-radius:18px;padding:14px 18px;margin:18px 0;box-shadow:0 3px 0 #f1dca7;font-size:1.08rem}
h2.theme{display:flex;align-items:center;gap:.4em;margin:28px 0 10px;font-size:1.3rem;color:#fff;padding:10px 14px;border-radius:14px}
ul.list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
ul.list a{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;background:#fff;border-radius:14px;text-decoration:none;color:#2b2d42;font-size:1.05rem;box-shadow:0 3px 0 #e9d8a6}
ul.list a:active{transform:translateY(2px);box-shadow:0 1px 0 #e9d8a6}
.nr{flex:0 0 auto;min-width:2.6em;height:2.6em;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold}
.card{background:#fff;border-radius:24px;padding:22px 18px 26px;margin-top:14px;text-align:center;box-shadow:0 5px 0 #f1dca7}
.fall{display:inline-block;color:#fff;font-weight:bold;padding:6px 16px;border-radius:999px;font-size:1.1rem;letter-spacing:.03em}
.card h1{font-size:1.55rem;margin:16px 0 20px}
.play{width:170px;height:170px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:4.2rem;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 8px 0 rgba(0,0,0,.18);-webkit-tap-highlight-color:transparent}
.play:active{transform:translateY(4px);box-shadow:0 4px 0 rgba(0,0,0,.18)}
.play:focus-visible{outline:4px solid #264653;outline-offset:4px}
.hint{margin:14px 0 12px;font-weight:bold;font-size:1.1rem}
audio{width:100%;margin-top:6px}
.meta{color:#6c757d;font-size:.95rem;margin-top:10px}
nav.pn{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
nav.pn a,a.back{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 16px;background:#fff;border-radius:14px;text-decoration:none;color:#264653;font-weight:bold;box-shadow:0 3px 0 #e9d8a6}
nav.pn a{flex:1}
a.back{margin-top:6px}
footer{text-align:center;color:#8a8a8a;font-size:.9rem;margin-top:36px}