/* styles.css */
:root { color-scheme: light; --bg: #f6efe3; --bg-2: #e4f0dc; --ink: #1c2430; --muted: #5c665f; --accent: #0f6e6b; --accent-soft: #b7ddd6; --paper: #fffdf9; --paper-2: #f3f7f4; --line: #e2ddd3; --select: #e5f3f1; --select-edge: #0f6e6b; --pop: #c4653a; --gold: #e3b15a; --shadow: 0 16px 40px rgba(28, 36, 48, 0.08); --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif; --serif: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif; --radius: 18px; } html[data-theme="dark"] { color-scheme: dark; --bg: #12181c; --bg-2: #1a2422; --ink: #f4efe7; --muted: #b7b0a4; --accent: #8fd0c4; --accent-soft: #2c4f49; --paper: #1b2328; --paper-2: #243038; --line: #334048; --select: #1e3334; --select-edge: #8fd0c4; --pop: #e08a62; --gold: #e3b15a; --shadow: 0 16px 40px rgba(0, 0, 0, 0.32); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: radial-gradient(900px 420px at 0% -10%, transparent, transparent 55%), radial-gradient(700px 380px at 100% 0%, rgba(26, 115, 232, 0.10), transparent 50%), var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.45; min-height: 100vh; } button, input { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, p { margin: 0; } .skip { position: absolute; left: -999px; top: 0; } .skip:focus { left: 0.5rem; top: 0.5rem; background: var(--paper); padding: 0.4rem 0.6rem; z-index: 50; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .top { position: sticky; top: 0; z-index: 10; padding: calc(0.85rem + env(safe-area-inset-top)) 1rem 0.75rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; } .top-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; max-width: 68rem; margin: 0 auto; } .eyebrow { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } h1 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; letter-spacing: -0.02em; } #theme-toggle, .text-btn, .nav-btn, .seg button, #study-toggle, .export, .chip, .jump, .close-x { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; } #theme-toggle { padding: 0.45rem 0.9rem; min-height: 44px; } .seg { display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: 68rem; margin: 0.75rem auto 0; } .seg button { min-width: 3rem; min-height: 40px; padding: 0.35rem 0.9rem; } .seg button[aria-current="page"] { background: var(--accent); color: #f7f4ee; border-color: var(--accent); } html[data-theme="dark"] .seg button[aria-current="page"] { color: #14211a; } #search-form { max-width: 68rem; margin: 0.7rem auto 0; } #q { width: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: 14px; padding: 0.75rem 0.9rem; min-height: 48px; outline: none; } #q:focus { border-color: var(--accent); } .search-hint { max-width: 68rem; margin: 0.35rem auto 0; color: var(--muted); font-size: 0.78rem; } .results { list-style: none; margin: 0.45rem auto 0; padding: 0.35rem; max-width: 68rem; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); max-height: 50vh; overflow: auto; } .results button { width: 100%; text-align: left; border: 0; background: transparent; border-radius: 12px; padding: 0.65rem 0.7rem; display: grid; gap: 0.15rem; } .results button:hover, .results button:focus-visible { background: var(--select); } .results .k { color: var(--accent); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; } .results .t { font-weight: 600; } .results .s { color: var(--muted); font-size: 0.88rem; } mark { background: #efe2a8; color: inherit; border-radius: 3px; padding: 0 0.1em; } html[data-theme="dark"] mark { background: #5c5330; } .layout { padding: 0.5rem 1rem 6.5rem; } .reading { max-width: 40rem; margin: 0 auto; } .chapter-kicker { margin-top: 0.8rem; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; } .reading h2 { font-family: var(--serif); font-weight: 500; font-size: 2rem; letter-spacing: -0.03em; margin: 0.15rem 0 0.35rem; } .blurb { color: var(--muted); font-size: 0.95rem; max-width: 36rem; } .trans { margin: 0.8rem 0 0.4rem; font-size: 0.82rem; color: var(--muted); } .themes-row, .people-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 0.2rem; } .chip, .jump, .text-btn, .nav-btn, .export { padding: 0.45rem 0.8rem; min-height: 40px; text-align: left; } .chip.person { border-radius: 14px; } .verse { cursor: pointer; margin: 0.15rem 0; padding: 0.55rem 0.65rem 0.55rem 0.7rem; border-radius: 14px; border: 0; border-left: 3px solid transparent; background: transparent; display: block; width: 100%; text-align: left; font-family: var(--serif); font-size: 1.2rem; line-height: 1.75; } .verse:hover { background: color-mix(in srgb, var(--select) 65%, transparent); } .verse.selected { background: var(--select); border-left-color: var(--select-edge); } .vn { font-family: var(--sans); font-size: 0.72rem; color: var(--accent); margin-right: 0.4rem; font-variant-numeric: tabular-nums; vertical-align: super; } .name { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--accent-soft); padding: 0 0.05rem; border-radius: 0; } .marker { margin: 1.1rem 0 0.15rem; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); } .pager { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 1.4rem; } .nav-btn[disabled] { opacity: 0.4; cursor: default; } .fine { margin-top: 1.2rem; color: var(--muted); font-size: 0.78rem; } .study { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1rem 1.2rem; } .study h3 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; margin-bottom: 0.35rem; } .study-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.2rem; } .block { margin: 0 0 0.85rem; } .block p + p { margin-top: 0.45rem; } .diagram { display: grid; gap: 0.35rem; margin: 0.4rem 0 0.8rem; } .diagram-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; } .diagram button, .beats button { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--paper-2); padding: 0.55rem 0.6rem; min-height: 44px; text-align: left; font-size: 0.86rem; } .beats { display: grid; gap: 0.35rem; margin: 0.4rem 0 0.8rem; } .beats button.turn { border-color: var(--accent); } .cardish { background: var(--paper-2); border-radius: 14px; padding: 0.75rem 0.8rem; margin: 0 0 0.55rem; } .cardish h4 { margin: 0 0 0.25rem; font-size: 0.98rem; } .ref { display: inline-flex; border: 0; background: none; color: var(--accent); padding: 0; min-height: 44px; font-weight: 650; text-align: left; border-radius: 0; } .cardish .ref { margin-bottom: 0.2rem; } .cardish p { color: var(--ink); font-size: 0.95rem; } .meta { color: var(--muted); font-size: 0.78rem; margin-bottom: 0.25rem; } .dim { opacity: 0.72; } .note-box textarea { width: 100%; min-height: 7rem; resize: vertical; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 0.7rem; line-height: 1.5; } .note-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.45rem; } .saved { color: var(--muted); font-size: 0.78rem; } .sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; } .close-x { padding: 0.35rem 0.7rem; min-height: 36px; } .top-actions { display: flex; gap: 0.4rem; align-items: center; } #study-toggle { display: none; padding: 0.45rem 0.9rem; min-height: 44px; background: var(--accent); color: #f7f4ee; border-color: var(--accent); } #study-toggle[hidden], #scrim[hidden] { display: none !important; } html[data-theme="dark"] #study-toggle { color: #14211a; } .scrim { position: fixed; inset: 0; background: rgba(20, 16, 12, 0.4); z-index: 20; } .theme-page { max-width: 40rem; margin: 0 auto; padding: 0.4rem 1rem 4rem; } .theme-page h2 { font-family: var(--serif); font-weight: 500; font-size: 2.1rem; letter-spacing: -0.03em; margin: 0.3rem 0 0.4rem; } .thread { list-style: none; margin: 1rem 0 0; padding: 0; } .thread li { position: relative; padding: 0 0 1rem 1.3rem; } .thread li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); } .thread li::after { content: ""; position: absolute; left: 0.24rem; top: 1.15rem; bottom: 0; width: 1px; background: var(--line); } .thread li:last-child::after { display: none; } .thread .ref { display: inline-flex; border: 0; background: none; color: var(--accent); padding: 0; min-height: 0; font-weight: 600; border-radius: 0; text-align: left; } .thread p { margin-top: 0.2rem; } dialog { width: min(36rem, calc(100vw - 1.5rem)); border: 1px solid var(--line); border-radius: 20px; background: var(--paper); color: var(--ink); padding: 1.1rem 1.1rem 1.2rem; box-shadow: var(--shadow); } dialog::backdrop { background: rgba(20, 16, 12, 0.45); } dialog h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 0.1rem 0 0.2rem; } dialog .role { color: var(--muted); margin-bottom: 0.7rem; } dialog p { margin: 0 0 0.7rem; font-size: 1.02rem; line-height: 1.55; } dialog h4 { margin: 0.8rem 0 0.35rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .places { display: flex; flex-wrap: wrap; gap: 0.35rem; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (min-width: 960px) { .layout { max-width: 68rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 1.25rem; align-items: start; padding-bottom: 3rem; } .reading { margin: 0; justify-self: end; width: min(40rem, 100%); } .study { position: sticky; top: 8.6rem; max-height: calc(100vh - 9.4rem); overflow: auto; } #study-toggle, #scrim, #close-study { display: none !important; } } @media (max-width: 959px) { #study-toggle { display: inline-flex; } .layout { padding-bottom: 2rem; } .study { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: min(82dvh, 740px); overflow: auto; border-radius: 22px 22px 0 0; transform: translateY(110%); transition: transform 0.24s ease; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); } body.study-open .study { transform: translateY(0); } body.study-open #study-toggle { display: none; } } @media (prefers-reduced-motion: reduce) { .study { transition: none; } } .word { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px dotted var(--accent); padding: 0 0.08rem; border-radius: 0; } .verse.in-set { background: color-mix(in srgb, var(--select) 55%, transparent); } .verse.has-comment .vn::after { content: " · note"; letter-spacing: 0; text-transform: none; } .verse-panel { margin: 0.2rem 0 0.85rem; padding: 0.9rem 0.95rem 1rem; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--select-edge); border-radius: 16px; } .verse-panel .verse-text { font-family: var(--serif); font-size: 1.28rem; line-height: 1.6; margin: 0.2rem 0 0.7rem; } .panel-title { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 0.15rem 0 0.4rem; } .panel-actions { display: flex; flex-wrap: wrap; gap: 0.45rem 0.7rem; align-items: center; margin: 0.35rem 0 0.7rem; } .panel-actions .trans { margin: 0; } .body-copy p { margin: 0 0 0.55rem; } .study details, .verse-panel details { border-top: 1px solid var(--line); padding: 0.1rem 0 0.35rem; } .study summary, .verse-panel summary { cursor: pointer; padding: 0.55rem 0; font-weight: 650; } .thread-note > summary { color: var(--accent); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; } .churches { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 0.15rem 0.75rem 0.45rem; margin: 0.45rem 0 0.6rem; } .link-list { margin: 0.2rem 0 0.6rem; padding-left: 1.15rem; } .link-list li { margin: 0 0 0.55rem; } .study a, .verse-panel a { color: var(--accent); } .q-btn { width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; } .discuss { margin: 0.4rem 0 0.2rem; padding-left: 1.2rem; } .discuss li { margin: 0 0 0.75rem; } .phrase-quote { font-family: var(--serif); font-style: italic; } .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } @media (max-width: 640px) { .compare-grid { grid-template-columns: 1fr; } } #phrase-pop { position: fixed; z-index: 60; width: min(20rem, calc(100vw - 1rem)); background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 0.75rem; } #phrase-pop textarea { width: 100%; min-height: 5rem; margin: 0.35rem 0; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 0.55rem; } #leader { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); box-shadow: var(--shadow); padding: 0.7rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); } #leader[hidden] { display: none !important; } .leader-top, .leader-nav { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; } .leader-q { margin: 0.25rem 0 0.45rem; font-size: 1.02rem; } .jump.on { background: var(--accent); color: #f7f4ee; border-color: var(--accent); } html[data-theme="dark"] .jump.on { color: #14211a; } body.has-leader .layout { padding-bottom: 12rem; } @media (max-width: 959px) { .study { bottom: var(--leader-space, 0px); } } .both-page { max-width: 72rem; margin: 0 auto; padding: 0.4rem 1rem 3rem; } .both-title { font-family: var(--serif); font-weight: 500; font-size: 2rem; letter-spacing: -0.03em; margin: 0.15rem 0 0.35rem; } .both-note { max-width: 42rem; margin: 0.7rem 0 1rem; padding: 0.8rem 0.9rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; } .both-note p + p { margin-top: 0.35rem; } .both-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start; } .both-col { background: color-mix(in srgb, var(--paper) 82%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 0.7rem 1rem; min-width: 0; } .both-col h2 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.02em; margin: 0.1rem 0 0.3rem; } .both-col .verse { font-size: 1.05rem; line-height: 1.65; } .seg button[data-chapter="both"] { padding-inline: 0.85rem; } @media (max-width: 720px) { .both-grid { grid-template-columns: 1fr; } } .layer > summary { font-family: var(--serif); font-size: 1.12rem; font-weight: 500; } .listen-set { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .listen-set select { min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); padding: 0.3rem 0.75rem; max-width: 16rem; } .brand { display: flex; align-items: center; gap: 0.75rem; } .logo { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; box-shadow: 0 8px 18px rgba(20, 48, 44, 0.18); } .local-who { color: var(--muted); font-size: 0.78rem; margin-top: 0.1rem; } .top-actions .text-btn { padding: 0.45rem 0.8rem; min-height: 44px; } .gate { min-height: 100vh; display: grid; align-content: center; justify-items: start; gap: 0.35rem; max-width: 28rem; margin: 0 auto; padding: calc(2rem + env(safe-area-inset-top)) 1.25rem 3rem; animation: rise 0.45s ease; } .gate, .gate[hidden] { display: none !important; } .logo-lg { width: 88px; height: 88px; border-radius: 22px; margin-bottom: 0.6rem; } .gate h1 { font-family: var(--serif); font-weight: 500; font-size: 2.4rem; letter-spacing: -0.03em; } .gate .blurb { margin: 0.35rem 0 0.8rem; } .gate-actions { display: grid; gap: 0.55rem; width: 100%; margin-top: 0.4rem; } .gate-btn { width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); text-align: left; padding: 0.75rem 1rem; } .gate-go { background: var(--accent); color: #f7f4ee; border-color: var(--accent); margin-top: 0.35rem; } .gate-skip { text-align: center; font-weight: 650; margin-top: 0; margin-bottom: 0.35rem; } html[data-theme="dark"] .gate-go { color: #14211a; } .gate-note { min-height: 1.2rem; color: var(--pop); font-size: 0.92rem; margin: 0.65rem 0; } #gate-email { width: 100%; display: grid; gap: 0.4rem; } #gate-name { width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); padding: 0.7rem 0.9rem; } #gate-email label { font-size: 0.82rem; color: var(--muted); } .art-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin: 0.9rem 0 0.3rem; } .scene-art { margin: 0; padding: 0.35rem; border-radius: 16px; border: 1px solid transparent; background: transparent; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .scene-art.is-on { border-color: var(--line); background: var(--paper); } .scene-svg svg { width: 100%; height: auto; display: block; } .scene-art figcaption { margin-top: 0.3rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .scene-art.is-on figcaption { color: var(--accent); } .orb { transform-origin: 116px 30px; animation: glow 4.8s ease-in-out infinite; } .leaf { transform-origin: 110px 36px; animation: sway 5.5s ease-in-out infinite; } .arc { stroke-dasharray: 120; stroke-dashoffset: 0; animation: draw 6s ease-in-out infinite; } .reading, .both-page, .theme-page { animation: rise 0.4s ease; } .verse { transition: background 0.2s ease, transform 0.2s ease; } .verse:hover { transform: translateX(3px); } .chip, .seg button, .gate-btn { transition: transform 0.2s ease, background 0.2s ease; } .chip:hover, .gate-btn:hover { transform: translateY(-1px); } .themes-row .chip:nth-child(3n+1) { background: #e7f4f2; } .themes-row .chip:nth-child(3n+2) { background: #f8ece4; } .themes-row .chip:nth-child(3n) { background: #f4edd8; } html[data-theme="dark"] .themes-row .chip:nth-child(3n+1) { background: #1c3332; } html[data-theme="dark"] .themes-row .chip:nth-child(3n+2) { background: #3a2a24; } html[data-theme="dark"] .themes-row .chip:nth-child(3n) { background: #33301f; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes glow { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } } @keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } } @keyframes draw { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .reading, .both-page, .theme-page, .gate, .orb, .leaf, .arc { animation: none; } .verse, .chip, .seg button, .gate-btn, .scene-art { transition: none; } .verse:hover, .chip:hover, .gate-btn:hover { transform: none; } } .seg button[data-chapter="translations"] { padding-inline: 0.85rem; } .tx-page { max-width: 72rem; margin: 0 auto; padding: 0.4rem 1rem 3rem; } .tx-title { font-family: var(--serif); font-weight: 500; font-size: 2rem; letter-spacing: -0.03em; margin: 0.15rem 0 0.35rem; } .tx-note { max-width: 46rem; margin: 0.7rem 0 1rem; padding: 0.8rem 0.9rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; } .tx-note p + p { margin-top: 0.35rem; } .tx-tools { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0 0 1rem; } .tx-tools .seg { margin: 0; max-width: none; } .tx-verse-row { margin: 0 0 0.85rem; padding: 0.75rem 0.8rem 0.9rem; background: color-mix(in srgb, var(--paper) 82%, transparent); border: 1px solid var(--line); border-radius: var(--radius); } .tx-verse-row.is-focus { border-color: var(--select-edge); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); } .tx-verse-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.55rem; } .tx-verse-head .vn { font-family: var(--serif); font-size: 1.15rem; color: var(--accent); } .tx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; } .tx-card { min-width: 0; padding: 0.65rem 0.7rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; } .tx-card.locked { background: var(--paper-2); border-style: dashed; } .tx-card .meta { margin-bottom: 0.25rem; } .tx-card .tx-body { font-family: var(--serif); font-size: 1.02rem; line-height: 1.55; } .tx-card .tx-empty { color: var(--muted); font-size: 0.92rem; line-height: 1.45; } @media (max-width: 960px) { .tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .tx-grid { grid-template-columns: 1fr; } } .tx-page { animation: rise 0.4s ease; } @media (prefers-reduced-motion: reduce) { .tx-page { animation: none; } } .theme-drop { flex: 1 1 100%; } .theme-drop summary { cursor: pointer; display: inline-block; } .theme-drop p { margin: 0.35rem 0 0; max-width: 40rem; } .themes-row .theme-drop:nth-child(3n+1) summary { background: #e7f4f2; } .themes-row .theme-drop:nth-child(3n+2) summary { background: #f8ece4; } .themes-row .theme-drop:nth-child(3n) summary { background: #f4edd8; } html[data-theme="dark"] .themes-row .theme-drop:nth-child(3n+1) summary { background: #1c3332; } html[data-theme="dark"] .themes-row .theme-drop:nth-child(3n+2) summary { background: #3a2a24; } html[data-theme="dark"] .themes-row .theme-drop:nth-child(3n) summary { background: #33301f; } #plan-form { display: grid; gap: 0.45rem; } #plan-form input, #plan-form select { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 0.45rem 0.7rem; } #people-filter { width: 100%; max-width: 28rem; min-height: 44px; margin: 0.4rem 0 0.8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); padding: 0.45rem 0.7rem; } .section-nav { display: flex; flex-wrap: wrap; gap: 0.45rem; max-width: 68rem; margin: 0.7rem auto 0; } .section-nav button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 0.45rem 0.95rem; min-height: 44px; } .section-nav button[aria-current="page"] { background: var(--pop); color: #fffaf3; border-color: var(--pop); } #chapter-seg { flex-wrap: nowrap; overflow-x: auto; } .section-title { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.02em; margin: 1.35rem 0 0.45rem; color: var(--accent); } .tx-note { background: linear-gradient(180deg, #fff8ef, #f2f7ee); border-color: #e4d2b8; margin: 1rem 0 1.35rem; } html[data-theme="dark"] .tx-note { background: linear-gradient(180deg, #24312b, #1b2428); border-color: #3e564b; } .cardish { background: color-mix(in srgb, var(--paper) 78%, #f3e2cc); } html[data-theme="dark"] .cardish { background: color-mix(in srgb, var(--paper) 80%, #3a2a22); } .chapter-kicker { color: var(--pop); } .reading h2, .tx-title { color: var(--ink); } html[data-theme="dark"] .reading h2, html[data-theme="dark"] .tx-title { color: #f4efe7; } .art-row { margin: 1.35rem 0 1.55rem; } .plan-row.is-current { border-color: var(--pop); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pop) 35%, transparent); } .day-list { margin: 0.45rem 0 0; padding-left: 1.2rem; } .day-list li { margin: 0.55rem 0; } #gen-form { display: grid; gap: 0.45rem; } #gen-form input, #gen-form select, #group-join input { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 0.45rem 0.7rem; } @media (max-width: 720px) { .top-row { flex-wrap: wrap; align-items: flex-start; } .top-actions { flex-wrap: wrap; justify-content: flex-end; } .search-hint { display: none; } .art-row { grid-template-columns: repeat(var(--art-n, 1), minmax(0, 1fr)); } .verse { cursor: auto; } } #theme-toggle { width: 44px; min-width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } #theme-toggle svg { width: 22px; height: 22px; display: block; } .gen-tree, .gen-tree ul { list-style: none; margin: 0.2rem 0; padding-left: 0.9rem; } .gen-tree { padding-left: 0; } .gen-tree li { position: relative; border-left: 2px solid var(--accent); padding: 0.28rem 0 0.28rem 0.75rem; } .gen-tree li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.65rem; height: 2px; background: var(--accent); } .gen-node, .gen-tree .ref, .gen-tree .jump { display: inline-block; background: #e7f4f2; border-radius: 10px; padding: 0.2rem 0.55rem; } html[data-theme="dark"] .gen-node, html[data-theme="dark"] .gen-tree .ref, html[data-theme="dark"] .gen-tree .jump { background: #1c3332; } .gen-hit { outline: 2px solid #c4653a; outline-offset: 1px; } .gen-kids { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; } .route-wrap { margin: 0.4rem 0 0.7rem; } .route-map { width: 100%; height: auto; display: block; } .real-map { height: 320px; border-radius: 16px; margin: 0.5rem 0 0.8rem; } .real-map-img { width: 100%; height: auto; display: block; border-radius: 16px; } .book-pick { display: flex; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.92rem; } .book-pick select { min-height: 40px; max-width: 16rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 0.35rem 0.9rem; } .link-shelf { margin: 0.7rem 0 0.2rem; } #link-panel > details > summary { display: none; } #link-panel > details { border: 0; margin: 0.35rem 0 0; } .chip.is-on { outline: 2px solid var(--accent); outline-offset: 1px; } .dd-plan { background: var(--paper); border-radius: 28px; padding: 1.4rem 1.1rem 1.2rem; box-shadow: var(--shadow); text-align: center; margin: 0.6rem 0 1.2rem; } .dd-kicker { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; color: var(--muted); margin: 0; } .dd-title { font-family: var(--serif); font-size: 1.7rem; margin: 0.25rem 0 0.7rem; } .dd-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .dd-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 0.55rem 0; } .dd-chip { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 999px; padding: 0.35rem 0.75rem; font: inherit; cursor: pointer; } .dd-chip.is-on { background: var(--accent); color: #fff; border-color: var(--accent); } html[data-theme="dark"] .dd-chip.is-on { color: #12181c; } .dd-dial { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin: 0.8rem 0 0.2rem; } .dd-dial-mid { width: 9.5rem; height: 9.5rem; border-radius: 50%; border: 10px solid var(--accent-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--paper-2); } .dd-minutes { font-size: 3.2rem; line-height: 1; margin: 0; font-family: var(--serif); } .dd-unit { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.85rem; } .dd-step { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; } .dd-days { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0.35rem 0 0.7rem; } .dd-day-label { margin: 0; color: var(--muted); } .dd-start { display: block; width: min(100%, 16rem); margin: 0.4rem auto 0.5rem; background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 0.9rem 1.2rem; font-size: 1.15rem; font-weight: 650; cursor: pointer; } html[data-theme="dark"] .dd-start { color: #12181c; } .dd-more { text-align: left; margin-top: 0.4rem; } .dd-more summary { cursor: pointer; color: var(--muted); } .dd-type-input, .dd-more select, .dd-more input { width: 100%; margin: 0.25rem 0 0.55rem; } .flag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.15rem; } .flag-row .meta { margin: 0; } .people-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0 0.2rem; } .people-tools input, .people-tools select { flex: 1 1 12rem; } .section-search { width: 100%; margin: 0.4rem 0 0.2rem; } .section-search-wrap { margin: 0.2rem 0 0.8rem; } .timeline-tools { display: flex; flex-direction: column; gap: 0.65rem; margin: 0.85rem 0 1rem; } .timeline-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; } .timeline-filters button { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; min-height: 40px; padding: 0.35rem 0.8rem; } .timeline-filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #f7f4ee; } html[data-theme="dark"] .timeline-filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #14211a; } #timeline-search { width: 100%; max-width: 28rem; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 0.45rem 0.7rem; } #timeline-search:focus { border-color: var(--accent); outline: none; } html[data-theme="dark"] #timeline-search:focus { border-color: var(--accent); } .timeline { position: relative; margin: 0.2rem 0 2rem; padding: 0 0 0.2rem 1.35rem; } .timeline::before { content: ""; position: absolute; left: 0.28rem; top: 0.35rem; bottom: 0.35rem; width: 3px; background: var(--accent); border-radius: 3px; } html[data-theme="dark"] .timeline::before { background: var(--accent); } .timeline-era { margin: 0 0 0.4rem; } .timeline-era h3 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: var(--accent); margin: 0.9rem 0 0.45rem; } html[data-theme="dark"] .timeline-era h3 { color: var(--accent); } .timeline-card { position: relative; margin: 0.65rem 0; padding: 0.75rem 0.9rem 0.85rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; } .timeline-card::before { content: ""; position: absolute; left: calc(-1.35rem + 0.28rem - 5px); top: 1.15rem; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg); } html[data-theme="dark"] .timeline-card::before { background: var(--accent); } .timeline-card h4 { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; margin: 0 0 0.4rem; } .timeline-card p { margin-top: 0.45rem; } .timeline-card .meta { color: var(--muted); font-size: 0.88rem; } .timeline-card .jump { margin-top: 0.15rem; } @media (max-width: 640px) { .timeline { padding-left: 1.15rem; } .timeline-card::before { left: calc(-1.15rem + 0.28rem - 5px); } .timeline-filters button { padding-inline: 0.65rem; } }
/* v2.css */
html.v2 { --bg: #f7f2e9; --paper: #fffcf6; --paper-2: #f2ece1; --ink: #1d1b18; --muted: #6d675e; --line: #e6ded0; --accent: #8a4b2a; --accent-soft: #e9d3c3; --select: #f3e7da; --select-edge: #8a4b2a; --pop: #8a4b2a; --serif: "Iowan Old Style", "Charter", "Source Serif 4", "Palatino Linotype", Palatino, Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif; --v2-fs: 21px; --tabh: 64px; --barh: 56px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); -webkit-tap-highlight-color: transparent; } html.v2.v2-sepia { --bg: #f1e6d0; --paper: #f8eedb; --paper-2: #ead9bc; --ink: #3b2f22; --muted: #7a6a55; --line: #dfcdae; --accent: #8a5a2b; --select: #e8d6b6; } html.v2[data-theme="dark"] { --bg: #121417; --paper: #1b1e22; --paper-2: #24282d; --ink: #ece7df; --muted: #a39d93; --line: #2e3238; --accent: #e0a77f; --accent-soft: #4a3326; --select: #2a2520; --select-edge: #e0a77f; --pop: #e0a77f; } html.v2 body { background: var(--bg); font-family: var(--sans); color: var(--ink); overscroll-behavior-y: none; }  html.v2 .top { padding: var(--sat) 0 0; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); border-bottom: 1px solid transparent; transition: border-color .2s; } body.v2-scrolled .top { border-bottom-color: var(--line); } html.v2 .top-row, html.v2 #chapter-seg, html.v2 .section-nav, html.v2 .search-hint { display: none !important; } .v2-bar { height: var(--barh); display: flex; align-items: center; gap: .4rem; padding: 0 .6rem; max-width: 60rem; margin: 0 auto; } .v2-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 12px; color: var(--ink); } .v2-icon svg { width: 22px; height: 22px; } .v2-icon:active { background: var(--paper-2); } .v2-brand img { width: 30px; height: 30px; border-radius: 8px; } .v2-aa { font-family: var(--serif); font-size: 1.15rem; } .v2-ref { display: inline-flex; align-items: center; gap: .2rem; border: 0; background: var(--paper-2); padding: .45rem .7rem .45rem .95rem; border-radius: 999px; font-weight: 600; font-size: 1rem; min-height: 40px; } .v2-ref svg { width: 18px; height: 18px; opacity: .6; } .v2-view-title { font-weight: 650; font-size: 1.05rem; display: none; } .v2-bar-actions { margin-left: auto; display: flex; gap: .15rem; } html.v2:not([data-v2view="read"]) .v2-ref { display: none; } html.v2:not([data-v2view="read"]) .v2-view-title { display: block; } html.v2 #search-form { display: none; max-width: 60rem; margin: 0 auto; padding: 0 .9rem .7rem; } body.v2-search-on #search-form { display: block; } html.v2 #q { border-radius: 12px; background: var(--paper-2); border: 0; min-height: 44px; padding: .6rem 1rem; font-size: 1rem; } html.v2 #results { max-width: 60rem; margin: 0 auto .6rem; max-height: 60vh; overflow: auto; padding: 0 .9rem; }  .v2-tabs { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px 4px calc(4px + var(--sab)); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); border-top: 1px solid var(--line); } .v2-tabs button { border: 0; background: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .68rem; font-weight: 600; letter-spacing: .01em; padding: 6px 0 4px; min-height: 52px; border-radius: 12px; } .v2-tabs svg { width: 25px; height: 25px; } .v2-tabs button[aria-current="page"] { color: var(--accent); } .v2-tabs button:active { background: var(--paper-2); } html.v2 main { padding-bottom: calc(var(--tabh) + var(--sab) + 1rem); }  html.v2[data-v2view="read"] .layout { display: block; max-width: none; padding: .5rem 1.25rem 2rem; } html.v2[data-v2view="read"] .reading { max-width: 34rem; margin: 0 auto; width: auto; justify-self: auto; } html.v2[data-v2view="read"] .reading > .section-search-wrap, html.v2[data-v2view="read"] .reading > .blurb, html.v2[data-v2view="read"] .reading > .themes-row, html.v2[data-v2view="read"] .reading > .people-row, html.v2[data-v2view="read"] .reading > .art-row, html.v2[data-v2view="read"] .reading > .panel-actions, html.v2[data-v2view="read"] .reading > .fine, html.v2[data-v2view="read"] .reading > .marker { display: none; } html.v2 .reading .chapter-kicker { margin: 1.6rem 0 0; text-align: center; color: var(--muted); font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; } html.v2 .reading h2, html.v2[data-theme] .reading h2 { text-align: center; font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: clamp(1.7rem, 6.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.01em; margin: .55rem auto 1.2rem; max-width: 26rem; text-wrap: balance; } .v2-study-btn { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 0 auto 1.6rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: .55rem 1.1rem; font-size: .9rem; font-weight: 600; min-height: 42px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .v2-study-ic { color: var(--accent); } .v2-study-btn.v2-end { margin-top: 2rem; margin-bottom: .5rem; } html.v2 .reading .verse { display: inline; padding: 0; margin: 0; border: 0; border-radius: 4px; background: none; font-family: var(--serif); font-size: var(--v2-fs); line-height: 1.78; color: var(--ink); transform: none !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .15s; } html.v2 .reading .verse:hover { background: none; } html.v2 .reading .verse .vn { font: 700 .6em/1 var(--sans); color: var(--muted); vertical-align: .55em; margin: 0 .22em 0 .35em; letter-spacing: 0; } html.v2 .reading .verse:first-of-type .vn { margin-left: 0; } html.v2 .reading .verse.has-comment .vn::after { content: "•"; color: var(--accent); margin-left: .1em; } html.v2 .reading .verse.v2-has-note .vn { color: var(--accent); } html.v2 .reading .verse.v2-picked { text-decoration: underline dotted var(--accent); text-underline-offset: .28em; text-decoration-thickness: 2px; } .verse[data-hl="yellow"] { background: color-mix(in srgb, #f6d878 60%, transparent) !important; } .verse[data-hl="green"] { background: color-mix(in srgb, #a9dca0 60%, transparent) !important; } .verse[data-hl="blue"] { background: color-mix(in srgb, #a7cdf2 60%, transparent) !important; } .verse[data-hl="pink"] { background: color-mix(in srgb, #f3b2c6 60%, transparent) !important; } .verse[data-hl="orange"] { background: color-mix(in srgb, #f5bf8a 60%, transparent) !important; } html[data-theme="dark"] .verse[data-hl] { background: color-mix(in srgb, var(--hlc, #f6d878) 28%, transparent) !important; } html.v2 .reading .verse .name { border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent); } html.v2 .reading .pager { margin-top: 1.4rem; } html.v2 .reading .nav-btn { flex: 1; border: 1px solid var(--line); background: var(--paper); border-radius: 14px; font-size: .85rem; padding: .7rem .9rem; color: var(--muted); } html.v2 .reading .pager .nav-btn:last-child { text-align: right; } main.v2-in-r { animation: v2inR .28s cubic-bezier(.2,.8,.2,1); } main.v2-in-l { animation: v2inL .28s cubic-bezier(.2,.8,.2,1); } @keyframes v2inR { from { opacity: 0; transform: translateX(28px); } } @keyframes v2inL { from { opacity: 0; transform: translateX(-28px); } }  .v2-sheet-scrim, html.v2 #scrim { position: fixed; inset: 0; z-index: 40; background: rgba(15, 12, 8, .32); opacity: 0; transition: opacity .25s; } .v2-sheet-scrim.open { opacity: 1; } html.v2 body.study-open #scrim { display: block !important; opacity: 1; z-index: 29; } .v2-sheet { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 40rem; max-height: 86dvh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.18); transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); padding-bottom: var(--sab); } .v2-sheet.open { transform: none; } .v2-sheet.v2-tall { height: 86dvh; } .v2-grab { width: 38px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 2px; flex: none; } .v2-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: .3rem 1.1rem .5rem; flex: none; } .v2-sheet-head h2 { font: 650 1.1rem/1.2 var(--sans); } .v2-close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--paper-2); font-size: 1.3rem; line-height: 1; color: var(--muted); } .v2-sheet-body { overflow: auto; padding: .2rem 1.1rem 1.4rem; overscroll-behavior: contain; } .v2-eyebrow { font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1.1rem 0 .55rem; } .v2-sec { margin-top: .2rem; } .v2-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .v2-chip { border: 1px solid var(--line); background: var(--paper-2); border-radius: 999px; padding: .45rem .8rem; font-size: .88rem; min-height: 38px; color: var(--ink); } .v2-static { display: inline-flex; align-items: center; } .v2-row-btn { display: block; width: 100%; text-align: left; border: 0; background: var(--paper-2); border-radius: 12px; padding: .8rem 1rem; margin-top: .8rem; font-weight: 600; color: var(--accent); min-height: 44px; } .v2-fine { color: var(--muted); font-size: .78rem; margin-top: 1rem; } .v2-input { width: 100%; border: 0; background: var(--paper-2); border-radius: 12px; min-height: 44px; padding: .6rem 1rem; font-size: 1rem; }  .v2-verse-quote { margin: .2rem 0 .4rem; padding: .2rem 0 .2rem .9rem; border-left: 3px solid var(--accent); font: 1.08rem/1.6 var(--serif); } .v2-hl-row { display: flex; gap: .65rem; margin: 1rem 0 .4rem; align-items: center; } .v2-swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } .v2-swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); } .v2-swatch-none { background: var(--paper-2); color: var(--muted); font-size: 1rem; } .v2-actions { display: flex; gap: .5rem; align-items: center; margin-top: .7rem; flex-wrap: wrap; } .v2-act { border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: .5rem 1rem; font-weight: 600; min-height: 42px; } .v2-status { color: var(--muted); font-size: .8rem; } .v2-note { width: 100%; min-height: 84px; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: .7rem .8rem; font: 1rem/1.5 var(--sans); resize: vertical; margin-bottom: .3rem; } .v2-mini-note { background: var(--paper-2); border-radius: 12px; padding: .7rem .85rem; margin-bottom: .5rem; } .v2-mini-note strong { display: block; font-size: .9rem; margin-bottom: .2rem; } .v2-mini-note p { font-size: .88rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }  .v2-book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; } .v2-book-grid button { text-align: left; border: 0; background: var(--paper-2); border-radius: 10px; padding: .6rem .8rem; font-size: .93rem; min-height: 42px; } .v2-book-grid button.on, .v2-grid button.on { background: var(--accent); color: #fff; } .v2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: .4rem; margin-top: .6rem; } .v2-grid button { border: 0; background: var(--paper-2); border-radius: 10px; min-height: 48px; font-weight: 600; font-variant-numeric: tabular-nums; } .v2-back { border: 0; background: none; color: var(--accent); font-weight: 600; padding: .4rem 0; min-height: 40px; } .v2-chapters h3 { font: 500 1.5rem var(--serif); margin: .2rem 0; }  .v2-size { display: flex; align-items: center; justify-content: space-between; background: var(--paper-2); border-radius: 14px; padding: .3rem; } .v2-size-btn { border: 0; background: none; font-family: var(--serif); width: 64px; height: 46px; border-radius: 10px; } .v2-size-btn.small { font-size: .95rem; } .v2-size-btn.big { font-size: 1.5rem; } .v2-size-val { font-weight: 650; font-variant-numeric: tabular-nums; } .v2-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .v2-mode { border: 2px solid var(--line); border-radius: 14px; min-height: 56px; font-weight: 600; } .v2-mode-light { background: #fffcf6; color: #1d1b18; } .v2-mode-sepia { background: #f1e6d0; color: #3b2f22; } .v2-mode-dark { background: #1b1e22; color: #ece7df; } .v2-mode.on { border-color: var(--accent); } .v2-sample { font: var(--v2-fs)/1.7 var(--serif); margin-top: 1.1rem; padding: .8rem 1rem; background: var(--bg); border-radius: 12px; }  .v2-tiles { display: grid; gap: .55rem; } .v2-tile { display: flex; gap: .85rem; align-items: center; text-align: left; border: 0; background: var(--paper-2); border-radius: 16px; padding: .85rem 1rem; min-height: 64px; } .v2-tile-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--paper); color: var(--accent); display: grid; place-items: center; font-size: 1.2rem; flex: none; } .v2-tile-t { display: flex; flex-direction: column; gap: .15rem; } .v2-tile-t small { color: var(--muted); font-size: .8rem; }  html.v2 .study { position: fixed !important; z-index: 30; left: 0; right: 0; bottom: 0; top: auto !important; margin: 0 auto; max-width: 40rem; height: 86dvh; max-height: none !important; overflow: auto; border: 0; border-radius: 22px 22px 0 0; background: var(--paper); box-shadow: 0 -12px 40px rgba(0,0,0,.18); transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); padding: 0 1.1rem calc(1.4rem + var(--sab)); overscroll-behavior: contain; } html.v2 body.study-open .study { transform: none; } html.v2 .study .sheet-head { position: sticky; top: 0; z-index: 2; background: var(--paper); display: flex; justify-content: space-between; align-items: center; padding: .7rem 0 .2rem; } html.v2 .study .v2-grab { position: absolute; left: 50%; transform: translateX(-50%); top: 0; margin-top: 8px; } html.v2 .study #close-study { display: inline-flex !important; border: 0; background: var(--paper-2); border-radius: 999px; padding: .35rem .85rem; min-height: 34px; font-weight: 600; font-size: .85rem; } html.v2 .study h3 { font: 500 1.5rem/1.2 var(--serif); margin: .1rem 0 .7rem; } html.v2 .study > .meta, html.v2 .study .link-shelf > #link-row { display: none; } .v2-study-tabs { position: sticky; top: 2.9rem; z-index: 2; background: var(--paper); display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1.1rem .8rem; padding: .3rem 1.1rem .65rem; border-bottom: 1px solid var(--line); } .v2-study-tabs::-webkit-scrollbar { display: none; } .v2-study-tabs button { flex: none; border: 0; background: var(--paper-2); color: var(--ink); border-radius: 999px; padding: .45rem .9rem; font-size: .88rem; font-weight: 600; min-height: 38px; } .v2-study-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); } html.v2 .study[data-v2tab="notes"] #link-panel { display: none; } html.v2 .study:not([data-v2tab="notes"]) > details, html.v2 .study:not([data-v2tab="notes"]) > .note-box, html.v2 .study:not([data-v2tab="notes"]) > .note-actions { display: none; } html.v2 .study details.layer { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: .2rem 0; margin: 0; } html.v2 .study details.layer > summary { font: 650 1.02rem var(--sans); padding: .8rem 0; } html.v2 .study p { line-height: 1.6; } html.v2 .study details details { background: var(--paper-2); border: 0; border-radius: 12px; padding: .1rem .85rem; margin: .45rem 0; } html.v2 #card { border: 0; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); max-width: min(34rem, 92vw); } html.v2 #card::backdrop { background: rgba(15,12,8,.35); }  html.v2:not([data-v2view="read"]) main > * { max-width: 60rem; margin-left: auto; margin-right: auto; } html.v2:not([data-v2view="read"]) main { padding-left: .9rem; padding-right: .9rem; }  @media (min-width: 960px) { html.v2 { --v2-fs: 22px; } .v2-tabs { top: 0; bottom: 0; right: auto; width: 88px; grid-template-columns: 1fr; grid-auto-rows: 72px; align-content: start; padding: calc(var(--barh) + 1rem) 8px 1rem; border-top: 0; border-right: 1px solid var(--line); } html.v2 body { padding-left: 88px; } html.v2 main { padding-bottom: 3rem; } .v2-tabs button { font-size: .72rem; } .v2-bar { max-width: none; padding: 0 1.4rem; } .v2-brand { margin-left: -88px; width: 88px; } html.v2 .study { left: auto; right: 0; top: 0 !important; bottom: 0; width: 30rem; max-width: 100vw; height: 100dvh; border-radius: 0; transform: translateX(105%); box-shadow: -12px 0 40px rgba(0,0,0,.14); padding-top: .4rem; } html.v2 .study .v2-grab { display: none; } .v2-sheet { left: auto; right: 1.5rem; bottom: 1.5rem; width: 26rem; max-height: calc(100vh - 3rem); border-radius: 22px; transform: translateY(calc(100% + 2rem)); } .v2-sheet.v2-tall { height: calc(100vh - 3rem); } .v2-sheet .v2-grab { display: none; } .v2-sheet-head { padding-top: 1rem; } } @media (prefers-reduced-motion: reduce) { .v2-sheet, html.v2 .study, main.v2-in-r, main.v2-in-l { transition: none; animation: none; } } .v2-sheet[hidden], .v2-sheet-scrim[hidden] { display: none !important; } html.v2 .reading .verse .name, html.v2 .reading .verse [data-word] { border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent) !important; text-decoration: none; } html.v2 select { font: inherit; border: 0; background: var(--paper-2); border-radius: 12px; min-height: 44px; padding: .5rem .8rem; color: var(--ink); max-width: 100%; } html.v2 body { background-image: none; } @media (min-width: 960px) { .v2-brand { position: fixed; left: 22px; top: calc(var(--sat) + 6px); margin: 0; width: 44px; z-index: 26; } } @media (min-width: 960px) { .v2-brand { display: none !important; } } html.v2 body:not(.study-open) .study { box-shadow: none; visibility: hidden; transition: transform .3s, visibility 0s .3s; } .v2-tabs { z-index: 35; } html.v2 .study { z-index: 37; } html.v2 body.study-open #scrim { z-index: 36; } html.v2 .top { z-index: 34; } html.v2, html.v2 body { overflow-x: clip; } html.v2 main { max-width: 100vw; overflow-x: clip; } html.v2 main pre, html.v2 main table { max-width: 100%; overflow-x: auto; } html.v2 #leader { bottom: calc(60px + var(--sab)); border-radius: 18px 18px 0 0; } @media (min-width: 960px) { html.v2 #leader { bottom: 0; left: 88px; } } html.v2 main input[type="search"], html.v2 main input[type="text"], html.v2 main input:not([type]), html.v2 main textarea { border: 1px solid var(--line); background: var(--paper); border-radius: 12px; min-height: 44px; padding: .55rem .9rem; font-size: 1rem; color: var(--ink); width: 100%; max-width: 32rem; outline-color: var(--accent); } html.v2 .reading .verse > p { display: inline; margin: 0; font: inherit; }
/* v2-p2.css */
:root { --hl-yellow:#f6d878; --hl-green:#a9dca0; --hl-blue:#a7cdf2; --hl-pink:#f3b2c6; --hl-orange:#f5bf8a; } .v2-tabs button { min-width: 0; } .v2-tabs span { font-size: .68rem; } html.v2-home-on #main, html.v2-home-on .v2-ref { display: none !important; } .v2-home { max-width: 760px; margin: 0 auto; padding: 14px 18px calc(var(--tabh) + var(--sab) + 28px); font-family: var(--sans); color: var(--ink); animation: v2fade .35s ease; } @keyframes v2fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .v2-home-head h1 { font-family: var(--serif); font-size: 2rem; font-weight: 600; margin: 2px 0 16px; letter-spacing: -.01em; } .v2-home .v2-eyebrow, .v2-ov .v2-eyebrow, .v2-obooks .v2-eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .7rem; font-weight: 700; color: var(--muted); margin: 0; display: block; } .v2-continue { display: grid; gap: 6px; width: 100%; text-align: left; border: 0; border-radius: 22px; padding: 20px 20px 18px; cursor: pointer; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #c27a4c 0%, #8a4b2a 45%, #4a2414 100%); box-shadow: 0 14px 34px rgba(74,36,20,.28); position: relative; overflow: hidden; } .v2-continue::after { content: ""; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%; border: 22px solid rgba(255,255,255,.08); } .v2-continue .v2-eyebrow { color: rgba(255,255,255,.75); } .v2-continue strong { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; } .v2-continue small { opacity: .88; font-size: .92rem; line-height: 1.35; max-width: 36ch; } .v2-progress { height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin-top: 8px; overflow: hidden; } .v2-progress i { display: block; height: 100%; background: #fff; border-radius: 3px; } .v2-continue-go { justify-self: end; font-weight: 700; font-size: .95rem; margin-top: 2px; } .v2-votd { margin: 16px 0 6px; padding: 20px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); } .v2-votd blockquote { font-family: var(--serif); font-size: 1.28rem; line-height: 1.45; margin: 10px 0 12px; } .v2-votd-ref { border: 0; background: none; color: var(--accent); font-weight: 700; padding: 0; cursor: pointer; font-size: .95rem; } .v2-home-h { font-family: var(--serif); font-size: 1.3rem; margin: 24px 0 10px; font-weight: 600; } .v2-hgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (min-width: 700px) { .v2-hgrid { grid-template-columns: repeat(4, 1fr); } } .v2-hcard { display: grid; gap: 3px; align-content: start; text-align: left; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 20px; padding: 16px; min-height: 118px; cursor: pointer; transition: transform .15s, box-shadow .15s; } .v2-hcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.07); } .v2-hcard:active { transform: scale(.98); } .v2-hcard-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px; background: var(--accent-soft); color: var(--accent); } .v2-hcard-ic svg { width: 24px; height: 24px; } .v2-hcard strong { font-size: 1.05rem; } .v2-hcard small { color: var(--muted); font-size: .82rem; } .v2-hcard.wide { grid-column: 1 / -1; min-height: 0; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; background: linear-gradient(120deg, #2f3a5a, #4b5aa0 55%, #7a4a7e); color: #fff; border: 0; } .v2-hcard.wide .v2-hcard-ic { grid-row: span 2; margin: 0; background: rgba(255,255,255,.16); color: #fff; } .v2-hcard.wide small { color: rgba(255,255,255,.8); } @media (min-width: 700px) { .v2-hcard.wide { grid-column: span 2; } } .v2-home-empty { color: var(--muted); background: var(--paper); border: 1px dashed var(--line); border-radius: 16px; padding: 16px; margin: 0; } .v2-recent { display: grid; gap: 8px; } .v2-recent-item { display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: start; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; color: var(--ink); cursor: pointer; } .v2-recent-item small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-family: var(--serif); font-size: .95rem; margin-top: 2px; } .v2-recent-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: var(--c, var(--accent)); }  .v2-ov { --g: #8a4b2a; font-family: var(--sans); } .v2-ov-hero { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 20px; background: color-mix(in srgb, var(--g) 12%, var(--paper)); border: 1px solid color-mix(in srgb, var(--g) 25%, transparent); } .v2-ov-hero h2 { font-family: var(--serif); font-size: 1.9rem; margin: 2px 0 4px; } .v2-ov-hero .v2-eyebrow { color: var(--g) !important; } .v2-ov-line { margin: 0; line-height: 1.4; } .v2-ov-emblem { width: 96px; height: 96px; } .v2-ov h3 { font-family: var(--serif); font-size: 1.15rem; margin: 20px 0 4px; } .v2-ov-fine { color: var(--muted); font-size: .85rem; margin: 0 0 8px; } .v2-ov-svg { width: 100%; height: auto; display: block; } .v2-ov-row { cursor: pointer; outline: none; } .v2-ov-hit { fill: transparent; } .v2-ov-row:hover .v2-ov-hit, .v2-ov-row:focus .v2-ov-hit { fill: var(--paper-2); } .v2-ov-track { fill: var(--line); } .v2-ov-t { font: 600 13px var(--sans); fill: var(--ink); } .v2-ov-r { font: 12px var(--sans); fill: var(--muted); } .v2-ov-axis { stroke: var(--line); } .v2-chips { display: flex; flex-wrap: wrap; gap: 8px; } .v2-chip { padding: 7px 12px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); font-size: .88rem; color: var(--ink); } .v2-chip-btn { cursor: pointer; } .v2-chip-btn:hover { border-color: var(--g, var(--accent)); } .v2-ov-start { display: block; width: 100%; margin: 24px 0 8px; padding: 15px; border: 0; border-radius: 16px; background: var(--g); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; } .v2-ov-open { display: block; width: 100%; margin: 4px 0 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 700; cursor: pointer; } .v2-ov-card { --g: #8a4b2a; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; width: 100%; text-align: left; margin: 6px 0 14px; padding: 12px 14px; border-radius: 18px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--g) 30%, transparent); background: color-mix(in srgb, var(--g) 9%, var(--paper)); color: var(--ink); font-family: var(--sans); } .v2-ov-card svg { width: 56px; height: 56px; } .v2-ov-card strong { display: block; font-size: 1rem; } .v2-ov-card small { color: var(--muted); font-size: .8rem; } .v2-ov-card .v2-eyebrow { color: var(--g); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .66rem; } .v2-obooks { font-family: var(--sans); } .v2-obooks .v2-eyebrow { margin: 16px 0 8px; } .v2-obook-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .v2-obook { text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); border-left: 4px solid var(--g); background: var(--paper); color: var(--ink); cursor: pointer; display: grid; } .v2-obook small { color: var(--muted); font-size: .76rem; } .v2-themes { font-family: var(--sans); } .v2-theme { padding: 12px 0; border-bottom: 1px solid var(--line); } .v2-theme strong { display: block; margin-bottom: 8px; } .v2-theme-line { display: flex; flex-wrap: wrap; gap: 6px; } .v2-theme-line .v2-chip { border-left: 4px solid var(--g); } @media (prefers-reduced-motion: reduce) { .v2-home { animation: none; } .v2-hcard { transition: none; } } @media (max-width: 959px) { .v2-tabs { grid-template-columns: repeat(5, 1fr) !important; } }  .v2-back-btn { display: none; } html.v2-sub .v2-back-btn { display: grid; } html.v2-sub .v2-brand { display: none; } .v2-back-btn svg { width: 24px; height: 24px; } .v2-tabs { border-top: 0; box-shadow: 0 -1px 0 color-mix(in srgb, var(--line) 70%, transparent); } .v2-tabs button { min-height: 56px; font-size: .72rem; } .v2-tabs svg { width: 26px; height: 26px; } .v2-list { display: grid; } .v2-row { display: grid; grid-template-columns: 44px 1fr 16px; gap: 14px; align-items: center; text-align: left; min-height: 64px; padding: 8px 2px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: none; color: var(--ink); font-family: var(--sans); cursor: pointer; } .v2-row:last-child { border-bottom: 0; } .v2-row-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .v2-row-ic svg { width: 24px; height: 24px; } .v2-row-t strong { display: block; font-size: 1.02rem; } .v2-row-t small { color: var(--muted); font-size: .85rem; } .v2-row-go { color: var(--muted); font-size: 1.4rem; } .v2-more-fine { margin-top: 14px; }  .v2-hcard, .v2-votd, .v2-recent-item { border-color: transparent; background: var(--paper); box-shadow: none; } .v2-hcard:hover { box-shadow: none; background: var(--paper-2); transform: none; } .v2-hcard.wide { background: var(--accent); } .v2-continue { box-shadow: none; background: linear-gradient(140deg, #9a5733, #6e3a20); } .v2-ov-card { border-color: transparent; } .v2-ov-hero { border: 0; }  html.v2 .tx-page { max-width: 720px; margin: 0 auto; padding-bottom: calc(var(--tabh) + 40px); } html.v2 .tx-page > .chapter-kicker { display: none; } html.v2 .tx-page .tx-title { font-family: var(--serif); font-size: 2rem; margin: 6px 0 6px; } html.v2 .tx-page > .blurb { font-size: .92rem; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.v2 .tx-page > .blurb:focus, html.v2 .tx-page > .blurb:hover { -webkit-line-clamp: unset; } html.v2 .tx-page input[type=search], html.v2 .tx-page select { border: 0 !important; background: var(--paper-2) !important; border-radius: 12px !important; min-height: 46px; box-shadow: none !important; } html.v2 .tx-page details, html.v2 .tx-page .tx-note, html.v2 .timeline-card, html.v2 .tx-page article { background: transparent !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; } html.v2 .tx-page details > summary { list-style: none; padding: 16px 4px; min-height: 52px; font-weight: 600; font-size: 1.04rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } html.v2 .tx-page details > summary::-webkit-details-marker { display: none; } html.v2 .tx-page details > summary::after { content: "›"; color: var(--muted); font-size: 1.3rem; transition: transform .2s; } html.v2 .tx-page details[open] > summary::after { transform: rotate(90deg); } html.v2 .tx-page details[open] { padding-bottom: 12px !important; } html.v2 .tx-page .meta, html.v2 .tx-page .fine { color: var(--muted); } html.v2 .tx-page button.jump { border-radius: 999px; } html.v2 .tx-page .plan-card, html.v2 .tx-page [class*="plan"] { box-shadow: none !important; } @media (min-width: 960px) { html.v2-sub .v2-back-btn { margin-left: -88px; width: 88px; } .v2-home { padding-bottom: 3rem; } }  .v2-map-wrap, .v2-tl-wrap { margin: 14px 0 22px; font-family: var(--sans); } .v2-map-chips, .v2-tl-eras { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; } .v2-map-chips::-webkit-scrollbar, .v2-tl-eras::-webkit-scrollbar { display: none; } .v2-map-chips button, .v2-tl-eras button { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--paper-2); color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap; } .v2-map-chips button[aria-pressed=true] { background: var(--c); color: #fff; } .v2-tl-eras button { border-left: 4px solid var(--c); border-radius: 12px; } .v2-map { position: relative; height: min(46vh, 480px); border-radius: 20px; overflow: hidden; background: #dfe9ee; touch-action: none; cursor: grab; outline: none; } .v2-map:active { cursor: grabbing; } .v2-map-svg { width: 100%; height: 100%; display: block; } .v2-sea { fill: #dce8ed; } .v2-land { fill: #f4efe4; stroke: #c9bfa9; stroke-width: .6; vector-effect: non-scaling-stroke; } .v2-lake { fill: #dce8ed; stroke: #c9bfa9; stroke-width: .5; vector-effect: non-scaling-stroke; } html[data-theme=dark] .v2-map, html[data-theme=dark] .v2-sea, html[data-theme=dark] .v2-lake { background: #1b2a33; fill: #1b2a33; } html[data-theme=dark] .v2-land { fill: #2a2d31; stroke: #444; } .v2-route { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 0; opacity: .85; } .v2-stop { cursor: pointer; } .v2-stop circle { stroke-width: 2; vector-effect: non-scaling-stroke; } .v2-stop.approx circle { stroke-dasharray: 3 2; } .v2-stop.on circle { stroke: var(--ink); stroke-width: 3; } .v2-stop-l { font-family: var(--sans); font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-linejoin: round; pointer-events: none; } .v2-map-zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; } .v2-map-zoom button { width: 44px; height: 44px; border-radius: 12px; border: 0; background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink); font-size: 1.3rem; box-shadow: 0 2px 8px rgba(0,0,0,.08); cursor: pointer; } .v2-map-info { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 14px 4px; min-height: 64px; } .v2-map-n { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; } .v2-map-info strong, .v2-map-li strong { display: block; font-size: 1.02rem; } .v2-map-info small, .v2-map-li small { color: var(--muted); font-size: .85rem; } html.v2 .v2-map-read, html.v2 .v2-tl-read { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; } .v2-map-fine { color: var(--muted); font-size: .8rem; line-height: 1.45; margin: 4px 0 0; } .v2-map-h { font-family: var(--serif); font-size: 1.2rem; margin: 26px 0 6px; } .v2-map-stops { list-style: none; counter-reset: s; padding: 0; margin: 0; } .v2-map-stops li { counter-increment: s; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .v2-map-li { display: grid; grid-template-columns: 28px 1fr; text-align: left; width: 100%; padding: 12px 2px; min-height: 52px; border: 0; background: none; color: var(--ink); cursor: pointer; } .v2-map-li::before { content: counter(s); grid-row: span 2; color: var(--muted); font-weight: 700; } .v2-map-stops li.on .v2-map-li strong { color: var(--accent); } .v2-tl { overflow-x: auto; overflow-y: hidden; border-radius: 20px; background: var(--paper); -webkit-overflow-scrolling: touch; cursor: grab; scrollbar-width: thin; } .v2-tl-svg { display: block; } .v2-tl-era { font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; } .v2-tl-axis { stroke: var(--line); stroke-width: 2; } .v2-tl-t { font: 600 11px var(--sans); fill: var(--ink); } .v2-tl-ev { cursor: pointer; outline: none; } .v2-tl-ev circle { transition: r .15s; } .v2-tl-ev.on circle { r: 10; stroke: var(--ink); stroke-width: 2; } .v2-tl-card { --c: var(--accent); margin-top: 12px; padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, var(--c) 8%, var(--paper)); } .v2-tl-card .v2-eyebrow { color: var(--c); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .68rem; display: block; } .v2-tl-card strong { display: block; font-family: var(--serif); font-size: 1.3rem; margin: 2px 0; } .v2-tl-card p { margin: 4px 0 12px; line-height: 1.45; }  .v2-daysplan { margin: 10px 0 26px; padding: 4px 0 8px; font-family: var(--sans); } .v2-dp-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; } .v2-dp-presets button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--paper-2); color: var(--ink); font-weight: 600; cursor: pointer; } .v2-dp-presets button[aria-pressed=true], .v2-daysplan .v2-map-chips button[aria-pressed=true] { background: var(--accent); color: #fff; } .v2-dp-year { flex-basis: 100%; } .v2-dp-dial { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; margin: 14px 0 4px; } .v2-dp-big { text-align: center; font-family: var(--serif); font-size: 2.3rem; } .v2-dp-step { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--paper-2); color: var(--ink); font-size: 1.6rem; cursor: pointer; } #v2-dp-range { width: 100%; accent-color: var(--accent); height: 32px; } .v2-dp-field { display: flex; justify-content: space-between; align-items: center; min-height: 52px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .v2-dp-field input { border: 0; background: var(--paper-2); border-radius: 10px; padding: 8px 10px; color: var(--ink); font: inherit; } .v2-dp-check { display: flex; gap: 10px; align-items: center; min-height: 52px; color: var(--muted); font-size: .9rem; } .v2-dp-check input { width: 22px; height: 22px; accent-color: var(--accent); } .v2-dp-live { display: grid; gap: 2px; margin: 10px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--paper); } .v2-dp-live strong { font-size: 1.1rem; } .v2-dp-live span { color: var(--muted); font-size: .88rem; } html.v2 .v2-dp-go { background: var(--accent); }  html.v2 .tx-page summary.v2-person-sum { display: grid !important; grid-template-columns: 40px 1fr 16px; column-gap: 14px; align-items: center; } summary.v2-person-sum::after { grid-row: 1 / span 2; grid-column: 3; } summary.v2-person-sum .v2-pc-av { grid-row: 1 / span 2; } .v2-person-role { grid-column: 2; color: var(--muted); font-weight: 400; font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .v2-pc-av { --c: #8a4b2a; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, var(--paper)); color: var(--c); font: 600 1.7rem var(--serif); } .v2-pc-av.sm { width: 40px; height: 40px; font-size: 1.1rem; } .v2-pc-hero { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 6px 0 4px; } .v2-pc-hero h2 { font-family: var(--serif); font-size: 1.8rem; margin: 0; } .v2-pc-role { margin: 4px 0 0; color: var(--muted); line-height: 1.4; } .v2-pc-story { line-height: 1.55; margin: 4px 0; } .v2-pc-fam { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .v2-pc-fam small { color: var(--muted); } .v2-tree-open { justify-self: start; margin: 6px 0 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--accent-soft); color: var(--ink); font-weight: 600; cursor: pointer; } .v2-tree-stage { height: min(58vh, 560px); background: var(--paper-2); } .v2-tree-edge { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, var(--line)); stroke-width: 1.6; } .v2-tree-node rect { fill: var(--paper); stroke: var(--line); stroke-width: 1; } .v2-tree-node.group rect { fill: var(--accent-soft); stroke: none; } .v2-tree-node.on rect { stroke: var(--accent); stroke-width: 2.5; } .v2-tree-node { cursor: pointer; } .v2-tree-n { font: 600 13px var(--sans); fill: var(--ink); pointer-events: none; } .v2-tree-s { font: 10.5px var(--sans); fill: var(--muted); pointer-events: none; } .v2-tree-info { grid-template-columns: 1fr auto; } .v2-tree-info strong { display: block; } .v2-tree-info small { color: var(--muted); } .v2-tree-feat { margin: 4px 0 18px; } .v2-tree-feat .v2-map-chips { flex-wrap: wrap; overflow: visible; }  .v2-theme-row { display: grid; gap: 8px; width: 100%; text-align: left; padding: 14px 2px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: none; color: var(--ink); font: inherit; cursor: pointer; min-height: 64px; } .v2-theme-row strong { font-size: 1.05rem; } .v2-thread { width: 100%; height: 120px; display: block; margin: 6px 0 2px; } .v2-thread.sm { height: 30px; } .v2-thread-axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } .v2-thread-none { fill: var(--line); } .v2-thread-bar { cursor: pointer; } .v2-thread-legend { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; } .v2-thread-legend { position: relative; } .v2-thread-legend span:nth-child(2) { position: absolute; left: 59.8%; transform: translateX(-50%); } .v2-theme-note { margin: 4px 0 6px; padding: 14px 16px; border-radius: 16px; background: var(--paper-2); line-height: 1.5; } .v2-theme-note .v2-eyebrow { display: block; margin-bottom: 4px; color: var(--accent) !important; } .v2-theme-book { padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); scroll-margin-top: 12px; } .v2-theme-bh { display: grid; border-left: 4px solid var(--g); padding-left: 10px; margin-bottom: 6px; } .v2-theme-bh small { color: var(--muted); } .v2-theme-q { font-family: var(--serif); margin: 6px 0 8px; line-height: 1.45; color: var(--ink); } .v2-tree-note { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; } .v2-tree-note.open { -webkit-line-clamp: unset; }  .v2-plans-head { display: flex; justify-content: space-between; align-items: baseline; } .v2-link { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: .95rem; padding: 10px 0; cursor: pointer; } .v2-today { margin: 6px 0 22px; padding: 20px; border-radius: 24px; background: var(--paper); font-family: var(--sans); } .v2-today-head { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; } .v2-today-head h2 { margin: 2px 0 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; } .v2-today-head .v2-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 700; color: var(--accent); margin: 0; } .v2-ring { width: 64px; height: 64px; } .v2-ring-bg { fill: none; stroke: var(--paper-2); stroke-width: 6; } .v2-ring-fg { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; } .v2-ring text { font: 700 13px var(--sans); fill: var(--ink); } .v2-today-rows { margin: 16px 0 6px; } .v2-today-row { display: grid; grid-template-columns: 44px 1fr; align-items: center; min-height: 56px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .v2-today-row:last-child { border-bottom: 0; } .v2-check { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); background: none; cursor: pointer; display: grid; place-items: center; padding: 0; } .v2-check.on { background: var(--accent); border-color: var(--accent); } .v2-check.on::after { content: ""; width: 8px; height: 14px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-2px) rotate(45deg); } .v2-today-ref { text-align: left; border: 0; background: none; color: var(--ink); font: 600 1.12rem var(--serif); padding: 14px 0; cursor: pointer; } .v2-today-row.done .v2-today-ref { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); } html.v2 .v2-read-now { margin: 14px 0 6px; background: var(--accent); min-height: 54px; font-size: 1.05rem; } .v2-today-sub { text-align: center; color: var(--muted); font-size: .85rem; margin: 6px 0 0; } .v2-plans-lead { color: var(--muted); margin: 0 0 14px; } .v2-start-grid { display: grid; gap: 10px; margin-bottom: 22px; } .v2-start-card { display: grid; gap: 3px; text-align: left; padding: 20px; min-height: 84px; border: 0; border-radius: 20px; background: var(--paper); color: var(--ink); cursor: pointer; font-family: var(--sans); } .v2-start-card strong { font: 600 1.25rem var(--serif); } .v2-start-card small { color: var(--muted); font-size: .9rem; } .v2-start-card[data-start=year] { background: var(--accent); color: #fff; } .v2-start-card[data-start=year] small { color: rgba(255,255,255,.82); } html.v2 .tx-page details.v2-plan-more { margin-top: 10px !important; border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent) !important; } html.v2 .tx-page details.v2-plan-more > summary { color: var(--muted); font-weight: 600; } .v2-plan-pick.on .v2-row-ic { background: var(--accent); color: #fff; }  .v2-dp-dots { display: flex; gap: 6px; justify-content: center; margin: 0 0 14px; } .v2-dp-dots i { width: 28px; height: 4px; border-radius: 2px; background: var(--line); } .v2-daysplan[data-step="1"] [data-dot="1"], .v2-daysplan[data-step="2"] [data-dot="1"], .v2-daysplan[data-step="2"] [data-dot="2"], .v2-daysplan[data-step="3"] i { background: var(--accent); } .v2-dp-stephead { display: flex; gap: 10px; align-items: center; font: 600 1.25rem var(--serif); margin: 4px 0 14px; } .v2-dp-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 .9rem var(--sans); } .v2-dp-stepbox[data-step="1"] .v2-map-chips { flex-wrap: wrap; overflow: visible; } .v2-dp-stepbox[data-step="1"] .v2-map-chips button { min-height: 52px; font-size: 1rem; flex: 1 1 45%; } .v2-dp-nav { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-top: 18px; } .v2-dp-back { border: 0; background: none; color: var(--muted); font-weight: 600; padding: 14px 10px; cursor: pointer; } html.v2 .v2-dp-next { margin: 0; background: var(--accent); grid-column: 2; } .v2-dp-back[hidden] + .v2-dp-next { grid-column: 1 / -1; }
/* v2-p6.css */
:root { --spring: cubic-bezier(.2, .9, .25, 1.12); --ease-out: cubic-bezier(.2, .8, .2, 1); } .v2-art { display: block; width: 100%; height: 100%; }  .v2-home-hero { position: relative; margin: -14px -18px 6px; padding: 0 18px; min-height: 190px; display: flex; align-items: flex-end; overflow: hidden; border-radius: 0 0 28px 28px; } .v2-home-hero .v2-hero-art { position: absolute; inset: 0; will-change: transform; } .v2-home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, var(--bg) 100%); } .v2-home-hero .v2-home-head { position: relative; z-index: 1; padding-top: 70px; } html[data-theme=dark] .v2-home-hero .v2-art { opacity: .45; } .v2-art-sun { animation: v2sun 8s ease-in-out infinite alternate; transform-origin: center; } @keyframes v2sun { to { transform: translateY(-4px); } } .v2-art-bird { animation: v2bird 6s ease-in-out infinite alternate; } @keyframes v2bird { to { transform: translate(10px, -3px); } } .v2-art-boat { animation: v2boat 4s ease-in-out infinite alternate; } @keyframes v2boat { to { transform: translateY(2px) rotate(.6deg); } }  .v2-week { margin: 14px 0 0; padding: 16px 18px; border-radius: 20px; background: var(--paper); } .v2-week-top { display: flex; justify-content: space-between; align-items: baseline; } .v2-week-count { color: var(--muted); font-size: .9rem; } .v2-week-n { color: var(--ink); font-size: 1.15rem; margin-right: 2px; font-variant-numeric: tabular-nums; } .v2-week-days { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 12px; text-align: center; } .v2-week-day i { display: block; width: 30px; height: 30px; margin: 0 auto 4px; border-radius: 50%; background: var(--paper-2); transform: scale(.6); opacity: 0; animation: v2popin .5s var(--spring) forwards; animation-delay: calc(var(--i) * 60ms + 150ms); } .v2-week-day.on i { background: var(--accent); box-shadow: inset 0 0 0 3px color-mix(in srgb, #fff 25%, transparent); } .v2-week-day.today i { outline: 2px solid var(--accent); outline-offset: 2px; } .v2-week-day small { color: var(--muted); font-size: .72rem; font-weight: 600; } @keyframes v2popin { to { transform: scale(1); opacity: 1; } } .v2-plansnip { display: grid; gap: 2px; width: 100%; text-align: left; margin: 14px 0 0; padding: 16px 18px; border: 0; border-radius: 20px; background: var(--paper); color: var(--ink); cursor: pointer; } .v2-plansnip strong { font: 600 1.15rem var(--serif); } .v2-plansnip small { color: var(--accent); font-weight: 600; } .v2-explore-today { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; margin: 16px 0 0; padding: 12px; border: 0; border-radius: 20px; background: var(--paper); color: var(--ink); cursor: pointer; } .v2-et-art { width: 96px; height: 96px; border-radius: 16px; overflow: hidden; display: block; background: var(--paper-2); } .v2-et-art svg { width: 100%; height: 100%; } .v2-et-t { display: grid; gap: 2px; } .v2-et-t strong { font: 600 1.2rem var(--serif); } .v2-et-t small { color: var(--muted); font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }  .v2-intro { --g: #8a4b2a; display: grid; gap: 12px; margin: 4px 0 14px; padding: 16px; border-radius: 20px; background: color-mix(in srgb, var(--g) 7%, var(--paper)); font-family: var(--sans); } .v2-intro.has-map { grid-template-columns: 1fr 88px; } .v2-intro .v2-eyebrow { color: var(--g); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .68rem; } .v2-intro-text { margin: 6px 0 0; font-size: .95rem; line-height: 1.5; color: var(--ink); } .v2-intro-text.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .v2-intro-more { padding: 4px 0; } .v2-intro-people { margin-top: 10px; } .v2-person-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px 4px 4px; min-height: 34px; } .v2-person-chip .v2-portrait { border-radius: 50%; background: var(--paper); } .v2-intro-map { align-self: start; display: grid; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; color: var(--muted); font-size: .72rem; } .v2-minimap { width: 88px; height: 88px; border-radius: 16px; display: block; } .v2-pulse { transform-box: fill-box; transform-origin: center; animation: v2pulse 2s ease-out infinite; } @keyframes v2pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }  .v2-place-map .v2-minimap { width: 100%; height: 200px; border-radius: 20px; } .v2-place-btn { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--paper-2); color: var(--ink); font-weight: 600; margin-right: 6px; cursor: pointer; } .v2-map-info { grid-template-columns: 32px 1fr auto auto !important; }  .v2-xref { margin-top: 18px; } .v2-xref h3 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 2px; } .v2-xref-theme { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 4px; } .v2-xref-theme .v2-eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .7rem; } html.v2 .v2-xref-row { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 0; background: none; color: var(--ink); cursor: pointer; } .v2-xref-row small { color: var(--muted); font-family: var(--serif); font-size: .95rem; line-height: 1.4; }  .v2-ov-art { height: 150px; margin: -6px -2px 14px; border-radius: 20px; overflow: hidden; } .v2-ov-art .v2-art { will-change: transform; } .v2-theme-row.with-art { grid-template-columns: 64px 1fr; column-gap: 14px; align-items: center; } .v2-theme-row.with-art .v2-theme-art { grid-row: span 2; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; } .v2-theme-row.with-art .v2-thread { grid-column: 2; } .v2-theme-row:not(:has(.v2-thread))::after { content: ""; grid-column: 2; height: 30px; border-radius: 8px; background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper) 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: v2shimmer 1.1s linear infinite; } @keyframes v2shimmer { to { background-position: -200% 0; } }  .v2-pc-av.has-portrait { background: none; overflow: hidden; padding: 0; } .v2-pc-av.has-portrait .v2-portrait { width: 100%; height: 100%; } .v2-portrait-note { margin: 0; color: var(--muted); font-size: .72rem; }  .v2-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .6s var(--spring); } .v2-reveal.v2-in { opacity: 1; transform: none; } .v2-stagger { animation: v2up .5s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes v2up { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } } .v2-enter { animation: v2page .42s var(--ease-out) backwards; } @keyframes v2page { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }  html.v2 button, html.v2 summary, .v2-tree-node, .v2-stop { transition: transform .18s var(--spring), background-color .2s, color .2s, opacity .2s; } html.v2 button:active:not(:disabled), html.v2 summary:active { transform: scale(.97); } .v2-tabs button:active { transform: scale(.9) !important; } .v2-tabs button[aria-current="page"] svg { animation: v2tab .4s var(--spring); } @keyframes v2tab { 0% { transform: scale(.8) translateY(2px); } 100% { transform: none; } }  #v2-sheet { transition: transform .5s var(--spring), opacity .25s !important; } #v2-scrim { transition: opacity .3s !important; }  .v2-check.v2-pop { animation: v2check .45s var(--spring); } @keyframes v2check { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } .v2-check.on::after { animation: v2tick .35s .05s var(--ease-out) both; } @keyframes v2tick { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } .v2-ring-fg { animation: v2ring 1s var(--ease-out) both; } @keyframes v2ring { from { stroke-dasharray: 0 999; } } .verse.v2-sweep { background-image: linear-gradient(90deg, color-mix(in srgb, var(--hlc, #f6d878) 60%, transparent), color-mix(in srgb, var(--hlc, #f6d878) 60%, transparent)); background-repeat: no-repeat; animation: v2sweep .6s var(--ease-out) both; } @keyframes v2sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }  @keyframes v2turnR { from { opacity: 0; transform: translateX(36px) rotateY(-6deg); } to { opacity: 1; transform: none; } } @keyframes v2turnL { from { opacity: 0; transform: translateX(-36px) rotateY(6deg); } to { opacity: 1; transform: none; } } html.v2 main.v2-in-r { animation: v2turnR .45s var(--ease-out) backwards !important; transform-origin: left center; } html.v2 main.v2-in-l { animation: v2turnL .45s var(--ease-out) backwards !important; transform-origin: right center; }  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; } html.v2-vt-tab::view-transition-old(root) { animation: v2fadeout .2s ease both; } html.v2-vt-tab::view-transition-new(root) { animation: v2fadein .3s var(--ease-out) both; } @keyframes v2fadeout { to { opacity: 0; transform: translateY(-4px); } } @keyframes v2fadein { from { opacity: 0; transform: translateY(6px); } } ::view-transition-group(v2-card) { animation-duration: .42s; animation-timing-function: var(--spring); } ::view-transition-old(v2-card), ::view-transition-new(v2-card) { height: 100%; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .v2-reveal, .v2-stagger, .v2-enter, .v2-week-day i, .v2-ring-fg, .v2-check.on::after, .v2-art-sun, .v2-art-bird, .v2-art-boat, .v2-pulse { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } html.v2 main.v2-in-r, html.v2 main.v2-in-l { animation: none !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } #v2-sheet[style*="translateY"] { transition: none !important; }  .v2-db-lede { color: var(--muted); margin: 0 0 12px; } .v2-db-search { width: 100%; min-height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; } .v2-db-cats { margin: 12px 0 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .v2-db-cats .v2-chip { flex: none; } .v2-db-cats .on { background: var(--accent); color: #fff; } .v2-db-cat { font-family: var(--serif); font-size: 1.15rem; margin: 18px 0 6px; } .v2-db-row .v2-row-t small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .v2-db-eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .7rem; } .v2-db-sum { font-size: 1rem; line-height: 1.55; margin: 6px 0 14px; } .v2-db-ref-note { padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 9%, var(--paper)); margin-bottom: 14px; } .v2-db-ref-note p { margin: 4px 0 0; line-height: 1.5; font-size: .95rem; } .v2-db-seg { display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); border-radius: 999px; padding: 4px; margin: 4px 0 14px; } .v2-db-seg button { min-height: 38px; padding: 0 20px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 600; cursor: pointer; } .v2-db-seg .on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); } .v2-db-pos { padding: 16px; border-radius: 18px; background: var(--paper); margin-bottom: 12px; } .v2-db-pos h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.15rem; } .v2-db-trad { font-size: .76rem; background: var(--paper-2); } .v2-db-why { line-height: 1.55; margin: 10px 0; } .v2-db-ref { color: var(--accent); font-weight: 600; font-size: .82rem; } .v2-db-obj { margin-top: 10px; } .v2-db-obj summary { cursor: pointer; font-weight: 600; color: var(--muted); min-height: 36px; display: flex; align-items: center; } .v2-db-obj p { margin: 4px 0 0; line-height: 1.5; color: var(--muted); } .v2-db-compare { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -4px; } @media (min-width: 700px) { .v2-db-compare { grid-auto-columns: minmax(240px, 1fr); } } .v2-db-col { scroll-snap-align: start; padding: 16px; border-radius: 18px; background: var(--paper); font-size: .92rem; } .v2-db-col > strong { font-family: var(--serif); font-size: 1.08rem; display: block; margin-bottom: 8px; } .v2-db-col p { margin: 2px 0 10px; line-height: 1.45; } .v2-db-k { text-transform: uppercase; letter-spacing: .07em; font-size: .66rem; font-weight: 700; color: var(--muted); } .v2-db-all { margin-top: 8px; } .v2-db-verse { margin-top: 18px; } .v2-db-verse h3 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 6px; } .v2-db-apoc { background: transparent; border: 1px dashed var(--muted); color: var(--muted); font-size: .82rem; font-style: italic; } .v2-apoc p { line-height: 1.55; } html.v2-flipping #v2-sheet, html.v2-flipping main > *, html.v2-flipping #v2-home-view { overflow: hidden; will-change: transform, opacity; }  html.v2 .v2-db-row { display: grid !important; grid-template-columns: 1fr 20px !important; align-items: center; gap: 12px; padding: 16px 4px !important; min-height: 64px; border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); } .v2-db-row .v2-row-t { display: grid; gap: 4px; min-width: 0; } .v2-db-row .v2-row-t strong { font-size: 17px; line-height: 1.35; font-weight: 600; white-space: normal; } .v2-db-row .v2-row-t small { font-size: 14px; line-height: 1.45; color: var(--muted); display: block !important; -webkit-line-clamp: unset !important; white-space: normal; } .v2-db-list .v2-list { gap: 0; } .v2-db-cat { margin: 26px 0 4px !important; font-size: 1.25rem !important; } .v2-db-cats { gap: 8px; } .v2-db-pos { padding: 20px 18px !important; margin-bottom: 16px !important; } .v2-db-pos h3 { font-size: 19px !important; line-height: 1.35 !important; margin: 0 0 12px !important; } .v2-db-held { display: flex; flex-wrap: wrap; gap: 6px 8px; } .v2-db-trad { font-size: 13px !important; line-height: 1.35; padding: 6px 12px; white-space: normal; text-align: left; max-width: 100%; } .v2-db-why { font-size: 16px; line-height: 1.6 !important; margin: 14px 0 !important; } .v2-db-verses { gap: 8px; flex-wrap: wrap; } .v2-db-col { padding: 20px 18px !important; } .v2-db-col > strong { font-size: 18px !important; line-height: 1.35; margin-bottom: 14px !important; } .v2-db-col p { font-size: 15px; line-height: 1.55 !important; margin: 4px 0 16px !important; } .v2-db-col .v2-chips { flex-wrap: wrap; gap: 6px; } .v2-db-compare { grid-auto-columns: 86% !important; } .v2-db-xsub { display: block; } .v2-db-pos, .v2-db-col { border: 1px solid color-mix(in srgb, var(--line) 90%, transparent); background: color-mix(in srgb, var(--paper-2) 35%, var(--paper)) !important; } .v2-db-obj { margin-bottom: 0; } .v2-db-obj summary { min-height: 40px; } .v2-db-hint { color: var(--muted); font-size: 13px; margin: -6px 0 10px; } .v2-db-trad-link { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--paper)) !important; } .v2-db-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; } .v2-db-sc { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; } .v2-db-sc strong { font-size: 16px; } .v2-db-sc small { color: var(--muted); font-size: 13px; } .v2-dn-sec { margin: 18px 0 0; } .v2-dn-sec h3 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 8px; } .v2-dn-sec p, .v2-dn-list li { font-size: 16px; line-height: 1.55; } .v2-dn-list { margin: 0; padding-left: 20px; } .v2-dn-list li { margin-bottom: 6px; } .v2-cg-who { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 10px; } .v2-cg-sides { display: grid; gap: 10px; margin: 6px 0 10px; } .v2-cg-side { padding: 12px 14px; border-radius: 12px; background: var(--paper); border-left: 3px solid var(--accent); } .v2-cg-side strong { font-size: 15px; } .v2-cg-side p { margin: 4px 0 0; line-height: 1.5; font-size: 15px; } .v2-nb-q { border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); } .v2-nb-q summary { list-style: none; cursor: pointer; padding: 16px 28px 16px 2px; font-size: 17px; font-weight: 600; line-height: 1.4; position: relative; } .v2-nb-q summary::-webkit-details-marker { display: none; } .v2-nb-q summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 22px; color: var(--accent); transition: transform .25s var(--spring); } .v2-nb-q[open] summary::after { transform: rotate(45deg); } .v2-nb-a { padding: 0 2px 18px; animation: v2up .35s var(--ease-out) backwards; } .v2-nb-a p { font-size: 16px; line-height: 1.6; margin: 0 0 12px; } .v2-hcard-q { font: 700 1.2rem var(--serif); display: grid; place-items: center; }  .v2-dp-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 12px; max-height: 300px; overflow: auto; padding: 2px; } .v2-dp-books button, .v2-dp-topic button { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 14px; cursor: pointer; padding: 6px 8px; } .v2-dp-books button[aria-pressed=true], .v2-dp-topic button[aria-pressed=true] { background: var(--accent); color: #fff; border-color: var(--accent); } .v2-dp-topic { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .v2-dp-topic button { padding: 0 18px; } .v2-dp-topic .v2-input { width: 100%; } .v2-dp-mode { margin: 0 0 14px; } .v2-dp-label { font-weight: 600; margin: 8px 0 6px; color: var(--muted); font-size: 14px; } #v2-dp-name, #v2-dp-groupname { width: 100%; margin: 10px 0; } .v2-group-code { font: 700 2.2rem/1 ui-monospace, monospace; letter-spacing: .2em; text-align: center; padding: 18px; border-radius: 16px; background: var(--paper-2); } .v2-daysplan button:disabled { opacity: .45; } .v2-plans-page #gen-form, .v2-plans-page #plan-form, #v2-plan-more #gen-form, #v2-plan-more #plan-form { display: none !important; } #v2-plan-more [data-plan-edit] { display: none !important; } .v2-appear { margin-top: 22px; } .v2-appear h3 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 6px; } .v2-app-sum { font-weight: 700; font-size: 16px; margin: 0 0 4px; } .v2-app-skel { height: 120px; border-radius: 14px; background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper) 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: v2shimmer 1.1s linear infinite; } .v2-app-books { margin-top: 10px; } .v2-app-book { border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); } .v2-app-book summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; cursor: pointer; list-style: none; font-size: 16px; } .v2-app-book summary::-webkit-details-marker { display: none; } .v2-app-n { min-width: 34px; text-align: center; padding: 3px 10px; border-radius: 999px; background: var(--paper-2); font-weight: 700; font-size: 13px; } .v2-app-verses { padding: 0 0 10px; } #v2-plan-old { display: none !important; } .v2-dp-pop { display: grid; gap: 10px; margin-bottom: 14px; } .v2-dp-pop button { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; } .v2-dp-pop button strong { font-size: 16.5px; } .v2-dp-pop button small { color: var(--muted); font-size: 13.5px; } .v2-dp-pop button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .v2-dp-inline { margin-top: 6px; } .v2-plan-minis { display: flex; gap: 10px; margin: 22px 0 8px; } .v2-plan-mini { flex: 1; display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .v2-join { display: grid; gap: 10px; } .v2-join input { min-height: 48px; font-size: 18px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); letter-spacing: .15em; text-transform: uppercase; }  .v2-today-compact { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 8px; align-items: center; padding: 14px 16px; } .v2-today-compact .v2-today-head { grid-column: 1; gap: 0; } .v2-today-compact .v2-today-head svg, .v2-today-compact .v2-today-head > :first-child:not(div) { display: none; } .v2-today-compact .v2-today-head h2 { font-size: 18px; margin: 2px 0 0; line-height: 1.2; } .v2-today-compact .v2-read-now { grid-column: 2; grid-row: 1 / span 2; width: auto; min-height: 44px; padding: 0 18px; margin: 0; } .v2-today-compact .v2-today-rows { grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; } .v2-today-compact .v2-today-row { border: 0; padding: 0; gap: 4px; min-height: 0; } .v2-today-compact .v2-check { width: 22px; height: 22px; min-width: 22px; } .v2-today-compact .v2-today-ref { font-size: 14.5px; padding: 2px 4px 2px 0; min-height: 32px; } .v2-today-compact .v2-today-sub, .v2-today-compact > .v2-ov-fine { display: none; } .v2-np-h { margin: 26px 0 4px; font: 700 1.5rem/1.2 var(--serif); } .v2-today-compact .v2-today-head { grid-template-columns: 1fr; } #v2-today.v2-today-compact .v2-today-rows { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; } #v2-today.v2-today-compact .v2-today-row { display: flex; grid-template-columns: none; min-height: 34px; border: 0; } .v2-today-compact .v2-today-ref { font-family: inherit; font-weight: 600; } #v2-today.v2-today-compact > .v2-ov-fine { display: block; grid-column: 1 / -1; margin: 0; font-size: 13px; } .v2-dp-books[hidden], .v2-dp-topic[hidden], .v2-dp-stepbox[hidden], .v2-daysplan [hidden] { display: none !important; } #v2-today.v2-today-compact .v2-today-row { width: auto; flex: 0 0 auto; } .v2-today-compact .v2-today-ref { width: auto; }  .v2-dp-one { display: grid; gap: 10px; } .v2-dp-one .v2-dp-label { margin: 10px 0 0; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .v2-dp-choices { border-radius: 18px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; } .v2-dp-choice { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: center; width: 100%; min-height: 58px; padding: 10px 16px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; } .v2-dp-choices > .v2-dp-choice + .v2-dp-choice { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .v2-dp-choice strong { display: block; font-size: 16px; } .v2-dp-choice small { color: var(--muted); font-size: 13px; } .v2-dp-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; transition: border .15s, box-shadow .15s; } .v2-dp-choice[aria-checked="true"] .v2-dp-dot { border: 7px solid var(--accent); } .v2-dp-choice[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 6%, transparent); } .v2-dp-one .v2-dp-books { padding: 4px 12px 14px; } .v2-dp-dayrow { display: grid; gap: 10px; } .v2-dp-one .v2-dp-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .v2-dp-one .v2-dp-presets button { min-height: 44px; } .v2-dp-options summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 8px 0; min-height: 32px; } .v2-dp-options[open] { display: grid; gap: 10px; }  .v2-lib { margin-top: 18px; } .v2-lib-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; touch-action: pan-x pan-y; } .v2-lib-chips::-webkit-scrollbar { display: none; } .v2-lib-chips button { flex: 0 0 auto; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; } .v2-lib-chips button[aria-pressed="true"] { background: var(--ink); color: var(--bg, #fff); border-color: var(--ink); } .v2-lib-sec { margin-top: 22px; } .v2-lib-sec[hidden], .v2-lib [hidden] { display: none !important; } .v2-lib-sec h3 { margin: 0 0 10px; font: 700 1.3rem/1.2 var(--serif); } .v2-lib-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 2px 20px 8px; scrollbar-width: none; touch-action: pan-x pan-y; } .v2-lib-row::-webkit-scrollbar { display: none; } .v2-rt-card, .v2-st-card { flex: 0 0 auto; scroll-snap-align: start; text-align: left; border: 0; cursor: pointer; font: inherit; } .v2-rt-card { width: 150px; min-height: 96px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--ink); display: grid; align-content: space-between; gap: 8px; } .v2-rt-card strong { font-size: 16px; line-height: 1.25; } .v2-rt-card small { color: var(--muted); font-weight: 600; } .v2-st-card { width: 168px; display: grid; gap: 4px; padding: 0 0 12px; background: none; color: var(--ink); } .v2-st-art { display: block; height: 120px; border-radius: 18px; margin-bottom: 6px; background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, #fff 28%, var(--st)) 0, transparent 55%), linear-gradient(150deg, var(--st), color-mix(in srgb, #000 30%, var(--st))); box-shadow: 0 10px 22px -16px var(--st); } .v2-st-card strong { font-size: 15.5px; line-height: 1.3; } .v2-st-card small { color: var(--muted); font-size: 13px; } .v2-st-hero { padding: 26px 20px 20px; border-radius: 20px; color: #fff; background: linear-gradient(150deg, var(--st), color-mix(in srgb, #000 35%, var(--st))); } .v2-st-hero .v2-eyebrow { color: #fff; opacity: .85; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; } .v2-st-hero h2 { margin: 6px 0 0; font: 700 1.7rem/1.15 var(--serif); } .v2-st-sum { font-size: 16.5px; line-height: 1.6; margin: 16px 2px; } .v2-st-h { margin: 22px 2px 10px; font: 700 1.2rem/1.2 var(--serif); } .v2-st-stories { display: grid; gap: 10px; } .v2-st-story { display: grid; gap: 3px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; } .v2-st-story strong { font-size: 16px; } .v2-st-ref { color: var(--accent); font-weight: 700; font-size: 14px; } .v2-st-story small { color: var(--muted); font-size: 14px; line-height: 1.45; } .v2-st-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .v2-st-days li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 8px 2px; } .v2-st-dn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 700; font-size: 13px; } .v2-st-days strong { display: block; font-size: 15px; } .v2-st-days small { color: var(--muted); font-size: 13px; } .v2-st-go { width: 100%; margin-top: 22px; min-height: 54px; font-size: 17px; } .v2-st-opts summary { color: var(--muted); font-size: 14px; padding: 12px 2px; cursor: pointer; } .v2-st-opts[open] { display: grid; gap: 10px; } .v2-today-study { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .v2-today-study strong { font-size: 15.5px; } .v2-today-study p { margin: 0; font-size: 14.5px; line-height: 1.45; } .v2-ts-k { display: inline-block; margin-right: 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .v2-pace { display: grid; gap: 10px; margin-top: 8px; padding: 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); } .v2-pace .v2-st-h { margin: 0; } .v2-pace-chips { display: flex; flex-wrap: wrap; gap: 8px; } .v2-pace [hidden] { display: none !important; } .v2-pace-chips button { flex: 1 0 auto; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg, #fff); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; } .v2-pace-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } .v2-pace-dial { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; } .v2-pace-val { font: 600 1.25rem/1 var(--serif); } .v2-pace-k { margin: 4px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .v2-pace-live { margin: 2px 0 0; display: grid; gap: 2px; } .v2-pace-live strong { font-size: 15.5px; } .v2-pace-live span { color: var(--muted); font-size: 13.5px; }
/* v2-p10.css */
.p10-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .p10-act { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg, #fff); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .12s; } .p10-act:active { transform: scale(.96); } .p10-catch { border-color: var(--accent); color: var(--accent); } .p10-gold { background: #c9a14a; border-color: #c9a14a; color: #fff; } .p10-streak { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #a77d22; } .p10-journal { grid-column: 1 / -1; display: grid; gap: 6px; } .p10-journal textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg, #fff); color: var(--ink); } .p10-recap { margin-top: 14px; padding: 16px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 10px; } .p10-recap .v2-eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 800; color: var(--accent); } .p10-stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; } .p10-stats strong { display: block; font: 700 1.5rem/1.1 var(--serif); } .p10-stats small { color: var(--muted); font-size: 12px; } .p10-themes { margin: 0; color: var(--muted); font-size: 14px; } .p10-recap .p10-act { justify-self: start; } .p10-group { display: grid; gap: 10px; } .p10-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .p10-row .v2-input { flex: 1; } .p10-code { display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--paper)); } .p10-code strong { font: 700 1.8rem/1 ui-monospace, monospace; letter-spacing: .15em; } .p10-code small { color: var(--muted); } .p10-members { display: grid; gap: 2px; } .p10-mem { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; } .p10-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 800; } .p10-mem-t strong { display: block; } .p10-mem-t small { color: var(--muted); font-size: 13px; } .p10-tick { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); } .p10-tick.on { background: #5b6b3a; border-color: #5b6b3a; color: #fff; } .p10-note { padding: 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); } .p10-note p { margin: 4px 0 8px; line-height: 1.5; } .p10-reacts { display: flex; gap: 6px; } .p10-react { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; } .p10-guide { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; } .p10-guide small { display: block; color: var(--accent); font-weight: 600; } .p10-guide p { margin: 2px 0 0; color: var(--muted); } .p10-sync { font-size: 12.5px; color: var(--muted); margin-top: 8px; } .p10-cert img { width: 100%; border-radius: 12px; box-shadow: 0 12px 30px -18px #000; } .p10-cert .p10-row { margin-top: 14px; } .p10-cert a { flex: 1; text-align: center; text-decoration: none; } .p10-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 99; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg, #fff); font-size: 14px; } .p10-banner { position: fixed; left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top)); z-index: 90; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 12px 30px -18px #000; } .p10-banner span { flex: 1; font-weight: 600; } .p10-x { border: 0; background: none; font-size: 22px; color: var(--muted); cursor: pointer; } .p10-cele { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(20, 20, 40, .35); opacity: 0; transition: opacity .25s; overflow: hidden; } .p10-cele.on { opacity: 1; } .p10-cele-card { width: min(320px, 86vw); padding: 26px 22px; border-radius: 24px; background: var(--paper); text-align: center; transform: scale(.9); transition: transform .35s cubic-bezier(.2,1.4,.4,1); } .p10-cele.on .p10-cele-card { transform: none; } .p10-cele-card strong { font: 700 1.6rem/1.2 var(--serif); } .p10-cele-card p { color: var(--muted); } .p10-cele-card .v2-ov-start { width: 100%; } .p10-conf { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: p10fall 1.6s ease-in forwards; } @keyframes p10fall { to { transform: translate(var(--dx), 105vh) rotate(540deg); opacity: .2; } } @media (prefers-reduced-motion: reduce) { .p10-cele, .p10-cele-card { transition: none; } .p10-conf { display: none; } }
/* v2-p11.css */
.p11-k { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .p11-culture, .p11-chprom { margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); display: grid; gap: 12px; } .p11-cn strong { font-size: 16px; } .p11-cn p { margin: 4px 0 6px; line-height: 1.6; font-size: 15.5px; } .p11-refs { display: flex; flex-wrap: wrap; gap: 6px; } .p11-ref { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } #study .p11-culture { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); } .p11-prow { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; } .p11-prow strong { font-size: 15px; line-height: 1.3; } .p11-badge { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .p11-badge.done { background: #e6eedb; color: #4a5a2a; } .p11-badge.partly { background: #f3e8cc; color: #7a5a14; } .p11-badge.await { background: #e3e5f6; color: #3a3f9e; } .p11-pbg { margin: 14px 0; padding: 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); } .p11-pbg h4 { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .p11-pbg p, .p11-pbg li { line-height: 1.6; font-size: 15.5px; margin: 0; } .p11-pbg ul { padding-left: 18px; margin: 0; display: grid; gap: 6px; } .p11-pbg .p11-refs { margin-top: 12px; } .p11-when { margin: 16px 0; padding: 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 8px; } .p11-wr { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 14.5px; } .p11-wr span { color: var(--muted); } .p11-wr strong { font-weight: 600; line-height: 1.4; } .p11-wn { margin: 4px 0 0; line-height: 1.55; font-size: 15px; } .p11-debate summary { color: var(--accent); font-weight: 600; cursor: pointer; padding: 4px 0; } .p11-debate p { line-height: 1.55; margin: 6px 0 0; } .p11-link { justify-self: start; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; padding: 6px 0; cursor: pointer; } .p11-legend { display: flex; gap: 14px; margin: 8px 0 12px; font-size: 13px; color: var(--muted); } .p11-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } .lg-era::before { background: color-mix(in srgb, var(--accent) 18%, transparent); } .lg-pow::before { background: #8a4a4a; } .lg-book::before { background: #3a3f9e; } .p11-tl { position: relative; margin-left: 46px; --eraw: 30%; --poww: 14px; } .p11-era { position: absolute; left: 0; width: var(--eraw); box-sizing: border-box; border: 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent) calc(6% + 0%), transparent); text-align: left; padding: 6px 6px; font: inherit; color: var(--ink); cursor: pointer; overflow: hidden; display: grid; align-content: start; gap: 2px; } .p11-era:nth-of-type(odd) { background: color-mix(in srgb, var(--accent) 12%, transparent); } .p11-era strong { font-size: 12.5px; line-height: 1.2; } .p11-era small { font-size: 11px; color: var(--muted); } .p11-pre { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--line) 60%, transparent) 6px 7px); } .p11-power { position: absolute; left: calc(var(--eraw) + 4px); width: var(--poww); border-radius: 6px; background: var(--pc); opacity: .85; } .p11-power span { position: absolute; top: 4px; left: 50%; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-size: 10px; color: #fff; font-weight: 700; white-space: nowrap; } .p11-gap { position: absolute; left: calc(var(--eraw) + var(--poww) + 10px); right: 0; z-index: 1; border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--paper) 85%, transparent); text-align: left; padding: 8px 10px; font: inherit; color: var(--ink); cursor: pointer; display: grid; align-content: start; gap: 4px; overflow: hidden; } .p11-gap strong { font-size: 13px; } .p11-gap small { font-size: 12px; color: var(--muted); line-height: 1.4; } .p11-gap.big { background: color-mix(in srgb, #c9a14a 14%, var(--paper)); border-color: #c9a14a; } .p11-book { position: absolute; z-index: 2; left: calc(var(--eraw) + var(--poww) + 10px + (100% - var(--eraw) - var(--poww) - 10px) / var(--lanes) * var(--lane)); width: calc((100% - var(--eraw) - var(--poww) - 10px) / var(--lanes) - 3px); box-sizing: border-box; min-height: 22px; border: 0; border-radius: 6px; background: #3a3f9e; color: #fff; font: inherit; font-size: 10.5px; font-weight: 700; padding: 3px 4px; text-align: left; cursor: pointer; overflow: hidden; } .p11-book.nt { background: #8a5a3c; } .p11-book.on { outline: 3px solid #c9a14a; } .p11-book span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p11-tick { position: absolute; left: -46px; width: 42px; text-align: right; font-size: 10.5px; color: var(--muted); transform: translateY(-50%); } .p11-prom { display: grid; gap: 8px; } .p11-lead { margin: 0; font-size: 16px; line-height: 1.5; } .p11-plist { display: grid; gap: 14px; margin-top: 6px; } .p11-pc { padding: 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 8px; } .p11-pc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .p11-cat { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .p11-pc h3 { margin: 0; font: 700 1.2rem/1.3 var(--serif); } .p11-to { margin: 0; color: var(--muted); font-size: 14px; } .p11-pt { margin: 0; font-style: italic; line-height: 1.55; } .p11-ful { margin: 0; padding-left: 18px; display: grid; gap: 10px; } .p11-ful p { margin: 0 0 6px; line-height: 1.5; } .p11-nofull { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.45; background: color-mix(in srgb, var(--accent) 6%, transparent); } .p11-span { margin: 0; font-size: 13.5px; color: var(--muted); font-weight: 600; } @media (min-width: 960px) { .p11-tl { --eraw: 24%; } .p11-book { font-size: 11.5px; } }  .v2-intro .p11-culture, .v2-intro .p11-chprom, .v2-intro .p11-mark { grid-column: 1 / -1; flex: 1 0 100%; width: 100%; min-width: 0; } .p11-tlwrap { overflow-x: auto; overflow-y: visible; margin: 0 -20px; padding: 0 20px 10px; touch-action: pan-x pan-y; } .p11-tl { --eraw: 104px; --poww: 14px; --lw: 74px; width: calc(var(--eraw) + var(--poww) + 12px + var(--lanes) * var(--lw)); min-width: calc(100% - 46px); } .p11-book { left: calc(var(--eraw) + var(--poww) + 12px + var(--lane) * var(--lw)); width: calc(var(--lw) - 4px); font-size: 11px; } .p11-book span { white-space: normal; line-height: 1.15; } .p11-gap { right: auto; width: calc(var(--lanes) * var(--lw)); max-width: none; } .p11-gap.big small { max-width: 280px; }  .p11-rail { position: fixed; right: 6px; top: 50%; z-index: 5; width: 26px; height: 300px; margin-top: -150px; overflow: visible; touch-action: none; } .p11-rail::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 40%, transparent) 20% 80%, transparent); } .p11-rail-track { position: absolute; left: 0; right: 0; top: calc(50% - 13px); transition: transform .45s cubic-bezier(.2,.9,.3,1); } .p11-dot { position: relative; display: block; width: 26px; height: 34px; border: 0; background: none; padding: 0; cursor: pointer; opacity: calc(1 - var(--k, 4) * .2); transition: opacity .3s; } .p11-dot i { position: absolute; left: 8px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); box-sizing: border-box; transform: scale(calc(1 - var(--k, 4) * .12)); transition: transform .3s, background .3s; } .p11-dot.on i { background: var(--accent); transform: scale(1.45); } .p11-dot span { position: absolute; right: 30px; top: 7px; white-space: nowrap; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: var(--bg, #fff); opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; pointer-events: none; } .p11-dot.on span { opacity: 1; transform: none; } .p11-hist { padding-right: 22px; }  .p11-rrail { position: fixed; z-index: 30; right: 8px; top: 50%; transform: translateY(-50%); display: grid; justify-items: end; gap: 8px; border: 0; background: none; padding: 6px 2px; cursor: pointer; color: var(--ink); opacity: .55; transition: opacity .25s; } .p11-rrail:hover, .p11-rrail:focus-visible { opacity: 1; } .p11-rr-dots { display: grid; gap: 7px; justify-items: center; position: relative; padding: 0 4px; } .p11-rr-dots::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 50%; width: 1.5px; margin-left: -.75px; background: var(--line); } .p11-rr-dots i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--line); opacity: calc(1 - var(--k) * .18); } .p11-rr-dots i.on { width: 10px; height: 10px; background: var(--accent); opacity: 1; } .p11-rr-label { display: none; text-align: right; } .p11-rr-label strong { display: block; font-size: 11.5px; } .p11-rr-label small { font-size: 10.5px; color: var(--muted); } .p11-rrail:hover .p11-rr-label { display: block; } @media (max-width: 899px) { .p11-rrail { top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); transform: none; right: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 92%, transparent); border: 1px solid var(--line); box-shadow: 0 6px 18px -12px #000; opacity: .9; } .p11-rr-dots { display: flex; gap: 4px; padding: 0; } .p11-rr-dots::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1.5px; margin: -.75px 0 0; } .p11-rr-dots i { width: 5px; height: 5px; } .p11-rr-dots i.on { width: 8px; height: 8px; } .p11-rr-label { display: block; text-align: left; } .p11-rr-label small { display: none; } } html.v2-home-on .p11-rrail, body.v2-search-on .p11-rrail { display: none; } @media (prefers-reduced-motion: reduce) { .p11-rail-track, .p11-dot, .p11-dot i, .p11-dot span, .p11-rrail { transition: none; } }
/* v2-p12.css */
html.v2.p12 { --bg: #f1f1f3; --paper: #ffffff; --paper-2: #f4f4f6; --ink: #17171a; --muted: #85858c; --line: #e7e7ea; --accent: #17171a; --accent-soft: #ececef; --select: #efeff2; --select-edge: #17171a; --pop: #17171a; --hx-indigo: #17171a; --gold: #c9a14a; --scripture: "Iowan Old Style", "Charter", "Source Serif 4", "Palatino Linotype", Palatino, Georgia, serif; --serif: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --r-card: 28px; --r-mid: 20px; } html.v2.p12[data-theme="dark"] { --bg: #0e0e10; --paper: #1b1b1f; --paper-2: #232328; --ink: #f2f2f4; --muted: #9a9aa2; --line: #2b2b31; --accent: #f2f2f4; --accent-soft: #2b2b31; --select: #26262b; --select-edge: #f2f2f4; --hx-indigo: #f2f2f4; } html.v2.p12 .reading .verse, html.v2.p12 blockquote, html.v2.p12 .v2-votd blockquote, html.v2.p12 .phrase-quote, html.v2.p12 .p11-pt { font-family: var(--scripture); } html.v2.p12 h1, html.v2.p12 h2, html.v2.p12 h3 { letter-spacing: -.02em; } html.v2.p12 .reading h2 { font-weight: 700; }  html.v2.p12 .v2-ov-start, html.v2.p12 .v2-read-now, html.v2.p12 .v2-dp-go { background: var(--ink); color: var(--bg); border-radius: 999px; border: 0; } html.v2.p12 .v2-lib-chips button, html.v2.p12 .p12-chips button, html.v2.p12 .v2-map-chips button, html.v2.p12 .v2-pace-chips button { border-radius: 999px; background: var(--paper); border: 0; box-shadow: 0 0 0 1px var(--line) inset; color: var(--ink); } html.v2.p12 [aria-pressed="true"]:is(.v2-lib-chips button, .p12-chips button, .v2-map-chips button, .v2-pace-chips button) { background: var(--ink); color: var(--bg); box-shadow: none; }  html.v2.p12 :is(.v2-today, .p10-recap, .hx-xlist, .v2-pace, .p11-pc, .p11-when, .p11-pbg, .hx-pick, .v2-dp-choices, .p12-votd, .v2-st-story) { background: var(--paper); border: 0; border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 30px -22px rgba(0,0,0,.25); } html.v2.p12 .hx-xfeat { background: var(--ink); color: var(--bg); border-radius: var(--r-card); } html.v2.p12 .hx-xfeat .hx-eyebrow { color: var(--gold); } html.v2.p12 .hx-xrow-ic, html.v2.p12 .v2-st-dn { background: var(--paper-2); color: var(--ink); border-radius: 14px; } html.v2.p12 .hx-xfind, html.v2.p12 .v2-input { border-radius: 999px; background: var(--paper); border: 0; box-shadow: 0 0 0 1px var(--line) inset; }  html.v2.p12 .v2-tabs { left: 50%; right: auto; bottom: calc(14px + var(--sab)); width: min(330px, calc(100% - 40px)); transform: translateX(-50%); padding: 8px; border: 0; border-radius: 999px; background: #17171a; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); grid-template-columns: repeat(5, 1fr); } html.v2.p12[data-theme="dark"] .v2-tabs { background: #2a2a30; } html.v2.p12 .v2-tabs button { position: relative; z-index: 1; min-height: 44px; padding: 0; color: rgba(255,255,255,.7); border-radius: 999px; transition: color .25s; } html.v2.p12 .v2-tabs button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html.v2.p12 .v2-tabs svg { width: 22px; height: 22px; } html.v2.p12 .v2-tabs button[aria-current="page"] { color: #17171a; } html.v2.p12 .v2-tabs button:active { background: none; } .p12-tabdot { position: absolute; left: 0; top: 0; z-index: 0; width: 44px; height: 44px; border-radius: 50%; background: #fff; transition: transform .55s cubic-bezier(.3,1.6,.45,1), opacity .2s; pointer-events: none; } html.v2.p12 main, html.v2.p12 #v2-home-view { padding-bottom: calc(110px + var(--sab)); } @media (min-width: 960px) { html.v2.p12 .v2-tabs { top: 50%; bottom: auto; left: 18px; width: 64px; transform: translateY(-50%); grid-template-columns: 1fr; grid-auto-rows: 52px; padding: 10px; } html.v2.p12 body { padding-left: 100px; } }  html.v2.p12 .v2-sheet { border-radius: 32px 32px 0 0; background: var(--bg); }  html.v2.p12 .p12-head { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 0; height: auto; padding: calc(var(--sat) + 18px) 22px 6px; background: none; color: var(--ink); overflow: visible; } html.v2.p12 .p12-head .hx-greet { margin: 0; font-size: 28px; font-weight: 700; color: var(--ink); text-shadow: none; } html.v2.p12 .p12-head .hx-date { margin: 2px 0 0; color: var(--muted); font-size: 14px; text-shadow: none; opacity: 1; } .p12-avatar { width: 48px; height: 48px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #c9a14a, #8a5a3c); color: #fff; font-size: 19px; font-weight: 700; box-shadow: 0 0 0 3px var(--paper), 0 6px 16px -8px rgba(0,0,0,.5); cursor: pointer; } .p12-searchrow { display: flex; gap: 10px; padding: 12px 22px 4px; } .p12-search { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--paper); color: var(--muted); font: inherit; font-size: 16px; text-align: left; cursor: pointer; box-shadow: 0 8px 24px -20px rgba(0,0,0,.4); } .p12-search-ic { width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 50%; position: relative; } .p12-search-ic::after { content: ""; position: absolute; width: 7px; height: 2px; background: var(--ink); right: -6px; bottom: -3px; transform: rotate(45deg); border-radius: 2px; } .p12-filter { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--ink); cursor: pointer; display: grid; place-items: center; } .p12-filter-ic { width: 20px; height: 14px; background: linear-gradient(var(--bg), var(--bg)) 0 0/100% 2px no-repeat, linear-gradient(var(--bg), var(--bg)) 0 6px/100% 2px no-repeat, linear-gradient(var(--bg), var(--bg)) 0 12px/100% 2px no-repeat; position: relative; } .p12-filter-ic::before, .p12-filter-ic::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--bg); top: -2px; left: 4px; } .p12-filter-ic::after { top: 10px; left: 11px; } html.v2.p12 .hx-body { padding-top: 6px; } html.v2.p12 .hx-sec-h h2 { font-family: var(--sans); font-size: 21px; font-weight: 700; } html.v2.p12 .hx-see { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .p12-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -22px 14px; padding: 2px 22px; scrollbar-width: none; touch-action: pan-x pan-y; } .p12-chips::-webkit-scrollbar { display: none; } .p12-chips button { flex: 0 0 auto; min-height: 42px; padding: 0 18px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, transform .15s; } .p12-chips button:active { transform: scale(.95); }  html.v2.p12 .p12-car { gap: 14px; scroll-snap-type: x mandatory; padding-bottom: 18px; } .p12-card { position: relative; flex: 0 0 auto; width: min(78vw, 320px); height: 400px; border-radius: var(--r-card); overflow: hidden; scroll-snap-align: start; cursor: pointer; color: #fff; background: #2a2a2e; isolation: isolate; transform: perspective(700px) scale(var(--fs, 1)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); opacity: var(--fo, 1); transition: transform .35s cubic-bezier(.2,.9,.3,1), opacity .3s; box-shadow: 0 22px 40px -28px rgba(0,0,0,.6); } .p12-card[hidden] { display: none; } .p12-card.p12-press { --rx: var(--tx); --ry: var(--ty); transform: perspective(700px) scale(calc(var(--fs, 1) * .97)) rotateX(var(--rx)) rotateY(var(--ry)); } .p12-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .p12-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.78)); } .p12-card-t { position: absolute; left: 20px; right: 20px; bottom: 86px; display: grid; gap: 4px; } .p12-eyebrow { font-size: 13px; font-weight: 600; opacity: .85; } .p12-card-t strong { font-size: 25px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .p12-card-t small { font-size: 13.5px; opacity: .85; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .p12-more { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 58px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; background: rgba(30,30,34,.55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); } .p12-arrow { position: absolute; right: 6px; top: 6px; width: 46px; height: 46px; border-radius: 50%; background: #fff; } .p12-arrow::after { content: ""; position: absolute; left: 15px; top: 17px; width: 10px; height: 10px; border-top: 2.2px solid #17171a; border-right: 2.2px solid #17171a; transform: rotate(45deg); }  .p12-heart { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); cursor: pointer; display: grid; place-items: center; transition: transform .2s; } .p12-heart::before { content: ""; width: 18px; height: 16px; background: #17171a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21s-9-5.6-9-12A5 5 0 0 1 12 6a5 5 0 0 1 9 3c0 6.4-9 12-9 12z' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21s-9-5.6-9-12A5 5 0 0 1 12 6a5 5 0 0 1 9 3c0 6.4-9 12-9 12z' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat; } .p12-heart.on::before { background: #e0475b; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21s-9-5.6-9-12A5 5 0 0 1 12 6a5 5 0 0 1 9 3c0 6.4-9 12-9 12z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21s-9-5.6-9-12A5 5 0 0 1 12 6a5 5 0 0 1 9 3c0 6.4-9 12-9 12z'/%3E%3C/svg%3E"); } .p12-heart.on { animation: p12pop .45s cubic-bezier(.3,1.8,.5,1); } @keyframes p12pop { 40% { transform: scale(1.25); } 100% { transform: scale(1); } } .p12-burst { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #e0475b; transform: rotate(var(--a)) translateY(0); animation: p12burst .6s ease-out forwards; } @keyframes p12burst { to { transform: rotate(var(--a)) translateY(-30px) scale(.3); opacity: 0; } }  html.v2.p12 .p12-votd { margin-top: 14px; padding: 20px; color: var(--ink); } html.v2.p12 .p12-votd blockquote { margin: 6px 0 12px; font-size: 20px; line-height: 1.5; color: var(--ink); } html.v2.p12 .p12-votd .hx-eyebrow { color: var(--muted); } html.v2.p12 .p12-votd .hx-pill { background: var(--ink); color: var(--bg); border: 0; border-radius: 999px; min-height: 40px; padding: 0 16px; font-weight: 600; } html.v2.p12 .hx-pick { padding: 6px; } html.v2.p12 .hx-tile, html.v2.p12 .hx-mini { background: var(--paper); border-radius: 22px; border: 0; box-shadow: 0 8px 24px -22px rgba(0,0,0,.4); } html.v2.p12 .hx-tile [class*="ic"], html.v2.p12 .hx-mini [class*="ic"] { background: var(--paper-2); color: var(--ink); }  html.v2.p12 .v2-st-card { width: 200px; } html.v2.p12 .v2-st-art { position: relative; height: 230px; border-radius: 24px; overflow: hidden; background: #2a2a2e; transform: scale(var(--fs, 1)); transition: transform .3s; } html.v2.p12 .v2-st-art .p12-heart { width: 36px; height: 36px; top: 10px; right: 10px; } html.v2.p12 .v2-st-art .p12-heart::before { width: 15px; height: 13px; } html.v2.p12 .v2-st-card.p12-press .v2-st-art { transform: perspective(600px) scale(.97) rotateX(var(--tx)) rotateY(var(--ty)); } html.v2.p12 .v2-rt-card { background: var(--paper); border-radius: 24px; box-shadow: 0 8px 24px -20px rgba(0,0,0,.4); } html.v2.p12 .p12-hero { position: relative; margin: -8px -20px -34px; height: 300px; border-radius: 0; overflow: hidden; padding: 0; display: block; background: #2a2a2e; } html.v2.p12 .p12-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 100%; } html.v2.p12 .v2-st-hero.p12-hero { color: #fff; } html.v2.p12 .v2-st-hero.p12-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), transparent 40%, rgba(0,0,0,.35)); } html.v2.p12 .v2-st-hero.p12-hero > .v2-eyebrow, html.v2.p12 .v2-st-hero.p12-hero > h2 { position: absolute; z-index: 1; left: 22px; right: 22px; display: none; } html.v2.p12 .v2-st-detail { position: relative; } html.v2.p12 .v2-st-detail > :not(.p12-hero):not(.v2-st-go) { position: relative; z-index: 1; } html.v2.p12 .v2-st-sum { margin: 0; padding: 26px 22px 6px; background: var(--bg); border-radius: 30px 30px 0 0; } html.v2.p12 .v2-st-sum::before { content: attr(data-t); } .p12-day { margin: 0 0 10px; border-radius: 24px; background: var(--paper); box-shadow: 0 8px 24px -22px rgba(0,0,0,.4); overflow: hidden; } .p12-day summary { display: grid; grid-template-columns: 64px 1fr 18px; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; cursor: pointer; list-style: none; } .p12-day summary::-webkit-details-marker { display: none; } .p12-day summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .3s; justify-self: center; margin-top: -4px; } .p12-day[open] summary::after { transform: rotate(-135deg); margin-top: 4px; } .p12-thumb { width: 64px; height: 56px; border-radius: 16px; object-fit: cover; } .p12-day summary small { display: block; color: var(--muted); font-size: 12.5px; } .p12-day summary strong { font-size: 15.5px; line-height: 1.3; } .p12-day-b { padding: 0 16px 14px; display: grid; gap: 8px; } .p12-day-b p { margin: 0; line-height: 1.5; font-size: 15px; } .p12-k { display: block; font-size: 12px; color: var(--muted); font-weight: 600; } html.v2.p12 .v2-st-go { position: sticky; bottom: calc(10px + var(--sab)); z-index: 3; min-height: 58px; font-size: 17px; box-shadow: 0 16px 30px -16px rgba(0,0,0,.55); } html.v2.p12 .p12-ovimg { height: 220px; margin: -8px -20px 16px; border-radius: 0 0 28px 28px; }  .p12-ghost { position: fixed; z-index: 200; object-fit: cover; border-radius: 28px; pointer-events: none; transform-origin: 0 0; } .p12-ghost.go { transition: transform .48s cubic-bezier(.2,.9,.25,1), border-radius .48s; border-radius: 0; } .p12-ghost.out { opacity: 0; transition: opacity .2s; }  .p12-enter { animation: p12in .5s cubic-bezier(.2,.9,.3,1) backwards; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes p12in { from { opacity: 0; transform: translateY(14px) scale(.98); } } html.v2.p12 .hx-xrow.p12-press, html.v2.p12 .v2-rt-card.p12-press, html.v2.p12 .hx-xfeat.p12-press { transform: scale(.98); transition: transform .12s; } @media (prefers-reduced-motion: reduce) { .p12-card, .p12-tabdot, .p12-heart, .v2-st-art { transition: none !important; } .p12-enter, .p12-heart.on { animation: none !important; } }  html.v2.p12.v2-home-on .v2-bar { opacity: 0; pointer-events: none; transform: translateY(-100%); } html.v2.p12.v2-home-on.hx-scrolled .v2-bar { opacity: 1; pointer-events: auto; transform: none; transition: transform .3s, opacity .3s; } html.v2.p12 .p12-head .hx-date { text-transform: none; letter-spacing: 0; font-weight: 500; } html.v2.p12 .v2-intro { background: var(--paper); border: 0; border-radius: var(--r-card); box-shadow: 0 10px 30px -24px rgba(0,0,0,.35); } html.v2.p12 .v2-intro .v2-eyebrow, html.v2.p12 .p11-k, html.v2.p12 .v2-ts-k { color: var(--muted); } @media (max-width: 899px) { html.v2.p12 .p11-rrail { bottom: calc(92px + var(--sab)); right: 16px; opacity: .85; } } html.v2.p12 .v2-bar { background: color-mix(in srgb, var(--bg) 86%, transparent); border-bottom: 0; } html.v2.p12 .v2-brand img, html.v2.p12 .v2-brand { border-radius: 14px; } html.v2.p12 .v2-ref, html.v2.p12 #v2-ref { background: var(--paper); border-radius: 999px; } html.v2.p12 .v2-tabs button { display: grid; place-items: center; gap: 0; } html.v2.p12 .hx .p12-head { padding: calc(var(--sat) + 18px) 22px 6px !important; max-width: 720px; margin: 0 auto; } html.v2.p12 .p12-searchrow { max-width: 720px; margin: 0 auto; } html.v2.p12 .hx-votd.p12-votd, html.v2.p12 .p12-votd blockquote { color: var(--ink) !important; text-shadow: none !important; background: var(--paper) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } html.v2.p12 .p12-votd blockquote { background: none !important; } html.v2.p12 .p12-votd .hx-pill { color: var(--bg) !important; } html.v2.p12 .hx-votd.p12-votd { margin: 14px 20px 0 !important; width: auto !important; max-width: none !important; border-radius: var(--r-card) !important; padding: 20px !important; box-shadow: 0 10px 30px -24px rgba(0,0,0,.35) !important; } html.v2.p12 .p12-votd blockquote { font-family: var(--scripture) !important; font-size: 20px !important; } html.v2.p12 .v2-st-days { list-style: none; padding: 0; } html.v2.p12 .p12-li { display: block; padding: 0; border: 0; background: none; }
/* v2-p13.css */
@font-face { font-family: "Inter"; src: url(fonts/Inter-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Inter"; src: url(fonts/Inter-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Inter"; src: url(fonts/Inter-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Inter"; src: url(fonts/Inter-Bold.woff2) format("woff2"); font-weight: 700 800; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url(fonts/CormorantGaramond-Medium.woff2) format("woff2"); font-weight: 400 500; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url(fonts/CormorantGaramond-SemiBold.woff2) format("woff2"); font-weight: 600 800; font-display: swap; } html.v2.p12.p13 { --bg: #f3ead8; --paper: #fbf6ea; --paper-2: #efe4cd; --ink: #2a2118; --muted: #7b6c58; --line: #d8c9ab; --accent: #2A2DB0; --accent-soft: #ead6cf; --select: #f0e2c6; --select-edge: #2A2DB0; --pop: #2A2DB0; --brass: #a7843f; --brass-2: #c9a65c; --oxblood: #2A2DB0; --gold: #a7843f; --hx-indigo: #2A2DB0; --display: "Cormorant Garamond", "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif; --serif: var(--display); --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --r-card: 6px; --r-mid: 4px; --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cg fill='none' stroke='%23a7843f' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M-10 200c60-40 110-10 170-40s90-90 160-70 90 40 120 30'/%3E%3Cpath d='M-10 220c70-40 120-10 180-38s95-92 170-72 85 42 110 34'/%3E%3Cpath d='M-10 240c80-40 130-10 190-36s100-94 180-74 80 44 100 38'/%3E%3Cpath d='M40 40c30-20 70-10 90 10s50 30 80 10' stroke-dasharray='4 5'/%3E%3C/g%3E%3Cg transform='translate(352 62)' fill='none' stroke='%23a7843f' stroke-opacity='.35'%3E%3Ccircle r='26'/%3E%3Ccircle r='20' stroke-dasharray='1 3'/%3E%3Cpath d='M0-34L5 0 0 34-5 0z' fill='%23a7843f' fill-opacity='.18'/%3E%3Cpath d='M-34 0L0 4 34 0 0-4z'/%3E%3C/g%3E%3C/svg%3E"); } html.v2.p12.p13[data-theme="dark"] { --bg: #1c1612; --paper: #261e18; --paper-2: #2f251d; --ink: #eadfc8; --muted: #a8977b; --line: #43362a; --accent: #d1a95a; --accent-soft: #3a2a20; --select: #33281f; --select-edge: #d1a95a; --pop: #d1a95a; --brass: #c9a65c; --brass-2: #e0c07a; --oxblood: #b04a4f; --hx-indigo: #d1a95a; --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } html.v2.p13 body { background-color: var(--bg); background-image: var(--noise); } html.v2.p13 h1, html.v2.p13 h2, html.v2.p13 h3, html.v2.p13 .hx-greet, html.v2.p13 .p12-card-t strong, html.v2.p13 .v2-sheet-head h2 { font-family: var(--display); font-weight: 600; letter-spacing: 0; } html.v2.p13 .reading h2 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 8vw, 2.8rem); } html.v2.p13 .hx-eyebrow, html.v2.p13 .v2-eyebrow, html.v2.p13 .p13-catalog, html.v2.p13 .p11-k { font-family: var(--sans); font-size: 10.5px !important; letter-spacing: .16em; text-transform: uppercase; color: var(--brass) !important; font-weight: 600; }  html.v2.p13 :is(.v2-today, .p10-recap, .hx-xlist, .v2-pace, .p11-pc, .p11-when, .p11-pbg, .hx-pick, .p12-votd, .v2-st-story, .v2-intro, .p12-day, .v2-rt-card, .hx-tile, .hx-mini) { background: var(--paper) !important; border-radius: var(--r-card) !important; box-shadow: 0 0 0 1px var(--line), 0 0 0 4px var(--paper), 0 0 0 5px var(--line), 0 14px 26px -22px rgba(60,40,20,.45) !important; border: 0 !important; } html.v2.p13 .hx-xfeat { background: var(--oxblood) !important; color: #f6ecd8 !important; border-radius: var(--r-card) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 0 5px var(--oxblood), inset 0 0 0 6px rgba(201,166,92,.6) !important; background-image: var(--contour) !important; background-size: cover !important; } html.v2.p13 .hx-xfeat .hx-eyebrow { color: var(--brass-2) !important; } html.v2.p13 .hx-xrow-ic, html.v2.p13 .v2-st-dn { background: transparent !important; color: var(--oxblood); box-shadow: inset 0 0 0 1px var(--brass); border-radius: 50% !important; } html.v2.p13 .hx-xgroup > h2, html.v2.p13 .hx-xgroup h3, html.v2.p13 .p13-divider { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; } html.v2.p13 .p13-divider::after, html.v2.p13 .hx-xgroup > h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--brass), transparent); }  html.v2.p13 .v2-ov-start, html.v2.p13 .v2-read-now, html.v2.p13 .v2-dp-go, html.v2.p13 .p13-pill-dark, html.v2.p13 .p12-votd .hx-pill { background: var(--oxblood) !important; color: #f6ecd8 !important; border-radius: 4px !important; box-shadow: inset 0 0 0 1px rgba(201,166,92,.7), 0 8px 18px -12px rgba(42,45,176,.8) !important; font-family: var(--sans); letter-spacing: .04em; } html.v2.p13[data-theme="dark"] :is(.v2-ov-start, .v2-read-now, .p13-pill-dark, .p12-votd .hx-pill) { color: #1c1612 !important; background: var(--brass) !important; } html.v2.p13 :is(.v2-lib-chips button, .p12-chips button, .v2-map-chips button, .v2-pace-chips button) { border-radius: 3px !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--line) !important; font-size: 13px; letter-spacing: .03em; } html.v2.p13 [aria-pressed="true"]:is(.v2-lib-chips button, .p12-chips button, .v2-map-chips button, .v2-pace-chips button) { background: var(--ink) !important; color: var(--bg) !important; box-shadow: inset 0 -3px 0 var(--brass) !important; }  html.v2.p12.p13 .v2-tabs { left: 0; right: 0; bottom: 0; width: auto; transform: none; border-radius: 0; padding: 4px 6px calc(4px + var(--sab)); background: color-mix(in srgb, var(--paper) 94%, transparent); background-image: var(--noise); box-shadow: 0 -1px 0 var(--line), 0 -4px 0 -3px var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html.v2.p12.p13[data-theme="dark"] .v2-tabs { background: color-mix(in srgb, var(--paper) 94%, transparent); } html.v2.p12.p13 .v2-tabs button { color: var(--muted); min-height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 3px; } html.v2.p12.p13 .v2-tabs button span { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-family: var(--sans); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; } html.v2.p12.p13 .v2-tabs svg { stroke-width: 1.3; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); } html.v2.p12.p13 .v2-tabs button[aria-current="page"] { color: var(--oxblood); } html.v2.p12.p13[data-theme="dark"] .v2-tabs button[aria-current="page"] { color: var(--brass-2); } html.v2.p13 .p12-tabdot { width: 30px !important; height: 3px !important; border-radius: 2px; background: var(--brass); margin-top: -6px; } html.v2.p12.p13 main, html.v2.p12.p13 #v2-home-view { padding-bottom: calc(90px + var(--sab)); } @media (min-width: 960px) { html.v2.p12.p13 .v2-tabs { top: 0; bottom: 0; left: 0; width: 88px; transform: none; border-radius: 0; box-shadow: 1px 0 0 var(--line); grid-auto-rows: 72px; padding-top: calc(var(--barh) + 1rem); } html.v2.p12.p13 body { padding-left: 88px; } } html.v2.p13 .v2-bar { background: color-mix(in srgb, var(--bg) 90%, transparent); box-shadow: 0 1px 0 var(--line); }  html.v2.p13 .v2-sheet { border-radius: 10px 10px 0 0 !important; background: var(--bg); background-image: var(--noise); box-shadow: 0 -1px 0 var(--brass), 0 -20px 40px -20px rgba(40,25,10,.5); } html.v2.p13 .v2-grab { background: var(--brass); opacity: .7; width: 54px; }  html.v2.p13 .hx { background-image: var(--contour); background-repeat: no-repeat; background-position: right -40px top -10px; } html.v2.p13 .p12-head .hx-greet { font-size: 36px; font-weight: 600; } html.v2.p13 .p12-head .hx-date { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); } .p13-head-actions { display: flex; align-items: center; gap: 8px; } .p13-iconbtn, .p13-theme { width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; cursor: pointer; position: relative; overflow: hidden; } .p13-iconbtn svg, .p13-theme svg { width: 21px; height: 21px; } .p13-theme span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .5s cubic-bezier(.3,1.4,.5,1), opacity .35s; } .p13-theme .p13-moon { transform: rotate(-90deg) scale(.4); opacity: 0; } .p13-theme[aria-pressed="true"] .p13-sun { transform: rotate(90deg) scale(.4); opacity: 0; } .p13-theme[aria-pressed="true"] .p13-moon { transform: none; opacity: 1; } .v2-bar .p13-theme, .v2-bar .p13-savedbtn { box-shadow: none; width: 40px; height: 40px; } .v2-bar .p13-savedbtn svg { width: 22px; height: 22px; } html.p13-themeswap body, html.p13-themeswap .v2-tabs, html.p13-themeswap .v2-bar { transition: background-color .5s, color .5s; } html.v2.p13 .p13-seal, html.v2.p13 .p12-avatar { background: radial-gradient(circle at 35% 30%, #9a3a3f, #2A2DB0 60%, #4d1418) !important; color: #f6dfb0 !important; font-family: var(--display); font-weight: 700; box-shadow: 0 0 0 2px rgba(42,45,176,.25), inset 0 0 0 3px rgba(0,0,0,.15), inset 0 0 0 5px rgba(246,223,176,.25) !important; border-radius: 50% 47% 52% 49% !important; display: grid; place-items: center; } html.v2.p13 .p12-avatar { width: 44px; height: 44px; font-size: 22px; } html.v2.p13 .p12-search { border-radius: 4px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--display); font-size: 19px; font-style: italic; color: var(--muted); min-height: 50px; } html.v2.p13 .p12-filter { border-radius: 4px; background: var(--oxblood); width: 50px; height: 50px; box-shadow: inset 0 0 0 1px rgba(201,166,92,.7); } html.v2.p13 .p12-filter-ic { --bg: #f6ecd8; } html.v2.p13 .p12-filter-ic::before, html.v2.p13 .p12-filter-ic::after { background: var(--oxblood); box-shadow: 0 0 0 2px #f6ecd8; } html.v2.p13 .hx-sec-h h2 { font-family: var(--display) !important; font-size: 27px !important; font-weight: 600; } html.v2.p13 .hx-see { color: var(--oxblood); font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }  html.v2.p13 .p12-card { height: auto; width: min(74vw, 300px); background: var(--paper); color: var(--ink); border-radius: 4px; padding: 12px 12px 0; box-shadow: 0 0 0 1px var(--line), 0 18px 30px -22px rgba(60,40,20,.55); isolation: auto; } html.v2.p13 .p12-card .p12-img { position: relative; inset: auto; display: block; height: 250px; width: 100%; z-index: 0; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 0 7px #f8f1e2, 0 0 0 8px var(--brass); } html.v2.p13[data-theme="dark"] .p12-card .p12-img { box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 0 7px #3a2e24, 0 0 0 8px var(--brass); } html.v2.p13 .p12-card .p12-shade { display: none; } html.v2.p13 .p12-card-t { position: static; padding: 20px 4px 12px; gap: 3px; } html.v2.p13 .p12-eyebrow { font-family: var(--sans); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); opacity: 1; } html.v2.p13 .p12-card-t strong { font-size: 25px; line-height: 1.08; } html.v2.p13 .p12-card-t small { color: var(--muted); opacity: 1; font-size: 13.5px; } .p13-credit { font-style: italic; font-family: var(--display); font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; margin-top: 4px; display: block; } html.v2.p13 .p12-more { position: static; height: 44px; margin: 0 -12px; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--line); color: var(--oxblood); justify-content: space-between; padding: 0 16px; font-family: var(--sans); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; } html.v2.p13[data-theme="dark"] .p12-more { color: var(--brass-2); } html.v2.p13 .p12-arrow { position: static; width: 28px; height: 28px; background: none; box-shadow: inset 0 0 0 1px currentColor; } html.v2.p13 .p12-arrow::after { left: 8px; top: 10px; width: 7px; height: 7px; border-color: currentColor; } html.v2.p13 .p12-heart { top: 20px; right: 20px; width: 38px; height: 38px; background: rgba(251,246,234,.92); box-shadow: inset 0 0 0 1px var(--brass); } html.v2.p13 .p12-heart.on::before { background: var(--oxblood); } html.v2.p13 .p12-burst { background: var(--brass); } html.v2.p13 .p12-votd blockquote { font-family: var(--display) !important; font-size: 24px !important; line-height: 1.35 !important; font-style: italic; } html.v2.p13 .p12-votd { background-image: var(--contour) !important; background-size: 140% !important; background-position: right bottom !important; }  .p13-archive-row { gap: 16px; padding-bottom: 16px; } .p13-artcard { flex: 0 0 auto; width: 170px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--ink); scroll-snap-align: start; } .p13-frame { display: block; padding: 10px; background: #1f1a15; box-shadow: inset 0 0 0 1px #4a3c2c, inset 0 0 0 4px #1f1a15, inset 0 0 0 5px var(--brass), 0 14px 22px -16px rgba(0,0,0,.7); border-radius: 2px; } .p13-frame img { display: block; width: 100%; height: 150px; object-fit: cover; } .p13-placard { display: grid; gap: 2px; margin-top: 10px; padding: 8px 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); border-radius: 2px; font-size: 12.5px; color: var(--muted); } .p13-placard strong { font-family: var(--display); font-size: 17px; line-height: 1.1; color: var(--ink); } .p13-placard em { font-family: var(--display); font-size: 14px; } .p13-placard-lg { margin: -30px 22px 0; position: relative; z-index: 2; padding: 14px 16px; } .p13-placard-lg strong { font-size: 26px; } .p13-art-d { font-family: var(--display); font-size: 20px; line-height: 1.45; padding: 16px 22px 4px; margin: 0; } .p13-refs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 22px 18px; } .p13-chip { border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--brass); border-radius: 3px; padding: 7px 11px; font: 600 13px var(--sans); color: var(--oxblood); cursor: pointer; } html.v2.p13[data-theme="dark"] .p13-chip { color: var(--brass-2); }  html.v2.p13 .v2-st-art { border-radius: 2px !important; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 0 6px var(--paper), 0 0 0 7px var(--brass) !important; margin: 7px; height: 210px !important; } html.v2.p13 .v2-st-card { width: 196px; } html.v2.p13 .v2-st-card strong, html.v2.p13 .v2-st-card h3 { font-family: var(--display); font-size: 20px; font-weight: 600; } html.v2.p13 .p12-hero { border-radius: 0; } html.v2.p13 .v2-st-sum, html.v2.p13 .p13-herosheet .v2-ov > :not(.p12-hero):first-of-type { background: var(--bg); background-image: var(--noise); border-radius: 12px 12px 0 0; box-shadow: 0 -1px 0 var(--brass); font-family: var(--display); font-size: 20px; line-height: 1.45; } html.v2.p13 .p12-thumb { border-radius: 2px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--brass); } html.v2.p13 .p12-day summary strong { font-family: var(--display); font-size: 19px; } html.v2.p13 .v2-st-go { border-radius: 4px !important; }  html.v2.p13 #v2-sheet.p13-herosheet .v2-sheet-head { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); } html.v2.p13 #v2-sheet.p13-herosheet .v2-grab { position: absolute; z-index: 6; left: 50%; top: 8px; transform: translateX(-50%); background: #fff; opacity: .9; } html.v2.p13 #v2-sheet.p13-herosheet .v2-sheet-body { padding-top: 0; } html.v2.p13 #v2-sheet.p13-herosheet .p12-hero, html.v2.p13 #v2-sheet.p13-herosheet .p12-ovimg { margin-top: 0; } .p13-back { position: absolute; z-index: 6; top: 18px; left: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(251,246,234,.94); color: #2a2118; box-shadow: inset 0 0 0 1px var(--brass), 0 6px 16px -8px rgba(0,0,0,.6); display: grid; place-items: center; cursor: pointer; } .p13-back svg { width: 22px; height: 22px; } html.v2.p13 #v2-sheet.p13-herosheet .p12-hero .p12-heart { top: 18px; right: 16px; width: 44px; height: 44px; } .p13-phero { height: 280px !important; margin: 0 -20px -24px !important; } html.v2.p13 .p13-art-hero { height: 320px; margin: 0 -20px 0 !important; background: #1f1a15; } html.v2.p13 .p13-art-hero img { object-fit: contain; }  html.v2.p13 .p11-badge, .p13-wax { display: inline-grid; place-items: center; min-width: 58px; padding: 6px 10px; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; font: 700 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #f6dfb0 !important; background: radial-gradient(circle at 35% 30%, #a2424a, #2A2DB0 65%, #4d1418) !important; box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), inset 0 0 0 4px rgba(246,223,176,.22), 0 2px 4px -1px rgba(60,20,20,.5); font-style: normal; } html.v2.p13 .p11-badge.partly, .p13-wax-seasonal { background: radial-gradient(circle at 35% 30%, #d7b56a, #a7843f 65%, #7d6029) !important; color: #2a2118 !important; } html.v2.p13 .p11-badge.await, .p13-wax-traveling { background: radial-gradient(circle at 35% 30%, #5a6a5a, #34423a 65%, #222c26) !important; }  .p13-welcome { position: fixed; inset: 0; z-index: 300; background: var(--bg); background-image: var(--noise); display: flex; flex-direction: column; opacity: 0; transition: opacity .4s; overflow-y: auto; } .p13-welcome.on { opacity: 1; } .p13-wel-hero { position: relative; margin: 0; padding: calc(env(safe-area-inset-top, 0px) + 22px) 26px 0; flex: 0 0 auto; } .p13-wel-hero img { display: block; width: 100%; height: 34vh; max-height: 300px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 0 9px #f8f1e2, 0 0 0 10px var(--brass), 0 24px 40px -24px rgba(0,0,0,.6); } html[data-theme="dark"] .p13-wel-hero img { box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 0 9px #3a2e24, 0 0 0 10px var(--brass); } .p13-wel-hero .p13-placard { position: absolute; right: 40px; bottom: -20px; transform: rotate(-1.5deg); } .p13-wel-sheet { flex: 1; margin-top: 30px; padding: 20px 26px calc(30px + env(safe-area-inset-bottom, 0px)); transform: translateY(30px); opacity: 0; transition: transform .6s cubic-bezier(.2,.9,.3,1) .1s, opacity .5s .1s; } .p13-welcome.on .p13-wel-sheet { transform: none; opacity: 1; } .p13-grab { display: none; } .p13-wel-t { font-family: var(--display); font-size: 40px; line-height: 1.02; font-weight: 600; margin: 8px 0 10px; color: var(--ink); } .p13-wel-s { font-family: var(--display); font-size: 20px; color: var(--muted); margin: 0 0 22px; line-height: 1.35; } .p13-wel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .p13-pill { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font: 600 15px var(--sans); letter-spacing: .03em; cursor: pointer; margin-top: 10px; } .p13-wel-actions .p13-pill { margin-top: 0; } .p13-sso { box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); } .p13-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; color: var(--muted); font: 600 10.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; } .p13-or::before, .p13-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .p13-guest { display: block; margin: 16px auto 0; border: 0; background: none; color: var(--oxblood); font: 600 14px var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } html[data-theme="dark"] .p13-guest { color: var(--brass-2); } .p13-msg { min-height: 1.2em; margin: 10px 0 0; color: var(--oxblood); font-size: 14px; } .p13-fine { font-family: var(--display); font-style: italic; color: var(--muted); font-size: 15px; text-align: center; margin: 18px 0 0; } .p13-wel-back { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); display: grid; place-items: center; cursor: pointer; margin-bottom: 8px; } .p13-wel-back svg { width: 22px; height: 22px; } .p13-form { display: grid; gap: 4px; } .p13-field { display: grid; gap: 6px; margin: 8px 0; font: 600 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .p13-field input { font: 400 17px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--paper); border: 0; border-bottom: 1.5px solid var(--brass); border-radius: 2px 2px 0 0; padding: 12px 12px; min-height: 48px; } .p13-field input:focus { outline: none; border-bottom-color: var(--oxblood); background: var(--select); }  .p13-prof { padding: 4px 2px 20px; } .p13-prof-head { display: flex; gap: 14px; align-items: center; margin: 4px 0 14px; } .p13-prof-head strong { font-family: var(--display); font-size: 26px; display: block; } .p13-prof-head small { color: var(--muted); } .p13-avatar-lg { width: 64px; height: 64px; font-size: 32px; flex: 0 0 auto; } .p13-prof-rows { margin-top: 18px; border-top: 1px solid var(--line); } .p13-row { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 16px 4px; font: 500 16px var(--sans); color: var(--ink); cursor: pointer; } .p13-row::after { content: "›"; float: right; color: var(--brass); } .p13-danger { color: var(--oxblood); } .p13-saved { padding-bottom: 20px; } .p13-srow { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); transition: transform .25s, opacity .25s; } .p13-srow.out { transform: translateX(40px); opacity: 0; } .p13-srow-open { flex: 1; display: flex; gap: 12px; align-items: center; border: 0; background: none; text-align: left; color: var(--ink); cursor: pointer; padding: 0; } .p13-srow-open img, .p13-srow-open .p13-seal { width: 58px; height: 58px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--brass); flex: 0 0 auto; } .p13-srow-open strong { display: block; font-family: var(--display); font-size: 19px; line-height: 1.15; } .p13-srow-open small { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .p13-remove { border: 0; background: none; color: var(--oxblood); font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 10px; cursor: pointer; } .p13-empty { text-align: center; padding: 40px 10px; font-family: var(--display); font-size: 19px; color: var(--muted); } .p13-toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); z-index: 400; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 4px; font: 600 14px var(--sans); transition: transform .3s, opacity .3s; } .p13-toast.on { transform: translate(-50%, 0); opacity: 1; }  .p13-intro { font-family: var(--display); font-size: 18px; color: var(--muted); margin: 0 0 12px; } .p13-mapbox { background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 0 0 4px var(--paper), 0 0 0 5px var(--brass); padding: 8px; margin: 6px 4px 18px; border-radius: 2px; background-image: var(--contour); background-size: cover; } .p13-usmap { display: block; width: 100%; height: auto; } .p13-us { fill: color-mix(in srgb, var(--paper-2) 80%, transparent); stroke: var(--brass); stroke-width: 1.2; stroke-dasharray: 1 0; } .p13-dot { fill: var(--oxblood); stroke: var(--paper); stroke-width: 2; cursor: pointer; } .p13-dot.p13-st-seasonal { fill: var(--brass); } .p13-dot.p13-st-traveling { fill: #34423a; } .p13-home circle { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2 2; } .p13-home text { font: 600 12px var(--sans); fill: var(--ink); } .p13-filter { margin: 0 -20px 8px !important; padding: 2px 20px !important; } .p13-count { font: 600 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 10px 0; } .p13-visit { background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 12px 24px -20px rgba(60,40,20,.5); border-radius: 3px; padding: 14px; margin: 0 0 14px; transition: box-shadow .3s; } .p13-visit .p13-placard { margin: 0; box-shadow: none; padding: 0; background: none; } .p13-visit .p13-placard strong { font-size: 22px; } .p13-visit .p13-wax { justify-self: start; margin-top: 6px; } .p13-visit-s { font-size: 15px; line-height: 1.5; margin: 10px 0 6px; } .p13-visit-h { font-size: 13px; color: var(--muted); margin: 0 0 6px; } .p13-visit .p13-refs { padding: 6px 0; } .p13-link { display: inline-block; margin-top: 4px; color: var(--oxblood); font: 600 12.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--brass); } html[data-theme="dark"] .p13-link { color: var(--brass-2); } .p13-flash { box-shadow: 0 0 0 2px var(--brass), 0 12px 24px -20px rgba(60,40,20,.5); }  html.v2.p13 .p12-enter { animation: p13placard .55s cubic-bezier(.2,.9,.3,1) backwards; animation-delay: calc(var(--i, 0) * 50ms); } @keyframes p13placard { from { opacity: 0; transform: translateX(-18px); } } html.v2.p13 .hx-sec-h h2, html.v2.p13 .p13-wel-t, html.v2.p13 .p12-head .hx-greet { animation: p13ink .9s ease-out backwards; } @keyframes p13ink { from { opacity: 0; transform: translateY(4px); filter: blur(3px); } } html.v2.p13 #v2-sheet.open { animation: p13drawer .5s cubic-bezier(.2,.9,.25,1); } @keyframes p13drawer { from { transform: translateY(40%) perspective(900px) rotateX(6deg); opacity: .4; } } html.v2.p13 .reading { transform-origin: 0 50%; } @media (prefers-reduced-motion: reduce) { html.v2.p13 .p12-enter, html.v2.p13 .hx-sec-h h2, html.v2.p13 .p13-wel-t, html.v2.p13 .p12-head .hx-greet, html.v2.p13 #v2-sheet.open { animation: none !important; } .p13-theme span, .p13-welcome, .p13-wel-sheet, .p13-srow, .p13-toast { transition: none !important; } }  .p13-law-sec { margin: 22px 0; } .p13-law-intro { font-size: 19px; line-height: 1.5; color: var(--ink); } .p13-card, .p13-lawcat { background: var(--paper); box-shadow: 0 0 0 1px var(--line); border-radius: 3px; padding: 14px; margin: 0 0 12px; } .p13-card strong, .p13-lawcat strong { font-family: var(--display); font-size: 21px; line-height: 1.15; display: block; } .p13-card p, .p13-lawcat p { font-size: 15px; line-height: 1.55; margin: 8px 0; } .p13-muted { color: var(--muted); } .p13-lawcat-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .p13-refs-in { padding: 6px 0 0 !important; } .p13-acc summary { cursor: pointer; font: 600 14px var(--sans); color: var(--oxblood); list-style: none; padding: 4px 0; } html[data-theme="dark"] .p13-acc summary { color: var(--brass-2); } .p13-card.p13-acc summary { font-family: var(--display); font-size: 19px; color: var(--ink); } .p13-acc summary::-webkit-details-marker { display: none; } .p13-acc summary::after { content: " +"; color: var(--brass); } .p13-acc[open] > summary::after { content: " –"; } .p13-ex { padding: 8px 0; border-top: 1px dashed var(--line); font-size: 15px; } .p13-tablets { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .p13-tablet { background: linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 70%, var(--paper)), var(--paper)); border-radius: 26px 26px 4px 4px; box-shadow: 0 0 0 1px var(--line), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--line); padding: 12px 14px; } .p13-tablet summary { display: flex; gap: 14px; align-items: center; cursor: pointer; list-style: none; } .p13-tablet summary::-webkit-details-marker { display: none; } .p13-roman { flex: 0 0 44px; height: 44px; display: grid; place-items: center; font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--oxblood); box-shadow: inset 0 0 0 1px var(--brass); border-radius: 50%; } html[data-theme="dark"] .p13-roman { color: var(--brass-2); } .p13-tab-t strong { font-family: var(--display); font-size: 19px; line-height: 1.2; display: block; } .p13-tab-t small { color: var(--muted); font-size: 12px; letter-spacing: .08em; } .p13-tab-b { padding: 10px 2px 2px 58px; font-size: 15px; line-height: 1.5; } .p13-tab-b p { margin: 8px 0; } .p13-note { font-size: 14px; font-style: italic; margin-top: 12px; } .p13-tabs { display: flex; gap: 0; box-shadow: inset 0 -1px 0 var(--line); margin-bottom: 12px; overflow-x: auto; } .p13-tabs button { flex: 1 0 auto; border: 0; background: none; padding: 12px 10px; font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer; border-radius: 6px 6px 0 0; } .p13-tabs button[aria-selected="true"] { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 var(--brass); } .p13-critique { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); } html.v2.p13 .p12-card { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; height: auto !important; min-height: 0 !important; } html.v2.p13 .p12-card > * { order: 0; } html.v2.p13 .p12-card .p12-img { flex: 0 0 250px; } html.v2.p13 .p12-card .p12-more { margin-top: auto; } html.v2.p13 .v2-st-hero.p12-hero > h2 { display: block !important; top: auto; bottom: 46px; color: #fbf3e2; font-family: var(--display); font-size: 34px; line-height: 1.05; text-shadow: 0 2px 14px rgba(0,0,0,.6); } html.v2.p13 .v2-st-hero.p12-hero > .v2-eyebrow { display: block !important; top: auto; bottom: 92px; color: var(--brass-2) !important; text-shadow: 0 1px 6px rgba(0,0,0,.6); } html.v2.p13 .v2-st-hero.p12-hero::after { z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 35%, rgba(20,10,5,.7)) !important; } html.v2.p13 .v2-st-hero.p12-hero > .p12-heart { z-index: 2; } html.v2.p12.v2-home-on:not(.hx-scrolled) header.top { pointer-events: none; } .p13-wordmark { margin: 0 0 2px; font-family: var(--display); font-style: italic; font-weight: 600; font-size: 17px; letter-spacing: .04em; color: var(--oxblood); } html[data-theme="dark"] .p13-wordmark { color: var(--brass-2); } .p13-wordmark { display: flex; align-items: center; gap: 8px; } .p13-wordmark img { width: 26px; height: 26px; border-radius: 3px; } html[data-theme="dark"] .p13-wordmark img { filter: invert(1); } .p13-wel-logo { display: block; width: 168px; height: auto; margin: 0 0 14px; border-radius: 2px; box-shadow: 0 10px 20px -14px rgba(0,0,0,.6); }  .p13-welcome { justify-content: center; } .p13-wel-sheet { flex: 0 0 auto; width: 100%; max-width: 440px; margin: 0 auto; padding-top: calc(env(safe-area-inset-top, 0px) + 48px); text-align: center; } .p13-wel-logo { width: 132px; height: 132px; margin: 0 auto 36px; border-radius: 4px; box-shadow: none; } html[data-theme="dark"] .p13-wel-logo { filter: invert(1); } .p13-wel-sheet .p13-wel-t { margin-top: 12px; } .p13-wel-sheet .p13-wel-s { margin-bottom: 36px; } .p13-wel-sheet .p13-form, .p13-wel-sheet .p13-field { text-align: left; } .p13-wel-back { margin-left: 0; }
/* v2-p14.css */
.p14-top { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; } .p14-check { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; text-align: left; cursor: pointer; padding: 14px; background: var(--paper); color: var(--ink); border-radius: 3px; box-shadow: 0 0 0 1px var(--line), 0 0 0 4px var(--paper), 0 0 0 5px var(--line); } .p14-check strong { display: block; font-family: var(--display); font-size: 22px; } .p14-check small { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .p14-seal { flex: 0 0 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--brass); position: relative; transition: transform .4s cubic-bezier(.3,1.6,.5,1), background .3s; } .p14-check.on .p14-seal { background: radial-gradient(circle at 35% 30%, #a2424a, #2A2DB0 65%, #4d1418); box-shadow: inset 0 0 0 3px rgba(0,0,0,.18), inset 0 0 0 5px rgba(246,223,176,.25); transform: rotate(-8deg) scale(1.05); } .p14-check.on .p14-seal::after { content: ""; position: absolute; left: 16px; top: 12px; width: 10px; height: 18px; border-right: 3px solid #f6dfb0; border-bottom: 3px solid #f6dfb0; transform: rotate(40deg); } .p14-check.compact { padding: 10px 12px; box-shadow: none; background: none; } .p14-check.compact .p14-seal { flex-basis: 38px; height: 38px; } .p14-check.compact .p14-seal::after { left: 13px; top: 9px; width: 8px; height: 15px; } .p14-check.compact strong { font-size: 18px; } .p14-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .p14-stats span { text-align: center; font: 600 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 4px; box-shadow: inset 0 0 0 1px var(--line); border-radius: 2px; } .p14-stats b { display: block; font-family: var(--display); font-size: 28px; color: var(--ink); letter-spacing: 0; } .p14-heat { display: flex; gap: 3px; justify-content: center; padding: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); border-radius: 2px; margin-bottom: 10px; } .p14-heat-col { display: grid; gap: 3px; } .p14-heat i { width: 14px; height: 14px; border-radius: 2px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); } .p14-heat i.on { background: var(--oxblood); box-shadow: none; } html[data-theme="dark"] .p14-heat i.on { background: var(--brass); } .p14-heat i.today { outline: 1.5px solid var(--brass); outline-offset: 1px; } .p14-heat i.fut { opacity: .25; } .p14-tools { display: flex; gap: 8px; margin-bottom: 12px; } .p14-req { background: var(--paper); box-shadow: 0 0 0 1px var(--line); border-radius: 3px; padding: 14px; margin: 0 0 12px; } .p14-req > strong { font-family: var(--display); font-size: 22px; display: block; margin: 4px 0; } .p14-req p { margin: 6px 0; font-size: 15px; line-height: 1.5; } .p14-req-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .p14-people { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .p14-people span { font-size: 12.5px; padding: 3px 8px; border-radius: 2px; background: var(--paper-2); } .p14-req-a { display: flex; justify-content: space-between; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; } .p14-ansbtn, .p14-del, .p14-home-open { border: 0; background: none; cursor: pointer; font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--oxblood); padding: 6px 0; } html[data-theme="dark"] :is(.p14-ansbtn, .p14-home-open) { color: var(--brass-2); } .p14-del { color: var(--muted); } .p14-ans { border-left: 2px solid var(--brass); padding-left: 10px; } .p14-form textarea, .p14-ansform textarea, .p14-ansform input { font: 400 16px var(--sans); color: var(--ink); background: var(--paper); border: 0; border-bottom: 1.5px solid var(--brass); padding: 10px; text-transform: none; letter-spacing: 0; } .p14-cats { margin: 8px 0 !important; padding: 0 !important; flex-wrap: wrap; } .p14-filter { margin: 0 0 12px !important; padding: 0 !important; } .p14-home { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 2px 14px 2px 4px; } .p14-tl { list-style: none; margin: 0 0 18px; padding: 0 0 0 22px; border-left: 1.5px solid var(--brass); } .p14-tl li { position: relative; padding: 4px 0 16px 6px; } .p14-tl li::before { content: ""; position: absolute; left: -30px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a2424a, #2A2DB0); box-shadow: 0 0 0 3px var(--bg); } .p14-tl strong { display: block; font-family: var(--display); font-size: 21px; } .p14-tl p { margin: 4px 0; font-size: 15px; line-height: 1.5; } .p14-wait { font-size: 12.5px; color: var(--muted); font-style: italic; } @media (prefers-reduced-motion: reduce) { .p14-seal { transition: none; } }
/* v2-p15.css */
html.v2.p12.p13 { --bg: #f5f5f3; --paper: #ffffff; --paper-2: #efefec; --ink: #111111; --muted: #6b6b6b; --line: #e3e3df; --accent: #3B3FD8; --accent-soft: #f6e3e3; --select: #f1f1ee; --select-edge: #3B3FD8; --pop: #3B3FD8; --brass: #3B3FD8; --brass-2: #3B3FD8; --oxblood: #3B3FD8; --gold: #3B3FD8; --hx-indigo: #3B3FD8; --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --serif: var(--display); --noise: none; --contour: none; --r-card: 10px; } html.v2.p12.p13[data-theme="dark"] { --bg: #0e0e0e; --paper: #1a1a1a; --paper-2: #232323; --ink: #f5f5f5; --muted: #9a9a9a; --line: #2c2c2c; --accent: #5B5FE6; --accent-soft: #3a1717; --select: #242424; --select-edge: #5B5FE6; --pop: #5B5FE6; --brass: #5B5FE6; --brass-2: #5B5FE6; --oxblood: #c62828; --hx-indigo: #5B5FE6; } html.v2.p13 body, html.v2.p13 .v2-sheet, html.v2.p13 .v2-tabs, .p13-welcome { background-image: none !important; } html.v2.p13 .hx, html.v2.p13 .p12-votd, html.v2.p13 .hx-xfeat, .p13-mapbox { background-image: none !important; }  html.v2.p13 :is(h1, h2, h3, .hx-greet, .p12-card-t strong, .v2-sheet-head h2, .p13-wel-t, .p13-placard strong, .p13-card strong, .p13-lawcat strong, .p14-req > strong, .p14-tl strong, .p13-srow-open strong, .p13-tab-t strong, .p12-day summary strong, .v2-st-card strong, .p14-check strong, .p13-prof-head strong, .p14-stats b) { font-family: var(--display) !important; font-weight: 700 !important; letter-spacing: -.025em !important; } html.v2.p13 .p12-head .hx-greet { font-size: 34px; } html.v2.p13 .hx-sec-h h2 { font-size: 24px !important; } html.v2.p13 .reading h2 { font-family: var(--display) !important; font-weight: 800 !important; letter-spacing: -.03em; } html.v2.p13 :is(.p12-votd blockquote, .reading .verse, .p13-art-d) { font-family: var(--scripture) !important; font-style: normal; } html.v2.p13 :is(.p13-credit, .p13-placard em, .p13-fine, .p13-intro, .p12-search, .v2-st-sum, .p13-wel-s, .p13-empty, .p14-wait, .p13-note) { font-family: var(--sans) !important; font-style: normal !important; } html.v2.p13 :is(.p13-intro, .v2-st-sum, .p13-wel-s) { font-size: 16px !important; line-height: 1.55 !important; } html.v2.p13 :is(.hx-eyebrow, .v2-eyebrow, .p13-catalog, .p11-k, .p12-eyebrow, .p12-head .hx-date) { color: var(--muted) !important; letter-spacing: .08em !important; font-weight: 600; } html.v2.p13 .p13-wordmark { color: var(--ink); font-family: var(--display); font-style: normal; font-weight: 800; letter-spacing: -.02em; }  html.v2.p13 :is(.v2-today, .p10-recap, .hx-xlist, .v2-pace, .p11-pc, .p11-when, .p11-pbg, .hx-pick, .p12-votd, .v2-st-story, .v2-intro, .p12-day, .v2-rt-card, .hx-tile, .hx-mini, .p13-card, .p13-lawcat, .p14-req, .p13-visit, .p14-check, .p14-heat, .p13-mapbox, .p13-placard) { background: var(--paper) !important; box-shadow: 0 0 0 1px var(--line) !important; border-radius: var(--r-card) !important; } html.v2.p13 .p14-check.compact { box-shadow: none !important; background: none !important; } html.v2.p13 .hx-xfeat { background: var(--ink) !important; color: var(--bg) !important; box-shadow: none !important; border-radius: var(--r-card) !important; } html.v2.p13 .hx-xfeat .hx-eyebrow { color: #A9A6FF !important; } html.v2.p13[data-theme="dark"] .hx-xfeat { background: #fff !important; color: #111 !important; } html.v2.p13 .hx-xrow-ic, html.v2.p13 .v2-st-dn { box-shadow: none !important; background: var(--paper-2) !important; color: var(--ink) !important; border-radius: 10px !important; } html.v2.p13 .p13-divider::after, html.v2.p13 .hx-xgroup > h2::after { background: var(--line); }  html.v2.p13 .p12-card { padding: 0; border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; } html.v2.p13 .p12-card .p12-img, html.v2[data-theme="dark"].p13 .p12-card .p12-img { box-shadow: none; border-radius: 0; height: 260px; flex-basis: 260px; } html.v2.p13 .p12-card-t { padding: 16px 16px 12px; } html.v2.p13 .p13-credit { border-top: 0; padding-top: 2px; font-size: 12px; color: var(--muted); } html.v2.p13 .p12-more { margin: 0; color: var(--ink); letter-spacing: .06em; } html.v2.p13 .p12-arrow { background: var(--accent); color: #fff; box-shadow: none; } html.v2.p13 .p12-heart { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); } html.v2.p13 .p12-heart.on::before, html.v2.p13 .p12-burst { background: #3B3FD8; } html.v2.p13 .v2-st-art { box-shadow: none !important; margin: 0 !important; border-radius: var(--r-card) !important; } html.v2.p13 .p12-thumb { box-shadow: none; border-radius: 8px; } html.v2.p13 .p13-frame { background: var(--paper-2); box-shadow: none; padding: 0; border-radius: var(--r-card); overflow: hidden; } html.v2.p13 .p13-frame img { height: 170px; } html.v2.p13 .p13-artcard .p13-placard { box-shadow: none !important; background: none !important; padding: 8px 2px 0; } html.v2.p13 .p13-placard-lg { box-shadow: 0 0 0 1px var(--line) !important; } html.v2.p13 .p13-art-hero { background: var(--paper-2); }  html.v2.p13 :is(.v2-ov-start, .v2-read-now, .v2-dp-go, .p13-pill-dark, .p12-votd .hx-pill, .v2-st-go) { background: var(--ink) !important; color: var(--bg) !important; box-shadow: none !important; border-radius: 999px !important; letter-spacing: 0; font-weight: 600; } html.v2.p13[data-theme="dark"] :is(.v2-ov-start, .v2-read-now, .p13-pill-dark, .p12-votd .hx-pill, .v2-st-go) { background: #fff !important; color: #111 !important; } html.v2.p13 .p13-pill { border-radius: 999px; } html.v2.p13 :is(.v2-lib-chips button, .p12-chips button, .v2-map-chips button, .v2-pace-chips button) { border-radius: 999px !important; letter-spacing: 0; } html.v2.p13 [aria-pressed="true"]:is(.v2-lib-chips button, .p12-chips button, .v2-map-chips button, .v2-pace-chips button) { box-shadow: none !important; } html.v2.p13 .p12-search, html.v2.p13 .p12-filter { border-radius: 999px; } html.v2.p13 .p12-filter { background: var(--ink); box-shadow: none; } html.v2.p13 .p12-filter-ic { --bg: var(--paper); } html.v2.p13 .p12-filter-ic::before, html.v2.p13 .p12-filter-ic::after { background: var(--ink); box-shadow: 0 0 0 2px var(--paper); } html.v2.p13 .p13-chip { box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; color: var(--accent); } html.v2.p13 .p13-seal, html.v2.p13 .p12-avatar { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; border-radius: 50% !important; font-family: var(--display); font-weight: 700; }  html.v2.p13 .p11-badge, html.v2.p13 .p13-wax { min-width: 0; padding: 3px 9px; border-radius: 999px; font: 600 11px var(--sans); letter-spacing: .02em; text-transform: none; box-shadow: none; background: var(--accent-soft) !important; color: var(--accent) !important; } html.v2.p13 .p11-badge.partly, html.v2.p13 .p13-wax-seasonal { background: #fff4d6 !important; color: #7a5600 !important; } html.v2.p13 .p11-badge.await, html.v2.p13 .p13-wax-traveling { background: var(--paper-2) !important; color: var(--muted) !important; } html.v2.p13[data-theme="dark"] .p11-badge.partly, html.v2.p13[data-theme="dark"] .p13-wax-seasonal { background: #3a3010 !important; color: #f2d27a !important; }  html.v2.p12.p13 .v2-tabs { background: color-mix(in srgb, var(--paper) 92%, transparent) !important; box-shadow: 0 -1px 0 var(--line) !important; } html.v2.p12.p13 .v2-tabs svg { filter: none; stroke-width: 1.7; } html.v2.p12.p13 .v2-tabs button span { letter-spacing: .02em; text-transform: none; font-size: 10.5px; font-weight: 600; } html.v2.p12.p13 .v2-tabs button[aria-current="page"], html.v2.p12.p13[data-theme="dark"] .v2-tabs button[aria-current="page"] { color: var(--ink); } html.v2.p13 .p12-tabdot { background: var(--accent); width: 22px !important; } html.v2.p13 .v2-bar { background: color-mix(in srgb, var(--bg) 90%, transparent); box-shadow: 0 1px 0 var(--line); } html.v2.p13 .v2-sheet { border-radius: 16px 16px 0 0 !important; box-shadow: 0 -10px 40px -20px rgba(0,0,0,.35) !important; } html.v2.p13 .v2-grab { background: var(--line); opacity: 1; }  .p13-roman { color: var(--accent) !important; box-shadow: none; background: var(--accent-soft); font-family: var(--display) !important; font-size: 17px !important; } .p13-tablet { background: var(--paper) !important; border-radius: var(--r-card) !important; box-shadow: 0 0 0 1px var(--line) !important; } .p13-tabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent) !important; background: none !important; border-radius: 0; } .p13-field input, .p14-form textarea, .p14-ansform textarea, .p14-ansform input { border: 0 !important; box-shadow: inset 0 0 0 1px var(--line); border-radius: 10px !important; } .p13-field input:focus { box-shadow: inset 0 0 0 2px var(--ink); background: var(--paper) !important; } .p14-heat i.on, html[data-theme="dark"] .p14-heat i.on { background: var(--accent); } .p14-check.on .p14-seal { background: var(--accent); box-shadow: none; } .p14-tl { border-left-color: var(--line); } .p14-tl li::before { background: var(--accent); } .p14-ans { border-left-color: var(--accent); } .p13-dot { fill: var(--accent); } .p13-us { fill: var(--paper-2); stroke: var(--muted); stroke-width: .8; } .p13-link, .p13-guest, .p13-remove, .p14-ansbtn, .p14-home-open, .hx-see { color: var(--accent) !important; } .p13-link { border-bottom-color: var(--accent); }  .p13-welcome { background: var(--paper) !important; } html[data-theme="dark"] .p13-welcome { background: #0e0e0e !important; } .p13-wel-t { font-size: 34px !important; } html[data-theme="dark"] .p13-wel-logo, html[data-theme="dark"] .p13-wordmark img { filter: none !important; content: url(icons/mark-light.svg); } html.v2.p13 .p12-card::before, html.v2.p13 .p12-card::after { content: none !important; display: none !important; } html.v2.p13 .v2-week-day.today i { box-shadow: 0 0 0 2px var(--accent) !important; border-color: var(--accent) !important; } html.v2.p13 .p14-seal { box-shadow: inset 0 0 0 1.5px var(--accent); } html.v2.p13 .v2-brand { background: none !important; box-shadow: none !important; } html.v2.p13 .v2-brand img.p15-brand { width: 30px; height: 30px; border-radius: 0; } html[data-theme="dark"] .v2-brand img.p15-brand { content: url(icons/mark-light.svg); } .p16-choose { display: flex; align-items: center; gap: 14px; width: calc(100% - 40px); margin: 12px 20px 0; padding: 16px; border: 0; border-radius: var(--r-card); background: var(--paper); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: transform .15s; } .p16-choose:active { transform: scale(.98); } .p16-choose strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .p16-choose small { color: var(--muted); font-size: 13.5px; } .p16-choose > span:nth-child(2) { flex: 1; } .p16-choose-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 20px; } .p16-arr { color: var(--accent); font-size: 24px; }
/* v2-p16.css */
.p16 { --p16-bg: #FFFFFF; --p16-ink: #111; --p16-mut: #555; --p16-acc: #3B3FD8; position: fixed; inset: 0; z-index: 900; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--p16-bg); color: var(--p16-ink); font-family: Inter, system-ui, sans-serif; opacity: 0; transform: translateY(24px); transition: opacity .28s ease, transform .4s cubic-bezier(.2,.9,.25,1.1); } .p16.in { opacity: 1; transform: none; } .p16.out { opacity: 0; transform: translateY(24px); transition-duration: .22s; } html[data-theme="dark"] .p16 { --p16-bg: #0B0B0B; --p16-ink: #FFFFFF; --p16-mut: #A8A6A2; --p16-acc: #A9A6FF; } html.p16-on body { overflow: hidden; } .p16-body { max-width: 480px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 14px) 20px calc(env(safe-area-inset-bottom) + 28px); } .p16-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding-bottom: 12px; border-bottom: 2px solid var(--p16-ink); } .p16-round { width: 44px; height: 44px; border: 2px solid var(--p16-ink); border-radius: 0; background: none; color: var(--p16-ink); font: 600 24px/1 Inter, sans-serif; cursor: pointer; transition: transform .18s cubic-bezier(.3,1.6,.5,1), background .15s; } .p16-round:active, .p16-step:active, .p16-type:active, .p16-act:active { transform: scale(.94); } .p16-title { text-align: center; } .p16-title strong { display: block; font: 900 22px/1 Inter, sans-serif; letter-spacing: -.03em; } .p16-title small { display: block; color: var(--p16-acc); font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p16-mode { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0 0; border: 2px solid var(--p16-ink); } .p16-mode button { border: 0; background: none; color: var(--p16-ink); font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; padding: 11px 6px; cursor: pointer; } .p16-mode button + button { border-left: 2px solid var(--p16-ink); } .p16-mode button[aria-pressed="true"] { background: var(--p16-ink); color: var(--p16-bg); } .p16-dialwrap { position: relative; width: min(330px, 86vw); margin: 8px auto 0; } .p16-dial { position: relative; aspect-ratio: 1; touch-action: none; outline: none; } .p16-dial:focus-visible { outline: 2px solid var(--p16-acc); outline-offset: 4px; } .p16-svg { width: 100%; height: 100%; display: block; overflow: visible; } .p16-ticks line { stroke: var(--p16-ink); stroke-width: 2; } .p16-face { fill: none; stroke: var(--p16-ink); stroke-width: 2; } .p16-ring { fill: none; stroke: var(--p16-ink); stroke-opacity: .18; stroke-width: 8; } .p16-arc { fill: none; stroke: var(--p16-acc); stroke-width: 8; stroke-linecap: butt; } .p16-knob { fill: var(--p16-acc); stroke: var(--p16-bg); stroke-width: 3; cursor: grab; transition: r .18s cubic-bezier(.3,1.6,.5,1); } .p16-dial.drag .p16-knob { r: 13; cursor: grabbing; } .p16-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; padding-bottom: 40px; pointer-events: none; } .p16-pill { font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; padding: 4px 8px; background: var(--p16-ink); color: var(--p16-bg); } .p16-num { font: 900 88px/.9 Inter, sans-serif; letter-spacing: -.06em; font-variant-numeric: tabular-nums; } .p16-num.p16-bump { animation: p16bump .34s cubic-bezier(.3,1.7,.5,1); } @keyframes p16bump { 0% { transform: translateY(6px); opacity: .6; } 100% { transform: none; opacity: 1; } } .p16-unit { font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--p16-acc); } .p16-step { position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border: 2px solid var(--p16-ink); border-radius: 0; background: var(--p16-bg); color: var(--p16-ink); font: 600 24px/1 Inter, sans-serif; cursor: pointer; transition: transform .18s cubic-bezier(.3,1.6,.5,1); } .p16-step { top: auto; bottom: 14%; margin-top: 0; } .p16-minus { left: calc(50% - 54px); } .p16-plus { right: calc(50% - 54px); } .p16-min, .p16-max { position: absolute; bottom: 3%; font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; } .p16-min { left: 0; } .p16-max { right: 0; } .p16-live { margin: 10px 0 0; padding: 12px 0; border-top: 2px solid var(--p16-ink); border-bottom: 1px solid var(--p16-ink); font: 700 15px Inter, sans-serif; min-height: 20px; } .p16-types { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--p16-ink); } .p16-type { border: 0; border-right: 1px solid var(--p16-ink); background: none; color: var(--p16-ink); display: grid; justify-items: start; gap: 10px; padding: 14px 8px 12px; cursor: pointer; font: inherit; text-align: left; transition: background .15s, color .15s; } .p16-type:last-child { border-right: 0; } .p16-type small { font: 600 10px/1.25 Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; } .p16-type[aria-pressed="true"] { background: var(--p16-acc); color: #fff; } .p16-ic { display: block; } .p16-grid { display: grid; grid-template-columns: 1.2fr 1fr; border-bottom: 1px solid var(--p16-ink); } .p16-col { display: grid; border-left: 1px solid var(--p16-ink); } .p16-sched { padding: 14px 12px 14px 0; } .p16-th { display: flex; justify-content: space-between; align-items: baseline; font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; } .p16-wk { color: var(--p16-mut); letter-spacing: 1px; } .p16-ft { display: grid; grid-template-columns: 1fr 1fr; margin: 10px 0; border: 1px solid var(--p16-ink); } .p16-mini { position: relative; padding: 8px; display: grid; gap: 4px; } .p16-mini + .p16-mini { border-left: 1px solid var(--p16-ink); } .p16-mini small { font: 600 9px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--p16-mut); } .p16-mini strong { font: 800 17px Inter, sans-serif; letter-spacing: -.02em; } .p16-mini input[type=date] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; } .p16-week { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--p16-ink); } .p16-week button { border: 0; background: none; color: var(--p16-ink); font: 700 12px Inter, sans-serif; padding: 7px 0; cursor: pointer; } .p16-week button + button { border-left: 1px solid var(--p16-ink); } .p16-week button[aria-pressed="true"] { background: var(--p16-ink); color: var(--p16-bg); } .p16-act { border: 0; background: none; display: flex; align-items: center; gap: 10px; padding: 14px 12px; color: var(--p16-ink); font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; text-align: left; transition: transform .18s cubic-bezier(.3,1.6,.5,1); } .p16-act + .p16-act { border-top: 1px solid var(--p16-ink); } .p16-ic2 { display: grid; place-items: center; flex: none; } .p16-go { background: var(--p16-ink); color: var(--p16-bg); justify-content: space-between; } .p16-group { display: flex; gap: 10px; align-items: center; margin-top: 14px; font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } .p16-pickseg { margin: 0 0 12px; } .p16-picklist { display: grid; border-top: 2px solid currentColor; } .p16-pickrow { display: grid; text-align: left; gap: 3px; border: 0; border-bottom: 1px solid currentColor; background: none; padding: 14px 0; font: 800 17px Inter, sans-serif; letter-spacing: -.01em; color: inherit; cursor: pointer; } .p16-pickrow small { font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; opacity: .65; } .p16-entry { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin: 4px 0 18px; padding: 14px; border: 0; border-radius: 0; background: var(--ink, #111); color: var(--paper, #FFFFFF); text-align: left; font: inherit; cursor: pointer; } .p16-entry strong { display: block; font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; } .p16-entry small { opacity: .7; font-size: 12.5px; } .p16-entry > span:nth-child(2) { flex: 1; } .p16-entry-plus { display: none; } .p16-go2 { font-size: 22px; } #v2-sheet, #v2-scrim { z-index: 950 !important; } @media (prefers-reduced-motion: reduce) { .p16, .p16 * { transition: none !important; animation: none !important; } }
/* v2-p17.css */
html.p17.v2 { --bg: #FFFFFF; --paper: #FFFFFF; --paper-2: #EAE7E1; --ink: #111; --muted: #555; --line: #111; --rule: #111; --accent: #3B3FD8; --accent-soft: rgba(59,63,216,.1); --select: #EAE7E1; --select-edge: #3B3FD8; --pop: #3B3FD8; --brass: #3B3FD8; --gold: #3B3FD8; --hx-indigo: #3B3FD8; --r-card: 0px; --display: "Inter", system-ui, sans-serif; } html.p17.v2[data-theme="dark"] { --bg: #0B0B0B; --paper: #0B0B0B; --paper-2: #1A1A1A; --ink: #FFFFFF; --muted: #A8A6A2; --line: #FFFFFF; --rule: #FFFFFF; --accent: #A9A6FF; --accent-soft: rgba(169,166,255,.18); --select: #1A1A1A; --select-edge: #A9A6FF; --pop: #A9A6FF; } html.p17.v2 body, html.p17.v2 main, html.p17.v2 .hx, html.p17.v2 .v2-sheet, html.p17.v2 .v2-sheet-body { background: var(--bg) !important; color: var(--ink); } html.p17.v2 body { font-family: Inter, system-ui, sans-serif; }  html.p17.v2 :is(button, .p12-card, .v2-card, .hx-pick, .hx-pick-main, .hx-pick-plan, .v2-st-card, .v2-rt-card, .hx-mini, .p13-chip, .p12-chips button, .v2-lib-chips button, .hx-xsearch input, .hx-xfind, .p12-search, .p12-filter, .v2-sheet, .p12-img, .v2-plan-mini, .p14-req, .v2-seg, .v2-seg button, input, select, textarea, .p13-placard, .p11-card, .v2-week-day i) { border-radius: 0 !important; } html.p17.v2 :is(.p12-card, .v2-card, .hx-pick, .v2-st-card, .v2-rt-card, .p13-placard, .p11-card, .p14-req, .v2-plan-mini, .v2-sheet) { box-shadow: none !important; } html.p17.v2 .v2-sheet { border-top: 2px solid var(--rule) !important; } html.p17.v2 .v2-grab { border-radius: 0 !important; background: var(--ink) !important; height: 3px !important; } html.p17.v2 :is(h1, h2, h3, .tx-title, .v2-sheet-head h2) { font-family: Inter, system-ui, sans-serif !important; font-weight: 900 !important; letter-spacing: -.035em !important; color: var(--ink); } html.p17.v2 .tx-title { font-size: 44px !important; line-height: .92 !important; padding-bottom: 12px; border-bottom: 2px solid var(--rule); } html.p17.v2 :is(.hx-eyebrow, .v2-eyebrow, .hx-sec-h, .hx-sec h2, .v2-lib-sec h3, .v2-st-h, .p13-cat) { font: 600 10px/1.3 Inter, sans-serif !important; letter-spacing: 2px !important; text-transform: uppercase !important; }  html.p17.v2 header.top { background: var(--bg) !important; border-bottom: 2px solid var(--rule); box-shadow: none !important; backdrop-filter: none !important; } html.p17.v2 .v2-icon { border-radius: 0 !important; background: none !important; box-shadow: none !important; } html.p17.v2 .v2-tabs { left: 0 !important; right: 0 !important; bottom: 0 !important; transform: none !important; width: auto !important; max-width: none !important; border-radius: 0 !important; background: var(--bg) !important; border-top: 2px solid var(--rule) !important; box-shadow: none !important; padding: 0 0 env(safe-area-inset-bottom) !important; display: flex !important; gap: 0 !important; height: auto !important; backdrop-filter: none !important; } html.p17.v2 .v2-tabs button { flex: 1; display: flex !important; align-items: center; justify-content: center; min-height: 52px; padding: 0 !important; border-radius: 0 !important; border-right: 1px solid var(--rule) !important; background: none !important; color: var(--ink) !important; box-shadow: none !important; transform: none !important; } html.p17.v2 .v2-tabs button:last-child { border-right: 0 !important; } html.p17.v2 .v2-tabs button svg { display: none !important; } html.p17.v2 .v2-tabs button span { display: block !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; font: 600 10px Inter, sans-serif !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; opacity: 1 !important; } html.p17.v2 .v2-tabs button[aria-current="page"] { background: var(--accent) !important; color: #fff !important; } html.p17.v2 .p12-tabdot { display: none !important; } @media (min-width: 900px) { html.p17.v2 .v2-tabs { position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; flex-direction: row !important; border-right: 0 !important; } html.p17.v2 .v2-tabs button { flex: 1 !important; width: auto !important; height: auto !important; } html.p17.v2 body { padding-left: 0 !important; } html.p17.v2 header.top { left: 0 !important; } html.p17.v2 body { padding-bottom: 60px !important; } }  html.p17.v2 .p12-head { display: block !important; padding-top: calc(var(--sat, 0px) + 18px) !important; } html.p17.v2 .p12-hello { width: 100%; } html.p17.v2 .p12-avatar { position: absolute; right: 22px; top: calc(var(--sat, 0px) + 54px); border-radius: 0 !important; background: var(--ink) !important; color: var(--bg) !important; } html.p17.v2 .p17-mast { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; } html.p17.v2 .p17-logo { display: inline-flex; gap: 3px; } .p17-logo i { width: 4px; background: var(--accent); } html.p17.v2 .p17-logo b { width: 2.4ch; font: 900 11px/10px Inter, sans-serif; letter-spacing: 1px; word-spacing: 100vw; color: var(--ink); } html.p17.v2 .p17-no { font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); } html.p17.v2 .hx-greet { font: 900 52px/.9 Inter, sans-serif !important; letter-spacing: -.05em !important; color: var(--ink) !important; margin: 0 0 14px !important; text-shadow: none !important; } html.p17.v2 .p17-name { color: var(--accent); } html.p17.v2 .p12-head .hx-date { display: none; } html.p17.v2 .p12-head::after { content: ""; display: block; border-top: 2px solid var(--rule); } html.p17.v2 .p12-searchrow { padding-top: 0 !important; } html.p17.v2 .p12-search { background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; box-shadow: none !important; padding-left: 0 !important; } html.p17.v2 .p12-filter { background: var(--ink) !important; box-shadow: none !important; } html.p17.v2 .hx-sec > :first-child, html.p17.v2 .hx-sec-head { border-bottom: 0; } html.p17.v2 .hx-pick { background: none !important; border: 0 !important; padding: 0 !important; } html.p17.v2 .hx-pick-main { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto; column-gap: 14px; align-items: start; background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; padding: 14px 0 !important; color: var(--ink) !important; text-align: left; } html.p17.v2 .p17-big { grid-row: 1 / span 4; font: 900 68px/.82 Inter, sans-serif; letter-spacing: -.07em; color: var(--ink); } html.p17.v2 .hx-pick-main > :not(.p17-big) { grid-column: 2; } html.p17.v2 .hx-pick-main strong { font: 800 22px/1.15 Inter, sans-serif !important; letter-spacing: -.02em; color: var(--ink) !important; } html.p17.v2 .hx-pick-main small { color: var(--muted) !important; } html.p17.v2 .hx-pick-main .hx-go { color: var(--accent) !important; font: 600 10px Inter, sans-serif !important; letter-spacing: 2px; text-transform: uppercase; background: none !important; padding: 4px 0 0 !important; } html.p17.v2 .hx-prog { background: var(--paper-2) !important; border-radius: 0 !important; height: 3px !important; } html.p17.v2 .hx-prog i { background: var(--accent) !important; border-radius: 0 !important; } html.p17.v2 .hx-pick-plan { background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; padding: 12px 0 !important; color: var(--ink) !important; } html.p17.v2 .p16-choose { width: 100%; margin: 14px 0; background: var(--ink) !important; color: var(--bg) !important; box-shadow: none !important; border-radius: 0 !important; padding: 14px; } html.p17.v2 .p16-choose strong { font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; } html.p17.v2 .p16-choose small { color: inherit; opacity: .65; } html.p17.v2 .p16-choose-ic { display: none; } html.p17.v2 .p16-arr { color: inherit !important; font-size: 22px; } html.p17.v2 .hx-votd.p12-votd { background: none !important; border: 0 !important; border-bottom: 2px solid var(--rule) !important; border-radius: 0 !important; box-shadow: none !important; padding: 4px 0 16px !important; color: var(--ink) !important; } html.p17.v2 .hx-votd .hx-eyebrow { color: var(--accent) !important; } html.p17.v2 .hx-votd blockquote { font-family: var(--scripture) !important; font-weight: 600; font-size: 21px !important; line-height: 1.25 !important; color: var(--ink) !important; } html.p17.v2 .hx-votd .hx-pill { background: none !important; color: var(--accent) !important; padding: 0 !important; border: 0 !important; font: 600 10px Inter, sans-serif !important; letter-spacing: 2px; text-transform: uppercase; } html.p17.v2 .v2-week, html.p17.v2 .hx-week { border-radius: 0 !important; background: none !important; box-shadow: none !important; } html.p17.v2 .v2-week-day.done i, html.p17.v2 .v2-week-day.on i { background: var(--ink) !important; } .p17-tl { display: block; width: calc(100% - 44px); max-width: 676px; margin: 0 auto; padding: 12px 0 14px; border: 0; border-bottom: 2px solid var(--rule); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .p17-bars { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 8px 0 4px; } .p17-bars i { flex: 1; background: var(--ink); transform-origin: bottom; animation: p17bar .6s cubic-bezier(.2,.9,.3,1.2) backwards; } .p17-bars i.on { background: var(--accent); } .p17-bars i:nth-child(3n) { animation-delay: .05s; } .p17-bars i:nth-child(3n+1) { animation-delay: .1s; } @keyframes p17bar { from { transform: scaleY(0); } } .p17-tlk { display: flex; justify-content: space-between; font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } .p17-red { color: var(--accent); } html.p17.v2 .hx-minigrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; border-top: 2px solid var(--rule); } html.p17.v2 .hx-mini { background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; box-shadow: none !important; padding: 12px 10px 14px 0 !important; color: var(--ink) !important; min-height: 0 !important; text-align: left; display: block !important; } html.p17.v2 .hx-mini:nth-child(odd) { border-right: 1px solid var(--rule) !important; } html.p17.v2 .hx-mini:nth-child(even) { padding-left: 10px !important; } html.p17.v2 .hx-mini-ic { display: none !important; } html.p17.v2 .hx-mini strong { display: block; font: 600 10px Inter, sans-serif !important; letter-spacing: 2px; text-transform: uppercase; } html.p17.v2 .hx-mini small, html.p17.v2 .hx-mini span:last-child { display: block; font: 800 16px Inter, sans-serif !important; color: var(--ink) !important; margin-top: 6px; letter-spacing: -.01em; }  html.p17.v2 .p12-card { border: 0 !important; border-top: 2px solid var(--rule) !important; background: none !important; } html.p17.v2 .p12-chips button, html.p17.v2 .v2-lib-chips button, html.p17.v2 .p13-chip { background: none !important; border: 1px solid var(--rule) !important; color: var(--ink) !important; font: 600 10px Inter, sans-serif !important; letter-spacing: 1.5px !important; text-transform: uppercase; box-shadow: none !important; } html.p17.v2 :is(.p12-chips, .v2-lib-chips) button[aria-pressed="true"], html.p17.v2 .p13-chip.on { background: var(--ink) !important; color: var(--bg) !important; } html.p17.v2 .p13-wax, html.p17.v2 .p15-tag { border-radius: 0 !important; }  html.p17.v2 :is(.xp-row, .hx-xrow, .v2-row, .v2-plan-mini) { border-radius: 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; box-shadow: none !important; } html.p17.v2 :is(.xp-ic, .hx-xrow-ic) { border-radius: 0 !important; background: var(--ink) !important; color: var(--bg) !important; } html.p17.v2 .v2-ov-start, html.p17.v2 .v2-st-go { border-radius: 0 !important; background: var(--ink) !important; color: var(--bg) !important; box-shadow: none !important; font: 600 12px Inter, sans-serif !important; letter-spacing: 2px; text-transform: uppercase; } html.p17.v2 .v2-st-card, html.p17.v2 .v2-rt-card { border: 1px solid var(--rule) !important; } html.p17.v2 .v2-today { border-radius: 0 !important; border: 0 !important; border-top: 2px solid var(--rule) !important; border-bottom: 1px solid var(--rule) !important; box-shadow: none !important; background: none !important; }  html.p17.v2 .verse-num, html.p17.v2 sup.vn { color: var(--accent) !important; }  html.p17 #v2-splash { background: #FFFFFF !important; } html.p17[data-theme="dark"] #v2-splash { background: #0B0B0B !important; } html.p17.v2.v2-home-on:not(.hx-scrolled) header.top { opacity: 0; pointer-events: none; } html.p17.v2 .p12-avatar { top: calc(var(--sat, 0px) + 14px) !important; width: 40px !important; height: 40px !important; } html.p17.v2 .p17-mast { padding-right: 56px; } html.p17.v2 .v2-week-day i { background: none !important; border: 1px solid var(--rule) !important; } html.p17.v2 .v2-week-day.today i { outline: 0 !important; border: 2px solid var(--accent) !important; } html.p17.v2 .p12-head :is(.p13-iconbtn, .p13-theme, [id^="p13-"]) { border-radius: 0 !important; box-shadow: none !important; } html.p17.v2 .p12-hello .p13-wordmark { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }  .p18 { position: fixed; inset: 0; z-index: 900; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg, #FFFFFF); color: var(--ink, #111); font-family: Inter, system-ui, sans-serif; opacity: 0; transform: translateY(16px); transition: opacity .22s ease, transform .3s cubic-bezier(.2,.9,.25,1.1); } .p18.in { opacity: 1; transform: none; } html.p18-on body { overflow: hidden; } .p18-in { max-width: 760px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 40px); } .p18-top { display: flex; gap: 14px; align-items: flex-end; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .p18-x { width: 44px; height: 44px; flex: none; border: 2px solid var(--ink); background: none; color: var(--ink); font: 600 24px/1 Inter, sans-serif; cursor: pointer; } .p18-kick { display: block; font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); } .p18-title { margin: 4px 0 0; font: 900 40px/.92 Inter, sans-serif !important; letter-spacing: -.04em !important; } .p18-cont { display: flex !important; align-items: center; gap: 14px; width: 100%; margin: 14px 0 0; padding: 12px 14px; border: 0; background: var(--ink) !important; color: var(--bg) !important; text-align: left; font: inherit; cursor: pointer; } .p18-cont .p18-num { font: 900 44px/.85 Inter, sans-serif; letter-spacing: -.06em; } .p18-cont > span:nth-child(2) { flex: 1; } .p18-cont strong { display: block; font: 800 19px Inter, sans-serif; } .p18-cont .hx-eyebrow { color: inherit !important; opacity: .7; } .p18-cont .hx-ch-go { font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; } .p18-seg { display: grid; grid-template-columns: 1fr 1fr; margin: 16px 0 0; border: 2px solid var(--ink); } .p18-seg button { border: 0; background: none; color: var(--ink); padding: 12px 4px; font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; } .p18-seg button + button { border-left: 2px solid var(--ink); } .p18-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; } .p18-find { width: 100%; margin: 12px 0 4px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); font: 500 17px Inter, sans-serif; border-radius: 0; outline: none; } .p18-grp { margin-top: 22px; } .p18-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 24px/1 Inter, sans-serif !important; letter-spacing: -.03em !important; } .p18-h small { font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; color: var(--accent); } .p18-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); } .p18-book { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; padding: 12px 6px 12px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: background .12s, color .12s; } .p18-book:hover, .p18-book:active { background: var(--ink); color: var(--bg); } .p18-ab { font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; color: var(--accent); width: 3.4ch; } .p18-book strong { font: 800 16px/1.2 Inter, sans-serif; letter-spacing: -.01em; } .p18-book small { font: 600 11px Inter, sans-serif; opacity: .6; font-variant-numeric: tabular-nums; } .p18-empty { margin: 24px 0; font-weight: 600; } .p18-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); max-width: 560px; margin: 22px auto 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); } .p18-chs button { aspect-ratio: 1; border: 0; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: none; color: var(--ink); font: 800 20px Inter, sans-serif; letter-spacing: -.02em; cursor: pointer; border-radius: 0 !important; transition: background .12s, color .12s; } .p18-chs button:hover, .p18-chs button:active { background: var(--accent); color: #fff; } .p18-ov { display: block; margin: 20px auto 0; border: 0; background: none; color: var(--accent); font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .p18 { transition: none; } } .p18 .p18-book.hx-ch-book { display: grid !important; grid-template-columns: 3.6ch 1fr auto !important; gap: 10px !important; padding: 13px 8px 13px 0 !important; min-height: 0 !important; border: 0 !important; border-bottom: 1px solid var(--ink) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--ink) !important; } .p18 .p18-grid { column-gap: 18px; } .p18 .p18-book.hx-ch-book:hover { background: var(--ink) !important; color: var(--bg) !important; } .p18 .p18-chs.hx-ch-chapters { gap: 0 !important; padding: 0 !important; background: none !important; } .p18 .p18-chs.hx-ch-chapters button { border: 0 !important; border-right: 1px solid var(--ink) !important; border-bottom: 1px solid var(--ink) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--ink) !important; min-height: 0 !important; animation: none !important; } .p18 .p18-chs.hx-ch-chapters button:hover { background: var(--accent) !important; color: #fff !important; }  .p19 { font-family: Inter, system-ui, sans-serif; color: var(--ink); } .p19-k { display: block; font: 600 10px/1.4 Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .p19-red { color: var(--accent); } .p19-lede { font-size: 14px; color: var(--muted); padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin: 0; } .p19-eras { list-style: none; margin: 0; padding: 0; } .p19-era { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; width: 100%; padding: 16px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .p19-n { font: 900 48px/.8 Inter, sans-serif; letter-spacing: -.06em; min-width: 1.4em; } .p19-et strong { display: block; font: 800 19px/1.15 Inter, sans-serif; letter-spacing: -.02em; margin: 3px 0 4px; } .p19-et small { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .p19-era .p19-k { color: var(--accent); } .p19-ar { font-size: 20px; color: var(--accent); } .p19-era:active { background: var(--paper-2); } .p19-head { display: flex; gap: 14px; align-items: flex-end; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .p19-big { font: 900 76px/.78 Inter, sans-serif; letter-spacing: -.07em; color: var(--accent); } .p19-h { margin: 4px 0 0; font: 900 26px/1 Inter, sans-serif !important; letter-spacing: -.03em; } .p19-sum { font-size: 16px; line-height: 1.5; margin: 14px 0; } .p19-why { border-left: 4px solid var(--accent); padding: 2px 0 2px 12px; } .p19-why p { margin: 4px 0 0; font-weight: 600; line-height: 1.45; } .p19-sh { margin: 24px 0 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 20px Inter, sans-serif; letter-spacing: -.02em; } .p19-tl { list-style: none; margin: 0; padding: 0; } .p19-ev { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink); } .p19-date { font: 800 13px/1.25 Inter, sans-serif; color: var(--accent); } .p19-ev strong { font: 800 16px/1.25 Inter, sans-serif; } .p19-ev p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; } .p19-sig { color: var(--muted); } .p19-deb { display: inline-block; margin-left: 8px; padding: 2px 6px; vertical-align: 2px; border: 1px solid var(--accent); color: var(--accent); font: 600 9px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } .p19-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: 16px; } .p19-person { padding: 10px 0; border-bottom: 1px solid var(--ink); } .p19-person strong { font: 800 15px Inter, sans-serif; } .p19-person p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); } .p19-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .p19-ref { border: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); padding: 7px 10px; font: 700 13px Inter, sans-serif; cursor: pointer; } .p19-ref:hover, .p19-ref:active { background: var(--accent); border-color: var(--accent); color: #fff; } .p19-src { margin: 20px 0 0; font-size: 12.5px; line-height: 1.6; } .p19-src .p19-k { display: inline; } .p19-src a { color: var(--ink); } .p19-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; padding-top: 10px; border-top: 2px solid var(--ink); } .p19-nav button { border: 0; background: none; color: var(--accent); font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; padding: 6px 0; max-width: 40%; text-align: left; } .p19-nav button:last-child { text-align: right; } .p19-read { margin-top: 22px; padding: 16px; background: var(--ink); color: var(--bg); } .p19-read .p19-k { color: inherit; opacity: .7; } .p19-read strong { display: block; font: 900 22px/1.05 Inter, sans-serif; letter-spacing: -.03em; margin: 6px 0; } .p19-by { font-size: 12.5px; opacity: .8; } .p19-read p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; } .p19-lead { font-weight: 700; font-size: 18px !important; letter-spacing: -.01em; } .p19-homecard { display: grid; gap: 4px; width: 100%; padding: 16px; margin: 0 0 14px; border: 0; border-left: 6px solid var(--accent); background: var(--ink); color: var(--bg); text-align: left; font: inherit; cursor: pointer; } .hx-body > .p19-homecard { width: calc(100% - 44px); max-width: 676px; margin: 14px auto; display: grid; } .p19-homecard .p19-k { color: inherit; opacity: .7; } .p19-homecard strong { font: 900 22px/1.05 Inter, sans-serif; letter-spacing: -.03em; } .p19-homecard .p19-ar { font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: inherit; } .p19-cards { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; margin: 10px -20px 0; padding: 0 20px; border-bottom: 1px solid var(--ink); touch-action: pan-x pan-y; } .p19-card { flex: 0 0 78%; scroll-snap-align: start; display: grid; align-content: start; gap: 6px; padding: 14px 16px 16px 0; margin-right: 16px; border: 0; border-right: 1px solid var(--ink); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .p19-cn { font: 900 56px/.8 Inter, sans-serif; letter-spacing: -.06em; } .p19-card strong { font: 800 19px/1.15 Inter, sans-serif; letter-spacing: -.02em; } .p19-card p { margin: 0; font-size: 14px; line-height: 1.45; } .p19-card .p19-ar { font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; } .p19-strip { display: flex; overflow-x: auto; margin-top: 12px; border-top: 2px solid var(--ink); touch-action: pan-x pan-y; } .p19-tick { flex: 1 0 64px; display: grid; justify-items: start; gap: 6px; padding: 0 6px 8px 0; border: 0; background: none; color: var(--ink); font: 700 12px Inter, sans-serif; cursor: pointer; } .p19-tick i { width: 2px; height: 16px; background: var(--ink); } .p19-tick.on i { width: 8px; height: 26px; background: var(--accent); } .p19-tick.on { color: var(--accent); } .p19-tlnote { min-height: 44px; margin: 4px 0 0; padding: 10px 0; border-bottom: 1px solid var(--ink); font-size: 14px; line-height: 1.45; } .p19-tlnote:empty::before { content: "Tap a year."; color: var(--muted); } .p19-zrow { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 6px; } .p19-z { width: 36px; height: 36px; margin-left: 6px; border: 2px solid var(--ink); border-radius: 0; background: none; color: var(--ink); font: 700 18px/1 Inter, sans-serif; cursor: pointer; } .p19-tree { overflow: auto; border: 1px solid var(--ink); max-height: 460px; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; } .p19-tree-svg { display: block; transition: width .25s ease, height .25s ease; } .p19-edge { fill: none; stroke: var(--ink); stroke-width: 1.5; } .p19-node rect { fill: var(--bg); stroke: var(--ink); stroke-width: 2; } .p19-node.link { cursor: pointer; } .p19-node.link:hover rect { fill: var(--accent); stroke: var(--accent); } .p19-node .t { font: 800 13px Inter, sans-serif; fill: var(--ink); } .p19-node .d { font: 600 10px Inter, sans-serif; letter-spacing: 1px; fill: var(--accent); } .p19-node.link:hover .t, .p19-node.link:hover .d { fill: #fff; } .p19-tree-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; } .p19-ppl, .p19-qs { list-style: none; margin: 0; padding: 0; } .p19-ppl li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ink); } .p19-pn { font: 900 26px/.9 Inter, sans-serif; color: var(--accent); letter-spacing: -.04em; } .p19-ppl strong { font: 800 16px Inter, sans-serif; } .p19-ppl p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; } .p19-gl { margin: 0; display: grid; grid-template-columns: minmax(96px, 30%) 1fr; } .p19-gl dt, .p19-gl dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--ink); } .p19-gl dt { font: 800 14px Inter, sans-serif; padding-right: 10px; } .p19-gl dd { font-size: 14px; line-height: 1.45; } .p19-myth { border-bottom: 1px solid var(--ink); padding: 10px 0; } .p19-myth summary { cursor: pointer; list-style: none; } .p19-myth summary strong { display: block; font: 800 16px Inter, sans-serif; text-decoration: line-through; text-decoration-color: var(--accent); } .p19-myth[open] summary strong { text-decoration: none; } .p19-myth p { font-size: 14px; line-height: 1.5; margin: 8px 0 0; } .p19-qs { counter-reset: q; } .p19-qs li { counter-increment: q; padding: 10px 0 10px 34px; position: relative; border-bottom: 1px solid var(--ink); font-size: 15px; line-height: 1.45; } .p19-qs li::before { content: counter(q, decimal-leading-zero); position: absolute; left: 0; font: 900 14px Inter, sans-serif; color: var(--accent); } .p19-next { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); } .p19-step { display: block; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--ink); color: var(--ink); text-decoration: none; } .p19-step:nth-child(odd) { border-right: 1px solid var(--ink); } .p19-step:nth-child(even) { padding-left: 10px; } .p19-step strong { font: 800 15px Inter, sans-serif; } .p19-step p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); } a.p19-step strong::after { content: " ↗"; color: var(--accent); } .p19-cta { display: block; width: 100%; margin: 22px 0 0; padding: 16px; border: 0; background: var(--accent); color: #fff; font: 600 12px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }  .p20-start { display: grid; gap: 4px; width: 100%; margin: 0 0 14px; padding: 16px; border: 0; background: var(--accent); color: #fff; text-align: left; font: inherit; cursor: pointer; } .p20-start strong { font: 900 26px/1 Inter, sans-serif; letter-spacing: -.03em; } .p20-k { display: block; font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; opacity: .8; } .p20-acts { font: 600 10px Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; } .p20 { font-family: Inter, system-ui, sans-serif; color: var(--ink); } .p20-prog { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); margin-bottom: 18px; } .p20-prog span { text-align: center; padding: 8px 0; font: 900 14px Inter, sans-serif; } .p20-prog span + span { border-left: 2px solid var(--ink); } .p20-prog .on { background: var(--accent); color: #fff; } .p20-prog .done { background: var(--ink); color: var(--bg); } .p20-head { display: flex; gap: 14px; align-items: flex-end; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .p20-n { font: 900 76px/.78 Inter, sans-serif; letter-spacing: -.07em; color: var(--accent); } .p20-word { margin: 0; font: 900 34px/.95 Inter, sans-serif !important; letter-spacing: -.04em; } .p20-def { margin: 6px 0 0; font: 600 15px/1.35 Inter, sans-serif; color: var(--ink); } .p20-prompt { font: 700 18px/1.35 Inter, sans-serif; margin: 16px 0 4px; letter-spacing: -.01em; } .p20-link { border: 0; background: none; padding: 6px 0; color: var(--accent); font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; } .p20-verse { margin: 12px 0; padding: 0 0 0 12px; border-left: 4px solid var(--accent); } .p20-verse p { margin: 0; font-family: var(--scripture); font-size: 17px; line-height: 1.45; } .p20-verse cite { display: block; margin-top: 4px; font: 600 10px Inter, sans-serif; font-style: normal; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); } .p20-ta, .p20-new { width: 100%; box-sizing: border-box; border: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); padding: 12px; font: 400 16px/1.45 Inter, sans-serif; } .p20-sh { margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 20px Inter, sans-serif; letter-spacing: -.02em; } .p20-reqs { display: grid; } .p20-req { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ink); font: 700 15px Inter, sans-serif; cursor: pointer; } .p20-req input { width: 20px; height: 20px; accent-color: var(--accent); } .p20-addrow { display: grid; grid-template-columns: 1fr auto; margin-top: 10px; } .p20-addbtn { border: 0; background: var(--ink); color: var(--bg); padding: 0 18px; font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; } .p20-empty { color: var(--muted); font-size: 14px; } .p20-nav { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin-top: 20px; padding-top: 12px; border-top: 2px solid var(--ink); } .p20-nav .p20-link { justify-self: start; } .p20-skip { border: 2px solid var(--ink); background: none; color: var(--ink); padding: 12px 16px; font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; } .p20-next { border: 0; background: var(--ink); color: var(--bg); padding: 14px 20px; font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; } #p20-save { background: var(--accent); color: #fff; } .p20-journal { margin-top: 10px; } .p20-entry { border-bottom: 1px solid var(--ink); padding: 10px 0; } .p20-entry summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; font: 700 14px Inter, sans-serif; } .p20-entry p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; } .p20-marks { display: inline-flex; } .p20-marks b { width: 20px; height: 20px; display: grid; place-items: center; font: 900 10px Inter, sans-serif; border: 1px solid var(--ink); margin-right: -1px; color: var(--muted); } .p20-marks b.on { background: var(--accent); border-color: var(--accent); color: #fff; } .p14-heat i.p20-m { background: var(--accent) !important; position: relative; } .p14-heat i.p20-m::after { content: attr(data-acts); position: absolute; inset: 0; display: grid; place-items: center; font: 900 5px/1 Inter, sans-serif; color: #fff; overflow: hidden; } .p20-term { all: unset; display: inline; cursor: help; border-bottom: 1.5px dotted var(--accent); color: inherit; font: inherit; } .p20-term:focus-visible { outline: 2px solid var(--accent); } .p20-pop { position: fixed; z-index: 1200; padding: 12px 14px; background: var(--ink); color: var(--bg); font-family: Inter, sans-serif; box-shadow: 6px 6px 0 var(--accent); animation: p20pop .16s ease-out; } .p20-pop strong { display: block; font: 900 18px Inter, sans-serif; text-transform: capitalize; margin: 2px 0 4px; letter-spacing: -.02em; } .p20-pop p { margin: 0; font-size: 14px; line-height: 1.4; } @keyframes p20pop { from { opacity: 0; transform: translateY(4px); } } @media (prefers-reduced-motion: reduce) { .p20-pop { animation: none; } }  html.p17.v2 .v2-tabs [data-v2tab="study"] { display: none !important; } .p21-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 0 !important; background: var(--bg); color: var(--ink); font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; white-space: nowrap; } .p21-btn[aria-expanded="true"] { background: var(--ink); color: var(--bg); } .p21-chev { font-size: 10px; letter-spacing: 0; } .v2-bar .p21-btn { margin-left: 8px; flex: none; } html.p17.v2 .v2-bar .v2-ref, html.p17.v2 .v2-bar .v2-view-title { min-width: 0; } .p17-mast .p21-btn { margin-right: auto; margin-left: 14px; } .p21 { position: fixed; inset: 0; z-index: 960; } .p21-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; } .p21-panel { position: absolute; left: 0; right: 0; top: 0; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--bg); color: var(--ink); border-bottom: 2px solid var(--ink); padding: calc(env(safe-area-inset-top) + 14px) 20px 24px; transform: translateY(-16px); opacity: 0; transition: transform .26s cubic-bezier(.2,.9,.25,1.05), opacity .2s; font-family: Inter, system-ui, sans-serif; } @media (min-width: 760px) { .p21-panel { left: 50%; right: auto; width: 720px; margin-left: -360px; top: 16px; border: 2px solid var(--ink); max-height: calc(100vh - 32px); } } .p21.in .p21-scrim { opacity: 1; } .p21.in .p21-panel { transform: none; opacity: 1; } html.p21-on body { overflow: hidden; } .p21-top { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 10px; border-bottom: 2px solid var(--ink); } .p21-title { margin: 0; font: 900 40px/.9 Inter, sans-serif !important; letter-spacing: -.045em !important; } .p21-x { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 0; background: none; color: var(--ink); font: 600 24px/1 Inter, sans-serif; cursor: pointer; } .p21-find { width: 100%; box-sizing: border-box; margin: 12px 0 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); font: 500 17px Inter, sans-serif; outline: none; } .p21-grp { margin-top: 20px; } .p21-h { display: flex; gap: 10px; align-items: baseline; margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 22px/1 Inter, sans-serif !important; letter-spacing: -.03em !important; } .p21-gn { font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; color: var(--accent); } @media (min-width: 760px) { .p21-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; } } .p21-row { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0 !important; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .p21-row strong { font: 800 16px/1.25 Inter, sans-serif; letter-spacing: -.01em; } .p21-row small { grid-column: 1; font-size: 13px; line-height: 1.35; color: var(--muted); } .p21-ar { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); } .p21-row:hover strong, .p21-row:focus-visible strong { color: var(--accent); } .p21-bible { background: var(--ink) !important; color: var(--bg) !important; padding: 12px !important; margin-top: 10px; } .p21-bible small { color: inherit; opacity: .7; } .p21-empty { margin: 16px 0; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .p21-panel, .p21-scrim { transition: none; } } @media (max-width: 480px) { html.p17.v2 .v2-bar .p21-btn { padding: 0 8px; } html.p17.v2 .v2-bar-actions [id*="saved"], html.p17.v2 .v2-bar-actions .p13-savedbtn { display: none !important; } html.p17.v2 .v2-bar .v2-ref { font-size: 15px; white-space: nowrap; } }  html.p17.v2 .v2-tabs, html.p17.v2 .v2-tabs::before, html.p17.v2 .v2-tabs::after { opacity: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.p17.v2 .v2-tabs { background: #FFFFFF !important; border-top: 1px solid #111 !important; } html.p17.v2[data-theme="dark"] .v2-tabs { background: #000 !important; border-top: 1px solid #FFFFFF !important; } html.p17.v2 .v2-tabs::before, html.p17.v2 .v2-tabs::after { display: none !important; } html.p17.v2 .v2-tabs button { color: #111 !important; opacity: 1 !important; filter: none !important; } html.p17.v2[data-theme="dark"] .v2-tabs button { color: #FFFFFF !important; } html.p17.v2 .v2-tabs button span { font-weight: 700 !important; color: inherit !important; } html.p17.v2 .v2-tabs button[aria-current="page"] { background: #3B3FD8 !important; color: #fff !important; } .p21 [hidden], .p21-grp[hidden] { display: none !important; }  .p22-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); margin: 6px 0 12px; } .p22-seg button { border: 0; background: none; color: var(--ink); padding: 11px 4px; font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; } .p22-seg button + button { border-left: 2px solid var(--ink); } .p22-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; } .p22-world .p22-sea { fill: var(--paper-2); } .p22-grat { stroke: var(--ink); stroke-opacity: .15; stroke-width: 1; } .p22-lab { font: 600 9px Inter, sans-serif; fill: var(--muted); } .p13-dot.intl { fill: var(--accent) !important; } .p22-mode { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 12px 0 6px; } .p22-k { font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; margin-right: 4px; } .p22-mode button { border: 1px solid var(--ink); background: none; color: var(--ink); padding: 6px 10px; font: 600 10px Inter, sans-serif; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border-radius: 0; } .p22-mode button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .p22-clear { border: 0 !important; color: var(--accent) !important; } html.p17.v2 .p22-cchips button.p22-x[aria-pressed="true"] { background: none !important; color: var(--muted) !important; text-decoration: line-through; text-decoration-color: var(--accent); } .p22-adv { margin: 8px 0; padding: 8px 10px; border-left: 4px solid var(--accent); background: var(--accent-soft); font-size: 13px; line-height: 1.45; } .p22-adv a { color: var(--accent); font-weight: 700; }  .p23-bar { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); margin: 6px 0 14px; font-family: Inter, sans-serif; } .p23-btn { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit; } .p23-btn + .p23-btn { border-left: 2px solid var(--ink); } .p23-btn strong { font: 800 15px Inter, sans-serif; flex: 1; } .p23-k { font: 600 9px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); } .p23-missing { font: 600 13px Inter, sans-serif; border-left: 4px solid var(--accent); padding: 4px 10px; } .p23-blank { color: var(--muted) !important; } .reading .verse > p[dir="rtl"] { text-align: right; font-size: 1.08em; } .p23-par { margin: 6px 0 0 !important; padding-left: 10px; border-left: 2px solid var(--accent); font-size: .9em; color: var(--muted); } .p23-par[dir="rtl"] { border-left: 0; border-right: 2px solid var(--accent); padding: 0 10px 0 0; text-align: right; } .p23-par::before { content: attr(data-ver) " "; font: 600 9px Inter, sans-serif; letter-spacing: 1px; color: var(--accent); } .p23-foot { margin: 20px 0 0; padding-top: 10px; border-top: 1px solid var(--ink); font: 400 12px/1.5 Inter, sans-serif; color: var(--muted); } .p23-foot a { color: var(--accent); } .p23 { font-family: Inter, sans-serif; } .p23-find { width: 100%; box-sizing: border-box; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); font: 500 17px Inter, sans-serif; border-radius: 0; outline: none; margin-bottom: 6px; } .p23-grp { margin-top: 18px; } .p23-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 20px Inter, sans-serif !important; letter-spacing: -.02em; } .p23-h small { font: 600 11px Inter, sans-serif; color: var(--accent); } .p23-row { display: grid; gap: 2px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; border-radius: 0 !important; } .p23-row strong { font: 800 16px Inter, sans-serif; } .p23-row small { font-size: 12.5px; color: var(--muted); } .p23-row[aria-pressed="true"] { box-shadow: inset 6px 0 0 var(--accent); padding-left: 14px; } .p23-row.p23-lacks strong, .p23-row.p23-lacks small { opacity: .45; } .p23-grp[hidden], .p23-row[hidden] { display: none !important; } .p23-fine { font-size: 12px; color: var(--muted); margin-top: 16px; } .p18 .p18-book.p23-missing-book { opacity: .35 !important; } .reading.p23-parallel .verse { display: block !important; padding: 8px 0 10px; border-bottom: 1px solid var(--line); } .reading.p23-parallel .verse > p, .reading .verse > .p23-par { display: block !important; } .reading.p23-on .verse > p[dir="rtl"] { display: block; }  .p24 { font-family: Inter, sans-serif; } .p24-h { margin: 4px 0 8px; font: 900 26px/1 Inter, sans-serif !important; letter-spacing: -.03em; } .p24-lede { font-size: 15px; line-height: 1.45; } .p24-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; } .p24-k, .p24-tag { display: inline-block; font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); } .p24-tag { border: 1px solid var(--accent); padding: 2px 6px; margin-bottom: 4px; } .p24-f { display: grid; gap: 4px; margin: 12px 0 0; } .p24-f span { font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } .p24-f input, .p24-f textarea, .p24-link { width: 100%; box-sizing: border-box; border: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); padding: 11px; font: 400 16px Inter, sans-serif; } .p24-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .p24-btn { display: inline-block; border: 2px solid var(--ink); background: none; color: var(--ink); padding: 11px 14px; font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; text-decoration: none; border-radius: 0; } .p24-dark { background: var(--ink); color: var(--bg); } .p24-wide { display: block; width: 100%; margin-top: 16px; text-align: center; } .p24-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .p24-pick { border: 1px solid var(--ink); background: none; color: var(--ink); padding: 6px 9px; font: 600 12px Inter, sans-serif; cursor: pointer; border-radius: 0; } .p24-friends { margin-top: 20px; } .p24-sh { margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 20px Inter, sans-serif; letter-spacing: -.02em; } .p24-fn { display: flex; justify-content: space-between; margin: 16px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--ink); font: 800 16px Inter, sans-serif; } .p24-fn small { color: var(--accent); font-size: 11px; } .p24-fr { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; } .p24-fr strong { font: 700 15px Inter, sans-serif; } .p24-fr.ans strong { text-decoration: line-through; text-decoration-color: var(--accent); } .p24-fr small { font-size: 12.5px; color: var(--muted); } .p24-ra { display: flex; gap: 8px; } .p24-mini { border: 0; background: none; padding: 4px 0; color: var(--accent); font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }  .p25-head { display: flex; gap: 14px; align-items: flex-end; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .p25-big { font: 900 72px/.78 Inter, sans-serif; letter-spacing: -.07em; color: var(--accent); } .p25-mission, .p25-end p, .p25-end { border-left: 4px solid var(--accent); padding-left: 10px; font: 700 14px/1.45 Inter, sans-serif; margin: 12px 0; } .p25-kv { font-size: 14px; } .p25-sh { margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 20px Inter, sans-serif; letter-spacing: -.02em; } .p25-q { border: 0; border-bottom: 1px solid var(--ink); margin: 0; padding: 12px 0; } .p25-q legend { font: 700 15px/1.4 Inter, sans-serif; padding: 0; margin-bottom: 8px; } .p25-qn { color: var(--accent); font-weight: 900; margin-right: 8px; } .p25-c { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border: 1px solid var(--line); margin-top: 4px; cursor: pointer; font-size: 15px; } .p25-c input { accent-color: var(--accent); } .p25-c.right { border-color: var(--ink); background: var(--ink); color: var(--bg); } .p25-c.wrong { border-color: var(--accent); text-decoration: line-through; color: var(--accent); } .p25-ref { color: var(--accent); font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } .p25-score { font: 900 24px Inter, sans-serif; letter-spacing: -.02em; } .p25-list { margin: 0; padding-left: 22px; } .p25-list li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; } .p25-shareone { display: grid; gap: 4px; width: 100%; margin: 18px 0 0; padding: 14px; border: 0; background: var(--accent); color: #fff; text-align: left; font: inherit; cursor: pointer; } .p25-shareone .p24-k { color: #fff; opacity: .8; } .p25-shareone strong { font: 700 15px/1.4 Inter, sans-serif; } .p25-leader { margin-top: 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 10px 0; } .p25-leader summary { cursor: pointer; font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; } .p25-nav { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 10px; border-top: 2px solid var(--ink); } .p25-open { display: flex; gap: 10px; align-items: baseline; width: 100%; margin-top: 10px; padding: 12px; border: 0; background: var(--ink); color: var(--bg); text-align: left; font: inherit; cursor: pointer; } .p25-open .p24-k { color: inherit; opacity: .75; } .p25-open strong { flex: 1; font: 700 14px Inter, sans-serif; } .p25-banner { width: calc(100% - 44px); max-width: 676px; margin: 14px auto; padding: 12px 14px; border-left: 6px solid var(--accent); background: var(--paper-2); box-sizing: border-box; } .p25-banner p { margin: 4px 0 0; font: 700 15px/1.4 Inter, sans-serif; } .p25-wel { font: 600 15px/1.45 Inter, sans-serif; max-width: 320px; margin: 10px auto; text-align: center; } .p25-gsrow { font-weight: 700 !important; } html.v2.p12.p13.p17 .v2-tabs { background: #FFFFFF !important; background-color: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border-top: 1px solid #111 !important; opacity: 1 !important; } html.v2.p12.p13.p17[data-theme="dark"] .v2-tabs { background: #000 !important; background-color: #000 !important; border-top: 1px solid #FFFFFF !important; } html.v2.p12.p13.p17 .v2-sheet, html.v2.p12.p13.p17 .p21-panel, html.v2.p12.p13.p17 .p18, html.v2.p12.p13.p17 .p16 { opacity: 1; background-color: var(--bg) !important; backdrop-filter: none !important; } html.v2.p12.p13.p17 .v2-sheet[hidden], html.v2.p12.p13.p17 .v2-sheet-scrim[hidden], .p21:not(.in) .p21-panel { pointer-events: none; } html.v2.p12.p13.p17 .v2-sheet[hidden], html.v2.p12.p13.p17 .v2-sheet-scrim[hidden] { display: none !important; visibility: hidden !important; } @media (max-width: 420px) { html.p17.v2 .p17-no { display: none; } } html.p17 .p21-tog { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 10px; width: 100%; cursor: pointer; padding: 6px 0; font: inherit; } html.p17 .p21-tog:focus-visible { outline: 2px solid #3B3FD8; outline-offset: 2px; } html.p17 .p21-gc { margin-left: auto; transition: transform .2s; display: inline-block; transform: rotate(-90deg); } html.p17 .p21-grp.open .p21-gc { transform: none; } html.p17 .p21:not(.p21-searching) .p21-grp:not(.open) .p21-list { display: none; } html.p17 .p21.p21-searching .p21-gc { transform: none; } html.p17 .p13-pill, html.p17 .p13-welcome button, html.p17 .p13-welcome input { border-radius: 0 !important; } html.p17 #v2-sheet .p14-heat, html.p17 #v2-sheet .p14-heat i, html.p17 #v2-sheet .p13-card, html.p17 #v2-sheet .p13-acc, html.p17 #v2-sheet .p13-pill, html.p17 #v2-sheet .p14-add, html.p17 #v2-sheet [class*="p14-"]:not(.p14-seal), html.p17 #v2-sheet [class*="p20-"], html.p17 #v2-sheet [class*="p24-"], html.p17 #v2-sheet span:not(.p14-seal) { border-radius: 0 !important; }  .p26-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html.p17 .p26-q { width: 100%; box-sizing: border-box; font: 600 1.15rem/1.3 Inter, system-ui, sans-serif; padding: 14px 0; border: 0; border-bottom: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; } html.p17 .p26-q:focus { outline: none; border-bottom-color: #3B3FD8; } html.p17 .p26-hint { color: var(--muted, #555); margin: 14px 0; } html.p17 .p26-grp { margin-top: 22px; } html.p17 .p26-gh { display: flex; gap: 10px; align-items: baseline; font: 800 1.05rem Inter, system-ui, sans-serif; border-bottom: 2px solid currentColor; padding-bottom: 6px; margin: 0; } html.p17 .p26-gn { color: #3B3FD8; font-size: .8rem; letter-spacing: .08em; } html.p17 .p26-gc { margin-left: auto; font-size: .8rem; } html.p17 .p26-list { list-style: none; margin: 0; padding: 0; } html.p17 .p26-row { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line, #ccc); cursor: pointer; } html.p17 .p26-row strong { display: block; font-weight: 700; } html.p17 .p26-row small { display: block; color: var(--muted, #555); margin-top: 2px; line-height: 1.4; } html.p17 .p26-row mark { background: #3B3FD8; color: #fff; padding: 0 2px; } html.p17 .p26-more { all: unset; cursor: pointer; margin-top: 8px; font: 700 .75rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #3B3FD8; } html.p17 .p26-btn { appearance: none; border: 2px solid currentColor; background: transparent; color: inherit; font: 700 .78rem Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 12px 14px; min-height: 44px; border-radius: 0 !important; cursor: pointer; } html.p17 .p26-btn.p26-solid { background: #111; color: #FFFFFF; border-color: #111; } html.p17[data-theme="dark"] .p26-btn.p26-solid { background: #FFFFFF; color: #000; border-color: #FFFFFF; } html.p17 .p26-btn[aria-pressed="true"] { background: #3B3FD8; color: #fff; border-color: #3B3FD8; } html.p17 .p26-btn:disabled { opacity: .45; cursor: default; } html.p17 .p26-wide { width: 100%; margin: 12px 0; } html.p17 .p26-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } html.p17 .p26-k, html.p17 .p26-eyebrow { display: block; font: 700 .7rem Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 6px; } html.p17 .p26-devo { margin: 22px 0; padding: 18px 0 20px; border-top: 3px solid currentColor; border-bottom: 1px solid currentColor; } html.p17 .p26-devo-h { font: 900 clamp(1.8rem, 8vw, 2.6rem)/1.02 Inter, system-ui, sans-serif; letter-spacing: -.03em; margin: 0 0 12px; } html.p17 .p26-devo-q { margin: 0 0 16px; padding: 0 0 0 14px; border-left: 4px solid #3B3FD8; font: 400 1.15rem/1.5 Georgia, "Times New Roman", serif; } html.p17 .p26-refl, html.p17 .p26-ask { border-top: 1px solid var(--line, #ccc); padding-top: 12px; margin-top: 12px; } html.p17 .p26-refl p, html.p17 .p26-ask p { margin: 0; line-height: 1.5; } html.p17 .p26-ask p { font-weight: 700; font-size: 1.05rem; } html.p17 .p26-card-img { width: 100%; height: auto; display: block; border: 1px solid currentColor; } html.p17 .p26-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; } html.p17 .p26-stats div { padding: 12px 8px; border-right: 1px solid var(--line, #ccc); } html.p17 .p26-stats div:last-child { border-right: 0; } html.p17 .p26-stats b { display: block; font: 900 2.4rem/1 Inter, system-ui, sans-serif; letter-spacing: -.04em; } html.p17 .p26-stats small { font: 700 .66rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; } html.p17 .p26-mlist { list-style: none; padding: 0; margin: 8px 0; } html.p17 .p26-mlist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line, #ccc); } html.p17 .p26-mlist small { display: block; color: var(--muted, #555); } html.p17 .p26-x { appearance: none; border: 1px solid currentColor; background: transparent; color: inherit; width: 44px; height: 44px; font-size: 1.3rem; border-radius: 0; cursor: pointer; } html.p17 .p26-fref { font: 700 .75rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 10px; } html.p17 .p26-seg { display: flex; border: 2px solid currentColor; margin: 0 0 14px; } html.p17 .p26-seg button { flex: 1; appearance: none; border: 0; border-right: 2px solid currentColor; background: transparent; color: inherit; padding: 11px 6px; min-height: 44px; font: 700 .75rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border-radius: 0; } html.p17 .p26-seg button:last-child { border-right: 0; } html.p17 .p26-seg [aria-selected="true"], html.p17 .p26-seg [aria-checked="true"] { background: #3B3FD8; color: #fff; } html.p17 .p26-hintline { font: 800 1.6rem/1.35 Inter, system-ui, sans-serif; letter-spacing: .06em; word-spacing: .2em; margin: 6px 0 14px; } html.p17 .p26-faint { font-size: 1rem; color: var(--muted, #555); } html.p17 .p26-type { width: 100%; box-sizing: border-box; font: 400 1.05rem/1.5 Georgia, serif; padding: 12px; border: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; } html.p17 .p26-fout { margin: 14px 0 0; line-height: 1.5; } html.p17 .p26-big { font: 900 4rem/1 Inter, sans-serif; letter-spacing: -.04em; margin: 10px 0; } html.p17 .p26-remrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line, #ccc); } html.p17 .p26-remrow label { display: flex; align-items: center; gap: 12px; font-weight: 700; min-height: 44px; } html.p17 .p26-remrow input[type=checkbox] { width: 22px; height: 22px; accent-color: #3B3FD8; } html.p17 .p26-remrow input[type=time] { font: 700 1rem Inter, sans-serif; padding: 8px; border: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; min-height: 44px; } html.p17 .p26-tog { justify-content: flex-start; } html.p17 .p26-tog small { display: block; color: var(--muted, #555); font-weight: 400; } html.p17 .p26-note p { border-left: 4px solid #3B3FD8; padding: 2px 0 2px 12px; margin: 14px 0; line-height: 1.45; } html.p17 .p26-audio { display: flex; align-items: center; gap: 8px; padding: 10px 0; margin-bottom: 10px; border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; } html.p17 .p26-aprog { margin-left: auto; font: 700 .8rem Inter, sans-serif; font-variant-numeric: tabular-nums; }  html.p17 :focus-visible { outline: 3px solid #3B3FD8 !important; outline-offset: 2px !important; } html.p17[data-theme="dark"] :focus-visible { outline-color: #A9A6FF !important; } html.p26-large { font-size: 118% !important; } html.p26-large.p26-xlarge { font-size: 136% !important; } html.p26-large .verse, html.p26-large .v2-verse, html.p26-large #main p { font-size: 1.08em; } html.p26-contrast { --muted: #222 !important; --line: #111 !important; } html.p26-contrast[data-theme="dark"] { --muted: #e8e4dc !important; --line: #FFFFFF !important; } html.p26-calm *, html.p26-calm *::before, html.p26-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { html.p17 *, html.p17 *::before, html.p17 *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } html.p17 .p26-arow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; } html.p17 .p26-audio { flex-direction: column; align-items: stretch; } html.p17 .p26-acredit summary { cursor: pointer; font: 700 .7rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 8px 0; } html.p17 .p26-acredit p { margin: 4px 0 8px; font-size: .85rem; line-height: 1.45; color: var(--muted, #555); } html.p17 .p26-acct { margin-top: 22px; border-top: 3px solid currentColor; padding-top: 12px; } html.p17 .p26-acctform { display: grid; gap: 8px; } html.p17 .p26-acctform input { font: 1rem Inter, sans-serif; padding: 12px; border: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; min-height: 44px; } html.p17 .p26-devo { margin-left: var(--p26-gut, 20px); margin-right: var(--p26-gut, 20px); }  html.p17[data-theme="dark"] .p26-k, html.p17[data-theme="dark"] .p26-eyebrow, html.p17[data-theme="dark"] .p26-gn, html.p17[data-theme="dark"] .p26-more, html.p17[data-theme="dark"] .p26-fref, html.p17[data-theme="dark"] .p24-k, html.p17[data-theme="dark"] #v2-sheet summary { color: #A9A6FF !important; } html.p17[data-theme="dark"] .p20-start { background: #3B3FD8 !important; color: #fff !important; } html.p17[data-theme="dark"] .p26-row mark { background: #A9A6FF; color: #000; } html.p17 .p26-mast-search { appearance: none; background: transparent; border: 2px solid currentColor; color: inherit; width: 44px; height: 44px; display: inline-grid; place-items: center; margin-left: 8px; border-radius: 0; cursor: pointer; } html.p17 .p26-mast-search svg { width: 22px; height: 22px; }  html.p27-on #main, html.p27-on #v2-home-view, html.p27-on #v2-explore-view { display: none !important; } html.p17 .v2-tabs [data-v2tab="plans"], html.p17 .v2-tabs [data-v2tab="more"], html.p17 .v2-tabs [data-v2tab="study"] { display: none !important; } .p27-page { max-width: 760px; margin: 0 auto; padding: 72px 20px 110px; box-sizing: border-box; } html.p27-full .p27-page { position: fixed; inset: 0; max-width: none; padding: 0; z-index: 60; background: var(--bg, #FFFFFF); overflow: hidden; } html.p27-full .v2-tabs, html.p27-full header.top, html.p27-full .v2-bar { display: none !important; } html.p17 .p27-h1 { font: 900 clamp(2.6rem, 13vw, 4.4rem)/.95 Inter, system-ui, sans-serif; letter-spacing: -.045em; margin: 6px 0 8px; } html.p17 .p27-sub { color: var(--muted, #555); margin: 0 0 18px; line-height: 1.45; } html.p17 .p27-k { display: block; font: 700 .7rem Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 6px; } html.p17[data-theme="dark"] .p27-k { color: #A9A6FF; } html.p17 .p27-tn { font: 800 .75rem Inter, sans-serif; color: #3B3FD8; letter-spacing: .06em; } html.p17[data-theme="dark"] .p27-tn { color: #A9A6FF; } html.p17 .p27-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 8px; font: 700 .68rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; } html.p17 .p27-crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--muted, #555); } html.p17 .p27-crumbs a, html.p17 .p27-cb { all: unset; cursor: pointer; color: inherit; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; } html.p17 .p27-crumbs [aria-current] { color: var(--muted, #555); } html.p17 .p27-scrumbs { padding: 0 20px; } html.p17 .p27-find { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 14px 0; border-bottom: 2px solid currentColor; font: 600 1.05rem Inter, sans-serif; color: var(--muted, #555); cursor: text; margin-bottom: 18px; } html.p17 .p27-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid currentColor; border-left: 1px solid currentColor; } html.p17 .p27-tile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 14px; min-height: 120px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; } html.p17 .p27-tile strong { font: 800 1.15rem/1.1 Inter, sans-serif; letter-spacing: -.02em; } html.p17 .p27-tile small { color: var(--muted, #555); line-height: 1.35; font-size: .82rem; } html.p17 .p27-tile-red { background: #3B3FD8; color: #fff; grid-column: 1 / -1; min-height: 110px; } html.p17 .p27-tile-red small, html.p17 .p27-tile-red .p27-tn { color: #fff !important; } html.p17 .p27-wide { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; margin: 18px 0; padding: 16px; background: #111; color: #FFFFFF; } html.p17[data-theme="dark"] .p27-wide { background: #FFFFFF; color: #000; } html.p17 .p27-wide strong { display: block; font: 900 1.8rem/1 Inter, sans-serif; letter-spacing: -.03em; margin: 4px 0; } html.p17 .p27-wide .p27-k { color: #A9A6FF; } html.p17[data-theme="dark"] .p27-wide .p27-k { color: #3B3FD8; } html.p17 .p27-sec { margin-top: 24px; } html.p17 .p27-sh { display: flex; gap: 10px; align-items: baseline; font: 800 1.1rem Inter, sans-serif; border-bottom: 2px solid currentColor; padding-bottom: 6px; margin: 0; } html.p17 .p27-list { display: block; } html.p17 .p27-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; align-items: baseline; width: 100%; padding: 13px 0; border-bottom: 1px solid var(--line, #ccc); } html.p17 .p27-row > strong { grid-column: 2; font-weight: 700; } html.p17 .p27-row > small { grid-column: 2; color: var(--muted, #555); font-size: .85rem; line-height: 1.35; } html.p17 .p27-row > .p27-tn { grid-row: 1 / span 2; } html.p17 .p27-row > .p27-ar { grid-column: 3; grid-row: 1 / span 2; color: #3B3FD8; } html.p17 .p27-row:not(:has(.p27-tn)) > strong, html.p17 .p27-row:not(:has(.p27-tn)) > small { grid-column: 1 / span 2; } html.p17 .p27-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; margin: 0 0 18px; } html.p17 .p27-stats div { padding: 12px 10px; border-right: 1px solid var(--line, #ccc); } html.p17 .p27-stats div:last-child { border-right: 0; } html.p17 .p27-stats b { display: block; font: 900 2.4rem/1 Inter, sans-serif; letter-spacing: -.04em; } html.p17 .p27-stats small { font: 700 .62rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; } html.p17 .p27-empty { color: var(--muted, #555); padding: 16px 0; } html.p17 .p27-fine { font-size: .8rem; color: var(--muted, #555); } html.p17 .p27-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 2px solid currentColor; background: transparent; color: inherit; font: 700 .78rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 11px 14px; min-height: 44px; border-radius: 0 !important; cursor: pointer; box-sizing: border-box; } html.p17 .p27-btn.p27-solid { background: #111; color: #FFFFFF; border-color: #111; } html.p17[data-theme="dark"] .p27-btn.p27-solid { background: #FFFFFF; color: #000; border-color: #FFFFFF; } html.p17 .p27-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }  html.p17 .p27-goalcard { margin: 18px 20px; border-top: 3px solid #3B3FD8; padding-top: 10px; } html.p17 .p27-gacts { display: grid; gap: 0; } html.p17 .p27-gbtn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line, #ccc); font-weight: 700; } html.p17 .p27-feedcard { all: unset; box-sizing: border-box; cursor: pointer; display: block; margin: 18px 20px; padding: 18px; background: #3B3FD8; color: #fff; position: relative; min-height: 150px; } html.p17 .p27-feedcard .p27-k { color: #fff; } html.p17 .p27-feedcard strong { display: block; font: 900 2rem/1 Inter, sans-serif; letter-spacing: -.035em; margin: 4px 0 8px; max-width: 85%; } html.p17 .p27-feedcard small { display: block; max-width: 85%; line-height: 1.4; } html.p17 .p27-fgo { position: absolute; right: 16px; bottom: 10px; font: 900 2.6rem Inter, sans-serif; } html.p17 .p27-recent { margin: 18px 0 18px 20px; } html.p17 .p27-rrow { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; border-top: 2px solid currentColor; padding-right: 20px; } html.p17 .p27-rcard { all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 150px; scroll-snap-align: start; padding: 10px 12px 12px 0; margin-right: 12px; border-right: 1px solid var(--line, #ccc); display: flex; flex-direction: column; gap: 3px; } html.p17 .p27-rcard strong { font: 800 1rem/1.15 Inter, sans-serif; } html.p17 .p27-rcard small { color: var(--muted, #555); font-size: .75rem; }  .p27-onb { position: fixed; inset: 0; z-index: 2000; background: var(--bg, #FFFFFF); overflow-y: auto; padding: max(48px, env(safe-area-inset-top)) 22px 40px; box-sizing: border-box; } html.p17 .p27-onb h1 { font: 900 clamp(2.4rem, 12vw, 4rem)/.95 Inter, sans-serif; letter-spacing: -.045em; margin: 8px 0 10px; } html.p17 .p27-goals { border-top: 2px solid currentColor; margin-top: 18px; } html.p17 .p27-goal { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; width: 100%; padding: 18px 0; border-bottom: 1px solid currentColor; } html.p17 .p27-goal .p27-tn { grid-row: 1 / span 2; font-size: 1.6rem; font-weight: 900; } html.p17 .p27-goal strong { font: 800 1.4rem/1.1 Inter, sans-serif; letter-spacing: -.02em; } html.p17 .p27-goal small { color: var(--muted, #555); } html.p17 .p27-goal:hover, html.p17 .p27-goal:focus-visible { background: #3B3FD8; color: #fff; } html.p17 .p27-goal:hover small, html.p17 .p27-goal:hover .p27-tn { color: #fff; } html.p17 .p27-skip { all: unset; cursor: pointer; margin-top: 18px; text-decoration: underline; font-weight: 700; padding: 10px 0; }  html.p17 .p27-tabsbar { display: flex; overflow-x: auto; border: 2px solid currentColor; margin-bottom: 14px; scrollbar-width: none; } html.p17 .p27-tabsbar button { flex: 0 0 auto; appearance: none; border: 0; border-right: 1px solid currentColor; background: transparent; color: inherit; padding: 11px 12px; min-height: 44px; font: 700 .72rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border-radius: 0; } html.p17 .p27-tabsbar button:last-child { border-right: 0; } html.p17 .p27-tabsbar [aria-selected="true"] { background: #3B3FD8; color: #fff; } html.p17 .p27-note { border-bottom: 1px solid var(--line, #ccc); padding: 12px 0; } html.p17 .p27-note p { margin: 4px 0 0; line-height: 1.5; } html.p17 .p27-qs { padding-left: 1.3em; line-height: 1.5; } html.p17 .p27-qs li { margin: 6px 0; } html.p17 .p27-ta { width: 100%; box-sizing: border-box; font: 1rem/1.5 Georgia, serif; padding: 12px; border: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; }  .p28-x { appearance: none; background: transparent; border: 2px solid currentColor; color: inherit; width: 44px; height: 44px; font: 400 1.5rem/1 Inter, sans-serif; cursor: pointer; border-radius: 0; }  .p28-fbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: var(--bg, #FFFFFF); border-bottom: 2px solid currentColor; } .p28-fbrand { font: 900 1.4rem Inter, sans-serif; letter-spacing: -.03em; } .p28-ftime { margin-left: auto; font: 700 .75rem Inter, sans-serif; letter-spacing: .08em; } .p28-feed { position: absolute; inset: 0; top: calc(66px + env(safe-area-inset-top)); overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .p28-fcard { box-sizing: border-box; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 22px 22px calc(26px + env(safe-area-inset-bottom)); border-bottom: 1px solid currentColor; position: relative; overflow: hidden; } .p28-fimg { position: absolute; left: 0; right: 0; top: 0; height: 42%; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.1); border-bottom: 2px solid currentColor; } .p28-fimg::after { content: ""; position: absolute; inset: 0; background: #3B3FD8; mix-blend-mode: multiply; opacity: .25; } .p28-kick { display: flex; gap: 10px; align-items: baseline; font: 700 .72rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; margin: 0; } html[data-theme="dark"] .p28-kick { color: #A9A6FF; } .p28-fn { font: 900 1rem Inter, sans-serif; color: inherit; } .p28-ft { font: 900 clamp(1.8rem, 8.5vw, 3rem)/1 Inter, system-ui, sans-serif; letter-spacing: -.04em; margin: 0; } .p28-fb { font: 400 1.12rem/1.5 Georgia, serif; margin: 0; max-height: 40vh; overflow: auto; } .p28-deb { font: 700 .75rem Inter, sans-serif; letter-spacing: .06em; border-left: 4px solid #3B3FD8; padding-left: 8px; margin: 0; } .p28-frow { display: flex; align-items: center; gap: 8px; border-top: 2px solid currentColor; padding-top: 10px; } .p28-ref, .p28-deeper { appearance: none; border: 0; background: transparent; color: inherit; font: 700 .78rem Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 10px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .p28-deeper { margin-left: auto; color: #3B3FD8; } html[data-theme="dark"] .p28-deeper { color: #A9A6FF; } .p28-heart { appearance: none; width: 48px; height: 48px; border: 2px solid currentColor; background: transparent; color: inherit; font-size: 1.5rem; cursor: pointer; border-radius: 0; } .p28-heart[aria-pressed="true"] { background: #3B3FD8; border-color: #3B3FD8; color: #fff; } .p28-choices { display: grid; gap: 8px; } .p28-choice { appearance: none; text-align: left; border: 2px solid currentColor; background: transparent; color: inherit; padding: 13px 14px; min-height: 48px; font: 700 1rem Inter, sans-serif; cursor: pointer; border-radius: 0; } .p28-choice.right { background: #111; color: #FFFFFF; border-color: #111; } html[data-theme="dark"] .p28-choice.right { background: #FFFFFF; color: #000; } .p28-choice.wrong { background: #3B3FD8; color: #fff; border-color: #3B3FD8; text-decoration: line-through; } .p28-choice:disabled { cursor: default; opacity: 1; } .p28-proof { font: 400 1rem/1.45 Georgia, serif; margin: 6px 0 0; min-height: 1.4em; } .p28-nudge { position: absolute; left: 14px; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 5; background: #111; color: #FFFFFF; padding: 18px; border-top: 6px solid #3B3FD8; } .p28-nudge .p27-k { color: #A9A6FF; } .p28-nt { font: 800 1.3rem/1.2 Inter, sans-serif; margin: 0 0 6px; } .p28-nudge .p27-btn { color: #FFFFFF; } .p28-nudge .p27-btn.p27-solid { background: #3B3FD8; border-color: #3B3FD8; }  .p28-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 2px solid currentColor; border-left: 1px solid currentColor; margin-top: 10px; } .p28-stile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; color: inherit; text-decoration: none; min-height: 190px; justify-content: flex-end; } .p28-stimg { display: block; height: 96px; background: #ccc center/cover; filter: grayscale(1); margin: -10px -10px 8px; border-bottom: 1px solid currentColor; } .p28-stile strong { font: 800 1.05rem/1.1 Inter, sans-serif; } .p28-stile small { color: var(--muted, #555); font-size: .75rem; } .p28-stile.done::after { content: "✓"; position: absolute; top: 6px; right: 8px; background: #3B3FD8; color: #fff; font: 900 .8rem Inter; padding: 3px 6px; } .p28-story { position: absolute; inset: 0; background: #0B0B0B; color: #FFFFFF; overflow: hidden; } .p28-story::before { content: ""; position: absolute; inset: 0; background: var(--p28-bg) center/cover; filter: grayscale(1) brightness(.35); } .p28-bars { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 4px; z-index: 4; } .p28-bars span { flex: 1; height: 3px; background: rgba(244,242,238,.3); overflow: hidden; } .p28-bars span i { display: block; height: 100%; width: 0; background: #FFFFFF; } .p28-bars span.done i { width: 100%; } .p28-bars span.on i { animation: p28bar linear forwards; } .p28-bars span.paused i { animation-play-state: paused; } @keyframes p28bar { from { width: 0 } to { width: 100% } } .p28-stop { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 12px); left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 4; } .p28-stop strong { font: 800 1rem Inter, sans-serif; margin-right: auto; } .p28-pause { appearance: none; width: 44px; height: 44px; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF; cursor: pointer; border-radius: 0; } .p28-story .p28-x { border-color: #FFFFFF; color: #FFFFFF; } .p28-stage { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 90px 22px calc(40px + env(safe-area-inset-bottom)); z-index: 2; pointer-events: none; } .p28-slide { width: 100%; animation: p28in .28s cubic-bezier(.2,.8,.2,1); pointer-events: auto; } @keyframes p28in { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } } .p28-sn { font: 900 4.5rem/1 Inter, sans-serif; color: #A9A6FF; margin: 0 0 6px; letter-spacing: -.04em; } .p28-stext { font: 800 clamp(1.6rem, 7vw, 2.4rem)/1.12 Inter, sans-serif; letter-spacing: -.025em; margin: 0 0 14px; } .p28-sref { appearance: none; background: transparent; border: 0; border-top: 2px solid #FFFFFF; color: #FFFFFF; padding: 12px 0 0; font: 700 .8rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; position: relative; z-index: 5; } .p28-tap { position: absolute; top: 80px; bottom: 120px; z-index: 3; background: transparent; border: 0; cursor: pointer; } .p28-tapl { left: 0; width: 35%; } .p28-tapr { right: 0; width: 65%; } .p28-slkey blockquote { font: 400 1.6rem/1.35 Georgia, serif; margin: 0 0 8px; border-left: 6px solid #3B3FD8; padding-left: 14px; } .p28-skref { font: 800 1.1rem Inter, sans-serif; } .p28-story .p27-k { color: #A9A6FF; } .p28-onblack { color: #FFFFFF !important; border-color: #FFFFFF !important; } .p28-story .p27-btn.p27-solid, .p28-pres .p27-btn.p27-solid, .p28-game .p27-btn.p27-solid { background: #3B3FD8 !important; border-color: #3B3FD8 !important; color: #fff !important; } .p28-map { border: 2px solid #FFFFFF; } .p28-mapsvg { display: block; width: 100%; height: auto; max-height: 46vh; } .p28-sea { fill: #1a1a1a; } .p28-land { fill: #3a3a3a; stroke: #FFFFFF; stroke-width: .3; } .p28-dot { fill: #FFFFFF; } .p28-pulse { fill: #3B3FD8; opacity: .6; } .p28-mapname { font: 900 2rem/1 Inter, sans-serif; letter-spacing: -.03em; margin: 10px; } .p28-simg { height: 40vh; background: center/cover; filter: grayscale(1); }  .p28-dprog { display: flex; gap: 4px; margin: 6px 0 14px; } .p28-dprog span { flex: 1; height: 6px; border: 1px solid currentColor; } .p28-dprog .done { background: currentColor; } .p28-dprog .on { background: #3B3FD8; border-color: #3B3FD8; } .p28-dq { display: block; margin: 0 0 8px; color: #3B3FD8; } html[data-theme="dark"] .p28-dq { color: #A9A6FF; } .p28-wide { width: 100%; margin-top: 12px; } .p28-big { font: 900 6rem/1 Inter, sans-serif; letter-spacing: -.06em; margin: 8px 0; } .p28-friend { background: #3B3FD8; color: #fff; padding: 12px 14px; font-weight: 700; } .p28-review { padding-left: 1.4em; } .p28-review li { padding: 8px 0; border-bottom: 1px solid var(--line, #ccc); } .p28-review small, .p28-review a { display: block; } .p28-review a { color: inherit; font-weight: 700; font-size: .85rem; } .p28-cnum { margin-left: auto; font-size: .85rem; } .p28-cgrid { margin-top: 10px; } .p28-crow { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: start; padding: 3px 0; border-bottom: 1px solid var(--line, #ddd); } .p28-cb { font: 700 .66rem Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; } .p28-cells { display: flex; flex-wrap: wrap; gap: 2px; } .p28-cells a { width: 9px; height: 9px; border: 1px solid currentColor; box-sizing: border-box; } .p28-cells a.on { background: #3B3FD8; border-color: #3B3FD8; } .p28-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); border-top: 2px solid currentColor; border-left: 1px solid var(--line, #ccc); margin: 10px 0 24px; } .p28-badge { padding: 12px; border-right: 1px solid var(--line, #ccc); border-bottom: 1px solid var(--line, #ccc); opacity: .5; display: flex; flex-direction: column; gap: 3px; } .p28-badge.on { opacity: 1; background: #111; color: #FFFFFF; } html[data-theme="dark"] .p28-badge.on { background: #FFFFFF; color: #000; } .p28-badge strong { font: 800 1rem Inter, sans-serif; } .p28-badge small { font-size: .75rem; } .p28-btier { font: 700 .6rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; } .p28-badge.on .p28-btier { color: #A9A6FF; } html.p17 .p28-badges .p28-badge:not(.on) small, html.p17 .p28-badge:not(.on) strong { color: inherit; }  .p28-gtitle { font: 900 2rem/1 Inter, sans-serif; letter-spacing: -.03em; margin: 18px 0 6px; } .p28-checkin { border-left: 6px solid #3B3FD8; padding: 6px 0 6px 12px; margin: 12px 0; } .p28-weeks { list-style: none; padding: 0; border-top: 2px solid currentColor; } .p28-week { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line, #ccc); } .p28-wn { font: 900 2.2rem/1 Inter, sans-serif; letter-spacing: -.04em; grid-row: 1 / span 2; } .p28-week strong { display: block; font-weight: 800; } .p28-week small { color: var(--muted, #555); } .p28-wacts { grid-column: 2; display: flex; gap: 8px; }  .p28-pres { position: absolute; inset: 0; background: #0B0B0B; color: #FFFFFF; display: flex; flex-direction: column; outline: none; } .p28-ptop, .p28-gtop { display: flex; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; border-bottom: 2px solid #FFFFFF; } .p28-pbrand { font: 800 .8rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; margin-right: auto; } .p28-pres .p28-x, .p28-game .p28-x { border-color: #FFFFFF; color: #FFFFFF; } .p28-pbtn { appearance: none; min-width: 44px; height: 44px; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF; font: 700 .9rem Inter, sans-serif; cursor: pointer; border-radius: 0; padding: 0 8px; } .p28-clock { appearance: none; height: 44px; padding: 0 12px; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF; font: 900 1.3rem Inter, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 0; } .p28-clock.on { background: #3B3FD8; border-color: #3B3FD8; } .p28-clock.done { background: #FFFFFF; color: #000; } .p28-pstage { flex: 1; display: flex; align-items: center; padding: 4vh 6vw; overflow: auto; } .p28-pslide { width: 100%; animation: p28in .25s cubic-bezier(.2,.8,.2,1); } .p28-pk { font: 700 clamp(.8rem, 1.6vw, 1.3rem) Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #A9A6FF; margin: 0 0 2vh; } .p28-pt { font: 900 clamp(2rem, 6.4vw, 6.5rem)/1.02 Inter, system-ui, sans-serif; letter-spacing: -.035em; margin: 0; } .p28-pt.long { font-size: clamp(1.6rem, 4.6vw, 4.6rem); } .p28-ps { font: 700 clamp(1rem, 2.2vw, 2rem) Inter, sans-serif; margin: 2vh 0 0; border-top: 3px solid #FFFFFF; padding-top: 1.5vh; display: inline-block; } .p28-pbot { display: flex; align-items: center; border-top: 2px solid #FFFFFF; padding-bottom: env(safe-area-inset-bottom); } .p28-pnav { appearance: none; flex: 1; height: clamp(64px, 10vh, 110px); border: 0; background: transparent; color: #FFFFFF; font: 900 clamp(1.8rem, 4vw, 3rem) Inter, sans-serif; cursor: pointer; } .p28-pnav:last-child { background: #3B3FD8; } .p28-pnav:disabled { opacity: .3; } .p28-pcount { flex: 0 0 auto; padding: 0 20px; font: 900 clamp(1rem, 2vw, 1.6rem) Inter, sans-serif; font-variant-numeric: tabular-nums; } .p28-cin { width: 100%; box-sizing: border-box; margin: 3vh 0 1.5vh; font: 700 clamp(1.2rem, 3vw, 2.4rem) Inter, sans-serif; padding: 14px; background: transparent; color: #FFFFFF; border: 3px solid #FFFFFF; border-radius: 0; }  .p28-print { position: fixed; inset: 0; z-index: 3000; background: #fff; color: #000; overflow: auto; padding: 28px; font: 12pt/1.45 Inter, Helvetica, sans-serif; } .p28-print h1 { font: 900 26pt/1.05 Inter, sans-serif; letter-spacing: -.03em; margin: 4px 0 6px; } .p28-print h2 { font: 800 10pt Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; border-bottom: 2px solid #000; padding-bottom: 4px; margin: 18px 0 8px; } .p28-print li { margin: 0 0 10px; } .p28-lines { display: block; height: 22px; border-bottom: 1px solid #999; } .p28-lnotes { color: #333; font-size: 10pt; } @media print { html.p28-printing body > *:not(.p28-print) { display: none !important; } .p28-print { position: static; padding: 0; } .p28-noprint { display: none !important; } }  .p28-game { position: absolute; inset: 0; background: #0B0B0B; color: #FFFFFF; overflow-y: auto; padding-bottom: 30px; } .p28-game > *:not(.p28-gtop) { margin-left: 20px; margin-right: 20px; } .p28-gh { font: 900 clamp(2.4rem, 11vw, 5rem)/.95 Inter, sans-serif; letter-spacing: -.045em; margin: 18px 0 10px; } .p28-pass { color: #A9A6FF; } .p28-gsub { color: #cfcac2; line-height: 1.45; } .p28-fine { font-size: .8rem; } .p28-plist { display: grid; gap: 8px; margin: 14px 0 8px; } .p28-pin, .p28-gopts select { font: 700 1.1rem Inter, sans-serif; padding: 12px; background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; border-radius: 0; min-height: 48px; } .p28-gopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; } .p28-gopts option { color: #000; } .p28-gq { font: 900 clamp(1.7rem, 7vw, 3.4rem)/1.05 Inter, sans-serif; letter-spacing: -.03em; margin: 8px 0 16px; } .p28-gch .p28-choice { border-color: #FFFFFF; color: #FFFFFF; } .p28-gch .p28-choice.right { background: #FFFFFF; color: #000; } .p28-gproof { color: #cfcac2; } .p28-board { list-style: none; padding: 0; margin: 20px; border-top: 2px solid #FFFFFF; } .p28-board li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #555; font-size: 1.1rem; } .p28-board li.on { color: #A9A6FF; } .p28-board b { font: 900 1.4rem Inter, sans-serif; } @media (prefers-reduced-motion: reduce) { .p28-slide, .p28-pslide { animation: none; } } html.p17.v2 .v2-tabs button[data-v2tab="plans"], html.p17.v2 .v2-tabs button[data-v2tab="more"], html.p17.v2 .v2-tabs button[data-v2tab="study"] { display: none !important; } html.p17 .p28-pres h1, html.p17 .p28-pres .p28-pt, html.p17 .p28-game h1, html.p17 .p28-story h1 { color: #FFFFFF !important; } html.p17 .p28-game .p28-pass { color: #A9A6FF !important; } .p28-ptop { flex-wrap: wrap; } .p28-pbrand { font-size: .7rem; } @media (max-width: 480px) { .p28-pres .p28-pbrand { display: none; } .p28-ptop .p28-clock { margin-right: auto; } } .p28-fimg { height: 48%; }  html.p27-today .p12-searchrow, html.p27-today .p13-head-actions, html.p27-today .p17-no, html.p27-today .hx-date, html.p27-today #v2-home-view .p13-wordmark { display: none !important; } html.p27-today .hx-greet { font-size: clamp(1.7rem, 7.6vw, 2.6rem) !important; line-height: 1.05 !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 22px 0 6px !important; } html.p27-today .hx-greet br { display: none; } .p27-streak { font: 700 .72rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #3B3FD8; white-space: nowrap; } html[data-theme="dark"] .p27-streak { color: #A9A6FF; } .p27-today { display: grid; gap: 30px; margin: 18px 0 34px; } html.p17 .p27-today .p27-feedcard { margin: 0; min-height: 190px; } html.p17 .p27-tread { border-top: 3px solid currentColor; padding-top: 12px; } html.p17 .p27-tr-h { font: 900 clamp(2.2rem, 10vw, 3.4rem)/.98 Inter, sans-serif; letter-spacing: -.04em; margin: 4px 0 10px; } html.p17 .p27-tr-t { font: 400 1.08rem/1.5 Georgia, serif; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html.p17 .p27-tr-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } html.p17 .p27-tr-row .p27-btn { min-width: 120px; } html.p17 .p27-link { all: unset; cursor: pointer; font: 600 .9rem Inter, sans-serif; text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; } html.p17 .p27-pray { display: flex; align-items: center; gap: 12px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; padding: 10px 0; } html.p17 .p27-pray-l { all: unset; cursor: pointer; flex: 1; display: flex; flex-direction: column; } html.p17 .p27-pray-l strong { font: 800 1.05rem Inter, sans-serif; } html.p17 .p27-pray-l small { color: var(--muted, #555); font-size: .8rem; } html.p17 .p27-more { border-top: 2px solid currentColor; margin: 10px 0 30px; } html.p17 .p27-more-s { cursor: pointer; list-style: none; padding: 16px 0; font: 800 .8rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; display: flex; justify-content: space-between; } html.p17 .p27-more-s::-webkit-details-marker { display: none; } html.p17 .p27-more-s::after { content: "+"; font-size: 1.2rem; } html.p17 .p27-more[open] .p27-more-s::after { content: "−"; } html.p17.p27-today #v2-home-view h1.hx-greet { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; line-height: 1.02 !important; margin: 14px 0 0 !important; } html.p17.p27-today #v2-home-view .hx-greet .p17-name { display: inline !important; } html.p17 .p27-today, html.p17 .p27-more { margin-left: 20px !important; margin-right: 20px !important; } html.p17 .p27-today { gap: 26px; }  .p29-disc { font-size: .8rem; color: var(--muted, #555); border-left: 3px solid currentColor; padding-left: 10px; margin: 0 0 18px; } .p29-q { border-top: 2px solid currentColor; padding: 12px 0 18px; } .p29-ql { display: block; font: 800 1.3rem/1.15 Inter, sans-serif; letter-spacing: -.02em; margin-bottom: 10px; } .p29-rrow { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font-weight: 700; } .p29-range { width: 100%; accent-color: #3B3FD8; height: 32px; } .p29-cval { font: 900 2.6rem/1 Inter, sans-serif; letter-spacing: -.04em; min-width: 2ch; text-align: right; } .p29-yn { display: grid; gap: 6px; } .p29-ynb { appearance: none; text-align: left; border: 2px solid currentColor; background: transparent; color: inherit; padding: 12px 14px; min-height: 48px; font: 700 .98rem Inter, sans-serif; cursor: pointer; border-radius: 0; } .p29-ynb::before { content: "No · "; font-weight: 400; } .p29-ynb[aria-pressed="true"] { background: #111; color: #FFFFFF; border-color: #111; } .p29-ynb[aria-pressed="true"]::before { content: "Yes · "; } html[data-theme="dark"] .p29-ynb[aria-pressed="true"] { background: #FFFFFF; color: #000; } .p29-lkrow { border: 0; padding: 0; margin: 0 0 10px; } .p29-lkrow legend { font-weight: 700; margin-bottom: 4px; padding: 0; } .p29-seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid currentColor; } .p29-seg button { appearance: none; border: 0; border-right: 1px solid currentColor; background: transparent; color: inherit; min-height: 44px; font: 800 1rem Inter, sans-serif; cursor: pointer; border-radius: 0; } .p29-seg button:last-child { border-right: 0; } .p29-seg [aria-checked="true"] { background: #3B3FD8; color: #fff; } .p29-ta, .p29-vin { width: 100%; box-sizing: border-box; font: 1rem/1.5 Georgia, serif; padding: 12px; border: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; margin-bottom: 8px; } .p29-vin { font-family: Inter, sans-serif; } .p29-vprev { font: italic .95rem/1.45 Georgia, serif; color: var(--muted, #555); margin: 0; } .p29-scorebar { position: sticky; bottom: 70px; display: flex; align-items: center; gap: 12px; background: var(--bg, #FFFFFF); border-top: 3px solid currentColor; padding: 10px 0; } .p29-live { font: 900 2.4rem/1 Inter, sans-serif; letter-spacing: -.04em; } .p29-save { margin-left: auto; } .p29-big { font: 900 7rem/.9 Inter, sans-serif; letter-spacing: -.06em; margin: 4px 0; } .p29-today { border-top: 3px solid currentColor; padding-top: 10px; margin-bottom: 20px; } .p29-care { border: 3px solid #3B3FD8; padding: 14px; margin: 16px 0; } .p29-care a { color: inherit; font-weight: 800; } .p29-rem, .p29-hist { margin: 24px 0; } .p29-hl { list-style: none; padding: 0; } .p29-hl li { border-bottom: 1px solid var(--line, #ccc); padding: 10px 0; } .p29-hl p { margin: 4px 0; font: 1rem/1.45 Georgia, serif; } .p29-vq { margin: 10px 0; border-left: 4px solid #3B3FD8; padding-left: 12px; } .p29-vq p { margin: 0 0 4px; font: 1.02rem/1.45 Georgia, serif; } .p29-vq cite a { font: 700 .75rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: inherit; font-style: normal; } .p29-chart { width: 100%; height: auto; display: block; border-bottom: 2px solid currentColor; margin: 10px 0; } .p29-grid { stroke: currentColor; stroke-opacity: .15; stroke-width: 1; } .p29-line { fill: none; stroke: #3B3FD8; stroke-width: 2.5; } .p29-pt { fill: #3B3FD8; } html[data-theme="dark"] .p29-line { stroke: #A9A6FF; } html[data-theme="dark"] .p29-pt { fill: #A9A6FF; } .p29-heat { display: grid; grid-template-rows: repeat(7, 10px); grid-auto-flow: column; grid-auto-columns: 10px; gap: 2px; margin: 12px 0; overflow-x: auto; } .p29-heat i { border: 1px solid var(--line, #ccc); } .p29-heat .l1 { background: #e8c9c9; } .p29-heat .l2 { background: #c97a7a; } .p29-heat .l3 { background: #ad3a3a; } .p29-heat .l4 { background: #3B3FD8; } .p29-list { list-style: none; padding: 0; } .p29-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line, #ccc); } .p29-list b { font: 900 1.6rem/1 Inter, sans-serif; min-width: 2.2ch; } .p29-list small { display: block; color: var(--muted, #555); } .p29-prompt { display: flex; align-items: center; justify-content: space-between; margin-top: -16px; font: 600 .85rem Inter, sans-serif; } .p29-prompt a { color: inherit; text-underline-offset: 3px; padding: 8px 0; } .p29-hide { appearance: none; background: transparent; border: 0; color: inherit; font-size: 1.2rem; width: 44px; height: 36px; cursor: pointer; } html.p17 .p27-pray { flex-wrap: wrap; } .p29-prompt { flex: 0 0 100%; margin-top: 4px; border-top: 1px solid var(--line, #ccc); } html.p17 #v2-ref { max-width: 42vw; overflow: hidden; } html.p17 #v2-ref-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.p17 #p27-more, html.p17 #p27-more > * { max-width: 100%; min-width: 0; overflow-x: hidden; } html.p17 #p27-more .p12-car { overflow-x: auto; } html.p17 #v2-sheet { overflow-x: hidden; } html.p17 .p11-tlwrap { max-width: 100%; overflow-x: auto; }  .p28-fcard { overflow-y: auto; overflow-x: hidden; padding-left: 22px; padding-right: 22px; } .p28-fimg, html.p17 .p28-fimg { position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; flex: 0 1 38vh; height: auto !important; min-height: 96px; max-height: 42vh; margin: -22px -22px 20px; border-bottom: 2px solid currentColor; } .p28-fcard > .p28-kick { margin-top: 0; } .p28-fcard > .p28-fimg + .p28-kick { margin-top: auto; } .p28-ft { line-height: 1.04 !important; padding-top: .06em; overflow-wrap: anywhere; } @media (max-height: 700px) { .p28-fimg, html.p17 .p28-fimg { flex-basis: 26vh; max-height: 28vh; } .p28-ft { font-size: clamp(1.6rem, 7.5vw, 2.4rem) !important; } }  html, body { overflow-x: clip; max-width: 100%; } @supports not (overflow-x: clip) { html, body { overflow-x: hidden; } } #p12-choose .p12-chips, .p12-chips { margin-left: calc(-1 * min(22px, (100vw - 100%) / 2)) !important; margin-right: calc(-1 * min(22px, (100vw - 100%) / 2)) !important; } #v2-home-view, #p27-more-b, .hx-sec { overflow-x: clip; }  .nav-back { position: fixed; z-index: 10050; top: calc(10px + env(safe-area-inset-top)); left: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid currentColor; border-radius: 0 !important; background: #FFFFFF; color: #000; cursor: pointer; } .nav-back[hidden] { display: none !important; } html[data-theme="dark"] .nav-back { background: #000; color: #FFFFFF; } html.p27-full .nav-back, .nav-back.nav-x { background: #000; color: #FFFFFF; border-color: #FFFFFF; } html.nav-back-on .v2-bar, html.nav-back-on .p28-ftop, html.nav-back-on .p28-ptop, html.nav-back-on .p28-stop, html.nav-back-on .v2-sheet-head, html.nav-back-on .p27-head { padding-left: 64px !important; }  .vpop-scrim { position: fixed; inset: 0; z-index: 10040; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; } .vpop-scrim.on { opacity: 1; } .vpop { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10045; max-height: 78vh; display: flex; flex-direction: column; background: #FFFFFF; color: #000; border-top: 3px solid #3B3FD8; padding: 10px 20px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1); font-family: Inter, system-ui, sans-serif; } .vpop.on { transform: none; } html[data-theme="dark"] .vpop { background: #000; color: #FFFFFF; } .vpop-grab { display: block; width: 44px; height: 4px; background: currentColor; opacity: .3; margin: 0 auto 10px; } .vpop-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 2px solid currentColor; padding: 0 0 10px 52px; min-height: 34px; } .vpop-ref { font: 900 1.5rem/1.05 Inter, sans-serif; letter-spacing: -.03em; } .vpop-tr { font: 700 .7rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .6; } .vpop-body { overflow-y: auto; max-height: 42vh; padding: 12px 0; font: 1.12rem/1.55 var(--scripture, Georgia, serif); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .vpop-v { margin: 0 0 .5em; } .vpop-v sup { color: #3B3FD8; font: 700 .65em Inter, sans-serif; margin-right: 2px; } .vpop-acts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 2px solid currentColor; } .vpop-b { min-height: 48px; border: 0; border-bottom: 1px solid currentColor; border-right: 1px solid currentColor; background: none; color: inherit; font: 700 .78rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; border-radius: 0 !important; cursor: pointer; } .vpop-b:nth-child(2n) { border-right: 0; } #vpop-open { grid-column: 1 / -1; background: #3B3FD8; color: #fff; border-right: 0; } .vpop-msg { margin: 8px 0 0; min-height: 1em; font: 600 .8rem Inter, sans-serif; color: #3B3FD8; }  .fb-suggest { display: block; margin: 18px 0 8px; padding: 6px 0; border: 0; background: none; color: inherit; opacity: .65; font: 600 .72rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .fb-suggest:hover { opacity: 1; color: #3B3FD8; } .fb-card.fb-suggest, .p28-fcard > .fb-suggest { margin: 4px 0 0; align-self: flex-start; } .fb-page { margin: 28px 20px 120px; } .fb-vpop { margin: 6px 0 0; } .fb-wrap { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: flex-end; justify-content: center; } .fb-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); } .fb-card { position: relative; width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; background: #FFFFFF; color: #000; border-top: 3px solid #3B3FD8; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)) 20px; padding-top: 64px; font-family: Inter, system-ui, sans-serif; box-sizing: border-box; } html[data-theme="dark"] .fb-card { background: #000; color: #FFFFFF; } .fb-k { font: 700 .7rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 6px; } .fb-h { font: 900 1.7rem/1.05 Inter, sans-serif; letter-spacing: -.03em; margin: 0 0 12px; } .fb-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 14px; border-top: 2px solid currentColor; } .fb-meta div { border-bottom: 1px solid currentColor; padding: 6px 0; } .fb-meta dt { font: 700 .62rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .6; } .fb-meta dd { margin: 2px 0 0; font-size: .82rem; overflow-wrap: anywhere; } .fb-f { display: grid; gap: 4px; margin: 0 0 12px; } .fb-l { font: 700 .72rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .fb-f textarea, .fb-f input { font: 1rem/1.4 Inter, sans-serif; padding: 10px; border: 2px solid currentColor; border-radius: 0 !important; background: transparent; color: inherit; width: 100%; box-sizing: border-box; } .fb-n { font-size: .78rem; opacity: .7; } .fb-msg { color: #3B3FD8; font-weight: 600; min-height: 1em; } .fb-row { display: flex; gap: 10px; flex-wrap: wrap; } .fb-btn { min-height: 46px; padding: 0 18px; border: 2px solid currentColor; border-radius: 0 !important; background: none; color: inherit; font: 700 .78rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; } .fb-solid { background: #3B3FD8; border-color: #3B3FD8; color: #fff; } .fb-btn[disabled] { opacity: .5; cursor: not-allowed; } .fb-me { margin: 28px 0 0; } .fb-item { border-top: 2px solid currentColor; padding: 12px 0; display: grid; gap: 4px; } .fb-item p { margin: 4px 0; } .fb-p { margin: 6px 0 14px; line-height: 1.5; } .fb-dline { margin: 14px 0 0; font-size: .82rem; opacity: .8; } .fb-dline a { color: inherit; text-decoration: underline; } .qa-verse { margin: 0 0 14px; padding: 10px 0 10px 14px; border-left: 4px solid #3B3FD8; font: 1.05rem/1.5 var(--scripture, Georgia, serif); } .qa-verse p { margin: 0 0 6px; } .qa-verse cite { font: 700 .7rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; font-style: normal; } .qa-ans { border-left: 3px solid currentColor; padding: 4px 0 4px 10px; margin: 6px 0; } .qa-ans p { margin: 2px 0 0; } .qa-share { margin: 8px 0; }  .p22-mapwrap { position: relative; } .p22-mapbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; } .p22-zoom { margin-left: auto; display: flex; gap: 6px; } .p22-mapbar [aria-pressed="true"] { background: #000; color: #FFFFFF; } svg.p22-world { width: 100%; aspect-ratio: 2 / 1; height: auto; display: block; border: 2px solid currentColor; cursor: grab; user-select: none; -webkit-user-select: none; } .p22-world .p22-sea { fill: #FFFFFF; } html[data-theme="dark"] .p22-world .p22-sea { fill: #000; } .p22-world .p22-country { fill: #E4E1DA; stroke: #000; stroke-width: .6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; } html[data-theme="dark"] .p22-world .p22-country { fill: #1c1c1c; stroke: #FFFFFF; } .p22-world .p22-clabs text { fill: #000; opacity: .55; font-family: Inter, sans-serif; font-weight: 600; letter-spacing: .04em; pointer-events: none; } html[data-theme="dark"] .p22-world .p22-clabs text { fill: #FFFFFF; } .p22-world .p13-dot { fill: #3B3FD8; stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; cursor: pointer; } .p22-world .p13-dot.on { fill: #000; } .p22-card { position: relative; margin: 8px 0 0; padding: 12px 40px 12px 14px; border: 2px solid currentColor; border-left: 6px solid #3B3FD8; display: grid; gap: 4px; } .p22-card[hidden] { display: none; } .p22-card strong { font: 900 1.15rem/1.1 Inter, sans-serif; } .p22-cacts { display: flex; gap: 6px; margin-top: 4px; } .p22-cx { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; background: none; color: inherit; font-size: 20px; cursor: pointer; } .p22-credit { font-size: .7rem; opacity: .6; margin: 6px 0 0; }  .road { position: relative; padding: calc(70px + env(safe-area-inset-top)) 0 120px; background: #FFFFFF; color: #000; font-family: Inter, system-ui, sans-serif; overflow-x: clip; } html[data-theme="dark"] .road { background: #000; color: #FFFFFF; } .road-intro { padding: 0 22px 30px; border-bottom: 2px solid currentColor; margin: 0 22px; padding-left: 0; } .road-k { font: 700 .68rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 6px; } .road-title { font: 900 clamp(2.4rem, 12vw, 5rem)/.95 Inter, sans-serif; letter-spacing: -.05em; margin: 0 0 10px; } .road-sub { margin: 0; opacity: .7; } .road-era { position: relative; padding: 0 22px; } .road-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-bottom: 1px solid currentColor; padding: 40px 0; box-sizing: border-box; } .road-num { font: 900 clamp(5.5rem, 34vw, 12rem)/.82 Inter, sans-serif; letter-spacing: -.07em; margin: 0; overflow-wrap: anywhere; } .road-unit { font: 700 .8rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; margin: 0; color: #3B3FD8; } .road-name { font: 900 clamp(1.8rem, 8vw, 3rem)/1.02 Inter, sans-serif; letter-spacing: -.035em; margin: 6px 0 8px; border-top: 2px solid currentColor; padding-top: 10px; } .road-img { height: 30vh; min-height: 150px; background-size: cover; background-position: center 50%; filter: grayscale(1) contrast(1.05); border: 2px solid currentColor; } .road-why { font: 1.08rem/1.45 var(--scripture, Georgia, serif); margin: 6px 0 0; } .road-why .road-k { display: inline; margin-right: 6px; } .road-books { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .road-book { border: 1.5px solid currentColor; background: none; color: inherit; padding: 6px 10px; font: 700 .7rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; border-radius: 0 !important; cursor: pointer; } .road-track { position: relative; padding: 30px 0 40px; display: flex; flex-direction: column; gap: 26px; } .road-svg { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: visible; } .road-path { fill: none; stroke: #3B3FD8; stroke-width: 3; stroke-linecap: square; } .road-head { fill: #3B3FD8; } .road-ev { position: relative; z-index: 1; width: 64%; text-align: left; display: grid; gap: 4px; padding: 12px 14px; border: 2px solid currentColor; background: #FFFFFF; color: inherit; font: inherit; border-radius: 0 !important; cursor: pointer; } html[data-theme="dark"] .road-ev { background: #000; } .road-ev.l { align-self: flex-start; } .road-ev.r { align-self: flex-end; } .road-ev strong { font: 900 1.15rem/1.1 Inter, sans-serif; letter-spacing: -.02em; } .road-ev small { font-size: .86rem; line-height: 1.4; opacity: .8; } .road-evn { font: 700 .66rem Inter, sans-serif; letter-spacing: .14em; color: #3B3FD8; } .road-ref { justify-self: start; font: 700 .7rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .road-gap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; } .road-gapl { background: #FFFFFF; padding: 10px 14px; text-align: center; display: grid; gap: 2px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; } html[data-theme="dark"] .road-gapl { background: #000; } .road-gapl strong { font: 900 1.2rem/1.1 Inter, sans-serif; letter-spacing: -.02em; } .road-gapl span { font: 700 .66rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .65; } .road-rail { position: fixed; right: 8px; top: 50%; transform: translateY(-50%); z-index: 40; display: grid; gap: 8px; } .road-dot { width: 10px; height: 10px; padding: 0; border: 1.5px solid currentColor; background: #FFFFFF; border-radius: 0 !important; cursor: pointer; } .road-dot.on { background: #3B3FD8; border-color: #3B3FD8; transform: scale(1.35); } .road-credit { margin: 30px 22px 0; font-size: .72rem; opacity: .6; } .road-ev, .road-hero > *, .road-gap { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); } .road-ev:not(.in) { opacity: 0; transform: translateY(18px); } .road-hero:not(.in) > * { opacity: 0; transform: translateY(14px); } @media (prefers-reduced-motion: reduce) { .road-ev, .road-hero > *, .road-gap { transition: none !important; opacity: 1 !important; transform: none !important; } } .road-era { padding-right: 30px; }  .wt { margin: 22px 0; border-top: 2px solid currentColor; padding-top: 10px; font-family: Inter, system-ui, sans-serif; } #main > .wt { margin: 30px 22px 40px; } .wt-k { font: 700 .7rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 8px; } .wt-item { display: grid; grid-template-columns: 40px 1fr 18px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid currentColor; color: inherit; text-decoration: none; } .wt-play { width: 40px; height: 40px; display: grid; place-items: center; background: #000; color: #FFFFFF; font-size: 14px; } html[data-theme="dark"] .wt-play { background: #FFFFFF; color: #000; } .wt-item[data-series="ohob"] .wt-play { background: #3B3FD8; color: #fff; } .wt-t { display: grid; gap: 2px; } .wt-t strong { font: 700 .98rem/1.25 Inter, sans-serif; } .wt-t small { font-size: .78rem; opacity: .7; } .wt-ext { opacity: .5; } .wt-note { font-size: .7rem; opacity: .55; margin: 8px 0 0; } .wt-fcard { background: #000 !important; color: #FFFFFF !important; } .wt-fcard .p28-kick { color: #A9A6FF; } .wt-go { color: #A9A6FF !important; } .wt-more { margin: 8px 0 0; border: 0; background: none; color: inherit; font: 700 .72rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; cursor: pointer; padding: 6px 0; } .wt-sermon .wt-play { background: transparent; color: inherit; border: 2px solid currentColor; }  .p28-story.sfx-kb::before { animation: sfxkb 22s ease-in-out infinite alternate; transform-origin: 40% 40%; } @keyframes sfxkb { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.18) translate(-3%, -2%); } } .sfx-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .sfx-ph { opacity: 0; animation: sfxin .6s cubic-bezier(.2,.7,.2,1) forwards; display: inline; } @keyframes sfxin { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } } .sfx-name { color: #A9A6FF; font-weight: inherit; } .sfx-road { fill: none; stroke: #3B3FD8; stroke-width: 1.6; stroke-linecap: square; } .sfx-head { fill: #3B3FD8; } .p28-slkey.sfx-end blockquote { font: 900 clamp(2rem, 10vw, 4.2rem)/1.02 Inter, sans-serif !important; letter-spacing: -.04em; margin: 8px 0 12px; } .sfx-nar[aria-pressed="true"] { background: #3B3FD8; border-color: #3B3FD8; } @media (prefers-reduced-motion: reduce) { .p28-story.sfx-kb::before { animation: none; } .sfx-ph { animation: none; opacity: 1; } .sfx-cv { display: none; } }  .otp { position: sticky; top: 0; z-index: 30; display: flex; align-items: stretch; background: #FFFFFF; border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; margin: 0 0 14px; font-family: Inter, system-ui, sans-serif; } html[data-theme="dark"] .otp { background: #000; } .otp-page { top: calc(env(safe-area-inset-top) + var(--barh, 56px)); } .otp-row { display: flex; overflow-x: auto; scrollbar-width: none; flex: 1; } .otp-row::-webkit-scrollbar { display: none; } .otp-tab, .otp-contents { flex: 0 0 auto; border: 0; background: none; color: inherit; padding: 11px 12px; font: 700 .7rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; border-radius: 0 !important; border-bottom: 3px solid transparent; } .otp-tab.on { border-bottom-color: #3B3FD8; color: #3B3FD8; } .otp-contents { border-right: 1px solid currentColor; background: #000; color: #FFFFFF; } html[data-theme="dark"] .otp-contents { background: #FFFFFF; color: #000; } .otp-list { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 6px 0; list-style: none; background: inherit; border-bottom: 2px solid currentColor; max-height: 55vh; overflow-y: auto; counter-reset: otp; box-shadow: 0 10px 20px rgba(0,0,0,.12); } .otp-list li { counter-increment: otp; } .otp-list button { width: 100%; text-align: left; border: 0; border-bottom: 1px solid rgba(0,0,0,.12); background: none; color: inherit; padding: 10px 16px; font: 600 .95rem Inter, sans-serif; cursor: pointer; } .otp-list button::before { content: counter(otp, decimal-leading-zero) "  "; color: #3B3FD8; font-weight: 800; } .otp-top { position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 10030; border: 2px solid currentColor; background: #FFFFFF; color: #000; padding: 10px 12px; font: 800 .72rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; border-radius: 0 !important; cursor: pointer; } .otp-top[hidden] { display: none; } html[data-theme="dark"] .otp-top { background: #000; color: #FFFFFF; }  .p30-sec { margin: 26px 0; } .p30-lede { font-size: 1.05rem; line-height: 1.5; } .p30-card { border-top: 1px solid currentColor; padding: 12px 0 14px; } .p30-card h3 { margin: 0 0 6px; font: 800 1.05rem Inter, sans-serif; } .p30-card p { margin: 6px 0; line-height: 1.5; } .p30-k { font: 800 .66rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; } .p30-fine { font-size: .82rem; opacity: .72; line-height: 1.45; } .p30-src { font-size: .78rem; opacity: .8; } .p30-src a { color: inherit; } .p30-dbt { display: inline-block; margin-left: 6px; border: 1px solid #3B3FD8; color: #3B3FD8; font: 700 .6rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; } .p30-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; border-top: 2px solid currentColor; padding-top: 10px; } .p30-facts dt { font-weight: 800; } .p30-facts dd { margin: 0; } .p30-acts { padding-left: 20px; } .p30-acts li { margin: 8px 0; } .p30-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .p30-thread { border-top: 1px solid rgba(0,0,0,.15); padding: 8px 0; } .p30-num { font: 900 2.6rem Inter, sans-serif; margin: 0; color: #3B3FD8; } .p30-crow { display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(0,0,0,.15); padding: 8px 0; } .p30-crow small { opacity: .7; } .p30-faq { border-top: 1px solid currentColor; padding: 10px 0; } .p30-faq summary { font-weight: 800; cursor: pointer; } .p30-go { color: #3B3FD8; font-weight: 700; } .p30-ver { display: grid; grid-template-columns: 54px 1fr; gap: 2px 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.15); } .p30-ver small { grid-column: 2; opacity: .75; font-size: .76rem; } .p30-bar { position: relative; height: 2px; background: currentColor; } .p30-bar i { position: absolute; top: -5px; width: 12px; height: 12px; margin-left: -6px; background: #000; } .p30-ver.in .p30-bar i { background: #3B3FD8; } html[data-theme="dark"] .p30-bar i { background: #FFFFFF; } .p30-axis { display: flex; justify-content: space-between; font: 700 .66rem Inter; letter-spacing: .1em; text-transform: uppercase; padding-left: 64px; } .p30-q { font-family: Georgia, serif; } .p30-picks { font-weight: 800; } .p30-tglink { display: block; width: 100%; text-align: left; border: 2px solid currentColor; background: none; color: inherit; padding: 10px 12px; margin: 0 0 12px; cursor: pointer; } .p30-tglink strong { display: block; } .p30-tglink small { color: #3B3FD8; } .p30-jlist { display: grid; gap: 0; } .p30-jcard { display: grid; gap: 4px; padding: 16px 0; border-top: 2px solid currentColor; color: inherit; text-decoration: none; } .p30-jcard strong { font: 900 1.4rem Inter, sans-serif; } .p30-jbar { height: 4px; background: rgba(0,0,0,.12); } .p30-jbar i { display: block; height: 100%; background: #3B3FD8; } .p30-jn { font-size: .78rem; opacity: .75; } .p30-steps { list-style: none; padding: 0; } .p30-step { border-top: 1px solid currentColor; padding: 14px 0; } .p30-step.next { border-top: 3px solid #3B3FD8; } .p30-step.done h3 { opacity: .55; } .p30-step h3 { margin: 0; font: 800 1.1rem Inter, sans-serif; } .p30-sn { color: #3B3FD8; margin-right: 8px; } .p30-why { line-height: 1.5; } .p30-items { display: flex; flex-wrap: wrap; gap: 6px; } .p30-item, .p30-chip { border: 1px solid currentColor; background: none; color: inherit; padding: 6px 9px; font: 600 .82rem Inter, sans-serif; border-radius: 0 !important; cursor: pointer; text-align: left; } .p30-done { margin-top: 10px; border: 2px solid currentColor; background: none; color: inherit; padding: 8px 12px; font: 800 .72rem Inter; letter-spacing: .1em; text-transform: uppercase; border-radius: 0 !important; cursor: pointer; } .p30-done[aria-pressed="true"] { background: #3B3FD8; border-color: #3B3FD8; color: #fff; } .p30-conn { border-top: 2px solid currentColor; margin: 28px 0 10px; padding-top: 10px; } .p30-ch { font: 900 1.2rem Inter, sans-serif; margin: 0 0 8px; } .p30-cg { margin: 10px 0; } .p30-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .p30-pray { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: .8rem; opacity: .85; border-bottom: 1px solid rgba(0,0,0,.15); padding: 4px 26px 8px 0; margin: 0 0 12px; position: relative; font-family: Inter, sans-serif; } .p30-pref { border: 0; background: none; color: #3B3FD8; font: 700 .8rem Inter; padding: 0; text-decoration: underline; cursor: pointer; } .p30-x { position: absolute; right: 0; top: 0; border: 0; background: none; color: inherit; font-size: 1.1rem; width: 26px; height: 26px; cursor: pointer; } .p30-pf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: .86rem; margin: 6px 0 10px; } .p30-pfn { display: inline-grid; place-items: center; width: 18px; height: 18px; background: #3B3FD8; color: #fff; font: 800 .66rem Inter; margin-right: 4px; } .p30-set { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid currentColor; padding: 12px 0; margin-top: 16px; } .p30-set small { display: block; opacity: .7; }  .tv-sec { margin: 22px 0; } .tv-hint { font-size: .8rem; opacity: .7; } .tv-facts { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; } .tv-facts::-webkit-scrollbar { display: none; } .tv-fact { flex: 0 0 82%; scroll-snap-align: start; border: 2px solid currentColor; padding: 16px; min-height: 210px; display: flex; flex-direction: column; gap: 8px; } .tv-k { font: 800 .66rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; display: flex; justify-content: space-between; gap: 8px; margin: 0; } .tv-n { color: inherit; } .tv-ft { font: 700 1.15rem/1.35 Inter, sans-serif; margin: 0; } .tv-note { font-size: .8rem; opacity: .7; margin: 0; } .tv-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .tv-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tv-pick select { border: 2px solid currentColor; background: none; color: inherit; padding: 10px; font: 600 .9rem Inter; border-radius: 0; } .tv-best { font: 700 .8rem Inter; margin: 10px 0; } .tv-start, .tv-next { width: 100%; margin-top: 10px; } .tv-timer { height: 4px; background: rgba(0,0,0,.12); margin: 8px 0; } .tv-timer i { display: block; height: 100%; background: #3B3FD8; transition: width 1s linear; } .tv-q { font: 800 1.3rem/1.3 Inter, sans-serif; margin: 10px 0; } .tv-ch { display: grid; gap: 8px; } .tv-opt { border: 2px solid currentColor; background: none; color: inherit; padding: 12px; text-align: left; font: 600 1rem Inter; border-radius: 0 !important; cursor: pointer; } .tv-opt.right { background: #000; color: #fff; } .tv-opt.wrong { border-color: #3B3FD8; color: #3B3FD8; text-decoration: line-through; } html[data-theme="dark"] .tv-opt.right { background: #FFFFFF; color: #000; } .tv-ref { border: 0; background: none; color: #3B3FD8; font-weight: 700; text-decoration: underline; padding: 0; cursor: pointer; } .tv-score { font: 900 3.5rem Inter; margin: 10px 0 0; } .tv-game { display: block; margin-top: 16px; color: #3B3FD8; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .tv-timer i { transition: none; } } .tv-start[hidden] { display: none !important; } .tv-fact { min-height: 0; }  .st-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid currentColor; margin: 12px 0 20px; } .st-big { padding: 12px 6px 12px 0; border-bottom: 1px solid rgba(0,0,0,.15); } .st-big strong { display: block; font: 900 1.7rem Inter, sans-serif; } .st-big small { font-size: .72rem; opacity: .75; } .st-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 120px; align-items: end; margin: 10px 0 20px; } .st-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .st-bar i { display: block; width: 100%; background: #3B3FD8; min-height: 2px; } .st-bar small { font: 700 .6rem Inter; margin-top: 4px; } .st-top li { margin: 6px 0; } .yir { position: fixed; inset: 0; z-index: 10040; background: #000; color: #FFFFFF; display: flex; flex-direction: column; justify-content: center; padding: calc(60px + env(safe-area-inset-top)) 26px 40px; } .yir-prog { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; gap: 4px; } .yir-prog i { flex: 1; height: 3px; background: rgba(255,255,255,.25); } .yir-prog i.on { background: #3B3FD8; } .yir-x { position: absolute; top: calc(26px + env(safe-area-inset-top)); right: 12px; background: none; border: 0; color: inherit; font-size: 1.8rem; } .yir-n { font: 900 clamp(3.5rem, 18vw, 6rem)/1 Inter, sans-serif; margin: 0; color: #FFFFFF; } .yir-l { font: 700 1.4rem Inter; margin: 10px 0; } .yir-s { color: #e8a0a0; } .yir-nav { position: absolute; bottom: calc(30px + env(safe-area-inset-bottom)); left: 20px; right: 20px; display: flex; justify-content: space-between; } .yir-nav button { background: none; border: 2px solid #FFFFFF; color: inherit; padding: 10px 16px; font: 800 .8rem Inter; letter-spacing: .1em; text-transform: uppercase; border-radius: 0; } .yir-nav button[disabled] { opacity: .3; } .sn { display: grid; gap: 12px; } .sn-f { display: grid; gap: 4px; } .sn-f input, .sn-f textarea { border: 2px solid currentColor; background: none; color: inherit; padding: 10px; font: 500 1rem Inter; border-radius: 0; } .sn-refs { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .sn-list { margin-top: 14px; } .sn-item { display: grid; gap: 2px; border-top: 1px solid currentColor; padding: 12px 0; color: inherit; text-decoration: none; } .sn-item small { opacity: .7; } .rv-count { font: 800 1rem Inter; } .rv-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; border-top: 1px solid currentColor; padding: 10px 0; } .rv-row small { color: #3B3FD8; font: 700 .66rem Inter; letter-spacing: .1em; text-transform: uppercase; } .rv-row p { font-size: .82rem; opacity: .75; margin: 4px 0; } .rv-note { width: 100%; border: 1px solid rgba(0,0,0,.3); background: none; color: inherit; padding: 6px; font: .85rem Inter; border-radius: 0; } .rv-ok { width: 22px; height: 22px; accent-color: #3B3FD8; } .p31-fam { display: grid; grid-template-columns: 1fr auto; } .p31-fam input { grid-row: 1 / 3; grid-column: 2; width: 24px; height: 24px; accent-color: #3B3FD8; align-self: center; } .dp-item { border-top: 1px solid currentColor; padding: 10px 0; } .dp-item summary { cursor: pointer; } .dp-f p { margin: 4px 0; } .dp-web { width: 100%; height: auto; color: inherit; } .dp-webwrap { border: 2px solid currentColor; padding: 10px; margin-bottom: 16px; } .ws-orig { font: 800 1.4rem Georgia, serif; margin: 0; } .vp-xr { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: baseline; } .dp-kv { border-left: 3px solid #3B3FD8; padding-left: 10px; font-family: Georgia, serif; } .dp-days { padding-left: 18px; } .dp-days li { margin: 8px 0; } .dp-kind { font: 700 .62rem Inter; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; padding: 1px 4px; } .dp-fulfilled { color: #3B3FD8; } .ws-e { border-top: 1px solid currentColor; padding: 10px 0; } html.nav-back-on #v2-sheet.p13-herosheet .v2-sheet-head, #v2-sheet.p13-herosheet .v2-sheet-head { padding: 0 !important; width: 1px !important; overflow: hidden; } html.nav-back-on .p28-fbar, html.nav-back-on .p28-gtop { padding-left: 64px !important; }  html.v2, html.p17.v2 { background: var(--bg) !important; overflow-x: clip; } html.v2 body { min-height: 100vh; min-height: 100dvh; overflow-x: clip; max-width: none !important; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } html.v2 .v2-tabs { padding-left: max(6px, env(safe-area-inset-left, 0px)) !important; padding-right: max(6px, env(safe-area-inset-right, 0px)) !important; } html.v2 img, html.v2 svg, html.v2 video { max-width: 100%; }
/* v2-p9.css */
:root { --hx-r: 26px; --hx-ink: #1d1b2e; } html.v2-xp-on #main, html.v2-xp-on .v2-ref { display: none !important; } .hx { margin: 0 -18px; }  .hx-hero { position: relative; min-height: 470px; margin: 0 !important; padding: 0 !important; border-radius: 0 0 34px 34px !important; overflow: hidden; display: flex; align-items: flex-end; color: #fff; isolation: isolate; } .hx-hero::after { display: none !important; } .hx-scene { position: absolute; inset: -40px 0 0; width: 100%; height: calc(100% + 40px); z-index: -1; } .hx-scene g { will-change: transform; } .hx-star { animation: hxtw 3s ease-in-out infinite alternate; } @keyframes hxtw { from { opacity: .3; } to { opacity: 1; } } .hx-hero-in { padding: 96px 24px 34px; width: 100%; will-change: transform, opacity; } .hx-date { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; } .hx-greet { margin: 4px 0 18px; font: 700 2.1rem/1.1 var(--serif); color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.18); } .hx-votd { background: rgba(255,255,255,.14) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.25); border-radius: 24px; padding: 18px 20px !important; margin: 0 !important; color: #fff; } .hx-votd blockquote { margin: 6px 0 14px !important; font: 500 1.42rem/1.38 var(--serif) !important; color: #fff !important; border: 0 !important; padding: 0 !important; } .hx-eyebrow { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .9; } .hx-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: #fff; color: var(--hx-ink) !important; font-weight: 700; font-size: 14px; cursor: pointer; } .hx-day .hx-greet, .hx-dawn .hx-greet { text-shadow: 0 2px 20px rgba(20,20,60,.35); }  html.v2-home-on:not(.hx-scrolled) header.top { background: transparent !important; box-shadow: none !important; border-color: transparent !important; color: #fff; } html.v2-home-on:not(.hx-scrolled) header.top button, html.v2-home-on:not(.hx-scrolled) header.top a { color: #fff !important; } html.v2-home-on header.top { position: fixed !important; top: 0; left: 0; right: 0; z-index: 30; transition: background-color .3s, color .3s; } @media (min-width: 960px) { html.v2-home-on header.top { left: var(--v2-side, 240px); } } html.v2-home-on #v2-home-view { padding-top: 0 !important; margin-top: 0 !important; }  .hx-body { padding: 8px 0 30px; } .hx-sec { margin-top: 30px; } .hx-sec-h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 20px; margin-bottom: 12px; } .hx-sec-h h2 { margin: 0; font: 700 1.45rem/1.2 var(--serif); } .hx-see { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: 15px; min-height: 44px; padding: 0 4px; cursor: pointer; } .hx-recent, .hx-sec > .v2-home-empty { margin: 0 20px; }  .hx-car { display: grid; grid-auto-flow: column; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 12px; scroll-padding: 0 20px; scrollbar-width: none; overscroll-behavior-x: contain; } .hx-car::-webkit-scrollbar { display: none; } .hx-car-pick { grid-auto-columns: 84%; } .hx-car-tall { grid-auto-columns: 70%; } .hx-car-books { grid-auto-columns: 46%; } @media (min-width: 700px) { .hx-car-pick { grid-auto-columns: 340px; } .hx-car-tall { grid-auto-columns: 280px; } .hx-car-books { grid-auto-columns: 200px; } } .hx-card { position: relative; scroll-snap-align: start; display: flex; align-items: flex-end; min-height: 200px; padding: 0; border: 0; border-radius: var(--hx-r); overflow: hidden; background: var(--c); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--c) 70%, #000); isolation: isolate; } .hx-art { position: absolute; inset: 0; z-index: -2; will-change: transform; transform: scale(1.12); } .hx-art .v2-art { width: 100%; height: 100%; filter: saturate(1.5) contrast(1.05); opacity: .9; } .hx-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, transparent) 0%, color-mix(in srgb, var(--c) 70%, #000 10%) 62%, color-mix(in srgb, var(--c) 92%, #000 25%) 100%); } .hx-card-t { display: grid; gap: 4px; padding: 18px 18px 18px; width: 100%; } .hx-card-t strong { font: 700 1.45rem/1.2 var(--serif); } .hx-card-t small { font-size: 14px; line-height: 1.4; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hx-continue { min-height: 230px; } .hx-prog { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.28); margin-top: 10px; overflow: hidden; } .hx-prog i { display: block; height: 100%; background: #fff; border-radius: 6px; } .hx-weekcard { background: linear-gradient(140deg, #e7a91e, #c4553a); cursor: default; } .hx-weekcard .hx-count { font-size: 1.9rem; margin-right: 4px; font-variant-numeric: tabular-nums; } .hx-weekcard .v2-week-days { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 12px; text-align: center; } .hx-weekcard .v2-week-day i { background: rgba(255,255,255,.25); width: 28px; height: 28px; } .hx-weekcard .v2-week-day.on i { background: #fff; box-shadow: none; } .hx-weekcard .v2-week-day.today i { outline-color: #fff; } .hx-weekcard .v2-week-day small { color: rgba(255,255,255,.85); } .hx-tall { min-height: 340px; } .hx-tall .hx-card-t strong { font-size: 1.6rem; } .hx-tall .hx-card-t small { -webkit-line-clamp: 3; } .hx-person .hx-portrait { position: absolute; inset: 0 0 auto; height: 70%; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.35), transparent 60%); } .hx-person .hx-portrait svg { width: 62%; height: auto; } .hx-book { min-height: 230px; } .hx-book .hx-card-t strong { font-size: 1.25rem; }  .hx-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px; } @media (min-width: 700px) { .hx-bento { grid-template-columns: repeat(3, 1fr); } } .hx-tile { position: relative; overflow: hidden; display: grid; align-content: end; gap: 3px; min-height: 132px; padding: 16px; border: 0; border-radius: 22px; color: #fff; text-align: left; cursor: pointer; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 82%, #000)); box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--c) 80%, #000); isolation: isolate; } .hx-wide { grid-column: span 2; min-height: 118px; } .hx-tile strong { font-size: 17px; line-height: 1.25; } .hx-tile small { font-size: 13px; opacity: .9; line-height: 1.35; } .hx-tile-glyph { position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.2); display: grid; place-items: center; } .hx-tile-glyph svg { width: 22px; height: 22px; color: #fff; stroke: #fff; } .hx-tile-big { position: absolute; right: -18px; bottom: -22px; width: 120px; height: 120px; opacity: .16; z-index: -1; transform: rotate(-12deg); transition: transform .5s var(--spring); } .hx-tile-big svg { width: 100%; height: 100%; color: #fff; stroke: #fff; } .hx-tile:active .hx-tile-big { transform: rotate(-4deg) scale(1.08); } .hx-tile .hx-tile-glyph + .hx-tile-big + strong { margin-top: 44px; }  .hx-xp { padding: 8px 0 40px; } .hx-xp-head { padding: 18px 20px 18px; } .hx-xp-head h1 { margin: 2px 0 6px; font: 700 2.3rem/1.1 var(--serif); } .hx-xp-head .hx-eyebrow { color: var(--accent); } .hx-xp-sub { margin: 0; color: var(--muted); font-size: 16px; } .hx-xp .hx-tile { min-height: 150px; } .hx-xp .hx-wide { min-height: 130px; }  .hx-ch-continue { display: grid; gap: 2px; width: 100%; text-align: left; padding: 20px; margin-bottom: 16px; border: 0; border-radius: 22px; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); cursor: pointer; box-shadow: 0 10px 24px -14px var(--c); } .hx-ch-continue strong { font: 700 1.6rem/1.2 var(--serif); } .hx-ch-go { font-weight: 700; justify-self: end; margin-top: -24px; } .hx-ch-find { width: 100%; min-height: 46px; margin-bottom: 4px; } .hx-ch-h { font: 700 1.2rem var(--serif); margin: 20px 0 10px; } .hx-ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (min-width: 700px) { .hx-ch-grid { grid-template-columns: repeat(3, 1fr); } } .hx-ch-book { display: grid; gap: 2px; text-align: left; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 16px; cursor: pointer; color: var(--ink); background: color-mix(in srgb, var(--c) 12%, var(--paper)); border-left: 5px solid var(--c); } .hx-ch-book strong { font-size: 16px; } .hx-ch-book small { color: var(--muted); font-size: 12.5px; } .hx-ch-bookhead { display: grid; gap: 4px; padding: 20px; border-radius: 22px; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); margin-bottom: 16px; } .hx-ch-bookhead strong { font: 700 1.8rem var(--serif); } .hx-ch-bookhead .hx-pill { justify-self: start; margin-top: 8px; } .hx-ch-chapters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; } .hx-ch-chapters button { aspect-ratio: 1; border: 0; border-radius: 16px; font-size: 18px; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--c) 12%, var(--paper)); cursor: pointer; animation: v2up .4s var(--spring) backwards; animation-delay: calc(var(--i) * 12ms); } .hx-ch-chapters button:active { background: var(--c); color: #fff; }  html[data-theme=dark] .hx-hero .hx-scene { filter: brightness(.7) saturate(1.1); } html[data-theme=dark] .hx-card, html[data-theme=dark] .hx-tile { box-shadow: none; } html[data-theme=dark] .hx-tile { background: linear-gradient(150deg, color-mix(in srgb, var(--c) 85%, #fff 5%), color-mix(in srgb, var(--c) 70%, #000)); } html[data-theme=dark] .hx-ch-book, html[data-theme=dark] .hx-ch-chapters button { background: color-mix(in srgb, var(--c) 25%, var(--paper)); } @media (prefers-reduced-motion: reduce) { .hx-star, .hx-ch-chapters button { animation: none !important; } }  html.v2.v2-home-on:not(.hx-scrolled) .top { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent !important; } html.v2.v2-home-on:not(.hx-scrolled) .top .v2-icon { color: #fff !important; } .hx-hero { min-height: 0; } .hx-hero-in { padding: 92px 22px 28px; } .hx-greet { font-size: 2rem; margin-bottom: 14px; } .hx-votd blockquote { font-size: 1.22rem !important; line-height: 1.42 !important; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .hx-art { mix-blend-mode: soft-light; opacity: .95; } .hx-art .v2-art { filter: saturate(1.6) contrast(1.15); opacity: 1; } .hx-card { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 72%, #fff 10%), var(--c) 55%, color-mix(in srgb, var(--c) 80%, #000)); } .hx-shade { background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--c) 60%, #000 20%) 100%); opacity: .85; } .hx-person .hx-portrait { mix-blend-mode: normal; } .hx-sec { margin-top: 26px; } .hx-art-raw { mix-blend-mode: normal !important; } @media (max-width: 959px) { .hx { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } .hx-car { touch-action: pan-x pan-y; } .hx-hero, .hx-bento, .hx-card, .hx-tile { touch-action: pan-x pan-y; }  :root { --hx-indigo: #3a3f9e; --hx-gold: #c08a14; } html[data-theme=dark] { --hx-indigo: #8e93f0; --hx-gold: #e2b350; } .hx-sec { margin-top: 28px; } .hx-pick { margin: 0 20px; border-radius: 24px; background: var(--paper); box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 80%, transparent), 0 12px 30px -22px rgba(30,30,80,.35); overflow: hidden; } .hx-pick .hx-eyebrow { color: var(--hx-indigo); opacity: 1; } .hx-pick-main { display: grid; gap: 4px; width: 100%; text-align: left; padding: 20px 20px 18px; border: 0; background: none; color: var(--ink); cursor: pointer; position: relative; } .hx-pick-main strong { font: 700 1.6rem/1.2 var(--serif); } .hx-pick-main small { color: var(--muted); font-size: 14.5px; line-height: 1.45; } .hx-pick .hx-prog { background: color-mix(in srgb, var(--hx-indigo) 14%, transparent); margin-top: 10px; } .hx-pick .hx-prog i { background: var(--hx-indigo); } .hx-go { position: absolute; right: 20px; top: 20px; color: var(--hx-indigo); font-weight: 700; font-size: 15px; } .hx-pick-plan { position: relative; display: grid; gap: 2px; width: 100%; text-align: left; padding: 14px 20px; border: 0; border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--hx-gold) 8%, var(--paper)); color: var(--ink); cursor: pointer; } .hx-pick-plan .hx-eyebrow { color: var(--hx-gold); } .hx-pick-plan strong { font-size: 16px; } .hx-pick-plan .hx-go { top: 50%; transform: translateY(-50%); color: var(--hx-gold); font-size: 20px; } .hx-week { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 16px; border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); } .hx-week-l { display: grid; gap: 2px; } .hx-week-l strong { font-size: 14px; color: var(--muted); font-weight: 600; } .hx-week .hx-count { color: var(--ink); font-size: 1.2rem; margin-right: 2px; } .hx-week .v2-week-days { display: flex; gap: 6px; margin: 0; } .hx-week .v2-week-day i { width: 22px; height: 22px; margin: 0 auto 2px; background: color-mix(in srgb, var(--hx-indigo) 10%, var(--paper-2)); } .hx-week .v2-week-day.on i { background: var(--hx-indigo); } .hx-week .v2-week-day.today i { outline: 2px solid var(--hx-gold); outline-offset: 2px; } .hx-week .v2-week-day small { font-size: 10.5px; }  .hx-car-tall { grid-auto-columns: 74%; } .hx-tall { min-height: 300px; } .hx-art { opacity: .55; } .hx-person { background: linear-gradient(160deg, #4a4fb0, #2b2f7a) !important; }  .hx-minigrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px; } @media (min-width: 700px) { .hx-minigrid { grid-template-columns: repeat(3, 1fr); } } .hx-mini { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; min-height: 72px; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 80%, transparent); } .hx-mini-ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; } .hx-mini-ic svg { width: 22px; height: 22px; } .hx-indigo .hx-mini-ic { background: color-mix(in srgb, var(--hx-indigo) 13%, transparent); color: var(--hx-indigo); } .hx-gold .hx-mini-ic { background: color-mix(in srgb, var(--hx-gold) 16%, transparent); color: var(--hx-gold); } .hx-mini-ic svg, .hx-mini-ic svg * { stroke: currentColor; } .hx-mini strong { font-size: 15.5px; align-self: end; } .hx-mini small { font-size: 12.5px; color: var(--muted); align-self: start; line-height: 1.3; } .hx-body { padding-bottom: 36px; } .hx-see { color: var(--hx-indigo); } .hx-mini small, .hx-mini strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-mini strong { white-space: normal; line-height: 1.2; font-size: 15px; } .hx-mini { column-gap: 10px; padding: 12px; }  .hx-xp { padding: 6px 20px 40px; } .hx-xp-head { padding: 12px 0 10px; } .hx-xp-head h1 { margin: 0; font: 700 2.1rem/1.1 var(--serif); } .hx-xfind { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; } .hx-xfeat { position: relative; display: grid; gap: 4px; width: 100%; text-align: left; margin: 16px 0 6px; padding: 22px 20px; border: 0; border-radius: 22px; color: #fff; cursor: pointer; background: linear-gradient(145deg, #4c52b8, var(--hx-indigo, #3a3f9e) 60%, #2a2e78); box-shadow: 0 14px 30px -20px #2a2e78; } .hx-xfeat .hx-eyebrow { color: #f2cf7a; opacity: 1; } .hx-xfeat strong { font: 700 1.7rem/1.15 var(--serif); } .hx-xfeat small { opacity: .9; font-size: 14.5px; } .hx-xfeat-go { position: absolute; right: 20px; top: 22px; font-weight: 700; } .hx-xgroup { margin-top: 24px; } .hx-xgroup h2 { margin: 0 0 8px 4px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-family: inherit; } .hx-xlist { border-radius: 18px; background: var(--paper); overflow: hidden; box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 80%, transparent); } .hx-xrow { display: grid; grid-template-columns: 40px 1fr 16px; gap: 14px; align-items: center; width: 100%; min-height: 64px; padding: 10px 16px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; } .hx-xlist .hx-xrow + .hx-xrow { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .hx-xrow-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--hx-indigo, #3a3f9e) 12%, transparent); color: var(--hx-indigo, #3a3f9e); } .hx-xrow-ic svg { width: 22px; height: 22px; } .hx-xrow-ic svg * { stroke: currentColor; } .hx-xrow-t { display: grid; gap: 2px; min-width: 0; } .hx-xrow-t strong { font-size: 16.5px; } .hx-xrow-t small { font-size: 13.5px; color: var(--muted); line-height: 1.35; } .hx-xrow-go { color: var(--muted); font-size: 20px; } .hx-xbible { margin-top: 10px; border-radius: 16px; background: var(--paper); } .hx-xempty { color: var(--muted); margin: 16px 4px; } .hx-xrow[hidden], .hx-xgroup[hidden], .hx-xempty[hidden] { display: none !important; }
/* theme.css */
html.p17.v2.vt.vt.vt :is(.p12-card, .v2-card, .hx-pick, .hx-pick-main, .hx-pick-plan, .v2-st-card, .v2-rt-card, .hx-mini, .p13-chip, .p12-chips button, .v2-lib-chips button, .hx-xsearch input, .hx-xfind, .p12-search, .p12-filter, .p12-img, .v2-plan-mini, .p14-req, .v2-seg, .p13-placard, .p11-card, .p27-btn, .p27-feedcard, .p21-btn, .p21-x, .p21-row, input, select, textarea) { border-radius: var(--vt-r) !important; } html.p17.v2.vt.vt.vt .v2-sheet { border-radius: 22px 22px 0 0 !important; border-top: 0 !important; box-shadow: 0 -10px 40px rgba(0,0,0,.18) !important; } html.p17.v2.vt.vt.vt .v2-grab { border-radius: 3px !important; width: 40px !important; height: 5px !important; background: var(--muted) !important; opacity: .5; } html.p17.v2.vt.vt.vt header.top { border-bottom: 0 !important; } html.p17.v2.vt.vt.vt :is(h1, h2, h3, .tx-title, .v2-sheet-head h2) { letter-spacing: -.02em !important; font-weight: 700 !important; } html.p17.v2.vt.vt.vt .tx-title { border-bottom: 0 !important; font-size: 36px !important; }  html.p17.v2.vt.vt.vt .v2-tabs { border-top: 0 !important; height: auto !important; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important; } html.p17.v2.vt.vt.vt .v2-tabs button { border-right: 0 !important; flex-direction: column !important; gap: 3px; min-height: 56px !important; } html.p17.v2.vt.vt.vt .v2-tabs button svg { display: block !important; width: 23px !important; height: 23px !important; } html.p17.v2.vt.vt.vt .v2-tabs button span { font: 600 10.5px Inter, sans-serif !important; letter-spacing: .2px !important; text-transform: none !important; }  html.vt .p21-panel { border-bottom: 0 !important; border-radius: 0 0 26px 26px; padding-bottom: 30px !important; } html.vt .p21-top { border-bottom: 0 !important; } html.vt .p21-title { font: 700 34px/1 Inter, sans-serif !important; letter-spacing: -.03em !important; } html.vt .p21-x { border: 0 !important; border-radius: 50% !important; } html.vt .p21-find { border: 0 !important; border-radius: 999px !important; padding: 13px 18px !important; margin-top: 14px !important; } html.vt .p21-grp { margin-top: 12px !important; border-radius: 22px; padding: 16px 16px 12px; position: relative; } html.vt .p21-h { margin: 0 !important; border: 0 !important; } html.vt .p21-tog { border: 0 !important; padding: 0 !important; width: 100%; display: flex; align-items: center; gap: 10px; background: none !important; text-align: left; } html.vt .p21-gn { display: none !important; } html.vt .p21-gt { font: 700 20px/1.1 Inter, sans-serif !important; letter-spacing: -.01em !important; text-transform: none !important; flex: 1; } html.vt .p21-gt::before { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-right: 10px; font-size: 17px; vertical-align: middle; } html.vt .p21-grp[data-grp="Keep walking"] .p21-gt::before { content: "👣"; } html.vt .p21-grp[data-grp="Explore the Bible"] .p21-gt::before { content: "🧭"; } html.vt .p21-grp[data-grp="Go deeper"] .p21-gt::before { content: "🔍"; } html.vt .p21-grp[data-grp="Beliefs & questions"] .p21-gt::before { content: "✦"; } html.vt .p21-grp[data-grp="Fun & family"] .p21-gt::before { content: "★"; } html.vt .p21-grp[data-grp="More"] .p21-gt::before { content: "⋯"; } html.vt .p21-list { display: flex !important; flex-wrap: wrap; gap: 7px; margin-top: 12px; border: 0 !important; } html.vt .p21-grp:not(.open) .p21-list { display: none !important; } html.vt .p21-row { display: inline-flex !important; width: auto !important; padding: 9px 13px !important; border: 0 !important; min-height: 0 !important; grid-template-columns: none !important; } html.vt .p21-row small, html.vt .p21-row .p21-ar { display: none !important; } html.vt .p21-row strong { font: 600 13.5px Inter, sans-serif !important; } html.vt .p21-row[hidden] { display: none !important; } html.vt .p21-list .p21-row:first-child { padding: 12px 16px !important; flex-basis: 100%; justify-content: space-between; } html.vt .p21-list .p21-row:first-child strong::before { content: "Start here · "; font-weight: 500; opacity: .7; } html.vt .p21-list .p21-row:first-child::after { content: "→"; font-weight: 700; } html.vt .p21-grp[data-grp="More"] { background: none !important; box-shadow: none !important; padding-top: 6px; } html.vt .p21-grp[data-grp="More"] .p21-gt { font-size: 14px !important; } html.vt .p21-grp[data-grp="More"] .p21-list .p21-row:first-child { flex-basis: auto; padding: 9px 13px !important; } html.vt .p21-grp[data-grp="More"] .p21-list .p21-row:first-child strong::before, html.vt .p21-grp[data-grp="More"] .p21-list .p21-row:first-child::after { content: none; } .vt-libhero { margin-top: 14px; border-radius: 24px; padding: 18px; display: flex; gap: 14px; align-items: center; border: 0; width: 100%; text-align: left; cursor: pointer; font-family: Inter, sans-serif; } .vt-libhero small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; } .vt-libhero strong { display: block; font-size: 19px; margin: 3px 0; } .vt-libhero em { font-style: normal; font-size: 12.5px; opacity: .8; } .vt-libhero .vt-go { margin-left: auto; flex: none; border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 14px; }  .vt-steps { display: flex; justify-content: center; gap: 6px; margin: 14px 0 0; font: 600 11px Inter, sans-serif; } .vt-steps span { padding: 5px 10px; border-radius: 999px; } html.vt .hx-hero button, html.vt .v2-bar button, html.vt .p21-btn { border-radius: 999px !important; } html.vt .p30-pf { border: 0 !important; } html.vt .p30-pfn { border-radius: 50% !important; } html.vt .nav-back { border-radius: 50% !important; border: 0 !important; background: var(--paper-2) !important; color: var(--ink) !important; box-shadow: 0 1px 4px rgba(0,0,0,.12) !important; } html.vt.p21-on .nav-back.nav-x { display: none !important; } html.vt :is(.p26-solid, .p27-solid, .p25-solid, .p30-solid, .p31-solid, [class*="-solid"]) { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } html.vt[data-theme="dark"] :is([class*="-solid"]) { color: #111 !important; } html.vt :is(.p26-btn, .p27-btn, .p25-btn, .p30-btn, .p31-btn, .p28-btn, [class$="-btn"]) { border-radius: 999px !important; border-width: 1px !important; } html.vt .v2-plan-new, html.vt [class*="plan-new"], html.vt [class*="newplan"] { border-radius: 18px !important; }  html.v2, html.p17.v2 { background: var(--bg) !important; overflow-x: clip; } html.v2 body { min-height: 100vh; min-height: 100dvh; overflow-x: clip; max-width: none !important; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } html.v2 .v2-tabs { padding-left: max(6px, env(safe-area-inset-left, 0px)) !important; padding-right: max(6px, env(safe-area-inset-right, 0px)) !important; } html.v2 img, html.v2 svg, html.v2 video { max-width: 100%; } html.p17.v2.vt.vt.vt { --vt-r: 14px; --bg: #FFFFFF; --paper: #FFFFFF; --paper-2: #EEF2EA; --ink: #202124; --muted: #5F6368; --line: #DADCE0; --rule: #DADCE0; --accent: #3B3FD8; --select-edge: #3B3FD8; } html.p17.v2.vt.vt.vt[data-theme="dark"] { --bg: #1B1D1F; --paper: #232528; --paper-2: #2B2E31; --ink: #E8EAED; --muted: #9AA0A6; --line: #3C4043; --rule: #3C4043; --accent: #A9A6FF; --select-edge: #A9A6FF; }  html.p17.v2.vt.vt.vt .v2-tabs { background: #fff !important; box-shadow: 0 -1px 0 #E3E5E8, 0 -6px 18px rgba(0,0,0,.05) !important; } html.p17.v2.vt.vt.vt[data-theme="dark"] .v2-tabs { background: #232528 !important; } html.p17.v2.vt.vt.vt .v2-tabs button { color: #5F6368 !important; } html.p17.v2.vt.vt.vt .v2-tabs button svg { padding: 3px 18px; box-sizing: content-box; border-radius: 999px; } html.p17.v2.vt.vt.vt .v2-tabs button[aria-current="page"] { background: none !important; color: #2A2DB0 !important; } html.p17.v2.vt.vt.vt .v2-tabs button[aria-current="page"] svg { background: #D3E3FD; } html.p17.v2.vt.vt.vt .v2-tabs button[aria-current="page"] span { font-weight: 700 !important; }  html.p17.v2.vt.vt.vt.p27-today .hx-hero { position: relative; z-index: 3; background: none !important; border: 0 !important; } html.p17.v2.vt.vt.vt.p27-today .p12-hello { background: #fff; border-radius: 28px; padding: 8px 10px 8px 14px !important; box-shadow: 0 2px 8px rgba(0,0,0,.14); margin: 0 4px; } html.p17.v2.vt.vt.vt.p27-today .hx-greet { font-size: 22px !important; } html.vt .p27-today { border: 0 !important; } html.vt .p27-tread { position: relative; padding: 0 !important; border: 0 !important; background: none !important; } .vt-map { position: relative; margin: -6px -20px 0; height: 360px; overflow: hidden; } .vt-map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .vt-pin { position: absolute; transform: translate(-50%, -130%); background: #fff; border-radius: 8px; padding: 4px 8px; font: 700 11px Inter, sans-serif; color: #202124; box-shadow: 0 1px 4px rgba(0,0,0,.25); white-space: nowrap; } .vt-pin.here { background: #3B3FD8; color: #fff; } .vt-sheet { position: relative; z-index: 2; margin: -34px -20px 0; background: #fff; border-radius: 24px 24px 0 0; padding: 10px 20px 18px; box-shadow: 0 -6px 22px rgba(0,0,0,.12); } html[data-theme="dark"] .vt-sheet { background: #232528; } .vt-grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: #C4C7C5; margin: 0 auto 12px; border: 0; padding: 0; cursor: grab; } .vt-status { background: #EEEDFF; color: #2A2DB0; border-radius: 10px; padding: 8px 11px; font: 600 12.5px Inter, sans-serif; margin-bottom: 10px; } html.vt .p27-tread .p27-k { color: #3B3FD8 !important; letter-spacing: 1px !important; } html.vt .p27-tr-h { font-size: 26px !important; margin: 4px 0 2px !important; border: 0 !important; } html.vt .p27-tr-t { font-size: 14.5px !important; color: var(--muted) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.vt .p27-tr-row { gap: 10px !important; margin-top: 12px !important; flex-wrap: wrap; } html.vt #p27-tr-read { background: #3B3FD8 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 12px 22px !important; font: 600 15px Inter, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; } html.vt #p27-choose { border: 1px solid #DADCE0 !important; border-radius: 999px !important; padding: 11px 16px !important; color: #3B3FD8 !important; text-decoration: none !important; font: 600 14px Inter, sans-serif !important; } html.vt .p27-feedcard { background: #fff !important; color: var(--ink) !important; border: 1px solid #E3E5E8 !important; border-radius: 18px !important; margin: 12px 0 0 !important; min-height: 0 !important; padding: 14px 16px !important; } html[data-theme="dark"].vt .p27-feedcard { background: #232528 !important; } html.vt .p27-feedcard strong { font-size: 17px !important; } html.vt .p27-feedcard .p27-k { color: #3B3FD8 !important; } html.vt .p27-feedcard .p27-fgo { color: #3B3FD8 !important; } html.vt .p27-feedcard strong, html.vt .p27-feedcard small { color: var(--ink) !important; } html.vt .p27-pray { border: 1px solid #E3E5E8 !important; border-radius: 18px; padding: 10px 14px !important; margin-top: 10px !important; background: var(--paper) !important; } html.vt #p27-pray-mark { border-radius: 999px !important; border: 1px solid #DADCE0 !important; color: #3B3FD8 !important; background: none !important; text-transform: none !important; letter-spacing: 0 !important; font: 600 13px Inter, sans-serif !important; } html.vt #p27-pray-mark[aria-pressed="true"] { background: #3B3FD8 !important; color: #fff !important; } html.vt .p27-more { border: 0 !important; margin-bottom: 110px !important; } html.vt .p27-more-s { color: #3B3FD8 !important; border: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font: 600 14px Inter, sans-serif !important; }  html.vt .p21-panel { background: #FFFFFF !important; } html[data-theme="dark"].vt .p21-panel { background: #1B1D1F !important; } html.vt .p21-find { background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.12); color: var(--ink) !important; } html.vt .p21-x { background: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.15); } html.vt .p21-grp { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-left: 22px; } html[data-theme="dark"].vt .p21-grp { background: #232528; } html.vt .p21-grp::before { content: ""; position: absolute; left: -16px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #3B3FD8; box-sizing: border-box; } html.vt .p21-grp::after { content: ""; position: absolute; left: -11px; top: 40px; bottom: -14px; width: 2px; background: repeating-linear-gradient(#3B3FD8 0 4px, transparent 4px 9px); } html.vt .p21-grp[data-grp="More"]::after, html.vt .p21-grp[data-grp="Fun & family"]::after { display: none; } html.vt .p21-grp[data-grp="More"]::before { display: none; } html.vt .p21-gt::before { background: #EEEDFF; } html.vt .p21-row { background: #F1F3F4 !important; color: var(--ink) !important; } html[data-theme="dark"].vt .p21-row { background: #2B2E31 !important; } html.vt .p21-list .p21-row:first-child { background: #EEEDFF !important; } html.vt .p21-list .p21-row:first-child strong { color: #2A2DB0 !important; } html.vt .p21-grp[data-grp="More"] .p21-list .p21-row:first-child { background: #F1F3F4 !important; } html.vt .p21-grp[data-grp="More"] .p21-list .p21-row:first-child strong { color: var(--ink) !important; } .vt-libhero { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.1); color: #202124; flex-wrap: wrap; } html[data-theme="dark"] .vt-libhero { background: #232528; color: #E8EAED; } .vt-libhero small { color: #3B3FD8; } .vt-libhero .vt-go { background: #3B3FD8; color: #fff; } .vt-libhero .vt-prog { flex-basis: 100%; height: 6px; border-radius: 3px; background: #E8EAED; overflow: hidden; } .vt-libhero .vt-prog i { display: block; height: 100%; background: #3B3FD8; } html.p17.v2.vt.vt.vt.p27-today .hx-hero button { border: 1px solid #DADCE0 !important; } html.vt .vt-sheet .p30-pf { background: #F1F3F4; border-radius: 12px; padding: 8px 10px !important; font-size: 13px; } html.vt .vt-sheet .p27-tr-t { display: none !important; }  .vt-map { height: 44vh; touch-action: none; user-select: none; -webkit-user-select: none; background: #E9F0E2; } .vt-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; } .vt-svg:active { cursor: grabbing; } .vt-era text { font: 800 15px Inter, sans-serif; fill: #5f6b56; letter-spacing: .5px; paint-order: stroke; stroke: #fff; stroke-width: 4px; } .vt-map:not([data-zoom="far"]):not([data-zoom="mid"]) .vt-era { opacity: 0; } .vt-era { transition: opacity .25s; pointer-events: none; } .vt-map[data-zoom="far"] .vt-stop .vt-lbl, .vt-map[data-zoom="far"] .vt-mark-n { opacity: 0; } .vt-map[data-zoom="far"] .vt-stop:not(.here) { opacity: .0; } .vt-stop { cursor: pointer; transition: opacity .25s; } .vt-stop .vt-dot { fill: #fff; stroke: #9AA0A6; stroke-width: 3; } .vt-stop.done .vt-dot { fill: #3B3FD8; stroke: #fff; } .vt-check { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .vt-stop.here .vt-dot { fill: #fff; stroke: #3B3FD8; stroke-width: 5; } .vt-pulse { fill: rgba(59,63,216,.35); transform-box: fill-box; transform-origin: center; animation: vtPulse 1.8s ease-out infinite; } @keyframes vtPulse { from { transform: scale(.7); opacity: .9; } to { transform: scale(2.4); opacity: 0; } } .vt-glow { fill: rgba(251,188,4,.55); transform-box: fill-box; transform-origin: center; animation: vtGlow 1.6s ease-in-out infinite alternate; } .vt-stop.next .vt-dot { stroke: #F9AB00; stroke-width: 4; } @keyframes vtGlow { from { transform: scale(1); opacity: .5; } to { transform: scale(1.7); opacity: .95; } } .vt-lbl text { font: 700 11.5px Inter, sans-serif; fill: #202124; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; } .vt-stop.here .vt-lbl text { fill: #2A2DB0; font-weight: 800; } .vt-mark { cursor: pointer; } .vt-mark-bg { fill: #fff; stroke: #DADCE0; stroke-width: 1.5; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); } .vt-mark-e { font-size: 15px; } .vt-mark-n { font: 700 10.5px Inter, sans-serif; fill: #3c4043; paint-order: stroke; stroke: #fff; stroke-width: 3.5px; } .vt-map[data-zoom="near"] .vt-mark-n { opacity: .9; } .vt-trav-c { fill: #fff; stroke: #3B3FD8; stroke-width: 2.5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); } .vt-trav { pointer-events: none; } .vt-trav-e { font-size: 11px; } .vt-trav { transform-box: view-box; } .vt-ctrl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } .vt-ctrl button { width: 40px; height: 40px; border-radius: 12px !important; border: 0 !important; background: #fff !important; color: #3c4043 !important; font: 600 19px Inter, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; } .vt-zl { position: absolute; left: 10px; top: 10px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 6px 11px; font: 700 11.5px Inter, sans-serif; color: #2A2DB0; box-shadow: 0 1px 3px rgba(0,0,0,.18); z-index: 2; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vt-card { position: absolute; left: 10px; right: 10px; bottom: 46px; z-index: 3; background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 8px 28px rgba(0,0,0,.22); font-family: Inter, sans-serif; color: #202124; transform: translateY(14px); opacity: 0; transition: transform .2s, opacity .18s; max-height: calc(100% - 60px); overflow: auto; } .vt-card.in { transform: none; opacity: 1; } .vt-card strong { display: block; font-size: 19px; margin: 3px 0 4px; } .vt-card p { margin: 0 0 10px; font-size: 13px; color: #5F6368; line-height: 1.4; } .vt-card-k { color: #3B3FD8; font-weight: 700; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; } .vt-card-k2 { display: block; font-size: 11px; font-weight: 700; color: #5F6368; margin-bottom: 6px; } .vt-card-x { position: absolute; right: 8px; top: 6px; width: 32px; height: 32px; border: 0 !important; background: #F1F3F4 !important; border-radius: 50% !important; font-size: 18px; color: #3c4043; } .vt-card-row { display: flex; gap: 8px; flex-wrap: wrap; } .vt-card-ppl { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .vt-card-go { background: #3B3FD8 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 10px 18px; font: 600 14px Inter, sans-serif; } .vt-card-2, .vt-chip { background: #fff !important; color: #3B3FD8 !important; border: 1px solid #DADCE0 !important; border-radius: 999px !important; padding: 9px 14px; font: 600 13px Inter, sans-serif; } .vt-chip { color: #3c4043 !important; padding: 6px 10px; font-size: 12px; } html[data-theme="dark"] .vt-card { background: #2B2E31; color: #E8EAED; } .vt-sheet { touch-action: pan-y; } .vt-grab { width: 100% !important; height: 22px !important; background: none !important; margin: -6px 0 4px !important; position: relative; } .vt-grab::after { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: #C4C7C5; } @media (prefers-reduced-motion: reduce) { .vt-pulse, .vt-glow { animation: none; } .vt-card { transition: none; } .vt-era { transition: none; } } .vt-stop .vt-lbl { opacity: 0; transition: opacity .2s; } .vt-stop.here .vt-lbl, .vt-stop.next .vt-lbl, .vt-stop:hover .vt-lbl, .vt-stop:focus .vt-lbl { opacity: 1; } .vt-map { margin: 0 -20px !important; } .vt-sheet { margin-top: -22px !important; }  .vt-mstats { grid-template-columns: repeat(4, 1fr) !important; } .vt-mh { font: 700 15px Inter, sans-serif !important; margin: 18px 0 8px !important; letter-spacing: 0 !important; text-transform: none !important; } .vt-mrow { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; } .vt-mrow-b { flex: 1; text-align: left; background: none !important; border: 0 !important; padding: 0 !important; color: var(--ink); } .vt-mrow-b strong { display: block; font-size: 15px; } .vt-mrow-b small { color: var(--muted); font-size: 12px; } .vt-mbar { display: block; height: 5px; border-radius: 3px; background: #E8EAED; margin-top: 6px; overflow: hidden; } .vt-mbar i { display: block; height: 100%; background: #3B3FD8; border-radius: 3px; } .vt-mtag { font: 700 10.5px Inter, sans-serif; text-transform: uppercase; letter-spacing: .5px; padding: 4px 8px; border-radius: 999px; background: #FEF7E0; color: #B06000; } .vt-mtag.reviewing { background: #EEEDFF; color: #2A2DB0; } .vt-mtag.mastered { background: #E6F4EA; color: #137333; } .vt-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .vt-pack { text-align: left; background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 12px !important; color: var(--ink); } .vt-pack strong { display: block; font-size: 14.5px; } .vt-pack small { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 6px; } .vt-pack em { font-style: normal; color: #3B3FD8; font-weight: 700; font-size: 12px; } .vt-mverse span { color: var(--muted); } .vt-mverse span.on { color: var(--ink); font-weight: 600; } .vt-mverse { font: 500 19px/1.5 Georgia, serif; } .vt-mk { font: 700 11px Inter, sans-serif; color: #3B3FD8; text-transform: uppercase; letter-spacing: .8px; margin: 14px 0 4px; } .vt-mnote { font-size: 14px; line-height: 1.5; color: var(--muted); } .vt-dots { display: flex; gap: 5px; margin-bottom: 14px; } .vt-dots i { flex: 1; height: 4px; border-radius: 2px; background: #E8EAED; } .vt-dots i.done { background: #3B3FD8; } .vt-dots i.on { background: #A9A6FF; } .vt-step { font: 700 12px Inter, sans-serif; color: #3B3FD8; text-transform: uppercase; letter-spacing: .6px; margin: 4px 0 10px; } .vt-ctx { font: 500 19px/1.55 Georgia, serif; } .vt-ctx .hl { background: #D3E3FD; border-radius: 4px; color: #2A2DB0; } .vt-ctx .later { color: #BDC1C6; } .vt-ctx .known { color: var(--ink); } .vt-line { font: 500 20px/1.5 Georgia, serif; min-height: 60px; } .vt-fade span { transition: opacity .35s; } .vt-fade span.gone { opacity: 0; } @media (prefers-reduced-motion: reduce) { .vt-fade span { transition: none; } } .vt-blank { color: #3B3FD8; font-weight: 700; } .vt-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .vt-tile { padding: 10px 14px; border-radius: 12px !important; border: 1px solid #DADCE0 !important; background: #fff !important; color: #202124; font: 600 15px Inter, sans-serif; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .vt-tile:disabled { opacity: .25; } .vt-tile.ok { background: #E6F4EA !important; border-color: #137333 !important; } .vt-tile.no { background: #FCE8E6 !important; opacity: .5; } .vt-msg { min-height: 22px; font-size: 14px; color: var(--muted); } .vt-memstep { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #FEF7E0 !important; border: 0 !important; border-radius: 14px !important; padding: 10px 12px !important; margin: 0 0 10px; color: #202124; } .vt-memstep-i { font-size: 22px; } .vt-memstep small { display: block; font: 700 10.5px Inter, sans-serif; color: #B06000; text-transform: uppercase; letter-spacing: .5px; } .vt-memstep strong { font-size: 14px; } .vt-memstep-go { margin-left: auto; font-size: 22px; color: #B06000; } .vt-micnote { font-size: 13px; color: #5F6368; background: #F1F3F4; border-radius: 12px; padding: 8px 10px; margin: 0 0 8px; } .vt-micnote:empty { display: none; } .vt-mic.on { background: #2A2DB0 !important; animation: vtMic 1s ease-in-out infinite alternate; } @keyframes vtMic { to { box-shadow: 0 0 0 8px rgba(59,63,216,.18); } } @media (prefers-reduced-motion: reduce) { .vt-mic.on { animation: none; } } .vt-score { display: inline-block; font: 800 18px Inter, sans-serif; color: #B06000; } .vt-score.pass { color: #137333; } .vt-legend { font-size: 12.5px; color: #5F6368; } .vt-wline { display: block; margin-top: 8px; font: 500 18px/1.6 Georgia, serif; } .vt-w.ok { color: #137333; background: #E6F4EA; border-radius: 4px; } .vt-w.miss { color: #9AA0A6; } .vt-w.wrong { color: #B06000; background: #FEF7E0; border-radius: 4px; } .vt-w.soft { color: #9AA0A6; } .vt-map { width: auto; } @media (min-width: 700px) { .vt-map, .vt-sheet { border-radius: 22px; } .vt-map { margin: 0 !important; } .vt-sheet { margin-left: 0 !important; margin-right: 0 !important; } }  html.p17.v2.vt.vt.vt .vt-card2{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;width:100%;text-align:left;padding:14px 16px;margin:0 0 8px;border:1px solid var(--line,#E2E6DF);border-radius:16px;background:var(--card,#fff);color:inherit;text-decoration:none;font:inherit;cursor:pointer} html.p17.v2.vt.vt.vt .vt-card2 strong{font-weight:650}html.p17.v2.vt.vt.vt .vt-card2 small{grid-column:1;opacity:.7;font-size:.85em}html.p17.v2.vt.vt.vt .vt-card2 .vt-ar{grid-row:1/3;grid-column:2;color:var(--accent,#3B3FD8)} html.p17.v2.vt.vt.vt .vt-lede{opacity:.75;margin:0 0 14px}html.p17.v2.vt.vt.vt .vt-hs h3{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin:18px 0 8px} html.p17.v2.vt.vt.vt .vt-steps{list-style:none;padding:0;margin:16px 0}html.p17.v2.vt.vt.vt .vt-step button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 14px;margin-bottom:8px;border:1px solid var(--line,#E2E6DF);border-radius:16px;background:var(--card,#fff);color:inherit;font:inherit} html.p17.v2.vt.vt.vt .vt-step small{display:block;opacity:.7}html.p17.v2.vt.vt.vt .vt-sn{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--line,#E2E6DF);font-weight:700} html.p17.v2.vt.vt.vt .vt-step.done .vt-sn{background:#1E8E3E;color:#fff}html.p17.v2.vt.vt.vt .vt-step.next button{border-color:var(--accent,#3B3FD8);box-shadow:0 0 0 3px rgba(59,63,216,.15)}html.p17.v2.vt.vt.vt .vt-step.next .vt-sn{background:var(--accent,#3B3FD8);color:#fff} html.p17.v2.vt.vt.vt .vt-tprog{display:block;height:8px;border-radius:8px;background:var(--line,#E2E6DF);overflow:hidden}html.p17.v2.vt.vt.vt .vt-tprog i{display:block;height:100%;background:var(--accent,#3B3FD8)} html.p17.v2.vt.vt.vt .vt-tnext{display:block;width:100%;padding:14px;border:0;border-radius:999px;background:var(--accent,#3B3FD8);color:#fff;font:inherit;font-weight:650;margin:10px 0}html.p17.v2.vt.vt.vt .vt-link{background:none;border:0;color:var(--accent,#3B3FD8);font:inherit;padding:8px 0} html.p17.v2.vt.vt.vt .vt-ans{margin:8px 0 12px;padding:10px;border-radius:16px;background:rgba(59,63,216,.07)}html.p17.v2.vt.vt.vt .vt-ansh{margin:0 4px 6px;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;opacity:.7} html.p17.v2.vt.vt.vt .vt-ansrow{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:12px;background:var(--card,#fff);color:inherit;font:inherit;margin-bottom:6px}html.p17.v2.vt.vt.vt .vt-ansrow small{display:block;opacity:.7} html.p17.v2.vt.vt.vt .vt-chub-btn{display:flex;gap:10px;align-items:center;margin:12px auto;max-width:680px;width:calc(100% - 32px);padding:12px 16px;border:1px solid var(--line,#E2E6DF);border-radius:999px;background:var(--card,#fff);color:inherit;font:inherit}html.p17.v2.vt.vt.vt .vt-chub-btn span{color:var(--accent,#3B3FD8);font-size:1.2em}html.p17.v2.vt.vt.vt .vt-chub-btn small{opacity:.65;margin-left:auto} @media (max-width:480px){html.p17.v2.vt.vt.vt .vt-chub-btn small{display:none}html.p17.v2.vt.vt.vt .vt-chub-btn strong{white-space:nowrap}}  .vt-map { background: #5EA8D2 !important; } .vt-map[data-tod="night"] .vt-l-ground, .vt-map[data-tod="night"] .vt-l-deco { filter: brightness(.78) saturate(.85); } .vt-map[data-tod="evening"] .vt-l-ground { filter: saturate(1.05) sepia(.08); } .vt-skyl, .vt-clouds, .vt-birds { pointer-events: none; } .vt-waves use { animation: vtWave 5.5s ease-in-out infinite; transform-box: fill-box; } @keyframes vtWave { 0%,100% { opacity: .2; translate: -4px 0; } 50% { opacity: .9; translate: 4px 0; } } .vt-shim { animation: vtShim 4s ease-in-out infinite; } @keyframes vtShim { 0%,100% { opacity: .1; } 50% { opacity: .45; } } .vt-flow { animation: vtFlow 3s linear infinite; } @keyframes vtFlow { to { stroke-dashoffset: -56; } } .vt-spark { animation: vtSpark 2.4s linear infinite; } @keyframes vtSpark { to { stroke-dashoffset: -56; } } .vt-glowroad { animation: vtGlowR 2.6s ease-in-out infinite alternate; } @keyframes vtGlowR { from { opacity: .3; } to { opacity: .65; } } .vt-twk { animation: vtTwk 3.5s ease-in-out infinite; } @keyframes vtTwk { 50% { opacity: .15; } } .vt-bird { animation: vtBird 22s linear infinite; } .vt-wing { transform-box: fill-box; transform-origin: center; animation: vtFlap .5s ease-in-out infinite alternate; } @keyframes vtBird { from { transform: translate(-40px, var(--by,20%)) ; } to { transform: translate(calc(100vw + 40px), calc(var(--by,20%) - 30px)); } } .vt-birds { transform: translateY(0); } .vt-bird { translate: 0 0; } @keyframes vtFlap { from { transform: scaleY(1); } to { transform: scaleY(-.5); } } .vt-bob { animation: vtBob 1.3s ease-in-out infinite; } @keyframes vtBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .vt-trav-b { animation: vtWalk .7s ease-in-out infinite; } @keyframes vtWalk { 50% { transform: translateY(-1.5px) rotate(2deg); } } .vt-car use { animation: vtWalk .9s ease-in-out infinite; } .vt-car use:nth-child(2n) { animation-delay: -.45s; } .vt-car { pointer-events: none; transition: opacity .3s; } .vt-stop-sh { fill: rgba(40,30,10,.25); } .vt-stop .vt-dot-rim { fill: #fff; filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,.25)); } .vt-stop .vt-dot { fill: #F7EFDC; stroke: #A88356; stroke-width: 2.5; } .vt-stop.done .vt-dot { fill: #3B3FD8; stroke: #FFD866; stroke-width: 2.5; } .vt-stop.here .vt-dot { fill: #fff; stroke: #3B3FD8; stroke-width: 5; } .vt-stop.next .vt-dot { fill: #FFF6D8; stroke: #E8A400; stroke-width: 4; } .vt-medal { cursor: pointer; } .vt-medal-sh { fill: rgba(40,30,10,.28); } .vt-mark-pin { stroke: #8A6036; stroke-width: 2; } .vt-mark:hover .vt-medal, .vt-mark:focus .vt-medal { filter: brightness(1.06); } .vt-mark-bg { display: none; } g.vt-mark-n text { font: 750 10.5px Inter, sans-serif; fill: #4a3410; stroke: none; } .vt-mark-ban { fill: #FFF8E6; stroke: #D8B66A; stroke-width: 1; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.18)); } .vt-map[data-zoom="far"] g.vt-mark-n { opacity: 0; } .vt-map[data-zoom="far"] .vt-mark .vt-medal { transform: translate(0px, -20px) scale(.6); } .vt-era-bg { fill: rgba(255,250,236,.92); stroke: #CDA95A; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); } .vt-era text { font: 800 13px Inter, sans-serif !important; fill: #5a4216 !important; stroke: none !important; letter-spacing: .4px; } .vt-map[data-zoom="far"] .vt-era { transform-box: fill-box; } .vt-map[data-zoom="far"] .vt-era text { font-size: 14px !important; } .vt-trav-c { fill: #3B3FD8; stroke: #fff; stroke-width: 2; filter: none; } .vt-map .vt-pulse { fill: rgba(59,63,216,.32); } .vt-map .vt-glow { fill: rgba(255,200,40,.6); } .vt-zl { background: rgba(255,250,236,.92) !important; color: #5a4216 !important; } @media (prefers-reduced-motion: reduce) { .vt-waves use, .vt-shim, .vt-flow, .vt-spark, .vt-glowroad, .vt-twk, .vt-bird, .vt-wing, .vt-bob, .vt-trav-b, .vt-car use { animation: none !important; } .vt-birds { display: none; } }  html.p17.v2.vt.vt.vt .pm-wrap{padding-bottom:8px} html.p17.v2.vt.vt.vt .pm-hero{text-align:center;padding:18px 12px 8px;border-radius:20px;background:linear-gradient(160deg,#EEEDFF,#FFFFFF);margin-bottom:12px} html.p17.v2.vt.vt.vt .pm-mark{width:52px;height:52px;margin:0 auto 8px;border-radius:50%;background:#3B3FD8;color:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 6px 18px rgba(59,63,216,.3)} html.p17.v2.vt.vt.vt .pm-hero h3{margin:4px 0;font-size:1.35rem}html.p17.v2.vt.vt.vt .pm-hero p{margin:0;opacity:.75} html.p17.v2.vt.vt.vt .pm-why{background:#EEEDFF;color:#2A2DB0;border-radius:12px;padding:10px 12px;font-size:.92em} html.p17.v2.vt.vt.vt .pm-perks{list-style:none;padding:0;margin:12px 0}html.p17.v2.vt.vt.vt .pm-perks li{display:flex;gap:12px;align-items:flex-start;padding:8px 6px;border-radius:12px} html.p17.v2.vt.vt.vt .pm-perks li.hl{background:#EEEDFF}html.p17.v2.vt.vt.vt .pm-perks small{display:block;opacity:.7} html.p17.v2.vt.vt.vt .pm-ck{flex:none;width:22px;height:22px;border-radius:50%;background:#3B3FD8;color:#fff;display:grid;place-items:center;font-size:12px;margin-top:2px} html.p17.v2.vt.vt.vt .pm-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px} html.p17.v2.vt.vt.vt .pm-plan{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px;border:1.5px solid var(--line,#E2E6DF);border-radius:16px;background:var(--card,#fff);color:inherit;font:inherit;text-align:left;cursor:pointer} html.p17.v2.vt.vt.vt .pm-plan.on{border-color:#3B3FD8;box-shadow:0 0 0 3px rgba(59,63,216,.18)} html.p17.v2.vt.vt.vt .pm-price{font-weight:700;color:#3B3FD8} html.p17.v2.vt.vt.vt .pm-tag{position:absolute;top:-9px;right:10px;font:700 10px Inter,sans-serif;font-style:normal;letter-spacing:.4px;text-transform:uppercase;background:#1E8E3E;color:#fff;border-radius:99px;padding:3px 8px} html.p17.v2.vt.vt.vt .pm-cta{display:block;width:100%;box-sizing:border-box;text-align:center;text-decoration:none;padding:15px;border:0;border-radius:99px;background:#3B3FD8;color:#fff;font:600 1.02rem Inter,sans-serif;cursor:pointer;box-shadow:0 6px 16px rgba(59,63,216,.28);margin-top:6px} html.p17.v2.vt.vt.vt .pm-soon{text-align:center;font-size:.85em;opacity:.7;margin:10px 0} html.p17.v2.vt.vt.vt .pm-soon.pm-pulse{animation:pmp 1.2s ease;opacity:1;color:#2A2DB0}@keyframes pmp{0%{transform:scale(1)}30%{transform:scale(1.05)}100%{transform:scale(1)}} html.p17.v2.vt.vt.vt .pm-links,html.p17.v2.vt.vt.vt .pm-setrow{display:flex;justify-content:center;gap:18px;margin:6px 0} html.p17.v2.vt.vt.vt .pm-link{background:none;border:0;color:#3B3FD8;font:600 .92rem Inter,sans-serif;padding:8px;cursor:pointer} html.p17.v2.vt.vt.vt .pm-sec h3{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin:20px 0 8px} html.p17.v2.vt.vt.vt .pm-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:8px;border:1px solid var(--line,#E2E6DF);border-radius:16px;background:var(--card,#fff)} html.p17.v2.vt.vt.vt .pm-card small{display:block;opacity:.7;font-size:.85em} html.p17.v2.vt.vt.vt .pm-buy{flex:none;border:1.5px solid #3B3FD8;background:none;color:#3B3FD8;border-radius:99px;padding:8px 14px;font:600 .9rem Inter,sans-serif;cursor:pointer} html.p17.v2.vt.vt.vt .pm-owned{color:#1E8E3E;font-weight:600} html.p17.v2.vt.vt.vt .pm-have{padding:14px 16px;border-radius:16px;background:#E6F4EA}html.p17.v2.vt.vt.vt .pm-have small{display:block;opacity:.75} html.p17.v2.vt.vt.vt .pm-tipjar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} html.p17.v2.vt.vt.vt .pm-tip{padding:14px 6px;border:1px solid var(--line,#E2E6DF);border-radius:16px;background:var(--card,#fff);color:inherit;font:inherit;cursor:pointer} html.p17.v2.vt.vt.vt .pm-tip strong{display:block;font-size:1.1rem;color:#3B3FD8}html.p17.v2.vt.vt.vt .pm-tip small{opacity:.7;font-size:.78em} html.p17.v2.vt.vt.vt .pm-tiers{display:grid;gap:12px;margin:8px 0 16px} html.p17.v2.vt.vt.vt .pm-tier{position:relative;padding:16px;border:1px solid var(--line,#E2E6DF);border-radius:18px;background:var(--card,#fff)} html.p17.v2.vt.vt.vt .pm-tier.best{border:1.5px solid #3B3FD8;box-shadow:0 0 0 3px rgba(59,63,216,.12)} html.p17.v2.vt.vt.vt .pm-big{font-size:1.8rem;font-weight:700;color:#3B3FD8;margin-top:4px}html.p17.v2.vt.vt.vt .pm-tier small{opacity:.7} html.p17.v2.vt.vt.vt .pm-tier ul{margin:10px 0 0;padding-left:18px}html.p17.v2.vt.vt.vt .pm-tier li{margin:3px 0} html.p17.v2.vt.vt.vt .pm-input{display:block;width:100%;box-sizing:border-box;padding:14px;border:1.5px solid var(--line,#D5DAD2);border-radius:14px;font:600 1.1rem ui-monospace,Menlo,monospace;letter-spacing:1px;text-align:center;text-transform:uppercase;background:var(--card,#fff);color:inherit;margin-bottom:8px} html.p17.v2.vt.vt.vt .pm-input:focus{outline:none;border-color:#3B3FD8;box-shadow:0 0 0 3px rgba(59,63,216,.18)} html.p17.v2.vt.vt.vt .pm-msg{text-align:center;min-height:1.2em}html.p17.v2.vt.vt.vt .pm-msg.ok{color:#1E8E3E;font-weight:600}html.p17.v2.vt.vt.vt .pm-msg.bad{color:#B06000} html.p17.v2.vt.vt.vt .pm-gated{max-height:9.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)} html.p17.v2.vt.vt.vt .pm-veil{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-6px 0 16px;padding:12px 14px;border-radius:16px;background:#EEEDFF} html.p17.v2.vt.vt.vt .pm-veil-k{font:700 12px Inter,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:#2A2DB0} html.p17.v2.vt.vt.vt .pm-unlock{border:0;border-radius:99px;background:#3B3FD8;color:#fff;padding:9px 14px;font:600 .88rem Inter,sans-serif;cursor:pointer} html.p17.v2.vt.vt.vt .p30-jcard.pm-locked{opacity:.82}html.p17.v2.vt.vt.vt .pm-jlock{display:inline-block;margin-top:6px;font:700 11px Inter,sans-serif;color:#2A2DB0;background:#EEEDFF;border-radius:99px;padding:3px 8px} html.p17.v2.vt.vt.vt .pm-row{margin-top:10px} .pm-toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);opacity:0;transition:.25s;background:#202124;color:#fff;padding:10px 16px;border-radius:99px;font:500 14px Inter,sans-serif;z-index:9999;max-width:86vw;text-align:center}.pm-toast.on{opacity:1;transform:translate(-50%,0)} @media (prefers-color-scheme:dark){html.p17.v2.vt.vt.vt .pm-hero{background:linear-gradient(160deg,#1c2a44,#1B1D1F)}html.p17.v2.vt.vt.vt .pm-why,html.p17.v2.vt.vt.vt .pm-veil,html.p17.v2.vt.vt.vt .pm-perks li.hl,html.p17.v2.vt.vt.vt .pm-jlock{background:#1c2a44;color:#A9A6FF}html.p17.v2.vt.vt.vt .pm-have{background:#1d3324}} html.p17.v2.vt.vt.vt .pm-plans.pm-one{grid-template-columns:1fr;margin:10px 0 8px}html.p17.v2.vt.vt.vt .pm-one .pm-plan{flex-direction:row;justify-content:space-between;align-items:center}html.p17.v2.vt.vt.vt .pm-hero{padding:12px 10px 6px}html.p17.v2.vt.vt.vt .pm-mark{width:40px;height:40px;font-size:18px;margin-bottom:4px}  html.p17.v2.vt.vt.vt .vt-tl{width:100vw;margin:0 0 18px calc(50% - 50vw);background:linear-gradient(#FFFFFF,#EEEDFF);padding:20px 0 28px;overflow:hidden} html.p17.v2.vt.vt.vt .vt-tl-head{padding:0 20px 14px} html.p17.v2.vt.vt.vt .vt-tl-k{font:700 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#3B3FD8} html.p17.v2.vt.vt.vt .vt-tl-h{font:700 26px/1.15 Inter,sans-serif;margin:4px 0 2px;color:#202124} html.p17.v2.vt.vt.vt .vt-tl-sub{margin:0 0 10px;color:#5F6368;font-size:14px} html.p17.v2.vt.vt.vt .vt-tl-bar{height:6px;border-radius:9px;background:#E4E2FF;overflow:hidden}html.p17.v2.vt.vt.vt .vt-tl-bar i{display:block;height:100%;background:#3B3FD8;border-radius:9px} html.p17.v2.vt.vt.vt .vt-tl-list{list-style:none;margin:0;padding:6px 0 0;position:relative} html.p17.v2.vt.vt.vt .vt-tl-rail{position:absolute;left:27px;top:0;bottom:0;width:4px;background:#E4E2FF;border-radius:4px} html.p17.v2.vt.vt.vt .vt-tl-railfill{display:block;width:100%;background:linear-gradient(#A9A6FF,#3B3FD8);border-radius:4px;transition:height .3s} html.p17.v2.vt.vt.vt .vt-tl-stop{position:relative;padding:0 0 22px 0;opacity:0;transform:translateY(36px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)} html.p17.v2.vt.vt.vt .vt-tl-stop.in{opacity:1;transform:none} html.p17.v2.vt.vt.vt .vt-tl-dot{position:absolute;left:14px;top:14px;z-index:2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13px Inter,sans-serif;background:#fff;color:#5F6368;border:3px solid #E4E2FF} html.p17.v2.vt.vt.vt .vt-tl-stop.done .vt-tl-dot{background:#3B3FD8;border-color:#3B3FD8;color:#fff} html.p17.v2.vt.vt.vt .vt-tl-stop.current .vt-tl-dot{background:#fff;border-color:#3B3FD8;color:#3B3FD8;box-shadow:0 0 0 6px rgba(59,63,216,.22),0 0 18px rgba(59,63,216,.6);animation:vtglow 2s ease-in-out infinite} @keyframes vtglow{50%{box-shadow:0 0 0 11px rgba(59,63,216,.12),0 0 26px rgba(59,63,216,.7)}} html.p17.v2.vt.vt.vt .vt-tl-card{display:block;width:100%;padding:0;border:0;background:#fff;text-align:left;cursor:pointer;overflow:hidden;box-shadow:0 2px 14px rgba(42,45,176,.12);font:inherit;color:inherit} html.p17.v2.vt.vt.vt .vt-tl-art{height:200px;overflow:hidden;position:relative}html.p17.v2.vt.vt.vt .vt-tl-svg{width:100%;height:100%;display:block} html.p17.v2.vt.vt.vt .vt-tl-art::after{content:"";position:absolute;inset:auto 0 0;height:50px;background:linear-gradient(transparent,rgba(255,255,255,.9))} html.p17.v2.vt.vt.vt .vt-tl-body{padding:4px 20px 16px 58px;display:grid;gap:3px} html.p17.v2.vt.vt.vt .vt-tl-era{font:700 11px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#3B3FD8} html.p17.v2.vt.vt.vt .vt-tl-title{font:700 20px/1.2 Inter,sans-serif;color:#202124} html.p17.v2.vt.vt.vt .vt-tl-hook{margin:0;color:#3C4043;font-size:15px;line-height:1.4} html.p17.v2.vt.vt.vt .vt-tl-ref{font:600 13px Inter,sans-serif;color:#2A2DB0} html.p17.v2.vt.vt.vt .vt-tl-stop.upcoming .vt-tl-card{opacity:.55;filter:saturate(.55)} html.p17.v2.vt.vt.vt .vt-tl-stop.done .vt-tl-ref::before{content:"✓ Done · ";color:#3B3FD8} html.p17.v2.vt.vt.vt .vt-tl-stop.current .vt-tl-card{box-shadow:0 0 0 3px #3B3FD8,0 8px 30px rgba(59,63,216,.35)} html.p17.v2.vt.vt.vt .vt-tl-go{display:block;margin:12px 20px 0 58px;width:calc(100% - 78px);min-height:48px;border:0;border-radius:24px!important;background:#3B3FD8;color:#fff;font:700 16px Inter,sans-serif;box-shadow:0 4px 14px rgba(59,63,216,.4);cursor:pointer} html.p17.v2.vt.vt.vt .vt-tl-j{padding:8px 20px 0;display:grid;gap:10px}html.p17.v2.vt.vt.vt .vt-tl-jh{margin:0;font:700 18px Inter,sans-serif;color:#202124} html.p17.v2.vt.vt.vt .vt-tl-jcard{display:grid;gap:2px;padding:14px 16px;border-radius:16px;background:#fff;text-decoration:none;color:#202124;box-shadow:0 1px 6px rgba(42,45,176,.1)}html.p17.v2.vt.vt.vt .vt-tl-jcard small{color:#5F6368} html.p17.v2.vt.vt.vt{scroll-behavior:smooth;-webkit-overflow-scrolling:touch} @media (prefers-reduced-motion:reduce){html.p17.v2.vt.vt.vt .vt-tl-stop{opacity:1;transform:none;transition:none}html.p17.v2.vt.vt.vt .vt-tl-stop.current .vt-tl-dot{animation:none}}  html.p17.v2.vt.vt.vt .vt-hero{position:relative;width:100vw;margin:-16px 0 16px calc(50% - 50vw);height:calc(100svh - 72px);min-height:600px;overflow:hidden;color:#fff;isolation:isolate} html.p17.v2.vt.vt.vt .vt-hero-art{position:absolute;inset:0;z-index:-2}html.p17.v2.vt.vt.vt .vt-hero-art svg{width:100%;height:100%;display:block} html.p17.v2.vt.vt.vt .vt-hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(11,30,74,.62),rgba(11,30,74,.1) 38%,rgba(11,30,74,.25) 55%,rgba(11,30,74,.8))} html.p17.v2.vt.vt.vt .vt-hero-top{position:absolute;top:16px;left:20px;right:20px;display:flex;justify-content:space-between} html.p17.v2.vt.vt.vt .vt-pill{background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:7px 13px;font:600 13px Inter,sans-serif;color:#fff} html.p17.v2.vt.vt.vt .vt-hero-k{position:absolute;top:70px;left:24px;right:24px;font:700 12px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.9} html.p17.v2.vt.vt.vt .vt-hero-h{position:absolute;top:92px;left:24px;right:24px;margin:0;font:700 42px/1.04 Georgia,"New York",serif;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.3)} html.p17.v2.vt.vt.vt .vt-hero-q{position:absolute;bottom:236px;left:24px;right:24px;margin:0;font:400 20px/1.35 Georgia,serif;text-shadow:0 2px 12px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} html.p17.v2.vt.vt.vt .vt-hero-q small{display:block;font:500 12px Inter,sans-serif;letter-spacing:.06em;opacity:.8;margin-top:8px} html.p17.v2.vt.vt.vt .vt-hero-cta{position:absolute;bottom:142px;left:24px;right:24px;height:64px;border:0;border-radius:32px!important;background:#fff;color:#0B1E4A;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 26px;font:700 18px Inter,sans-serif;box-shadow:0 18px 40px rgba(59,63,216,.45);cursor:pointer} html.p17.v2.vt.vt.vt .vt-hero-cta b{width:48px;height:48px;border-radius:50%;background:#3B3FD8;color:#fff;display:grid;place-items:center;font-size:22px} html.p17.v2.vt.vt.vt .vt-hero-chips{position:absolute;bottom:34px;left:0;right:0;display:flex;gap:10px;padding:0 24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}html.p17.v2.vt.vt.vt .vt-hero-chips::-webkit-scrollbar{display:none} html.p17.v2.vt.vt.vt .vt-hc{flex:0 0 230px;scroll-snap-align:start;text-align:left;padding:12px 16px;border-radius:20px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.25);color:#fff;font:400 13px/1.35 Inter,sans-serif;display:grid;gap:3px;cursor:pointer} html.p17.v2.vt.vt.vt .vt-hc i{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;font-weight:700}html.p17.v2.vt.vt.vt .vt-hc em{font-style:normal;font-weight:700;font-size:12px;color:#AECBFA} html.p17.v2.vt.vt.vt .vt-hero-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:6px}html.p17.v2.vt.vt.vt .vt-hero-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45)}html.p17.v2.vt.vt.vt .vt-hero-dots i.on{background:#fff}  html.p17.v2.vt.vt.vt .vt-jr{position:fixed;inset:0;z-index:900;overflow-y:auto;background:#FFFFFF;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth} html.p17.v2.vt.vt.vt .vt-jr .vt-tl{width:100%;margin:0} html.p17.v2.vt.vt.vt .vt-jr-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(246,248,244,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid #E4E2FF} html.p17.v2.vt.vt.vt .vt-jr-back{border:0;background:#EEEDFF;color:#2A2DB0;font:700 14px Inter,sans-serif;border-radius:18px;padding:8px 14px;cursor:pointer}html.p17.v2.vt.vt.vt .vt-jr-bar strong{font:700 17px Inter,sans-serif;color:#202124} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero{position:relative;z-index:3;background:transparent!important;box-shadow:none!important;border:0!important} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-greet{font-size:0;line-height:0;margin:6px 0 0} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-greet .p17-name{display:none} html.p17.v2.vt.vt.vt.vt-timeline #p27-streak{display:inline-block;font:600 13px Inter,sans-serif;letter-spacing:0;text-transform:none;line-height:1.2;color:#fff;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:7px 13px;margin:0} html.p17.v2.vt.vt.vt.vt-timeline #p27-streak::before{content:"🔥 "} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero button,html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero .p17-logo{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero svg{color:#fff;stroke:currentColor} html.p17.v2.vt.vt.vt .vt-hero-top{top:auto;bottom:auto;top:150px;left:auto;right:20px} html.p17.v2.vt.vt.vt .vt-hero-k{top:200px}html.p17.v2.vt.vt.vt .vt-hero-h{top:222px} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx,html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .p12-hello{background:transparent!important;box-shadow:none!important;border:0!important} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-greet{font-size:0!important;line-height:0!important} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-greet .p27-streak{font-size:13px!important;line-height:1.2!important} html.p17.v2.vt.vt.vt .vt-hero-top{top:118px}html.p17.v2.vt.vt.vt .vt-hero-k{top:170px}html.p17.v2.vt.vt.vt .vt-hero-h{top:192px} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero,html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero *{pointer-events:none} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero button,html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero a,html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero button *{pointer-events:auto} html.p17.v2.vt.vt.vt .vt-hc{border-radius:20px!important}html.p17.v2.vt.vt.vt .vt-pill{border-radius:20px!important} html.p17.v2.vt.vt.vt .vt-hero[data-scene=garden] .vt-hero-shade{background:linear-gradient(rgba(7,20,51,.55),rgba(7,20,51,0) 30%,rgba(7,20,51,0) 58%,rgba(7,20,51,.75))} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero .p17-logo{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;color:#fff} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero .p17-logo b{color:#fff!important;background:transparent!important} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero button{border-radius:20px!important;border:1px solid rgba(255,255,255,.3)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} html.p17.v2.vt.vt.vt.vt-timeline #v2-home-view .hx-hero .p26-mast-search{width:40px;height:40px;padding:0;display:inline-grid;place-items:center}
/* v2-p28.css */
#v2-home-view .cl-art{margin-left:0!important;margin-right:0!important;width:auto!important;border-radius:20px!important;overflow:hidden!important} #v2-home-view .p27-more-b>*{box-sizing:border-box!important;margin-left:0!important;margin-right:0!important;max-width:100%!important} #v2-home-view .hx-pick{border:1px solid rgba(120,120,160,.2)!important;border-radius:16px!important} #v2-home-view .p16-choose,#v2-home-view .p17-tl,#v2-home-view .p19-homecard,#v2-home-view .p25-banner{box-sizing:border-box!important;width:100%!important;margin-left:0!important;margin-right:0!important;border-radius:16px!important;padding-left:18px!important;padding-right:18px!important} #v2-home-view .p12-votd{box-sizing:border-box!important;width:auto!important;margin-left:0!important;margin-right:0!important;padding:18px!important;border:1px solid rgba(120,120,160,.2)!important;border-radius:16px!important} #v2-home-view .p26-devo{box-sizing:border-box!important;border:1px solid rgba(120,120,160,.2)!important;border-radius:16px!important;padding:18px!important} #v2-home-view .p26-devo>*{margin-left:0!important;margin-right:0!important} #v2-home-view .hx-minigrid>*{border-radius:16px!important} #v2-home-view .p17-tl *{min-width:0!important} #v2-home-view .p17-tl span,#v2-home-view .p17-tl small{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #v2-home-view .hx-minigrid>*{border:1px solid rgba(120,120,160,.2)!important;box-shadow:none!important}  html:not(.p27-full) body #v2-tabs.v2-tabs{z-index:900!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;transform:none!important;opacity:1!important;visibility:visible!important;display:flex!important;background:var(--p28-tabbg,#fff)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding-bottom:env(safe-area-inset-bottom)!important;box-sizing:content-box!important} html.ia2-reader body{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important} html.ia2-reader #v2-study-fab,html.ia2-reader .p2-fab{bottom:calc(84px + env(safe-area-inset-bottom))!important}  .p19-myth summary strong{text-decoration:none!important;color:inherit!important} .p19-myth .p19-k.p19-red{display:inline-block!important;padding:3px 9px!important;border-radius:999px!important;background:#F1F1F6!important;color:#5d5f78!important;font:700 11px/1.2 Inter,system-ui,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase!important;margin-bottom:6px!important;border:0!important}  html.ia2-reader body,html.p18-on body{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important} html body #p18-chooser.p18{bottom:0!important;z-index:880!important} html.p18-on body #v2-tabs.v2-tabs{display:flex!important;visibility:visible!important;opacity:1!important;transform:none!important} .p18 .p18-in{padding-bottom:calc(100px + env(safe-area-inset-bottom))!important}  .p18 .p18-book.hx-ch-book:hover,.p18 .p18-book.hx-ch-book:active,.p18 .p18-book.hx-ch-book:focus,.p18 .p18-book:hover,.p18 .p18-book:active,.p18 .p18-book[aria-current],.p18 .p18-book.on{background:#EEEDFB!important;color:#15172b!important} .p18 .p18-book:hover *,.p18 .p18-book:active *,.p18 .p18-book[aria-current] *,.p18 .p18-book.on *{color:#15172b!important} .p18 .p18-book:hover .p18-ab,.p18 .p18-book:active .p18-ab,.p18 .p18-book[aria-current] .p18-ab,.p18 .p18-book.on .p18-ab{color:#3B3FD8!important} @media (hover:none){.p18 .p18-book:hover,.p18 .p18-book.hx-ch-book:hover{background:none!important}}  .p18 .p18-cont{gap:16px!important}.p18 .p18-cont .p18-num{flex:none!important;min-width:2.2ch;margin-right:4px;letter-spacing:-.02em!important;text-align:center} .p18 .p18-cont>span:nth-child(2){min-width:0}.p18 .p18-cont strong{overflow-wrap:anywhere} .p18 .p18-cont .p18-num{display:none!important} html body #p18-chooser.p18{bottom:0!important} .p25-banner .p25-ref{display:inline;border:0;background:none;padding:0;margin:0;font:inherit;color:#3B3FD8;font-weight:600;text-decoration:underline;text-decoration-color:rgba(59,63,216,.35);text-underline-offset:3px;cursor:pointer} html.p18-on #v2-home-view{visibility:hidden!important}  html.p18-on.p18-on.p18-on body #v2-tabs#v2-tabs button[aria-current=page]:not([data-v2tab=read]),html.p18-on.p18-on.p18-on body #v2-tabs#v2-tabs button[aria-current=page]:not([data-v2tab=read]) *{color:#a3a5bb!important} html.p18-on.p18-on.p18-on body #v2-tabs#v2-tabs button[aria-current=page]:not([data-v2tab=read]) svg{background:transparent!important} html.p18-on.p18-on.p18-on body #v2-tabs#v2-tabs button[data-v2tab=read],html.p18-on.p18-on.p18-on body #v2-tabs#v2-tabs button[data-v2tab=read] *{color:#3B3FD8!important} html.p18-on.p18-on.p18-on body #v2-tabs#v2-tabs button[data-v2tab=read] svg{background:#D3E3FD!important}  #v2-sheet.p13-herosheet:has(.otp) .p13-back{top:74px!important;z-index:31!important} #v2-sheet.p13-herosheet .p13-phero~*{position:relative;z-index:1}  html #v2-sheet,html #v2-sheet.open,html.v2.p13 #v2-sheet.open,html #v2-sheet.p13-herosheet{animation:none!important;transition:opacity .15s linear!important} html #v2-sheet.open:not([style*="translateY"]){transform:none!important}html #v2-sheet.open{opacity:1!important} html .v2-sheet-scrim{animation:none!important;transition:opacity .15s linear!important} html .v2-sheet-scrim.open{opacity:1!important}  html #v2-sheet.p13-herosheet:has(.otp){padding-top:52px!important;box-sizing:border-box!important;flex-direction:column} html #v2-sheet.p13-herosheet:has(.otp) #v2-sheet-body{flex:1 1 auto;min-height:0;height:auto!important;max-height:none!important} html #v2-sheet.p13-herosheet:has(.otp) .v2-grab{top:10px!important;z-index:40!important} html #v2-sheet.p13-herosheet:has(.otp) .p13-back{position:absolute!important;top:4px!important;left:20px!important;z-index:40!important;width:44px;height:44px;background:#fff!important;border:0!important;box-shadow:none!important;transform:none!important} html #v2-sheet.p13-herosheet .otp{top:0!important} html #v2-sheet.p13-herosheet .otp-row{scroll-padding-inline:16px;padding-inline:2px} html #v2-sheet.p13-herosheet .v2-pc-hero{box-shadow:none!important;outline:0!important;margin-top:14px!important;border-radius:0!important} html #v2-sheet.p13-herosheet .p13-phero{margin-bottom:0!important}  html #v2-sheet.p13-herosheet{padding-top:52px!important;box-sizing:border-box!important;flex-direction:column} html #v2-sheet.p13-herosheet #v2-sheet-body{flex:1 1 auto;min-height:0;height:auto!important;max-height:none!important} html #v2-sheet.p13-herosheet .v2-grab{top:10px!important;z-index:40!important} html #v2-sheet.p13-herosheet .p13-back{position:absolute!important;top:4px!important;left:20px!important;z-index:40!important;width:44px;height:44px;background:#fff!important;border:0!important;box-shadow:none!important;transform:none!important} html #v2-sheet.p13-herosheet .v2-portrait-note,html #v2-sheet.p13-herosheet h3,html #v2-sheet.p13-herosheet .v2-appear,html #v2-sheet.p13-herosheet section{box-shadow:none!important} .v2-app-retry{border:1px solid #d9dae8;background:#fff;color:#3B3FD8;font:600 15px Inter,-apple-system,system-ui,sans-serif;border-radius:12px;padding:12px 16px;margin-top:6px;cursor:pointer}
/* welcome-fix.css */
html #cl-welcome#cl-welcome.cl{position:fixed!important;inset:0!important;height:100vh!important;height:100dvh!important;max-height:100dvh!important;box-sizing:border-box!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none!important;-ms-overflow-style:none;padding:calc(12px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px))!important} html #cl-welcome#cl-welcome.cl::-webkit-scrollbar{display:none!important;width:0!important;height:0!important} html #cl-welcome#cl-welcome.cl>*{flex-shrink:0} html #cl-welcome#cl-welcome.cl .cl-art{flex:1 1 auto!important;min-height:220px!important;max-height:420px;overflow:hidden!important;margin:0 -24px!important} html #cl-welcome#cl-welcome.cl h1{font-size:clamp(28px,8.6vw,38px)!important;margin:6px 0 16px!important} html #cl-welcome#cl-welcome.cl #tour-wel{margin-top:6px} @media (max-height:760px){html #cl-welcome#cl-welcome.cl .cl-art{zoom:.78;min-height:200px!important}html #cl-welcome#cl-welcome.cl .cl-pill{height:50px!important}html #cl-welcome#cl-welcome.cl h1{margin:4px 0 12px!important}} @media (max-height:680px){html #cl-welcome#cl-welcome.cl .cl-art{zoom:.62;min-height:240px!important}html #cl-welcome#cl-welcome.cl h1{font-size:28px!important}html #cl-welcome#cl-welcome.cl .cl-logo img{width:28px;height:28px}}  html #p13-welcome#p13-welcome{z-index:2147482000!important;background:#fff!important;background-image:none!important;color:#15172b!important;scrollbar-width:none;overflow-x:hidden!important} html #p13-welcome#p13-welcome::-webkit-scrollbar{display:none} html #p13-welcome#p13-welcome .p13-wel-sheet{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))!important} html #p13-welcome#p13-welcome .p13-catalog{color:#3b3fd8!important} html #p13-welcome#p13-welcome .p13-wel-t{color:#15172b!important} html #p13-welcome#p13-welcome .p13-wel-t::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:#3b3fd8;margin:12px auto 0} html #p13-welcome#p13-welcome .p13-wel-s,html #p13-welcome#p13-welcome .p13-fine,html #p13-welcome#p13-welcome .p13-or,html #p13-welcome#p13-welcome .p13-or span{color:#4b4e66!important} html #p13-welcome#p13-welcome .p13-or::before,html #p13-welcome#p13-welcome .p13-or::after{background:#d9dae6!important} html #p13-welcome#p13-welcome .p25-wel,html #p13-welcome#p13-welcome .p13-msg{color:#15172b!important} html #p13-welcome#p13-welcome #p13-go-signin{background:#3b3fd8!important;color:#fff!important;border:2px solid #3b3fd8!important;box-shadow:0 8px 20px rgba(59,63,216,.25)!important} html #p13-welcome#p13-welcome #p13-go-create{background:#fff!important;color:#3b3fd8!important;border:2px solid #3b3fd8!important;box-shadow:none!important} html #p13-welcome#p13-welcome .hm-card{background:#f4f4fb!important;color:#15172b!important;border:1px solid #e3e3f0!important;box-shadow:none!important} html #p13-welcome#p13-welcome .hm-card *{color:#15172b!important} html #p13-welcome#p13-welcome .hm-card button{color:#3b3fd8!important} html #p13-welcome#p13-welcome .p13-sso{background:#fff!important;color:#1f1f1f!important;border:1px solid #747775!important;box-shadow:none!important} html #p13-welcome#p13-welcome .p13-guest{color:#3b3fd8!important} html #p13-welcome#p13-welcome .p13-wel-logo{filter:none!important}  html[data-theme="dark"] #p13-welcome#p13-welcome{background:#0f172a!important;color:#f1f5f9!important} html[data-theme="dark"] #p13-welcome#p13-welcome .p13-catalog,html[data-theme="dark"] #p13-welcome#p13-welcome .p13-guest,html[data-theme="dark"] #p13-welcome#p13-welcome .hm-card button{color:#a5b4fc!important} html[data-theme="dark"] #p13-welcome#p13-welcome .p13-wel-t,html[data-theme="dark"] #p13-welcome#p13-welcome .p25-wel,html[data-theme="dark"] #p13-welcome#p13-welcome .p13-msg{color:#f1f5f9!important} html[data-theme="dark"] #p13-welcome#p13-welcome .p13-wel-t::after{background:#818cf8} html[data-theme="dark"] #p13-welcome#p13-welcome .p13-wel-s,html[data-theme="dark"] #p13-welcome#p13-welcome .p13-fine,html[data-theme="dark"] #p13-welcome#p13-welcome .p13-or,html[data-theme="dark"] #p13-welcome#p13-welcome .p13-or span{color:#cbd5e1!important} html[data-theme="dark"] #p13-welcome#p13-welcome .p13-or::before,html[data-theme="dark"] #p13-welcome#p13-welcome .p13-or::after{background:#334155!important} html[data-theme="dark"] #p13-welcome#p13-welcome #p13-go-signin{background:#4f46e5!important;border-color:#4f46e5!important;box-shadow:none!important} html[data-theme="dark"] #p13-welcome#p13-welcome #p13-go-create{background:transparent!important;color:#c7d2fe!important;border-color:#818cf8!important} html[data-theme="dark"] #p13-welcome#p13-welcome .hm-card{background:#1e293b!important;border-color:#334155!important;color:#f1f5f9!important} html[data-theme="dark"] #p13-welcome#p13-welcome .hm-card *{color:#f1f5f9!important} html[data-theme="dark"] #p13-welcome#p13-welcome .hm-card button{color:#a5b4fc!important} html[data-theme="dark"] #p13-welcome#p13-welcome .p13-sso{background:#fff!important;color:#1f1f1f!important;border-color:#8e918f!important} html[data-theme="dark"] #p13-welcome#p13-welcome .p13-wel-logo{filter:invert(1)!important}  .sc-ref{border:0;background:none;padding:6px 0;font:inherit;color:#3b3fd8;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left} html[data-theme="dark"] .sc-ref{color:#a5b4fc!important;background:none!important}  html[data-theme="dark"] .v2-book-grid button,html[data-theme="dark"] .v2-grid button,html[data-theme="dark"] .v2-books button{-webkit-tap-highlight-color:rgba(129,140,248,.25)!important} html[data-theme="dark"] .v2-book-grid button:active,html[data-theme="dark"] .v2-grid button:active,html[data-theme="dark"] .v2-books button:active, html[data-theme="dark"] .v2-book-grid button:focus,html[data-theme="dark"] .v2-grid button:focus,html[data-theme="dark"] .v2-books button:focus, html[data-theme="dark"] .v2-book-grid button.on,html[data-theme="dark"] .v2-grid button.on,html[data-theme="dark"] .v2-books button.on, html[data-theme="dark"] .v2-book-grid button[aria-selected=true],html[data-theme="dark"] .v2-book-grid button[aria-pressed=true],html[data-theme="dark"] .v2-grid button[aria-pressed=true]{background:#312e81!important;background-color:#312e81!important;color:#eef2ff!important;border:1px solid #818cf8!important;box-shadow:none!important;outline:none} html[data-theme="dark"] .v2-book-grid button:focus-visible,html[data-theme="dark"] .v2-grid button:focus-visible{outline:2px solid #a5b4fc!important;outline-offset:2px} html[data-theme="dark"] body .v2-chapters button.v2-ov-open,html[data-theme="dark"] body .v2-chapters button.v2-ov-open:active,html[data-theme="dark"] body .v2-chapters button.v2-ov-open:focus{background:#312e81!important;background-color:#312e81!important;color:#eef2ff!important;border:1px solid #818cf8!important} html:not([data-theme="dark"]) .v2-ov-open{background:#eef0ff!important;color:#3b3fd8!important;border:1px solid #3b3fd8!important} .lsf-ov .lsf-top{position:sticky!important;top:0;z-index:5;background:inherit}
/* ls-today.css */
#rc-band.p33-band,.p33-band.p33-band-t,html[data-theme] #rc-band.p33-band,html[data-theme] body .p33-band.p33-band-t,html[data-theme=dark] body .p33-band.p33-band-t{background:transparent!important;padding:0!important;border-radius:0!important;box-shadow:none!important} #rc-band .p33-h,.p33-band-t .p33-h{margin:0 4px 10px!important;font:600 13px/1.3 Inter,-apple-system,system-ui,sans-serif!important;color:#6A6C85!important;letter-spacing:.01em;text-transform:none} #rc-band .p33-h b{color:#14162B;font-weight:600} .p33-band-t .p33-h{font:700 17px/1.3 Inter,-apple-system,system-ui,sans-serif!important;color:#14162B!important;margin-bottom:12px!important} #rc-band.lt-rows .rc-sub{display:none} #rc-band .rc-grid,.p33-band-t .p33-tiles{display:block!important;background:#fff!important;border:1px solid #E4E6EF!important;border-radius:16px!important;overflow:hidden;padding:0!important;gap:0!important} #rc-band .rc-c,.p33-band-t .p33-tile{position:relative!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:14px!important;width:100%!important;min-height:64px;aspect-ratio:auto!important;margin:0!important;padding:12px 40px 12px 14px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-align:left!important;color:#14162B!important;text-decoration:none!important;overflow:visible!important;-webkit-tap-highlight-color:transparent;font-family:Inter,-apple-system,system-ui,sans-serif} #rc-band .rc-c:active,.p33-band-t .p33-tile:active{background:rgba(59,63,216,.06)!important} #rc-band .rc-c img,.p33-band-t .p33-tile img{display:none!important} #rc-band .rc-c+.rc-c::before,.p33-band-t .p33-tile+.p33-tile::before{content:"";position:absolute;left:66px;right:0;top:0;border-top:1px solid #E4E6EF} #rc-band .rc-c::after,.p33-band-t .p33-tile::after{content:""!important;position:absolute!important;inset:auto!important;right:18px!important;top:50%!important;width:8px!important;height:8px!important;margin-top:-4px;border-right:2px solid #A3A6B8;border-top:2px solid #A3A6B8;transform:rotate(45deg);background:none!important} #rc-band .rc-c>span:not(.lt-ic){display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;padding:0!important;min-width:0;flex:1} #rc-band .rc-c b{order:1;margin:0!important;font:600 16px/1.3 Inter,-apple-system,system-ui,sans-serif!important;display:block!important;-webkit-line-clamp:unset!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#14162B!important} #rc-band .rc-c small{order:2;font:700 10px/1.2 Inter,-apple-system,system-ui,sans-serif!important;letter-spacing:.09em!important;text-transform:uppercase;color:#3B3FD8!important;white-space:nowrap} #rc-band .rc-c i{order:3;flex-basis:100%;font:400 13.5px/1.35 Inter,-apple-system,system-ui,sans-serif!important;font-style:normal!important;color:#6A6C85!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block!important;-webkit-line-clamp:unset!important} #rc-band .rc-c.ext b::after{content:" \2197";color:#3B3FD8} .p33-band-t .p33-tile b{position:static!important;display:block;font:600 16px/1.3 Inter,-apple-system,system-ui,sans-serif!important;color:#14162B!important;text-shadow:none!important} .p33-band-t .p33-tile .lt-tx{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px} .p33-band-t .p33-tile .lt-s{display:block;font:400 13.5px/1.35 Inter,-apple-system,system-ui,sans-serif;font-style:normal;color:#6A6C85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lt-ic.ls-coll,html[data-theme=dark] .lt-ic.ls-coll{flex:none;width:38px;height:38px;margin:0!important;padding:0!important;border:0!important;border-radius:11px!important;background:rgba(59,63,216,.10)!important;display:grid!important;place-items:center;max-width:none} .lt-ic svg{width:21px;height:21px;fill:none;stroke:#3B3FD8;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}  html[data-theme=dark] #rc-band .p33-h{color:#9AA1AD!important}html[data-theme=dark] #rc-band .p33-h b{color:#ECEEF3} html[data-theme=dark] .p33-band-t .p33-h{color:#ECEEF3!important} html[data-theme=dark] #rc-band .rc-grid,html[data-theme=dark] .p33-band-t .p33-tiles{background:#1a1d24!important;border-color:#2c303a!important} html[data-theme=dark] #rc-band .rc-c,html[data-theme=dark] .p33-band-t .p33-tile{color:#ECEEF3!important;background:transparent!important} html[data-theme=dark] #rc-band .rc-c+.rc-c::before,html[data-theme=dark] .p33-band-t .p33-tile+.p33-tile::before{border-top-color:#2c303a} html[data-theme=dark] #rc-band .rc-c b,html[data-theme=dark] .p33-band-t .p33-tile b{color:#ECEEF3!important} html[data-theme=dark] #rc-band .rc-c small{color:#A5A8FF!important} html[data-theme=dark] #rc-band .rc-c i,html[data-theme=dark] .p33-band-t .p33-tile .lt-s{color:#9AA1AD!important} html[data-theme=dark] .lt-ic.ls-coll{background:rgba(165,168,255,.14)!important} html[data-theme=dark] .lt-ic svg{stroke:#A5A8FF} html[data-theme=dark] #rc-band .rc-c::after,html[data-theme=dark] .p33-band-t .p33-tile::after{border-color:#6B7080} html[data-theme=dark] #rc-band .rc-c:active,html[data-theme=dark] .p33-band-t .p33-tile:active{background:rgba(165,168,255,.08)!important}  #rc-band .rc-c.lt-x i{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2!important;line-clamp:2;overflow:hidden} #rc-band .rc-c.lt-x i::before{content:"Why: ";font-weight:700;color:#3B3FD8} #rc-band .rc-c .lt-m{order:4;flex-basis:100%;font:500 11.5px/1.3 Inter,-apple-system,system-ui,sans-serif;font-style:normal;color:#8A8CA3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em} html[data-theme=dark] #rc-band .rc-c.lt-x i::before{color:#A5A8FF} html[data-theme=dark] #rc-band .rc-c .lt-m{color:#7D8494!important}
/* ls-review.css */
html:not([data-theme=dark]) #p23-bar.p23-bar{border:1px solid #E4E6EF!important;border-radius:14px!important;overflow:hidden} html[data-theme=dark] #p23-bar.p23-bar{border-width:1px!important;border-radius:14px!important;overflow:hidden} #p23-bar .p23-btn{border-top:0!important;border-right:0!important;border-bottom:0!important;border-radius:0!important} html:not([data-theme=dark]) #p23-bar .p23-btn+.p23-btn{border-left:1px solid #E4E6EF!important}  .p11-badge.done,html[data-theme] .p11-badge.done{background:rgba(59,63,216,.10)!important;color:#3B3FD8!important;border-color:transparent!important} html[data-theme=dark] .p11-badge.done{background:rgba(165,168,255,.16)!important;color:#C9CBFF!important}  #people-order{-webkit-appearance:none;appearance:none;padding-right:34px!important;border-radius:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B3FD8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:16px!important} html[data-theme=dark] #people-order{background-color:#22252d!important;color:#ECEEF3!important;border:1px solid #2c303a!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5A8FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important}  label.p27-row.p31-fam{display:grid!important;grid-template-columns:1fr auto;column-gap:14px;align-items:center} label.p31-fam>strong{grid-column:1;grid-row:1}label.p31-fam>small{grid-column:1;grid-row:2} label.p31-fam>input{grid-column:2;grid-row:1/span 2;margin:0!important;width:22px;height:22px;accent-color:#3B3FD8}  .p32-hd .p32-st{display:none!important}  .p32-hd .tb.tb-in.lr-in-hd{order:11;flex:1 0 100%;margin:14px 0 0!important}  .p32-hd>.lr-card.ls-coll{order:10;flex:1 0 100%;margin:14px 0 0!important}.p32-hd>#lr-trial.ls-coll{order:9;margin:0 0 4px!important} .lr-card.ls-coll{display:block;margin:0 0 16px!important;padding:0!important;border:1px solid #E4E6EF!important;border-radius:16px!important;background:#fff!important;overflow:hidden;max-width:none} .lr-row{-webkit-appearance:none;appearance:none;display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:12px 14px;border:0;background:transparent;text-align:left;font-family:Inter,-apple-system,system-ui,sans-serif;color:#14162B;cursor:pointer;-webkit-tap-highlight-color:transparent} .lr-row:active{background:rgba(59,63,216,.06)} .lr-ic{flex:none;width:38px;height:38px;border-radius:11px;background:rgba(59,63,216,.10);display:grid;place-items:center} .lr-ic svg{width:21px;height:21px;fill:none;stroke:#3B3FD8;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .lr-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .lr-tx b{font:600 16px/1.3 Inter,-apple-system,system-ui,sans-serif;color:#14162B} .lr-tx i{font:400 13.5px/1.35 Inter,-apple-system,system-ui,sans-serif;font-style:normal;color:#6A6C85} .lr-wk{flex:none;display:flex;gap:5px} .lr-d{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 9.5px/1 Inter,system-ui,sans-serif;color:#9A9CB3} .lr-d s{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid #C9CBDA;text-decoration:none} .lr-d.on s{background:#3B3FD8;border-color:#3B3FD8}.lr-d.now{color:#3B3FD8}.lr-d.now s{border-color:#3B3FD8} .lr-trial b{color:#14162B}.lr-trial .lr-go{flex:none;font:600 13px Inter,system-ui,sans-serif;color:#3B3FD8} html[data-theme=dark] .lr-card.ls-coll{background:#1a1d24!important;border-color:#2c303a!important} html[data-theme=dark] .lr-row{color:#ECEEF3}html[data-theme=dark] .lr-tx b{color:#ECEEF3}html[data-theme=dark] .lr-tx i{color:#9AA1AD} html[data-theme=dark] .lr-ic{background:rgba(165,168,255,.14)}html[data-theme=dark] .lr-ic svg{stroke:#A5A8FF} html[data-theme=dark] .lr-d{color:#6B7080}html[data-theme=dark] .lr-d s{border-color:#4a4f60} html[data-theme=dark] .lr-d.on s{background:#A5A8FF;border-color:#A5A8FF}html[data-theme=dark] .lr-d.now{color:#A5A8FF}html[data-theme=dark] .lr-d.now s{border-color:#A5A8FF} html[data-theme=dark] .lr-trial .lr-go{color:#A5A8FF}  .lr-up.ls-coll{display:block;margin:22px 0 8px!important;padding:18px 18px 14px!important;border:1px solid rgba(59,63,216,.22)!important;border-radius:18px!important;background:linear-gradient(180deg,#F5F5FF,#fff)!important;font-family:Inter,-apple-system,system-ui,sans-serif;max-width:none} .lr-up .lr-k{font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#3B3FD8} .lr-up h3{margin:8px 0 10px!important;font:700 19px/1.25 Inter,-apple-system,system-ui,sans-serif!important;color:#14162B!important} .lr-up ul{list-style:none;margin:0 0 14px!important;padding:0!important} .lr-up li{position:relative;padding:5px 0 5px 26px!important;font:400 14.5px/1.4 Inter,-apple-system,system-ui,sans-serif!important;color:#3A3C55!important} .lr-up li::before{content:"";position:absolute;left:3px;top:10px;width:10px;height:6px;border-left:2px solid #3B3FD8;border-bottom:2px solid #3B3FD8;transform:rotate(-45deg)} .lr-up .lr-cta{-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:50px;border:0;border-radius:14px;background:#3B3FD8;color:#fff;font:600 16px Inter,-apple-system,system-ui,sans-serif;cursor:pointer} .lr-up .lr-no{-webkit-appearance:none;appearance:none;display:block;margin:6px auto 0;padding:8px 14px;border:0;background:transparent;color:#6A6C85;font:500 14px Inter,system-ui,sans-serif;cursor:pointer} html[data-theme=dark] .lr-up.ls-coll{background:linear-gradient(180deg,#1f2240,#1a1d24)!important;border-color:#33376a!important} html[data-theme=dark] .lr-up .lr-k{color:#A5A8FF}html[data-theme=dark] .lr-up h3{color:#ECEEF3!important}html[data-theme=dark] .lr-up li{color:#C3C7D0!important} html[data-theme=dark] .lr-up li::before{border-color:#A5A8FF}html[data-theme=dark] .lr-up .lr-cta{background:#4b50e6}html[data-theme=dark] .lr-up .lr-no{color:#9AA1AD}
/* ls-r2.css */
html.ia2 .v2-intro>.pm-veil.ls-veil,html.ia2 #study>.pm-veil.ls-veil{display:block!important} .pm-veil.ls-veil.ls-coll,html.p17.v2.vt.vt.vt .pm-veil.ls-veil.ls-coll{display:block;margin:-4px 0 18px!important;padding:14px 16px 16px!important;border:1px solid rgba(59,63,216,.22)!important;border-radius:16px!important;background:#F5F5FF!important;color:#14162B!important;font-family:Inter,-apple-system,system-ui,sans-serif} .pm-veil.ls-veil .pm-veil-k{display:block;font:700 11px/1 Inter,system-ui,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase;color:#3B3FD8!important;background:none!important} .pm-veil.ls-veil .lv-t{display:block;margin:7px 0 12px;font:500 14.5px/1.4 Inter,-apple-system,system-ui,sans-serif;color:#3A3C55} .pm-veil.ls-veil .pm-unlock{-webkit-appearance:none;appearance:none;display:block!important;width:100%;min-height:46px;margin:0!important;border:0!important;border-radius:13px!important;background:#3B3FD8!important;color:#fff!important;font:600 15.5px Inter,-apple-system,system-ui,sans-serif!important;cursor:pointer;box-shadow:none!important} html[data-theme=dark] .pm-veil.ls-veil.ls-coll,html.p17.v2.vt.vt.vt[data-theme=dark] .pm-veil.ls-veil.ls-coll{background:#1f2240!important;border-color:#33376a!important;color:#ECEEF3!important} html[data-theme=dark] .pm-veil.ls-veil .pm-veil-k{color:#A5A8FF!important}html[data-theme=dark] .pm-veil.ls-veil .lv-t{color:#C3C7D0}html[data-theme=dark] .pm-veil.ls-veil .pm-unlock{background:#4b50e6!important}  .lc-done.ls-coll{display:block;margin:26px 0 14px!important;padding:16px!important;border:1px solid #E4E6EF!important;border-radius:18px!important;background:#fff!important;font-family:Inter,-apple-system,system-ui,sans-serif;max-width:none} .lc-top{display:flex;align-items:center;gap:12px} .lc-ck{flex:none;width:38px;height:38px;border-radius:50%;background:#3B3FD8;display:grid;place-items:center;transform:scale(.6);opacity:.4;transition:transform .45s cubic-bezier(.2,1.4,.4,1),opacity .3s} .lc-done.in .lc-ck{transform:none;opacity:1} .lc-ck svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .lc-h{display:flex;flex-direction:column;gap:2px;min-width:0} .lc-h b{font:700 17px/1.25 Inter,-apple-system,system-ui,sans-serif;color:#14162B} .lc-h i{font:500 13.5px/1.35 Inter,-apple-system,system-ui,sans-serif;font-style:normal;color:#3B3FD8} .lc-in{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#F5F5FF;font:400 14px/1.45 Inter,-apple-system,system-ui,sans-serif;color:#3A3C55} .lc-in strong{display:block;margin:0 0 3px;font:700 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#3B3FD8} .lc-in em{font-style:normal;font-weight:600;color:#14162B} .lc-next{-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:14px 0 0;border:0;border-radius:14px;background:#3B3FD8;color:#fff;font:600 15.5px Inter,-apple-system,system-ui,sans-serif;cursor:pointer} .lc-next::after{content:"";width:8px;height:8px;border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg)} html[data-theme=dark] .lc-done.ls-coll{background:#1a1d24!important;border-color:#2c303a!important} html[data-theme=dark] .lc-ck{background:#4b50e6}html[data-theme=dark] .lc-h b{color:#ECEEF3}html[data-theme=dark] .lc-h i{color:#A5A8FF} html[data-theme=dark] .lc-in{background:#22253a;color:#C3C7D0}html[data-theme=dark] .lc-in strong{color:#A5A8FF}html[data-theme=dark] .lc-in em{color:#ECEEF3} html[data-theme=dark] .lc-next{background:#4b50e6} @media (prefers-reduced-motion:reduce){.lc-ck{transition:none}}  #ls-setup.ls-coll{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;background:#fff!important;font-family:Inter,-apple-system,system-ui,sans-serif;color:#14162B;padding:calc(14px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom))!important;box-sizing:border-box;overflow-y:auto;opacity:0;transition:opacity .25s ease;margin:0!important;border:0!important;border-radius:0!important;max-width:none} #ls-setup.on{opacity:1} #ls-setup .su-bar{display:flex;align-items:center;justify-content:space-between;min-height:40px} #ls-setup .su-dots{display:flex;gap:6px}#ls-setup .su-dots i{width:22px;height:4px;border-radius:2px;background:#E4E6EF}#ls-setup .su-dots i.on{background:#3B3FD8} #ls-setup .su-skip{-webkit-appearance:none;appearance:none;border:0;background:none;padding:8px 4px;color:#6A6C85;font:500 15px Inter,system-ui,sans-serif;cursor:pointer} #ls-setup h2{margin:26px 0 6px;font:700 27px/1.2 Inter,-apple-system,system-ui,sans-serif;letter-spacing:-.01em;color:#14162B} #ls-setup .su-s{margin:0 0 22px;font:400 15.5px/1.45 Inter,-apple-system,system-ui,sans-serif;color:#6A6C85} #ls-setup .su-list{border:1px solid #E4E6EF;border-radius:16px;overflow:hidden} #ls-setup .su-o{-webkit-appearance:none;appearance:none;position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:68px;margin:0;padding:12px 44px 12px 14px;border:0;background:transparent;text-align:left;color:#14162B;cursor:pointer;-webkit-tap-highlight-color:transparent} #ls-setup .su-o+.su-o{border-top:1px solid #E4E6EF} #ls-setup .su-o::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-4px;border-right:2px solid #A3A6B8;border-top:2px solid #A3A6B8;transform:rotate(45deg)} #ls-setup .su-o:active{background:rgba(59,63,216,.06)} #ls-setup .su-ic{flex:none;width:40px;height:40px;border-radius:12px;background:rgba(59,63,216,.10);display:grid;place-items:center} #ls-setup .su-ic svg{width:22px;height:22px;fill:none;stroke:#3B3FD8;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} #ls-setup .su-tx{display:flex;flex-direction:column;gap:2px}#ls-setup .su-tx b{font:600 16.5px/1.3 Inter,-apple-system,system-ui,sans-serif}#ls-setup .su-tx i{font:400 13.5px/1.35 Inter,-apple-system,system-ui,sans-serif;font-style:normal;color:#6A6C85} #ls-setup .su-go{-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:52px;margin:26px 0 0;border:0;border-radius:15px;background:#3B3FD8;color:#fff;font:600 17px Inter,-apple-system,system-ui,sans-serif;cursor:pointer} #ls-setup .su-sum{border:1px solid #E4E6EF;border-radius:16px;padding:16px;font:400 15px/1.5 Inter,-apple-system,system-ui,sans-serif;color:#3A3C55}#ls-setup .su-sum b{color:#14162B} html[data-theme=dark] #ls-setup.ls-coll{background:#0f1115!important;color:#ECEEF3} html[data-theme=dark] #ls-setup h2,html[data-theme=dark] #ls-setup .su-o,html[data-theme=dark] #ls-setup .su-sum b{color:#ECEEF3} html[data-theme=dark] #ls-setup .su-s,html[data-theme=dark] #ls-setup .su-tx i,html[data-theme=dark] #ls-setup .su-skip{color:#9AA1AD} html[data-theme=dark] #ls-setup .su-list,html[data-theme=dark] #ls-setup .su-sum{border-color:#2c303a;background:#1a1d24}html[data-theme=dark] #ls-setup .su-o+.su-o{border-top-color:#2c303a} html[data-theme=dark] #ls-setup .su-sum{color:#C3C7D0}html[data-theme=dark] #ls-setup .su-dots i{background:#2c303a}html[data-theme=dark] #ls-setup .su-dots i.on{background:#A5A8FF} html[data-theme=dark] #ls-setup .su-ic{background:rgba(165,168,255,.14)}html[data-theme=dark] #ls-setup .su-ic svg{stroke:#A5A8FF}html[data-theme=dark] #ls-setup .su-go{background:#4b50e6}  .lo-off.ls-coll{display:block;margin:18px 0!important;padding:16px!important;border:1px solid #E4E6EF!important;border-radius:16px!important;background:#F5F5FF!important;font-family:Inter,-apple-system,system-ui,sans-serif;max-width:none} .lo-off b{display:block;font:700 16px/1.3 Inter,-apple-system,system-ui,sans-serif;color:#14162B} .lo-off span{display:block;margin:6px 0 12px;font:400 14.5px/1.45 Inter,-apple-system,system-ui,sans-serif;color:#3A3C55} .lo-off .lo-b{-webkit-appearance:none;appearance:none;border:1px solid rgba(59,63,216,.35);background:#fff;color:#3B3FD8;border-radius:12px;padding:10px 14px;font:600 14.5px Inter,system-ui,sans-serif;cursor:pointer} html[data-theme=dark] .lo-off.ls-coll{background:#1f2240!important;border-color:#33376a!important}html[data-theme=dark] .lo-off b{color:#ECEEF3}html[data-theme=dark] .lo-off span{color:#C3C7D0} html[data-theme=dark] .lo-off .lo-b{background:transparent;color:#A5A8FF;border-color:#4a4f8a}
/* ls-r3.css */
.lo-ask.ls-coll{display:block;margin:0 0 14px!important;padding:16px!important;border:1px solid #E4E6EF!important;border-radius:18px!important;background:#fff!important;font-family:Inter,-apple-system,system-ui,sans-serif;max-width:none} .lo-row{display:flex;gap:12px;align-items:flex-start} .lo-ic{flex:none;width:38px;height:38px;border-radius:11px;background:rgba(59,63,216,.10);display:grid;place-items:center} .lo-ic svg{width:21px;height:21px;fill:none;stroke:#3B3FD8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .lo-tx{display:flex;flex-direction:column;gap:3px}.lo-tx b{font:700 16px/1.3 Inter,-apple-system,system-ui,sans-serif;color:#14162B}.lo-tx i{font:400 14px/1.45 Inter,-apple-system,system-ui,sans-serif;font-style:normal;color:#5A5C75} .lo-acts{display:flex;gap:10px;margin:14px 0 0} .lo-save,.lo-no{-webkit-appearance:none;appearance:none;flex:1;min-height:44px;border-radius:12px;font:600 15px Inter,-apple-system,system-ui,sans-serif;cursor:pointer} .lo-save{border:0;background:#3B3FD8;color:#fff}.lo-no{border:1px solid #D9DBE8;background:transparent;color:#3A3C55} .lo-never{-webkit-appearance:none;appearance:none;display:block;margin:8px auto 0;border:0;background:none;padding:6px 10px;color:#8A8CA3;font:500 13px Inter,system-ui,sans-serif;cursor:pointer} .lo-st{margin:10px 0 0;font:500 13.5px Inter,system-ui,sans-serif;color:#3B3FD8}.lo-st:empty{display:none} .lo-ask.ok .lo-ic{background:#3B3FD8}.lo-ask.ok .lo-ic svg{stroke:#fff} html[data-theme=dark] .lo-ask.ls-coll{background:#1a1d24!important;border-color:#2c303a!important} html[data-theme=dark] .lo-ic{background:rgba(165,168,255,.14)}html[data-theme=dark] .lo-ic svg{stroke:#A5A8FF}html[data-theme=dark] .lo-tx b{color:#ECEEF3}html[data-theme=dark] .lo-tx i{color:#9AA1AD} html[data-theme=dark] .lo-save{background:#4b50e6}html[data-theme=dark] .lo-no{border-color:#3a3f4c;color:#C3C7D0}html[data-theme=dark] .lo-never{color:#7D8494}html[data-theme=dark] .lo-st{color:#A5A8FF} html[data-theme=dark] .lo-ask.ok .lo-ic{background:#4b50e6}html[data-theme=dark] .lo-ask.ok .lo-ic svg{stroke:#fff}  .p27-row.lg-row.ls-coll{display:grid!important;grid-template-columns:1fr;row-gap:2px;align-items:center;max-width:none} .lg-row .lg-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:10px 0 2px;padding:3px;border-radius:12px;background:#F0F1F7} .lg-row .lg-seg button{-webkit-appearance:none;appearance:none;min-height:36px;border:0;border-radius:9px;background:transparent;color:#3A3C55;font:600 14px Inter,-apple-system,system-ui,sans-serif;cursor:pointer} .lg-row .lg-seg button[aria-checked=true]{background:#fff;color:#3B3FD8;box-shadow:0 1px 3px rgba(20,22,60,.15)} html[data-theme=dark] .lg-row strong{color:#ECEEF3}html[data-theme=dark] .lg-row small{color:#9AA1AD} html[data-theme=dark] .lg-row .lg-seg{background:#22252d}html[data-theme=dark] .lg-row .lg-seg button{color:#C3C7D0} html[data-theme=dark] .lg-row .lg-seg button[aria-checked=true]{background:#3a3f6e;color:#fff;box-shadow:none}  .p32-hd>.lr-tbph{order:11;flex:1 0 100%;height:82px;margin:14px 0 0}  html.ia2 .lsf-ov .pm-veil.ls-veil,.lsf-ov .pm-veil.ls-veil{display:block!important;margin:4px 0 16px!important} .lsf-ov .lsf-lock{opacity:1!important}  html:not(.ls-expert) #p31-review{display:none!important}  #cl-code,#pm-to-redeem,#pm-set-redeem,[data-me=redeem],.pm-link.ls-nocode{display:none!important}
/* ls-health.css */
html.v2.p12.p13, html.v2 { --accent-soft: #EDEDFC; --oxblood: #3B3FD8; } html.v2.p12.p13[data-theme="dark"], html.v2[data-theme="dark"] { --accent-soft: #23254A; --oxblood: #5B5FE6; } @media (prefers-color-scheme: dark) { html.v2.p12.p13:not([data-theme="light"]) { --accent-soft: #23254A; --oxblood: #5B5FE6; } }  html.v2.p13 .p13-seal, html.v2.p13 .p12-avatar { background: radial-gradient(circle at 35% 30%, #7C80F0, #2A2DB0 60%, #1B1D6E) !important; } html.v2.p13 .p11-badge, .p13-wax { background: radial-gradient(circle at 35% 30%, #7C80F0, #2A2DB0 65%, #1B1D6E) !important; box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), inset 0 0 0 4px rgba(255,255,255,.18), 0 2px 4px -1px rgba(20,22,70,.5) !important; } .p14-check.on .p14-seal { background: radial-gradient(circle at 35% 30%, #7C80F0, #2A2DB0 65%, #1B1D6E); } .p14-tl li::before { background: radial-gradient(circle at 35% 30%, #7C80F0, #2A2DB0); } .p12-heart.on::before, html.v2.p13 .p12-heart.on::before, .p12-burst { background: #3B3FD8; } html[data-theme="dark"] .p12-heart.on::before, html[data-theme="dark"] .p12-burst { background: #8E91FF; } .vt-tile.no { background: #EEEEF4 !important; } html[data-theme="dark"] .vt-tile.no { background: #26283A !important; } .lg-pow::before { background: #5A5C8A; } .p29-heat .l1 { background: #DCDDFA; } .p29-heat .l2 { background: #A3A6F2; } .p29-heat .l3 { background: #6A6EE6; } html[data-theme="dark"] .p29-heat .l1 { background: #2A2C5A; } html[data-theme="dark"] .p29-heat .l2 { background: #3F43A0; } html[data-theme="dark"] .p29-heat .l3 { background: #5B5FE6; } .yir-s { color: #B8BAFF; } .v2-continue { background: radial-gradient(120% 140% at 100% 0%, #6E72F0 0%, #3B3FD8 45%, #1B1D6E 100%); box-shadow: 0 14px 34px rgba(27,29,110,.28); } .hx-weekcard { background: linear-gradient(140deg, #5B5FE6, #2A2DB0); }  [style*="--st:#9c4f5f"] { --st: #6A4F9C !important; } [style*="--st:#b23a3a"] { --st: #4A4FB8 !important; } [style*="--st:#a1475e"] { --st: #7A4AA1 !important; } [style*="--st:#c06c84"] { --st: #8A6CC0 !important; } [style*="--pc:#8a4a4a"] { --pc: #5A5C8A !important; } [style*="--pc:#8a2e2e"] { --pc: #2F3A7A !important; } [style*="--g:#c4553a"], [style*="--c:#c4553a"] { --g: #8A6A2A !important; --c: #8A6A2A !important; } [style*="--g:#c03a66"], [style*="--c:#c03a66"] { --g: #6A3FB0 !important; --c: #6A3FB0 !important; } [style*="background:#c4553a"] { background: #8A6A2A !important; } [style*="background:#c03a66"] { background: #6A3FB0 !important; } [style*="background:#8a4a4a"] { background: #5A5C8A !important; } [style*="background:#8a2e2e"] { background: #2F3A7A !important; } [style*="background:#b23a3a"] { background: #4A4FB8 !important; } [style*="background:#9c4f5f"] { background: #6A4F9C !important; } [style*="background:#a1475e"] { background: #7A4AA1 !important; } [style*="background:#c06c84"] { background: #8A6CC0 !important; }  html.vt-clean:not([data-theme="dark"]) body #v2-tabs#v2-tabs button:not([aria-current=page]):not(.on), html.vt-clean:not([data-theme="dark"]) body #v2-tabs#v2-tabs button:not([aria-current=page]):not(.on) > span, html.p18-on.p18-on.p18-on.p18-on:not([data-theme="dark"]) body #v2-tabs#v2-tabs button[aria-current=page]:not([data-v2tab=read]), html.p18-on.p18-on.p18-on.p18-on:not([data-theme="dark"]) body #v2-tabs#v2-tabs button[aria-current=page]:not([data-v2tab=read]) * { color: #5F6180 !important; } html.vt-clean[data-theme="dark"] body #v2-tabs#v2-tabs button:not([aria-current=page]):not(.on), html.vt-clean[data-theme="dark"] body #v2-tabs#v2-tabs button:not([aria-current=page]):not(.on) > span, html.p18-on.p18-on.p18-on.p18-on[data-theme="dark"] body #v2-tabs#v2-tabs button[aria-current=page]:not([data-v2tab=read]), html.p18-on.p18-on.p18-on.p18-on[data-theme="dark"] body #v2-tabs#v2-tabs button[aria-current=page]:not([data-v2tab=read]) * { color: #B4B7D6 !important; }