:root {
  --rc-brand:#1F5F4A;
}
.rc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.rc-hero-col {
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
}
.rc-hero-kind {
  font: 600 var(--text-xs) var(--font-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rc-parts {
  display: grid;
  grid-template-columns: 1fr 1fr 64px;
  gap: var(--sp-2);
}
.rc-part {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface-card);
  font-size: var(--text-xs);
  color: var(--faint);
  min-width: 0;
}
.rc-part b {
  font-weight: 560;
  color: var(--ink);
  font-size: var(--text-xs);
  line-height: 1.3;
}
.rc-part--img {
  padding: 6px;
}
.rc-part--img img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}
.rc-builds {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
.rc-ad {
  background: var(--surface-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
  font-size: var(--text-xs);
  min-width: 0;
}
.rc-ad img {
  display: block;
  width: 100%;
  height: auto;
}
.rc-ad b {
  display: block;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.rc-ad small {
  display: block;
  color: var(--faint);
  font: var(--text-xs) var(--font-mono);
}
.rc-ad--feed b {
  padding: var(--sp-2) var(--sp-3) 0;
}
.rc-ad--feed span {
  display: block;
  padding: 2px var(--sp-3) 0;
  color: var(--muted);
}
.rc-ad--feed small {
  padding: 4px var(--sp-3) var(--sp-3);
}
.rc-ad--side {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-2);
  align-items: center;
}
.rc-ad--side img {
  border-radius: 6px;
}
.rc-banner {
  aspect-ratio: 300/250;
  background: var(--rc-brand);
  color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  padding: 7% 8%;
  display: grid;
  align-content: start;
  gap: 4%;
  container-type: inline-size;
  min-width: 0;
}
.rc-banner-brand {
  font-size: 5cqw;
  font-weight: 600;
  opacity: .85;
}
.rc-banner b {
  font-size: 10cqw;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 3%;
}
.rc-banner-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 5.4cqw;
  padding: 2.4% 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.rc-banner-row em {
  font-style: normal;
  font-weight: 600;
}
.rc-banner-cta {
  justify-self: start;
  margin-top: 5%;
  background: #fff;
  color: var(--rc-brand);
  font-weight: 600;
  font-size: 5cqw;
  padding: 2.4% 5%;
  border-radius: 999px;
}
.rc-banner-size {
  font: var(--text-xs) var(--font-mono);
  color: var(--faint);
}
.motion .rc-hero:not(.is-visible) .rc-builds {
  transform: translateY(-14px) scale(.97);
}
.motion .rc-hero .rc-builds {
  transition: opacity 600ms ease, transform 700ms var(--ease-out-expo);
}
.rc-table {
  margin: var(--sp-4) 0 var(--sp-5);
}
.rc-table :is(td, th):not(:first-child) {
  text-align: left;
  white-space: normal;
}
.rc-table td:first-child {
  color: var(--muted);
  width: 28%;
}
.rc-table th {
  color: var(--ink);
  font-weight: 560;
}
.rc-specs {
  margin: var(--sp-5) 0 var(--sp-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-alt);
  padding: var(--sp-5);
}
.rc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.rc-tabs button {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 520;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-card);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-state) ease, border-color var(--dur-state) ease;
}
.rc-tabs button:hover {
  border-color: var(--border-hover);
}
.rc-tabs button[aria-selected=true] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface-card);
}
.rc-panel[hidden] {
  display: none;
}
.rc-specs:not(.is-ready) .rc-panel + .rc-panel {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}
.rc-dl {
  display: grid;
  gap: 0;
  margin: 0;
}
.rc-dl div {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: var(--sp-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.rc-dl dt {
  color: var(--muted);
  font-size: var(--text-sm);
}
.rc-dl dd {
  margin: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.prose .rc-panel-note {
  margin: var(--sp-4) 0 0;
  font-size: var(--text-sm);
}
.prose :is(.rc-crop, .rc-quiz) .tv-label {
  font: var(--text-xs) var(--font-mono);
  color: var(--faint);
  margin: 0 0 var(--sp-3);
}
.prose .rc-sizes {
  margin-top: var(--sp-4);
}
.rc-sizes :is(td, th) {
  text-align: left !important;
}
.rc-crop {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  margin: var(--sp-5) 0 var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-alt);
}
.rc-crop-src {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  min-width: 0;
}
.rc-crop-src .tv-label {
  margin: 0;
}
.rc-crop-stage {
  position: relative;
  touch-action: none;
  user-select: none;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-1);
  cursor: crosshair;
}
.rc-crop-stage img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.rc-crop-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--primary), var(--sh-2);
  cursor: grab;
  padding: 0;
}
.rc-crop-dot:active {
  cursor: grabbing;
}
.rc-crop-file {
  justify-self: start;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.rc-crop-file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.rc-crop-file:focus-within {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}
.prose .rc-crop-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--faint);
}
.rc-crop-out {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-content: start;
  align-items: end;
}
.rc-crop-out figure {
  margin: 0;
  display: grid;
  gap: 6px;
  justify-items: center;
}
.rc-crop-out figcaption {
  font: 600 var(--text-xs) var(--font-mono);
  color: var(--muted);
}
.rc-frame {
  width: 100%;
  border-radius: var(--r-sm);
  background-color: var(--surface-card);
  background-repeat: no-repeat;
  box-shadow: var(--sh-1);
  outline: 1px solid var(--line-soft);
}
.rc-frame--1x1 {
  aspect-ratio: 1;
  width: 82%;
}
.rc-frame--4x3 {
  aspect-ratio: 4/3;
}
.rc-frame--3x4 {
  aspect-ratio: 3/4;
  width: 62%;
}
.rc-frame--16x9 {
  aspect-ratio: 16/9;
}
.rc-aside {
  font-size: var(--text-sm);
  color: var(--muted);
}
.rc-shrink {
  margin: var(--sp-5) 0;
  padding: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-alt);
}
.rc-shrink-ctl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 64px;
  gap: var(--sp-4);
  align-items: center;
  margin-bottom: var(--sp-5);
  font-size: var(--text-sm);
}
.rc-shrink-ctl input {
  width: 100%;
  accent-color: var(--primary);
}
.rc-shrink-ctl output {
  font: 600 var(--text-sm) var(--font-mono);
  text-align: right;
}
.rc-shrink-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: end;
  min-height: 120px;
}
.rc-shrink-item {
  margin: 0;
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  min-width: 0;
}
.rc-shrink-item figcaption {
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
}
.rc-shrink-box {
  width: 100%;
  max-width: 100%;
  container-type: inline-size;
}
.rc-shrink-box img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.rc-busy {
  aspect-ratio: 4/3;
  background: #fff;
  color: #1b1b1b;
  border-radius: 4px;
  padding: 4cqw;
  display: grid;
  align-content: start;
  gap: 1.6cqw;
  position: relative;
  overflow: hidden;
  outline: 1px solid var(--line-soft);
  font-family: var(--font-sans);
}
.rc-busy-logo {
  font-size: 7cqw;
  font-weight: 800;
  color: var(--rc-brand);
  line-height: 1;
  display: grid;
  gap: .5cqw;
}
.rc-busy-logo small {
  font-size: 2.6cqw;
  font-weight: 500;
  color: #666;
}
.rc-busy b {
  font-size: 5.2cqw;
  line-height: 1.1;
}
.rc-busy ul {
  display: block;
  margin: 0;
  padding: 0 0 0 4cqw;
  font-size: 3.4cqw;
  line-height: 1.35;
  columns: 2;
}
.rc-busy li {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.rc-busy-sale {
  justify-self: start;
  background: #e2252b;
  color: #fff;
  font-weight: 700;
  font-size: 4cqw;
  padding: .8cqw 2cqw;
  border-radius: 1cqw;
  transform: rotate(-3deg);
}
.rc-busy-fine {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  bottom: 2cqw;
  font-size: 2cqw;
  color: #777;
  line-height: 1.2;
}
.rc-approaches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-5);
}
.rc-approaches figure {
  margin: 0;
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.rc-approaches img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  display: block;
}
.rc-approaches figcaption {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.45;
}
.rc-approaches figcaption b {
  color: var(--ink);
}
.rc-spot {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-6);
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-alt);
}
.rc-spot-banner {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--rc-brand);
  color: #fff;
  border: 7px solid #ffd400;
  border-radius: var(--r-sm);
  padding: 7% 7% 12%;
  display: grid;
  align-content: start;
  gap: 3%;
  container-type: inline-size;
  align-self: start;
}
.rc-spot-brand {
  font-size: 4.4cqw;
  font-weight: 600;
  opacity: .85;
}
.rc-spot-title {
  font-size: 9cqw;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.02em;
  max-width: 72%;
}
.rc-spot-sub {
  font-size: 4.2cqw;
  opacity: .9;
  max-width: 66%;
}
.rc-spot-qr {
  position: absolute;
  right: 7%;
  top: 38%;
  width: 20%;
  aspect-ratio: 1;
  border: 1.6cqw solid #fff;
  border-radius: 2px;
  background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0/28.5% 28.5%, #fff;
}
.rc-spot-cta {
  justify-self: start;
  margin-top: 3%;
  background: #fff;
  color: var(--rc-brand);
  font-weight: 600;
  font-size: 4.2cqw;
  padding: 1.6cqw 4cqw;
  border-radius: 999px;
}
.rc-spot-x {
  position: absolute;
  right: 3%;
  top: 3%;
  width: 7cqw;
  height: 7cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  font-size: 5cqw;
  line-height: 1;
}
.rc-spot-fine {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 3%;
  font-size: 2.3cqw;
  opacity: .75;
}
.rc-hot {
  position: absolute;
  border: 2px dashed transparent;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--dur-state) ease, background var(--dur-state) ease;
}
.rc-hot:hover,
.rc-hot:focus-visible {
  border-color: rgba(255, 255, 255, .7);
}
.rc-hot.is-found {
  border-color: #fff;
  border-style: solid;
  background: rgba(255, 255, 255, .12);
}
.rc-hot--x {
  right: 1%;
  top: 1%;
  width: 12%;
  height: 14%;
}
.rc-hot--title {
  left: 5%;
  top: 19%;
  width: 70%;
  height: 25%;
}
.rc-hot--qr {
  right: 5%;
  top: 35%;
  width: 25%;
  height: 34%;
}
.rc-hot--fine {
  left: 5%;
  right: 5%;
  bottom: 1%;
  height: 10%;
}
.rc-hot--frame {
  inset: -7px;
  border-radius: var(--r-sm);
  z-index: -1;
}
.rc-hot--frame.is-found {
  z-index: 0;
  pointer-events: none;
  background: transparent;
  border-color: var(--important-solid);
}
.rc-spot-banner {
  z-index: 0;
  isolation: isolate;
}
.rc-spot-side {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  min-width: 0;
}
.rc-spot-count {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}
.rc-spot-count b {
  font: 700 var(--text-xl) var(--font-mono);
  color: var(--ink);
}
.rc-spot-list {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.rc-spot-list li {
  animation: rc-in 360ms var(--ease-out-expo);
}
.rc-spot-all {
  justify-self: start;
}
@keyframes rc-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.rc-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-5);
}
.rc-rule {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: var(--surface-card);
}
.rc-rule h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--text-md);
}
.rc-rule ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--text-sm);
  display: grid;
  gap: 6px;
}
.rc-rule--no {
  background: var(--important-fill);
  border-color: var(--important-line);
}
.rc-rule--no h3 {
  color: var(--important-text);
}
.rc-rule--soft {
  background: var(--warning-fill);
  border-color: var(--warning-line);
}
.rc-rule--soft h3 {
  color: var(--warning-text);
}
.rc-rule--yes {
  background: var(--success-fill);
  border-color: var(--success-line);
}
.rc-rule--yes h3 {
  color: var(--success-text);
}
.rc-quiz {
  margin: var(--sp-4) 0 var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-alt);
}
.rc-quiz-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.rc-quiz-opt {
  font: inherit;
  text-align: left;
  display: grid;
  gap: 4px;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-card);
  color: var(--ink);
  cursor: pointer;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-state) ease, box-shadow var(--dur-state) ease;
}
.rc-quiz-opt b {
  font-size: var(--text-md);
  margin-bottom: 4px;
}
.rc-quiz-opt span {
  color: var(--muted);
}
.rc-quiz-opt em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}
.rc-quiz-opt:hover {
  border-color: var(--border-hover);
}
.rc-quiz-opt[aria-checked=true] {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.rc-quiz-answer p {
  margin: var(--sp-4) 0 0;
  font-size: var(--text-sm);
  animation: rc-in 360ms var(--ease-out-expo);
}
.thumb--crv {
  background:
    linear-gradient(
      160deg,
      var(--success-fill),
      var(--surface-card));
}
.thumb--crv i {
  position: absolute;
  background: var(--rc-brand);
  border-radius: 6px;
  box-shadow: var(--sh-1);
  border: 2px solid var(--surface-card);
}
.thumb--crv i:nth-child(1) {
  width: 64px;
  height: 48px;
  left: 18px;
  top: 22px;
}
.thumb--crv i:nth-child(2) {
  width: 44px;
  height: 44px;
  left: 66px;
  top: 34px;
  opacity: .85;
}
.thumb--crv i:nth-child(3) {
  width: 72px;
  height: 40px;
  left: 34px;
  top: 62px;
  opacity: .7;
}
.motion .thumb--crv i {
  animation: crv-t 5s var(--ease-out-expo) 2 both;
}
.motion .thumb--crv i:nth-child(2) {
  animation-delay: .25s;
}
.motion .thumb--crv i:nth-child(3) {
  animation-delay: .5s;
}
@keyframes crv-t {
  0% {
    transform: translateY(6px);
    opacity: 0;
  }
  18%, 100% {
    transform: none;
  }
}
@media (max-width: 760px) {
  .rc-hero-grid,
  .rc-crop,
  .rc-spot {
    grid-template-columns: 1fr;
  }
  .rc-banner {
    max-width: 300px;
  }
  .rc-approaches {
    grid-template-columns: 1fr 1fr;
  }
  .rc-rules,
  .rc-quiz-opts {
    grid-template-columns: 1fr;
  }
  .rc-dl div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
@media (max-width: 480px) {
  .rc-parts {
    grid-template-columns: 1fr 1fr;
  }
  .rc-part--img {
    display: none;
  }
  .rc-builds {
    grid-template-columns: 1fr;
  }
  .rc-shrink-ctl {
    grid-template-columns: 1fr 64px;
  }
  .rc-shrink-ctl label {
    grid-column: 1/-1;
  }
  .rc-shrink-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}