/* Usage guide + FAQ block (.guide) shared by the tool pages. Colours are inherited so it fits light and dark pages. */
.guide { margin-top: 22px; text-align: left; }
.guide > * { max-width: 860px; }
.guide h2 { margin: 0 0 14px; font-size: 1.2rem; line-height: 1.4; }
.guide h3 { font-size: 1.02rem; margin: 26px 0 8px; line-height: 1.5; }
.guide p, .guide li { font-size: .93rem; line-height: 1.9; margin: .45em 0; color: inherit; }
.guide ol, .guide ul { margin: .4em 0 .6em; padding-left: 1.5em; }
.guide li { padding-left: .1em; }
.guide details { margin: 10px 0 0; padding: 0 14px; border: 1px solid rgba(128, 144, 170, .38); border-radius: 12px; background: transparent; }
.guide details[open] { padding-bottom: 8px; }
.guide summary { min-height: 46px; display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: .95rem; line-height: 1.5; }
.guide details p { font-size: .92rem; opacity: .92; margin: .3em 0 .5em; color: inherit; }
.guide a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.guide .guide-end { margin-top: 26px; padding-top: 12px; border-top: 1px solid rgba(128, 144, 170, .3); font-size: .85rem; opacity: .85; }
.guide .guide-end a { display: inline-flex; align-items: center; min-height: 44px; }
.glass-panel.guide { padding: 24px; margin-top: 24px; }
/* Pages that draw their own cards from CSS variables (sudoku, yinyang): a centered card below the app */
.guide.guide-page { max-width: 1000px; width: calc(100% - 32px); margin: 28px auto 8px; padding: 24px; box-sizing: border-box;
    background: var(--bg-card, transparent); color: var(--text-main, inherit); border: 1px solid var(--border-subtle, rgba(128, 144, 170, .3)); border-radius: var(--radius-lg, 18px); }
.guide.guide-page > * { max-width: 860px; }
@media (max-width: 600px) {
    .glass-panel.guide { padding: 16px; }
    .guide h3 { margin-top: 22px; }
}
@media print { .guide { display: none; } }
/* guide-related:start */
/* "Related guides" links at the end of the usage guide. The heading switches language with CSS (the block is data-i18n-ignore). */
.guide .guide-related ul { list-style: none; margin: .4em 0 .6em; padding: 0; }
.guide .guide-related li { margin: 10px 0 0; padding: 0; }
.guide .guide-related a { display: block; min-height: 44px; box-sizing: border-box; padding: 10px 14px; border: 1px solid rgba(128, 144, 170, .38); border-radius: 12px; text-decoration: none; line-height: 1.5; }
.guide .guide-related a b { display: block; font-size: .95rem; }
.guide .guide-related a span { display: block; margin-top: 3px; font-size: .86rem; line-height: 1.6; opacity: .85; }
.guide .guide-related a:hover b, .guide .guide-related a:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.guide .guide-related .gr-note { font-size: .86rem; opacity: .8; }
html:lang(en) .guide-related .gr-zh { display: none; }
html:not(:lang(en)) .guide-related .gr-en { display: none; }
/* guide-related:end */