*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
line-height: 1.6;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
scrollbar-gutter: stable;
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));
text-wrap: pretty;
font-feature-settings: "kern" 1, "liga" 1;
letter-spacing: 0.01em;
}
img, svg, video, picture {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover, a:focus-visible {
color: var(--color-primary-hover);
}
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
box-shadow: none;
}
.text--red-letter {
color: var(--color-red-letter);
font-weight: 500;
text-shadow: 0 0 10px color-mix(in srgb, var(--color-red-letter) 8%, transparent);
}
:target, h1, h2, h3, section, [id] {
scroll-margin-top: var(--scroll-offset);
}
.std-layout {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
.ethereal-wrapper {
position: fixed;
inset: 0;
z-index: -1;
transition: background-position var(--transition-smooth);
}
.trv-breadcrumb-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin: 0 0 var(--space-lg);
}
.trv-breadcrumb-row .trv-breadcrumbs { margin: 0; }
.trv-page-actions { position: relative; flex-shrink: 0; }
.trv-page-actions-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 14px 0 10px;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: transparent;
cursor: pointer;
transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
color: var(--color-text-muted);
font-size: 0.875rem;
}
.trv-page-actions-label {
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.01em;
}
.trv-page-actions-btn .fa-ellipsis-vertical { display: none; }
@media (width <= 640px) {
.trv-page-actions-btn {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
}
.trv-page-actions-btn .fa-ellipsis-vertical { display: inline-block; }
.trv-page-actions-label { display: none; }
}
.trv-page-actions-btn:hover {
border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.trv-page-actions.is-open .trv-page-actions-btn {
border-color: var(--color-primary);
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.dark-mode .trv-page-actions-btn {
color: var(--color-text-muted);
border-color: var(--color-border);
background: transparent;
}
.dark-mode .trv-page-actions-btn:hover,
.dark-mode .trv-page-actions.is-open .trv-page-actions-btn {
color: var(--color-primary-hover);
border-color: var(--color-primary);
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-surface-soft)), color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)));
box-shadow: 0 1px 6px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.trv-page-actions-popover {
position: absolute;
right: 0;
top: calc(100% + 8px);
display: flex;
flex-direction: column;
gap: 2px;
width: 240px;
padding: 6px;
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 950;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0.15s;
}
.dark-mode .trv-page-actions-popover {
border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}
.trv-page-actions.is-open .trv-page-actions-popover {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
.trv-page-actions-popover-title {
display: block;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
padding: 4px 10px 2px;
font-family: var(--font-display);
}
.trv-page-actions-divider {
height: 1px;
background: var(--color-border);
margin: 4px 6px;
opacity: 0.6;
}
.trv-save-page-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
padding: 9px 12px;
background: transparent;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
font: inherit;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
text-align: center;
transition: background 0.15s ease, color 0.15s ease;
}
.trv-save-page-btn .trv-save-page-label {
display: inline;
}
.trv-save-page-btn i {
font-size: 1rem;
color: var(--color-text-muted);
transition: color 0.15s ease;
flex-shrink: 0;
width: 18px;
text-align: center;
}
.trv-save-page-btn:hover {
background: color-mix(in srgb, #e25c7a 8%, transparent);
}
.trv-save-page-btn:hover i,
.trv-save-page-btn.is-saved i {
color: #e25c7a;
}
.trv-save-page-btn.is-saved {
background: color-mix(in srgb, #e25c7a 8%, transparent);
}
.dark-mode .trv-save-page-btn {
color: var(--color-text);
}
.trv-page-actions-share-row {
display: flex;
justify-content: space-around;
align-items: center;
gap: 4px;
padding: 2px 8px 6px;
}
.trv-page-actions-share-row .trv-share-btn {
width: 36px;
height: 36px;
border: none;
background: var(--color-surface-soft);
color: var(--color-text-muted);
}
.trv-page-actions-share-row .trv-share-btn:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.trv-page-actions-share-row .trv-share-btn i {
color: inherit;
font-size: 0.9rem;
}
.trv-share-btn.trv-copy-link-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
height: auto;
padding: 9px 12px;
background: transparent;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
font: inherit;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
text-align: center;
transition: background 0.15s ease, color 0.15s ease;
}
.trv-share-btn.trv-copy-link-btn i {
font-size: 0.95rem;
color: var(--color-text-muted);
flex-shrink: 0;
width: 18px;
text-align: center;
transition: color 0.15s ease;
}
.trv-share-btn.trv-copy-link-btn:hover {
background: var(--color-surface-hover);
}
.trv-share-btn.trv-copy-link-btn.copied,
.trv-share-btn.trv-copy-link-btn.copied:hover {
background: color-mix(in srgb, var(--color-success) 10%, transparent);
color: var(--color-success);
}
.trv-share-btn.trv-copy-link-btn.copied i {
color: var(--color-success);
}
.trv-share-btn,
.trv-quiz-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-bg-card, var(--color-surface-solid));
cursor: pointer;
transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
position: relative;
}
.trv-share-btn::before,
.trv-quiz-share-btn::before {
content: '';
position: absolute;
inset: -5px;
}
.trv-share-btn:hover,
.trv-quiz-share-btn:hover {
border-color: var(--color-primary);
}
.trv-share-btn:active,
.trv-quiz-share-btn:active {
transform: scale(0.92);
}
.trv-share-icon { width: 15px; height: 15px; }
.trv-share-btn i,
.trv-quiz-share-btn i {
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.social-icon-dark { display: none; }
.dark-mode .social-icon-light { display: none; }
.dark-mode .social-icon-dark { display: inline-block; }
.trv-share-btn--native { display: none; }
@media (hover: none) and (pointer: coarse) {
.trv-share-btn--native { display: inline-flex; }
}
.trv-share-btn.copied:not(.trv-copy-link-btn),
.trv-quiz-share-btn.copied {
background-color: var(--color-success);
border-color: var(--color-success);
}
.trv-share-btn.copied:not(.trv-copy-link-btn) .trv-share-icon,
.trv-quiz-share-btn.copied .trv-share-icon { filter: brightness(0) invert(1); }
.trv-share-btn.copied:not(.trv-copy-link-btn) i,
.trv-quiz-share-btn.copied i { color: var(--color-primary-contrast); }
.trv-share {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: var(--space-xs) 0 var(--space-sm);
}
.trv-breadcrumbs {
position: relative;
width: fit-content;
max-width: 100%;
margin: 0 auto var(--space-lg) 0;
background: linear-gradient(135deg, var(--color-surface-soft), color-mix(in srgb, var(--color-surface) 90%, transparent));
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: 6px 8px;
display: flex;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
transition: background var(--transition-base), border-color var(--transition-base);
}
.trv-breadcrumbs::-webkit-scrollbar { display: none; }
.trv-breadcrumbs-list {
display: flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
}
.trv-breadcrumbs-list li {
display: flex;
align-items: center;
color: var(--color-text-muted);
}
.trv-breadcrumbs-list li:not(:last-child)::after {
content: '';
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-border);
margin: 0 6px;
}
.trv-breadcrumbs-list a {
display: flex;
align-items: center;
padding: 6px 12px;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
border-radius: var(--radius-full);
transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
border: 1px solid transparent;
}
.trv-breadcrumbs-list a:hover,
.trv-breadcrumbs-list a:focus-visible {
background-color: var(--color-surface-hover);
color: var(--color-primary);
box-shadow: none;
border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}
.trv-breadcrumbs-list li:first-child a {
padding-left: 10px;
gap: 6px;
}
.trv-breadcrumbs-list li[aria-current="page"] {
font-size: 0.85rem;
font-weight: 500;
padding: 6px 4px;
color: var(--color-text-muted);
}
.static-page-container {
width: 100%;
max-width: 1200px;
position: relative;
background: var(--gradient-card);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
overflow: hidden;
padding: var(--space-xl);
}
.static-page-container h1, .static-page-container h2, .static-page-container h3 {
font-family: var(--font-display);
color: var(--color-text);
margin-bottom: var(--space-md);
line-height: 1.3;
}
.static-page-container h1 {
font-size: 2.25rem;
text-align: center;
margin-bottom: var(--space-sm);
}
.static-page-container h2 {
font-size: 1.75rem;
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-border);
margin-top: var(--space-xl);
}
.static-page-container h3 {
font-size: 1.4rem;
margin-top: var(--space-lg);
}
.static-page-container p, .static-page-container li {
font-family: var(--font-serif);
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: var(--space-md);
}
.static-page-container a {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
transition: color var(--transition-fast), border-bottom-color var(--transition-fast);
}
.static-page-container a:hover, .static-page-container a:focus-visible {
color: var(--color-primary-hover);
border-bottom-color: var(--color-primary-hover);
}
.static-page-container ul, .static-page-container ol {
list-style-position: inside;
padding-left: var(--space-md);
margin-bottom: var(--space-md);
}
.static-page-container blockquote {
border-left: 4px solid var(--color-primary);
padding-left: var(--space-lg);
margin: var(--space-lg) 0;
font-style: italic;
color: var(--color-text-muted);
}
.static-page-container blockquote p { font-size: 1.2rem; }
.fa-spin {
animation: spin 0.8s linear infinite;
color: var(--color-primary);
}
.pwa-nav-bar {
padding-left: 0;
padding-right: 0;
justify-content: space-around;
}
body.is-offline .pwa-nav-button {
opacity: 0.5;
}
@media (width <= 768px) {
.pwa-nav-bar { display: none; }
.pwa-nav-bar.is-visible { display: flex; }
@media (display-mode: standalone) {
html, body {
overscroll-behavior-x: none;
overscroll-behavior-y: none;
}
}
@media (display-mode: standalone) {
:root {
--dock-bar: calc(var(--dock-bar-item) + var(--dock-bar-pad) * 2 + env(safe-area-inset-bottom, 0px));
--dock-total: var(--dock-bar);
}
}
}
body {
padding-bottom: var(--dock-total);
}
@media (width >= 769px) {
.pwa-nav-bar { display: none !important; }
}
.pwa-nav-button {
background: transparent;
border: none;
flex: 1;
height: var(--dock-bar-item);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: 1.1rem;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.pwa-nav-button:active {
background-color: var(--color-surface-hover);
color: var(--color-primary);
transform: scale(0.95);
}
.pwa-nav-button:hover, .pwa-nav-button:focus-visible {
color: var(--color-text);
}
#pwa-scroll-top {
position: fixed;
right: var(--space-md);
bottom: var(--dock-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);
z-index: var(--z-float);
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;
}
#pwa-scroll-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
#pwa-scroll-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);
}
#pwa-scroll-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;
}
@media (width <= 768px) {
#pwa-scroll-top {
right: var(--space-sm);
width: 44px;
height: 44px;
}
}
.skip-to-content {
position: absolute;
top: -100px;
left: 0;
background: var(--color-primary);
color: var(--color-primary-contrast);
padding: var(--space-sm) var(--space-md);
text-decoration: none;
z-index: var(--z-overlay);
border-radius: 0 0 var(--radius-md) 0;
transition: top var(--transition-fast);
}
.skip-to-content:focus { top: 0; }
@media (width >= 769px) {
.pwa-install-banner {
justify-content: space-between;
text-align: left;
padding: var(--space-md) var(--space-lg);
}
}
@media (width <= 768px) {
html { scroll-padding-top: var(--scroll-offset); scrollbar-gutter: auto; }
.page-main {
padding: var(--space-mobile-lg) var(--space-mobile-md);
gap: var(--space-mobile-md);
}
.static-page-container {
padding: var(--space-lg) var(--space-md);
}
.static-page-container h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
.static-page-container p, .static-page-container li { font-size: 1rem; }
}
@media (width <= 640px) {
.trv-breadcrumbs {
width: 100%;
border-radius: var(--radius-lg);
margin-bottom: var(--space-md);
mask-image: linear-gradient(90deg, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, black 90%, transparent 100%);
}
.trv-breadcrumbs-list a {
padding: 6px 10px;
font-size: 0.8rem;
}
.trv-breadcrumbs-list li[aria-current="page"] {
padding: 6px 12px;
font-size: 0.8rem;
}
.trv-breadcrumbs-list:has(li:nth-child(3)) li:first-child {
display: none;
}
.trv-breadcrumbs-list li:not(:first-child, :last-child) a {
max-width: 90px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
.trv-breadcrumbs-list li:first-child a {
font-size: 0 !important;
padding: 6px 8px;
display: flex;
align-items: center;
justify-content: center;
}
.trv-breadcrumbs-list li:first-child a::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-color: currentcolor;
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
}
@media (width <= 480px) {
.trv-share { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-xl) var(--space-lg);
color: var(--color-text-muted);
}
.empty-state-icon {
font-size: 2.5rem;
margin-bottom: var(--space-md);
opacity: 0.5;
}
.empty-state-text {
font-size: var(--font-size-sm);
max-width: 360px;
line-height: 1.5;
}
.pill {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.25em 0.75em;
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
@media (prefers-contrast: more) {
:root { --color-border: currentcolor; }
.site-nav-links a, .tool-button, .pwa-install-button, .pwa-dismiss-button { border-width: 2px; }
}