.methods-page { margin: 0 auto; max-width: 70rem; padding: 1rem; }
.method-page-group { margin-block: 2rem; }
.method-topic-group { margin-block: 1rem; }
.method-topic { background: #fff; border: 1px solid #d6c6ab; border-radius: .75rem; margin-block: .65rem; overflow: hidden; }
.method-topic > summary { cursor: pointer; padding: .65rem 1rem; color: #473920; }
.method-topic > summary img { width: 7rem; max-width: 32%; height: 3.65rem; object-fit: cover; vertical-align: middle; border-radius: .3rem; margin-inline: .35rem .75rem; }
.method-topic > summary span { display: inline-block; vertical-align: middle; font-weight: 650; }
.method-topic > summary small { display: block; color: #64563d; font-weight: 400; }
.method-topic-content, .method-tool, .method-history { padding: 1rem; }
.method-tool, .method-history { background: #fffaf0; border: 1px solid #e6d8c0; border-radius: .5rem; margin-block: 1rem; }
.method-tool label { display: block; margin-block: .65rem; }
.method-tool input, .method-tool select { display: block; max-width: 100%; width: 20rem; font: inherit; border: 1px solid #978362; border-radius: .3rem; padding: .45rem; }
.method-tool fieldset { border: 1px solid #d6c6ab; }
.methods-page button { font: inherit; margin: .25rem .3rem .25rem 0; padding: .4rem .65rem; }
.method-facts dt { font-weight: 600; }
.method-facts dd { margin: 0 0 .45rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.method-facts pre { max-height: 24rem; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; }
.method-hexagrams { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.method-line { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .45rem 0; }
.method-line::before { content: ""; display: inline-block; width: min(4rem, 100%); height: .35rem; background: linear-gradient(to right,#473920 0 43%,transparent 43% 57%,#473920 57%); }
.method-line[data-yang=true]::before { background: #473920; }
.method-palaces { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 27rem; gap: .25rem; }
.method-palaces div { padding: .35rem; text-align: center; border: 1px solid #ab9673; overflow-wrap: anywhere; }
.method-palaces span { display: block; }
.method-history li { overflow-wrap: anywhere; }
#method-history-result { overflow-wrap: anywhere; }
@media (max-width: 540px) { .method-tool, .method-topic-content { padding: .65rem; } }