.home26 {
--h26-ink: #232a32; --h26-text: #37424e;
--h26-muted: #6c757f;
--h26-bg: #f7faff;
--h26-line: #ecebf3;
--h26-line-strong: #cdd3da;
--h26-word: #b1466a; --h26-wine: var(--c-Dictionary, #b1466a);
--h26-wine-dark: #b1466a;
--h26-wine-bg: #fdeef1;
--h26-pink: #ff9dbc;
--h26-green: #5bc25b;
--h26-green-dark: #4cb14b;
--h26-green-ink: #2f7a2e;
--h26-green-bg: #edf8ed;
--h26-shadow: 0 8px 64px rgba(0, 0, 0, .08);
background: var(--h26-bg);
color: var(--h26-ink);
font-weight: 400; } .h26-container {
max-width: 1140px;
margin-inline: auto;
padding-inline: 24px;
} .h26-hero {
position: relative;
overflow: hidden;
background: var(--h26-ink);
isolation: isolate;
}
.h26-hero-img {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; max-width: none;
object-fit: cover; object-position: center 40%;
}
.h26-hero-shade {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(100deg,
rgba(35, 42, 50, .94) 0%,
rgba(35, 42, 50, .86) 42%,
rgba(35, 42, 50, .35) 78%,
rgba(35, 42, 50, .15) 100%);
}
.h26-hero-inner { padding-block: calc(62px + var(--navbar-h)) 70px;
}
.h26-hero-copy { max-width: 620px; }
.h26-title {
margin: 0 0 18px;
color: #fff;
font-size: 32px; font-weight: 700; line-height: 1.16;
letter-spacing: -.03em;
text-wrap: pretty;
}
.h26-lead {
margin: 0 0 28px;
color: rgba(255, 255, 255, .8);
font-size: 18px; line-height: 1.55;
text-wrap: pretty;
} .h26-search { display: flex; gap: 8px; max-width: 560px; }
.h26-search-field {
flex: 1; min-width: 0;
height: 52px; padding: 0 16px;
border: 0; border-radius: 8px;
background: #fff; color: var(--h26-ink);
box-shadow: inset 0 0 0 1px var(--h26-line-strong);
font: inherit; font-size: 16px; font-weight: 400;
}
.h26-search-field::placeholder { color: var(--h26-muted); }
.h26-search-btn {
height: 52px; padding: 0 26px;
border: 0; border-radius: 8px;
background: var(--h26-wine); color: #fff;
font: inherit; font-size: 16px; font-weight: 600;
cursor: pointer;
transition: background-color .15s;
}
.h26-search-btn:hover { background: var(--h26-wine); }
.home26 :where(.h26-search-field, .h26-search-btn):focus-visible {
outline: 3px solid var(--h26-pink);
outline-offset: 2px;
}
.h26-popular {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-top: 16px;
}
.h26-popular-label { font-size: 13px; color: rgba(255, 255, 255, .6); }
.h26-chip {
padding: 5px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .14);
color: #fff;
font-size: 13px; line-height: 1.5; text-decoration: none;
transition: background-color .15s;
}
.h26-chip:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.h26-chip:focus-visible { outline-color: var(--h26-pink); } .h26-layout {
display: grid;
grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
padding-block: 32px 40px;
}
.h26-main,
.h26-aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .h26-card {
background: #fff;
border-radius: 16px;
box-shadow: var(--h26-shadow);
padding: 24px;
}
.h26-h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--h26-ink); }
.h26-h3 { margin: 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--h26-ink); }
.h26-muted { font-size: 14px; color: var(--h26-muted); }
.h26-intro { margin: 4px 0 20px; }
.h26-card-head {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: 8px;
margin-bottom: 16px;
} .h26-az {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0; padding: 0; list-style: none;
}
.h26-letter {
position: relative; display: grid; place-items: center;
width: 36px; height: 36px;
border-radius: 8px;
background: var(--h26-bg);
box-shadow: inset 0 0 0 1px var(--h26-line);
color: var(--h26-text);
font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none;
transition: background-color .15s, color .15s, box-shadow .15s;
}
a.h26-letter:hover { background: var(--h26-wine); box-shadow: none; color: #fff; }
.h26-letter.is-empty { background: transparent; box-shadow: none; color: var(--h26-line-strong); cursor: default; }
.h26-letter.h26-all {
width: auto; padding: 0 16px;
background: var(--h26-ink); box-shadow: none; color: #fff;
}
a.h26-letter.h26-all:hover { background: var(--h26-wine); }
a.h26-letter:focus-visible { background: var(--h26-wine); box-shadow: none; color: #fff; outline: 3px solid var(--h26-wine-bg); outline-offset: 2px; } .h26-count {
position: absolute; top: -7px; right: -7px;
z-index: 1;
min-width: 16px;
padding: 3px 4px; border-radius: 4px;
background: var(--h26-ink); color: #fff;
font-size: 9px; font-weight: 600; line-height: 1; text-align: center;
font-variant-numeric: tabular-nums;
opacity: 0; transition: opacity .15s;
pointer-events: none;
}
.h26-letter:hover .h26-count,
.h26-letter:focus-visible .h26-count { opacity: 1; } .h26-entries { display: flex; flex-direction: column; gap: 12px; }
.h26-entry {
--h26-entry-surface: #fff;
position: relative;
padding: 18px;
border-radius: 12px;
background: var(--h26-entry-surface);
box-shadow: inset 0 0 0 1px var(--h26-line);
transition: background-color .15s ease, box-shadow .15s ease;
}
.h26-entry:hover,
.h26-entry:focus-within {
--h26-entry-surface: #fbfcfe;
box-shadow:
inset 0 0 0 1px var(--h26-line-strong),
0 5px 18px rgba(35, 42, 50, .055);
}
.h26-entry-word {
margin: 0 0 14px;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
}
.h26-entry-word a { color: var(--h26-wine); text-decoration: none; }
.h26-entry-word a:hover { color: var(--h26-wine-dark); text-decoration: none; }
.h26-entry-word a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: 12px;
}
.h26-entry-word a:focus-visible { outline: none; }
.h26-entry:has(.h26-entry-word a:focus-visible) {
outline: 3px solid var(--h26-wine-bg);
outline-offset: 2px;
} .h26-entry-body :where(a, button, input, select, textarea, iframe, audio, video) {
position: relative;
z-index: 2;
} .h26-entry-body {
position: relative;
max-height: 300px;
overflow: hidden;
font-size: 15.5px;
line-height: 1.58;
}
.h26-entry-body.is-truncated::after {
content: "";
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 0;
height: 88px;
background: linear-gradient(to bottom, transparent, var(--h26-entry-surface) 88%);
pointer-events: none;
}
.h26-entry-body p,
.h26-entry-body p:has(> span[style*="#ff0000"]),
.h26-entry-body p:has(> span[style*="#FF0000"]),
.h26-entry-body p:has(> .example-questionable) {
max-width: none;
}
.h26-entry-body h2.sense { margin: 26px 0 14px; }
.h26-entry-body h2.sense:first-child { margin-top: 0; }
.h26-entry-body .sense-num { font-size: 21px; }
.h26-entry-body > :last-child { margin-bottom: 0; } .h26-steps,
.h26-bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.h26-steps { gap: 14px; counter-reset: h26-step; }
.h26-bullets { gap: 12px; }
.h26-steps li,
.h26-bullets li {
display: flex; gap: 12px; align-items: flex-start;
font-size: 14px; line-height: 1.55; color: var(--h26-text);
}
.h26-steps li::before {
counter-increment: h26-step;
content: counter(h26-step);
flex: 0 0 24px; height: 24px;
display: grid; place-items: center;
border-radius: 999px;
background: var(--h26-green); color: #fff;
font-size: 13px; font-weight: 700; line-height: 1;
}
.h26-bullets li::before {
content: "";
flex: 0 0 8px; height: 8px;
margin-top: 7px;
border-radius: 999px;
background: var(--h26-green);
}
.h26-steps strong { color: var(--h26-ink); font-weight: 700; }
.h26-pro { background: var(--h26-ink); box-shadow: none; }
.h26-pro .h26-h3 { margin-bottom: 8px; color: #fff; }
.h26-pro p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.h26-btn-pro {
display: inline-flex; align-items: center;
height: 40px; padding: 0 18px;
border-radius: 8px;
background: var(--h26-green); color: #fff;
font-size: 15px; font-weight: 600; text-decoration: none;
transition: background-color .15s;
}
.h26-btn-pro:hover { background: var(--h26-green-dark); color: #fff; }
.h26-btn-pro:focus-visible { outline-color: var(--h26-green); } @media (max-width: 900px) {
.h26-layout { grid-template-columns: minmax(0, 1fr); }
.h26-hero-shade {
background: linear-gradient(180deg, rgba(35, 42, 50, .88) 0%, rgba(35, 42, 50, .8) 100%);
}
}
@media (max-width: 600px) {
.h26-container { padding-inline: 16px; } .h26-hero-img { object-position: 35% 40%; }
.h26-hero-inner { padding-block: calc(36px + var(--navbar-h)) 40px; }
.h26-title { font-size: 28px; }
.h26-lead { font-size: 16px; margin-bottom: 22px; }
.h26-search { flex-direction: column; }
.h26-search-field, .h26-search-btn { flex: none; height: 48px; }
.h26-layout { padding-block: 20px 28px; gap: 16px; }
.h26-main, .h26-aside { gap: 16px; }
.h26-card { padding: 20px 16px; }
.h26-entry { padding: 16px 14px; }
.h26-entry-body { max-height: 320px; }
.h26-letter { width: 34px; height: 34px; }
}
@media print {
.h26-hero-img, .h26-hero-shade, .h26-search, .h26-popular, .h26-pro { display: none !important; }
.h26-hero { background: none; }
.h26-title, .h26-lead { color: #000; }
.h26-card { box-shadow: none; }
}