:where(.kit) p, :where(.kit) h3, :where(.kit) dl, :where(.kit) dd, :where(.kit) figure { margin: 0; }

.ra-header .ra-nav { flex-wrap: wrap; row-gap: 0; }
.ra-header .ra-nav a { flex-shrink: 0; }

.ra-btn .kit-down, .ra-btn:hover .kit-down, .ra-btn.is-hover .kit-down { transform: none; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) {
  .ra-btn:hover .kit-down, [dir="rtl"] .ra-btn:hover .kit-down { transform: translateY(2px); }
}

.kit-nobr { white-space: nowrap; }

.kit-u { position: relative; white-space: nowrap; }
.kit-u::after {
  content: ""; position: absolute; pointer-events: none;
  inset-inline: 0; inset-block-end: -.06em; height: max(2px, .055em); border-radius: 1px;
  background: linear-gradient(90deg, var(--ra-g-magenta), var(--ra-g-violet) 35%, var(--ra-g-indigo) 68%, var(--ra-g-blue));
  transform-origin: 0 50%;
}
[dir="rtl"] .kit-u::after {
  background: linear-gradient(270deg, var(--ra-g-magenta), var(--ra-g-violet) 35%, var(--ra-g-indigo) 68%, var(--ra-g-blue));
  transform-origin: 100% 50%;
}
.motion-ok .appear:not(.is-in) .kit-u::after { transform: scaleX(0); }
.motion-ok .appear.is-in .kit-u::after { animation: kit-draw 1100ms var(--ease-out) 420ms both; }
@keyframes kit-draw { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .kit-u::after { animation: none !important; transform: none !important; } }

.kit-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: center; padding-block: var(--space-7) var(--space-8); }
@media (min-width: 760px) { .kit-hero { padding-block: var(--space-8) var(--space-9); } }
@media (min-width: 960px) {
  .kit-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-8); padding-block: var(--space-9); }
}

.kit-hero__title { margin-block-start: var(--space-4); max-width: 17ch; }
.kit-hero__not { display: block; color: var(--text-muted); }
.kit-hero__lead { margin-block-start: var(--space-5); max-width: 50ch; text-wrap: pretty; }
.kit-hero__cta { display: flex; margin-block-start: var(--space-6); }

.kit-stack { position: relative; width: 100%; max-width: 420px; height: 300px; justify-self: center; }
@media (max-width: 959px) { .kit-stack { justify-self: start; max-width: 380px; height: 250px; } }
.kit-sheet {
  position: absolute; width: 78%; height: 176px; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-tint), var(--surface); box-shadow: var(--elevation-2);
  font: 400 var(--fs-mono)/1.6 var(--font-mono); letter-spacing: .01em; color: var(--text-muted);
}
.kit-sheet__file { color: var(--link); font-weight: 500; }
.kit-sheet__body { display: grid; gap: var(--space-2); align-content: start; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.kit-sheet__h { color: var(--text); }
.kit-sheet--1 { inset-block-start: 0; inset-inline-start: 0; transform: rotate(-4deg); }
.kit-sheet--2 { inset-block-start: 52px; inset-inline-start: 11%; transform: rotate(-1deg); }
.kit-sheet--3 { inset-block-start: 104px; inset-inline-start: 22%; transform: rotate(2.5deg); }
[dir="rtl"] .kit-sheet--1 { transform: rotate(4deg); }
[dir="rtl"] .kit-sheet--2 { transform: rotate(1deg); }
[dir="rtl"] .kit-sheet--3 { transform: rotate(-2.5deg); }
@media (max-width: 959px) {
  .kit-sheet { height: 150px; }
  .kit-sheet--2 { inset-block-start: 44px; }
  .kit-sheet--3 { inset-block-start: 88px; }
}
@media (max-width: 399px) { .kit-sheet { width: 82%; padding-inline: var(--space-4); } .kit-sheet--3 { inset-inline-start: 16%; } .kit-sheet--2 { inset-inline-start: 8%; } }

.kit-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (min-width: 900px) { .kit-sec { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-8); } }
.kit-sec__head { display: grid; gap: var(--space-4); }
.kit-sec__head .ra-h2 { max-width: 18ch; text-wrap: balance; }
.kit-sec__body { display: grid; gap: var(--space-4); max-width: 60ch; color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
@media (min-width: 900px) { .kit-sec__body { padding-block-start: var(--space-6); } }
.kit-sec__body p { text-wrap: pretty; }
.kit-sec__close {
  margin-block-start: var(--space-2); color: var(--text);
  font: 500 var(--fs-lead)/1.45 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance;
}

.kit-principles {
  grid-column: 1 / -1; display: grid; list-style: none; margin: var(--space-6) 0 0; padding: 0;
  border-block-start: 1px solid var(--border);
}
.kit-principle { display: grid; gap: var(--space-3); align-content: start; padding-block: var(--space-6); border-block-end: 1px solid var(--border); }
.kit-principle p { color: var(--text-muted); max-width: 42ch; text-wrap: pretty; }
.kit-principle__n { color: var(--link); }
@media (min-width: 900px) {
  .kit-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-end: 1px solid var(--border); }
  .kit-principle { padding-inline-end: var(--space-6); border-block-end: 0; }
  .kit-principle + .kit-principle { padding-inline-start: var(--space-6); border-inline-start: 1px solid var(--border); }
}

