* { box-sizing: border-box; }
body { font-family: -apple-system,"PingFang SC","Microsoft YaHei",sans-serif; max-width:820px; margin:auto; padding:24px 16px 110px; color:var(--ink); background:var(--bg); font-size:17px; line-height:1.8; overflow-wrap:anywhere; }
h1 { font-size:26px; line-height:1.5; margin:10px 0; }
h2 { font-size:21px; margin:22px 0 10px; }
h3,summary { font-size:18px; }
h4 { font-size:17px; margin:12px 0; }
a { color:var(--ac); text-underline-offset:3px; }
nav { display:flex; flex-wrap:wrap; gap:8px 20px; }
.note,.source,.status { color:var(--muted); font-size:16px; }
.gist { padding:14px 18px; background:var(--ac-soft); border:1px solid var(--ac); border-radius:12px; }
details { margin:14px 0; padding:12px 16px; border:1px solid var(--line); background:var(--card); border-radius:12px; box-shadow:var(--shadow); }
details details { box-shadow:none; padding:10px 12px; }
summary { cursor:pointer; font-weight:700; }
summary:focus-visible,a:focus-visible,button:focus-visible { outline:3px solid var(--ac); outline-offset:3px; }
.compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.example { min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; }
.example p { margin:6px 0; }
.passage { white-space:pre-wrap; }
ul { padding-left:24px; }
li { margin:8px 0; }
textarea,select,button { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px; }
select,textarea { width:100%; max-width:100%; }
textarea { min-height:150px; resize:vertical; margin:8px 0; }
button { cursor:pointer; min-height:44px; border-color:var(--ac); }
label { display:block; margin:8px 0; }
.practice { border-top:2px solid var(--line); margin-top:24px; padding-top:6px; }
.answer { border-left:3px solid var(--ac); padding:4px 12px; margin:12px 0; background:var(--ac-soft); }
.controls { display:flex; flex-wrap:wrap; gap:10px; }
.error { color:var(--ink); border:1px solid var(--ac); padding:12px; background:var(--warn-soft); }
[hidden] { display:none!important; }
@media(max-width:600px) { .compare { grid-template-columns:minmax(0,1fr); } details { padding:10px 12px; } body { padding-left:14px; padding-right:14px; } }