@charset "UTF-8";
:root {
--c-red: #e53935; --c-orange: #fb8c00; --c-yellow: #fdd835; --c-lightgreen: #9ccc65;
--c-green: #43a047; --c-lightblue: #29b6f6; --c-blue: #1e88e5; --c-navy: #283593;
--c-lightpurple: #9575cd; --c-purple: #8e24aa; --c-pink: #d81b60; --c-grey: #607d8b;
--ink-red: #b61b17; --ink-orange: #905000; --ink-yellow: #6a5701; --ink-lightgreen: #476722;
--ink-green: #2c6a2f; --ink-lightblue: #06648f; --ink-blue: #1360a4; --ink-navy: #283593;
--ink-lightpurple: #7248bd; --ink-purple: #8e24aa; --ink-pink: #af164e; --ink-grey: #4d6570;
--surface: #f5f8fb; --surface-card: #ffffff; --surface-band: #edf2f6; --surface-high: #e3eaef;
--on-surface: #182025; --on-surface-variant: #44515a; --outline: #6f7d86; --outline-variant: #d3dbe0;
--inverse-surface: #2d353a; --on-inverse-surface: #eef2f5;
--tint: 12%; --tint-strong: 22%; --edge: 38%;
--shadow: 0 1px 2px rgb(24 32 37 / 4%), 0 12px 32px -16px rgb(24 32 37 / 14%);
--radius: 12px; --radius-lg: 18px;
--section-space: clamp(20px, 3vw, 32px);
--card-space: clamp(14px, 1.8vw, 20px);
--content-gap: clamp(14px, 2vw, 20px);
--heading-gap: clamp(12px, 2vw, 18px);
--font: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--stripe: linear-gradient(90deg, var(--c-red) 0 8.333%, var(--c-orange) 8.333% 16.667%, var(--c-yellow) 16.667% 25%, var(--c-lightgreen) 25% 33.333%, var(--c-green) 33.333% 41.667%, var(--c-lightblue) 41.667% 50%, var(--c-blue) 50% 58.333%, var(--c-navy) 58.333% 66.667%, var(--c-lightpurple) 66.667% 75%, var(--c-purple) 75% 83.333%, var(--c-pink) 83.333% 91.667%, var(--c-grey) 91.667% 100%);
--wheel: conic-gradient(from 15deg, var(--c-red) 0 30deg, var(--c-orange) 0 60deg, var(--c-yellow) 0 90deg, var(--c-lightgreen) 0 120deg, var(--c-green) 0 150deg, var(--c-lightblue) 0 180deg, var(--c-blue) 0 210deg, var(--c-navy) 0 240deg, var(--c-lightpurple) 0 270deg, var(--c-purple) 0 300deg, var(--c-pink) 0 330deg, var(--c-grey) 0 360deg);
--hue: var(--c-blue); --hue-ink: var(--ink-blue);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
--c-red: #ed7472; --c-orange: #fcae4c; --c-yellow: #fee472; --c-lightgreen: #badb93;
--c-green: #7bbc7e; --c-lightblue: #69ccf9; --c-blue: #62aced; --c-navy: #6872b3;
--c-lightpurple: #b59edc; --c-purple: #b066c3; --c-pink: #e45f90; --c-grey: #90a4ae;
--ink-red: #ef8986; --ink-orange: #ff9a1b; --ink-yellow: #fdd835; --ink-lightgreen: #9ccc65;
--ink-green: #6dc271; --ink-lightblue: #46c0f7; --ink-blue: #70b4ef; --ink-navy: #919be1;
--ink-lightpurple: #b8a2dd; --ink-purple: #d082e5; --ink-pink: #ef7ea8; --ink-grey: #9cb0ba;
--surface: #0f1519; --surface-card: #182126; --surface-band: #131b20; --surface-high: #222d34;
--on-surface: #e7edf1; --on-surface-variant: #bac5cc; --outline: #8a979f; --outline-variant: #2c373e;
--inverse-surface: #e7edf1; --on-inverse-surface: #263036;
--tint: 12%; --tint-strong: 24%; --edge: 40%;
--shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 16px 36px -18px rgb(0 0 0 / 60%);
color-scheme: dark;
}
}
.hue-red { --hue: var(--c-red); --hue-ink: var(--ink-red); }
.hue-orange { --hue: var(--c-orange); --hue-ink: var(--ink-orange); }
.hue-yellow { --hue: var(--c-yellow); --hue-ink: var(--ink-yellow); }
.hue-lightgreen { --hue: var(--c-lightgreen); --hue-ink: var(--ink-lightgreen); }
.hue-green { --hue: var(--c-green); --hue-ink: var(--ink-green); }
.hue-lightblue { --hue: var(--c-lightblue); --hue-ink: var(--ink-lightblue); }
.hue-blue { --hue: var(--c-blue); --hue-ink: var(--ink-blue); }
.hue-navy { --hue: var(--c-navy); --hue-ink: var(--ink-navy); }
.hue-lightpurple { --hue: var(--c-lightpurple); --hue-ink: var(--ink-lightpurple); }
.hue-purple { --hue: var(--c-purple); --hue-ink: var(--ink-purple); }
.hue-pink { --hue: var(--c-pink); --hue-ink: var(--ink-pink); }
.hue-grey { --hue: var(--c-grey); --hue-ink: var(--ink-grey); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--surface);
color: var(--on-surface);
font-family: var(--font);
font-size: 16px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body::before { content: ""; display: block; height: 4px; background: var(--stripe); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button, a { -webkit-tap-highlight-color: transparent; }
:where(a, button, summary, input, select, textarea):focus-visible {
outline: 3px solid var(--ink-blue);
outline-offset: 3px;
border-radius: 6px;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
p { margin: 0; }
::selection { background: color-mix(in srgb, var(--c-lightblue) 32%, transparent); }
.wrap { width: min(1200px, calc(100% - 2 * clamp(14px, 4vw, 48px))); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.skip-link {
position: fixed; top: -80px; left: 16px; z-index: 100;
background: var(--on-surface); color: var(--surface);
padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: 14px;
}
.skip-link:focus { top: 16px; }
.site-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 18px;
padding-block: 12px;
border-bottom: 1px solid var(--outline-variant);
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 18px;
letter-spacing: -.02em;
}
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-sub {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
color: var(--outline);
text-transform: uppercase;
}
.header-clock {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: var(--surface-card);
border: 1px solid var(--outline-variant);
font-size: 13px;
font-weight: 700;
color: var(--on-surface-variant);
}
.header-clock-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); flex: none;
}
.header-clock time { font-family: var(--mono); color: var(--on-surface); }
.site-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.site-nav a {
padding: 6px 11px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: var(--on-surface-variant);
transition: background-color .18s ease, color .18s ease;
}
.site-nav a:hover { background: var(--surface-band); color: var(--on-surface); }
.site-nav a[aria-current="page"] {
background: var(--on-surface);
color: var(--surface);
}
.nav-toggle {
display: none;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 8px 16px;
border-radius: 999px;
background: var(--surface-card);
border: 1px solid var(--outline-variant);
font-size: 14px;
font-weight: 700;
}
.page-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: var(--content-gap);
padding-block: clamp(16px, 2.2vw, 24px) var(--section-space);
align-items: start;
}
.page-shell.no-sidebar {
grid-template-columns: minmax(0, 1fr);
}
.main-column { min-width: 0; display: grid; gap: var(--content-gap); }
.side-column { min-width: 0; display: grid; gap: 16px; }
.breadcrumb { font-size: 13px; color: var(--outline); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; opacity: .6; }
.breadcrumb a { color: var(--ink-blue); font-weight: 700; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
line-height: 1.5;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--hue-ink);
}
.eyebrow::before {
content: "";
width: 8px; height: 8px; border-radius: 50%;
background: var(--hue);
flex: none;
}
.card {
background: var(--surface-card);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-lg);
padding: var(--card-space);
box-shadow: var(--shadow);
}
.card-accent {
border-top: 3px solid var(--hue);
}
.card-title {
font-size: clamp(17px, 1.8vw, 20px);
margin-bottom: 10px;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 10px 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
transition: transform .18s ease, background-color .18s ease;
}
.button-dark { background: var(--on-surface); color: var(--surface); }
.button-dark:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--on-surface) 86%, var(--c-blue)); }
.button-soft {
background: var(--surface-band);
border: 1px solid var(--outline-variant);
color: var(--on-surface);
}
.button-soft:hover { border-color: var(--outline); }
.text-link {
color: var(--hue-ink);
font-weight: 700;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--hue) var(--edge), transparent);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.text-link:hover { text-decoration-color: var(--hue); }
.pill-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 6px 14px;
border-radius: 999px;
background: var(--surface-card);
border: 1px solid var(--outline-variant);
font-size: 13px;
font-weight: 700;
transition: background-color .18s, border-color .18s, color .18s;
}
.pill:hover {
background: color-mix(in srgb, var(--hue) var(--tint), var(--surface-card));
border-color: color-mix(in srgb, var(--hue) var(--edge), transparent);
}
.pill.active {
background: var(--on-surface);
border-color: var(--on-surface);
color: var(--surface);
}
.pill-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--hue); flex: none;
}
.hero-card {
position: relative;
overflow: hidden;
display: grid;
gap: 10px;
background: linear-gradient(145deg, color-mix(in srgb, var(--hue) var(--tint), var(--surface-card)), var(--surface-card) 60%);
}
.hero-card h1 {
font-size: clamp(22px, 3vw, 32px);
letter-spacing: -.03em;
}
.hero-lead {
color: var(--on-surface-variant);
font-size: 15px;
}
.answer-big {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px 18px;
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.2;
}
.answer-big a {
color: var(--hue-ink);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--hue) var(--edge), transparent);
text-decoration-thickness: 3px;
text-underline-offset: 6px;
}
.answer-big a:hover { text-decoration-color: var(--hue); }
.badge-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
background: color-mix(in srgb, var(--hue) var(--tint), var(--surface-card));
border: 1px solid color-mix(in srgb, var(--hue) var(--edge), transparent);
color: var(--on-surface);
}
.tool-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
align-items: end;
}
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--on-surface-variant); }
.field input, .field select {
width: 100%;
min-height: 44px;
padding: 8px 12px;
border-radius: var(--radius);
border: 1px solid var(--outline-variant);
background: var(--surface);
color: var(--on-surface);
}
.tool-result {
margin-top: 16px;
padding: 16px;
border-radius: var(--radius);
background: var(--surface-band);
border: 1px solid var(--outline-variant);
display: grid;
gap: 10px;
}
.tool-result-main {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 800;
color: var(--ink-blue);
}
.tool-result-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.mini-stat {
padding: 10px 12px;
border-radius: var(--radius);
background: var(--surface-card);
border: 1px solid var(--outline-variant);
}
.mini-stat span { display: block; font-size: 11px; font-weight: 700; color: var(--outline); }
.mini-stat strong { font-size: 15px; }
.info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--content-gap);
}
.info-card {
display: grid;
align-content: start;
gap: 10px;
border-left: 3px solid var(--hue);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.info-card h2 { font-size: 18px; }
.info-value {
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 800;
color: var(--hue-ink);
line-height: 1.3;
}
.info-desc { font-size: 14px; color: var(--on-surface-variant); }
.info-desc em { font-style: normal; font-weight: 700; color: var(--on-surface); }
.table-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.table-search {
min-height: 38px;
padding: 5px 14px;
border-radius: 999px;
border: 1px solid var(--outline-variant);
background: var(--surface);
min-width: 220px;
}
.table-wrap {
overflow-x: auto;
border: 1px solid var(--outline-variant);
border-radius: var(--radius);
}
table.data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
line-height: 1.45;
text-align: left;
}
.data-table th {
background: var(--surface-band);
color: var(--on-surface-variant);
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
padding: 9px 12px;
border-bottom: 1px solid var(--outline-variant);
white-space: nowrap;
}
.data-table td {
padding: 7px 12px;
border-bottom: 1px solid var(--outline-variant);
vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-band) 45%, transparent); }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--c-blue) 7%, transparent); }
.data-table td a {
color: var(--ink-blue);
font-weight: 700;
}
.data-table td a:hover { text-decoration: underline; text-underline-offset: 3px; }
.data-table .num { font-family: var(--mono); white-space: nowrap; }
.pager {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.pager a {
display: grid;
gap: 2px;
padding: 14px 18px;
border-radius: var(--radius);
background: var(--surface-card);
border: 1px solid var(--outline-variant);
transition: border-color .18s, transform .18s;
}
.pager a:hover { border-color: var(--ink-blue); transform: translateY(-1px); }
.pager a.next { text-align: right; }
.pager span { font-size: 11px; font-weight: 700; color: var(--outline); }
.pager strong { font-size: 16px; color: var(--ink-blue); }
.side-card {
background: var(--surface-card);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-lg);
padding: 14px 16px;
}
.side-title {
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--outline);
margin-bottom: 10px;
}
.era-list, .side-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.era-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--surface-band); }
.era-list a:hover { background: var(--on-surface); color: var(--surface); }
.era-list strong { font-size: 15px; }
.era-list span { font-size: 12px; font-family: var(--mono); color: inherit; opacity: .75; }
.side-links a { display: block; padding: 5px 2px; font-size: 14px; font-weight: 600; color: var(--ink-blue); }
.side-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jump-form { display: grid; gap: 8px; }
.jump-row { display: flex; gap: 8px; }
.jump-row input {
flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 16px;
border: 1px solid var(--outline-variant); border-radius: var(--radius); background: var(--surface-card); color: var(--on-surface);
}
.jump-row input:focus-visible { outline: 2px solid var(--ink-blue); outline-offset: 1px; }
.jump-hint { margin: 0; font-size: 12px; color: var(--outline); }
.jump-inline { max-width: 520px; }
.jump-inline label { font-size: 13px; font-weight: 700; color: var(--on-surface-variant); }
.ad-card {
background: var(--surface-band);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-lg);
padding: 12px;
text-align: center;
overflow: hidden;
}
.ad-slot { display: block; min-height: 280px; }
.ad-side .ad-slot { min-height: 250px; }
.ad-label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--outline);
margin-bottom: 8px;
letter-spacing: .08em;
}
.data-table caption { caption-side: top; text-align: left; padding: 8px 12px; font-size: 12px; color: var(--outline); background: var(--surface-card); border-bottom: 1px solid var(--outline-variant); }
.data-table tr.row-strong td { font-weight: 700; }
.data-table tr.row-decade td { border-top: 2px solid var(--outline-variant); }
.cell-note { font-size: 12px; color: var(--on-surface-variant); }
.table-status { margin: 0 0 10px; font-size: 13px; color: var(--on-surface-variant); }
.table-status:empty { display: none; }
.sub-title { margin: 16px 0 8px; font-size: 14px; color: var(--on-surface-variant); }
.sub-title:first-child { margin-top: 0; }
.rule-list { margin: 14px 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14px; color: var(--on-surface-variant); }
.result-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.tool-actions { margin-top: 14px; }
.tool-actions + .info-desc { margin-top: 8px; min-height: 1.5em; }
.card > .table-wrap + .info-desc, .card > .info-desc + .table-wrap, .card > .info-desc + .info-desc { margin-top: 10px; }
#gakureki-tool .table-wrap { margin-top: 14px; }
.age-form .tool-result { margin-top: 12px; }
.note-lunisolar { font-size: 13px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-band); }
.ref-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.ref-form .field { min-width: 240px; }
.two-forms { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; gap: 16px; }
.conv-form {
display: grid;
gap: 10px;
align-content: start;
padding: 14px;
border-radius: var(--radius);
border: 1px solid var(--outline-variant);
background: var(--surface);
}
.conv-form .sub-title { margin: 0; }
.conv-form .button { justify-self: start; }
.field-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.field-row > .field { flex: 1 1 160px; min-width: 0; }
.field-row > .field-year { flex: 1 1 96px; }
.field-row > .field-narrow { flex: 0 1 76px; }
.field-check { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--on-surface-variant); cursor: pointer; }
.field-check input { width: 18px; height: 18px; accent-color: var(--ink-blue); }
.badge-sm { padding: 1px 8px; font-size: 11px; vertical-align: 1px; }
:target { scroll-margin-top: 16px; }
.data-table tr:has(:target) td { background: color-mix(in srgb, var(--c-orange) 14%, transparent); }
.faq { margin: 0; display: grid; gap: 4px; }
.faq dt { font-weight: 800; font-size: 15px; padding-top: 10px; }
.faq dt::before { content: "Q. "; color: var(--ink-blue); }
.faq dd { margin: 0 0 6px; padding-bottom: 10px; font-size: 14px; color: var(--on-surface-variant); border-bottom: 1px solid var(--outline-variant); }
.faq dd:last-child { border-bottom: 0; }
.site-footer {
border-top: 1px solid var(--outline-variant);
padding-block: 32px 44px;
display: grid;
gap: 24px;
}
.footer-main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: start;
gap: 24px;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
font-size: 14px;
font-weight: 700;
color: var(--on-surface-variant);
}
.footer-links a:hover { color: var(--on-surface); text-decoration: underline; text-underline-offset: 4px; }
.footer-sisters {
padding: 16px 20px;
border-radius: var(--radius);
background: var(--surface-band);
border: 1px solid var(--outline-variant);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 20px;
font-size: 13px;
}
.footer-sisters > span { font-weight: 700; color: var(--outline); }
.footer-sisters a { font-weight: 700; color: var(--ink-blue); }
.footer-sisters a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 12px;
color: var(--outline);
}
.back-top { font-weight: 700; letter-spacing: .08em; }
.event-list {
margin: 0;
padding-left: 20px;
display: grid;
gap: 6px;
color: var(--on-surface);
font-size: 15px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.feature-tile {
display: grid;
gap: 4px;
padding: 14px 16px;
border-radius: var(--radius);
border: 1px solid var(--outline-variant);
background: var(--surface-band);
color: var(--on-surface);
text-decoration: none;
transition: border-color .15s, transform .15s;
}
.feature-tile:hover {
border-color: var(--hue, var(--c-blue));
transform: translateY(-1px);
}
.feature-tile strong { font-size: 15px; }
.feature-tile span { font-size: 13px; color: var(--on-surface-variant); }
@media (max-width: 960px) {
.page-shell { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
.nav-toggle { display: inline-flex; }
.site-nav {
display: none;
width: 100%;
padding-top: 8px;
}
.site-nav.open { display: flex; }
.info-grid { grid-template-columns: minmax(0, 1fr); }
.pager { grid-template-columns: minmax(0, 1fr); }
.pager a.next { text-align: left; }
.col-hide-sm { display: none; }
}
@media print {
@page { size: A4; margin: 12mm; }
body { background: #fff; color: #000; font-size: 11px; }
.site-header, .site-nav, .side-column, .site-footer, .ad-card, .breadcrumb, .skip-link, .no-print, .js-print,
.ref-form button, .faq, #faq-title { display: none !important; }
.page-shell { display: block; }
.card { box-shadow: none; border: 0; padding: 0; break-inside: auto; }
.hero-card { background: none; }
.table-wrap { overflow: visible; border: 0; }
.data-table { font-size: 10px; }
.data-table th, .data-table td { padding: 2px 6px; }
.data-table tr { break-inside: avoid; }
.col-hide-sm { display: table-cell !important; }
a { color: inherit; text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
}