:root {
  --yn-red: #DE1A1A;
  --yn-red-deep: #B81414;
  --yn-ink: #1F1F1F;
  --yn-sub: #3F3F3F;
  --yn-muted: #5F5F5F;
  --yn-line: #E3E3E3;
  --yn-tint: #FFF8F8;
  --yn-soft: #FAFAFA;
  --yn-paper: #FFFFFF;
  --yn-yellow: #FFD200;
  --mast-h: 52px;
  --gx: var(--gutter, 16px);
  --frame: calc(680px + 2 * var(--gx));
  color-scheme: light;
  scroll-padding-block-start: calc(var(--mast-h) + 16px);
}
@media (min-width: 1000px) { :root { --frame: 1120px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--yn-paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--yn-paper); color: var(--yn-ink);
  font: 400 1rem/1.6 var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; }
a { color: inherit; }
b, strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--frame); margin-inline: auto; padding-inline: var(--gx); }

.ext { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.back__arrow { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .ext, [dir="rtl"] .back__arrow, [dir="rtl"] .arrow { transform: scaleX(-1); }

.skip {
  position: absolute; z-index: 60; inset-block-start: 8px; inset-inline-start: 8px;
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 16px; border-radius: var(--radius-sm);
  background: var(--ra-obsidian); color: var(--ra-cream); font: 600 var(--fs-small)/1 var(--font-body); text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}
.skip:focus { transform: none; outline: 2px solid var(--ra-lavender); outline-offset: 2px; }

.back { background: var(--ra-ink); color: var(--ra-cream); color-scheme: dark; }
.back__in { display: flex; align-items: center; min-height: 48px; }
.back__link, .foot__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 2px;
  color: var(--ra-cream); font: 500 var(--fs-small)/1.2 var(--font-body); text-decoration: none;
}
.back__link .back__arrow, .foot__link .back__arrow { color: var(--ra-muted); }
.back__mark { width: 30px; }
@media (hover: hover) {
  .back__link:hover span, .foot__link:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .back__link:hover .back__arrow, .foot__link:hover .back__arrow { color: var(--ra-cream); }
}

.demo { background: var(--ra-obsidian); color: var(--ra-cream); color-scheme: dark; border-block-end: 1px solid var(--ra-graphite); }
.demo__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; padding-block: 2px; font: 400 var(--fs-small)/1.5 var(--font-body); }
.demo__text { padding-block: 10px; text-wrap: balance; }
.demo__tag {
  display: inline-block; margin-inline-end: 6px; padding: 3px 8px 2px; border-radius: 3px; vertical-align: 1px;
  background: var(--yn-yellow); color: #000; font: 600 .6875rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.demo__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--ra-lavender); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
@media (hover: hover) { .demo__link:hover { color: var(--ra-cream); } }

html.is-embed .demo__in { padding-inline-end: max(var(--gx), 64px); }

.back__link:focus-visible, .foot__link:focus-visible, .demo__link:focus-visible, .me__wa:focus-visible {
  outline: 2px solid var(--ra-lavender); outline-offset: 2px; border-radius: 4px;
}

.mast { position: sticky; inset-block-start: 0; z-index: 30; background: var(--yn-red); color: #FFF; box-shadow: 0 1px 0 rgba(0, 0, 0, .1); }
.mast__in { display: flex; align-items: center; gap: 14px; min-height: var(--mast-h); }
.mast__logo { font: 700 2.125rem/1 var(--font-display); letter-spacing: -.06em; padding-block-end: 4px; }
.mast__demo {
  padding: 4px 8px 3px; border-radius: 3px; background: #000; color: var(--yn-yellow);
  font: 600 .6875rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.mast__nav { display: flex; gap: 24px; margin-inline-start: 26px; font: 500 .9375rem/1 var(--font-body); }
.mast__nav .is-on { box-shadow: 0 2px 0 #FFF; padding-block: 6px; }
.mast__nav span { cursor: default; }
@media (max-width: 899px) { .mast__nav { display: none; } }

.page {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "side" "note";
  row-gap: 40px; width: 100%; max-width: var(--frame); margin-inline: auto; padding: 28px var(--gx) 48px;
}
.art { grid-area: art; min-width: 0; }
.art:focus { outline: none; }
.side { grid-area: side; min-width: 0; display: grid; gap: 28px; align-content: start; }
.note { grid-area: note; }
@media (min-width: 600px) and (max-width: 999px) { .side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; } }
@media (min-width: 1000px) {
  .page { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "art side" "note side"; column-gap: 64px; padding-block-start: 36px; }
}

@media (min-width: 1000px) and (min-height: 760px) {
  .side { position: sticky; inset-block-start: calc(var(--mast-h) + 28px); align-self: start; }
}

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-block-end: 18px; font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--yn-red); }
.crumbs__sep { font-weight: 400; color: #B5B5B5; }
.plus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-block-end: 14px; font: 500 .8125rem/1.3 var(--font-body); color: var(--yn-muted); }
.plus__tag { padding: 4px 8px 3px; background: #000; color: var(--yn-yellow); font: 700 .8125rem/1.1 var(--font-display); letter-spacing: -.01em; }
.title {
  margin-block-end: 16px; font: 700 clamp(1.75rem, 1.15rem + 2.3vw, 2.75rem)/1.14 var(--font-display);
  letter-spacing: -.025em; color: var(--yn-ink); text-wrap: balance;
}
.sub { max-width: 60ch; margin-block-end: 22px; font: 400 clamp(1.0625rem, .98rem + .4vw, 1.25rem)/1.5 var(--font-body); color: var(--yn-sub); text-wrap: pretty; }

.by { overflow: hidden; padding-block: 12px; border-block: 1px solid var(--yn-line); font: 400 var(--fs-small)/1.4 var(--font-body); color: var(--yn-muted); }
.by__list { display: flex; flex-wrap: wrap; row-gap: 4px; margin-inline-start: -24px; }
.by__list > span { position: relative; margin-inline-start: 12px; padding-inline-start: 12px; }
.by__list > span::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: .25em; border-inline-start: 1px solid #C4C4C4; }
.by__author { font-weight: 600; color: var(--yn-red); }

.sum { margin-block-start: 28px; padding-block: 20px 22px; padding-inline: 20px 24px; border-inline-start: 4px solid var(--yn-red); background: var(--yn-tint); }
.sum__label { margin-block-end: 8px; font: 700 1.0625rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--yn-red); }
.sum p { font: 500 1.0625rem/1.65 var(--font-body); color: var(--yn-ink); text-wrap: pretty; }

.body { padding-block-start: 28px; font-size: 1.125rem; line-height: 1.75; color: var(--yn-ink); }
.body > p { max-width: 66ch; margin-block-end: 1em; text-wrap: pretty; }
.body__kicker { font-size: 1rem; font-style: italic; color: var(--yn-muted); }
.body h2 { margin-block: 32px 8px; font: 700 1.3125rem/1.3 var(--font-display); letter-spacing: -.012em; color: var(--yn-ink); text-wrap: balance; }
.body__kicker + h2 { margin-block-start: 20px; }
.does { list-style: none; margin-block: 4px 8px; border-block-start: 1px solid var(--yn-line); }
.does li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 2px 20px; padding-block: 12px; border-block-end: 1px solid var(--yn-line); font-size: 1.0625rem; line-height: 1.6; }
.does b { font: 600 .9375rem/1.7 var(--font-body); color: var(--yn-red); }
.pq { margin-block: 36px; padding-block: 20px 18px; border-block-start: 3px solid var(--yn-red); border-block-end: 1px solid var(--yn-line); }
.pq p { font: 600 clamp(1.375rem, 1.15rem + .9vw, 1.75rem)/1.35 var(--font-display); letter-spacing: -.018em; color: var(--yn-ink); text-wrap: balance; text-indent: -.4em; }
.pq figcaption { margin-block-start: 12px; font: 600 .9375rem/1.3 var(--font-body); color: var(--yn-red); }

