:root {
  color-scheme: light;
  --ink: #233c37;
  --green: #244b40;
  --red: #923e33;
  --muted: #56675e;
  --line: #d9d4c7;
  --paper: #fffdf7;
  --wash: #f0eee5;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #f7f5ee;
}
* { box-sizing: border-box }
body { margin: 0; font-size: 1rem; line-height: 1.6 }
[hidden] { display: none !important }
.wrap { width: min(1080px, calc(100% - 44px)); margin-inline: auto }
header { border-bottom: 1px solid var(--line); background: var(--paper) }
.bar, .panda-nav-home, .student, .section-head, .actions, .meta-row { display: flex; align-items: center }
.bar, .section-head, .meta-row { justify-content: space-between; gap: 16px }
.bar { min-height: 66px }
.panda-nav-home { gap: 10px; color: var(--ink); font: bold 1.14rem Georgia, serif; text-decoration: none }
.seal { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #d2ccba; border-radius: 12px; background: #f2eee1 }
.student { gap: 8px; color: var(--muted); font-size: .87rem; font-weight: 650 }
.student b { border-radius: 5px; padding: 2px 7px; background: #e7eee6; color: var(--green) }
.cover { display: grid; grid-template-columns: 1.13fr 1fr; overflow: hidden; margin: 26px 0 18px; border: 1px solid #d3c8b0; border-radius: 15px; background: #f5edde }
.cover-copy { padding: clamp(24px,4vw,46px); align-self: center }
.cover-art { display: block; width: 100%; height: 100%; max-height: 300px; object-fit: cover; object-position: 52% 57%; border-left: 1px solid #d3c8b0 }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 7px; color: var(--red); font-size: .72rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase }
.eyebrow i { display: inline-block; width: 24px; height: 2px; background: var(--red) }
.eyebrow span { color: #a49279 }
h1,h2,h3,h4 { text-wrap: pretty; line-height: 1.17; margin: 0; color: var(--ink) }
h1,h2,h3,.score { font-family: Georgia,'Times New Roman',serif }
h1 { font-weight: 500; letter-spacing: -.05em; font-size: clamp(2.45rem,5vw,4rem) }
h1 em { font-weight: 400; color: var(--red); white-space: nowrap }
.intro { max-width: 40ch; margin: 11px 0 0; color: #45564c }
.tabs { display: grid; grid-template-columns: repeat(4,1fr); padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); gap: 3px }
button { cursor: pointer; font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 10px 16px; background: var(--paper); font-weight: 650; min-height: 44px }
button:disabled { cursor: default; opacity: .55 }
button:hover:not(:disabled) { border-color: #698174; background: #edf1e9 }
:focus-visible { outline: 3px solid #a95030; outline-offset: 3px }
.tabs button { padding: 8px; border-color: transparent; background: transparent }
.tabs small { color: var(--red); font-size: .7rem; margin-right: 7px }
.tabs button[aria-current],button.primary { background: var(--green); color: white; border-color: var(--green) }
.tabs button[aria-current]:hover,button.primary:hover:not(:disabled) { background: #1a3f35 }
.tabs [aria-current] small { color: #dbd6ab }
#contenu { scroll-margin-top: 12px; outline: none }
.section-head { margin: 32px 0 16px; align-items: end; flex-wrap: wrap }
h2 { font-size: clamp(1.8rem,4vw,2.4rem); font-weight: 500; letter-spacing: -.035em }
h3 { font-size: clamp(1.45rem,3vw,2rem); font-weight: 500 }
h4 { font-size: 1.03rem }
p { margin-block: .6em }
.badge,.pill { display: inline-block; width: fit-content; border: 1px solid #d8d6c5; border-radius: 100px; font-size: .78rem; font-weight: 650; color: #435e4d; padding: 4px 11px; background: #eef0e6 }
.chapters,.actions { display:flex; flex-wrap:wrap; gap: 9px }
.chapters { margin: 0 0 14px }
.chapters button { padding: 8px 14px; color: var(--muted); font-size:.93rem }
.chapters [aria-pressed="true"] { border-color: #aa7865; color: #843e30; background: #f6e9df }
.paper { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: clamp(20px,3.3vw,36px); margin-bottom: 14px }
.article-head { border-bottom: 1px solid var(--line); padding-bottom: 19px }
.rule { display: grid; grid-template-columns: 1.13fr 1fr; gap: clamp(16px,4vw,48px); padding: 20px 0; border-bottom: 1px solid #e6e2d6; align-items: start }
.rule > :only-child { grid-column: 1/-1; max-width: 78ch }
.rule p:last-child { margin-bottom:0 }
.examples { display: grid; row-gap: 4px; padding-left: 14px; border-left: 3px solid #c5ac7e; color: var(--muted) }
.examples b { color: var(--ink) }
aside,.try,.feedback,.hint { padding: 13px 16px; border-radius: 6px; background: #f2efe4 }
aside p,.try p { margin: 4px 0 0 }
.try { margin: 16px 0 4px }
summary { cursor: pointer; font-weight: 650; padding-block: 4px }
details[open] summary { margin-bottom: 8px }
.decomp { display: flex; flex-wrap: wrap; gap: 4px }
.decomp span { padding: 6px 10px; text-align:center; background:#e8efe6; border-bottom: 2px solid #62785d; font: 1.7rem Georgia,serif }
.decomp span:first-child { background:#f4e6dc; border-color:#af7261 }
.decomp span:last-child { background:#f1ebd5; border-color:#af9a50 }
.decomp b { display:block; font: 600 .72rem system-ui,sans-serif }
.actions { margin-top: 21px }
.subtle,.meta-row,.footnote { color: var(--muted) }
.footnote,.meta-row { font-size:.88rem }
progress { width:100%; height: 8px; accent-color: var(--green); margin: 12px 0 20px }
fieldset { border: 0; padding: 0; margin: 18px 0 0; min-width: 0 }
.choices { display:grid; gap: 8px }
.choice { display:flex; gap: 10px; align-items: center; padding: 11px 15px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer }
.choice:has(:checked) { border-color: var(--green); background:#e9efe7 }
input { accent-color: var(--green) }
input[type=text] { display:block; width: min(100%,480px); font: inherit; padding: 12px; border:1px solid #9fa898; border-radius: 6px; margin:8px 0; background:white; color:var(--ink) }
.feedback { margin-top:16px; border-left: 4px solid #6d8968; background:#eef3eb }
.feedback.error,.alert { border-left: 4px solid #a85841; background:#faf0e9 }
.alert { padding:12px }
.error-text { color: #883a2b; font-weight:600 }
.score { color: var(--green); font-size:2.6rem; line-height:1.1 }
.ledger { padding: 15px 0; border-top:1px solid var(--line) }
.ledger summary { font-variant-numeric:tabular-nums }
.copy-row { border-top:1px solid var(--line); padding:14px 0; overflow-wrap:anywhere }
.copy-row p { margin:3px 0 }
.copy-row h4 { margin: 4px 0 8px }
.good { color:#3b6545 } .bad { color:var(--red) }
footer { padding:30px 0; border-top:1px solid var(--line); margin-top:36px; color:var(--muted); font-size:.85rem }
footer span { padding:0 8px; color:#a06349 }
.skip,.sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%) }
.skip:focus { width:auto; height:auto; padding:10px; clip-path:none; background:white; z-index:2 }
@media(max-width:680px) {
 .wrap { width:calc(100% - 28px) }
 .cover { grid-template-columns: 1fr; margin:16px 0 12px }
 .cover-copy { padding: 22px }
 .cover-art { height:102px; border:0; border-top:1px solid #d3c8b0; object-position:50% 58% }
 .intro { max-width:none }
 .tabs { gap:0; padding:3px }
 .tabs small { display:none }
 .tabs button { padding:6px 2px; font-size:.84rem }
 .rule { grid-template-columns:1fr; gap:13px }
 .bar { min-height:55px }
 .panda-nav-home { font-size:1rem }
 .section-head { margin:23px 0 12px; gap:9px }
 .chapters { gap:5px }
 .chapters button { padding:7px 10px; font-size:.84rem }
 .meta-row { flex-wrap:wrap; gap:3px }
}