/* Wow Tech Today (Foxiz Androidhub look) on top of Magazine. Rules are scoped to wtt- classes
   or to elements only this theme renders. */
:root {
  --wtt-ink: #0e0e0e; --wtt-nav: #282828; --wtt-meta: #666; --wtt-ex: #555; --wtt-bg: #fff;
  --wtt-line: rgba(136,136,136,.15); --wtt-line2: rgba(136,136,136,.267); --wtt-fill: rgba(136,136,136,.07);
  --wtt-label: #0e0e0e; --wtt-h: "Roboto", Arial, Helvetica, sans-serif;
  --wtt-b: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --wtt-rule: #010101;
}
html.wtt-dark { --wtt-ink: #fff; --wtt-nav: #fff; --wtt-meta: #bbb; --wtt-ex: #eee; --wtt-bg: #0e0e0e; --wtt-label: var(--wtt-accent); --wtt-rule: #fff; --wtt-line2: rgba(136,136,136,.3); color-scheme: dark; }
body { background: var(--wtt-bg); color: var(--wtt-ink); font: 400 16px/1.7 var(--wtt-b); }
.site-main { padding: 0; background: var(--wtt-bg); }
.wtt-wrap { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 20px; }
.wtt-t { font-family: var(--wtt-h); font-weight: 700; color: var(--wtt-ink); overflow-wrap: break-word; }
.wtt-t a { transition: color .2s; }
.wtt-t a:hover { color: var(--wtt-accent); }
.wtt-img { display: block; position: relative; overflow: hidden; background: rgba(136,136,136,.12); }
.wtt-img img, .wtt-img .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wtt-ex { font: 400 17px/1.7 var(--wtt-b); color: var(--wtt-ex); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wtt-cat { display: inline-block; align-self: flex-start; padding: 3px 7px; border-radius: 2px; background: var(--wtt-label); color: #fff; font: 500 10px/10px var(--wtt-h); letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.wtt-cat:hover { background: var(--wtt-accent); }
.wtt-meta { display: flex; align-items: center; flex-wrap: wrap; font: 400 12px/1.7 var(--wtt-h); color: var(--wtt-meta); }
.wtt-by { display: inline-flex; align-items: center; color: var(--wtt-meta); }
.wtt-by b { margin-left: 4px; font-weight: 500; color: var(--wtt-nav); }
.wtt-by::after { content: ""; width: 4px; height: 4px; margin: 0 7px 0 7px; border-radius: 50%; background: #ddd; opacity: .5; }
.wtt-av { width: 22px; height: 22px; margin-right: 7px; border-radius: 50%; }

/* ---------- Header ---------- */
.wtt-head { position: relative; z-index: 60; background: var(--wtt-head); }
html.wtt-dark .wtt-head { background: #191c20; }
.wtt-top { display: grid; grid-template-columns: 1fr 650px 1fr; align-items: center; height: 85px; padding-top: 10px; }
.wtt-hsoc { display: flex; gap: 5px; }
.wtt-hsoc a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(136,136,136,.133); color: var(--wtt-ink); transition: background .2s, color .2s; }
.wtt-hsoc a:hover { background: var(--wtt-accent); color: #fff; }
.wtt-logo { justify-self: center; display: block; height: 75px; }
.wtt-logo img { width: auto; height: 75px; }
.wtt-logo .logo-text, .wtt-mlogo .logo-text, .wtt-flogo .logo-text { font: 700 30px/75px var(--wtt-h); color: var(--wtt-ink); white-space: nowrap; }
html.wtt-dark .wtt-logo img, html.wtt-dark .wtt-mlogo img, html.wtt-dark .wtt-flogo img { filter: brightness(0) invert(1); }
.wtt-top-r { display: flex; justify-content: flex-end; }
.wtt-nl { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 1px 20px 0; border-radius: 20px; background: #010101; color: #fff; font: 500 14px/16px var(--wtt-h); letter-spacing: -.5px; transition: background .2s; }
.wtt-nl:hover { background: var(--wtt-accent); }
html.wtt-dark .wtt-nl { background: var(--wtt-accent); }
.wtt-navhold { height: 52px; }
.wtt-navbar { height: 52px; background: var(--wtt-head); }
html.wtt-dark .wtt-navbar { background: #191c20; }
.wtt-navhold.stuck .wtt-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 95; box-shadow: 0 4px 30px #0000001a; animation: wtt-drop .3s cubic-bezier(.32,.74,.57,1); }
@keyframes wtt-drop { from { transform: translateY(-100%); } to { transform: none; } }
.wtt-nav > ul { display: flex; justify-content: center; height: 52px; }
.wtt-nav li { position: relative; }
.wtt-nav > ul > li > a { display: flex; align-items: center; height: 52px; padding: 0 12px; font: 500 17px/1.5 var(--wtt-h); letter-spacing: -.34px; color: var(--wtt-nav); white-space: nowrap; }
.wtt-nav > ul > li > a span { position: relative; }
.wtt-nav > ul > li > a span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--wtt-accent); transform: scaleX(0); transition: transform .25s cubic-bezier(.32,.74,.57,1); }
.wtt-nav > ul > li > a:hover span::after, .wtt-nav > ul > li.on > a span::after { transform: none; }
.wtt-sub { position: absolute; top: 100%; left: 0; min-width: 200px; padding: 10px 0; background: var(--wtt-bg); box-shadow: 0 4px 30px #0000001f; border-radius: 0 0 8px 8px; opacity: 0; visibility: hidden; transition: opacity .2s; z-index: 5; }
.wtt-nav li:hover > .wtt-sub { opacity: 1; visibility: visible; }
.wtt-sub a { display: block; padding: 6px 20px; font: 500 14px/1.5 var(--wtt-h); color: var(--wtt-nav); }
.wtt-trend { border-top: 1px solid var(--wtt-line2); border-bottom: 1px solid var(--wtt-line2); }
.wtt-trend-in { display: flex; justify-content: center; align-items: center; height: 44px; padding: 0 20px; white-space: nowrap; overflow: hidden; font: 400 14px/14px var(--wtt-h); color: var(--wtt-ink); }
.wtt-trend-h { font-weight: 700; margin-right: 13px; }
.wtt-trend a { display: inline-flex; align-items: center; }
.wtt-trend a + a { margin-left: 16px; }
.wtt-trend a + a::before { content: "-"; display: inline-block; width: 6px; margin-right: 12px; font: 700 16px/1 var(--wtt-h); color: var(--wtt-ink); }
.wtt-trend a:hover { color: var(--wtt-accent); }
.wtt-disc { padding: 5px 20px 0; height: 25px; text-align: center; font: italic 400 12px/20.4px var(--wtt-b); color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mobile header */
.wtt-mhead { display: none; }
@media (max-width: 1024px) {
  .wtt-dhead { display: none; }
  .wtt-mhead { display: block; position: relative; box-shadow: 0 4px 30px #00000012; background: var(--wtt-head); }
  html.wtt-dark .wtt-mhead { background: #191c20; }
  .wtt-mbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 42px; padding: 0 20px; }
  .wtt-burger { position: relative; justify-self: start; width: 34px; height: 16px; padding: 0 10px 0 0; border: 0; background: none; cursor: pointer; }
  .wtt-burger span { position: absolute; left: 0; height: 2px; border-radius: 2px; background: var(--wtt-nav); transition: transform .2s, opacity .2s, width .2s; }
  .wtt-burger span:nth-child(1) { top: 0; width: 24px; }
  .wtt-burger span:nth-child(2) { top: 7px; width: 16px; }
  .wtt-burger span:nth-child(3) { top: 14px; width: 10px; }
  .wtt-burger.is-open span:nth-child(1) { width: 24px; transform: translateY(7px) rotate(45deg); }
  .wtt-burger.is-open span:nth-child(2) { opacity: 0; }
  .wtt-burger.is-open span:nth-child(3) { width: 24px; transform: translateY(-7px) rotate(-45deg); }
  .wtt-mlogo { display: block; height: 30px; }
  .wtt-mlogo img { width: auto; height: 30px; }
  .wtt-mlogo .logo-text { font-size: 18px; line-height: 30px; }
  .wtt-mtools { justify-self: end; display: flex; align-items: center; }
  .wtt-msearch { display: grid; place-items: center; width: 29px; height: 19px; padding: 0 5px; border: 0; background: none; color: var(--wtt-nav); cursor: pointer; }
  .wtt-qview { height: 43px; border-top: 1px solid rgba(40,40,40,.125); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .wtt-qview::-webkit-scrollbar { display: none; }
  .wtt-qview ul { display: flex; height: 42px; white-space: nowrap; }
  .wtt-qview a { display: flex; align-items: center; height: 42px; padding: 0 15px; font: 500 14px/14px var(--wtt-h); letter-spacing: -.28px; color: var(--wtt-nav); }
  .wtt-qview a.on, .wtt-qview a:hover { color: var(--wtt-accent); }
}
/* dark switch */
.wtt-dtog { position: relative; width: 56px; height: 14px; margin-left: 0; padding: 0 0 0 15px; border: 0; border-left: 1px solid rgba(40,40,40,.125); background: none; cursor: pointer; }
.wtt-dtog::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 14px; border-radius: 22px; background: rgba(136,136,136,.15); }
.wtt-knob { position: absolute; top: -5px; left: 16px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #282828; box-shadow: 0 1px 4px #0000001f; transition: transform .25s cubic-bezier(.32,.74,.57,1), background .25s; }
.wtt-knob svg:last-child { display: none; }
html.wtt-dark .wtt-knob { transform: translateX(16px); background: var(--wtt-accent); color: #fff; }
html.wtt-dark .wtt-knob svg:first-child { display: none; }
html.wtt-dark .wtt-knob svg:last-child { display: block; }
/* mobile collapse */
.wtt-mcol { position: fixed; top: 85px; left: 0; right: 0; bottom: 0; z-index: 70; overflow-y: auto; background: var(--wtt-bg); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.wtt-mcol.open { opacity: 1; visibility: visible; }
html.wtt-lock { overflow: hidden; }
.wtt-mcol-in { padding: 15px 20px 40px; }
.wtt-mcol-lbl { margin-bottom: 10px; font: 700 15px/22.5px var(--wtt-h); color: var(--wtt-nav); }
.wtt-sform { display: flex; align-items: center; height: 38px; border: 1px solid var(--wtt-line); border-radius: 3px; }
.wtt-sf-ic { display: grid; place-items: center; width: 34px; flex: none; color: var(--wtt-nav); }
.wtt-sf-ic svg { width: 14px; height: 14px; }
.wtt-sform input { flex: 1; min-width: 0; height: 36px; padding: 7px 15px 7px 0; border: 0; background: none; color: var(--wtt-ink); font: 400 14px/1 var(--wtt-b); outline: 0; }
.wtt-sform input::-webkit-search-cancel-button { display: none; }
.wtt-sform button { display: grid; place-items: center; width: 33px; height: 34px; padding: 0 10px 0 0; border: 0; background: none; color: var(--wtt-nav); cursor: pointer; }
.wtt-mmenu { margin: 15px 0 0; }
.wtt-mmenu a { display: block; padding: 10px 0; font: 500 14px/21px var(--wtt-h); letter-spacing: -.28px; color: var(--wtt-nav); }
.wtt-mmenu ul a { padding-left: 15px; }
.wtt-mpop { padding-top: 30px; }
.wtt-mpop .wtt-h17 h2 { font-size: 18px; line-height: 18px; }
.wtt-mfollow { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; font: 700 14px/21px var(--wtt-h); color: var(--wtt-nav); }
.wtt-mfsoc { display: flex; }
.wtt-mfsoc a { display: grid; place-items: center; height: 30px; padding: 0 12px; color: var(--wtt-nav); }

/* ---------- Shared pieces ---------- */
.wtt-h17 { margin: 0 0 20px; }
.wtt-h17 h2 { display: flex; align-items: center; font: 700 21px/21px var(--wtt-h); color: var(--wtt-ink); }
.wtt-h17 h2::after { content: ""; flex: 1; margin-left: 10px; border-bottom: 2px solid var(--wtt-rule); }
.wtt-h10 { margin: 0 0 15px; font: 700 18px/21px var(--wtt-h); color: var(--wtt-ink); }
.wtt-blk { margin-bottom: 15px; }

/* overlays */
.wtt-ov { position: relative; overflow: hidden; border-radius: 2px; background: #0e0e0e; }
.wtt-ov > .wtt-img, .wtt-ov-in > .wtt-img { position: absolute; inset: 0; }
.wtt-ov-c { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 25px 20px; background: linear-gradient(to top, #0e0e0e 0, rgba(14,14,14,.9) 50%, rgba(14,14,14,0)); }
.wtt-ov .wtt-t { margin-top: 10px; color: #fff; }
.wtt-ov .wtt-t a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wtt-ov .wtt-meta { margin-top: 10px; color: #ddd; }
.wtt-ov .wtt-by, .wtt-ov .wtt-by b { color: #fff; }
.wtt-ov-lead { padding: 0 20px; background: none; border-radius: 2px; }
.wtt-ov-in { position: relative; height: 100%; overflow: hidden; border-radius: 2px; background: #0e0e0e; }
.wtt-ov-lead .wtt-ov-c { padding: 100px 25px 25px; background: linear-gradient(rgba(25,177,121,0) 0%, rgb(1,74,47) 100%); }
html.wtt-dark .wtt-ov-lead .wtt-ov-c { background: linear-gradient(rgba(10,21,16,0) 0%, #0a1510 100%); }
.wtt-ov-lead .wtt-cat { padding: 3.9px 9.1px; font-size: 13px; line-height: 13px; }
.wtt-ov-lead .wtt-t { margin-top: 12px; font-size: 42px; line-height: 1.25; }
.wtt-ov-lead .wtt-ex { margin-top: 12px; color: #ddd; }
.wtt-ov-lead .wtt-meta { margin-top: 10px; }
.wtt-ov-wide .wtt-t { font-size: 30px; line-height: 1.25; }
.wtt-ov-sq .wtt-t { font-size: 21px; line-height: 1.25; }

/* bordered card */
.wtt-box { position: relative; display: flex; flex-direction: column; padding-bottom: 17px; border-radius: 5px; }
.wtt-box::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--wtt-line); border-radius: 5px; pointer-events: none; }
.wtt-box-f { position: relative; }
.wtt-box-f .wtt-img { aspect-ratio: 244 / 171; border-radius: 5px 5px 0 0; }
.wtt-box-f .wtt-cat { position: absolute; left: 12px; bottom: 0; z-index: 1; }
.wtt-box .wtt-t { margin-top: 12px; padding: 0 12px; font-size: 16px; line-height: 1.3; }

/* list */
.wtt-lis { display: flex; flex-direction: column; }
.wtt-li { position: relative; display: flex; align-items: center; gap: 20px; padding: 0 20px 25px; margin-bottom: 25px; }
.wtt-li::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; border-bottom: 1px solid var(--wtt-line); }
.wtt-li:last-child { margin-bottom: 0; }
.wtt-li:last-child::after { display: none; }
.wtt-li > .wtt-img { flex: none; width: 280px; aspect-ratio: 280 / 182; border-radius: 2px; }
.wtt-li-c { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 0 10px 0 0; }
.wtt-li .wtt-t { margin-top: 7px; font-size: 28px; line-height: 1.3; }
.wtt-li .wtt-ex { margin-top: 7px; }
.wtt-li .wtt-meta { margin-top: 7px; }
.wtt-more { display: flex; justify-content: center; margin-top: 25px; }
.wtt-more a { display: inline-flex; align-items: center; height: 34px; padding: 0 20px; border-radius: 2px; background: var(--wtt-fill); font: 500 14px/34px var(--wtt-h); color: var(--wtt-ink); transition: background .2s, color .2s; }
.wtt-more a:hover { background: var(--wtt-accent); color: #fff; }

/* small round list */
.wtt-smalls { display: flex; flex-direction: column; gap: 20px; }
.wtt-sm { display: flex; align-items: center; gap: 15px; padding: 0 15px; }
.wtt-sm > .wtt-img { flex: none; width: 70px; height: 70px; border-radius: 50%; }
.wtt-sm-c { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.wtt-sm .wtt-t { margin-top: 5px; font-size: 15px; line-height: 1.3; }

/* follow boxes */
.wtt-fol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; text-align: center; }
.wtt-fol a { display: flex; flex-direction: column; align-items: center; font-family: var(--wtt-h); }
.wtt-fol i { display: grid; place-items: center; width: 66px; height: 66px; max-width: 100%; border: 3px solid rgba(25,177,121,.25); border-radius: 3px; color: var(--wtt-ink); transition: background .2s, color .2s, border-color .2s; }
.wtt-fol i svg { width: 22px; height: 22px; }
.wtt-fol a:hover i { background: var(--wtt-accent); border-color: var(--wtt-accent); color: #fff; }
.wtt-fol b { margin-top: 7px; font: 700 13px/16.9px var(--wtt-h); color: var(--wtt-ink); white-space: nowrap; }
.wtt-fol span { font: 400 12px/18px var(--wtt-h); color: var(--wtt-meta); }

/* ads */
.wtt-adrow { padding-top: 20px; }
.wtt-ad { text-align: center; line-height: 0; }
.wtt-ad-in > * { margin-left: auto; margin-right: auto; }
.wtt-ad img, .wtt-ad iframe { display: inline-block; max-width: 100%; height: auto; }
.wtt-ad-lbl { display: block; margin-bottom: 10px; font: 400 12px/12px var(--wtt-b); color: var(--wtt-meta); }
.wtt-aside .wtt-ad { margin-top: 15px; position: sticky; top: 20px; }
.wtt-navstuck .wtt-aside .wtt-ad { top: 72px; }

/* ---------- Home ---------- */
.wtt-hero { padding-top: 20px; }
.wtt-hero-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.wtt-hero-l .wtt-ov-lead { height: 561px; }
.wtt-hero-r { display: flex; flex-direction: column; gap: 20px; }
.wtt-ov-wide { aspect-ratio: 640 / 269; }
.wtt-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wtt-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wtt-ov-sq { aspect-ratio: 1; }
.wtt-hero-row { margin-top: 20px; }
.wtt-html { padding-top: 15px; }
.wtt-promo { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1px 1px; text-align: center; font: 400 14px/23.8px var(--wtt-b); color: var(--wtt-ink); }
.wtt-mint { display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 20px; border-radius: 40px; background: var(--wtt-btn); color: #0e0e0e; font: 500 13px/13px var(--wtt-h); transition: transform .3s; }
.wtt-mint:hover { transform: scale(1.06); }
.wtt-picks { padding-top: 10px; }
.wtt-hscroll { overflow: hidden; }
.wtt-g5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.wtt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 346px; column-gap: 103px; align-items: start; padding-top: 30px; padding-bottom: 30px; }
.wtt-layout.no-side { grid-template-columns: minmax(0, 1fr); }
.wtt-aside { min-width: 0; height: 100%; display: flex; flex-direction: column; }
.wtt-aside .wtt-blk { margin-bottom: 15px; }

/* ---------- Footer ---------- */
.wtt-foot { border-top: 1px solid var(--wtt-line2); background: var(--wtt-bg); }
.wtt-f1 { display: flex; align-items: center; justify-content: space-between; height: 63px; padding-top: 11px; padding-left: 25px; }
.wtt-flogo { display: block; height: 52px; }
.wtt-flogo img { width: auto; height: 52px; }
.wtt-flogo .logo-text { font-size: 24px; line-height: 52px; }
.wtt-fsoc { display: flex; gap: 5px; }
.wtt-fsoc a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0e0e0e; color: #fff; transition: background .2s; }
html.wtt-dark .wtt-fsoc a { background: #fff; color: #0e0e0e; }
.wtt-fsoc a:hover { background: var(--wtt-accent); }
.wtt-f2 { display: grid; grid-template-columns: 389fr 442fr 389fr; gap: 40px; padding-top: 20px; padding-bottom: 20px; }
.wtt-dash { display: block; width: 100px; height: 15px; background: repeating-linear-gradient(to right, #29bd81 0 8px, transparent 8px 14.3px); }
.wtt-fabout p { margin-top: 20px; font: italic 400 14px/23.8px var(--wtt-b); color: var(--wtt-ink); }
.wtt-fnews { padding: 0 30px; border-left: 1px solid var(--wtt-line2); border-right: 1px solid var(--wtt-line2); }
.wtt-fnews h2 { font: 700 22px/27.5px var(--wtt-h); color: var(--wtt-ink); }
.wtt-nform { margin-top: 20px; max-width: 380px; }
.wtt-nform input[type=email] { display: block; width: 100%; max-width: 350px; height: 51px; padding: 12px 20px; border: 1px solid var(--wtt-line); border-radius: 10px; background: var(--wtt-line); color: var(--wtt-ink); font: 400 14px/1 var(--wtt-b); outline: 0; }
.wtt-nform button { display: block; height: 40px; margin-top: 12px; padding: 0 40px; border: 0; border-radius: 10px; background: var(--wtt-btn); color: #0e0e0e; font: 700 14px/40px var(--wtt-h); letter-spacing: -.5px; cursor: pointer; transition: filter .2s; }
.wtt-nform button:hover { filter: brightness(.95); }
.wtt-agree { display: flex; align-items: center; gap: 9px; margin-top: 22px; font: 400 12.8px/21.76px var(--wtt-b); color: var(--wtt-meta); cursor: pointer; }
.wtt-agree input { margin: 0; }
.wtt-nmsg { margin-top: 10px; font: 500 13px/1.5 var(--wtt-h); }
.wtt-nmsg.ok { color: var(--wtt-accent); } .wtt-nmsg.err { color: #e5484d; }
.wtt-fmenus { display: flex; justify-content: space-between; padding: 0 33px 0 43px; }
.wtt-fm a { display: inline-block; padding: 5px 0; font: 500 14px/23.8px var(--wtt-h); color: var(--wtt-ink); }
.wtt-fm li:first-child a { padding-top: 0; }
.wtt-fm a:hover { color: var(--wtt-accent); }
.wtt-fm-1 a[href$="/category/autos/"] span::after, .wtt-fm-1 a[href$="/category/reviews/"] span::after { display: inline-block; vertical-align: 5px; margin-left: 5px; padding: 2px 5px; border-radius: 2px; background: #56ca71; color: #fff; font: 400 12px/12px var(--wtt-h); content: "New"; }
.wtt-fm-1 a[href$="/category/reviews/"] span::after { content: "Hot"; background: #ff6552; }
.wtt-copy { padding: 20px 20px 49px; text-align: center; font: italic 400 12px/20.4px var(--wtt-b); color: #777; }
.wtt-backtop { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: #0e0e0e; color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
html.wtt-dark .wtt-backtop { background: var(--wtt-accent); }
.wtt-backtop.show { opacity: 1; visibility: visible; }

/* ---------- Article ---------- */
.wtt-s-img { margin: 0; overflow: hidden; border-radius: 0 0 3px 3px; aspect-ratio: 1300 / 585; background: rgba(136,136,136,.12); }
.wtt-s-img img { width: 100%; height: 100%; object-fit: cover; }
.wtt-s-grid { grid-template-columns: minmax(0, 1fr) 369px; column-gap: 81px; }
.wtt-s-head { padding-bottom: 30px; border-bottom: 5px solid var(--wtt-line); }
.wtt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 9px; font: 500 14px/21px var(--wtt-h); color: var(--wtt-ink); }
.wtt-crumbs a:hover { color: var(--wtt-accent); }
.wtt-s-head .wtt-crumbs { margin-bottom: 20px; }
.wtt-s-title { margin-top: 15px; font: 700 44px/1.2 var(--wtt-h); letter-spacing: -1.6px; color: var(--wtt-ink); overflow-wrap: break-word; }
.wtt-s-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px 20px; flex-wrap: wrap; margin-top: 20px; }
.wtt-s-by { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wtt-s-av { flex: none; width: 60px; height: 60px; border-radius: 50%; }
.wtt-s-by .l1, .wtt-s-by .l2 { font: 400 13.8px/23.46px var(--wtt-h); color: var(--wtt-ink); }
.wtt-s-by .l1 { color: var(--wtt-meta); }
.wtt-s-by .l1 a, .wtt-s-by .l1 b { font-weight: 500; color: var(--wtt-accent); }
.wtt-s-share { display: flex; align-items: center; }
.wtt-s-share .lbl { display: inline-flex; align-items: center; gap: 5px; margin-right: 7px; font: 400 12.8px/22px var(--wtt-h); color: var(--wtt-meta); }
.wtt-s-share .lbl em { font-style: normal; }
.wtt-s-share a, .wtt-s-share button { display: grid; place-items: center; width: 28px; height: 32px; margin-left: 3px; padding: 0; border: 0; background: none; color: var(--wtt-ink); cursor: pointer; }
.wtt-s-share em { display: none; }
.wtt-s-share .lbl em { display: inline; }
.wtt-s-share a:hover, .wtt-s-share button:hover { color: var(--wtt-accent); }
.wtt-s-body { padding: 35px 65px 0; }
.wtt-body { font: 400 16px/27.2px var(--wtt-b); color: var(--wtt-ink); }
.wtt-body.post-content > *, .wtt-body.post-content > div > * { margin-bottom: 15px; }
.wtt-body.post-content h2 { font: 700 30px/1.3 var(--wtt-h); color: var(--wtt-ink); margin-top: 25px; }
.wtt-body.post-content h3 { font: 700 21px/1.35 var(--wtt-h); color: var(--wtt-ink); margin-top: 22px; }
.wtt-body.post-content h4 { font: 700 17px/1.4 var(--wtt-h); }
.wtt-body.post-content a { color: var(--wtt-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.wtt-body.post-content a:hover { color: var(--wtt-accent); }
.wtt-body.post-content blockquote { border-left-color: var(--wtt-accent); color: var(--wtt-ink); }
.wtt-body.post-content .oe-source { margin-top: 0; padding-top: 0; border-top: 0; font: 400 16px/27.2px var(--wtt-b); color: var(--wtt-ink); }
.wtt-body.post-content .oe-source a { color: var(--wtt-ink); text-decoration: underline; }
.wtt-e-share { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin-top: 25px; padding: 18px 0 15px; border-top: 1px dashed var(--wtt-line2); border-bottom: 1px dashed var(--wtt-line2); }
.wtt-e-share .lbl { display: inline-flex; align-items: center; gap: 8px; font: 700 17px/24.65px var(--wtt-h); color: var(--wtt-ink); }
.wtt-e-share .lbl svg { width: 17px; height: 17px; }
.wtt-e-btns { display: flex; gap: 7px; }
.wtt-e-btns a, .wtt-e-btns button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: 2px; background: var(--wtt-fill); color: var(--wtt-ink); font: 500 14px/40px var(--wtt-h); letter-spacing: -.5px; cursor: pointer; transition: background .2s, color .2s; }
.wtt-e-btns em { font-style: normal; }
.wtt-e-btns .fb, .wtt-e-btns .tw { padding: 0 20px; }
.wtt-e-btns .em { display: none; }
.wtt-e-btns a:hover, .wtt-e-btns button:hover { background: var(--wtt-accent); color: #fff; }
.js-wtt-copy.done { color: var(--wtt-accent); }
.wtt-related { padding: 40px 0 40px; border-top: 1px solid var(--wtt-line2); }
.wtt-related .wtt-wrap { padding: 0 40px; }
.wtt-rel .wtt-box-f .wtt-img { aspect-ratio: 300 / 210; }
.wtt-rel .wtt-box .wtt-t { margin-top: 12px; padding: 0 12px 0 10px; }

/* pages */
.wtt-page { max-width: 900px; padding-top: 40px; padding-bottom: 60px; }
.wtt-page-title { margin-bottom: 25px; font: 700 42px/1.2 var(--wtt-h); letter-spacing: -1.5px; color: var(--wtt-ink); }

/* ---------- Archive ---------- */
.wtt-arch-head { padding: 40px 0; background-image: radial-gradient(rgba(136,136,136,.25) 1px, transparent 1.2px); background-size: 8px 8px; }
.wtt-arch-head .wtt-crumbs { margin-bottom: 20px; }
.wtt-arch-title { font: 700 42px/50.4px var(--wtt-h); letter-spacing: -1.5px; color: var(--wtt-ink); overflow-wrap: break-word; }
.wtt-feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-top: 20px; align-items: start; }
.wtt-feat-l .wtt-ov-lead { height: 450px; }
.wtt-feat-l .wtt-ov-lead .wtt-t { font-size: 30px; line-height: 1.25; }
.wtt-feat-l .wtt-ex { display: none; }
.wtt-feat-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wtt-box2 .wtt-box-f .wtt-img { aspect-ratio: 310 / 250; }
.wtt-box2 .wtt-t { font-size: 17px; }
.wtt-box2 .wtt-ex { margin-top: 10px; padding: 0 12px; font-size: 12.8px; line-height: 23px; -webkit-line-clamp: 3; }
.wtt-box2 .wtt-meta { margin-top: 10px; padding: 0 12px; }
.wtt-arch { padding-top: 30px; }
.wtt-none { padding: 30px 0; font: 400 16px/1.6 var(--wtt-b); color: var(--wtt-meta); }
.wtt-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 30px; }
.wtt-pager a, .wtt-pager .dots { display: grid; place-items: center; min-width: 26px; height: 34px; padding: 0 8px; border-radius: 3px; font: 500 14px/34px var(--wtt-h); color: var(--wtt-ink); }
.wtt-pager a:hover { color: var(--wtt-accent); }
.wtt-pager a.on { background: var(--wtt-accent); color: #fff; }
.wtt-pager .wtt-pnav { border: 1px solid var(--wtt-line); }
.wtt-search-head .wtt-bsearch { margin: 20px 0 0; }

/* 404 */
.wtt-404 { display: flex; flex-direction: column; align-items: center; padding: 120px 0 130px; text-align: center; }
.wtt-404 h1 { font: 700 42px/1.2 var(--wtt-h); letter-spacing: -1.5px; color: var(--wtt-ink); }
.wtt-404 p { max-width: 720px; margin-top: 18px; font: 400 14px/23.8px var(--wtt-b); color: var(--wtt-ex); }
.wtt-bsearch { display: flex; align-items: center; width: 100%; max-width: 550px; height: 66px; margin: 25px auto 0; padding: 0 10px; border-radius: 8px; background: var(--wtt-fill); }
.wtt-bsearch .wtt-sf-ic svg { width: 20px; height: 20px; }
.wtt-bsearch input { flex: 1; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: none; color: var(--wtt-ink); font: 400 14px/1 var(--wtt-b); outline: 0; }
.wtt-bsearch button { height: 26px; padding: 0 10px 0 13px; border: 0; border-left: 3px solid var(--wtt-accent); background: none; color: var(--wtt-ink); font: 700 14px/26px var(--wtt-h); cursor: pointer; }
.wtt-btn { display: inline-flex; align-items: center; height: 40px; margin-top: 25px; padding: 0 40px; border-radius: 2px; background: var(--wtt-fill); font: 500 14px/40px var(--wtt-h); color: var(--wtt-ink); }
.wtt-btn:hover { background: var(--wtt-accent); color: #fff; }

/* contact form */
.wtt-body .oe-contact input, .wtt-body .oe-contact textarea { border: 1px solid var(--wtt-line); border-radius: 8px; background: transparent; color: var(--wtt-ink); }
.wtt-body .oe-contact button { border-radius: 2px; background: var(--wtt-accent); font-family: var(--wtt-h); }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .wtt-layout { column-gap: 50px; }
  .wtt-s-grid { column-gap: 40px; }
  .wtt-ov-lead .wtt-t { font-size: 36px; }
  .wtt-li > .wtt-img { width: 240px; }
  .wtt-li .wtt-t { font-size: 24px; }
}
@media (max-width: 1024px) {
  .wtt-layout, .wtt-s-grid { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  .wtt-aside { width: 100%; max-width: 400px; margin: 30px auto 0; height: auto; }
  .wtt-hero-top { grid-template-columns: minmax(0, 1fr); }
  .wtt-hero-l .wtt-ov-lead { height: auto; aspect-ratio: 728 / 413; }
  .wtt-ov-lead .wtt-t { font-size: 36px; }
  .wtt-ov-wide { aspect-ratio: 728 / 306; }
  .wtt-ov-wide .wtt-t { font-size: 26px; }
  .wtt-g2 .wtt-ov-sq { aspect-ratio: 359 / 215; }
  .wtt-hscroll { overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
  .wtt-hscroll::-webkit-scrollbar { display: none; }
  .wtt-g5 { grid-template-columns: repeat(5, 260px); }
  .wtt-hero-row { display: flex; overflow-x: auto; scrollbar-width: none; margin-left: -20px; margin-right: -20px; padding: 0 20px; gap: 10px; }
  .wtt-hero-row::-webkit-scrollbar { display: none; }
  .wtt-hero-row .wtt-ov-sq { flex: none; width: 290px; }
  .wtt-f2 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .wtt-f1 { padding-left: 20px; }
  .wtt-fnews { padding: 20px 0; border: 0; border-top: 1px solid var(--wtt-line2); border-bottom: 1px solid var(--wtt-line2); }
  .wtt-fmenus { padding: 0; }
  .wtt-s-img { aspect-ratio: 728 / 328; }
  .wtt-s-body { padding: 30px 0 0; }
  .wtt-feat { grid-template-columns: minmax(0, 1fr); }
  .wtt-feat-l .wtt-ov-lead { height: auto; aspect-ratio: 728 / 413; }
  .wtt-related .wtt-wrap { padding: 0 20px; }
  .wtt-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wtt-backtop { display: none; }
}
@media (max-width: 767px) {
  .wtt-wrap { padding: 0 20px; }
  .wtt-hero-l .wtt-ov-lead { aspect-ratio: auto; height: auto; padding: 0 20px; }
  .wtt-ov-lead .wtt-ov-in { display: flex; flex-direction: column; height: auto; }
  .wtt-ov-lead .wtt-ov-in > .wtt-img { position: relative; inset: auto; aspect-ratio: 310 / 186; }
  .wtt-ov-lead .wtt-ov-c { position: relative; padding: 0 20px 30px; background: #0e0e0e; }
  .wtt-ov-lead .wtt-cat { margin-top: -10px; }
  .wtt-ov-lead .wtt-t { margin-top: 14px; font-size: 26px; line-height: 1.3; }
  .wtt-ov-lead .wtt-ex { font-size: 14px; line-height: 1.5; -webkit-line-clamp: 3; }
  .wtt-ov-lead .wtt-meta { margin-top: 15px; }
  .wtt-ov-wide { aspect-ratio: 350 / 280; }
  .wtt-ov-wide .wtt-t { font-size: 20px; line-height: 1.3; }
  .wtt-g2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wtt-hero-r { gap: 10px; }
  .wtt-hero-top { gap: 10px; }
  .wtt-g2 .wtt-ov-sq, .wtt-hero-row .wtt-ov-sq { aspect-ratio: 350 / 158; }
  .wtt-ov-sq .wtt-ov-c { padding: 15px; }
  .wtt-g2 .wtt-ov-sq .wtt-t { font-size: 18px; line-height: 1.3; }
  .wtt-hero-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 10px 0 0; padding: 0; overflow: visible; }
  .wtt-hero-row .wtt-ov-sq { width: auto; }
  .wtt-hero-row .wtt-ov-sq .wtt-t { font-size: 15px; line-height: 1.3; }
  .wtt-html { padding-top: 20px; }
  .wtt-promo { flex-direction: column; gap: 0; }
  .wtt-promo .wtt-mint { height: 24px; }
  .wtt-picks { padding-top: 20px; }
  .wtt-h17 h2 { font-size: 18px; line-height: 18px; }
  .wtt-g5 { grid-template-columns: repeat(5, 240px); }
  .wtt-box-f .wtt-img { aspect-ratio: 240 / 144; }
  .wtt-box .wtt-t { font-size: 15px; line-height: 1.4; }
  .wtt-li { align-items: flex-start; gap: 14px; padding: 0 20px 15px; margin-bottom: 15px; }
  .wtt-li > .wtt-img { width: 115px; aspect-ratio: 115 / 92; }
  .wtt-li-c { padding: 0; }
  .wtt-li .wtt-t { font-size: 16px; line-height: 1.4; }
  .wtt-li .wtt-ex { display: none; }
  .wtt-layout { padding-top: 30px; }
  .wtt-aside { max-width: none; }
  .wtt-fol { gap: 8px; }
  .wtt-fol i { width: 100%; aspect-ratio: 1; height: auto; max-width: 66px; }
  .wtt-f1 { padding: 20px 20px 0; height: auto; }
  .wtt-flogo { height: 36px; }
  .wtt-flogo img { height: 36px; }
  .wtt-fsoc a { width: 27px; height: 27px; }
  .wtt-fsoc a svg { width: 14px; height: 14px; }
  .wtt-fnews h2 { font-size: 22px; }
  .wtt-s-img { aspect-ratio: 350 / 158; }
  .wtt-s-head .wtt-crumbs { font-size: 12px; line-height: 18px; margin-bottom: 15px; }
  .wtt-s-title { font-size: 28px; line-height: 1.3; letter-spacing: -1px; }
  .wtt-s-meta { flex-direction: column-reverse; align-items: stretch; }
  .wtt-s-share { padding: 7px 15px; border-radius: 3px; background: var(--wtt-fill); }
  .wtt-s-share .lbl em { display: none; }
  .wtt-s-av { width: 42px; height: 42px; }
  .wtt-s-by .l1, .wtt-s-by .l2 { font-size: 12.5px; line-height: 19px; }
  .wtt-e-share .lbl { font-size: 0; }
  .wtt-e-share .lbl svg { width: 15px; }
  .wtt-e-btns .tw em { display: none; }
  .wtt-e-btns a, .wtt-e-btns button { height: 34px; line-height: 34px; }
  .wtt-e-btns .tw { padding: 0 12px; }
  .wtt-rel { gap: 10px; }
  .wtt-rel .wtt-box .wtt-t { font-size: 14px; }
  .wtt-related { padding-top: 30px; }
  .wtt-arch-head { padding: 25px 0; }
  .wtt-arch-head .wtt-crumbs { font-size: 12px; margin-bottom: 10px; }
  .wtt-arch-title { font-size: 28px; line-height: 1.3; }
  .wtt-feat-l .wtt-ov-lead .wtt-t { font-size: 24px; }
  .wtt-feat-r { grid-template-columns: minmax(0, 1fr); }
  .wtt-404 { padding: 60px 0 80px; }
  .wtt-404 h1, .wtt-page-title { font-size: 28px; }
  .wtt-bsearch { height: 50px; }
}
@media (max-width: 360px) {
  .wtt-mbar { padding: 0 12px; }
  .wtt-mlogo img { height: 26px; }
  .wtt-fmenus { flex-wrap: wrap; gap: 15px; }
  .wtt-e-btns .fb em { display: none; }
  .wtt-e-btns .fb { padding: 0 12px; }
}
@media (max-width: 767px) {
  .wtt-sm .wtt-t { font-size: 13px; line-height: 1.35; }
  .wtt-ov-lead .wtt-cat { padding: 3px 7px; font-size: 10px; line-height: 10px; }
  .wtt-ov-lead .wtt-ex { font-size: 12.5px; }
}
.wtt-single { padding-top: 20px; }
.wtt-crumbs { gap: 0 5px; }
.wtt-rel .wtt-box-f .wtt-img { aspect-ratio: 300 / 186; }
@media (max-width: 1024px) { .wtt-single { padding-top: 20px; } }
@media (max-width: 767px) {
  .wtt-s-head .wtt-crumbs { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; margin-bottom: 12px; }
  .wtt-s-head .wtt-crumbs > :last-child { overflow: hidden; text-overflow: ellipsis; }
  .wtt-s-title { margin-top: 12px; }
  .wtt-s-meta { margin-top: 15px; gap: 15px; }
  .wtt-s-share a svg, .wtt-s-share button svg { width: 17px; height: 17px; }
  .wtt-s-head { padding-bottom: 20px; }
  .wtt-s-body { padding-top: 25px; }
  .wtt-body { font-size: 14.5px; line-height: 24px; }
  .wtt-body.post-content .oe-source { font-size: 14.5px; line-height: 24px; }
}
.wtt-feat-l .wtt-ov-lead .wtt-t { font-size: 36px; line-height: 1.25; }
.wtt-box2 .wtt-t { font-size: 19px; line-height: 1.3; }
.wtt-box2 .wtt-ex { font-size: 13px; line-height: 24px; }
@media (max-width: 767px) { .wtt-feat-l .wtt-ov-lead .wtt-t { font-size: 24px; } .wtt-box2 .wtt-t { font-size: 17px; } }
@media (max-width: 767px) {
  .wtt-feat { gap: 10px; }
  .wtt-feat-l .wtt-ov-lead { aspect-ratio: auto; }
  .wtt-feat-r { gap: 10px; }
  .wtt-box2 { flex-direction: row-reverse; align-items: stretch; padding-bottom: 0; min-height: 126px; }
  .wtt-box2 .wtt-box-f { flex: none; width: 100px; }
  .wtt-box2 .wtt-box-f .wtt-img { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0 5px 5px 0; }
  .wtt-box2 .wtt-box-f .wtt-cat { left: auto; right: 54px; bottom: 6px; transform: translateX(100%); }
  .wtt-box2 > .wtt-t, .wtt-box2 > .wtt-meta { padding: 0 12px; }
  .wtt-box2 { display: grid; grid-template-columns: minmax(0, 1fr) 100px; grid-template-rows: auto 1fr; }
  .wtt-box2 .wtt-box-f { grid-column: 2; grid-row: 1 / 3; width: auto; }
  .wtt-box2 > .wtt-t { grid-column: 1; grid-row: 1; margin-top: 16px; font-size: 15px; line-height: 1.4; }
  .wtt-box2 > .wtt-meta { grid-column: 1; grid-row: 2; align-self: start; margin: 8px 0 14px; }
  .wtt-box2 .wtt-ex { display: none; }
}
@media (max-width: 767px) {
  .wtt-feat { padding-top: 20px; }
  .wtt-feat-l .wtt-ov-lead .wtt-ov-in > .wtt-img { aspect-ratio: 310 / 232; }
  .wtt-feat-l .wtt-ov-lead .wtt-t { font-size: 26px; }
}