:root {
    --g-radius: 22px;
    --g-tile-min-h: 128px;
    --g-grid-gap: 12px;
    --g-home-maxw: 620px;
    --g-article-maxw: 720px;
    --g-stagger-offset: 46px;
    --g-card-bg: #ffffff;
    --g-tile-bg: #ffffff;
    --g-chevron: rgba(60, 60, 67, 0.6);
}
@media (prefers-color-scheme: dark) {
    :root {
        --g-card-bg: #1c1c1e;
        --g-tile-bg: #1c1c1e;
        --g-chevron: rgba(235, 235, 245, 0.6);
    }
}

.guide-page { max-width: var(--g-home-maxw); margin: 0 auto; padding: 26px 16px 40px; }
.guide-article-page { max-width: var(--g-article-maxw); margin: 0 auto; padding: 26px 20px 40px; }


.crumbs {
    font-size: 15px; margin: 0; display: flex; flex-wrap: nowrap; gap: 6px; align-items: center;
    min-width: 0; flex: 0 1 auto; max-width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 999px;
    box-shadow: var(--card-shadow), var(--glass-highlight);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 0 17px; min-height: 44px; margin-bottom: 24px; box-sizing: border-box;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: 0.5; }


.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-grid-gap); }
.guide-tile {
    position: relative; display: flex; flex-direction: column; align-items: flex-start;
    min-height: var(--g-tile-min-h); padding: 16px; border-radius: var(--g-radius);
    background: var(--g-tile-bg); text-decoration: none; color: inherit; overflow: hidden;
    border: 1px solid transparent; isolation: isolate;
    transition: transform 140ms ease;
}
.guide-tile::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--g-radius);
    background: linear-gradient(to bottom right,
        rgb(var(--tint) / 0.18) 0%, rgb(var(--tint) / 0.04) 55%, transparent 100%);
}
.guide-tile { border-color: rgb(var(--tint) / 0.22); }
.guide-tile:active { transform: scale(0.985); }
.guide-tile .t-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
.guide-tile .t-icon svg { width: 30px; height: 30px; fill: rgb(var(--tint)); }
.guide-tile .t-title {
    margin-top: auto; padding-top: 14px; font-size: 20px; font-weight: 500;
    color: var(--fg); line-height: 1.2;
}

.guide-tile.featured {
    grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px;
    aspect-ratio: auto; min-height: 78px; padding: 16px 18px; margin-top: 14px;
}
.guide-tile.featured::before {
    background: linear-gradient(to bottom,
        rgb(var(--tint) / 0.2) 0%, rgb(var(--tint) / 0.06) 55%, transparent 100%);
}
.guide-tile.featured .t-icon { width: 34px; height: 26px; }
.guide-tile.featured .t-icon svg { width: 34px; height: 26px; }
.guide-tile.featured .t-title { margin-top: 0; padding-top: 0; padding-left: 4px; }


.stagger { display: flex; align-items: flex-start; gap: var(--g-grid-gap); }
.stagger-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--g-grid-gap); }
.stagger-col.trailing { margin-top: var(--g-stagger-offset); }
.rec-card {
    position: relative; display: block; overflow: hidden; text-decoration: none; color: inherit;
    background: var(--g-card-bg); border-radius: var(--g-radius); padding: 16px;
    min-height: 232px; max-height: 268px; border: 1px solid var(--card-border);
    box-shadow: 0 2px 14px rgba(0,0,0,0.05);
    transition: transform 140ms ease;
}
.rec-card:active { transform: scale(0.99); }

@media (max-width: 560px) { .rec-card { min-height: 186px; max-height: 214px; } }
.rec-card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1.22; color: var(--fg); }
.rec-card p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

.rec-card::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 74px; pointer-events: none;
    background: linear-gradient(to bottom,
        rgb(from var(--g-card-bg) r g b / 0) 0%,
        rgb(from var(--g-card-bg) r g b / 0.92) 62%,
        var(--g-card-bg) 100%);
}
@supports not (background: rgb(from white r g b / 1)) {
    .rec-card::after { background: linear-gradient(to bottom, transparent 0%, var(--g-card-bg) 78%); }
}


.tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tagrow span {
    font-size: 13px; color: var(--muted); background: var(--tertiary-fill, rgba(118,118,128,0.12));
    padding: 5px 11px; border-radius: 999px;
}


.art-title { font-size: 30px; font-weight: 700; letter-spacing: -0.4px; margin: 0 0 6px; line-height: 1.15; }
.art-meta { font-size: 14px; color: var(--muted); margin: 0 0 20px; }

