:root { color-scheme: light; font-family: system-ui, sans-serif; color: #18394a; background: #fff; }
    body { max-width: 64rem; margin: auto; padding: 1.1rem; line-height: 1.55; }
    h1, h2 { line-height: 1.2; }
    .notice, .source, .copy { border: 2px solid #18394a; border-radius: .45rem; padding: 1rem; margin: 1rem 0; }
    .notice { background: #fff1e4; }
    .source { background: #e8f4fb; }
    .copy { background: #eaf6ed; }
    .controls { display: flex; flex-wrap: wrap; gap: .7rem; margin: .9rem 0; }
    button, select { min-height: 3rem; padding: .45rem .75rem; font: inherit; font-weight: 700; border: 2px solid #18394a; border-radius: .35rem; color: #18394a; background: #fff; }
    button { cursor: pointer; }
    button[aria-pressed="true"] { background: #18394a; color: #fff; }
    button:focus-visible, select:focus-visible, a:focus-visible { outline: 4px solid #b65300; outline-offset: 3px; }
    ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; padding-left: 0; list-style: none; }
    li { border: 2px solid #18394a; background: #fff; padding: .6rem; min-height: 8rem; }
    .picture { display: block; width: 5.5rem; height: 5.5rem; margin: .5rem auto; }
    .letter { font-size: 2.4rem; font-weight: 800; display: none; }
    [data-view="symbols"] .picture { display: none; }
    [data-view="symbols"] .letter { display: block; }
    .copy ol li { min-height: 6rem; }
    .copy label { display: block; font-weight: 700; }
    .copy select { width: 100%; }
    #status { border-left: .4rem solid #18394a; padding: .7rem; min-height: 2rem; background: #fff; }
    .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}