@font-face { font-family: "Lexend"; src: url("/lexend.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #1c1c1d; --card: #262628; --card2: #2f2f32; --line: #38383b; --hover: #333336;
  --text: #e6e6e6; --dim: #a9a9ad; --faint: #7b7b80; --accent: #ff4040; --good: #7fcf95; --bad: #f08a8a;
  --r: 14px; --ease: cubic-bezier(.2, .7, .2, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); font: 14px/1.55 "Lexend", -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }

/* brand + search */
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.tri { width: 26px; height: 15px; fill: var(--accent); flex: none; }
.brand.big h1 { font-size: 50px; font-weight: 650; letter-spacing: -.035em; }
.mark { width: 22px; height: 22px; flex: none; } .mark .m1 { fill: var(--accent); } .mark .m2 { fill: #ff8a70; }
.brand.big { gap: 14px; } .brand.big .mark { width: 44px; height: 44px; }
.eyebrow .mark { width: 12px; height: 12px; }
.box { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 24px; transition: border-color .2s, background .2s; }
.box:focus-within { border-color: #55555a; background: var(--card2); }
.box input { flex: 1; min-width: 0; height: 100%; outline: 0; font-size: 15.5px; }
.box input::placeholder { color: var(--faint); }
.mag { width: 18px; height: 18px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; flex: none; }
.clear { color: var(--faint); font-size: 15px; padding: 6px; border-radius: 50%; }
.clear:hover { color: var(--text); }

#home { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 16px 16px 20vh; }
#home form { width: 100%; max-width: 620px; }
.tries { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 620px; }

.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 18px;
  color: var(--dim); font-size: 13px; transition: background .2s, color .2s; white-space: nowrap; }
.chip:hover { background: var(--hover); color: var(--text); }
.chip img, .fav { width: 16px; height: 16px; border-radius: 50%; background: var(--card2); flex: none; object-fit: cover; }

/* page layout */
header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 28px; padding: 14px 28px;
  background: rgba(28, 28, 29, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
header form { flex: 1; max-width: 690px; }
header .box { height: 44px; }
.page { display: grid; grid-template-columns: minmax(0, 652px) minmax(0, 372px); grid-template-areas: "top side" "rest side" "web side";
  column-gap: 52px; align-items: start; padding: 22px 28px 40px 166px; }
.top { grid-area: top; } .rest { grid-area: rest; } .web { grid-area: web; }
.side { grid-area: side; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 12px; }
footer { color: var(--faint); font-size: 12px; padding: 0 28px 40px 166px; }
@media (max-width: 1240px) { .page, footer { padding-left: 28px; } }
@media (max-width: 1060px) {
  .page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "side" "rest" "web"; padding: 16px 16px 32px; }
  .side { grid-row: auto; margin-bottom: 8px; }
  header { padding: 10px 16px; gap: 14px; } header .brand h1 { display: none; }
  footer { padding: 0 16px 32px; }
}

/* entrance + skeletons */
.in { animation: rise .45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.sk { background: linear-gradient(100deg, #29292b 30%, #333336 50%, #29292b 70%); background-size: 300% 100%;
  animation: shimmer 1.6s linear infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.skwrap { display: flex; flex-direction: column; gap: 10px; }
.skrow { display: flex; gap: 12px; overflow: hidden; }
.w { animation: word .5s var(--ease) both; }
@keyframes word { from { opacity: 0; filter: blur(3px); } }

/* heading, mosaic, overview */
.heading { margin-bottom: 14px; }
.eyebrow { display: flex; align-items: center; gap: 7px; color: var(--dim); font-size: 12.5px; margin-bottom: 4px; }
.eyebrow .tri { width: 14px; height: 8px; }
.heading h2 { font-size: 29px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.metaline { color: var(--dim); font-size: 13.5px; margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.metaline span + span::before { content: "·"; margin-right: 8px; color: var(--faint); }
.badge { border: 1px solid var(--faint); border-radius: 3px; padding: 0 4px; font-size: 11px; line-height: 16px; }
.mosaic { display: grid; gap: 4px; height: 296px; border-radius: var(--r); overflow: hidden; margin-bottom: 16px;
  grid-template-columns: 1.55fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaic a { position: relative; background: var(--card2); overflow: hidden; }
.mosaic a:first-child { grid-row: 1 / span 2; }
.mosaic.n1 { grid-template-columns: 1fr; } .mosaic.n2 { grid-template-columns: 1.4fr 1fr; } .mosaic.n2 a:nth-child(2) { grid-row: 1 / span 2; }
.mosaic.n3 { grid-template-columns: 1.4fr 1fr; } .mosaic.n4 { grid-template-columns: 1.55fr 1fr 1fr; } .mosaic.n4 a:nth-child(4) { grid-column: 2 / span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease), opacity .4s; opacity: 0; }
.mosaic img.ok { opacity: 1; }
.mosaic a:hover img { transform: scale(1.03); }
.play { position: absolute; inset: 0; display: grid; place-items: center; }
.play::after { content: ""; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='white'/%3E%3C/svg%3E") center/28px no-repeat; backdrop-filter: blur(4px); }
.tag { position: absolute; left: 10px; bottom: 9px; right: 10px; font-size: 11.5px; text-shadow: 0 1px 6px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview p { font-size: 15.5px; line-height: 1.72; }
.srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.srcs .chip { padding: 3px 10px 3px 4px; font-size: 12px; }
.more { overflow: hidden; }
.more ul { margin: 12px 0 0 18px; display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; }
.showmore { width: 100%; margin-top: 16px; height: 44px; border: 1px solid var(--line); border-radius: 22px; color: var(--text); font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s; }
.showmore:hover { background: var(--hover); }
.showmore svg { width: 14px; transition: transform .3s var(--ease); stroke: currentColor; fill: none; stroke-width: 2; }
.showmore.open svg { transform: rotate(180deg); }

/* sections */
.section { padding: 24px 0 4px; border-top: 1px solid var(--line); margin-top: 22px; }
.section > h3 { font-size: 21px; font-weight: 500; margin-bottom: 14px; }
.card { background: var(--card); border-radius: var(--r); padding: 14px 16px; }
.card > h4 { font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.sub { color: var(--dim); font-size: 12.5px; }
.muted { color: var(--dim); font-size: 13.5px; margin-top: 10px; }

/* horizontal rows of image cards */
.hrow { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.ent { flex: 0 0 104px; scroll-snap-align: start; }
.ent .pic { width: 104px; height: 104px; border-radius: 12px; overflow: hidden; background: var(--card2); display: grid; place-items: center;
  color: var(--faint); font-size: 26px; font-weight: 600; margin-bottom: 7px; }
.ent .pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ent b { display: block; font-weight: 500; font-size: 13.5px; line-height: 1.3; }
.ent.wide { flex-basis: 150px; } .ent.wide .pic { width: 150px; height: 100px; }
.ent.book { flex-basis: 96px; } .ent.book .pic { width: 96px; height: 140px; }
.side .hrow .ent { flex-basis: 84px; } .side .ent .pic { width: 84px; height: 108px; }

/* side widgets */
.ratings { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
.ratings > div { text-align: center; padding: 4px 6px; }
.ratings > div + div { border-left: 1px solid var(--line); }
.ratings .score { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 17px; font-weight: 500; }
.facts { border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.facts > div { display: grid; grid-template-columns: 118px 1fr; gap: 12px; background: var(--card); padding: 11px 16px; font-size: 13.5px; }
.facts dt { color: var(--dim); }
.opts { display: flex; flex-direction: column; }
.opts a { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: 10px; transition: background .2s; }
.opts a:hover { background: var(--hover); }
.opts .fav { width: 32px; height: 32px; padding: 6px; background: var(--card2); }
.bar { display: grid; grid-template-columns: 96px 1fr 26px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.bar i { height: 6px; border-radius: 3px; background: var(--card2); overflow: hidden; }
.bar i::after { content: ""; display: block; height: 100%; width: var(--v); background: var(--text); border-radius: 3px; animation: grow .8s var(--ease) both; }
@keyframes grow { from { width: 0; } }
.big { font-size: 30px; font-weight: 500; line-height: 1.2; }

/* main widgets */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--text); font-weight: 500; }
tbody th { color: var(--dim); font-weight: 400; width: 26%; }
.opthead { display: flex; align-items: center; gap: 8px; }
.opthead .fav { width: 26px; height: 26px; }
.scroll { overflow-x: auto; }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pc ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pc li { display: flex; gap: 9px; font-size: 14px; }
.pc li::before { flex: none; font-weight: 600; }
.pc .pro li::before { content: "✓"; color: var(--good); } .pc .con li::before { content: "✕"; color: var(--bad); }
.stepper { list-style: none; counter-reset: s; display: flex; flex-direction: column; }
.stepper li { position: relative; padding: 0 0 18px 44px; counter-increment: s; }
.stepper li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--card2);
  display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.stepper li::after { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 4px; width: 1px; background: var(--line); }
.stepper li:last-child::after { display: none; }
.stepper b { display: block; font-weight: 500; margin-bottom: 2px; padding-top: 3px; }
.stepper span { color: var(--dim); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pill { background: var(--card); border-radius: 10px; padding: 8px 12px; }
.pill b { display: block; font-weight: 500; }
.pill span { color: var(--dim); font-size: 12px; }
.recipe-top { display: flex; gap: 16px; align-items: stretch; margin-bottom: 14px; }
.recipe-top img { width: 160px; height: 120px; border-radius: 12px; object-fit: cover; }
.check { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.check label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; padding: 3px 0; font-size: 14px; }
.check input { margin-top: 4px; accent-color: var(--accent); }
.check input:checked + span { color: var(--faint); text-decoration: line-through; }
.numbered { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.numbered li::marker { color: var(--faint); }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.tab { padding: 7px 14px; border-radius: 18px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; transition: all .2s; }
.tab.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.tl { list-style: none; position: relative; }
.tl li { display: grid; grid-template-columns: 70px 1fr; gap: 14px; padding: 0 0 16px; position: relative; }
.tl li::before { content: ""; position: absolute; left: 78px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--text); }
.tl li::after { content: ""; position: absolute; left: 82px; top: 18px; bottom: 0; width: 1px; background: var(--line); }
.tl li:last-child::after { display: none; }
.tl .when { color: var(--dim); font-size: 13px; text-align: right; }
.tl .what { padding-left: 22px; }
.tl .what b { font-weight: 500; display: block; }
.newsc { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.newsc:last-child { border-bottom: 0; }
.newsc .t { flex: 1; min-width: 0; }
.newsc .src { display: flex; align-items: center; gap: 7px; color: var(--dim); font-size: 12px; margin-bottom: 4px; }
.newsc b { font-weight: 500; font-size: 15px; display: block; line-height: 1.35; }
.newsc > img { width: 104px; height: 78px; border-radius: 10px; object-fit: cover; flex: none; }
.vid { flex: 0 0 236px; }
.vid .th { position: relative; width: 236px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: var(--card2); margin-bottom: 7px; }
.vid .th img { width: 100%; height: 100%; object-fit: cover; }
.vid .play::after { width: 40px; height: 40px; background-size: 22px; }
.paa details { border-bottom: 1px solid var(--line); }
.paa summary { list-style: none; cursor: pointer; padding: 14px 4px; font-size: 15px; display: flex; justify-content: space-between; gap: 12px; }
.paa summary::-webkit-details-marker { display: none; }
.paa summary::after { content: ""; width: 9px; height: 9px; border: solid var(--dim); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .3s var(--ease); margin-top: 4px; flex: none; }
.paa details[open] summary::after { transform: rotate(-135deg); margin-top: 8px; }
.paa .ans { color: var(--dim); padding: 0 4px 14px; line-height: 1.65; }
.dict .term { font-size: 30px; font-weight: 500; }
.dict .ph { color: var(--dim); }
.dict .pos { font-style: italic; color: var(--dim); margin: 8px 0 4px; }
.dict .ex { color: var(--dim); border-left: 2px solid var(--line); padding-left: 10px; margin-top: 10px; }
.wx { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; }
.wx .now { display: flex; align-items: center; gap: 12px; }
.wx .icon { font-size: 50px; line-height: 1; }
.wx .temp { font-size: 52px; font-weight: 300; line-height: 1; }
.fc { display: flex; gap: 6px; margin-top: 18px; overflow-x: auto; }
.fc > div { flex: 1 0 70px; text-align: center; padding: 10px 4px; border-radius: 12px; background: var(--card); }
.fc .icon { font-size: 22px; margin: 4px 0; }
.fc .lo { color: var(--faint); }
.sb { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; text-align: center; }
.sb .team img, .sb .team .pic { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 8px; }
.sb .score { font-size: 40px; font-weight: 500; letter-spacing: .02em; }
.stk .price { font-size: 40px; font-weight: 500; }
.stk .chg { font-size: 15px; font-weight: 500; }
.up { color: var(--good); } .down { color: var(--bad); }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 20px; margin-top: 14px; font-size: 13.5px; }
.kv div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding: 5px 0; }
.kv dt { color: var(--dim); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tiles > div { background: var(--card); border-radius: 12px; padding: 14px; }
.tiles b { display: block; font-size: 24px; font-weight: 500; line-height: 1.2; }
.tiles span { color: var(--dim); font-size: 12.5px; }
.tiers > div { display: grid; grid-template-columns: 52px 1fr; border-radius: 10px; overflow: hidden; margin-bottom: 4px; background: var(--card); }
.tiers .lab { display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #1c1c1d; }
.tiers .its { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
.tiers .its span { background: var(--card2); border-radius: 6px; padding: 3px 9px; font-size: 13px; }
pre { background: #161617; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font: 12.5px/1.6 ui-monospace, Menlo, monospace; position: relative; }
.copy { position: absolute; top: 8px; right: 8px; font-size: 12px; color: var(--dim); padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; }
.calc .expr { color: var(--dim); font-size: 15px; }
.calc .ans { font-size: 36px; font-weight: 500; margin: 4px 0 6px; }
.conv { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 26px; }
.conv .eq { color: var(--faint); }
.conv small { display: block; color: var(--dim); font-size: 12.5px; }
.qt { display: flex; gap: 16px; align-items: center; }
.qt img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
.qt blockquote { font-size: 19px; line-height: 1.5; }
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.prod { background: var(--card); border-radius: 12px; overflow: hidden; transition: background .2s; display: flex; flex-direction: column; }
.prod:hover { background: var(--hover); }
.prod .im { height: 120px; background: var(--card2); }
.prod .im img { width: 100%; height: 100%; object-fit: cover; }
.prod .bd { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.prod b { font-weight: 500; }
.prod .pr { font-weight: 600; }
.cmp-head { display: flex; gap: 10px; margin-bottom: 4px; }

/* web results */
.webh { font-size: 13px; color: var(--dim); margin: 30px 0 6px; padding-top: 20px; border-top: 1px solid var(--line); }
.res { padding: 12px 0 14px; }
.res .src { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.res .src .fav { width: 26px; height: 26px; padding: 4px; background: var(--card2); }
.res .src b { display: block; font-weight: 400; font-size: 13.5px; line-height: 1.2; }
.res .src span { color: var(--faint); font-size: 12px; display: block; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res h4 { font-size: 18px; font-weight: 400; color: #c4d3ff; line-height: 1.35; }
.res a:hover h4 { text-decoration: underline; }
.res p { color: var(--dim); font-size: 13.5px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.related button { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--card); border-radius: 22px; padding: 10px 16px; transition: background .2s; }
.related button:hover { background: var(--hover); }
.err { color: var(--bad); }
@media (max-width: 600px) {
  .mosaic { height: 220px; } .heading h2 { font-size: 25px; } .pc, .check, .related { grid-template-columns: 1fr; }
  .recipe-top { flex-direction: column; } .recipe-top img { width: 100%; height: 170px; }
}

/* autosuggest */
form.search { position: relative; }
.sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--card2); border: 1px solid var(--line);
  border-radius: 16px; padding: 6px 0; box-shadow: 0 12px 32px rgba(0,0,0,.35); animation: rise .18s var(--ease) both; }
.sugg button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 16px; text-align: left; font-size: 15px; cursor: pointer; }
.sugg button.on, .sugg button:hover { background: var(--hover); }
.sugg span { color: var(--dim); white-space: pre; overflow: hidden; text-overflow: ellipsis; } .sugg b { font-weight: 600; color: var(--text); }

/* landing banner + footer links */
.promo-slot { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 8px; margin-top: -8px; min-height: 42px; }
.promo { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); font-size: 13px; color: var(--dim); transition: background .2s, color .2s; }
a.promo:hover { background: var(--hover); color: var(--text); }
.pico { width: 20px; height: 20px; border-radius: 6px; flex: none; object-fit: cover; }
.pico.own { display: grid; place-items: center; background: var(--card2); color: var(--accent); font-size: 13px; }
.ptxt { flex: 1; min-width: 0; }
.ptag { font-size: 11px; color: var(--faint); white-space: nowrap; }
.pcta { padding: 5px 12px; border-radius: 10px; background: var(--card2); color: var(--text); font-size: 12.5px; white-space: nowrap; }
.pcta:hover { background: var(--hover); }
.howto { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 13px; color: var(--dim); }
.howto b { display: block; color: var(--text); font-weight: 500; }
.tplrow { display: flex; gap: 8px; align-items: center; }
.tplrow code { flex: 1; min-width: 0; overflow: auto; padding: 6px 10px; border-radius: 8px; background: var(--bg); color: var(--text); font-size: 12px; white-space: nowrap; }
.homefoot { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 22px; padding: 16px; font-size: 13px; color: var(--faint); }
.homefoot a:hover, footer nav a:hover { color: var(--text); }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer nav { display: flex; gap: 18px; }
.notice { padding: 14px 16px; border-radius: var(--r); background: var(--card); color: var(--dim); margin-bottom: 18px; }
.notice.err { color: var(--bad); }

/* text pages (about, privacy, ads) */
.docpage header { position: static; }
.doc { max-width: 680px; padding: 40px 28px 80px 166px; }
.doc h2 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 18px; }
.doc h3 { font-size: 17px; font-weight: 500; margin: 28px 0 8px; }
.doc p, .doc li { color: var(--dim); font-size: 15px; line-height: 1.7; }
.doc ul { padding-left: 20px; display: grid; gap: 6px; }
.doc p + p { margin-top: 12px; }
.doc a { color: #c4d3ff; } .doc a:hover { text-decoration: underline; }
.doc .muted { margin-top: 32px; font-size: 13px; color: var(--faint); }
@media (max-width: 1240px) { .doc { padding-left: 28px; } }
@media (max-width: 600px) { .doc { padding: 28px 16px 60px; } }

/* verification page */
.verify { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 16px 16px 16vh; text-align: center; }
.vcard { width: 100%; max-width: 440px; padding: 26px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); display: grid; gap: 14px; justify-items: center; }
.vcard b { font-size: 17px; font-weight: 500; }
.vcard p { color: var(--dim); font-size: 13.5px; line-height: 1.6; }
#ts { min-height: 65px; display: grid; place-items: center; }
#vmsg { min-height: 20px; font-size: 13px; color: var(--faint); }
#vmsg.err { color: var(--bad); }