.cta { margin-block-start: 40px; padding: 22px 24px 24px; border: 1px solid var(--yn-line); border-block-start: 3px solid var(--yn-red); background: var(--yn-soft); }
.cta__title { font: 700 1.25rem/1.3 var(--font-display); letter-spacing: -.01em; color: var(--yn-ink); }
.cta__text { margin-block: 4px 16px; font-size: .9375rem; line-height: 1.5; color: var(--yn-muted); }
.cta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; border-radius: 2px;
  background: var(--yn-red); color: #FFF; font: 600 1.0625rem/1.2 var(--font-body); text-decoration: none;
}
.cta__btn .ext { width: 16px; height: 16px; }

.facts__title { padding-block-end: 8px; border-block-end: 3px solid var(--yn-red); font: 700 1.0625rem/1.2 var(--font-display); color: var(--yn-ink); }
.facts__list > div { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 12px; padding-block: 10px; border-block-end: 1px solid var(--yn-line); font-size: var(--fs-small); line-height: 1.45; }
.facts__list dt { color: var(--yn-muted); }
.facts__list dd { font-weight: 500; color: var(--yn-ink); }
.facts__link {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-block-start: 16px; border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--yn-red); color: var(--yn-red); font: 600 .9375rem/1.2 var(--font-body); text-decoration: none;
}

