:root{font-family:system-ui,sans-serif;color:#153644;background:#f2f7f8}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;gap:20px;padding:22px 5%;background:white;border-bottom:1px solid #d5e5e8}a{color:#086b70}header span,.tag{font-size:.75rem;letter-spacing:.14em;font-weight:800;color:#14777b}main{max-width:1200px;margin:auto;padding:30px 24px}.intro{max-width:850px;margin-bottom:28px}h1{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;margin:12px 0}h2{font-size:1.65rem;margin:8px 0 16px}p{line-height:1.6}.notice,.hint{background:#e0f2ed;border-radius:16px;padding:14px 18px}.settings,.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.settings{padding:20px;background:white;border-radius:20px}label{display:block;font-size:.95rem}select,textarea,input[type=text]{font:inherit;display:block;width:100%;padding:12px;border:1px solid #acc5ce;border-radius:10px;background:white;color:#153644;margin:7px 0}input[type=checkbox]{width:18px;height:18px;vertical-align:middle}button{font:inherit;font-weight:650;background:white;color:#174452;border:1px solid #9dbcc4;border-radius:12px;padding:12px 18px;cursor:pointer}button:hover{background:#e5f5f1}button:focus-visible,a:focus-visible{outline:3px solid #9a6100;outline-offset:3px}button:disabled{opacity:.55;cursor:default}.primary,button[aria-pressed=true]{background:#12666c;color:white;border-color:#12666c}#activities{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.workspace{display:grid;grid-template-columns:1fr 1fr;border-radius:28px;overflow:hidden;background:white;box-shadow:0 16px 50px #15364412}.scene{min-height:350px;display:grid;place-items:center;background:linear-gradient(140deg,#d8edf6,#fbefd6);padding:25px}.scene svg{width:100%;max-height:400px}.task{padding:28px}.hint{margin:16px 0}.recorder,.review{background:white;border:1px solid #d5e5e8;border-radius:24px;padding:26px;margin-top:24px}.recorder{display:grid;grid-template-columns:1fr 1fr;gap:30px}audio{width:100%}.small,footer{font-size:.85rem;color:#496570}.review textarea{resize:vertical}.choices{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.float{animation:float 5s ease-in-out infinite}body.quiet .float{animation:none}@keyframes float{50%{transform:translateY(-6px)}}@media(prefers-reduced-motion:reduce){.float{animation:none}}@media(max-width:700px){header span{display:none}#activities{grid-template-columns:1fr 1fr}.workspace,.recorder{grid-template-columns:1fr}.scene{min-height:230px}.task{padding:20px}main{padding:20px 14px}}[hidden]{display:none!important}