.kit-law { background: var(--bg-deep); border-block: 1px solid var(--border); }
.kit-law__in { padding-block: var(--space-9); }
@media (max-width: 759px) { .kit-law__in { padding-block: var(--space-8); } }
.kit-law__line {
  margin-block-start: var(--space-5); max-width: 20ch; color: var(--text);
  font: 600 var(--fs-h1)/var(--lh-head) var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance;
}
.kit-law__grey { color: var(--text-muted); }
.kit-law__after { margin-block-start: var(--space-6); max-width: 48ch; color: var(--text-muted); font-size: var(--fs-lead); line-height: var(--lh-body); }

.kit-gift.ra-section { padding-block-end: 0; }
.kit-gift__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
@media (min-width: 900px) { .kit-gift__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-8); align-items: center; } }
.kit-gift__intro { display: grid; gap: var(--space-4); }
.kit-gift__intro .ra-h2 { text-wrap: balance; }
.kit-gift__lead { max-width: 54ch; text-wrap: pretty; }

.kit-from { display: grid; gap: var(--space-5); padding: var(--space-5); }
@media (min-width: 760px) { .kit-from { padding: var(--space-6); } }
.kit-from__who { display: flex; align-items: center; gap: var(--space-4); }

.kit-from__ph { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--accent-soft); box-shadow: 0 0 0 1px var(--border); }
.kit-from__ph img { position: absolute; max-width: none; width: 244%; height: auto; left: -68%; top: -50%; }
.kit-from__name { color: var(--text); font: 600 var(--fs-h3)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.kit-from__title { margin-block-start: var(--space-1); text-wrap: balance; }
.kit-from__line { color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
.kit-from__get { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }

.kit-files { list-style: none; margin: var(--space-8) 0 0; padding: 0; border-block-start: 1px solid var(--border); }
@media (max-width: 759px) { .kit-files { margin-block-start: var(--space-7); } }
.kit-file { border-block-end: 1px solid var(--border); }
.kit-file__in {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n name" "defs defs" "get get";
  gap: var(--space-5) var(--space-4); padding-block: var(--space-6);
}
@media (min-width: 900px) {
  .kit-file__in { grid-template-columns: var(--space-8) minmax(0, 1fr) auto; grid-template-areas: "n name get" ". defs defs"; column-gap: var(--space-5); padding-block: var(--space-7); }
}
.kit-file__n { grid-area: n; color: var(--link); padding-block-start: .35em; }
.kit-file__name { grid-area: name; display: grid; gap: var(--space-2); min-width: 0; }
.kit-file__name .ra-h3 { text-wrap: balance; }
@media (min-width: 760px) { .kit-file__name .ra-h3 { font-size: calc(var(--fs-h3) * 1.2); } }
.kit-file__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); overflow-wrap: anywhere; }
.kit-file__tag { color: var(--text); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 2px var(--space-2); font-weight: 500; }
.kit-file__defs { grid-area: defs; display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .kit-file__defs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); } }
.kit-file__defs > div { display: grid; gap: var(--space-2); align-content: start; }
.kit-file__defs dd { color: var(--text-muted); text-wrap: pretty; }
.kit-file__defs a { color: var(--link); text-underline-offset: .18em; padding-block: 11px; }
.kit-file__get { grid-area: get; align-self: start; }
@media (max-width: 519px) { .kit-file__get .ra-btn, .kit-from__get .ra-btn { width: 100%; } }

@media (max-width: 399px) {
  .kit-from { padding: var(--space-4); }
  .kit-from__get .ra-btn, .kit-measure__acts .ra-btn { padding-inline: var(--space-4); white-space: normal; }
}

