:root { font-family: system-ui, sans-serif; color: #193746; background: #fff; }
    body { max-width: 58rem; margin: auto; padding: 1.2rem; line-height: 1.55; }
    h1 { line-height: 1.2; }
    .note, .source, .panel { border: 2px solid #193746; border-radius: .5rem; padding: 1rem; margin: 1rem 0; }
    .note { background: #fff1e8; }
    .source { background: #eaf4f8; }
    .panel { background: #eef7ee; }
    .controls { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.1rem 0; }
    button { min-height: 3rem; padding: .55rem 1rem; font: inherit; font-weight: 700; color: #193746; background: white; border: 2px solid #193746; border-radius: .45rem; cursor: pointer; }
    button[aria-pressed="true"] { background: #193746; color: white; }
    button:focus-visible { outline: 4px solid #ad4c00; outline-offset: 3px; }
    ol { display: flex; gap: .8rem; flex-wrap: wrap; padding-left: 0; }
    li { min-width: 8rem; padding: .8rem; border: 2px solid #193746; background: white; font-weight: 700; list-style-position: inside; }
    .picture { display: block; width: 4.5rem; height: 3.2rem; margin-bottom: .35rem; }
    .symbol { font-size: 2rem; display: block; }
    .small { font-size: .95rem; }
.resource-heading-context{display:block;margin-top:.8rem;font-size:.8rem;line-height:1.5;font-weight:650;letter-spacing:.02em;color:#4c625a}