@import url("https://fonts.googleapis.com/css2?family=Martian+Mono:wght@600&family=Roboto:ital,wght@0,400;0,600;1,400&display=swap");
/*!
 * Styles
 */
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { background: hsl(40 35% 96%); color: hsl(30 20% 14%); margin: 0 }
body { line-height: 1.55; font-size: 1.188rem; font-family: 'Roboto', system-ui, sans-serif; -webkit-font-smoothing: antialiased }
pre { max-width: 100%; overflow-x: auto }
code { overflow-wrap: anywhere }
img { max-width: 100%; height: auto; display: block }
a { color: hsl(259 42% 34%) }
a:hover { color: hsl(259 42% 24%) }
h1,h2,h3,h4 { line-height: 1.2 }
h1,h2,h3,h4 { margin: 0 0 .64em; font-weight: 600 }
h1,h2,h3,h4 { font-family: 'Martian Mono', Menlo, Consolas, monospace; letter-spacing: 0 }
h1 { font-size: 1.89rem }
h2 { margin-top: 1.76em; font-size: 1.40rem }
h3 { font-size: 1.06rem; margin-top: 1.3em }
h2 span[id],h3 span[id] { scroll-margin-top: 5.625rem }
.copy { max-width: 100% }
.copy p { margin-bottom: 1.2em }
.copy ul,.copy ol { margin: 0 0 1.18em; padding-left: 1.42em }
.copy li { margin: .33em 0 }
.copy table { display: block; overflow-x: auto }
.copy table { font-size: .94em; border-collapse: collapse }
.copy table { width: 100%; margin: 1.21em 0 }
.copy th,.copy td { border: 0.063rem solid hsl(35 25% 84%); text-align: left; padding: 0.5rem 0.75rem 0.5rem 0.75rem }
.copy th { background: hsl(40 45% 91%); font-weight: 600 }
.copy blockquote { padding: 0.75rem 1.188rem; margin-top: 1.21em }
.copy blockquote { border-left: 0.25rem solid hsl(79 52% 40%); background: hsl(40 40% 99%) }
.copy blockquote { margin-bottom: 1.21em; border-radius: 0.5rem }
.copy .cite { white-space: nowrap; font-size: .8em }
.copy .cite a { border-bottom: 0.063rem dotted hsl(79 52% 40%); text-decoration: none }
.copy code { background: hsl(40 45% 91%); padding: 0.063rem 0.313rem }
.copy code { border-radius: 0.25rem; font-size: .92em }
.copy img { margin-top: .96em; margin-bottom: .96em; border-radius: 0.5rem }
.key_takeaway { background: hsl(40 45% 91%); border-left: 0.25rem solid hsl(259 42% 34%) }
.key_takeaway { font-size: 1.06em; border-radius: 0.5rem; margin-bottom: 1.625rem; padding: 1.188rem 1.438rem }
.key_takeaway p:last-child { margin-bottom: 0 }
.verdict_grid { grid-template-columns: 1fr 1fr; display: grid; margin: 1.313rem 0; row-gap: 0.375rem; column-gap: 1.063rem }
.verdict_grid dt { font-size: 1.1em; grid-row: 1; font-family: 'Martian Mono', Menlo, Consolas, monospace; font-weight: 700 }
.verdict_grid dd { border: 0.063rem solid hsl(35 25% 84%) }
.verdict_grid dd { margin: 0; grid-row: 2 }
.verdict_grid dd { border-radius: 0.563rem; background: hsl(40 40% 99%); padding: 0.938rem 1.313rem }
.verdict_grid ul { padding-left: 1.2em; margin: 0 }
.references { font-size: .9em; color: hsl(30 10% 42%); margin: 2.25rem 0 0 }
.references { border-top: 0.063rem solid hsl(35 25% 84%); padding-top: 1.063rem }
.references ol { padding-left: 1.44em }
.references li { margin-bottom: .31em; word-break: break-word; margin-top: .31em }
.references a { color: hsl(30 10% 42%) }
.quote { background: hsl(40 40% 99%); border-radius: 0.5rem; padding: 1.25rem 1.563rem; border-left: 0.25rem solid hsl(79 52% 40%); margin-bottom: 1.5rem; font-style: italic }
.quote { font-size: 1.15em; margin-top: 1.5rem }
.promo { text-align: center; color: #fff; margin-bottom: 2.438rem }
.promo { background: hsl(259 42% 34%); padding: 2.125rem; margin-top: 2.438rem; border-radius: 0.5rem }
.promo p:first-child { line-height: 1.2; margin-top: 0; font-family: 'Martian Mono', Menlo, Consolas, monospace }
.promo p:first-child { color: inherit; font-size: 1.26rem }
ul.gallery { padding: 0; list-style: none }
.perks { margin-top: 1.25rem; margin-bottom: 1.25rem }
.perks dt { font-family: 'Martian Mono', Menlo, Consolas, monospace; font-weight: 700 }
.perks dt { margin-top: .98em; font-size: 1.05em }
.perks dd { border-left: 0.125rem solid hsl(35 25% 84%) }
.perks dd { margin: 0.25rem 0 0; color: hsl(30 10% 42%); padding-left: 0.938rem }
.action { background: hsl(79 52% 40%) }
.action { display: inline-block; border-radius: 0.5rem; text-decoration-line: none; color: #fff; padding: 0.688rem 1.625rem; font-weight: 600; margin-top: 0.625rem }
.action:hover { color: #fff }
.gallery { margin-bottom: 1.5rem; margin-top: 1.5rem; gap: 1.438rem; grid-template-columns: repeat(auto-fill,minmax(15.625rem,1fr)); display: grid }
.panela { border: 0.063rem solid hsl(35 25% 84%); flex-direction: column; padding: 1.188rem; background: hsl(40 40% 99%); display: flex }
.panela { border-radius: 0.5rem; gap: 0.563rem }
.panela h3 { font-size: 1.08em; margin: 0rem }
.panela p { color: hsl(30 10% 42%); margin: 0; font-size: .95em }
.panela a { text-decoration: none; font-weight: 600 }
.menu_check { display: none }
.menu_button { padding: 0.313rem 0.688rem; letter-spacing: .06em; display: none; cursor: pointer; border: 0.063rem solid currentColor; font: inherit; align-items: center; text-transform: uppercase }
.menu_button { border-radius: 0.375rem; font-size: .85em }
.article_info { color: hsl(30 10% 42%); flex-wrap: wrap; margin: 0 0 1.063rem; gap: 0.5rem 1.063rem; display: flex; font-size: .9em }
.crumbs { font-size: .88em; margin-bottom: 0.875rem; color: hsl(30 10% 42%) }
.crumbs a { text-decoration: none; color: hsl(30 10% 42%) }
.overline { color: hsl(79 52% 40%); margin: 0 0 0.688rem; font-size: .76em }
.overline { font-weight: 700; display: inline-block; text-transform: uppercase; letter-spacing: .08em }
.visual figcaption { font-size: .85em; margin: 0.5rem 0 0; color: hsl(30 10% 42%) }
.instructions .visual, .copy .visual { margin: 0.875rem 0 0.375rem }
.instructions .visual img { width: 100%; border-radius: 0.375rem }
.see_also { margin-top: 3.188rem }
ul.article_info { padding: 0; list-style: none }
.see_also a.panela { text-decoration: none; color: inherit }
.see_also a.panela strong { display: block }
.see_also a.panela small { display: block; font-size: .92em; color: hsl(30 10% 42%) }
.copy .task { color: hsl(79 52% 40%); margin-right: 0.25rem }
.qa details { padding: 0.813rem 1.125rem; margin: 0.688rem 0 0.688rem 0 }
.qa details { border: 0.063rem solid hsl(35 25% 84%); background: hsl(40 40% 99%); border-radius: 0.5rem }
.qa summary { font-weight: 600; cursor: pointer }
.qa details>div { padding-top: 0.5rem }
.instructions { margin: 1.188rem 0 }
.instructions>div { display: flex }
.instructions>div { gap: 1rem; margin-top: 1.188rem }
.instructions>div { margin-bottom: 1.188rem; align-items: flex-start }
.instructions>div>span { height: 2.375rem; background: hsl(259 42% 34%); border-radius: 50%; flex: 0 0 2.375rem }
.instructions>div>span { place-items: center; font-family: 'Martian Mono', Menlo, Consolas, monospace; font-weight: 700; color: #fff; display: grid }
.instructions h3 { margin: 0.375rem 0 0.25rem }
.wrapper { padding: 0 1.688rem 0 1.688rem; margin: 0 auto; max-width: 60rem }
.head { padding: 2.063rem 0 0 }
.nav_row { align-items: baseline; display: flex }
.nav_row { border-bottom: 0.063rem solid hsl(30 20% 14%); justify-content: space-between; row-gap: 1.438rem; padding-bottom: 1.125rem; column-gap: 1.438rem; flex-wrap: wrap }
.identity { color: inherit; font-weight: 600 }
.identity { font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase }
.identity { text-decoration: none; font-family: 'Martian Mono', Menlo, Consolas, monospace }
.strapline { padding: 0.688rem 1.875rem 0; color: hsl(30 10% 42%); font-size: .95em }
.links { row-gap: 0; display: flex }
.links { column-gap: 0; font-size: .9em }
.links a { border-left: 0.063rem solid hsl(35 25% 84%) }
.links a { text-decoration: none; padding: 0 0.813rem; color: inherit }
.links a:first-child { padding-left: 0; border-left: 0 }
.links a:hover { color: hsl(259 42% 34%) }
.stage { padding: 3.313rem 0 5.063rem }
.jumbo { margin-bottom: 3.563rem }
.jumbo h1 { max-width: 48.75rem }
.jumbo h1 { font-size: 3rem; margin-bottom: .36em; letter-spacing: -.02em }
.jumbo p { color: hsl(30 10% 42%); font-size: 1.15em }
.jumbo p { max-width: 37.5rem; margin: 0 }
.hero_split { align-items: center }
.hero_split { row-gap: 2.5rem; display: grid }
.hero_split { column-gap: 2.5rem; grid-template-columns: 1fr 16.25rem }
.contents_list { margin-bottom: 2.813rem; padding: 0; list-style: none }
.contents_list { counter-reset: i; border-top: 0.063rem solid hsl(30 20% 14%) }
.contents_list li { padding: 1.313rem 0 1.313rem 4.125rem; position: relative }
.contents_list li { counter-increment: i; border-bottom: 0.063rem solid hsl(35 25% 84%) }
.contents_list li::before { left: 0; position: absolute }
.contents_list li::before { font-family: 'Martian Mono', Menlo, Consolas, monospace; top: 1.5rem; color: hsl(30 10% 42%); content: counter(i, decimal-leading-zero) }
.contents_list li::before { letter-spacing: .08em; font-size: .9em }
.contents_list a { column-gap: 1.188rem; row-gap: 1.188rem }
.contents_list a { color: inherit; align-items: baseline; display: flex }
.contents_list a { text-decoration: none; justify-content: space-between }
.contents_list .title { font-weight: 600 }
.contents_list .title { line-height: 1.2; font-size: 1.45rem; font-family: 'Martian Mono', Menlo, Consolas, monospace }
.contents_list a:hover .title { color: hsl(259 42% 34%) }
.contents_list time { white-space: nowrap; color: hsl(30 10% 42%); font-size: .86em }
.contents_list p { color: hsl(30 10% 42%); margin: 0.5rem 0 0; max-width: 38.75rem }
.article_header { border-bottom: 0.063rem solid hsl(30 20% 14%); margin: 0 0 1.75rem; padding-bottom: 1.563rem }
.article_header h1 { font-size: 2.6rem; max-width: 51.25rem; letter-spacing: -.02em }
.intro { max-width: 42.5rem; font-size: 1.12em; color: hsl(30 10% 42%) }
.overline { color: hsl(30 10% 42%) }
.in_this_article { margin-bottom: 1.875rem; font-size: .9em; color: hsl(30 10% 42%) }
.in_this_article ol,.in_this_article ul { margin: 0.375rem 0 0; padding: 0 0 0 1.41em }
.in_this_article a { color: inherit; text-decoration: none }
.in_this_article a:hover { color: hsl(259 42% 34%) }
.visual { margin: 0 0 1.938rem }
.site_footer { padding: 1.438rem 0 2.625rem; border-top: 0.063rem solid hsl(30 20% 14%) }
.site_footer { font-size: .86em; color: hsl(30 10% 42%) }
.bottom_inner { row-gap: 0.688rem; column-gap: 1.563rem }
.bottom_inner { display: flex; flex-wrap: wrap; justify-content: space-between }
.bottom_inner a { text-decoration-line: none; margin-left: 1.188rem; color: inherit }
.footer_links { padding-top: 0.625rem }
.links ul,.links li { margin: 0; display: contents }
.links ul,.links li { list-style: none; padding: 0 }
.nav_roww { padding-bottom: 0.25rem; border-top: 0.063rem solid hsl(35 25% 84%); padding-top: 0.25rem }
.menu_check:checked~.nav_roww .links { display: flex }
.layout.flip_cols { grid-template-columns: 16.25rem minmax(0,1fr) }
.in_this_article summary { font-weight: 600; cursor: pointer }
.hero_split { align-items: center }
.hero_split { justify-content: space-between; display: flex; column-gap: 1.75rem; flex-wrap: wrap; row-gap: 1.75rem; text-align: left }
.hero_split > div:not(.scene) { flex: 1 1 20rem }
.scene { flex-shrink: 0; max-width: 100%; width: 12.563rem; margin: 0 0 0 auto; display: block }
.scene svg { display: block; height: auto; width: 100% }
.hint { position: relative; border-bottom: 0.063rem dotted hsl(30 10% 42%); cursor: help }
.hint::after { content: attr(data-tip); left: 50%; position: absolute }
.hint::after { bottom: 125%; font-size: .8em; background: hsl(30 20% 14%); white-space: nowrap; padding: 0.5rem 0.75rem 0.5rem 0.75rem; border-radius: 0.375rem; opacity: 0; color: hsl(40 35% 96%); transform: translateX(-50%); pointer-events: none; transition: none }
.hint:hover::after { opacity: 1 }
:focus-visible { outline: 0.188rem solid hsl(79 52% 40%); outline-offset: 0.188rem }
:focus:not(:focus-visible) { outline: none }
.field { width: 100%; padding: 0.688rem 0.938rem }
.field { font: inherit; color: hsl(30 20% 14%); border: 0.063rem solid hsl(35 25% 84%); background: hsl(40 40% 99%); border-radius: 0.5rem }
.field:focus { box-shadow: 0 0 0 0.188rem hsl(259 42% 34% / 0.2); border-color: hsl(259 42% 34%); outline: none }
label { margin-bottom: 0.375rem }
label { font-size: .92em; font-weight: 600; display: block }
textarea { min-height: 8.75rem; resize: vertical }
.share_links { column-gap: 0.375rem; row-gap: 0.375rem; display: flex }
.share_links { margin: 1.5rem 0 1.5rem 0; align-items: center }
.share_links a { height: 2.25rem; align-items: center; border: 0.063rem solid hsl(35 25% 84%); justify-content: center; display: inline-flex; width: 2.25rem }
.share_links a { border-radius: 0.375rem; color: hsl(30 10% 42%) }
.share_links a:hover { border-color: hsl(259 42% 34%); color: hsl(259 42% 34%) }
.to_top { right: 1.25rem; position: fixed }
.to_top { border-radius: 0.5rem; place-items: center; color: #fff; bottom: 1.25rem; width: 2.625rem; display: grid; z-index: 50; text-decoration-line: none; background: hsl(259 42% 34%); height: 2.625rem; box-shadow: 0 0.375rem 1.25rem hsl(30 20% 14% / 0.2) }
.to_top:hover { color: #fff; background: hsl(259 42% 24%) }
.action.ghost { border: 0.063rem solid hsl(259 42% 34%); color: hsl(259 42% 34%); background: transparent }
.action.small { padding: 0.313rem 0.75rem; font-size: .86em }
hr { background: linear-gradient(90deg,transparent,hsl(35 25% 84%),transparent); margin-bottom: 2.5rem }
hr { border: 0; margin-top: 2.5rem; height: 0.063rem }
dialog { max-width: min(35rem,92vw); border: 0; padding: 1.188rem }
dialog { color: hsl(30 20% 14%); background: hsl(40 40% 99%); box-shadow: 0 1.875rem 5rem hsl(30 20% 14% / 0.3); border-radius: 0.5rem }
dialog::backdrop { backdrop-filter: blur(0.188rem); background: hsl(30 20% 14% / 0.5) }
.dialog { inset: 0; position: fixed }
.dialog { z-index: 80; place-items: center; display: grid }
.crumbs ol { display: flex; row-gap: 0.25rem; flex-wrap: wrap; list-style: none; column-gap: 0.5rem }
.crumbs ol { margin: 0rem; padding: 0 }
.crumbs li+li::before { margin-right: 0.5rem; opacity: .5; content: "»" }
kbd { background: hsl(40 40% 99%); padding: 0.125rem 0.375rem; font: inherit }
kbd { font-size: .85em; border: 0.063rem solid hsl(35 25% 84%); border-radius: 0.25rem; border-bottom-width: 0.125rem }
mark { border-radius: 0.125rem; background: hsl(79 52% 40% / 0.35) }
mark { color: inherit; padding: 0 0.188rem }
small { font-size: .82em }
.toast { color: hsl(40 35% 96%); box-shadow: 0 0.625rem 1.875rem hsl(30 20% 14% / 0.25); font-size: .92em; background: hsl(30 20% 14%); padding: 0.75rem 1.125rem; border-radius: 66.75rem; bottom: 2rem; z-index: 90; left: 50% }
.toast { transform: translateX(-50%); position: fixed }
blockquote cite { font-size: .88em; color: hsl(30 10% 42%); display: block }
blockquote cite { font-style: normal; margin-top: 0.5rem }
@media (max-width:640px){h1,h2,h3 { overflow-wrap: anywhere }}
@media (max-width:720px){table { overflow-x: auto; max-width: 100%; display: block }}
@media (max-width:640px){.verdict_grid { grid-template-columns: minmax(0,1fr) }}
@media (max-width:640px){.verdict_grid dt,.verdict_grid dd { grid-row: auto }}
@media (max-width:640px){.verdict_grid { grid-template-columns: minmax(0,1fr) }}
@media (max-width:640px){.menu_button { display: flex }}
@media (max-width:640px){.links { display: none; flex-direction: column; width: 100% }}
@media (max-width:640px){.links { column-gap: 0.5rem; padding: 0.5rem 0 0.75rem; row-gap: 0.5rem }}
@media (max-width:640px){.menu_check:checked~.links { display: flex }}
@media (max-width:640px){.links a { border: 0; padding: 0 }}
@media (max-width:700px){.hero_split { grid-template-columns: minmax(0,1fr) }}
@media (max-width:640px){.jumbo h1,.article_header h1 { font-size: 1.9rem }}
@media (max-width:640px){.contents_list li { padding-left: 2.625rem }}
@media (max-width:640px){.contents_list a { flex-direction: column; row-gap: 0.25rem; column-gap: 0.25rem }}
@media (max-width:900px){.layout.flip_cols { grid-template-columns: minmax(0,1fr) }}
@media (max-width:720px){.scene { margin: 0 auto 0.813rem; width: min(13.75rem, 60vw) }}