@supports not (color: color-mix(in srgb, red 50%, blue)) {
.next-verse-button,
.mobile-action-btn--primary,
.passage-search-submit,
.pwa-install-button {
background: var(--color-primary) !important;
}
.mobile-action-bar {
background: var(--color-surface-solid) !important;
}
}
@supports not (backdrop-filter: blur(10px)) {
.site-header,
.mobile-action-bar,
.toast {
background: var(--color-surface-solid) !important;
}
}
*, ::after, ::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
scroll-padding-top: var(--scroll-offset);
overflow-x: hidden;
width: 100%;
overscroll-behavior-y: none;
}
body {
font-family: var(--font-sans);
color: var(--color-text);
min-height: 100vh;
overflow-x: clip;
width: 100%;
position: relative;
background: linear-gradient(135deg, var(--color-bg-start), var(--color-bg-end));
line-height: 1.6;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern" 1, "liga" 1;
text-wrap: pretty;
letter-spacing: 0.01em;
}
::selection, ::-moz-selection {
background: color-mix(in srgb, var(--color-primary) 30%, transparent);
color: var(--color-text);
text-shadow: none;
}
:focus-visible {
outline: 0;
box-shadow:
0 0 0 3px var(--color-surface-solid),
0 0 0 5px var(--color-primary),
0 4px 12px color-mix(in srgb, var(--color-primary) 25%, transparent);
transition: box-shadow var(--transition-fast);
}
.ethereal-wrapper {
position: fixed;
inset: 0;
z-index: -999;
width: 100%;
height: 100%;
transition: background-position var(--transition-smooth);
pointer-events: none;
}
@media (hover: hover) {
.ethereal-wrapper {
will-change: background-position;
}
}
.page-main {
gap: var(--space-lg);
}
.content-module::before,
.verse-interactions::before {
content: "";
position: absolute;
left: 0;
right: 0;
background: var(--gradient-divider);
}
#auto-generate-text,
.reaction-button__count {
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.ai-pitch {
width: 100%;
max-width: var(--rail-hero);
margin: 0 auto;
display: flex;
align-items: center;
gap: 4px;
background: color-mix(in srgb, var(--color-surface-solid) 96%, var(--color-primary));
border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
line-height: 1.4;
color: color-mix(in srgb, var(--color-text) 78%, transparent);
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ai-pitch:hover {
background: color-mix(in srgb, var(--color-surface-solid) 93%, var(--color-primary));
border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}
.ai-pitch[hidden] { display: none; }
.ai-pitch-link {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 7px 6px 7px 16px;
color: inherit;
text-decoration: none;
border-radius: inherit;
}
.ai-pitch-link:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.ai-pitch-icon {
flex: 0 0 auto;
width: 15px;
height: 15px;
background-color: var(--color-primary);
-webkit-mask: var(--trv-ai-sparkle-svg) center / contain no-repeat;
mask: var(--trv-ai-sparkle-svg) center / contain no-repeat;
}
.ai-pitch-text {
flex: 1 1 auto;
min-width: 0;
}
.ai-pitch-text strong {
color: var(--color-text);
font-weight: 600;
}
.ai-pitch-cta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: var(--radius-full);
border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
background: color-mix(in srgb, var(--color-primary) 9%, transparent);
color: var(--color-primary);
font-weight: 600;
white-space: nowrap;
font-size: var(--font-size-sm);
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ai-pitch-link:hover .ai-pitch-cta {
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
border-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
}
[dir="rtl"] .ai-pitch-cta-arrow { transform: scaleX(-1); }
.ai-pitch-close {
flex: 0 0 auto;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin-right: 6px;
background: transparent;
border: none;
border-radius: 50%;
color: color-mix(in srgb, var(--color-text) 55%, transparent);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.ai-pitch-close svg { width: 14px; height: 14px; }
.ai-pitch-close:hover,
.ai-pitch-close:focus-visible {
background: color-mix(in srgb, var(--color-text) 8%, transparent);
color: var(--color-text);
}
@media (width <= 640px) {
.ai-pitch {
font-size: var(--font-size-xs);
line-height: 1.3;
}
.ai-pitch-link {
padding: 6px 4px 6px 12px;
gap: 8px;
}
.ai-pitch-icon { width: 13px; height: 13px; }
.ai-pitch-text { flex: 0 1 auto; }
.ai-pitch-detail { display: none; }
.ai-pitch-cta {
padding: 0;
border: none;
background: none;
font-size: var(--font-size-md);
}
.ai-pitch-cta-label { display: none; }
.ai-pitch-link:hover .ai-pitch-cta { background: none; }
.ai-pitch-close { width: 22px; height: 22px; margin-right: 4px; }
.ai-pitch-close svg { width: 12px; height: 12px; }
}
.main-search-container {
width: 100%;
max-width: var(--rail-hero);
margin: 0 auto;
z-index: 50;
position: relative;
}
.main-search-container:focus-within {
z-index: 52;
}
.passage-search-form {
position: relative;
}
.passage-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-surface-solid) 30%, transparent);
box-shadow: var(--shadow-sm);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
padding: 6px 7px 6px 16px;
height: 50px;
}
.passage-search-icon {
flex-shrink: 0;
width: 1.05rem;
height: 1.05rem;
color: var(--color-text-muted);
opacity: 0.65;
}
.passage-search-input {
flex: 1;
min-width: 0;
padding: 0;
height: 100%;
border: none;
border-radius: 0;
font-size: var(--font-size-md);
font-family: var(--font-serif);
color: var(--color-text);
background: transparent;
}
.passage-search-input::placeholder {
color: var(--color-text-muted);
opacity: 0.6;
}
.passage-search-input:focus::placeholder {
opacity: 0.3;
}
.passage-search-input:focus, .passage-search-input:focus-visible { outline: none; box-shadow: none; }
.passage-search-input-wrapper:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.passage-search-submit {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: var(--radius-full);
border: none;
cursor: pointer;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
font-size: var(--font-size-sm);
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
transition: all 0.2s ease;
}
.passage-search-submit:hover {
background: color-mix(in srgb, var(--color-primary) 20%, transparent);
transform: scale(1.08);
}
.passage-search-input-wrapper:focus-within .passage-search-submit {
background: var(--color-primary);
color: var(--color-primary-contrast);
}
.passage-search-submit:active {
transform: scale(0.95);
}
.passage-search-submit:focus-visible {
outline: 0;
box-shadow: var(--focus-ring);
}
.search-guide-btn {
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0 0.7rem 0 0;
border: none;
border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
border-radius: 0;
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-display);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: color 0.2s ease;
white-space: nowrap;
}
.search-guide-btn:hover { color: var(--color-text); }
.search-guide-btn:focus-visible { outline: 0; color: var(--color-text); box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.search-guide-label { line-height: 1; }
.search-explainer-popup-anchor { position: relative; display: flex; justify-content: center; max-width: 520px; margin: 0 auto; }
.search-explainer-popup {
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
width: 95%;
max-width: 420px;
background-color: var(--color-surface-solid);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
padding: var(--space-lg);
z-index: 1200;
text-align: left;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
box-shadow: var(--shadow-lg);
}
.search-explainer-popup.is-visible { opacity: 1; visibility: visible; }
.search-explainer-popup h2 {
font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
margin: 0 0 var(--space-xs) 0; color: var(--color-text);
padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border);
}
.search-explainer-popup h3 {
font-family: var(--font-display); font-size: var(--font-size-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
margin: var(--space-md) 0 var(--space-xs) 0; color: var(--color-primary);
}
.search-explainer-popup p { font-size: var(--font-size-sm); line-height: 1.55; margin-bottom: var(--space-xs); color: var(--color-text-muted); }
.search-explainer-popup ul { list-style: none; padding-left: 0; font-size: var(--font-size-sm); margin: var(--space-xs) 0 0 0; }
.search-explainer-popup li {
margin-bottom: 3px;
padding: 4px 8px;
display: flex;
align-items: baseline;
gap: var(--space-xs);
color: var(--color-text-muted);
background: color-mix(in srgb, var(--color-surface-hover, #f4f5f6) 60%, transparent);
border-radius: var(--radius-sm);
}
.search-explainer-popup li:last-child { margin-bottom: 0; }
.search-explainer-popup li strong {
display: inline-block; color: var(--color-text); font-weight: 600;
font-size: 0.82em; flex-shrink: 0; min-width: 65px;
}
.search-explainer-close-btn {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
background: transparent;
border: none;
font-size: 1.5rem;
line-height: 1;
color: var(--color-text-muted);
cursor: pointer;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
transition: color 0.2s ease, background-color 0.2s ease;
}
.search-explainer-close-btn:hover { color: var(--color-text); background-color: var(--color-surface-hover); }
.search-explainer-close-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.content-module,
.lectern-card {
position: relative;
background: linear-gradient(135deg, var(--color-surface) 0, color-mix(in srgb, var(--color-surface) 98%, var(--color-primary)) 100%);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.lectern-card {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--rail-page);
box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--color-surface-solid) 50%, transparent) inset;
border-radius: var(--radius-xl);
transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
background: var(--gradient-card);
background-clip: padding-box;
}
.lectern-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
opacity: 0.5;
background: var(--gradient-divider);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
z-index: 1;
}
.environment-control {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-top: var(--space-sm);
}
.environment-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
padding: 0.4rem 0.55rem;
font-family: inherit;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text);
background: transparent;
border: 0;
border-radius: var(--radius-md, 10px);
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.environment-toggle:hover {
background: var(--color-surface-hover, rgb(127 127 127 / 10%));
}
.environment-toggle-text {
white-space: nowrap;
}
.environment-toggle-switch {
position: relative;
flex-shrink: 0;
width: 2.1rem;
height: 1.15rem;
background: color-mix(in srgb, var(--color-text) 22%, transparent);
border-radius: 999px;
transition: background-color var(--transition-fast);
}
.environment-toggle-knob {
position: absolute;
top: 50%;
left: 0.16rem;
width: 0.85rem;
height: 0.85rem;
background: #fff;
border-radius: 50%;
transform: translateY(-50%);
box-shadow: 0 1px 2px rgb(0 0 0 / 35%);
transition: left var(--transition-fast);
}
.environment-toggle.is-active .environment-toggle-switch {
background: var(--color-primary);
}
.environment-toggle.is-active .environment-toggle-knob {
left: calc(100% - 0.85rem - 0.16rem);
}
.environment-suboptions {
display: none;
flex-direction: column;
gap: 0.15rem;
}
body.env-active .environment-suboptions {
display: flex;
}
.environment-toggle--sub {
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--color-text-muted, var(--color-text));
padding: 0.3rem 0.55rem;
}
.environment-toggle--sub .environment-toggle-switch {
width: 1.8rem;
height: 1rem;
}
.environment-toggle--sub .environment-toggle-knob {
width: 0.72rem;
height: 0.72rem;
}
.environment-toggle--sub.is-active .environment-toggle-knob {
left: calc(100% - 0.72rem - 0.16rem);
}
.dark-mode .environment-toggle-switch {
background: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.dark-mode .environment-toggle-knob {
background: hsl(218deg 13% 27%);
box-shadow: 0 1px 2px hsl(220deg 40% 2% / 45%);
}
.environment-shuffle-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
align-self: flex-start;
padding: 0.25rem 0.5rem;
font-family: inherit;
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--color-text-muted, var(--color-text));
background: transparent;
border: 0;
border-radius: var(--radius-sm, 8px);
cursor: pointer;
transition: color var(--transition-fast), background-color var(--transition-fast);
}
.environment-shuffle-btn:hover {
color: var(--color-text);
background: var(--color-surface-hover, rgb(127 127 127 / 10%));
}
.environment-shuffle-btn i {
font-size: 0.9em;
}
.verse-content {
flex-grow: 1;
padding: var(--space-xl);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
min-height: 200px;
z-index: 1;
position: relative;
transition: opacity 0.3s ease-in-out;
}
.verse-text {
font-family: var(--font-serif);
line-height: 1.7;
margin: 0 auto;
max-width: 50rem;
transition: font-size var(--transition-base), line-height var(--transition-base);
padding: var(--space-md) 0;
text-rendering: geometricprecision;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
text-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 5%, transparent);
letter-spacing: 0.01em;
position: relative;
}
.dark-mode .verse-text {
text-shadow: 0 2px 4px color-mix(in srgb, #000 20%, transparent), 0 0 40px color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.verse-text::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: var(--gradient-divider);
opacity: 0.25;
}
.verse-content .strongs-word-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted color-mix(in srgb, var(--color-primary) 30%, transparent);
cursor: help;
}
.no-strongs-underline .verse-content .strongs-word-link {
border-bottom-color: transparent;
}
.verse-content.fade-out {
opacity: 0;
}
.verse-content *,
.verse-content .strongs-word-link,
.verse-content .strongs-ref,
.verse-content .text--red-letter {
transition: none !important;
animation: none !important;
}
.verse-content .strongs-word-link {
will-change: auto !important;
}
.verse-content.fade-out .strongs-word-link {
pointer-events: none !important;
border-bottom-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
background-color: transparent !important;
}
.verse-content.fade-out .strongs-word-link,
.verse-content.fade-out .strongs-ref {
opacity: inherit !important;
}
.verse-reel-viewport {
position: relative;
overflow: hidden;
}
.verse-reel-track {
position: relative;
}
.verse-reel-slide {
display: none;
width: 100%;
}
.verse-reel-slide.is-active {
display: block;
}
@keyframes reelSlideOutUp {
from { transform: translateY(0); opacity: 1; }
to   { transform: translateY(-40px); opacity: 0; }
}
@keyframes reelSlideOutDown {
from { transform: translateY(0); opacity: 1; }
to   { transform: translateY(40px); opacity: 0; }
}
.verse-reel-slide.slide-out-up    { animation: reelSlideOutUp 0.25s ease-in forwards; }
.verse-reel-slide.slide-out-down  { animation: reelSlideOutDown 0.25s ease-in forwards; }
@keyframes reelSlideInFromBelow {
from { transform: translateY(30px); opacity: 0; }
to   { transform: translateY(0); opacity: 1; }
}
@keyframes reelSlideInFromAbove {
from { transform: translateY(-30px); opacity: 0; }
to   { transform: translateY(0); opacity: 1; }
}
.verse-reel-slide.slide-in-from-below  { animation: reelSlideInFromBelow 0.3s ease-out forwards; }
.verse-reel-slide.slide-in-from-above  { animation: reelSlideInFromAbove 0.3s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
.verse-reel-slide.slide-out-up,
.verse-reel-slide.slide-out-down {
animation: none;
opacity: 0;
}
.verse-reel-slide.slide-in-from-below,
.verse-reel-slide.slide-in-from-above {
animation: none;
opacity: 1;
}
}
.verse-reel-nav {
display: flex;
flex-direction: column;
border-top: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
border-bottom-left-radius: var(--radius-xl);
border-bottom-right-radius: var(--radius-xl);
}
.verse-reel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
}
.verse-reel-history-controls {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.verse-reel-history-controls[hidden] {
display: none;
}
@media (width <= 715px) {
.verse-reel-engagement {
display: flex;
}
.verse-reel-controls {
justify-content: space-between;
}
.verse-reel-history-controls {
flex: 1;
justify-content: center;
}
}
.verse-reel-btn {
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-full, 50%);
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text-muted);
transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
font-size: var(--font-size-sm);
}
.verse-reel-btn:hover:not(:disabled) {
color: var(--color-primary);
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.verse-reel-btn:disabled {
opacity: 0.3;
cursor: default;
}
.verse-reel-btn--list {
margin-left: var(--space-sm);
font-size: var(--font-size-xs);
}
.verse-reel-btn--list[aria-expanded="true"] {
color: var(--color-primary);
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.verse-reel-engagement-btn,
.verse-reel-engagement-btn:hover:not(:disabled) {
border-color: transparent;
background: transparent;
}
.verse-reel-engagement-btn.is-active {
color: var(--color-primary);
}
.verse-reel-position {
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
min-width: 36px;
text-align: center;
font-family: var(--font-sans);
letter-spacing: 0.02em;
}
.verse-reel-list {
display: none;
flex-direction: column;
max-height: 280px;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 var(--space-sm) var(--space-sm);
scroll-behavior: smooth;
}
.verse-reel-list.is-open {
display: flex;
}
.verse-reel-list-item {
display: flex;
align-items: baseline;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
cursor: pointer;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
transition: background var(--transition-fast), color var(--transition-fast);
border: 1px solid transparent;
text-align: left;
background: none;
width: 100%;
}
.verse-reel-list-item:hover {
background: color-mix(in srgb, var(--color-surface-hover) 60%, transparent);
color: var(--color-text);
}
.verse-reel-list-item.is-active {
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
color: var(--color-text);
}
.verse-reel-list-badge {
font-size: var(--font-size-3xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.1em 0.35em;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
flex-shrink: 0;
line-height: 1.3;
}
.verse-reel-list-ref {
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
color: inherit;
}
.verse-reel-list-item.is-active .verse-reel-list-ref {
color: var(--color-primary);
}
.verse-reel-list-preview {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0.65;
font-size: var(--font-size-xs);
min-width: 0;
}
.verse-reel-list-time {
flex-shrink: 0;
font-size: var(--font-size-3xs);
color: var(--color-text-muted);
opacity: 0.5;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
margin-left: auto;
padding-left: var(--space-sm);
}
html[data-font-size="small"] .verse-text { font-size: 1rem; }
html[data-font-size="default"] .verse-text { font-size: 1.375rem; }
html[data-font-size="large"] .verse-text { font-size: 1.65rem; }
.text--red-letter {
color: var(--color-red-letter);
font-weight: 500;
text-shadow: 0 0 20px color-mix(in srgb, var(--color-red-letter) 8%, transparent);
}
.verse-text.is-bold .text--red-letter {
font-weight: inherit;
}
.verse-reference {
font-size: var(--font-size-base);
font-family: var(--font-display);
font-weight: 700;
color: var(--color-text);
margin-top: var(--space-lg);
letter-spacing: 0.1em;
text-transform: uppercase;
text-wrap: balance;
padding-top: var(--space-lg);
position: relative;
}
.verse-reference::before {
content: "";
position: absolute;
transform: translateX(-50%);
left: 50%;
top: var(--space-sm);
height: 2px;
width: 120px;
background: linear-gradient(90deg, transparent, var(--color-primary) 30%, var(--color-primary) 70%, transparent);
opacity: 0.4;
box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.verse-reference-link {
color: inherit;
text-decoration: none;
display: inline-block;
padding: var(--space-sm) var(--space-md);
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
border-radius: var(--radius-sm);
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.verse-reference-link:hover {
color: var(--color-primary);
border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.verse-reference-link:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.verse-reference-link-icon {
display: inline-block;
margin-left: 0.4em;
vertical-align: middle;
font-size: 0.68em;
opacity: 0.4;
transition: opacity var(--transition-fast);
}
.verse-reference-link:hover .verse-reference-link-icon { opacity: 1; }
.verse-passage-context {
display: block;
max-width: 34ch;
margin: 3px auto 0;
padding: 2px var(--space-sm);
font-family: var(--font-serif);
font-style: italic;
font-size: var(--font-size-md);
line-height: 1.3;
color: var(--color-text-muted);
text-decoration: none;
text-wrap: balance;
transition: color var(--transition-fast);
}
.verse-passage-context-label {
text-decoration: underline transparent;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: text-decoration-color var(--transition-fast);
}
.verse-passage-context:hover { color: var(--color-primary); }
.verse-passage-context:hover .verse-passage-context-label { text-decoration-color: currentcolor; }
.verse-passage-context:focus-visible {
outline: 0;
border-radius: var(--radius-sm);
box-shadow: var(--focus-ring);
}
.holiday-banners {
max-width: var(--verse-max-width, 780px);
margin: var(--space-md) auto;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.holiday-banner {
display: flex;
align-items: stretch;
border-radius: var(--radius-lg, 12px);
background: color-mix(in srgb, var(--color-primary) 5%, transparent);
transition: background 0.2s;
overflow: hidden;
}
.dark-mode .holiday-banner {
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.holiday-banner:hover {
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.dark-mode .holiday-banner:hover {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.holiday-banner-link {
flex: 1;
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
text-decoration: none;
color: var(--color-text);
min-width: 0;
}
.holiday-banner-dismiss {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
border: none;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
font-size: var(--font-size-sm);
transition: color 0.15s;
opacity: 0.6;
}
.holiday-banner-dismiss:hover {
color: var(--color-text);
opacity: 1;
}
.holiday-banner-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: color-mix(in srgb, var(--color-primary, hsl(30deg 60% 50%)) 12%, transparent);
color: var(--color-primary, hsl(30deg 60% 50%));
font-size: 1.1rem;
flex-shrink: 0;
}
.holiday-banner-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.holiday-banner-label {
font-family: var(--font-heading);
font-size: var(--font-size-md);
font-weight: 600;
color: var(--color-text);
}
.holiday-banner-cta {
font-size: var(--font-size-sm);
color: var(--color-primary, hsl(30deg 60% 50%));
font-weight: 500;
}
.holiday-banner-cta i {
font-size: var(--font-size-2xs);
margin-left: 2px;
}
@media (width <= 715px) {
.holiday-banners {
margin: var(--space-sm) auto;
}
.holiday-banner-link {
padding: var(--space-xs) var(--space-sm);
}
.holiday-banner-dismiss {
width: 2.25rem;
}
}
.randomness-section__title {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--color-text);
text-align: center;
margin: 0 auto var(--space-lg);
text-wrap: balance;
}
@media (width <= 640px) {
.randomness-section__title { font-size: 1.2rem; }
}
.articles { display: grid; gap: var(--space-md); }
.art-cat {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: color-mix(in srgb, var(--cat, var(--color-primary)) 72%, var(--color-text));
}
.feat-article {
position: relative;
display: block;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--gradient-card);
box-shadow: var(--shadow-sm);
text-decoration: none;
color: var(--color-text);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.feat-article::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--cat, var(--color-primary)), transparent);
opacity: 0.65;
}
.feat-article:hover {
border-color: color-mix(in srgb, var(--cat) 50%, var(--color-border));
box-shadow: var(--shadow-md);
}
.feat-article:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.feat-body { padding: var(--space-lg); display: flex; flex-direction: column; }
.feat-tagrow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.feat-tag {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: color-mix(in srgb, var(--cat, var(--color-primary)) 72%, var(--color-text));
background: color-mix(in srgb, var(--cat, var(--color-primary)) 12%, var(--color-surface-solid));
border: 1px solid color-mix(in srgb, var(--cat, var(--color-primary)) 32%, transparent);
border-radius: var(--radius-full);
padding: 0.25rem 0.65rem;
}
.feat-title {
display: block;
font-family: var(--font-serif);
font-weight: 700;
font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.6rem);
line-height: 1.25;
margin: 0 0 var(--space-sm);
color: var(--color-text);
}
.feat-dek {
display: block;
color: var(--color-text-muted);
font-size: var(--font-size-md);
line-height: 1.55;
margin-bottom: var(--space-md);
max-width: 52ch;
}
.feat-go {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
color: var(--cat, var(--color-primary));
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--font-size-sm);
}
.feat-go i { transition: transform var(--transition-base); }
.feat-article:hover .feat-go i { transform: translateX(4px); }
.dark-mode .art-cat,
.dark-mode .feat-tag,
.dark-mode .feat-go {
color: color-mix(in srgb, var(--cat, var(--color-primary)) 65%, white);
}
@media (width <= 640px) {
.feat-body { padding: var(--space-md); padding-top: var(--space-sm); }
}
.tool-button:active,
.font-option:active {
transform: scale(0.92) !important;
transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.verse-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: var(--space-md) var(--space-lg);
gap: var(--space-md);
background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-surface-hover) 30%, transparent));
border-top: 1px solid var(--color-border);
position: relative;
z-index: 20;
}
.tool-button {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
background-color: transparent;
cursor: pointer;
color: var(--color-text-muted);
font-size: 1.1rem;
transition: background-color var(--transition-fast), color var(--transition-fast);
position: relative;
}
@media (hover: hover) {
.tool-button:hover:not([disabled]) {
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
}
}
.tool-button:focus-visible {
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
}
.tool-button:disabled { opacity: 0.4; cursor: not-allowed; }
.tool-button.is-favorite {
color: var(--color-reaction-heart);
background-color: color-mix(in srgb, var(--color-reaction-heart) 10%, transparent);
}
.font-selector-wrapper { position: relative; }
.font-dropdown {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 12px;
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
width: 180px;
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
z-index: 100;
}
.font-dropdown.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.font-dropdown ul { list-style: none; padding: 0; margin: 0; }
.font-option {
width: 100%;
text-align: left;
padding: 10px 12px;
background: none;
border: none;
color: var(--color-text);
cursor: pointer;
border-radius: var(--radius-sm);
font-size: var(--font-size-md);
transition: background-color 0.1s;
}
.font-option:hover {
background-color: var(--color-surface-hover);
color: var(--color-primary);
}
.font-option.is-active {
font-weight: 700;
color: var(--color-primary);
}
.font-option.is-active::before {
content: '\2713\00a0';
}
.size-reset-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text-muted);
cursor: pointer;
transition: all 0.2s ease;
font-size: var(--font-size-sm);
}
.size-reset-btn:hover {
background: var(--color-surface-hover);
border-color: var(--color-primary);
color: var(--color-primary);
transform: rotate(-360deg);
}
.size-value-display {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
text-align: center;
font-variant-numeric: tabular-nums;
}
.size-slider-wrapper {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.size-slider-label--large {
font-size: 1.125rem;
}
.size-slider {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 6px;
background: linear-gradient(
to right,
var(--color-border) 0%,
var(--color-primary) 50%,
var(--color-border) 100%
);
border-radius: var(--radius-full);
outline: none;
cursor: pointer;
}
.size-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--color-primary);
border: 3px solid var(--color-surface-solid);
border-radius: 50%;
cursor: pointer;
box-shadow:
0 2px 8px color-mix(in srgb, var(--color-primary) 40%, transparent),
0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
transition: all 0.2s ease;
}
.size-slider::-webkit-slider-thumb:active {
transform: scale(1.2);
}
.size-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--color-primary);
border: 3px solid var(--color-surface-solid);
border-radius: 50%;
cursor: pointer;
box-shadow:
0 2px 8px color-mix(in srgb, var(--color-primary) 40%, transparent),
0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
transition: all 0.2s ease;
}
.size-slider::-moz-range-thumb:active {
transform: scale(1.2);
}
.typo-trigger .typo-aa {
font-family: var(--font-serif);
font-weight: 600;
font-size: 1.05rem;
letter-spacing: -0.02em;
line-height: 1;
}
.typo-dropdown {
width: 320px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.typo-dropdown .typo-section + .typo-section {
padding-top: 10px;
border-top: 1px solid var(--color-border);
}
.typo-section-head {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: 8px;
}
.typo-section-label {
flex: 1;
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
}
.typo-dropdown .size-value-display {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.typo-dropdown .size-reset-btn {
width: 24px;
height: 24px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--color-text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--font-size-2xs);
transition: background-color 0.15s, color 0.15s;
}
.typo-dropdown .size-reset-btn:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.typo-dropdown .size-slider-wrapper {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.typo-dropdown ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px 6px;
}
.typo-dropdown .font-option {
padding: 6px 8px;
font-size: var(--font-size-sm);
width: 100%;
text-align: left;
}
.typo-style-section {
display: flex;
gap: 6px;
}
.typo-style-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 10px;
border: 1px solid var(--color-border);
background: transparent;
color: var(--color-text);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-family: var(--font-sans);
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.typo-style-btn:hover {
background: var(--color-surface-hover);
border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}
.typo-style-btn.is-active {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
border-color: var(--color-primary);
color: var(--color-primary);
}
.typo-style-btn i {
font-size: var(--font-size-sm);
}
.vibe-selector-wrapper { position: relative; }
.vibe-dropdown {
position: fixed;
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
width: 260px;
padding: var(--space-md) var(--space-md) var(--space-lg);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
z-index: 100;
}
.vibe-dropdown.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.vibe-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-bottom: 10px;
}
.vibe-panel-title {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.vibe-panel-head:not(:has(.vibe-panel-title)) { justify-content: flex-end; }
.vibe-pills-divider {
height: 1px;
background: var(--color-border);
opacity: 0.5;
margin: 10px 0 8px;
}
.vibe-pills {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.vibe-pill {
--vibe-color: #8a8a8a;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 9px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface-solid);
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
user-select: none;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
}
.vibe-pill:hover {
border-color: color-mix(in srgb, var(--vibe-color) 60%, var(--color-border));
color: var(--color-text);
}
.vibe-pill:active {
transform: scale(0.96);
}
.vibe-pill-led {
width: 8px;
height: 8px;
border-radius: 50%;
background: color-mix(in srgb, var(--vibe-color) 22%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vibe-color) 45%, transparent);
flex-shrink: 0;
transition: background 0.18s ease, box-shadow 0.18s ease;
}
.vibe-pill-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vibe-pill[aria-pressed="true"] {
background: color-mix(in srgb, var(--vibe-color) 14%, var(--color-surface-solid));
border-color: color-mix(in srgb, var(--vibe-color) 55%, var(--color-border));
color: var(--color-text);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--vibe-color) 30%, transparent),
0 2px 6px color-mix(in srgb, var(--vibe-color) 18%, transparent);
}
.vibe-pill[aria-pressed="true"] .vibe-pill-led {
background: var(--vibe-color);
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--vibe-color) 85%, white),
0 0 6px color-mix(in srgb, var(--vibe-color) 70%, transparent),
0 0 2px color-mix(in srgb, var(--vibe-color) 90%, transparent);
}
.vibe-apply-hint {
margin: 10px 0 0;
font-size: var(--font-size-3xs);
font-weight: 500;
letter-spacing: 0.02em;
text-align: center;
color: var(--color-text-muted);
opacity: 0.8;
}
.vibe-pills-reset {
padding: 4px 8px;
margin-inline-end: -8px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-primary);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
.vibe-pills-reset:hover {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.vibe-selector-wrapper:not(.is-custom) .vibe-pills-reset,
.mobile-popover--vibe:not(.is-custom) .vibe-pills-reset {
color: var(--color-text-muted);
}
.font-option[data-font="default-serif"]     { font-family: var(--font-serif); }
.font-option[data-font="crimson"]           { font-family: 'Crimson Pro', georgia, serif; }
.font-option[data-font="garamond"]          { font-family: 'EB Garamond', serif; }
.font-option[data-font="libre-baskerville"] { font-family: 'Libre Baskerville', serif; }
.font-option[data-font="playfair"]          { font-family: 'Playfair Display', serif; }
.font-option[data-font="cardo"]             { font-family: Cardo, serif; }
.font-option[data-font="im-fell"]           { font-family: 'IM Fell English', serif; }
.font-option[data-font="georgia"]           { font-family: Georgia, "Times New Roman", serif; }
.font-option[data-font="default-sans"]      { font-family: var(--font-sans); }
[data-font-family="default-serif"] .verse-text     { font-family: var(--font-serif); }
[data-font-family="crimson"] .verse-text           { font-family: 'Crimson Pro', georgia, serif; }
[data-font-family="garamond"] .verse-text          { font-family: 'EB Garamond', serif; }
[data-font-family="libre-baskerville"] .verse-text { font-family: 'Libre Baskerville', serif; }
[data-font-family="playfair"] .verse-text          { font-family: 'Playfair Display', serif; }
[data-font-family="cardo"] .verse-text             { font-family: Cardo, serif; }
[data-font-family="im-fell"] .verse-text           { font-family: 'IM Fell English', serif; }
[data-font-family="georgia"] .verse-text           { font-family: Georgia, "Times New Roman", serif; }
[data-font-family="default-sans"] .verse-text      { font-family: var(--font-sans); }
.split-button-container {
display: flex;
align-items: stretch;
border-radius: var(--radius-full);
overflow: hidden;
box-shadow:
0 4px 12px color-mix(in srgb, var(--color-primary) 25%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent);
}
.next-verse-button.split-main {
height: 50px;
padding: 0 24px 0 28px;
border-radius: var(--radius-full) 0 0 var(--radius-full);
border: none;
cursor: pointer;
background: var(--color-primary);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
color: var(--color-primary-contrast);
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.05rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: background var(--transition-fast), padding var(--transition-base);
position: relative;
}
.next-verse-button.split-main::after {
content: "";
position: absolute;
right: 0;
top: 20%;
bottom: 20%;
width: 1px;
background: color-mix(in srgb, var(--color-primary-contrast) 30%, transparent);
}
.next-verse-button.split-main:hover {
background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary));
}
.next-verse-button.split-main:active {
opacity: 0.85;
}
.next-verse-button.split-main .icon {
font-size: 1.1rem;
transition: transform 0.4s ease;
}
.next-verse-button.split-main:hover .icon {
transform: rotate(180deg);
}
.split-toggle {
height: 50px;
width: auto;
min-width: 52px;
padding: 0;
border-radius: 0 var(--radius-full) var(--radius-full) 0;
border: none;
cursor: pointer;
background: color-mix(in srgb, var(--color-primary) 85%, #000);
background: oklch(from var(--color-primary) calc(l * 0.8) c h);
color: var(--color-primary-contrast);
font-family: var(--font-sans);
font-weight: 600;
font-size: 1.1rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
transition: background var(--transition-fast), min-width var(--transition-base), padding var(--transition-base);
position: relative;
}
.split-toggle:hover {
background: color-mix(in srgb, var(--color-primary) 70%, #000);
background: oklch(from var(--color-primary) calc(l * 0.68) c h);
}
.split-toggle:active {
opacity: 0.85;
}
.split-toggle.is-active {
min-width: 80px;
padding: 0 16px;
background: color-mix(in srgb, var(--color-primary) 70%, #000);
background: oklch(from var(--color-primary) calc(l * 0.68) c h);
}
.split-toggle.is-active i {
animation: pulse-glow 2s ease-in-out infinite;
}
.split-button-container:has(.split-toggle.is-active) .next-verse-button.split-main {
padding: 0 var(--space-md);
}
.split-button-container:has(.split-toggle.is-active) .split-main-long,
.split-button-container:has(.split-toggle.is-active) .split-main-short {
display: none;
}
.split-toggle-reveal {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 0;
margin-left: 0;
overflow: hidden;
opacity: 0;
white-space: nowrap;
transition: max-width var(--transition-base), margin-left var(--transition-base), opacity var(--transition-fast);
}
.split-toggle.is-active .split-toggle-reveal {
max-width: 160px;
margin-left: 8px;
opacity: 1;
}
.split-toggle-text {
font-size: var(--font-size-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.split-toggle-pace {
font-size: var(--font-size-3xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.7;
cursor: pointer;
padding: 4px 10px;
border-radius: var(--radius-sm);
transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
.split-toggle-pace:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--color-text) 8%, transparent);
}
.split-toggle i::before {
content: "\f144";
}
.split-toggle.is-active i::before {
content: "\f28d";
}
.split-toggle::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent, color-mix(in srgb, #fff 10%, transparent));
opacity: 0;
transition: opacity var(--transition-fast);
pointer-events: none;
border-radius: 0 var(--radius-full) var(--radius-full) 0;
}
.split-toggle:hover::after {
opacity: 1;
}
.split-button-container:focus-within {
box-shadow:
var(--focus-ring),
0 4px 12px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.next-verse-button.split-main:focus-visible,
.split-toggle:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary-contrast) 75%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.split-toggle.is-active i { animation: none; }
.next-verse-button.split-main:hover .icon { transform: none; }
.next-verse-button.split-main .icon,
.split-toggle,
.split-toggle-reveal { transition: none; }
}
.verse-interactions {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.reaction-button.is-loading {
opacity: 0.7;
pointer-events: none;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 0.5; }
}
.content-modules-container {
padding: calc(var(--space-xxl) - var(--space-lg)) var(--space-md) var(--space-xl);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xl);
width: 100%;
}
.trv-homepage-flourish {
margin: var(--space-2xl, 3rem) auto var(--space-md);
font-family: var(--font-serif);
font-size: 1.1rem;
letter-spacing: 0.4em;
color: var(--color-text-muted);
opacity: 0.5;
text-align: center;
user-select: none;
}
.content-module-title {
display: block;
font-size: var(--font-size-base);
font-family: var(--font-display);
font-weight: 700;
color: var(--color-text-muted);
margin-bottom: var(--space-md);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.content-module-title span {
color: var(--color-text);
}
.recommended-articles-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.randomness-archive-link {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
padding-bottom: 1px;
transition: all var(--transition-fast);
}
.randomness-archive-link:hover {
color: var(--color-primary-hover);
border-bottom-color: var(--color-primary-hover);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.randomness-deeper {
margin-top: var(--space-2xl, 3rem);
padding-top: 0;
}
.randomness-proof {
max-width: 60ch;
margin: 0 auto;
padding: var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
box-shadow: var(--shadow-sm);
}
.randomness-proof-badge {
flex-shrink: 0;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
font-size: var(--font-size-md);
}
.randomness-proof-body {
margin: 0;
font-size: var(--font-size-md);
line-height: 1.65;
color: var(--color-text-muted);
}
.randomness-suite-divider {
display: flex;
align-items: baseline;
gap: 16px;
margin: var(--space-lg) 0 var(--space-md);
}
.randomness-suite-roman {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.25rem;
font-weight: 500;
color: var(--color-accent);
line-height: 1;
}
.randomness-suite-label {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
white-space: nowrap;
font-weight: 600;
}
.randomness-suite-line {
flex: 1;
height: 1px;
background: color-mix(in srgb, var(--color-border) 70%, transparent);
align-self: center;
translate: 0 -2px;
}
.randomness-suite-count {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
font-variant-numeric: tabular-nums;
text-transform: uppercase;
white-space: nowrap;
}
.randomness-deeper-shuffle {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-md);
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-lg);
background: transparent;
color: inherit;
text-decoration: none;
overflow: hidden;
min-height: 260px;
box-shadow: var(--shadow-sm);
transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.randomness-deeper-shuffle::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), transparent);
opacity: 0.65;
transition: opacity var(--transition-fast);
}
.randomness-deeper-shuffle:hover {
border-color: color-mix(in srgb, var(--color-text) 28%, var(--color-border));
background: color-mix(in srgb, var(--color-primary) 3%, transparent);
box-shadow: var(--shadow-md);
}
.randomness-deeper-shuffle:hover::before { opacity: 0.8; }
.randomness-deeper-shuffle:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.randomness-deeper-shuffle.is-loading {
pointer-events: none;
opacity: 0.85;
}
.randomness-deeper-shuffle-title {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
letter-spacing: -0.008em;
}
.randomness-shuffle-peek {
position: relative;
margin: var(--space-sm) 0 var(--space-md);
padding: var(--space-sm) 0 0;
border-top: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}
.randomness-shuffle-peek::before {
content: "PEEK";
position: absolute;
top: -7px;
left: 0;
padding-right: 6px;
background: var(--color-background);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 600;
letter-spacing: var(--tracking-overline);
color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
}
.randomness-deeper-shuffle:hover .randomness-shuffle-peek::before {
background: color-mix(in srgb, var(--color-primary) 3%, var(--color-background));
}
.peek-passage {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--font-size-sm);
line-height: 1.5;
color: var(--color-text);
margin: 0 0 6px;
}
.peek-vspan--faded { color: color-mix(in srgb, var(--color-text-muted) 60%, transparent); }
.peek-vspan--faded .peek-vnum { color: inherit; opacity: 0.8; }
.red-letter { color: var(--color-red-letter); }
.peek-vspan--faded .red-letter,
.peek-vline--faded .red-letter { color: color-mix(in srgb, var(--color-red-letter) 60%, transparent); }
.peek-ref {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 600;
}
.peek-chapter { display: flex; flex-direction: column; gap: 4px; }
.peek-vline {
display: grid;
grid-template-columns: 14px 1fr;
gap: 8px;
align-items: baseline;
}
.peek-vn {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
font-variant-numeric: tabular-nums;
font-weight: 600;
text-decoration: none;
}
a.peek-vn:hover,
a.peek-vn:focus-visible {
color: var(--color-primary);
}
.peek-vt {
font-family: var(--font-serif);
font-size: var(--font-size-sm);
line-height: 1.4;
color: var(--color-text);
}
.peek-vline--faded .peek-vt,
.peek-vline--faded .peek-vn { color: color-mix(in srgb, var(--color-text-muted) 50%, transparent); }
.peek-more {
margin-top: 4px;
padding-top: 6px;
border-top: 1px dashed color-mix(in srgb, var(--color-border) 60%, transparent);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
font-weight: 600;
}
.randomness-shuffle-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.randomness-shuffle-roll,
.randomness-shuffle-open {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
background: none;
border: 0;
padding: 4px 0;
cursor: pointer;
}
.randomness-shuffle-roll:hover,
.randomness-shuffle-open:hover { color: color-mix(in srgb, var(--color-primary) 80%, var(--color-text)); }
.randomness-shuffle-roll {
width: 34px;
height: 34px;
padding: 0;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
justify-content: center;
}
.randomness-shuffle-roll:hover {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.randomness-shuffle-roll:disabled { opacity: 0.55; cursor: progress; }
.randomness-shuffle-roll:focus-visible,
.randomness-shuffle-open:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.randomness-shuffle-open i { transition: transform 0.22s ease; }
.randomness-shuffle-open:hover i { transform: translateX(3px); }
.randomness-shuffle-action-icon { transition: transform 0.5s ease; }
.randomness-shuffle-roll:hover .randomness-shuffle-action-icon { transform: rotate(360deg); }
.randomness-shuffle-expand {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin: auto 0 var(--space-sm);
padding: 7px 10px;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.randomness-shuffle-expand:hover {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.randomness-shuffle-expand:disabled { opacity: 0.55; cursor: progress; }
.randomness-shuffle-expand:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.randomness-shuffle-expand-icon { font-size: var(--font-size-2xs); transition: transform 0.22s ease; }
.randomness-deeper-shuffle.is-expanded .randomness-shuffle-expand-icon { transform: rotate(180deg); }
.randomness-deeper-shuffle.is-expanded .randomness-shuffle-peek { display: none; }
.randomness-shuffle-full {
margin: var(--space-sm) 0;
max-height: 320px;
overflow-y: auto;
overscroll-behavior: contain;
}
.peek-chapter--full { display: flex; flex-direction: column; gap: 5px; }
.peek-vnum {
font-family: var(--font-sans);
font-style: normal;
font-size: var(--font-size-3xs);
font-weight: 600;
letter-spacing: 0.06em;
color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
vertical-align: super;
padding-right: 3px;
font-variant-numeric: tabular-nums;
}
.randomness-deeper-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-sm);
}
.randomness-deeper-grid > li {
display: flex;
}
.randomness-deeper-card {
display: flex;
flex-direction: column;
padding: var(--space-sm) 0 0;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-lg);
background: transparent;
text-decoration: none;
color: inherit;
box-shadow: var(--shadow-sm);
transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
width: 100%;
min-height: 200px;
overflow: hidden;
}
.randomness-deeper-card:hover {
border-color: color-mix(in srgb, var(--color-text) 28%, var(--color-border));
background: color-mix(in srgb, var(--color-primary) 3%, transparent);
box-shadow: var(--shadow-md);
}
.randomness-deeper-card:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.randomness-deeper-card-title {
font-family: var(--font-display);
font-size: var(--font-size-base);
font-weight: 700;
color: var(--color-text);
line-height: 1.25;
letter-spacing: -0.005em;
}
.randomness-tool-peek {
margin-top: auto;
padding: var(--space-sm) var(--space-md) var(--space-md);
border-top: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent);
min-height: 64px;
display: flex;
align-items: center;
}
.peek-ai { width: 100%; flex-direction: column; align-items: stretch; }
.peek-ai-q {
display: flex;
align-items: flex-start;
gap: 6px;
font-family: var(--font-serif);
font-style: italic;
font-size: var(--font-size-sm);
line-height: 1.4;
color: var(--color-text);
}
.peek-ai-q::before {
content: ">";
font-family: var(--font-sans);
font-style: normal;
font-size: var(--font-size-xs);
color: var(--color-accent);
flex-shrink: 0;
font-weight: 600;
}
.peek-ai-cites {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 6px;
}
.peek-cite-chip {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
padding: 2px 6px;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
border-radius: 3px;
font-weight: 600;
}
.peek-lex { width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
.peek-lex-row1 { display: flex; align-items: baseline; gap: 10px; }
.peek-lex-row2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.peek-lemma {
font-family: var(--font-serif);
font-size: 1.35rem;
color: var(--color-text);
line-height: 1;
font-weight: 500;
}
.peek-strongs-id {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
font-weight: 600;
}
.peek-trans {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.peek-def {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: color-mix(in srgb, var(--color-text-muted) 80%, transparent);
font-weight: 600;
}
.peek-toc { width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
.peek-toc-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 8px;
font-family: var(--font-serif);
font-size: var(--font-size-xs);
color: var(--color-text);
}
.peek-toc-ttl {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.peek-toc-pg {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.peek-devo { width: 100%; gap: 10px; }
.peek-devo-date {
flex-shrink: 0;
text-align: center;
padding: 4px 8px;
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
border-radius: var(--radius-sm);
background: var(--color-background);
}
.peek-devo-mo {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-accent);
display: block;
font-weight: 700;
line-height: 1.3;
}
.peek-devo-dy {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 600;
color: var(--color-text);
line-height: 1;
display: block;
}
.peek-devo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.peek-devo-ref {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 600;
}
.peek-devo-snip {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--font-size-xs);
color: var(--color-text);
line-height: 1.35;
}
.peek-q-opt--correct {
background: var(--color-primary);
color: var(--color-primary-contrast, #fff);
}
@media (width <= 540px) {
.randomness-proof { padding: var(--space-md); }
.randomness-suite-divider { margin: var(--space-md) 0 var(--space-sm); }
}
.context-toggle-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
cursor: pointer;
border: none;
font-size: var(--font-size-sm);
font-weight: 500;
background: transparent;
color: var(--color-text-muted);
transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
position: relative;
overflow: hidden;
}
.context-toggle-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.context-toggle-btn:active { transform: none; }
.context-toggle-btn .insight-icon {
width: 0.9rem;
height: 0.9rem;
display: inline-block;
background: currentcolor;
mask: url('/icons/insight-lamp.svg') no-repeat center / contain;
-webkit-mask: url('/icons/insight-lamp.svg') no-repeat center / contain;
}
.verse-context-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; overflow: hidden; margin-top: var(--space-sm); }
.verse-context-content.is-expanded { grid-template-rows: 1fr; }
.verse-context-inner { min-height: 0; }
.context-text-wrapper { padding: var(--space-sm) 0; }
.context-content-text p, .context-content p:last-child { margin: 0; margin-bottom: 0; }
.verse-lenses { margin-top: calc(var(--space-sm) * -1); }
.verse-lenses.is-disabled { opacity: 0.5; pointer-events: none; }
.verse-lenses-pill {
display: flex;
width: fit-content;
max-width: 100%;
margin: 0 auto var(--space-sm);
gap: 2px;
padding: 3px;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-full, 999px);
background: linear-gradient(135deg,
color-mix(in srgb, var(--color-surface-hover) 40%, transparent),
color-mix(in srgb, var(--color-surface-hover) 18%, transparent));
box-shadow: 0 2px 8px color-mix(in srgb, var(--color-text) 4%, transparent);
}
.lens-tab {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-md);
border: 1px solid transparent;
border-radius: var(--radius-full, 999px);
background: transparent;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.lens-tab:hover { color: var(--color-text); }
.lens-tab[hidden] { display: none; }
.lens-tab[aria-selected="true"] {
background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-solid));
color: var(--color-primary);
border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
box-shadow: var(--shadow-xs);
}
.lens-tab i { font-size: 0.85em; }
.lens-tab .insight-icon {
width: 0.9rem;
height: 0.9rem;
display: inline-block;
background: currentcolor;
mask: url('/icons/insight-lamp.svg') no-repeat center / contain;
-webkit-mask: url('/icons/insight-lamp.svg') no-repeat center / contain;
}
.lens-panel {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.3s ease;
}
.lens-panel.is-open { grid-template-rows: 1fr; }
.lens-panel.lens-overflow { overflow: visible; }
.lens-panel-inner { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .lens-panel { transition: none; } }
.echoes-lenses {
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-width: var(--measure);
margin-inline: auto;
padding: var(--space-sm) var(--space-xs) var(--space-md);
}
.echoes-lens {
padding: var(--space-md);
}
.echoes-lens-head {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.echoes-lens-badge {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
font-size: var(--font-size-sm);
}
.echoes-lens-heading { display: flex; flex-direction: column; gap: 1px; }
.echoes-lens-title { font-weight: 600; font-size: var(--font-size-md); color: var(--color-text); line-height: 1.25; }
.echoes-lens-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.3; }
.echoes-legend {
margin-inline-start: auto;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
align-self: center;
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
}
.echoes-rows { display: flex; flex-direction: column; gap: 2px; }
.echoes-row {
display: block;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
text-align: start;
text-decoration: none;
color: inherit;
transition: background-color var(--transition-fast);
}
.echoes-row:hover { background: var(--color-surface-hover); }
.echoes-row-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-bottom: 2px;
}
.echoes-row-ref { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-primary); }
.echoes-row-text {
display: block;
font-size: var(--font-size-sm);
line-height: 1.5;
color: var(--color-text-muted);
}
.echoes-rel {
flex: none;
display: inline-block;
width: 46px;
height: 5px;
border-radius: 999px;
background: color-mix(in srgb, var(--color-text) 12%, transparent);
overflow: hidden;
}
.echoes-rel-fill { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.echoes-rel--legend .echoes-rel-fill {
width: 100%;
background: linear-gradient(to right, color-mix(in srgb, var(--color-primary) 22%, transparent), var(--color-primary));
}
.echoes-word {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: var(--space-sm);
margin-bottom: var(--space-sm);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--color-primary) 5%, transparent);
text-align: center;
}
.echoes-lemma-link { display: inline-flex; align-items: baseline; gap: var(--space-xs); }
.echoes-lemma-info { font-size: var(--font-size-2xs); color: var(--color-primary); align-self: center; }
.echoes-lemma { font-size: 1.45rem; font-weight: 600; color: var(--color-text); line-height: 1.1; }
.echoes-xlit { font-style: italic; font-weight: 600; font-size: var(--font-size-base); color: var(--color-text-muted); }
.echoes-word-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.echoes-loading, .echoes-error, .echoes-empty {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-md) 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.echoes-retry-btn {
margin-inline-start: var(--space-xs);
padding: 2px var(--space-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
cursor: pointer;
font-size: var(--font-size-sm);
}
.echoes-retry-btn:hover { background: var(--color-surface-hover); }
.ctx-learn-more-row {
margin: var(--space-md) auto 0;
max-width: var(--measure);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
text-align: center;
}
.ctx-learn-more-heading {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
font-weight: 500;
letter-spacing: 0.01em;
}
.ctx-learn-more-heading .trv-ai-sparkle {
color: var(--color-primary);
width: 0.95em;
height: 0.95em;
}
.ctx-learn-more-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-xs);
}
.ctx-learn-more-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
color: var(--color-text);
font-size: var(--font-size-md);
font-weight: 500;
line-height: 1.3;
text-decoration: none;
cursor: pointer;
transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.ctx-learn-more-chip:hover,
.ctx-learn-more-chip:focus-visible {
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
color: var(--color-primary);
text-decoration: none;
outline: none;
}
.ctx-learn-more-topic {
color: inherit;
}
.ctx-learn-more-go {
color: var(--color-text-muted);
transition: transform var(--transition-base), color var(--transition-base);
}
.ctx-learn-more-chip:hover .ctx-learn-more-go,
.ctx-learn-more-chip:focus-visible .ctx-learn-more-go {
transform: translateX(2px);
color: var(--color-primary);
}
[dir="rtl"] .ctx-learn-more-go {
transform: scaleX(-1);
}
[dir="rtl"] .ctx-learn-more-chip:hover .ctx-learn-more-go,
[dir="rtl"] .ctx-learn-more-chip:focus-visible .ctx-learn-more-go {
transform: scaleX(-1) translateX(2px);
}
.ctx-learn-more-another {
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
padding: 6px 10px;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
text-decoration: none;
transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}
.ctx-learn-more-another:hover,
.ctx-learn-more-another:focus-visible {
color: var(--color-text);
background: var(--color-surface-hover);
border-color: var(--color-border);
outline: none;
text-decoration: none;
}
.context-loading-skeleton { padding: var(--space-md); color: var(--color-text-muted); font-style: italic; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); font-size: var(--font-size-sm); }
.context-loading-skeleton i { opacity: 0.5; color: var(--color-text-muted); }
.context-error-message { padding: var(--space-md); text-align: left; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.context-content h3 { color: var(--color-primary); }
.dark-mode .context-toggle-btn, .dark-mode .context-toggle-btn:hover { background: transparent; }
.dark-mode .context-toggle-btn:hover { background: var(--color-surface-hover); }
.auto-pace-cycle {
display: none;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: var(--space-xs);
margin-inline: auto;
padding: var(--space-xs) var(--space-sm);
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
cursor: pointer;
transition: color var(--transition-fast);
}
.auto-pace-cycle:hover {
color: var(--color-text);
}
.auto-pace-cycle-value {
font-weight: 600;
color: var(--color-primary);
}
.auto-pace-cycle-value::before {
content: "·";
margin-right: 4px;
color: var(--color-text-muted);
opacity: 0.6;
font-weight: 400;
}
.auto-pace-cycle-arrow {
font-size: var(--font-size-base);
line-height: 1;
opacity: 0.5;
}
@media (width <= 715px) {
.auto-pace-cycle.is-visible {
display: inline-flex;
}
}
@keyframes pop {
0% { transform: scale(1) translateZ(0); }
50% { transform: scale(1.3) translateZ(0); }
100% { transform: scale(1) translateZ(0); }
}
@keyframes pulse-glow {
0%, 100% { filter: drop-shadow(0 0 0 color-mix(in srgb, var(--color-primary-contrast) 0%, transparent)); }
50%      { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--color-primary-contrast) 45%, transparent)); }
}
@keyframes bannerSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes contentPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes textShimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
@keyframes skeletonWave { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
@keyframes enhancedSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes loadingDots { 0%, 20% { content: ""; } 40% { content: "."; } 60% { content: ".."; } 100%, 80% { content: "..."; } }
@keyframes buttonSpinner { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes inputShimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes progressIndeterminate { 0% { left: -30%; } 100% { left: 100%; } }
@keyframes successPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes errorShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.lectern-card.loading { pointer-events: none; position: relative; overflow: hidden; }
.lectern-card.loading::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--color-primary) 8%, transparent) 50%, transparent 100%);
background-size: 200% 100%;
background-repeat: no-repeat;
animation: 1.5s infinite shimmer;
pointer-events: none;
z-index: 10;
}
.lectern-card.loading .verse-content { animation: 1.5s ease-in-out infinite contentPulse; }
.lectern-card.loading .verse-text {
position: relative;
animation: 2s ease-in-out infinite loadingPulse;
}
@keyframes loadingPulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 0.3; }
}
.lectern-card.loading .verse-reference { position: relative; color: transparent; }
.lectern-card.loading .verse-reference::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 16px;
background: linear-gradient(90deg, var(--color-surface-hover) 25%, color-mix(in srgb, var(--color-surface-hover) 70%, var(--color-primary)) 50%, var(--color-surface-hover) 75%);
background-size: 200% 100%;
border-radius: var(--radius-sm);
animation: 2s infinite skeletonWave;
}
.fa-spin { animation: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite enhancedSpin; transform-origin: center; }
.fa-spin.fa-spinner {
filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-primary) 40%, transparent));
}
.fa-spin.fa-spinner { color: var(--color-primary); }
.loading-dots::after { content: ""; animation: 1.5s steps(4, end) infinite loadingDots; }
.auto-generate-button.loading, .next-verse-button.loading, .tool-button.loading { position: relative; pointer-events: none; }
.auto-generate-button.loading i, .next-verse-button.loading i, .tool-button.loading i { opacity: 0.3; }
.auto-generate-button.loading::after, .next-verse-button.loading::after, .tool-button.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid currentcolor;
border-top-color: transparent;
border-radius: 50%;
animation: 0.8s linear infinite buttonSpinner;
}
.passage-search-input.loading {
background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 8%, transparent) 50%, transparent);
background-size: 200% 100%;
animation: 2s infinite inputShimmer;
}
.context-loading i { color: var(--color-primary); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary) 30%, transparent)); }
.fade-in { animation: 0.4s ease-in-out fadeIn; }
#back-to-top {
position: fixed;
bottom: var(--dock-float);
right: var(--space-md);
z-index: var(--z-float);
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-surface-solid) 85%, transparent);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
color: var(--color-text-muted);
border: none;
box-shadow: var(--shadow-md), var(--ring-raised);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast), visibility var(--transition-fast);
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.8);
pointer-events: none;
}
#back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
#back-to-top:hover {
box-shadow: var(--shadow-lg), 0 0 20px color-mix(in srgb, var(--color-primary) 25%, transparent), 0 0 0 1px var(--color-primary) inset;
color: var(--color-primary);
background: var(--gradient-surface-tint);
}
#back-to-top:active {
transform: scale(0.95);
box-shadow: var(--shadow-sm), 0 0 15px color-mix(in srgb, var(--color-primary) 20%, transparent), 0 0 0 1px var(--color-primary) inset;
}
#back-to-top i { display: flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (width >= 768px) {
.passage-search-input-wrapper { height: 56px; }
.passage-search-input { font-size: var(--font-size-base); }
.passage-search-submit {
width: 40px;
height: 40px;
font-size: var(--font-size-base);
}
}
@media (width <= 1024px) {
.verse-text { line-height: 1.7; }
html[data-font-size="small"] .verse-text { font-size: 0.85rem; }
html[data-font-size="default"] .verse-text { font-size: 1rem; }
html[data-font-size="large"] .verse-text { font-size: 1.25rem; }
.verse-text.verse-text--long { font-size: 0.9rem; line-height: 1.5; }
html[data-font-size="small"] .verse-text.verse-text--long { font-size: 0.8rem; }
html[data-font-size="large"] .verse-text.verse-text--long { font-size: 1rem; }
.context-toggle-btn { padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); }
.page-main {
padding: var(--space-md) var(--space-sm);
gap: var(--space-md);
}
.verse-content { padding: var(--space-lg) var(--space-md); }
.verse-reference { margin-top: var(--space-md); }
.main-search-container { margin-block: var(--space-sm); max-width: var(--rail-hero); }
.content-modules-container {
padding: var(--space-xl) var(--space-sm) var(--space-md);
gap: var(--space-lg);
}
}
@media (width <= 715px) {
.page-content {
padding-bottom: calc(73px + env(safe-area-inset-bottom, 12px));
}
#back-to-top {
right: var(--space-sm);
width: 44px;
height: 44px;
}
.lectern-card {
transform: none !important;
will-change: auto !important;
}
.lectern-card::before {
left: 10px;
right: 10px;
top: 0;
border-radius: var(--radius-sm);
}
.verse-interactions {
border-radius: 0;
overflow: hidden;
}
.verse-toolbar {
flex-direction: column;
gap: 12px;
padding: 16px;
overflow: visible !important;
}
.next-verse-button {
order: -1;
width: 100%;
height: 52px;
font-size: 1.1rem;
margin-bottom: 4px;
}
.font-selector-wrapper {
flex: 1;
max-width: 48px;
height: 48px;
border-radius: 50%;
margin: 0;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font-selector-wrapper .tool-button { width: 100%; height: 100%; }
.auto-generate-button {
grid-column: 1 / -1;
width: 100%;
height: 48px;
margin-top: 4px;
border-radius: 12px;
justify-content: center;
background-color: var(--color-surface-hover);
color: var(--color-text);
font-weight: 600;
}
.auto-generate-button.is-active {
background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.auto-generate-button.is-paused {
border-style: dashed;
opacity: 0.75;
}
.font-dropdown {
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
max-height: 60vh !important;
z-index: var(--z-popover) !important;
background-color: var(--color-surface-solid) !important;
box-shadow: 0 -10px 40px rgb(0 0 0 / 20%) !important;
border: 1px solid var(--color-border) !important;
border-bottom: none !important;
border-radius: 24px 24px 0 0 !important;
transform: translateY(120%) !important;
opacity: 0;
visibility: hidden;
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease !important;
overflow-y: auto;
padding-bottom: calc(70px + env(safe-area-inset-bottom, 12px)) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.font-dropdown.is-open {
transform: translateY(0) !important;
opacity: 1 !important;
visibility: visible !important;
}
.font-dropdown-handle {
padding: 10px 0 8px;
display: flex;
justify-content: center;
align-items: center;
cursor: grab;
-webkit-tap-highlight-color: transparent;
}
.font-dropdown-handle:active {
cursor: grabbing;
}
.font-dropdown-handle-bar {
display: block;
width: 40px;
height: 4px;
background: var(--color-border);
border-radius: var(--radius-full);
opacity: 0.6;
transition: all 0.2s ease;
}
.font-dropdown.is-open .font-dropdown-handle-bar {
opacity: 1;
background: var(--color-primary);
}
.font-option {
padding: 18px 24px !important;
font-size: 1.1rem !important;
text-align: left !important;
border-bottom: 1px solid var(--color-surface-hover);
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
}
.lectern-card,
.verse-toolbar {
overflow: visible !important;
}
.lectern-card {
z-index: 20;
}
.lectern-card:has(.is-open:not(.lens-panel, .verse-reel-list)) { z-index: 60; }
.content-modules-container {
position: relative;
z-index: 10;
}
@media (display-mode: standalone) {
html, body {
overscroll-behavior-x: none;
overscroll-behavior-y: none;
}
}
@media (prefers-reduced-motion: reduce) {
:root { --glass-blur: none; }
.lectern-card,
.mobile-action-bar {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: var(--color-surface-solid) !important;
opacity: 0.98;
}
}
.verse-text.is-bold {
font-weight: 700 !important;
}
.verse-text.is-italic {
font-style: italic !important;
transform: none !important;
font-synthesis: none;
}
.verse-text.is-italic::after {
transform: translateX(-50%) !important;
font-style: normal;
}
.tool-button.is-active {
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
}
#mobile-favorite-btn.is-active {
color: var(--color-reaction-heart);
}
.verse-context-section {
margin-top: var(--space-lg);
position: relative;
max-width: 100%;
}
.insight-unified-card {
background: transparent;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.insight-body {
padding: 24px 32px;
background: linear-gradient(180deg,
rgb(255 255 255 / 1%),
rgb(0 0 0 / 2%)
);
}
.context-content-text {
font-family: var(--font-sans);
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-text);
margin: 0 auto;
max-width: var(--measure);
padding: 0;
border: none;
background: transparent;
box-shadow: none;
text-align: start;
}
.context-content-text a {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.context-content-text a:hover,
.context-content-text a:focus-visible {
color: var(--color-primary);
text-decoration-color: var(--color-primary);
}
.context-content-text a.trv-link-preview {
text-decoration-style: dotted;
}
.context-content-text a.strongs-word-link {
border-bottom: none;
}
.insight-footer {
border-top: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-surface-hover) 50%, transparent);
padding: 0;
}
.insight-footer:empty {
border-top: none;
background: transparent;
}
.insight-meta-grid {
display: flex;
flex-direction: column;
gap: 4px;
max-width: var(--measure);
margin-inline: auto;
padding: 10px var(--space-md) 12px;
}
.insight-meta-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: var(--space-md);
row-gap: 2px;
min-width: 0;
}
.insight-meta-label {
font-family: var(--font-sans);
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-muted);
line-height: 1.7;
white-space: nowrap;
flex-shrink: 0;
min-width: 64px;
}
.insight-meta-row--people .insight-meta-label { color: var(--color-tag-person); }
.insight-meta-row--places .insight-meta-label { color: var(--color-tag-place); }
.insight-meta-row--period .insight-meta-label { color: var(--color-accent); }
.insight-meta-row--topics .insight-meta-label { color: var(--color-tag-topic); }
.insight-meta-items {
display: inline;
min-width: 0;
}
.insight-meta-item {
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 500;
line-height: 1.55;
color: var(--color-text);
text-decoration: none;
transition: color var(--transition-fast);
}
a.insight-meta-item--person:hover { color: var(--color-tag-person); }
a.insight-meta-item--place:hover  { color: var(--color-tag-place); }
a.insight-meta-item--period:hover { color: var(--color-accent); }
a.insight-meta-item--topic:hover  { color: var(--color-tag-topic); }
.insight-meta-sep {
margin: 0 7px;
color: var(--color-text-muted);
opacity: 0.5;
user-select: none;
}
.insight-meta-year-sep {
margin: 0 5px 0 6px;
color: var(--color-text-muted);
opacity: 0.5;
}
.insight-meta-year {
font-size: 0.82em;
font-weight: 400;
font-style: italic;
color: var(--color-text-muted);
letter-spacing: 0.01em;
}
@media (width <= 850px) {
.insight-body {
padding: var(--space-lg) var(--space-md);
}
.context-content-text {
font-size: var(--font-size-md);
}
.insight-meta-grid {
padding: var(--space-sm) var(--space-sm) 10px;
}
}
@media (width <= 600px) {
.insight-meta-grid {
padding: var(--space-xs) var(--space-xs) var(--space-sm);
}
.insight-meta-row {
flex-direction: column;
row-gap: 0;
}
.insight-meta-label {
min-width: 0;
line-height: 1.5;
}
.insight-meta-item {
font-size: 0.85rem;
}
}
.insight-meta-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
opacity: 0.7;
}
.ctx-retry-btn {
background: transparent;
border: 1px solid currentcolor;
color: inherit;
padding: 2px 8px;
border-radius: 4px;
margin-left: 8px;
font-size: 0.8em;
cursor: pointer;
opacity: 0.7;
}
.ctx-retry-btn:hover {
opacity: 1;
background: rgb(0 0 0 / 5%);
}
@media (width >= 716px) {
.mobile-action-bar,
.mobile-popover {
display: none !important;
}
}
body.nav-open .mobile-popover {
z-index: var(--z-dock-page);
}
@media (width <= 715px) {
:root {
--dock-bar: calc(var(--dock-bar-item) + var(--dock-bar-pad) * 2 + env(safe-area-inset-bottom, 0px));
--dock-total: var(--dock-bar);
}
.verse-toolbar {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
padding: 0;
margin: 0;
border: none;
overflow: visible !important;
z-index: 50 !important;
}
.mobile-action-bar {
display: flex;
justify-content: center;
gap: var(--space-sm);
}
.mobile-action-btn--secondary {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: transparent;
border: none;
color: var(--color-text-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-action-btn--secondary::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary) 15%, transparent),
color-mix(in srgb, var(--color-primary) 8%, transparent)
);
opacity: 0;
transform: scale(0.8);
transition: all 0.2s ease;
}
.mobile-action-btn--secondary:active::before {
opacity: 1;
transform: scale(1);
transition: all 0.1s ease;
}
.mobile-action-btn--secondary:active {
color: var(--color-text);
transform: scale(0.88);
transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mobile-action-btn--secondary:active i {
transform: scale(1.1);
transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mobile-action-btn--secondary i {
position: relative;
z-index: 1;
}
.mobile-action-btn--primary {
width: 120px;
height: 52px;
border-radius: var(--radius-full);
border: none;
cursor: pointer;
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin: 0 6px;
background: linear-gradient(
135deg,
var(--color-primary) 0%,
color-mix(in srgb, var(--color-primary) 90%, black) 100%
);
color: var(--color-primary-contrast);
box-shadow:
0 6px 20px color-mix(in srgb, var(--color-primary) 35%, transparent),
0 2px 8px color-mix(in srgb, var(--color-primary) 20%, transparent),
inset 0 1px 0 color-mix(in srgb, white 25%, transparent),
inset 0 -1px 0 color-mix(in srgb, black 15%, transparent);
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-action-btn--primary::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
135deg,
transparent 0%,
color-mix(in srgb, white 20%, transparent) 50%,
transparent 100%
);
pointer-events: none;
}
.mobile-action-btn--primary i {
position: relative;
z-index: 1;
filter: drop-shadow(0 1px 2px color-mix(in srgb, black 20%, transparent));
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mobile-action-btn--primary:active {
transform: scale(0.92);
box-shadow:
0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent),
inset 0 2px 4px color-mix(in srgb, black 20%, transparent);
filter: brightness(0.95);
transition: all 0.1s ease;
}
.mobile-action-btn--primary:active i {
transform: rotate(180deg) scale(1.05);
}
.mobile-action-btn--auto.is-active {
color: var(--color-primary);
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary) 15%, transparent),
color-mix(in srgb, var(--color-primary) 8%, transparent)
);
font-weight: 700;
animation: auto-btn-pulse 2s ease-in-out infinite;
}
@keyframes auto-btn-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 40%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 0%, transparent); }
}
.mobile-action-btn--auto.is-active::before {
opacity: 1;
transform: scale(1);
}
.mobile-action-btn--auto.is-active .fa-play {
display: none;
}
.mobile-countdown-text {
display: none;
font-size: var(--font-size-md);
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.mobile-action-btn--auto.is-active .mobile-countdown-text {
display: block;
animation: countdown-pulse 1s ease-in-out infinite;
}
.mobile-action-btn--auto.is-paused {
animation: none;
opacity: 0.7;
}
.mobile-action-btn--auto.is-paused .mobile-countdown-text {
animation: none;
}
@keyframes countdown-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.mobile-vibe-btn {
background: rgb(226 85 85 / 12%);
transition: background 0.3s ease, color 0.3s ease;
}
.mobile-vibe-btn.is-active {
color: var(--color-text);
}
.mobile-typo-icon {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1;
}
.mobile-popover {
position: fixed;
bottom: calc(var(--dock-bar, 0px) + 8px);
z-index: var(--z-popover);
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow:
0 -4px 20px color-mix(in srgb, var(--color-text) 10%, transparent),
0 -1px 4px color-mix(in srgb, var(--color-text) 5%, transparent);
padding: 8px 10px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.mobile-popover.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition-delay: 0s;
}
.mobile-popover--typo {
inset-inline: var(--space-md);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px;
}
.mobile-typo-row {
display: flex;
align-items: center;
gap: 6px;
}
.mobile-typo-row:has(> .mobile-typo-size-val) { justify-content: space-between; }
.mobile-typo-row:has(> .mobile-typo-pill) > .mobile-typo-pill { flex: 1 1 0; min-width: 0; }
.mobile-typo-divider {
width: auto;
height: 1px;
background: var(--color-border);
flex-shrink: 0;
}
.mobile-typo-step {
width: 36px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-serif);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.mobile-typo-step-sign {
font-size: var(--font-size-3xs);
position: absolute;
top: 2px;
right: 3px;
font-family: var(--font-sans);
color: var(--color-text-muted);
}
.mobile-typo-step:active {
transform: scale(0.92);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
border-color: var(--color-primary);
}
.mobile-typo-size-val {
font-size: var(--font-size-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--color-primary);
min-width: 38px;
text-align: center;
}
.mobile-typo-pill[hidden] {
display: none;
}
.mobile-typo-pill {
width: 36px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-muted);
font-size: var(--font-size-md);
cursor: pointer;
transition: all 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-typo-pill:active {
transform: scale(0.92);
}
.mobile-typo-pill.is-active {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
border-color: var(--color-primary);
color: var(--color-primary);
}
.mobile-popover--vibe {
left: var(--space-md);
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 14px 10px;
width: 260px;
}
.mobile-popover--font {
left: 50%;
transform: translateX(-50%) translateY(8px);
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px;
min-width: 180px;
}
.mobile-popover--font.is-open {
transform: translateX(-50%) translateY(0);
}
.mobile-font-popover-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px 6px;
border-bottom: 1px solid var(--color-border);
margin-bottom: 4px;
}
.mobile-font-popover-title {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mobile-font-popover-close {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: all 0.12s ease;
}
.mobile-font-popover-close:active {
background: color-mix(in srgb, var(--color-text) 10%, transparent);
}
.mobile-font-option {
display: block;
width: 100%;
padding: 8px 12px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-size: var(--font-size-md);
text-align: left;
cursor: pointer;
transition: background 0.12s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-font-option:active,
.mobile-font-option.is-active {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
}
.mobile-font-option.is-active {
font-weight: 600;
}
.mobile-font-option[data-font="default-serif"]     { font-family: var(--font-serif); }
.mobile-font-option[data-font="crimson"]           { font-family: 'Crimson Pro', georgia, serif; }
.mobile-font-option[data-font="garamond"]          { font-family: 'EB Garamond', serif; }
.mobile-font-option[data-font="libre-baskerville"] { font-family: 'Libre Baskerville', serif; }
.mobile-font-option[data-font="playfair"]          { font-family: 'Playfair Display', serif; }
.mobile-font-option[data-font="cardo"]             { font-family: Cardo, serif; }
.mobile-font-option[data-font="im-fell"]           { font-family: 'IM Fell English', serif; }
.mobile-font-option[data-font="georgia"]           { font-family: Georgia, "Times New Roman", serif; }
.mobile-font-option[data-font="default-sans"]      { font-family: var(--font-sans); }
.mobile-typo-pill--font {
width: auto;
padding: 0 8px;
}
.mobile-font-preview {
font-size: var(--font-size-xs);
font-weight: 500;
letter-spacing: -0.2px;
white-space: nowrap;
}
}
@media (width <= 360px) {
.mobile-action-bar { gap: 6px; }
.mobile-action-btn--primary { width: 104px; margin-inline: 4px; }
.verse-interactions { padding-inline: var(--space-md); }
}
[dir="rtl"] .site-header,
[dir="rtl"] .site-nav,
[dir="rtl"] .site-nav-links,
[dir="rtl"] .dropdown-menu,
[dir="rtl"] .language-selector,
[dir="rtl"] .language-select-dropdown,
[dir="rtl"] .header-actions,
[dir="rtl"] .main-search-container,
[dir="rtl"] .passage-search-form,
[dir="rtl"] .passage-search-input-wrapper,
[dir="rtl"] #search-suggestions,
[dir="rtl"] .search-autocomplete,
[dir="rtl"] .verse-lenses-pill,
[dir="rtl"] .verse-toolbar,
[dir="rtl"] .split-button-container,
[dir="rtl"] .mobile-action-bar,
[dir="rtl"] .mobile-popover,
[dir="rtl"] .font-dropdown,
[dir="rtl"] .verse-interactions,
[dir="rtl"] .footer-wrapper,
[dir="rtl"] .footer-grid,
[dir="rtl"] .footer-col,
[dir="rtl"] .footer-links,
[dir="rtl"] .footer-bottom,
[dir="rtl"] .verse-context-section,
[dir="rtl"] .insight-unified-card,
[dir="rtl"] .insight-footer,
[dir="rtl"] .insight-meta-grid,
[dir="rtl"] .pwa-install-banner,
[dir="rtl"] .ai-pitch,
[dir="rtl"] .verse-reel-controls,
[dir="rtl"] .pace-menu,
[dir="rtl"] .typo-dropdown,
[dir="rtl"] .randomness-shuffle-actions,
[dir="rtl"] .tl-strip-actions { direction: ltr; }
[dir="rtl"] [dir="auto"] { direction: unset; }
[dir="rtl"] .randomness-tool-peek { direction: ltr; }
[dir="rtl"] .movement :is(.fa-arrow-right, .fa-chevron-right, .fa-angle-right):not(.randomness-shuffle-actions *, .tl-strip-actions *),
[dir="rtl"] .randomness-proof :is(.fa-arrow-right, .fa-chevron-right),
[dir="rtl"] .promo-tile :is(.fa-arrow-right, .fa-chevron-right),
[dir="rtl"] .tl-strip :is(.fa-arrow-right, .fa-chevron-right),
[dir="rtl"] .art-arrow,
[dir="rtl"] .feat-go i {
transform: scaleX(-1);
}
[dir="rtl"] .art-card:hover .art-arrow { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .feat-article:hover .feat-go i { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .passage-search-input { direction: rtl; text-align: right; }
[dir="rtl"] .search-explainer-popup { direction: rtl; text-align: right; }
@media (hover: none) {
.tool-button:hover:not([disabled]) {
background-color: transparent;
color: inherit;
}
.art-card:hover,
.feat-article:hover {
box-shadow: var(--shadow-sm);
border-color: var(--color-border);
}
.art-card:hover .art-arrow { opacity: 0; }
}
.verse-compare {
position: relative;
display: flex;
flex-direction: column;
padding: 0 var(--space-xl, 2rem);
}
.verse-compare-rows:not(:empty) {
padding: var(--space-sm, 0.6rem) 0 2.4rem;
}
.verse-compare-rows {
display: flex;
flex-direction: column;
gap: var(--space-sm, 0.5rem);
}
.verse-compare-row {
position: relative;
padding: 0.25rem 0;
text-align: center;
}
.verse-compare-head {
margin-bottom: var(--space-xs, 0.35rem);
}
.verse-compare-label {
font-family: var(--font-sans, sans-serif);
font-size: var(--font-size-2xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.verse-compare-close {
position: absolute;
top: 0;
right: 0;
border: none;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
padding: 0.2rem 0.35rem;
line-height: 1;
border-radius: var(--radius-sm, 4px);
transition: color 0.15s, background-color 0.15s;
}
.verse-compare-close:hover {
color: var(--color-text);
background: var(--color-surface-hover, rgb(0 0 0 / 6%));
}
.verse-compare-body { font-size: 1.0625rem; line-height: 1.6; }
.verse-compare-text {
margin: 0 auto;
max-width: var(--measure);
font-family: var(--font-serif, Georgia, serif);
color: var(--color-text);
}
@keyframes trvCompareFadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
.verse-compare-fade-in {
animation: trvCompareFadeIn 0.5s ease-out 0.22s both;
}
@media (prefers-reduced-motion: reduce) {
.verse-compare-fade-in { animation: none; }
}
.verse-compare-state {
color: var(--color-text-muted);
font-style: italic;
font-size: var(--font-size-md);
}
.verse-compare-empty {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs, 0.4rem);
width: 100%;
padding: var(--space-md, 1rem) var(--space-sm, 0.6rem);
border: none;
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-sans, sans-serif);
font-size: var(--font-size-md);
cursor: pointer;
transition: color 0.15s;
}
.verse-compare-empty:hover { color: var(--color-primary); }
.verse-compare-empty i { color: var(--color-primary); font-size: 0.9em; }
.verse-compare-rows:not(:empty) ~ .verse-compare-empty { display: none; }
.verse-compare-rows:empty ~ .verse-compare-add-wrap .verse-compare-add { display: none; }
.verse-compare-add-wrap {
position: absolute;
right: var(--space-sm, 0.6rem);
bottom: 0;
z-index: 5;
}
.verse-compare-add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
border: none;
background: transparent;
color: var(--color-text-muted);
font-size: var(--font-size-md);
border-radius: var(--radius-full, 999px);
cursor: pointer;
transition: color 0.15s, background-color 0.15s;
}
.verse-compare-add:hover {
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.verse-compare-add[hidden] {
display: none;
}
.verse-compare-picker {
position: absolute;
right: 0;
bottom: calc(100% + 0.4rem);
z-index: 30;
width: min(260px, 80vw);
max-height: 320px;
overflow-y: auto;
background: var(--color-surface-elevated, var(--color-surface));
border: 1px solid var(--color-border);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-lg, 0 8px 24px rgb(0 0 0 / 18%));
padding: 0.35rem;
}
.verse-compare-picker-list { list-style: none; margin: 0; padding: 0; }
.verse-compare-picker-group {
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-muted);
padding: 0.5rem 0.6rem 0.25rem;
}
.verse-compare-picker-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
width: 100%;
border: none;
background: transparent;
text-align: left;
padding: 0.45rem 0.6rem;
border-radius: var(--radius-sm, 5px);
cursor: pointer;
color: var(--color-text);
font-size: var(--font-size-md);
}
.verse-compare-picker-item:hover { background: var(--color-surface-hover, rgb(0 0 0 / 6%)); }
.verse-compare-picker-code {
font-size: var(--font-size-2xs);
font-weight: 600;
color: var(--color-text-muted);
}
@media (width <= 600px) {
.verse-compare { padding: 0 var(--space-md, 1rem); }
.verse-compare-body { font-size: var(--font-size-md); line-height: 1.5; }
}
.trv-modal-dialog.verse-dest-dialog {
max-width: 440px;
text-align: left;
padding: var(--space-lg);
background-image:
linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 32%, transparent) 22%, color-mix(in srgb, var(--color-accent) 30%, transparent) 78%, transparent),
var(--gradient-card);
background-repeat: no-repeat;
background-size: 100% 2px, auto;
background-position: top left, center;
}
.verse-dest-heading {
margin: 0 0 var(--space-md);
padding: var(--space-2xs) var(--space-xl) 0;
text-align: center;
font-family: var(--font-serif);
font-size: var(--font-size-xl);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--color-primary);
}
.verse-dest-heading::after {
content: "";
display: block;
width: 3rem;
height: 2px;
margin: var(--space-sm) auto 0;
border-radius: 2px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 70%, transparent), transparent);
}
.verse-dest-ask[hidden] {
display: none;
}
.verse-dest-ask {
display: flex;
align-items: center;
gap: var(--space-xs);
margin: 0 0 var(--space-md);
padding: var(--space-2xs);
padding-inline-start: var(--space-sm);
border: 1px solid color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
border-radius: var(--radius-full);
background: var(--color-surface-solid);
box-shadow: inset 0 2px 4px rgb(0 0 0 / 3%);
transition: border-color var(--transition-fast);
}
.verse-dest-ask:focus-within { border-color: var(--color-primary); }
.verse-dest-ask-icon {
flex: 0 0 auto;
color: var(--color-primary);
}
.verse-dest-ask-input {
flex: 1 1 auto;
min-width: 0;
padding: var(--space-2xs) 0;
border: 0;
background: transparent;
outline: none;
font: inherit;
font-size: var(--font-size-sm);
color: var(--color-text);
}
.verse-dest-ask-input::placeholder { color: var(--color-text-muted); }
.verse-dest-ask-input:focus,
.verse-dest-ask-input:focus-visible {
outline: none;
box-shadow: none;
}
.verse-dest-ask-send {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 0;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-primary-contrast);
cursor: pointer;
transition: background var(--transition-fast);
}
.verse-dest-ask-send:hover,
.verse-dest-ask-send:focus-visible {
background: var(--color-primary-hover);
}
html[dir="rtl"] .verse-dest-ask-send i { transform: scaleX(-1); }
.verse-dest-options {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding-top: var(--space-md);
border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.verse-dest-option {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-soft);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--transition-base), background var(--transition-base);
}
a.verse-dest-option:hover,
a.verse-dest-option:focus-visible {
border-color: var(--color-accent);
background: var(--color-surface-hover);
}
.verse-dest-option-icon {
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--color-accent) 14%, transparent);
color: var(--color-accent);
font-size: var(--font-size-md);
transition: background var(--transition-base);
}
a.verse-dest-option:hover .verse-dest-option-icon,
a.verse-dest-option:focus-visible .verse-dest-option-icon {
background: color-mix(in srgb, var(--color-accent) 24%, transparent);
}
a.verse-dest-option:hover .verse-dest-option-arrow,
a.verse-dest-option:focus-visible .verse-dest-option-arrow {
color: var(--color-accent);
}
.verse-dest-option-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.verse-dest-option-label {
font-weight: 600;
}
.verse-dest-option-desc {
font-size: var(--font-size-sm);
line-height: 1.35;
color: var(--color-text-muted);
}
.verse-dest-option-arrow {
flex: 0 0 auto;
align-self: center;
font-size: 1.25rem;
line-height: 1;
color: var(--color-text-muted);
}
.verse-dest-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
margin-top: var(--space-2xs);
}
.verse-dest-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
padding: var(--space-2xs) var(--space-xs);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-solid);
color: var(--color-text);
text-decoration: none;
font-weight: 600;
font-variant-numeric: tabular-nums;
transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.verse-dest-chip:hover,
.verse-dest-chip:focus-visible {
border-color: var(--color-accent);
background: var(--color-surface-hover);
color: var(--color-accent);
}
.verse-dest-note {
display: block;
margin-top: var(--space-2xs);
font-size: var(--font-size-2xs);
font-style: italic;
color: var(--color-text-muted);
}
.verse-dest-option--ai {
border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-soft));
}
.verse-dest-option--ai .verse-dest-option-icon {
background: color-mix(in srgb, var(--color-primary) 16%, transparent);
color: var(--color-primary);
}
a.verse-dest-option--ai:hover,
a.verse-dest-option--ai:focus-visible {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface-soft));
}
a.verse-dest-option--ai:hover .verse-dest-option-icon,
a.verse-dest-option--ai:focus-visible .verse-dest-option-icon {
background: color-mix(in srgb, var(--color-primary) 26%, transparent);
}
a.verse-dest-option--ai:hover .verse-dest-option-arrow,
a.verse-dest-option--ai:focus-visible .verse-dest-option-arrow {
color: var(--color-primary);
}
@media (width <= 380px) {
.verse-dest-option { padding: var(--space-xs) var(--space-sm); gap: var(--space-xs); }
.verse-dest-option-arrow { display: none; }
}
.page-main {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-lg);
padding-inline: var(--space-md);
padding-block: var(--space-lg) 0;
}
.main-search-container { max-width: var(--rail-hero); width: 100%; }
.ai-pitch { max-width: var(--rail-hero); width: 100%; margin: 0; }
.content-modules-container {
width: 100%;
max-width: var(--rail-content);
display: flex;
flex-direction: column;
gap: var(--space-xl);
padding-block-end: var(--space-xl);
}
.content-modules-container > * { margin: 0; }
.lectern-card {
position: relative;
width: 100%;
max-width: var(--rail-page);
display: flex;
flex-direction: column;
padding: 0;
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
border-radius: var(--radius-xl);
background: var(--gradient-card);
box-shadow: var(--shadow-lg), var(--ring-raised);
overflow: visible;
}
.lectern-card::before {
content: "";
position: absolute;
inset-inline: var(--radius-xl);
top: -1px;
height: 1px;
background: var(--edge-catch);
opacity: 0.9;
pointer-events: none;
}
.verse-reel-viewport > * { position: relative; z-index: var(--z-base); }
.lectern-card > :is(.lectern-seam, .verse-reel-viewport, .verse-lenses, .verse-interactions, .verse-toolbar, .verse-reel-nav) {
position: relative;
z-index: var(--z-base);
}
.lectern-seam {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-block-end: 1px solid var(--lectern-seam);
}
.seam-state { display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.seam-state .seam-vibe {
display: inline-flex;
align-items: center;
gap: 5px;
padding-inline-start: var(--space-sm);
border-inline-start: 1px solid var(--lectern-seam);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.seam-state .seam-vibe[hidden] { display: none; }
.seam-state .seam-vibe::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentcolor; }
.seam-version {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.seam-ordinal[hidden] { display: none; }
.seam-ordinal {
display: inline-flex;
align-items: baseline;
gap: 5px;
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.seam-ordinal-n { font-size: var(--font-size-2xs); font-weight: 700; color: var(--color-text-muted); }
.verse-reel-viewport { min-height: 0; padding: var(--space-lg) var(--space-lg) var(--space-md); }
.verse-reel-track { min-height: 168px; display: flex; align-items: center; }
.verse-reel-slide { width: 100%; }
.verse-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.verse-content figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); width: 100%; }
.verse-text { max-width: 50rem; margin: 0; text-align: center; text-wrap: pretty; }
.verse-reference { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.verse-reference-link {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text);
}
.verse-reference-link-icon { margin-inline-start: 0.45em; font-size: 0.62em; opacity: 0.45; }
.verse-reference-link:hover .verse-reference-link-icon { opacity: 0.85; }
.verse-passage-context {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: min(100%, 42ch);
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
text-decoration: none;
text-align: center;
}
.verse-passage-context:hover { color: var(--color-primary); }
.verse-lenses { padding-inline: var(--space-md); }
.verse-lenses-pill {
display: flex;
justify-content: center;
gap: 2px;
padding: 3px;
margin-inline: auto;
width: fit-content;
max-width: 100%;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-surface-solid) 55%, transparent);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
}
.lens-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border: 0;
border-radius: var(--radius-full);
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 600;
letter-spacing: 0.03em;
cursor: pointer;
white-space: nowrap;
transition: color var(--transition-fast), background var(--transition-fast);
}
.lens-tab i, .lens-tab .insight-icon { font-size: 0.85em; }
.lens-tab:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.lens-tab[aria-selected="true"] {
color: var(--color-primary-contrast);
background: var(--color-primary);
box-shadow: 0 1px 6px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.verse-lenses-panels { margin-top: var(--space-md); }
.lens-panel { display: none; }
.lens-panel.is-open { display: block; }
.lens-panel.is-open .lens-panel-inner { margin-block-end: var(--space-md); }
.lens-panel-inner {
max-width: var(--measure);
margin-inline: auto;
padding: var(--space-md);
border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-surface-solid) 70%, transparent);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
font-size: var(--font-size-md);
line-height: 1.65;
}
.lens-context-wrapper .peek-vline { display: flex; gap: var(--space-sm); padding-block: 3px; }
.lens-context-wrapper .peek-vn { flex: none; min-width: 2ch; text-align: end; font-variant-numeric: tabular-nums; font-size: var(--font-size-2xs); color: var(--color-text-muted); text-decoration: none; }
.lens-context-wrapper .peek-vt { font-family: var(--font-serif); }
.lens-context-wrapper .peek-vline--hl { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-radius: var(--radius-sm); }
.lens-loading, .lens-empty { margin: 0; text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); }
@media (width <= 715px) {
.lens-panel-inner :is(
.echoes-lenses,
.echoes-lens,
.insight-body,
.verse-compare
) { padding-inline: 0; }
}
.verse-interactions { padding: var(--space-md) var(--space-md) var(--space-sm); }
.verse-interactions__row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2px;
}
.verse-interactions .reaction-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
flex: 0 0 auto;
width: auto;
height: auto;
min-width: 0;
padding: 5px 8px;
border: 0;
border-radius: var(--radius-full);
background: transparent;
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--color-text-muted);
opacity: 0.5;
cursor: pointer;
transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.verse-interactions .reaction-button:hover,
.verse-interactions .reaction-button:focus-visible { opacity: 1; background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.verse-interactions .reaction-button.active { opacity: 1; color: var(--color-text); }
.verse-interactions .reaction-button__icon { width: 1.05rem; height: 1.05rem; opacity: 1; }
.verse-interactions .reaction-button:active { transform: scale(0.94); }
.verse-interactions .reaction-button.active .reaction-button__icon { animation: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) pop; }
@media (prefers-reduced-motion: reduce) {
.verse-interactions .reaction-button.active .reaction-button__icon { animation: none; }
}
.verse-interactions { border-top: 0; background: none; }
.verse-interactions::before {
inset-block-start: 0;
left: 50%;
right: auto;
width: 116px;
height: 1px;
transform: translateX(-50%);
background: var(--lectern-seam);
}
.verse-interactions .reaction-button__count {
position: static;
min-width: 0;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
font: inherit;
line-height: 1;
color: inherit;
}
.verse-interactions .reaction-button__count:empty { display: none; }
.verse-interactions .reaction-button.active { background: color-mix(in srgb, var(--rx, var(--color-primary)) 14%, transparent); color: var(--rx, var(--color-primary)); }
.verse-interactions .reaction-button[data-type="heart"] { --rx: var(--color-reaction-heart); }
.verse-interactions .reaction-button[data-type="prayer"] { --rx: var(--color-reaction-prayer); }
.verse-interactions .reaction-button[data-type="crown"] { --rx: var(--color-reaction-crown); }
.verse-interactions .reaction-button[data-type="cross_emoji"] { --rx: var(--color-reaction-cross); }
.verse-interactions .reaction-button[data-type="sparkles"] { --rx: var(--color-reaction-sparkles); }
.verse-interactions .reaction-button[data-type="praise_emoji"] { --rx: var(--color-accent); }
@media (width <= 480px) {
.verse-interactions { padding-inline: var(--space-sm); }
.verse-interactions__row { gap: 0; }
.verse-interactions .reaction-button { gap: 4px; padding: 5px; }
.verse-interactions .reaction-button__icon { width: 1rem; height: 1rem; }
}
.verse-toolbar.console {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
margin: 0;
padding: 11px var(--space-md);
border-block-start: 1px solid var(--lectern-seam);
background: color-mix(in srgb, var(--color-text) 2.5%, transparent);
border-radius: 0;
}
.console-group { display: flex; align-items: center; gap: var(--space-xs); }
.console-group--read { flex: 1 1 0; min-width: fit-content; justify-content: flex-start; }
.console-group--draw { flex: 0 0 auto; }
.console-group--keep { flex: 1 1 0; min-width: fit-content; justify-content: flex-end; }
.console-controls { display: flex; align-items: center; gap: var(--space-xs); }
.console-step {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 34px;
height: 34px;
border: 0;
border-radius: var(--radius-full);
background: none;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.console-step:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.console-step:disabled { opacity: 0.25; cursor: default; }
.console-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-surface-solid) 55%, transparent);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.console-btn > i, .console-btn .typo-aa { font-size: var(--font-size-md); color: var(--color-text-muted); transition: color var(--transition-fast); }
.console-btn .typo-aa { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.02em; }
.console-btn:hover { border-color: var(--color-primary); background: var(--color-primary-active-bg); }
.console-btn:hover > i, .console-btn:hover .typo-aa { color: var(--color-primary); }
.console-btn:disabled { opacity: 0.4; cursor: default; }
.console-btn.is-active,
.console-btn[aria-expanded="true"] { border-color: var(--color-primary); background: var(--color-primary-active-bg); color: var(--color-primary); }
.console-btn.is-active > i { color: var(--color-primary); }
.console-btn:has(> .console-btn-label) { width: auto; padding: 0 13px; }
.console-btn--history { width: auto; padding: 0 13px; }
.console-btn--history .console-history-count { font-variant-numeric: tabular-nums; font-size: var(--font-size-sm); }
.console-btn[hidden], .console-dock-btn[hidden] { display: none; }
.console-btn--mood.is-active { border-color: var(--color-primary); }
@media (width <= 900px) {
.verse-toolbar.console { gap: var(--space-xs); padding: 9px var(--space-sm); }
.console-group, .console-controls { gap: 6px; }
.console-btn { width: 40px; height: 40px; }
.console-btn:has(> .console-btn-label) { padding: 0 11px; }
.console-btn > i, .console-btn .typo-aa { font-size: var(--font-size-sm); }
.console-step { width: 30px; height: 30px; }
.next-verse-button.split-main,
.split-toggle { height: 46px; }
.next-verse-button.split-main { padding: 0 18px; font-size: var(--font-size-md); }
.next-verse-button.split-main .icon { font-size: var(--font-size-md); }
.split-toggle { min-width: 46px; }
.split-button-container:has(.split-toggle.is-active) .next-verse-button.split-main { padding: 0 13px; }
}
@media (width <= 820px) {
.console-btn--history:has(> .console-btn-label) { width: 40px; padding: 0; gap: 0; }
.console-btn--history .console-history-count { display: none; }
}
@media (width <= 780px) {
.console-btn.typo-trigger .console-btn-label,
.console-btn--mood .console-btn-label { display: none; }
.console-btn.typo-trigger, .console-btn--mood { width: 40px; padding: 0; gap: 0; }
}
.mood-dot {
width: 10px;
height: 10px;
flex: none;
border-radius: 50%;
border: 2px solid var(--mood, color-mix(in srgb, var(--color-text-muted) 65%, transparent));
background: var(--mood, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--mood, transparent) 25%, transparent);
transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.console-group--draw .split-button-container { flex: 0 0 auto; }
.pace-menu {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
z-index: var(--z-popover);
width: 262px;
padding: var(--space-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-menu);
backdrop-filter: var(--glass-blur-heavy);
-webkit-backdrop-filter: var(--glass-blur-heavy);
box-shadow: var(--shadow-xl), var(--ring-raised);
}
.pace-menu[hidden] { display: none; }
.console-group--draw { position: relative; }
.pace-start {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: 10px var(--space-sm);
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: 600;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.pace-start:hover { background: var(--color-primary-active-bg); color: var(--color-primary); }
.pace-start > i { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.pace-start:hover > i { color: var(--color-primary); }
.pace-start.is-running { color: var(--color-danger); }
.pace-start.is-running > i { color: var(--color-danger); }
.pace-menu-sep { height: 1px; margin: var(--space-xs) 0; background: var(--lectern-seam); }
.pace-menu-head {
padding: var(--space-xs) var(--space-sm) 6px;
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.pace-opt {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0 var(--space-sm);
width: 100%;
padding: 8px var(--space-sm);
border: 0;
border-radius: var(--radius-md);
background: transparent;
text-align: start;
cursor: pointer;
transition: background var(--transition-fast);
}
.pace-opt:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.pace-opt[aria-pressed="true"] { background: var(--color-primary-active-bg); }
.pace-opt-name { font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: 600; color: var(--color-text); }
.pace-opt[aria-pressed="true"] .pace-opt-name { color: var(--color-primary); }
.pace-opt-desc { grid-column: 1; font-family: var(--font-sans); font-size: var(--font-size-2xs); color: var(--color-text-muted); }
.pace-opt-check { grid-column: 2; grid-row: 1 / span 2; font-size: var(--font-size-sm); color: var(--color-primary); opacity: 0; }
.pace-opt[aria-pressed="true"] .pace-opt-check { opacity: 1; }
@media (width <= 715px) {
.pace-menu { width: min(262px, calc(100vw - 24px)); }
}
.typo-dropdown, .vibe-dropdown {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-menu);
backdrop-filter: var(--glass-blur-heavy);
-webkit-backdrop-filter: var(--glass-blur-heavy);
box-shadow: var(--shadow-xl), var(--ring-raised);
z-index: var(--z-dropdown);
}
.typo-section + .typo-section { border-block-start: 1px solid var(--lectern-seam); }
.typo-section-label {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.size-slider-wrapper { display: flex; align-items: center; gap: var(--space-sm); }
.size-step {
display: inline-flex;
align-items: flex-end;
justify-content: center;
gap: 1px;
flex: none;
width: 38px;
height: 34px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text);
font-family: var(--font-serif);
font-size: var(--font-size-sm);
line-height: 1;
cursor: pointer;
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.size-step--large { font-size: var(--font-size-lg); }
.size-step-sign { font-family: var(--font-sans); font-size: var(--font-size-3xs); }
.size-step:hover { border-color: var(--color-primary); background: var(--color-primary-active-bg); color: var(--color-primary); }
.typo-style-section { display: flex; gap: var(--space-xs); }
.typo-style-btn[hidden] { display: none; }
.typo-style-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex: 1 1 0;
min-width: 0;
height: 36px;
padding: 0 var(--space-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.typo-style-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.typo-style-btn.is-active,
.typo-style-btn[aria-pressed="true"] {
border-color: var(--color-primary);
background: var(--color-primary-active-bg);
color: var(--color-primary);
}
.typo-dropdown ul { display: block; list-style: none; margin: 0; padding: 0; columns: auto; grid-template-columns: none; }
.typo-dropdown ul > li { display: block; width: 100%; }
.font-option {
display: block;
width: 100%;
padding: 8px var(--space-sm);
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text);
font-size: var(--font-size-md);
text-align: start;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.font-option:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.font-option.is-active,
.font-option.active { background: var(--color-primary-active-bg); color: var(--color-primary); font-weight: 600; }
.font-option[data-font="default-serif"], .mobile-font-option[data-font="default-serif"] { font-family: merriweather, serif; }
.font-option[data-font="crimson"] { font-family: "Crimson Pro", serif; }
.font-option[data-font="garamond"] { font-family: "EB Garamond", serif; }
.font-option[data-font="libre-baskerville"] { font-family: "Libre Baskerville", serif; }
.font-option[data-font="playfair"] { font-family: "Playfair Display", serif; }
.font-option[data-font="cardo"] { font-family: cardo, serif; }
.font-option[data-font="im-fell"] { font-family: "IM Fell English", serif; }
.font-option[data-font="georgia"] { font-family: georgia, serif; }
.font-option[data-font="default-sans"] { font-family: var(--font-sans); }
.typo-ambience-section .environment-suboptions { padding-inline-start: var(--space-sm); }
.vibe-apply-hint {
margin: 0;
padding: var(--space-sm) var(--space-md) var(--space-md);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
text-align: center;
}
.vibe-panel-mobile { display: block; }
.vibe-panel-mobile .vibe-pills { padding-inline: var(--space-sm); }
.vibe-panel-mobile .vibe-panel-head { padding: 0 var(--space-sm); margin-bottom: var(--space-sm); }
.vibe-panel-mobile .vibe-apply-hint { padding: var(--space-sm) var(--space-sm) 0; }
.mobile-popover--font { padding: 0; max-height: 60vh; overflow-y: auto; width: min(280px, calc(100vw - 32px)); }
.mobile-font-popover-header {
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-md) var(--space-md) var(--space-sm);
background: var(--color-surface-solid);
border-block-end: 1px solid var(--lectern-seam);
z-index: var(--z-base);
}
.mobile-font-popover-title {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.mobile-font-popover-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 0;
border-radius: var(--radius-full);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
}
.mobile-font-option {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 11px var(--space-md);
border: 0;
background: transparent;
color: var(--color-text);
font-size: var(--font-size-md);
text-align: start;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.mobile-font-option + .mobile-font-option { border-block-start: 1px solid color-mix(in srgb, var(--color-border) 35%, transparent); }
.mobile-font-option:hover { background: var(--color-primary-active-bg); }
.mobile-font-option.is-active { color: var(--color-primary); font-weight: 600; }
.mobile-font-option.is-active::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: var(--font-size-2xs); }
.mobile-font-option[data-font="default-serif"] { font-family: merriweather, serif; }
.mobile-font-option[data-font="crimson"] { font-family: "Crimson Pro", serif; }
.mobile-font-option[data-font="garamond"] { font-family: "EB Garamond", serif; }
.mobile-font-option[data-font="libre-baskerville"] { font-family: "Libre Baskerville", serif; }
.mobile-font-option[data-font="playfair"] { font-family: "Playfair Display", serif; }
.mobile-font-option[data-font="cardo"] { font-family: cardo, serif; }
.mobile-font-option[data-font="im-fell"] { font-family: "IM Fell English", serif; }
.mobile-font-option[data-font="georgia"] { font-family: georgia, serif; }
.mobile-font-option[data-font="default-sans"] { font-family: var(--font-sans); }
.save-favorite-trigger:has(> i.fas.fa-heart) {
border-color: color-mix(in srgb, var(--color-reaction-heart) 55%, transparent);
background: color-mix(in srgb, var(--color-reaction-heart) 14%, transparent);
color: var(--color-reaction-heart);
}
.save-favorite-trigger > i.fas.fa-heart { color: var(--color-reaction-heart); }
.save-favorite-trigger:hover > i.fas.fa-heart { color: var(--color-reaction-heart); }
.verse-reel-nav { padding: 0 var(--space-md) var(--space-md); }
.verse-reel-nav > .verse-reel-controls { display: none; }
.verse-reel-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.verse-reel-engagement { display: inline-flex; gap: 2px; }
.verse-reel-history-controls {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-surface-solid) 45%, transparent);
}
.verse-reel-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 32px;
height: 32px;
padding: 0 9px;
border: 0;
border-radius: var(--radius-full);
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 600;
cursor: pointer;
transition: color var(--transition-fast), background var(--transition-fast);
}
.verse-reel-btn:hover:not(:disabled) { color: var(--color-primary); background: var(--color-primary-active-bg); }
.verse-reel-btn:disabled { opacity: 0.35; cursor: default; }
.verse-reel-list-head {
position: sticky;
top: 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-md) var(--space-md) var(--space-sm);
background: var(--color-surface-solid);
border-block-end: 1px solid var(--lectern-seam);
z-index: var(--z-base);
}
.verse-reel-list-title,
.verse-reel-list-day-label {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text);
}
.verse-reel-list-summary,
.verse-reel-list-day-count {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
white-space: nowrap;
}
.verse-reel-list-day {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-md) var(--space-md) 6px;
}
.verse-reel-list-day-label { color: var(--color-text-muted); }
.verse-reel-list-item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: baseline;
gap: 4px var(--space-sm);
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 0;
background: transparent;
text-align: start;
cursor: pointer;
transition: background var(--transition-fast);
}
.verse-reel-list-item:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.verse-reel-list-item.is-active { background: var(--color-primary-active-bg); }
.verse-reel-list-item.is-active .verse-reel-list-ref { color: var(--color-primary); }
.verse-reel-list-badge {
grid-row: 1;
padding: 1px 5px;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--color-text) 8%, transparent);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.verse-reel-list-ref { grid-row: 1; font-family: var(--font-display); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.verse-reel-list-time { grid-row: 1; font-family: var(--font-sans); font-size: var(--font-size-3xs); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.verse-reel-list-preview { grid-column: 2 / -1; grid-row: 2; font-family: var(--font-serif); font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-muted); }
.verse-reel-position { padding-inline: 6px; font-family: var(--font-sans); font-size: var(--font-size-2xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-muted); }
.reel-btn-label { display: none; }
.mobile-action-bar.console-dock {
display: none;
align-items: stretch;
justify-content: space-between;
gap: var(--space-sm);
padding-inline: var(--space-sm);
}
.console-dock-group { display: flex; align-items: stretch; gap: var(--space-xs); flex: 1 1 0; min-width: 0; }
.console-dock-group:last-of-type { justify-content: flex-end; }
.console-dock-btn, .console-dock-next {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
flex: 1 1 0;
min-width: 0;
height: var(--dock-bar-item);
padding: 0 6px;
border: 0;
cursor: pointer;
transition: color var(--transition-fast), background var(--transition-fast);
}
.console-dock-btn {
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-muted);
}
.console-dock-btn > i, .console-dock-btn .mobile-typo-icon { font-size: var(--font-size-lg); line-height: 1; }
.console-dock-btn .mobile-typo-icon { font-family: var(--font-serif); font-weight: 600; }
.console-dock-label {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
}
.console-dock-btn:hover, .console-dock-btn.is-active { color: var(--color-primary); background: var(--color-primary-active-bg); }
.console-dock-next {
flex: 0 0 auto;
flex-direction: row;
gap: 7px;
padding-inline: var(--space-md);
}
.console-dock-next .console-dock-label { font-size: var(--font-size-2xs); font-weight: 700; }
.console-dock-next:hover { color: var(--color-primary-contrast); }
.mobile-pop-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-md) var(--space-sm);
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.movement { display: flex; flex-direction: column; gap: var(--space-md); width: 100%; min-width: 0; }
.movement[hidden] { display: none; }
#movement-keep:not(:has(.promo-slot > *:not([hidden]))) { display: none; }
.randomness-suite-divider { display: flex; align-items: baseline; gap: var(--space-sm); width: 100%; }
.randomness-suite-roman {
font-family: var(--font-display);
font-size: var(--font-size-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--color-accent);
letter-spacing: 0.04em;
}
.randomness-suite-label {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text);
}
.randomness-suite-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-border), transparent); }
.randomness-suite-count {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
white-space: nowrap;
}
.movement-lede {
max-width: var(--measure);
margin: 0;
font-family: var(--font-serif);
font-size: var(--font-size-md);
line-height: 1.6;
color: var(--color-text-muted);
}
.ctx-card, .randomness-deeper-card, .promo-tile, .tl-strip, .feat-article, .articles-grid {
position: relative;
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-surface-solid) 66%, transparent);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-sm);
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.ctx-card:hover, .randomness-deeper-card:hover, .promo-tile:hover, .feat-article:hover {
border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
box-shadow: var(--shadow-md);
}
.ctx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.ctx-card { display: flex; flex-direction: column; gap: var(--space-sm); min-height: 0; padding: var(--space-md); }
.ctx-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.randomness-deeper-shuffle-title {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.ctx-card-ref { font-family: var(--font-display); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary); white-space: nowrap; }
.ctx-card .randomness-shuffle-peek {
font-family: var(--font-serif);
font-size: var(--font-size-xs);
line-height: 1.55;
color: var(--color-text-muted);
max-height: 5.4em;
overflow: hidden;
padding: 0;
border: 0;
background: none;
mask-image: linear-gradient(180deg, #000 62%, transparent);
-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
}
.ctx-card .randomness-shuffle-peek::before { content: none; }
.ctx-card.is-expanded .randomness-shuffle-peek { display: none; }
.ctx-card .randomness-shuffle-full { font-family: var(--font-serif); font-size: var(--font-size-xs); line-height: 1.6; max-height: 340px; overflow-y: auto; }
.randomness-shuffle-actions { display: flex; align-items: center; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-xs); }
.randomness-shuffle-expand, .randomness-shuffle-open, .randomness-shuffle-roll {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 30px;
padding: 0 11px;
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
border-radius: var(--radius-full);
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.randomness-shuffle-roll { min-width: 30px; padding: 0; margin-inline-start: auto; }
.randomness-shuffle-expand:hover, .randomness-shuffle-open:hover, .randomness-shuffle-roll:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-primary-active-bg);
}
.tl-strip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-md); }
.tl-strip[hidden] { display: none; }
.tl-strip-body { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.tl-strip-icon { font-size: var(--font-size-xl); color: var(--color-accent); }
.tl-strip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-strip-label { font-size: var(--font-size-3xs); font-weight: 700; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-accent); }
.tl-strip-title { font-family: var(--font-display); font-size: var(--font-size-md); font-weight: 600; color: var(--color-text); }
.tl-strip-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.tl-strip-desc:empty { display: none; }
.tl-strip-meter { grid-column: 1 / -1; height: 3px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-border) 60%, transparent); overflow: hidden; }
.tl-strip-meter > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transition: width var(--transition-base); }
.tl-strip-go { display: inline-flex; align-items: center; gap: 7px; padding: 0 15px; height: 36px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-contrast); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.articles { display: flex; flex-direction: column; gap: var(--space-md); counter-reset: art; }
.feat-article { display: block; padding: var(--space-lg); text-decoration: none; color: inherit; }
.feat-body { display: flex; flex-direction: column; gap: var(--space-sm); }
.feat-tagrow { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; min-width: 0; }
.feat-tagrow::before {
counter-increment: art;
content: counter(art, decimal-leading-zero);
font-family: var(--font-display);
font-size: var(--font-size-2xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
}
.feat-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-accent);
}
.feat-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }
.art-cat {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
max-width: 100%;
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: 600;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--cat, var(--color-primary));
}
.art-cat::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentcolor; }
.art-cat > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feat-title { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 700; line-height: 1.25; color: var(--color-text); text-wrap: balance; }
.feat-dek { font-family: var(--font-serif); font-size: var(--font-size-sm); line-height: 1.6; color: var(--color-text-muted); max-width: var(--measure); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feat-go { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary); }
.feat-go i { transition: transform var(--transition-fast); }
.feat-article:hover .feat-go i { transform: translateX(3px); }
.articles-grid { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.art-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
border: 0;
border-radius: 0;
text-decoration: none;
color: inherit;
background: transparent;
box-shadow: none;
transition: background var(--transition-fast);
}
.art-card > * { min-width: 0; }
.art-card .art-title { overflow-wrap: anywhere; }
.art-card + .art-card { border-block-start: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent); }
.art-card:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); box-shadow: none; }
.art-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.art-card::before {
counter-increment: art;
content: counter(art, decimal-leading-zero);
position: static;
inset: auto;
width: auto;
height: auto;
background: none;
border-radius: 0;
opacity: 1;
font-family: var(--font-display);
font-size: var(--font-size-2xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
}
.art-title { font-family: var(--font-display); font-size: var(--font-size-md); font-weight: 600; line-height: 1.35; color: var(--color-text); }
.art-card .art-cat { display: none; }
.art-arrow { font-size: var(--font-size-xs); color: var(--color-text-muted); transition: transform var(--transition-fast), color var(--transition-fast); }
.art-card:hover .art-arrow { color: var(--color-primary); transform: translateX(3px); }
.randomness-deeper-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.randomness-deeper-card {
display: flex;
flex-direction: column;
gap: var(--space-sm);
height: 100%;
min-height: 0;
padding: var(--space-md);
text-decoration: none;
color: inherit;
}
.randomness-deeper-card-title { font-family: var(--font-display); font-size: var(--font-size-md); font-weight: 600; color: var(--color-text); }
.randomness-tool-peek {
height: 62px;
min-height: 0;
padding: var(--space-sm);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-text) 5%, transparent);
font-size: var(--font-size-3xs);
line-height: 1.45;
color: var(--color-text-muted);
overflow: hidden;
mask-image: linear-gradient(180deg, #000 74%, transparent);
-webkit-mask-image: linear-gradient(180deg, #000 74%, transparent);
}
.randomness-deeper-card::after {
content: "";
position: absolute;
inset-inline-end: var(--space-md);
top: var(--space-md);
width: 6px; height: 6px;
border-block-start: 1.5px solid var(--color-text-muted);
border-inline-end: 1.5px solid var(--color-text-muted);
transform: rotate(45deg);
opacity: 0.5;
transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.randomness-deeper-card:hover::after { opacity: 1; border-color: var(--color-primary); }
.promo-slot { display: block; }
.promo-tile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-lg); padding: var(--space-lg); overflow: hidden; }
.promo-tile[hidden] { display: none; }
.promo-tile-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.promo-tile-label { font-family: var(--font-sans); font-size: var(--font-size-3xs); font-weight: 700; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-accent); }
.promo-tile-title { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); }
.promo-tile-desc { font-size: var(--font-size-sm); line-height: 1.55; color: var(--color-text-muted); max-width: 46ch; }
.promo-tile-actions { display: inline-flex; align-items: center; gap: var(--space-md); margin-top: 5px; flex-wrap: wrap; }
.promo-tile-primary { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-contrast); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 600; }
.promo-tile-secondary { position: relative; z-index: var(--z-base); font-size: var(--font-size-sm); color: var(--color-text-muted); text-decoration: none; border-block-end: 1px solid var(--color-border); }
.promo-tile-secondary:hover { color: var(--color-primary); border-color: var(--color-primary); }
.promo-tile-shot { display: block; width: auto; max-height: 128px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.promo-tile-hit { position: absolute; inset: 0; z-index: 0; }
.randomness-proof.randomness-proof--line {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
border: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-surface-solid) 40%, transparent);
box-shadow: none;
}
.randomness-proof--line .randomness-proof-badge { font-size: var(--font-size-lg); color: var(--color-accent); flex: none; }
.randomness-proof--line .randomness-proof-body { margin: 0; font-size: var(--font-size-xs); line-height: 1.55; color: var(--color-text-muted); }
.randomness-proof--line .randomness-proof-body code { font-family: var(--font-mono); font-size: 0.92em; color: var(--color-text); }
.randomness-proof--line .randomness-archive-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: 600; color: var(--color-primary); text-decoration: none; margin-inline-start: auto; }
.randomness-proof--line .randomness-archive-link { border-bottom: 0; padding-bottom: 0; }
.randomness-proof--line .randomness-archive-link:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.trv-homepage-flourish { text-align: center; font-size: var(--font-size-lg); letter-spacing: 0.5em; color: color-mix(in srgb, var(--color-text-muted) 45%, transparent); }
body.env-active .page-content .lectern-card {
border-color: color-mix(in srgb, #fff 26%, transparent);
background:
linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 45%),
color-mix(in srgb, var(--color-bg-start) 52%, transparent);
backdrop-filter: var(--glass-blur-heavy);
-webkit-backdrop-filter: var(--glass-blur-heavy);
box-shadow:
0 28px 70px hsl(220deg 50% 2% / 46%),
0 0 0 1px color-mix(in srgb, #fff 12%, transparent) inset;
}
@media (width <= 715px) {
body.env-active .page-content .lectern-card {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background:
linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 45%),
color-mix(in srgb, var(--color-bg-start) 78%, transparent);
}
}
body.env-active .page-content .lectern-card::before { opacity: 1; }
body.env-active .page-content .lectern-card::after { opacity: 0.55; }
body.env-active .page-content .verse-text::before { content: none; }
body.env-active .page-content .verse-text { text-shadow: 0 1px 22px hsl(220deg 40% 3% / 55%); }
body.env-active .page-content .lectern-seam { border-block-end-color: color-mix(in srgb, #fff 16%, transparent); }
body.env-active .page-content .verse-toolbar.console { border-block-start-color: color-mix(in srgb, #fff 16%, transparent); }
body.env-active .page-content .console-btn,
body.env-active .page-content .verse-lenses-pill,
body.env-active .page-content .verse-reel-history-controls {
border-color: color-mix(in srgb, #fff 22%, transparent);
background: color-mix(in srgb, #000 22%, transparent);
}
body.env-active .page-content .ctx-card,
body.env-active .page-content .randomness-deeper-card,
body.env-active .page-content .promo-tile,
body.env-active .page-content .articles-grid,
body.env-active .page-content .tl-strip,
body.env-active .page-content .feat-article {
border-color: color-mix(in srgb, #fff 16%, transparent);
background: color-mix(in srgb, var(--color-bg-start) 55%, transparent);
backdrop-filter: var(--glass-blur-heavy);
-webkit-backdrop-filter: var(--glass-blur-heavy);
}
@media (width <= 715px) {
.page-main { gap: var(--space-md); padding-inline: var(--space-sm); }
.content-modules-container { gap: var(--space-lg); }
.lectern-card { border-radius: var(--radius-lg); }
.lectern-card::before { inset-inline: var(--radius-lg); }
.verse-reel-viewport { padding: var(--space-md) var(--space-md) var(--space-sm); }
.verse-content { padding-block: var(--space-md); }
.verse-content figure { gap: var(--space-sm); }
.verse-text { padding-block: var(--space-sm); }
.verse-text::after { display: none; }
.verse-reference { margin-top: var(--space-sm); padding-top: var(--space-md); }
.verse-toolbar.console { display: none; }
.mobile-action-bar.console-dock { display: flex; }
.verse-reel-nav { padding-inline: var(--space-sm); }
.verse-reel-nav > .verse-reel-controls { display: flex; justify-content: space-between; gap: var(--space-xs); }
.verse-reel-btn { flex-direction: column; gap: 2px; min-width: 44px; height: 42px; padding: 0 4px; }
.reel-btn-label { display: block; font-size: var(--font-size-3xs); font-weight: 600; }
.verse-reel-history-controls .verse-reel-btn { flex-direction: row; height: 32px; min-width: 30px; }
.lens-tab { padding: 7px 10px; font-size: var(--font-size-3xs); }
.ctx-pair { grid-template-columns: 1fr; }
.randomness-deeper-grid { grid-template-columns: 1fr; }
.feat-article { padding: var(--space-md); }
.feat-title { font-size: var(--font-size-lg); }
.promo-tile { gap: var(--space-md); padding: var(--space-md); }
.promo-tile:has(.promo-tile-shot) { grid-template-columns: 1fr auto; }
.promo-tile:not(:has(.promo-tile-shot)) { grid-template-columns: 1fr; }
.promo-tile-shot { max-height: 108px; align-self: center; }
.tl-strip { grid-template-columns: 1fr; }
.tl-strip-go { justify-self: start; }
.randomness-proof.randomness-proof--line { flex-wrap: wrap; gap: var(--space-sm); }
.randomness-proof--line .randomness-archive-link { margin-inline-start: 0; }
.randomness-suite-count { display: none; }
}
@media (width <= 640px) {
.verse-passage-context { font-size: var(--font-size-3xs); }
.art-card { gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
}
@media (width <= 380px) {
.verse-interactions .reaction-button { padding: 5px 4px; gap: 3px; }
.verse-interactions__row { gap: 0; }
.verse-interactions .reaction-button__icon { width: 0.95rem; height: 0.95rem; }
.console-dock-label { font-size: 9px; }
.console-dock-next { min-width: 96px; padding-inline: var(--space-sm); }
.reel-btn-label { display: none; }
.verse-reel-btn { flex-direction: row; height: 34px; min-width: 34px; }
}