:root { --ink:#19251f; --muted:#607067; --paper:#f7f8f3; --card:#fff; --line:#dce3db; --accent:#a14312; --ok:#236a50; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Yu Gothic UI","Yu Gothic",system-ui,sans-serif; color:var(--ink); background:var(--paper); line-height:1.75; }
main { max-width:820px; margin:auto; padding:32px 22px 70px; }
a { color:#175a92; }
h1 { margin:0 0 8px; font-size:clamp(1.55rem,4vw,2.25rem); }
h2 { margin-top:30px; font-size:1.2rem; }
.meta, footer { color:var(--muted); }
.card, blockquote { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin:14px 0; }
blockquote { border-left:6px solid var(--accent); margin-left:0; }
.judge-actions { margin:24px 0; padding:18px; border:1px solid var(--line); border-radius:10px; background:#fff; text-align:center; }
.judge-actions p { margin:0 0 12px; }
button { min-width:120px; margin:0 5px; padding:10px 18px; border:1px solid var(--ok); border-radius:6px; background:#fff; color:#174a39; font:inherit; cursor:pointer; }
button:hover, button:focus-visible { background:#eef6f0; }
.feedback, .result { margin:20px 0; padding:14px 18px; border-radius:6px; font-weight:700; }
.feedback.correct, .result { background:#eef6f0; border-left:6px solid var(--ok); }
.feedback.incorrect { background:#fff3f1; border-left:6px solid #a72828; }
.diagram { margin:22px 0; padding:18px; border:1px solid var(--line); border-radius:10px; background:#fbfcf8; }
.diagram figcaption { font-weight:700; margin-bottom:14px; }
code { background:#edf1ed; padding:2px 5px; border-radius:4px; }
ul { padding-left:1.35em; }
footer { border-top:1px solid var(--line); margin-top:36px; padding-top:15px; font-size:.9rem; }
.redo-answer { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.study-navigation { margin:18px 0 24px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.study-navigation-links { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:10px; }
.study-navigation-empty { color:var(--muted); }
.study-record-status { color:var(--muted); font-size:.9rem; margin:8px 0 0; }
.redo-actions { margin:12px 0; }
.study-notes h2 { margin-top:0; }
.study-notes fieldset { min-width:0; border:1px solid var(--line); margin-bottom:16px; }
.study-notes [data-cause-tags] { display:flex; flex-wrap:wrap; gap:8px 16px; }
.study-notes label { display:block; }
.study-notes textarea { display:block; width:100%; margin:6px 0 16px; padding:8px; font:inherit; }
.study-notes input[type="date"] { max-width:100%; padding:8px; font:inherit; }
@media(max-width:520px){ button{display:block; width:100%; margin:8px 0;} .diagram{padding:14px;} }