:root { --main:#2b5fd9; --ok:#1a8a4a; --ng:#c0392b; --bg:#f6f8fc; --ink:#1d2433; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.7 -apple-system,"Hiragino Sans",sans-serif; overflow-x:hidden; }
main { max-width:520px; margin:0 auto; padding:16px 16px 96px; }
h1 { font-size:22px; margin:8px 0 12px; } h2 { font-size:19px; margin:16px 0 8px; }
.card { background:#fff; border-radius:14px; padding:16px; margin:12px 0; box-shadow:0 1px 3px rgba(0,0,0,.08); }
button,.btn { font:inherit; border:0; border-radius:12px; padding:12px 18px; background:var(--main); color:#fff; width:100%; margin:6px 0; cursor:pointer; }
button.sub { background:#e3e9f7; color:var(--main); }
button.choice { background:#fff; color:var(--ink); border:2px solid #d5dcec; text-align:left; }
button.choice.right { border-color:var(--ok); background:#e8f6ee; } button.choice.wrong { border-color:var(--ng); background:#fdecea; }
input,textarea { font:inherit; width:100%; padding:12px; border:2px solid #d5dcec; border-radius:12px; margin:6px 0; }
.en { white-space:pre-line; font-family:Georgia,serif; font-size:18px; } .ja { color:#5a6478; font-size:15px; }
.progress { color:#5a6478; font-size:14px; } .note { color:#5a6478; font-size:14px; }
.msg-ok { color:var(--ok); font-weight:bold; } .msg-ng { color:var(--ng); font-weight:bold; }
#ask-open { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:auto; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.25); }
#ask { position:fixed; inset:0; background:var(--bg); padding:16px; overflow-y:auto; z-index:10; max-width:520px; margin:0 auto; }