/*
  Global styles
  ---
  tokens, typography, blocks
*/
.q-ctr { margin: 0 auto 0 auto; max-width: 1240px; padding: 0 19px 0 19px }
.q-hdr { backdrop-filter: blur(9px); position: sticky; border-bottom: 1px solid var(--x-base-300); background-color: rgb(11 10 9 / 0.86); z-index: 30; top: 0 }
.q-hi { display: flex; row-gap: 17px; align-items: center; column-gap: 17px; min-height: 54px; justify-content: space-between; flex-wrap: wrap }
.q-lg { color: var(--x-base-content); align-items: center; column-gap: 10px; display: inline-flex; row-gap: 10px }
.q-lg { font-weight: 800; font-size: 1.05rem; font-family: var(--x-display); text-decoration: none; letter-spacing: -.01em }
.q-lg svg { width: 22px; height: 22px }
.q-nv { gap: var(--x-step-1); display: flex }
.q-nv a { padding: var(--x-step-3) 9px var(--x-step-3) }
.q-nv a { font-size: .86em; text-decoration-line: none; color: var(--x-neutral); border-radius: 7px }
.q-nv a:hover { background-color: var(--x-base-100); color: var(--x-p) }
.q-jb { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgb(227 161 53 / 0.16), transparent 70%); text-align: center; padding: var(--x-step-16) 0 27px 0 }
.q-jb h1 { margin: 0 auto 9px auto; letter-spacing: -.02em }
.q-jb h1 { font-size: 2.6rem; max-width: 760px }
.q-sub { color: var(--x-neutral); font-size: 1.08em; max-width: 620px; margin-bottom: var(--x-step-7) }
.q-jb .q-sub { margin: 0 auto 30px auto }
.q-chs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--x-step-4) }
.q-ch { background-color: var(--x-base-200); text-overflow: ellipsis; border: 1px solid var(--x-base-300); overflow: hidden; color: var(--x-neutral); display: inline-block; white-space: nowrap; max-width: 100%; font-size: .84em; transition: border-color .15s,color .15s; padding: var(--x-step-3) 15px var(--x-step-3) 15px; text-decoration: none; border-radius: 1008px }
.q-ch:hover { border-color: var(--x-p); color: var(--x-p) }
.q-ch.q-eb { border-color: var(--x-p); color: var(--x-base); font-weight: bold; background-color: var(--x-p) }
.q-ch.q-eb { letter-spacing: 0; margin: 0; text-transform: none; font-size: .84em }
.q-mn2 { padding: 25px 0 76px 0 }
.q-on { padding: 3px var(--x-step-4) 3px var(--x-step-4); border: 1px solid rgb(227 161 53 / 0.35); background-color: rgb(227 161 53 / 0.1); white-space: nowrap; column-gap: 7px; align-items: center; color: var(--x-p); font-size: .74em; row-gap: 7px; font-family: ui-monospace, 'Cascadia Mono', 'Roboto Mono', monospace; display: inline-flex; border-radius: 911px }
.q-pk { border: 1px solid var(--x-base-300); grid-template-columns: minmax(0,5fr) minmax(0,4fr); column-gap: 0; background-color: var(--x-base-200); display: grid; row-gap: 0 }
.q-pk { margin-bottom: var(--x-step-14); box-shadow: 0 0 0 1px rgb(227 161 53 / 0.08), 0 30px 80px -30px rgb(227 161 53 / 0.35); overflow: hidden; text-decoration: none; color: inherit; border-radius: 9px }
.q-pk img { width: 100%; object-fit: cover }
.q-pk img { min-height: 240px; height: 100% }
.q-pk>div { display: flex; padding: 29px 33px 29px; flex-direction: column }
.q-pk>div { row-gap: 11px; column-gap: 11px; align-items: flex-start }
.q-pk h2 { margin: 0; font-size: 1.6rem }
.q-pk p { color: var(--x-neutral); margin: 0 }
.q-pk .q-bt { background-color: var(--x-p); margin-top: auto }
.q-pk .q-bt { color: var(--x-base); padding: 9px 17px 9px; border-radius: 7px }
.q-ad2 { color: var(--x-s); font-family: ui-monospace, 'Cascadia Mono', 'Roboto Mono', monospace; overflow-wrap: anywhere }
.q-ad2 { text-decoration: none; font-size: .8em }
.q-ad2:hover { text-decoration: underline }
.q-bk { display: flex; justify-content: space-between; border-bottom: 1px solid var(--x-base-300); align-items: baseline }
.q-bk { margin-bottom: var(--x-step-8); padding-bottom: var(--x-step-5) }
.q-bk h2 { margin: 0; font-size: 1.25rem }
.q-mo { color: var(--x-neutral); font-size: .88em; text-decoration: none }
.q-mo:hover { color: var(--x-p) }
.q-fd { row-gap: 16px; column-gap: 16px; display: grid; margin-bottom: 46px; grid-template-columns: repeat(3,minmax(0,1fr)) }
.q-fd .q-tl2 { gap: 11px; transition: border-color .15s,box-shadow .15s; padding: 15px var(--x-step-8) 19px var(--x-step-8) }
.q-fd .q-tl2:hover { box-shadow: 0 0 0 1px rgb(227 161 53 / 0.25), 0 12px 40px -20px rgb(227 161 53 / 0.35); border-color: rgb(227 161 53 / 0.6) }
.q-fd .q-ph { row-gap: 11px; column-gap: 11px }
.q-fd .q-ph { justify-content: space-between; align-items: flex-start; display: flex }
.q-fd h3 { font-size: 1.02em; line-height: 1.3 }
.q-fd h3 a { color: var(--x-base-content); text-decoration: none }
.q-fd h3 a:hover { color: var(--x-p) }
.q-fd img { object-fit: cover; aspect-ratio: 16/10; border: 1px solid var(--x-base-300); width: 100%; border-radius: 4px }
.q-fd p { -webkit-line-clamp: 3 }
.q-fd p { overflow: hidden; font-size: .9em; display: -webkit-box; -webkit-box-orient: vertical }
.q-ph h1 { font-size: 2.3rem; letter-spacing: -.02em }
.q-ph h1 { margin: 11px 0 13px 0; max-width: 860px }
.q-ph .q-sub { max-width: 760px; margin-bottom: var(--x-step-7) }
.q-sp { grid-template-columns: minmax(0,1fr) 280px; display: grid; gap: 49px }
.q-sp { margin-top: 21px; align-items: start }
.q-sd { grid-template-columns: minmax(0,1fr); top: 74px; gap: 17px; position: sticky; display: grid }