.guide-intro { font-size: 17px; line-height: 1.45; color: var(--fg); margin: 4px 0 14px; }
.warn-card {
    display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px;
    background: var(--g-card-bg); border: 1px solid var(--card-border);
    border-radius: var(--g-radius); padding: 16px;
}
.warn-card svg { width: 30px; height: 30px; flex: 0 0 auto; fill: #ffcc00; margin-top: 1px; }
.warn-card b { display: block; font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.warn-card span { font-size: 15px; color: var(--muted); line-height: 1.35; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.intro-panel {
    font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0 0 22px;
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow), var(--glass-highlight);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 15px 18px;
}
.crumbs { font-weight: 500; }
.crumbs a { color: var(--fg); opacity: 0.75; }
.crumbs::-webkit-scrollbar { display: none; }
.crumbs > * { flex: 0 0 auto; white-space: nowrap; }
.art-sec { border-top: 1px solid var(--separator); }
.art-sec:first-of-type { border-top: 0; }
.art-sec > summary {
    display: flex; align-items: center; gap: 16px; justify-content: space-between;
    cursor: pointer; list-style: none; padding: 18px 0;
    font-family: "New York", ui-serif, Georgia, "Times New Roman", serif;
    font-size: 25px; font-weight: 700; color: var(--fg); line-height: 1.2;
}
.art-sec > summary::-webkit-details-marker { display: none; }
.art-sec > summary::after {
    content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 2px;
    border-right: 2.5px solid var(--g-chevron); border-bottom: 2.5px solid var(--g-chevron);
    transform: rotate(-45deg); transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.art-sec[open] > summary::after { transform: rotate(45deg); }

.art-body { animation: gSecFade 120ms ease-out both; }
.art-body > *:last-child { margin-bottom: 20px; }
@keyframes gSecFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .art-sec > summary::after, .art-body { transition: none; animation: none; }
}

.art-body p { margin: 0 0 15px; font-size: 17px; line-height: 1.6; }
.art-body h3 { font-size: 19px; font-weight: 700; margin: 24px 0 8px; }
.art-body h4 { font-size: 17px; font-weight: 600; margin: 20px 0 6px; }
.art-body ul, .art-body ol { margin: 0 0 15px; padding-left: 22px; }
.art-body li { margin-bottom: 7px; font-size: 17px; line-height: 1.55; }
.art-body blockquote {
    margin: 0 0 15px; padding: 2px 0 2px 16px; border-left: 3px solid var(--accent);
    color: var(--muted); font-style: italic;
}
.art-body code { font-size: 15px; background: var(--tertiary-fill, rgba(118,118,128,0.12));
    padding: 1px 5px; border-radius: 5px; }
.art-body .bible-ref {
    color: var(--accent); background: none; border: 0; padding: 0; font: inherit;
    cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.art-body .bible-ref:hover { text-decoration: underline; }
.art-body a.wiki-ref { color: var(--accent); text-decoration: none; }
.art-body a.wiki-ref:hover { text-decoration: underline; }
.art-table-wrap { overflow-x: auto; margin: 0 0 15px; }
.art-body table { border-collapse: collapse; width: 100%; font-size: 15px; }
.art-body th, .art-body td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--separator); }
.art-body th { font-weight: 600; }


.art-detail {
    border: 1px solid var(--card-border); border-radius: 18px; margin: 0 0 14px; overflow: hidden;
    background: var(--g-card-bg); box-shadow: 0 2px 14px rgba(0,0,0,0.05);
}
.art-detail > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    cursor: pointer; list-style: none; padding: 15px 17px;
    font-size: 16px; font-weight: 600; color: var(--fg);
}
.art-detail > summary::-webkit-details-marker { display: none; }
.art-detail > summary::after {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px;
    border-right: 2px solid var(--g-chevron); border-bottom: 2px solid var(--g-chevron);
    transform: rotate(-45deg); transition: transform 200ms ease;
}
.art-detail[open] > summary::after { transform: rotate(45deg); }
.art-detail .art-detail-body { padding: 0 17px; }
.art-detail .art-detail-body > *:last-child { margin-bottom: 14px; }


.child-list { margin-top: 8px; }
.child-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 2px; text-decoration: none; color: var(--fg); font-size: 17px;
    border-top: 1px solid var(--separator);
}
.child-list a:hover { opacity: 0.72; }
.child-list a::after {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px;
    border-right: 2.5px solid var(--g-chevron); border-bottom: 2.5px solid var(--g-chevron);
    transform: rotate(-45deg);
}