.kit-code { grid-column: 1 / -1; min-width: 0; margin-block-start: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-deep); overflow: hidden; }
.kit-code__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  padding-block: var(--space-2); padding-inline: var(--space-5) var(--space-2); border-block-end: 1px solid var(--border);
}
.kit-code__file { overflow-wrap: anywhere; }
.kit-copy[hidden] { display: none; }
.kit-copy { min-width: 8.5rem; }
.kit-copy.is-done { color: var(--link); }

.kit-code__pre {
  margin: 0; padding: var(--space-5); color: var(--text);
  font: 400 var(--fs-mono)/1.65 var(--font-mono); letter-spacing: .01em;
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
  text-indent: 3ch hanging each-line;
}
@media (min-width: 760px) { .kit-code__pre { padding: var(--space-6); font-size: var(--fs-small); } }
@media (max-width: 399px) { .kit-code__pre { padding-inline: var(--space-4); } .kit-code__bar { padding-inline-start: var(--space-4); } }
.kit-code__pre code { font: inherit; }
.kit-code__h { color: var(--link); }
.kit-snip__test { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-body); max-width: 68ch; }

.kit-measure__line {
  margin-block-start: var(--space-5); max-width: 22ch; color: var(--text);
  font: 600 var(--fs-h1)/var(--lh-head) var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance;
}
.kit-measure__after { margin-block-start: var(--space-5); max-width: 48ch; color: var(--text-muted); font-size: var(--fs-lead); line-height: var(--lh-body); text-wrap: pretty; }
.kit-measure__acts { display: grid; gap: var(--space-6); justify-items: start; margin-block-start: var(--space-7); }
@media (max-width: 519px) { .kit-measure__acts .ra-btn { width: 100%; } }

.kit-try {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-4);
  width: 100%; max-width: 620px; min-height: 44px; padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); text-decoration: none;
}
.kit-try__k, .kit-try__t, .kit-try__d { grid-column: 1; }
.kit-try__t { font: 600 var(--fs-h3)/1.3 var(--font-display); letter-spacing: var(--tracking-display); }
.kit-try__d { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; text-wrap: pretty; }
.kit-try__a { grid-column: 2; grid-row: 1 / span 3; color: var(--link); transition: transform var(--dur-fast) var(--ease-out); }
[dir="rtl"] .kit-try__a { transform: scaleX(-1); }
@media (hover: hover) {
  .kit-try:hover { border-color: var(--link); }
  .kit-try:hover .kit-try__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
  .kit-try:hover .kit-try__a { transform: translateX(3px); }
  [dir="rtl"] .kit-try:hover .kit-try__a { transform: scaleX(-1) translateX(3px); }
}
.kit-try:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.kit-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .kit-story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-8); } }
.kit-story__text { display: grid; gap: var(--space-4); justify-items: start; }
.kit-story__text .ra-h2 { max-width: 20ch; text-wrap: balance; }
.kit-story__line { max-width: 52ch; color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
.kit-link { display: inline-flex; align-items: center; column-gap: 1ch; min-height: 44px; color: var(--link); font-weight: 500; text-decoration: none; }
.kit-link__a { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
[dir="rtl"] .kit-link__a { transform: scaleX(-1); }
@media (hover: hover) {
  .kit-link:hover span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  .kit-link:hover .kit-link__a { transform: translateX(3px); }
  [dir="rtl"] .kit-link:hover .kit-link__a { transform: scaleX(-1) translateX(3px); }
}

.kit-end__title { max-width: 24ch; text-wrap: balance; }
.kit-end__cta { display: flex; margin-block-start: var(--space-6); }
@media (max-width: 519px) { .kit-end__cta .ra-btn-wrap, .kit-end__cta .ra-btn { width: 100%; } }
@media (max-width: 399px) { .kit-end__cta .ra-btn { padding-inline: var(--space-4); } }

.kit-dock {
  position: fixed; z-index: 50;
  inset-block-end: max(var(--space-4), env(safe-area-inset-bottom));
  inset-inline-end: var(--space-4);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.kit-dock.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kit-dock .ra-btn--t2 { background-color: var(--bg); box-shadow: var(--elevation-2); }
.kit-dock .ra-btn--t2:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--link); }
@media (min-width: 720px) { .kit-dock { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .kit-dock { transform: none; }
  .kit-try__a, .kit-link__a, .ra-btn .kit-down { transition: none; }
}