@media (max-width: 999px) { .facts__link { display: none; } }
@media (hover: hover) {
  .cta__btn:hover { background: var(--yn-red-deep); }
  .facts__link:hover { background: var(--yn-red); color: #FFF; }
}
.cta__btn:focus-visible, .facts__link:focus-visible { outline: 2px solid var(--yn-ink); outline-offset: 3px; }

.me { padding: 18px 20px 20px; border-radius: var(--radius-md); background: var(--ra-obsidian); color: var(--ra-cream); color-scheme: dark; box-shadow: 0 18px 40px -24px rgba(66, 42, 81, .6); }
.me__from { margin-block-end: 14px; font: 500 .75rem/1.3 var(--font-mono); letter-spacing: var(--tracking-mono); color: var(--ra-muted); }
.me__who { display: flex; align-items: center; gap: 14px; margin-block-end: 14px; }
.me__face { flex: none; width: 60px; height: 60px; overflow: hidden; border-radius: 50%; background: #2B2160; }
.me__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.75); transform-origin: 48% 22%; }
.me__name { font: 600 1.125rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ra-cream); }
.me__title { margin-block-start: 4px; font: 400 .75rem/1.4 var(--font-mono); color: var(--ra-muted); }
.me__line { margin-block-end: 16px; font: 400 .9375rem/1.5 var(--font-body); color: var(--ra-cream); }
.me__wa {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 50%), rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: var(--ra-cream); font: 600 var(--fs-small)/1.2 var(--font-body); text-decoration: none;
}
.me__wa .arrow { display: inline-block; }
@media (hover: hover) { .me__wa:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .16); } }

.note { padding-block-start: 18px; border-block-start: 1px solid var(--yn-line); font: 400 .8125rem/1.6 var(--font-body); color: var(--yn-muted); }
.note p { max-width: 78ch; }
.note b { color: var(--yn-ink); }

.foot { background: var(--ra-ink); color: var(--ra-cream); color-scheme: dark; }
.foot__in { display: flex; align-items: center; min-height: 64px; padding-block-end: env(safe-area-inset-bottom); }

html.is-embed .back, html.is-embed .foot { display: none; }

html[data-review] [data-copy="proposal"] { outline: 1px dashed #6C4DC4; outline-offset: 3px; }

@media (max-width: 599px) {
  :root { --mast-h: 48px; }
  .mast__logo { font-size: 1.875rem; }
  .page { row-gap: 32px; padding-block: 20px 36px; }
  .crumbs { margin-block-end: 14px; }
  .by { font-size: .8125rem; }
  .by__list { margin-inline-start: -20px; }
  .by__list > span { margin-inline-start: 10px; padding-inline-start: 10px; }
  .sum { padding-block: 16px 18px; padding-inline: 16px; }
  .body { font-size: 1.0625rem; line-height: 1.7; }
  .body h2 { margin-block-start: 28px; font-size: 1.1875rem; }
  .does li { grid-template-columns: minmax(0, 1fr); }
  .pq { margin-block: 28px; }
  .cta { padding: 20px 16px; }
  .cta__btn { width: 100%; }
}