.gsearch { margin: 0 0 16px; }
.gsearch input {
    width: 100%; font: inherit; font-size: 16px; color: var(--fg); box-sizing: border-box;
    background: var(--card-bg); border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow), var(--glass-highlight);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 999px; padding: 0 18px; min-height: 44px; -webkit-appearance: none;
}
.gsearch input::placeholder { color: var(--muted); }
.gsearch input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.gtags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gtags button {
    font: inherit; font-size: 13px; cursor: pointer; color: var(--muted);
    background: var(--tertiary-fill, rgba(118,118,128,.12)); border: 0;
    padding: 6px 12px; border-radius: 999px;
}
.gtags button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.gresults { margin: 14px 0 0; }
.gresults a {
    display: block; text-decoration: none; color: inherit; padding: 12px 2px;
    border-top: 1px solid var(--separator);
}
.gresults a b { display: block; font-size: 16px; font-weight: 600; }
.gresults a span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.gresults a em { font-style: normal; background: rgb(121 114 238 / .22); border-radius: 3px; }
.gempty { color: var(--muted); font-size: 15px; padding: 14px 2px; }


.crumbrow { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.crumbrow .crumbs { margin-bottom: 0; }
.crumbrow.searching .crumbs { display: none; }
.csearch-btn {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; margin-left: auto;
    background: var(--card-bg); border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow), var(--glass-highlight);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.csearch-btn svg { display: block; width: 18px; height: 18px; fill: var(--fg); stroke: none; opacity: .8; }
.crumbrow.searching .csearch-btn { display: none; }
.csearch-wrap {
    display: none; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 999px;
    box-shadow: var(--card-shadow), var(--glass-highlight);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 0 5px 0 16px; min-height: 44px; box-sizing: border-box;
    animation: csGrow 260ms var(--page-enter-ease, cubic-bezier(.28,.11,.32,1)) both;
}
.crumbrow.searching .csearch-wrap { display: flex; }
@keyframes csGrow { from { opacity: 0; transform: scaleX(.86); transform-origin: right center; }
                    to   { opacity: 1; transform: none; } }
.csearch-wrap input {
    flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; color: var(--fg);
    background: none; border: 0; outline: none; padding: 0; height: 42px; line-height: 42px;
}
.csearch-x {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--tertiary-fill, rgba(118,118,128,.12));
    display: flex; align-items: center; justify-content: center; padding: 0; line-height: 0;
}
.csearch-x svg { display: block; width: 13px; height: 13px; stroke: var(--fg);
    stroke-width: 2.6; fill: none; opacity: .75; }


details.art-sec > .anim, details.art-detail > .anim {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 300ms var(--page-enter-ease, cubic-bezier(.28,.11,.32,1));
}
details.art-sec[open] > .anim, details.art-detail[open] > .anim { grid-template-rows: 1fr; }
details.art-sec > .anim > *, details.art-detail > .anim > * { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
    details.art-sec > .anim, details.art-detail > .anim { transition: none; }
    .csearch-wrap { animation: none; }
}


.vpop {
    position: absolute; z-index: 200; width: min(340px, calc(100vw - 24px));
    background: var(--card-solid, #fff); border: 1px solid var(--card-border);
    border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.24);
    padding: 14px 16px 12px; opacity: 0; transform: translateY(-4px) scale(.98);
    transition: opacity 140ms ease, transform 140ms ease;
}
.vpop[data-show="true"] { opacity: 1; transform: none; }
.vpop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.vpop-ref { font-size: 15px; font-weight: 700; color: var(--fg); }
.vpop-x { border: 0; background: var(--tertiary-fill, rgba(118,118,128,.12)); cursor: pointer;
    width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center;
    justify-content: center; padding: 0; line-height: 0; flex: 0 0 auto; }
.vpop-x svg { display: block; width: 11px; height: 11px; stroke: var(--fg); stroke-width: 2.6; fill: none; opacity: .7; }
.vpop-body { font-size: 15px; line-height: 1.5; color: var(--fg); max-height: 40vh; overflow-y: auto; }
.vpop-body .vn { font-size: 11px; font-weight: 700; color: var(--muted); vertical-align: super; margin-right: 3px; }
.vpop-tabs { display: flex; gap: 6px; margin-top: 12px; }
.vpop-tabs button {
    flex: 1 1 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    border: 0; border-radius: 999px; padding: 7px 0;
    background: var(--tertiary-fill, rgba(118,118,128,.12)); color: var(--muted);
}
.vpop-tabs button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.vpop-load { color: var(--muted); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .vpop { transition: none; } }